refine setting layout

src/addImage.tsx

@@ -41,15 +41,15 @@ export function AddImage({
       }}
     >
       <div
-        className="bg-white rounded p-2 z-20"
+        className="bg-base-200 p-2 z-20"
         onClick={(event) => {
           event.stopPropagation();
         }}
       >
-        <div className="flex justify-between p-1">
-          <span>Add Images</span>
+        <div className="flex justify-between items-center p-1">
+          <h3>Add Images</h3>
           <button
-            className="m-1 p-1 border-2 bg-red-400"
+            className="btn btn-sm btn-neutral"
             onClick={() => {
               setShowAddImage(false);
             }}
@@ -57,10 +57,9 @@ export function AddImage({
             Done
           </button>
         </div>
-        <hr />
-        <span>
+        <span class="">
           <button
-            className="disabled:line-through disabled:bg-slate-500 rounded m-1 p-1 border-2 bg-cyan-400 hover:bg-cyan-600"
+            className="btn btn-secondary btn-sm disabled:btn-disabled"
             onClick={() => {
               const image_url = prompt("Image URL");
               if (!image_url) {
@@ -81,7 +80,7 @@ export function AddImage({
             Add from URL
           </button>
           <button
-            className="disabled:line-through disabled:bg-slate-500 rounded m-1 p-1 border-2 bg-cyan-400 hover:bg-cyan-600"
+            className="btn btn-primary btn-sm disabled:btn-disabled"
             onClick={() => {
               // select file and load it to base64 image URL format
               const input = document.createElement("input");
@@ -122,23 +121,24 @@ export function AddImage({
             <input type="checkbox" checked={enableHighResolution} />
           </span>
         </span>
+        <div class="divider"></div>
         {chatStore.image_gen_api && chatStore.image_gen_key && (
           <div className="flex flex-col">
-            <hr className="my-2" />
             <h3>Generate Image</h3>
-            <span className="flex flex-row justify-between m-1 p-1">
+            <span className="flex flex-col justify-between m-1 p-1">
               <label>Prompt: </label>
               <textarea
-                className="border rounded border-gray-400"
+                className="textarea textarea-sm textarea-bordered"
                 value={imageGenPrompt}
                 onChange={(e: any) => {
                   setImageGenPrompt(e.target.value);
                 }}
               />
             </span>
-            <span className="flex flex-row justify-between m-1 p-1">
+            <span className="flex flex-row justify-between items-center m-1 p-1">
               <label>Model: </label>
               <select
+                class="select select-sm select-bordered"
                 value={imageGenModel}
                 onChange={(e: any) => {
                   setImageGenModel(e.target.value);
@@ -148,9 +148,10 @@ export function AddImage({
                 <option value="dall-e-2">DALL-E 2</option>
               </select>
             </span>
-            <span className="flex flex-row justify-between m-1 p-1">
+            <span className="flex flex-row justify-between items-center m-1 p-1">
               <label>n: </label>
               <input
+                class="input input-sm input-bordered"
                 value={imageGenN}
                 type="number"
                 min={1}
@@ -158,9 +159,10 @@ export function AddImage({
                 onChange={(e: any) => setImageGenN(parseInt(e.target.value))}
               />
             </span>
-            <span className="flex flex-row justify-between m-1 p-1">
+            <span className="flex flex-row justify-between items-center m-1 p-1">
               <label>Quality: </label>
               <select
+                class="select select-sm select-bordered"
                 value={imageGenQuality}
                 onChange={(e: any) => setImageGEnQuality(e.target.value)}
               >
@@ -168,9 +170,10 @@ export function AddImage({
                 <option value="standard">Standard</option>
               </select>
             </span>
-            <span className="flex flex-row justify-between m-1 p-1">
+            <span className="flex flex-row justify-between items-center m-1 p-1">
               <label>Response Format: </label>
               <select
+                class="select select-sm select-bordered"
                 value={imageGenResponseFormat}
                 onChange={(e: any) => setImageGenResponseFormat(e.target.value)}
               >
@@ -178,9 +181,10 @@ export function AddImage({
                 <option value="url">url</option>
               </select>
             </span>
-            <span className="flex flex-row justify-between m-1 p-1">
+            <span className="flex flex-row justify-between items-center m-1 p-1">
               <label>Size: </label>
               <select
+                class="select select-sm select-bordered"
                 value={imageGenSize}
                 onChange={(e: any) => setImageGenSize(e.target.value)}
               >
@@ -191,9 +195,10 @@ export function AddImage({
                 <option value="1024x1792">1024x1792 (dall-e-3)</option>
               </select>
             </span>
-            <span className="flex flex-row justify-between m-1 p-1">
+            <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"
                 value={imageGenStyle}
                 onChange={(e: any) => setImageGenStyle(e.target.value)}
               >
@@ -201,9 +206,9 @@ export function AddImage({
                 <option value="natural">natural</option>
               </select>
             </span>
-            <span className="flex flex-row justify-between m-1 p-1">
+            <span className="flex flex-row justify-between items-center m-1 p-1">
               <button
-                className="bg-sky-400 m-1 p-1 rounded disabled:bg-slate-500"
+                className="btn btn-primary btn-sm"
                 disabled={imageGenGenerating}
                 onClick={async () => {
                   try {

src/chatbox.tsx

@@ -818,7 +818,7 @@ export default function ChatBOX(props: {
           )}
           {chatStore.develop_mode && chatStore.history.length > 0 && (
             <button
-              className="btn btn-outline  btn-sm btn-warning disabled:line-through disabled:bg-neural"
+              className="btn btn-outline btn-sm btn-warning disabled:line-through disabled:bg-neural"
               disabled={showGenerating}
               onClick={async () => {
                 await complete();

src/message.tsx

@@ -170,9 +170,9 @@ export default function Message(props: Props) {
               )}
             </div>
             <div class="chat-footer opacity-50 flex gap-x-2">
-              <TTSPlay chat={chat} />
               <DeleteIcon />
               <button onClick={() => setShowEdit(true)}>Edit</button>
+              <CopyIcon textToCopy={getMessageText(chat)} />
               {chatStore.tts_api && chatStore.tts_key && (
                 <TTSButton
                   chatStore={chatStore}
@@ -180,7 +180,7 @@ export default function Message(props: Props) {
                   setChatStore={setChatStore}
                 />
               )}
-              <CopyIcon textToCopy={getMessageText(chat)} />
+              <TTSPlay chat={chat} />
             </div>
           </div>
           {showEdit && (

src/messageDetail.tsx

@@ -22,7 +22,7 @@ export function MessageDetail({ chat, renderMarkdown }: Props) {
           )
         ) : (
           <img
-            className="cursor-pointer max-w-xs max-h-32 p-1"
+            className="my-2 rounded-md max-w-64 max-h-64"
             src={mdt.image_url?.url}
             onClick={() => {
               window.open(mdt.image_url?.url, "_blank");

src/setAPIsTemplate.tsx

@@ -17,7 +17,7 @@ export function SetAPIsTemplate({
 }: Props) {
   return (
     <button
-      className="p-1 m-1 rounded bg-blue-300"
+      className="btn btn-primary btn-sm"
       onClick={() => {
         const name = prompt(`Give this **${label}** template a name:`);
         if (!name) {

src/tts.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from "preact/hooks";
 import { ChatStore, ChatStoreMessage, addTotalCost } from "./app";
 import { Message, getMessageText } from "./chatgpt";
+import { SpeakerWaveIcon } from "@heroicons/react/24/outline";
 
 interface TTSProps {
   chatStore: ChatStore;
@@ -78,7 +79,11 @@ export default function TTSButton(props: TTSProps) {
           });
       }}
     >
-      {generating ? "🤔" : "🔈"}
+      {generating ? (
+        <span class="loading loading-dots loading-xs"></span>
+      ) : (
+        <SpeakerWaveIcon class="h-4 w-4" />
+      )}
     </button>
   );
 }