From ffd54fa70fbfa7ad152d32dab053009a6a52c7ab Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Wed, 25 Dec 2024 15:24:04 +0800
Subject: [PATCH] Refactor TTSButton to use custom Button component and update
 icons for better UI consistency

---
 src/tts.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/tts.tsx b/src/tts.tsx
index 6848507..903c96c 100644
--- a/src/tts.tsx
+++ b/src/tts.tsx
@@ -4,6 +4,8 @@ import { useMemo, useState } from "preact/hooks";
 import { addTotalCost } from "@/utils/totalCost";
 import { ChatStore, ChatStoreMessage } from "@/types/chatstore";
 import { Message, getMessageText } from "@/chatgpt";
+import { AudioLinesIcon, LoaderCircleIcon } from "lucide-react";
+import { Button } from "./components/ui/button";
 
 interface TTSProps {
   chatStore: ChatStore;
@@ -25,14 +27,16 @@ export function TTSPlay(props: TTSPlayProps) {
     return <></>;
   }
   if (props.chat.audio instanceof Blob) {
-    return <audio className="w-full" src={src} controls />;
+    return <audio className="w-64" src={src} controls />;
   }
   return <></>;
 }
 export default function TTSButton(props: TTSProps) {
   const [generating, setGenerating] = useState(false);
   return (
-    <button
+    <Button
+      variant="ghost"
+      size="icon"
       onClick={() => {
         const api = props.chatStore.tts_api;
         const api_key = props.chatStore.tts_key;
@@ -82,10 +86,10 @@ export default function TTSButton(props: TTSProps) {
       }}
     >
       {generating ? (
-        <span className="loading loading-dots loading-xs"></span>
+        <LoaderCircleIcon className="h-4 w-4 animate-spin" />
       ) : (
-        <SpeakerWaveIcon className="h-4 w-4" />
+        <AudioLinesIcon className="h-4 w-4" />
       )}
-    </button>
+    </Button>
   );
 }