clean up setting panel

src/chatbox.tsx

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

src/message.tsx

@@ -10,6 +10,7 @@ import { MessageToolCall } from "./messageToolCall";
 import { MessageToolResp } from "./messageToolResp";
 import { EditMessage } from "./editMessage";
 import logprobToColor from "./logprob";
+import { XMarkIcon } from "@heroicons/react/24/outline";
 
 export const isVailedJSON = (str: string): boolean => {
   try {
@@ -101,8 +102,8 @@ export default function Message(props: Props) {
           chatStore.history.slice(0, messageIndex).filter(({ hide }) => !hide)
             .length && (
           <div className="flex items-center relative justify-center">
-            <hr className="w-full h-px my-4 border-0 bg-slate-800 dark:bg-white" />
-            <span className="absolute px-3 bg-slate-800 text-white rounded p-1 dark:bg-white dark:text-black">
+            <hr className="w-full h-px my-4 border-0" />
+            <span className="absolute px-3 rounded p-1">
               Above messages are "forgotten"
             </span>
           </div>
@@ -192,11 +193,11 @@ export default function Message(props: Props) {
           )}
           {showCopiedHint && <CopiedHint />}
           {chatStore.develop_mode && (
-            <div>
-              <span className="dark:text-white">token</span>
+            <div class="flex items-center gap-1">
+              <span className="">token</span>
               <input
                 value={chat.token}
-                className="w-20"
+                className="input input-bordered input-xs w-16"
                 onChange={(event: any) => {
                   chat.token = parseInt(event.target.value);
                   props.update_total_tokens();
@@ -221,7 +222,7 @@ export default function Message(props: Props) {
                   setChatStore({ ...chatStore });
                 }}
               >
-                ❌
+                <XMarkIcon class="w-4 h-4" />
               </button>
               <span
                 onClick={(event: any) => {
@@ -229,17 +230,17 @@ export default function Message(props: Props) {
                   setChatStore({ ...chatStore });
                 }}
               >
-                <label className="dark:text-white">{Tr("example")}</label>
+                <label className="">{Tr("example")}</label>
                 <input type="checkbox" checked={chat.example} />
               </span>
               <span
                 onClick={(event: any) => setRenderWorkdown(!renderMarkdown)}
               >
-                <label className="dark:text-white">{Tr("render")}</label>
+                <label className="">{Tr("render")}</label>
                 <input type="checkbox" checked={renderMarkdown} />
               </span>
               <span onClick={(event: any) => setRenderColor(!renderColor)}>
-                <label className="dark:text-white">{Tr("color")}</label>
+                <label className="">{Tr("color")}</label>
                 <input type="checkbox" checked={renderColor} />
               </span>
             </div>

src/settings.tsx

@@ -20,6 +20,14 @@ import {
   InformationCircleIcon,
   CheckIcon,
   NoSymbolIcon,
+  CogIcon,
+  KeyIcon,
+  EyeIcon,
+  EllipsisHorizontalCircleIcon,
+  HandRaisedIcon,
+  AdjustmentsHorizontalIcon,
+  Cog6ToothIcon,
+  ListBulletIcon,
 } from "@heroicons/react/24/outline";
 
 import { themeChange } from "theme-change";
@@ -34,10 +42,10 @@ const TTS_VOICES: string[] = [
 ];
 const TTS_FORMAT: string[] = ["mp3", "opus", "aac", "flac"];
 
-const Help = (props: { children: any; help: string }) => {
+const Help = (props: { children: any; help: string; field: string }) => {
   return (
-    <div>
-      <p className="flex justify-between">{props.children}</p>
+    <div class="b-2">
+      <label class="form-control w-full">{props.children}</label>
     </div>
   );
 };
@@ -55,20 +63,36 @@ const SelectModel = (props: {
   }
   const [useCustomModel, setUseCustomModel] = useState(shouldIUseCustomModel);
   return (
-    <Help help={props.help}>
-      <label className="m-2 p-2">Model</label>
-      <span
+    <Help help={props.help} field="">
+      <div class="label">
+        <span class="flex gap-2 items-center">
+          <ListBulletIcon class="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" />
+              {Tr("Custom")}
+            </span>
+          </span>
+          <span class="label-text-alt">
+            <input
+              type="checkbox"
+              checked={useCustomModel}
+              class="checkbox"
               onClick={() => {
                 setUseCustomModel(!useCustomModel);
               }}
-        className="m-2 p-2"
-      >
-        <label>{Tr("Custom")}</label>
-        <input className="" type="checkbox" checked={useCustomModel} />
+            />
           </span>
+        </div>
+        {/* <span class="label-text-alt">Top Right label</span> */}
+      </div>
+      <label class="form-control w-full">
         {useCustomModel ? (
           <input
-          className="m-2 p-2 border rounded focus w-32 md:w-fit"
+            className="input input-bordered"
             value={props.chatStore.model}
             onChange={(event: any) => {
               const model = event.target.value as string;
@@ -78,7 +102,7 @@ const SelectModel = (props: {
           />
         ) : (
           <select
-          className="m-2 p-2"
+            className="select select-bordered"
             value={props.chatStore.model}
             onChange={(event: any) => {
               const model = event.target.value as string;
@@ -95,6 +119,8 @@ const SelectModel = (props: {
             ))}
           </select>
         )}
+      </label>
+      <div class="pb-5"></div>
     </Help>
   );
 };
@@ -152,25 +178,50 @@ const Input = (props: {
 }) => {
   const [hideInput, setHideInput] = useState(true);
   return (
-    <Help help={props.help}>
-      <label className="m-2 p-2">{props.field}</label>
+    <Help field={props.field} help={props.help}>
+      <div class="label">
+        <span class="label-text">{props.field}</span>
+        <span class="label-text-alt">
           <button
+            onClick={() => {
+              alert(props.help);
+            }}
+          >
+            <InformationCircleIcon className="w-4 h-4" />
+          </button>
+        </span>
+      </div>
+      <div class="join">
+        <label class="input input-bordered flex items-center gap-2 join-item grow">
+          {hideInput ? (
+            <EyeIcon
+              class="w-4 h-4"
               onClick={() => {
                 setHideInput(!hideInput);
                 console.log("clicked", hideInput);
               }}
-      >
-        {hideInput ? "👀" : "🙈"}
-      </button>
+            />
+          ) : (
+            <KeyIcon
+              class="w-4 h-4"
+              onClick={() => {
+                setHideInput(!hideInput);
+                console.log("clicked", hideInput);
+              }}
+            />
+          )}
+
           <input
             type={hideInput ? "password" : "text"}
-        className="m-2 p-2 border rounded focus w-32 md:w-fit"
+            class="grow"
             value={props.chatStore[props.field]}
             onChange={(event: any) => {
               props.chatStore[props.field] = event.target.value;
               props.setChatStore({ ...props.chatStore });
             }}
-      ></input>
+          />
+        </label>
+      </div>
     </Help>
   );
 };
@@ -202,20 +253,37 @@ const Slicer = (props: {
     props.setChatStore({ ...props.chatStore });
   };
   return (
-    <Help help={props.help}>
+    <Help help={props.help} field={props.field}>
       <span>
-        <label className="m-2 p-2">{props.field}</label>
+        <div class="form-control">
+          <label class="flex gap-2">
+            <span class="label-text flex items-center gap-2">
+              <AdjustmentsHorizontalIcon className="w-4 h-4" />
+              {props.field}{" "}
+              <button
+                onClick={() => {
+                  alert(props.help);
+                }}
+              >
+                <InformationCircleIcon className="w-4 h-4" />
+              </button>
+            </span>
             <input
               type="checkbox"
               checked={props.chatStore[enable_filed_name]}
+              class="checkbox"
               onClick={() => {
                 setEnabled(!enabled);
               }}
             />
+          </label>
+        </div>
       </span>
+      {enabled ? (
+        <div class="flex items-center">
           <input
             disabled={!enabled}
-        className="m-2 p-2 border rounded focus w-16"
+            className="range"
             type="range"
             min={props.min}
             max={props.max}
@@ -238,6 +306,10 @@ const Slicer = (props: {
               props.setChatStore({ ...props.chatStore });
             }}
           />
+        </div>
+      ) : (
+        ""
+      )}
     </Help>
   );
 };
@@ -257,10 +329,20 @@ const Number = (props: {
   help: string;
 }) => {
   return (
-    <Help help={props.help}>
+    <Help help={props.help} field="">
       <span>
-        <label className="m-2 p-2">{props.field}</label>
+        <label className="py-2 flex items-center gap-1">
+          <EllipsisHorizontalCircleIcon class="h-4 w-4" /> {props.field}{" "}
+          <button
+            onClick={() => {
+              alert(props.help);
+            }}
+          >
+            <InformationCircleIcon className="w-4 h-4" />
+          </button>
           {props.field === "maxGenTokens" && (
+            <div class="form-control">
+              <label class="label cursor-pointer">
                 <input
                   type="checkbox"
                   checked={props.chatStore.maxGenTokens_enabled}
@@ -270,8 +352,12 @@ const Number = (props: {
                       !newChatStore.maxGenTokens_enabled;
                     props.setChatStore({ ...newChatStore });
                   }}
+                  class="checkbox"
                 />
+              </label>
+            </div>
           )}
+        </label>
       </span>
       <input
         readOnly={props.readOnly}
@@ -280,7 +366,7 @@ const Number = (props: {
           !props.chatStore.maxGenTokens_enabled
         }
         type="number"
-        className="m-2 p-2 border rounded focus w-28"
+        className="input input-bordered input-sm w-full max-w-xs"
         value={props.chatStore[props.field]}
         onChange={(event: any) => {
           console.log("type", typeof event.target.value);
@@ -300,17 +386,29 @@ const Choice = (props: {
   help: string;
 }) => {
   return (
-    <Help help={props.help}>
-      <label className="m-2 p-2">{props.field}</label>
+    <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>
+          <button
+            onClick={() => {
+              alert(props.help);
+            }}
+          >
+            <InformationCircleIcon className="w-4 h-4" />
+          </button>
           <input
             type="checkbox"
-        className="m-2 p-2 border rounded focus"
             checked={props.chatStore[props.field]}
+            class="checkbox"
             onChange={(event: any) => {
               props.chatStore[props.field] = event.target.checked;
               props.setChatStore({ ...props.chatStore });
             }}
-      ></input>
+          />
+        </label>
+      </div>
     </Help>
   );
 };
@@ -394,9 +492,7 @@ export default (props: {
             {Tr("Close")}
           </button>
         </div>
-
-        <hr className="pt-2" />
-        <div role="tablist" class="tabs tabs-bordered pt-2 w-full">
+        <div role="tablist" class="tabs tabs-lifted pt-2 w-full">
           <input
             type="radio"
             name="setting_tab"
@@ -472,18 +568,22 @@ export default (props: {
             class="tab-content bg-base-100 border-base-300 rounded-box p-6"
           >
             <div className="flex justify-between">
-              <p>
-                {Tr("Accumulated cost in all sessions")} ${totalCost.toFixed(4)}
+              <div class="join join-vertical lg:join-horizontal">
+                <p class="btn no-animation join-item">
+                  {Tr("Accumulated cost in all sessions")} $
+                  {totalCost.toFixed(4)}
                 </p>
                 <button
+                  class="btn join-item"
                   onClick={() => {
                     clearTotalCost();
                     setTotalCost(getTotalCost());
                   }}
                 >
-                {Tr("Reset")}
+                  Reset
                 </button>
               </div>
+            </div>
             <label class="form-control w-full max-w-xs">
               <div class="label">
                 <span class="label-text">Theme Switch</span>
@@ -521,6 +621,9 @@ export default (props: {
               </select>
             </label>
             <div class="join pt-2">
+              <button class="btn btn-info join-item no-animation">
+                <CogIcon class="w-6 h-6" />
+              </button>
               <button
                 class="btn join-item"
                 onClick={() => {
@@ -654,7 +757,6 @@ export default (props: {
               />
             </div>
           </div>
-
           <input
             type="radio"
             name="setting_tab"
@@ -666,18 +768,10 @@ export default (props: {
             role="tabpanel"
             class="tab-content bg-base-100 border-base-300 rounded-box p-6"
           >
-            <div className="relative border-slate-300 border rounded">
-              <div className="flex justify-between">
-                <strong className="p-1 m-1">Chat API</strong>
-                <SetAPIsTemplate
-                  label="Chat API"
-                  endpoint={props.chatStore.apiEndpoint}
-                  APIkey={props.chatStore.apiKey}
-                  tmps={props.templateAPIs}
-                  setTmps={props.setTemplateAPIs}
-                />
-              </div>
-              <hr />
+            <div class="card bg-base-100 w-full shadow-xl">
+              <div class="card-body">
+                <h2 class="card-title">Chat API</h2>
+                <p>
                   <Input
                     field="apiKey"
                     help="OPEN AI API 密钥，请勿泄漏此密钥"
@@ -688,6 +782,17 @@ export default (props: {
                     help="API 端点，方便在不支持的地区使用反向代理服务，默认为 https://api.openai.com/v1/chat/completions"
                     {...props}
                   />
+                </p>
+                <div class="card-actions justify-end">
+                  <SetAPIsTemplate
+                    label="Chat API"
+                    endpoint={props.chatStore.apiEndpoint}
+                    APIkey={props.chatStore.apiKey}
+                    tmps={props.templateAPIs}
+                    setTmps={props.setTemplateAPIs}
+                  />
+                </div>
+              </div>
             </div>
             <SelectModel
               help="模型，默认 3.5。不同模型性能和定价也不同，请参考 API 文档。"
@@ -768,24 +873,16 @@ export default (props: {
             name="setting_tab"
             role="tab"
             class="tab"
-            aria-label="TTS"
+            aria-label="Speech Recognition"
           />
           <div
             role="tabpanel"
             class="tab-content bg-base-100 border-base-300 rounded-box p-6"
           >
-            <div className="relative border-slate-300 border rounded">
-              <div className="flex justify-between">
-                <strong className="p-1 m-1">Whisper API</strong>
-                <SetAPIsTemplate
-                  label="Whisper API"
-                  endpoint={props.chatStore.whisper_api}
-                  APIkey={props.chatStore.whisper_key}
-                  tmps={props.templateAPIsWhisper}
-                  setTmps={props.setTemplateAPIsWhisper}
-                />
-              </div>
-              <hr />
+            <div class="card bg-base-100 w-full shadow-xl">
+              <div class="card-body">
+                <h2 class="card-title">Whisper API</h2>
+                <p>
                   <Input
                     field="whisper_key"
                     help="用于 Whisper 服务的 key，默认为 上方使用的OPENAI key，可在此单独配置专用key"
@@ -796,11 +893,46 @@ export default (props: {
                     help="Whisper 语言转文字服务，填入此api才会开启，默认为 https://api.openai.com/v1/audio/transriptions"
                     {...props}
                   />
+                </p>
+                <div class="card-actions justify-end">
+                  <SetAPIsTemplate
+                    label="Whisper API"
+                    endpoint={props.chatStore.whisper_api}
+                    APIkey={props.chatStore.whisper_key}
+                    tmps={props.templateAPIsWhisper}
+                    setTmps={props.setTemplateAPIsWhisper}
+                  />
                 </div>
-
-            <div className="relative border-slate-300 border rounded mt-1">
-              <div className="flex justify-between">
-                <strong className="p-1 m-1">TTS API</strong>
+              </div>
+            </div>
+          </div>
+          <input
+            type="radio"
+            name="setting_tab"
+            role="tab"
+            class="tab"
+            aria-label="TTS"
+          />
+          <div
+            role="tabpanel"
+            class="tab-content bg-base-100 border-base-300 rounded-box p-6"
+          >
+            <div class="card bg-base-100 w-full shadow-xl">
+              <div class="card-body">
+                <h2 class="card-title">TTS API</h2>
+                <p>
+                  <Input
+                    field="tts_key"
+                    help="tts service api key"
+                    {...props}
+                  />
+                  <Input
+                    field="tts_api"
+                    help="tts api, eg. https://api.openai.com/v1/audio/speech"
+                    {...props}
+                  />
+                </p>
+                <div class="card-actions justify-end">
                   <SetAPIsTemplate
                     label="TTS API"
                     endpoint={props.chatStore.tts_api}
@@ -809,18 +941,12 @@ export default (props: {
                     setTmps={props.setTemplateAPIsTTS}
                   />
                 </div>
-              <hr />
-              <Input field="tts_key" help="tts service api key" {...props} />
-              <Input
-                field="tts_api"
-                help="tts api, eg. https://api.openai.com/v1/audio/speech"
-                {...props}
-              />
               </div>
-            <Help help="tts voice style">
-              <label className="m-2 p-2">TTS Voice</label>
+            </div>
+            <Help help="tts voice style" field="AAAAA">
+              <label className="">TTS Voice</label>
               <select
-                className="m-2 p-2"
+                className="select select-bordered"
                 value={props.chatStore.tts_voice}
                 onChange={(event: any) => {
                   const voice = event.target.value as string;
@@ -840,10 +966,10 @@ export default (props: {
               help={"TTS Speed"}
               {...props}
             />
-            <Help help="tts response format">
-              <label className="m-2 p-2">TTS Format</label>
+            <Help help="tts response format" field="AAAAA">
+              <label className="">TTS Format</label>
               <select
-                className="m-2 p-2"
+                className="select select-bordered"
                 value={props.chatStore.tts_format}
                 onChange={(event: any) => {
                   const format = event.target.value as string;
@@ -868,18 +994,10 @@ export default (props: {
             role="tabpanel"
             class="tab-content bg-base-100 border-base-300 rounded-box p-6"
           >
-            <div className="relative border-slate-300 border rounded">
-              <div className="flex justify-between">
-                <strong className="p-1 m-1">Image Gen API</strong>
-                <SetAPIsTemplate
-                  label="Image Gen API"
-                  endpoint={props.chatStore.image_gen_api}
-                  APIkey={props.chatStore.image_gen_key}
-                  tmps={props.templateAPIsImageGen}
-                  setTmps={props.setTemplateAPIsImageGen}
-                />
-              </div>
-              <hr />
+            <div class="card bg-base-100 w-full shadow-xl">
+              <div class="card-body">
+                <h2 class="card-title">Image Gen API</h2>
+                <p>
                   <Input
                     field="image_gen_key"
                     help="image generation service api key"
@@ -890,6 +1008,17 @@ export default (props: {
                     help="DALL image gen key, eg. https://api.openai.com/v1/images/generations"
                     {...props}
                   />
+                </p>
+                <div class="card-actions justify-end">
+                  <SetAPIsTemplate
+                    label="Image Gen API"
+                    endpoint={props.chatStore.image_gen_api}
+                    APIkey={props.chatStore.image_gen_key}
+                    tmps={props.templateAPIsImageGen}
+                    setTmps={props.setTemplateAPIsImageGen}
+                  />
+                </div>
+              </div>
             </div>
           </div>
         </div>