Refactor WhisperButton and ChatBOX components to use Button component for consistency; improve layout and structure

src/components/WhisperButton.tsx

@@ -2,6 +2,7 @@ import { createRef } from "preact";
 
 import { ChatStore } from "@/types/chatstore";
 import { StateUpdater, useEffect, useState, Dispatch } from "preact/hooks";
+import { Button } from "@/components/ui/button";
 
 const WhisperButton = (props: {
   chatStore: ChatStore;
@@ -12,10 +13,9 @@ const WhisperButton = (props: {
   const mediaRef = createRef();
   const [isRecording, setIsRecording] = useState("Mic");
   return (
-    <button
-      className={`btn disabled:line-through disabled:btn-neutral disabled:text-white m-1 p-1 ${
-        isRecording === "Recording" ? "btn-error" : "btn-success"
-      } ${isRecording !== "Mic" ? "animate-pulse" : ""}`}
+    <Button
+      variant={isRecording === "Recording" ? "destructive" : "default"}
+      className={`m-1 p-1 ${isRecording !== "Mic" ? "animate-pulse" : ""}`}
       disabled={isRecording === "Transcribing"}
       ref={mediaRef}
       onClick={async () => {
@@ -38,7 +38,7 @@ const WhisperButton = (props: {
                 } else {
                   return content.map((c) => c?.text).join(" ");
                 }
-              }),
+              })
           )
           .concat([inputMsg])
           .join(" ");
@@ -52,7 +52,7 @@ const WhisperButton = (props: {
             await navigator.mediaDevices.getUserMedia({
               audio: true,
             }),
-            { audioBitsPerSecond: 64 * 1000 },
+            { audioBitsPerSecond: 64 * 1000 }
           );
 
           // mount mediaRecorder to ref
@@ -125,7 +125,7 @@ const WhisperButton = (props: {
       }}
     >
       {isRecording}
-    </button>
+    </Button>
   );
 };
 

src/pages/Chatbox.tsx

@@ -470,8 +470,7 @@ export default function ChatBOX(props: {
           setShow={setShowSearch}
         />
       )}
-
-      <div className="grow overflow-scroll">
+      <ChatMessageList>
         {!chatStore.apiKey && (
           <p className="bg-base-200 p-6 rounded my-3 text-left">
             {Tr("Please click above to set")} (OpenAI) API KEY
@@ -538,7 +537,7 @@ export default function ChatBOX(props: {
             setChatStore={setChatStore}
           />
         )}
-        <ChatMessageList>
+
         {chatStore.history.filter((msg) => !msg.example).length == 0 && (
           <div className="bg-base-200 break-all p-3 my-3 text-left">
             <h2>
@@ -663,7 +662,6 @@ export default function ChatBOX(props: {
         )}
         <div ref={messagesEndRef}></div>
       </ChatMessageList>
-      </div>
       {images.length > 0 && (
         <div className="flex flex-wrap">
           {images.map((image, index) => (
@@ -727,14 +725,14 @@ export default function ChatBOX(props: {
             </Button>
 
             {chatStore.whisper_api && chatStore.whisper_key && (
-              <Button variant="ghost" size="icon">
+              <>
                 <WhisperButton
                   chatStore={chatStore}
                   inputMsg={inputMsg}
                   setInputMsg={setInputMsg}
                 />
                 <span className="sr-only">Use Microphone</span>
-              </Button>
+              </>
             )}
 
             <Button