🔧 fix: minor fixes

Author: Era360

src/chat/chatbox.tsx

@@ -4,7 +4,7 @@ import { CSSProperties, useEffect, useRef, useState } from "react";
 import Button from "./button";
 import Input from "./input";
 import ChatLoader from "./chat-loader";
-import { Attachment, Close, MicIcon, SendIcon } from "../assets/icons";
+import { Attachment, Close, SendIcon } from "../assets/icons";
 import { SarufiIcon } from "../assets/illustrations";
 import Media from "./media";
 import DatePicker from "./message-actions/date-picker";
@@ -267,7 +267,9 @@ const Chatbox = ({
         >
           {!isRecording && (
             <>
-              <button>
+              <button
+                onClick={() => alert("We don't support this feature yet.")}
+              >
                 <Attachment size={18} />
               </button>
               <DatePicker
@@ -279,7 +281,7 @@ const Chatbox = ({
             </>
           )}
           <RecordAudio
-            readFile={(file) => console.log(file.size)}
+            readFile={() => alert("We don't support this feature yet.")}
             saveIsRecording={(record) => setIsRecording(record)}
           />
         </div>

src/chat/message-actions/audio-record.tsx

@@ -6,7 +6,7 @@ import {
   MicIcon,
   Pause,
   Play,
-  RecordingAudioIcon,
+  // RecordingAudioIcon,
   SendIcon,
 } from "../../assets/icons";
 
@@ -204,7 +204,14 @@ const RecordAudio = ({
         <button
           onClick={() => {
             if (recordedAudio.blob) {
-              // URL.revokeObjectURL(recordedAudio.blob);
+              setRecordedAudio({
+                file: null,
+                blob: "",
+                error: "",
+                fileBuffer: null,
+              });
+              setRecordingDuration(0);
+              saveIsRecording(false);
             } else handleStopRecording();
           }}
           disabled={!isRecording || disabled}
@@ -232,7 +239,7 @@ const RecordAudio = ({
             gap: "0.5rem",
           }}
         >
-          <RecordingAudioIcon size={18} />
+          {/* <RecordingAudioIcon size={18} /> */}
           <span>{formatDuration(recordingDuration)}</span>
         </div>
       )}

src/chat/message-actions/date-picker.tsx

@@ -12,12 +12,6 @@ interface DatePickerProps {
   styles?: CSSProperties;
 }
 
-// A date picker component that allows the user to select a date from a calendar.
-// only an icon is displayed when clicked a calendar view is seen, after selecting date, onSelect callback is called.
-// use normal input for a date picker.
-// Example:
-// <span class="datepicker-toggle-button"></span>
-// <input type="date" class="datepicker-input"></input>
 const DatePicker = ({
   styles,
   selectedDate,
@@ -38,7 +32,9 @@ const DatePicker = ({
         type="date"
         className="datepicker-input"
         value={date.toISOString().split("T")[0]}
-        onChange={(e) => handleSelect(new Date(e.target.value))}
+        onChange={(e) =>
+          e.target.value && handleSelect(new Date(e.target.value))
+        }
         min={contraints?.minDate?.toISOString().split("T")[0]}
         max={contraints?.maxDate?.toISOString().split("T")[0]}
       />