diff --git a/src/addImage.tsx b/src/addImage.tsx
index 7f805a6..cf93ff0 100644
--- a/src/addImage.tsx
+++ b/src/addImage.tsx
@@ -57,7 +57,7 @@ export function AddImage({
             Done
           </button>
         </div>
-        <span class="">
+        <span className="">
           <button
             className="btn btn-secondary btn-sm disabled:btn-disabled"
             onClick={() => {
@@ -121,7 +121,7 @@ export function AddImage({
             <input type="checkbox" checked={enableHighResolution} />
           </span>
         </span>
-        <div class="divider"></div>
+        <div className="divider"></div>
         {chatStore.image_gen_api && chatStore.image_gen_key && (
           <div className="flex flex-col">
             <h3>Generate Image</h3>
@@ -138,7 +138,7 @@ export function AddImage({
             <span className="flex flex-row justify-between items-center m-1 p-1">
               <label>Model: </label>
               <select
-                class="select select-sm select-bordered"
+                className="select select-sm select-bordered"
                 value={imageGenModel}
                 onChange={(e: any) => {
                   setImageGenModel(e.target.value);
@@ -151,7 +151,7 @@ export function AddImage({
             <span className="flex flex-row justify-between items-center m-1 p-1">
               <label>n: </label>
               <input
-                class="input input-sm input-bordered"
+                className="input input-sm input-bordered"
                 value={imageGenN}
                 type="number"
                 min={1}
@@ -162,7 +162,7 @@ export function AddImage({
             <span className="flex flex-row justify-between items-center m-1 p-1">
               <label>Quality: </label>
               <select
-                class="select select-sm select-bordered"
+                className="select select-sm select-bordered"
                 value={imageGenQuality}
                 onChange={(e: any) => setImageGEnQuality(e.target.value)}
               >
@@ -173,7 +173,7 @@ export function AddImage({
             <span className="flex flex-row justify-between items-center m-1 p-1">
               <label>Response Format: </label>
               <select
-                class="select select-sm select-bordered"
+                className="select select-sm select-bordered"
                 value={imageGenResponseFormat}
                 onChange={(e: any) => setImageGenResponseFormat(e.target.value)}
               >
@@ -184,7 +184,7 @@ export function AddImage({
             <span className="flex flex-row justify-between items-center m-1 p-1">
               <label>Size: </label>
               <select
-                class="select select-sm select-bordered"
+                className="select select-sm select-bordered"
                 value={imageGenSize}
                 onChange={(e: any) => setImageGenSize(e.target.value)}
               >
@@ -198,7 +198,7 @@ export function AddImage({
             <span className="flex flex-row justify-between items-center m-1 p-1">
               <label>Style (only dall-e-3): </label>
               <select
-                class="select select-sm select-bordered"
+                className="select select-sm select-bordered"
                 value={imageGenStyle}
                 onChange={(e: any) => setImageGenStyle(e.target.value)}
               >
diff --git a/src/app.tsx b/src/app.tsx
index 333053c..67ebedb 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -412,7 +412,7 @@ export function App() {
           >
             {Tr("NEW")}
           </button>
-          <ul class="pt-2">
+          <ul className="pt-2">
             {(allChatStoreIndexes as number[])
               .slice()
               .reverse()
diff --git a/src/chatbox.tsx b/src/chatbox.tsx
index 541a06e..9512740 100644
--- a/src/chatbox.tsx
+++ b/src/chatbox.tsx
@@ -475,13 +475,13 @@ export default function ChatBOX(props: {
         />
       )}
 
-      <div class="navbar bg-base-100 p-0">
-        <div class="navbar-start">
-          <div class="dropdown lg:hidden">
-            <div tabindex={0} role="button" class="btn btn-ghost btn-circle">
+      <div className="navbar bg-base-100 p-0">
+        <div className="navbar-start">
+          <div className="dropdown lg:hidden">
+            <div tabindex={0} role="button" className="btn btn-ghost btn-circle">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6"
+                className="h-6 w-6"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -496,7 +496,7 @@ export default function ChatBOX(props: {
             </div>
             <ul
               tabindex={0}
-              class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
+              className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
             >
               <li>
                 <p>
@@ -522,85 +522,85 @@ export default function ChatBOX(props: {
           </div>
         </div>
         <div
-          class="navbar-center cursor-pointer py-1"
+          className="navbar-center cursor-pointer py-1"
           onClick={() => {
             setShowSettings(true);
           }}
         >
           {/* the long staus bar */}
-          <div class="stats shadow hidden lg:inline-grid">
-            <div class="stat">
-              <div class="stat-figure text-secondary">
+          <div className="stats shadow hidden lg:inline-grid">
+            <div className="stat">
+              <div className="stat-figure text-secondary">
                 <CubeIcon className="h-10 w-10" />
               </div>
-              <div class="stat-title">Model</div>
-              <div class="stat-value text-base">{chatStore.model}</div>
-              <div class="stat-desc">
+              <div className="stat-title">Model</div>
+              <div className="stat-value text-base">{chatStore.model}</div>
+              <div className="stat-desc">
                 {models[chatStore.model]?.price?.prompt * 1000 * 1000} $/M
                 tokens
               </div>
             </div>
-            <div class="stat">
-              <div class="stat-figure text-secondary">
+            <div className="stat">
+              <div className="stat-figure text-secondary">
                 <SwatchIcon className="h-10 w-10" />
               </div>
-              <div class="stat-title">Mode</div>
-              <div class="stat-value text-base">
+              <div className="stat-title">Mode</div>
+              <div className="stat-value text-base">
                 {chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
               </div>
-              <div class="stat-desc">STREAM/FETCH</div>
+              <div className="stat-desc">STREAM/FETCH</div>
             </div>
 
-            <div class="stat">
-              <div class="stat-figure text-secondary">
+            <div className="stat">
+              <div className="stat-figure text-secondary">
                 <ChatBubbleLeftEllipsisIcon className="h-10 w-10" />
               </div>
-              <div class="stat-title">Tokens</div>
-              <div class="stat-value text-base">{chatStore.totalTokens}</div>
-              <div class="stat-desc">Max: {chatStore.maxTokens}</div>
+              <div className="stat-title">Tokens</div>
+              <div className="stat-value text-base">{chatStore.totalTokens}</div>
+              <div className="stat-desc">Max: {chatStore.maxTokens}</div>
             </div>
 
-            <div class="stat">
-              <div class="stat-figure text-secondary">
+            <div className="stat">
+              <div className="stat-figure text-secondary">
                 <ScissorsIcon className="h-10 w-10" />
               </div>
-              <div class="stat-title">Cut</div>
-              <div class="stat-value text-base">{chatStore.postBeginIndex}</div>
-              <div class="stat-desc">
+              <div className="stat-title">Cut</div>
+              <div className="stat-value text-base">{chatStore.postBeginIndex}</div>
+              <div className="stat-desc">
                 Max: {chatStore.history.filter(({ hide }) => !hide).length}
               </div>
             </div>
 
-            <div class="stat">
-              <div class="stat-figure text-secondary">
+            <div className="stat">
+              <div className="stat-figure text-secondary">
                 <BanknotesIcon className="h-10 w-10" />
               </div>
-              <div class="stat-title">Cost</div>
-              <div class="stat-value text-base">
+              <div className="stat-title">Cost</div>
+              <div className="stat-value text-base">
                 ${chatStore.cost.toFixed(4)}
               </div>
-              <div class="stat-desc">
+              <div className="stat-desc">
                 Accumulated: ${getTotalCost().toFixed(2)}
               </div>
             </div>
           </div>
 
           {/* the short status bar */}
-          <div class="indicator lg:hidden">
+          <div className="indicator lg:hidden">
             {chatStore.totalTokens !== 0 && (
-              <span class="indicator-item badge badge-primary">
+              <span className="indicator-item badge badge-primary">
                 Tokens: {chatStore.totalTokens}
               </span>
             )}
-            <a class="btn btn-ghost text-base sm:text-xl p-0">
+            <a className="btn btn-ghost text-base sm:text-xl p-0">
               <SparklesIcon className="h-4 w-4 hidden sm:block" />
               {chatStore.model}
             </a>
           </div>
         </div>
-        <div class="navbar-end">
+        <div className="navbar-end">
           <button
-            class="btn btn-ghost btn-circle"
+            className="btn btn-ghost btn-circle"
             onClick={(event) => {
               // stop propagation to parent
               event.stopPropagation();
@@ -610,7 +610,7 @@ export default function ChatBOX(props: {
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
+              className="h-6 w-6"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -624,17 +624,17 @@ export default function ChatBOX(props: {
             </svg>
           </button>
           <button
-            class="btn btn-ghost btn-circle hidden sm:block"
+            className="btn btn-ghost btn-circle hidden sm:block"
             onClick={() => setShowSettings(true)}
           >
-            <div class="indicator">
+            <div className="indicator">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="h-6 w-6"
+                className="h-6 w-6"
               >
                 <path
                   stroke-linecap="round"
@@ -648,7 +648,7 @@ export default function ChatBOX(props: {
                 />
               </svg>
 
-              <span class="badge badge-xs badge-primary indicator-item"></span>
+              <span className="badge badge-xs badge-primary indicator-item"></span>
             </div>
           </button>
         </div>
@@ -666,10 +666,10 @@ export default function ChatBOX(props: {
             setShowSearch(true);
           }}
         >
-          <MagnifyingGlassIcon class="w-5 h-5" />
+          <MagnifyingGlassIcon className="w-5 h-5" />
         </button>
-        <div class="hidden lg:inline-grid"></div>
-        <div class="lg:hidden">
+        <div className="hidden lg:inline-grid"></div>
+        <div className="lg:hidden">
           <div>
             <button className="underline">
               {chatStore.systemMessageContent.length > 16
@@ -684,16 +684,16 @@ export default function ChatBOX(props: {
             )}
           </div>
           <div className="text-xs">
-            <span class="underline">{chatStore.model}</span>{" "}
+            <span className="underline">{chatStore.model}</span>{" "}
             <span>
               Tokens:{" "}
-              <span class="underline">
+              <span className="underline">
                 {chatStore.totalTokens}/{chatStore.maxTokens}
               </span>
             </span>{" "}
             <span>
               {Tr("Cut")}:{" "}
-              <span class="underline">
+              <span className="underline">
                 {chatStore.postBeginIndex}/
                 {chatStore.history.filter(({ hide }) => !hide).length}
               </span>{" "}
@@ -789,7 +789,7 @@ export default function ChatBOX(props: {
                 {Tr("Reset Current")}
               </button>
             </h2>
-            <div class="divider"></div>
+            <div className="divider"></div>
             <div className="flex flex-wrap">
               {templates.map((t, index) => (
                 <div
@@ -906,10 +906,10 @@ export default function ChatBOX(props: {
           </p>
         )}
         {chatStore.systemMessageContent.trim() && (
-          <div class="chat chat-start">
-            <div class="chat-header">Prompt</div>
+          <div className="chat chat-start">
+            <div className="chat-header">Prompt</div>
             <div
-              class="chat-bubble chat-bubble-accent cursor-pointer message-content"
+              className="chat-bubble chat-bubble-accent cursor-pointer message-content"
               onClick={() => setShowSettings(true)}
             >
               {chatStore.systemMessageContent}
@@ -1047,7 +1047,7 @@ export default function ChatBOX(props: {
 
       {generatingMessage && (
         <span
-          class="p-2 m-2 rounded bg-white dark:text-black dark:bg-white dark:bg-opacity-50"
+          className="p-2 m-2 rounded bg-white dark:text-black dark:bg-white dark:bg-opacity-50"
           style={{ textAlign: "right" }}
           onClick={() => {
             setFollow(!follow);
diff --git a/src/listAPIs.tsx b/src/listAPIs.tsx
index 591b126..e6bafb4 100644
--- a/src/listAPIs.tsx
+++ b/src/listAPIs.tsx
@@ -45,7 +45,7 @@ export function ListAPIs({
             <span className="w-full text-center">{t.name}</span>
             <span className="flex justify-between gap-x-2">
               <button
-                class="link"
+                className="link"
                 onClick={() => {
                   const name = prompt(`Give **${label}** template a name`);
                   if (!name) {
@@ -58,7 +58,7 @@ export function ListAPIs({
                 Edit
               </button>
               <button
-                class="link"
+                className="link"
                 onClick={() => {
                   if (
                     !confirm(
diff --git a/src/listToolsTemplates.tsx b/src/listToolsTemplates.tsx
index 6bd4083..5b2f0a5 100644
--- a/src/listToolsTemplates.tsx
+++ b/src/listToolsTemplates.tsx
@@ -44,7 +44,7 @@ export function ListToolsTempaltes({
             <span className="w-full text-center">{t.name}</span>
             <span className="flex justify-between gap-x-2">
               <button
-                class="link"
+                className="link"
                 onClick={() => {
                   const name = prompt(`Give **tools** template a name`);
                   if (!name) {
@@ -57,7 +57,7 @@ export function ListToolsTempaltes({
                 Edit
               </button>
               <button
-                class="link"
+                className="link"
                 onClick={() => {
                   if (
                     !confirm(`Are you sure to delete this **tools** template?`)
diff --git a/src/message.tsx b/src/message.tsx
index f615f9d..c3ebf61 100644
--- a/src/message.tsx
+++ b/src/message.tsx
@@ -56,12 +56,12 @@ export default function Message(props: Props) {
     </button>
   );
   const CopiedHint = () => (
-    <div role="alert" class="alert">
+    <div role="alert" className="alert">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
-        class="stroke-info h-6 w-6 shrink-0"
+        className="stroke-info h-6 w-6 shrink-0"
       >
         <path
           stroke-linecap="round"
@@ -169,7 +169,7 @@ export default function Message(props: Props) {
                 </div>
               )}
             </div>
-            <div class="chat-footer opacity-50 flex gap-x-2">
+            <div className="chat-footer opacity-50 flex gap-x-2">
               <DeleteIcon />
               <button onClick={() => setShowEdit(true)}>Edit</button>
               <CopyIcon textToCopy={getMessageText(chat)} />
@@ -194,7 +194,7 @@ export default function Message(props: Props) {
           {showCopiedHint && <CopiedHint />}
           {chatStore.develop_mode && (
             <div
-              class={`gap-1 chat-end flex ${
+              className={`gap-1 chat-end flex ${
                 chat.role === "assistant" ? "justify-start" : "justify-end"
               }`}
             >
diff --git a/src/search.tsx b/src/search.tsx
index 0348a07..cc3afe9 100644
--- a/src/search.tsx
+++ b/src/search.tsx
@@ -141,9 +141,9 @@ export default function Search(props: {
         </div>
         {searchResult.length > 0 && (
           <div className="flex justify-center my-2">
-            <div class="join">
+            <div className="join">
               <button
-                class="join-item btn btn-sm"
+                className="join-item btn btn-sm"
                 disabled={pageIndex === 0}
                 onClick={() => {
                   if (pageIndex === 0) {
@@ -154,12 +154,12 @@ export default function Search(props: {
               >
                 «
               </button>
-              <button class="join-item btn btn-sm">
+              <button className="join-item btn btn-sm">
                 Page {pageIndex + 1} /{" "}
                 {Math.floor(searchResult.length / 10) + 1}
               </button>
               <button
-                class="join-item btn btn-sm"
+                className="join-item btn btn-sm"
                 disabled={pageIndex === Math.floor(searchResult.length / 10)}
                 onClick={() => {
                   if (pageIndex === Math.floor(searchResult.length / 10)) {
diff --git a/src/settings.tsx b/src/settings.tsx
index ce6095a..ab42d41 100644
--- a/src/settings.tsx
+++ b/src/settings.tsx
@@ -44,8 +44,8 @@ const TTS_FORMAT: string[] = ["mp3", "opus", "aac", "flac"];
 
 const Help = (props: { children: any; help: string; field: string }) => {
   return (
-    <div class="b-2">
-      <label class="form-control w-full">{props.children}</label>
+    <div className="b-2">
+      <label className="form-control w-full">{props.children}</label>
     </div>
   );
 };
@@ -64,32 +64,32 @@ const SelectModel = (props: {
   const [useCustomModel, setUseCustomModel] = useState(shouldIUseCustomModel);
   return (
     <Help help={props.help} field="">
-      <div class="label">
-        <span class="flex gap-2 items-center">
-          <ListBulletIcon class="w-4 h-4" />
+      <div className="label">
+        <span className="flex gap-2 items-center">
+          <ListBulletIcon className="w-4 h-4" />
           Model
         </span>{" "}
-        <div class="flex gap-3">
-          <span class="label-text">
-            <span class="label-text flex gap-2 items-center">
-              <Cog6ToothIcon class="w-4 h-4" />
+        <div className="flex gap-3">
+          <span className="label-text">
+            <span className="label-text flex gap-2 items-center">
+              <Cog6ToothIcon className="w-4 h-4" />
               {Tr("Custom")}
             </span>
           </span>
-          <span class="label-text-alt">
+          <span className="label-text-alt">
             <input
               type="checkbox"
               checked={useCustomModel}
-              class="checkbox"
+              className="checkbox"
               onClick={() => {
                 setUseCustomModel(!useCustomModel);
               }}
             />
           </span>
         </div>
-        {/* <span class="label-text-alt">Top Right label</span> */}
+        {/* <span className="label-text-alt">Top Right label</span> */}
       </div>
-      <label class="form-control w-full">
+      <label className="form-control w-full">
         {useCustomModel ? (
           <input
             className="input input-bordered"
@@ -120,7 +120,7 @@ const SelectModel = (props: {
           </select>
         )}
       </label>
-      <div class="pb-5"></div>
+      <div className="pb-5"></div>
     </Help>
   );
 };
@@ -133,10 +133,10 @@ const LongInput = (props: {
   help: string;
 }) => {
   return (
-    <label class="form-control">
-      <div class="label">
-        <span class="label-text">{props.label}</span>
-        <span class="label-text-alt">
+    <label className="form-control">
+      <div className="label">
+        <span className="label-text">{props.label}</span>
+        <span className="label-text-alt">
           <button
             onClick={() => {
               alert(props.help);
@@ -179,9 +179,9 @@ const Input = (props: {
   const [hideInput, setHideInput] = useState(true);
   return (
     <Help field={props.field} help={props.help}>
-      <div class="label">
-        <span class="label-text">{props.field}</span>
-        <span class="label-text-alt">
+      <div className="label">
+        <span className="label-text">{props.field}</span>
+        <span className="label-text-alt">
           <button
             onClick={() => {
               alert(props.help);
@@ -191,10 +191,10 @@ const Input = (props: {
           </button>
         </span>
       </div>
-      <label class="input input-bordered flex items-center gap-2 grow">
+      <label className="input input-bordered flex items-center gap-2 grow">
         {hideInput ? (
           <EyeIcon
-            class="w-4 h-4"
+            className="w-4 h-4"
             onClick={() => {
               setHideInput(!hideInput);
               console.log("clicked", hideInput);
@@ -202,7 +202,7 @@ const Input = (props: {
           />
         ) : (
           <KeyIcon
-            class="w-4 h-4"
+            className="w-4 h-4"
             onClick={() => {
               setHideInput(!hideInput);
               console.log("clicked", hideInput);
@@ -212,7 +212,7 @@ const Input = (props: {
 
         <input
           type={hideInput ? "password" : "text"}
-          class="grow"
+          className="grow"
           value={props.chatStore[props.field]}
           onChange={(event: any) => {
             props.chatStore[props.field] = event.target.value;
@@ -252,10 +252,10 @@ const Slicer = (props: {
   };
   return (
     <Help help={props.help} field={props.field}>
-      <span class="py-3">
-        <div class="form-control">
-          <label class="flex gap-2">
-            <span class="label-text flex items-center gap-2">
+      <span className="py-3">
+        <div className="form-control">
+          <label className="flex gap-2">
+            <span className="label-text flex items-center gap-2">
               <AdjustmentsHorizontalIcon className="w-4 h-4" />
               {props.field}{" "}
               <button
@@ -269,7 +269,7 @@ const Slicer = (props: {
             <input
               type="checkbox"
               checked={props.chatStore[enable_filed_name]}
-              class="checkbox"
+              className="checkbox"
               onClick={() => {
                 setEnabled(!enabled);
               }}
@@ -278,7 +278,7 @@ const Slicer = (props: {
         </div>
       </span>
       {enabled ? (
-        <div class="flex items-center">
+        <div className="flex items-center">
           <input
             disabled={!enabled}
             className="range"
@@ -330,7 +330,7 @@ const Number = (props: {
     <Help help={props.help} field="">
       <span>
         <label className="py-2 flex items-center gap-1">
-          <EllipsisHorizontalCircleIcon class="h-4 w-4" /> {props.field}{" "}
+          <EllipsisHorizontalCircleIcon className="h-4 w-4" /> {props.field}{" "}
           <button
             onClick={() => {
               alert(props.help);
@@ -339,8 +339,8 @@ const Number = (props: {
             <InformationCircleIcon className="w-4 h-4" />
           </button>
           {props.field === "maxGenTokens" && (
-            <div class="form-control">
-              <label class="label grow">
+            <div className="form-control">
+              <label className="label grow">
                 <input
                   type="checkbox"
                   checked={props.chatStore.maxGenTokens_enabled}
@@ -350,7 +350,7 @@ const Number = (props: {
                       !newChatStore.maxGenTokens_enabled;
                     props.setChatStore({ ...newChatStore });
                   }}
-                  class="checkbox"
+                  className="checkbox"
                 />
               </label>
             </div>
@@ -385,10 +385,10 @@ const Choice = (props: {
 }) => {
   return (
     <Help help={props.help} field={props.field}>
-      <div class="form-control">
-        <label class="py-2 flex items-center gap-1">
-          <CheckIcon class="h-4 w-4" />
-          <span class="label-text">{props.field}</span>
+      <div className="form-control">
+        <label className="py-2 flex items-center gap-1">
+          <CheckIcon className="h-4 w-4" />
+          <span className="label-text">{props.field}</span>
           <button
             onClick={() => {
               alert(props.help);
@@ -399,7 +399,7 @@ const Choice = (props: {
           <input
             type="checkbox"
             checked={props.chatStore[props.field]}
-            class="checkbox"
+            className="checkbox"
             onChange={(event: any) => {
               props.chatStore[props.field] = event.target.checked;
               props.setChatStore({ ...props.chatStore });
@@ -478,9 +478,9 @@ export default (props: {
         className="modal-box"
       >
         <div className="flex justify-between items-center mb-2">
-          <h3 class="text-lg font-bold">{Tr("Settings")}</h3>
+          <h3 className="text-lg font-bold">{Tr("Settings")}</h3>
           <button
-            class="btn btn-secondary btn-sm"
+            className="btn btn-secondary btn-sm"
             onClick={() => {
               props.setShow(false);
             }}
@@ -488,15 +488,15 @@ export default (props: {
             {Tr("Close")}
           </button>
         </div>
-        <div class="join join-vertical w-full">
-          <div class="join-item collapse collapse-plus bg-base-200">
+        <div className="join join-vertical w-full">
+          <div className="join-item collapse collapse-plus bg-base-200">
             <input type="radio" name="setting-accordion" />
-            <div class="collapse-title text-xl font-medium">Session</div>
-            <div class="collapse-content">
-              <div class="stats shadow">
-                <div class="stat">
-                  <div class="stat-title">Session cost</div>
-                  <div class="stat-value">
+            <div className="collapse-title text-xl font-medium">Session</div>
+            <div className="collapse-content">
+              <div className="stats shadow">
+                <div className="stat">
+                  <div className="stat-title">Session cost</div>
+                  <div className="stat-value">
                     {props.chatStore.cost.toFixed(4)} $
                   </div>
                 </div>
@@ -550,18 +550,18 @@ export default (props: {
               </div>
             </div>
           </div>
-          <div class="join-item collapse collapse-plus bg-base-200">
+          <div className="join-item collapse collapse-plus bg-base-200">
             <input type="radio" name="setting-accordion" />
-            <div class="collapse-title text-xl font-medium">System</div>
-            <div class="collapse-content">
-              <div class="stats shadow">
-                <div class="stat">
-                  <div class="stat-title">Accumulated cost</div>
-                  <div class="stat-value">{totalCost.toFixed(4)} $</div>
-                  <div class="stat-desc">
+            <div className="collapse-title text-xl font-medium">System</div>
+            <div className="collapse-content">
+              <div className="stats shadow">
+                <div className="stat">
+                  <div className="stat-title">Accumulated cost</div>
+                  <div className="stat-value">{totalCost.toFixed(4)} $</div>
+                  <div className="stat-desc">
                     in all sessions -{" "}
                     <a
-                      class="btn btn-xs btn-primary"
+                      className="btn btn-xs btn-primary"
                       onClick={() => {
                         clearTotalCost();
                         setTotalCost(getTotalCost());
@@ -577,11 +577,11 @@ export default (props: {
                 help="开发者模式，开启后会显示更多选项及功能"
                 {...props}
               />
-              <label class="form-control w-full">
-                <div class="label">
-                  <span class="label-text">Theme Switch</span>
+              <label className="form-control w-full">
+                <div className="label">
+                  <span className="label-text">Theme Switch</span>
                 </div>
-                <select data-choose-theme class="select select-bordered">
+                <select data-choose-theme className="select select-bordered">
                   <option value="light">Light</option>
                   <option value="dark">Dark</option>
                   <option value="cupcake">Cupcake</option>
@@ -594,11 +594,11 @@ export default (props: {
                   <option value="black">Black</option>
                 </select>
               </label>
-              <label class="form-control w-full">
-                <div class="label">
-                  <span class="label-text">Language</span>
+              <label className="form-control w-full">
+                <div className="label">
+                  <span className="label-text">Language</span>
                 </div>
-                <select class="select select-bordered">
+                <select className="select select-bordered">
                   {Object.keys(LANG_OPTIONS).map((opt) => (
                     <option
                       value={opt}
@@ -613,13 +613,13 @@ export default (props: {
                   ))}
                 </select>
               </label>
-              <label class="form-control w-full">
-                <div class="label">
-                  <span class="label-text">Quick Actions</span>
+              <label className="form-control w-full">
+                <div className="label">
+                  <span className="label-text">Quick Actions</span>
                 </div>
-                <div class="flex flex-col gap-2">
+                <div className="flex flex-col gap-2">
                   <button
-                    class="btn btn-sm btn-outline btn-neural"
+                    className="btn btn-sm btn-outline btn-neural"
                     onClick={() => {
                       navigator.clipboard.writeText(link);
                       alert(tr(`Copied link:`, langCode) + `${link}`);
@@ -628,7 +628,7 @@ export default (props: {
                     {Tr("Copy Setting Link")}
                   </button>
                   <button
-                    class="btn btn-sm btn-outline btn-neural"
+                    className="btn btn-sm btn-outline btn-neural"
                     onClick={() => {
                       if (
                         !confirm(
@@ -646,7 +646,7 @@ export default (props: {
                     {Tr("Clear History")}
                   </button>
                   <button
-                    class="btn btn-sm btn-outline btn-neural"
+                    className="btn btn-sm btn-outline btn-neural"
                     onClick={() => {
                       let dataStr =
                         "data:text/json;charset=utf-8," +
@@ -667,7 +667,7 @@ export default (props: {
                     {Tr("Export")}
                   </button>
                   <button
-                    class="btn btn-sm btn-outline btn-neural"
+                    className="btn btn-sm btn-outline btn-neural"
                     onClick={() => {
                       const name = prompt(
                         tr("Give this template a name:", langCode)
@@ -696,7 +696,7 @@ export default (props: {
                     {Tr("As template")}
                   </button>
                   <button
-                    class="btn btn-sm btn-outline btn-neural"
+                    className="btn btn-sm btn-outline btn-neural"
                     onClick={() => {
                       if (
                         !confirm(
@@ -755,12 +755,12 @@ export default (props: {
               </label>
             </div>
           </div>
-          <div class="join-item collapse collapse-plus bg-base-200">
+          <div className="join-item collapse collapse-plus bg-base-200">
             <input type="radio" name="setting-accordion" />
-            <div class="collapse-title text-xl font-medium">Chat</div>
-            <div class="collapse-content">
+            <div className="collapse-title text-xl font-medium">Chat</div>
+            <div className="collapse-content">
               <div>
-                <h2 class="card-title">Chat API</h2>
+                <h2 className="card-title">Chat API</h2>
                 <p>
                   <Input
                     field="apiKey"
@@ -780,7 +780,7 @@ export default (props: {
                   tmps={props.templateAPIs}
                   setTmps={props.setTemplateAPIs}
                 />
-                <div class="divider" />
+                <div className="divider" />
               </div>
               <SelectModel
                 help="模型，默认 3.5。不同模型性能和定价也不同，请参考 API 文档。"
@@ -851,14 +851,14 @@ export default (props: {
               />
             </div>
           </div>
-          <div class="join-item collapse collapse-plus bg-base-200">
+          <div className="join-item collapse collapse-plus bg-base-200">
             <input type="radio" name="setting-accordion" />
-            <div class="collapse-title text-xl font-medium">
+            <div className="collapse-title text-xl font-medium">
               Speech Recognition
             </div>
-            <div class="collapse-content">
+            <div className="collapse-content">
               <div>
-                <h2 class="card-title">Whisper API</h2>
+                <h2 className="card-title">Whisper API</h2>
                 <p>
                   <Input
                     field="whisper_key"
@@ -878,16 +878,16 @@ export default (props: {
                   tmps={props.templateAPIsWhisper}
                   setTmps={props.setTemplateAPIsWhisper}
                 />
-                <div class="divider" />
+                <div className="divider" />
               </div>
             </div>
           </div>
-          <div class="join-item collapse collapse-plus bg-base-200">
+          <div className="join-item collapse collapse-plus bg-base-200">
             <input type="radio" name="setting-accordion" />
-            <div class="collapse-title text-xl font-medium">TTS</div>
-            <div class="collapse-content">
+            <div className="collapse-title text-xl font-medium">TTS</div>
+            <div className="collapse-content">
               <div>
-                <h2 class="card-title">TTS API</h2>
+                <h2 className="card-title">TTS API</h2>
                 <p>
                   <Input
                     field="tts_key"
@@ -907,7 +907,7 @@ export default (props: {
                   tmps={props.templateAPIsTTS}
                   setTmps={props.setTemplateAPIsTTS}
                 />
-                <div class="divider" />
+                <div className="divider" />
               </div>
               <Help help="tts voice style" field="AAAAA">
                 <label className="">TTS Voice</label>
@@ -950,14 +950,14 @@ export default (props: {
               </Help>
             </div>
           </div>
-          <div class="join-item collapse collapse-plus bg-base-200">
+          <div className="join-item collapse collapse-plus bg-base-200">
             <input type="radio" name="setting-accordion" />
-            <div class="collapse-title text-xl font-medium">
+            <div className="collapse-title text-xl font-medium">
               Image Generation
             </div>
-            <div class="collapse-content">
+            <div className="collapse-content">
               <div>
-                <h2 class="card-title">Image Gen API</h2>
+                <h2 className="card-title">Image Gen API</h2>
                 <p>
                   <Input
                     field="image_gen_key"
@@ -977,7 +977,7 @@ export default (props: {
                   tmps={props.templateAPIsImageGen}
                   setTmps={props.setTemplateAPIsImageGen}
                 />
-                <div class="divider" />
+                <div className="divider" />
               </div>
             </div>
           </div>
diff --git a/src/tts.tsx b/src/tts.tsx
index a7e7e5a..9c2fd1a 100644
--- a/src/tts.tsx
+++ b/src/tts.tsx
@@ -80,9 +80,9 @@ export default function TTSButton(props: TTSProps) {
       }}
     >
       {generating ? (
-        <span class="loading loading-dots loading-xs"></span>
+        <span className="loading loading-dots loading-xs"></span>
       ) : (
-        <SpeakerWaveIcon class="h-4 w-4" />
+        <SpeakerWaveIcon className="h-4 w-4" />
       )}
     </button>
   );