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,132 +537,131 @@ 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>
-                <span>{Tr("Saved prompt templates")}</span>
-                <Button
-                  variant="link"
-                  className="mx-2"
-                  onClick={() => {
-                    chatStore.systemMessageContent = "";
-                    chatStore.toolsString = "";
-                    chatStore.history = [];
-                    setChatStore({ ...chatStore });
-                  }}
-                >
-                  {Tr("Reset Current")}
-                </Button>
-              </h2>
-              <div className="divider"></div>
-              <div className="flex flex-wrap">
-                <Templates
-                  templates={templates}
-                  setTemplates={setTemplates}
-                  chatStore={chatStore}
-                  setChatStore={setChatStore}
-                />
-              </div>
-            </div>
-          )}
-          {chatStore.history.length === 0 && (
-            <p className="break-all opacity-60 p-6 rounded bg-white my-3 text-left dark:text-black">
-              {Tr("No chat history here")}
-              <br />⚙{Tr("Model")}: {chatStore.model}
-              <br />⬆{Tr("Click above to change the settings of this chat")}
-              <br />↖{Tr("Click the conor to create a new chat")}
-              <br />⚠
-              {Tr(
-                "All chat history and settings are stored in the local browser"
-              )}
-              <br />
-            </p>
-          )}
-          {chatStore.systemMessageContent.trim() && (
-            <div className="chat chat-start">
-              <div className="chat-header">Prompt</div>
-              <div
-                className="chat-bubble chat-bubble-accent cursor-pointer message-content"
-                onClick={() => setShowSettings(true)}
-              >
-                {chatStore.systemMessageContent}
-              </div>
-            </div>
-          )}
 
-          {chatStore.history.map((_, messageIndex) => (
-            <Message
-              chatStore={chatStore}
-              setChatStore={setChatStore}
-              messageIndex={messageIndex}
-            />
-          ))}
-          {showGenerating && (
-            <p className="p-2 my-2 animate-pulse message-content">
-              {generatingMessage || Tr("Generating...")}
-              ...
-            </p>
-          )}
-          <p className="text-center">
-            {chatStore.history.length > 0 && (
+        {chatStore.history.filter((msg) => !msg.example).length == 0 && (
+          <div className="bg-base-200 break-all p-3 my-3 text-left">
+            <h2>
+              <span>{Tr("Saved prompt templates")}</span>
               <Button
-                variant="secondary"
-                size="sm"
-                className="m-2"
-                disabled={showGenerating}
-                onClick={async () => {
-                  const messageIndex = chatStore.history.length - 1;
-                  if (chatStore.history[messageIndex].role === "assistant") {
-                    chatStore.history[messageIndex].hide = true;
-                  }
-
+                variant="link"
+                className="mx-2"
+                onClick={() => {
+                  chatStore.systemMessageContent = "";
+                  chatStore.toolsString = "";
+                  chatStore.history = [];
                   setChatStore({ ...chatStore });
-                  await complete();
                 }}
               >
-                {Tr("Re-Generate")}
-              </Button>
-            )}
-            {chatStore.develop_mode && chatStore.history.length > 0 && (
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={showGenerating}
-                onClick={async () => {
-                  await complete();
-                }}
-              >
-                {Tr("Completion")}
+                {Tr("Reset Current")}
               </Button>
+            </h2>
+            <div className="divider"></div>
+            <div className="flex flex-wrap">
+              <Templates
+                templates={templates}
+                setTemplates={setTemplates}
+                chatStore={chatStore}
+                setChatStore={setChatStore}
+              />
+            </div>
+          </div>
+        )}
+        {chatStore.history.length === 0 && (
+          <p className="break-all opacity-60 p-6 rounded bg-white my-3 text-left dark:text-black">
+            {Tr("No chat history here")}
+            <br />⚙{Tr("Model")}: {chatStore.model}
+            <br />⬆{Tr("Click above to change the settings of this chat")}
+            <br />↖{Tr("Click the conor to create a new chat")}
+            <br />⚠
+            {Tr(
+              "All chat history and settings are stored in the local browser"
             )}
+            <br />
           </p>
-          <p className="p-2 my-2 text-center opacity-50 dark:text-white">
-            {chatStore.postBeginIndex !== 0 && (
-              <>
-                <br />
-                {Tr("Info: chat history is too long, forget messages")}:{" "}
-                {chatStore.postBeginIndex}
-              </>
-            )}
+        )}
+        {chatStore.systemMessageContent.trim() && (
+          <div className="chat chat-start">
+            <div className="chat-header">Prompt</div>
+            <div
+              className="chat-bubble chat-bubble-accent cursor-pointer message-content"
+              onClick={() => setShowSettings(true)}
+            >
+              {chatStore.systemMessageContent}
+            </div>
+          </div>
+        )}
+
+        {chatStore.history.map((_, messageIndex) => (
+          <Message
+            chatStore={chatStore}
+            setChatStore={setChatStore}
+            messageIndex={messageIndex}
+          />
+        ))}
+        {showGenerating && (
+          <p className="p-2 my-2 animate-pulse message-content">
+            {generatingMessage || Tr("Generating...")}
+            ...
           </p>
-          <VersionHint chatStore={chatStore} />
-          {showRetry && (
-            <p className="text-right p-2 my-2 dark:text-white">
-              <Button
-                variant="destructive"
-                onClick={async () => {
-                  setShowRetry(false);
-                  await complete();
-                }}
-              >
-                {Tr("Retry")}
-              </Button>
-            </p>
+        )}
+        <p className="text-center">
+          {chatStore.history.length > 0 && (
+            <Button
+              variant="secondary"
+              size="sm"
+              className="m-2"
+              disabled={showGenerating}
+              onClick={async () => {
+                const messageIndex = chatStore.history.length - 1;
+                if (chatStore.history[messageIndex].role === "assistant") {
+                  chatStore.history[messageIndex].hide = true;
+                }
+
+                setChatStore({ ...chatStore });
+                await complete();
+              }}
+            >
+              {Tr("Re-Generate")}
+            </Button>
           )}
-          <div ref={messagesEndRef}></div>
-        </ChatMessageList>
-      </div>
+          {chatStore.develop_mode && chatStore.history.length > 0 && (
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={showGenerating}
+              onClick={async () => {
+                await complete();
+              }}
+            >
+              {Tr("Completion")}
+            </Button>
+          )}
+        </p>
+        <p className="p-2 my-2 text-center opacity-50 dark:text-white">
+          {chatStore.postBeginIndex !== 0 && (
+            <>
+              <br />
+              {Tr("Info: chat history is too long, forget messages")}:{" "}
+              {chatStore.postBeginIndex}
+            </>
+          )}
+        </p>
+        <VersionHint chatStore={chatStore} />
+        {showRetry && (
+          <p className="text-right p-2 my-2 dark:text-white">
+            <Button
+              variant="destructive"
+              onClick={async () => {
+                setShowRetry(false);
+                await complete();
+              }}
+            >
+              {Tr("Retry")}
+            </Button>
+          </p>
+        )}
+        <div ref={messagesEndRef}></div>
+      </ChatMessageList>
       {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