Refactor Settings and ChatBOX components for improved layout; add Search button and integrate ScrollArea for better content management

src/components/Settings.tsx

@@ -82,6 +82,7 @@ import {
 } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
 import { Slider } from "@/components/ui/slider";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 const TTS_VOICES: string[] = [
   "alloy",
@@ -351,7 +352,7 @@ const Slicer = (props: {
               max={props.max}
               step={0.01}
               value={[props.chatStore[props.field]]}
-              onValueChange={(value: number[]) => {
+              onValueChange={(value) => {
                 props.chatStore[props.field] = value[0];
                 props.setChatStore({ ...props.chatStore });
               }}
@@ -535,39 +536,14 @@ export default (props: {
     };
   }, []); // The empty dependency array ensures that the effect runs only once
   return (
-    // <div
-    //   onClick={() => props.setShow(false)}
-    //   className="left-0 top-0 overflow-scroll flex justify-center absolute w-full h-full z-10"
-    // >
-    //   <div
-    //     onClick={(event: any) => {
-    //       event.stopPropagation();
-    //     }}
-    //     className="modal-box"
-    //   >
-    //     <div className="flex justify-between items-center mb-2">
-    //       <h3 className="text-lg font-bold">{Tr("Settings")}</h3>
-    //       <button
-    //         className="btn btn-secondary btn-sm"
-    //         onClick={() => {
-    //           props.setShow(false);
-    //         }}
-    //       >
-    //         {Tr("Close")}
-    //       </button>
-    //     </div>
-    //     <div className="join join-vertical w-full">
-
-    // </div>
-
-    //   </div>
-    // </div>
     <Sheet>
       <SheetTrigger asChild>
-        <Button variant="outline">{Tr("Settings")}</Button>
+        <Button variant="outline" className="flex-grow">
+          {Tr("Settings")}
+        </Button>
       </SheetTrigger>
       <SheetContent className="flex flex-col">
-        <div className="overflow-auto">
+        <ScrollArea>
           <SheetHeader>
             <SheetTitle>{Tr("Settings")}</SheetTitle>
             <SheetDescription>
@@ -1188,7 +1164,7 @@ export default (props: {
               </a>
             </p>
           </div>
-        </div>
+        </ScrollArea>
       </SheetContent>
     </Sheet>
   );

src/pages/Chatbox.tsx

@@ -49,6 +49,7 @@ import {
   GlobeIcon,
   ImageIcon,
   KeyIcon,
+  SearchIcon,
 } from "lucide-react";
 import { Switch } from "@/components/ui/switch";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -458,26 +459,35 @@ export default function ChatBOX(props: {
   return (
     <>
       <div className="flex flex-col p-2 gap-2 w-full">
-        {true && (
-          <Settings
-            chatStore={chatStore}
-            setChatStore={setChatStore}
-            setShow={setShowSettings}
-            selectedChatStoreIndex={props.selectedChatIndex}
-            templates={templates}
-            setTemplates={setTemplates}
-            templateAPIs={templateAPIs}
-            setTemplateAPIs={setTemplateAPIs}
-            templateAPIsWhisper={templateAPIsWhisper}
-            setTemplateAPIsWhisper={setTemplateAPIsWhisper}
-            templateAPIsTTS={templateAPIsTTS}
-            setTemplateAPIsTTS={setTemplateAPIsTTS}
-            templateAPIsImageGen={templateAPIsImageGen}
-            setTemplateAPIsImageGen={setTemplateAPIsImageGen}
-            templateTools={toolsTemplates}
-            setTemplateTools={setTemplateTools}
-          />
-        )}
+        <div className="flex items-center gap-2 justify-between">
+          {true && (
+            <Settings
+              chatStore={chatStore}
+              setChatStore={setChatStore}
+              setShow={setShowSettings}
+              selectedChatStoreIndex={props.selectedChatIndex}
+              templates={templates}
+              setTemplates={setTemplates}
+              templateAPIs={templateAPIs}
+              setTemplateAPIs={setTemplateAPIs}
+              templateAPIsWhisper={templateAPIsWhisper}
+              setTemplateAPIsWhisper={setTemplateAPIsWhisper}
+              templateAPIsTTS={templateAPIsTTS}
+              setTemplateAPIsTTS={setTemplateAPIsTTS}
+              templateAPIsImageGen={templateAPIsImageGen}
+              setTemplateAPIsImageGen={setTemplateAPIsImageGen}
+              templateTools={toolsTemplates}
+              setTemplateTools={setTemplateTools}
+            />
+          )}
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setShowSearch(true)}
+          >
+            <SearchIcon />
+          </Button>
+        </div>
         {showSearch && (
           <Search
             setSelectedChatIndex={props.setSelectedChatIndex}

src/search.tsx

@@ -79,7 +79,7 @@ export default function Search(props: {
                 }
 
                 const now = Math.floor(
-                  (result.length / resultKeys.length) * 100,
+                  (result.length / resultKeys.length) * 100
                 );
                 if (now !== searchingNow) setSearchingNow(now);
 
@@ -94,7 +94,7 @@ export default function Search(props: {
                     const beginIndex = msg.content.indexOf(query);
                     preview = msg.content.slice(
                       Math.max(0, beginIndex - 100),
-                      Math.min(msg.content.length, beginIndex + 239),
+                      Math.min(msg.content.length, beginIndex + 239)
                     ) as string;
                     break;
                   } else if (contentType === "object") {
@@ -105,7 +105,7 @@ export default function Search(props: {
                       const beginIndex = detail.text.indexOf(query);
                       preview = detail.text.slice(
                         Math.max(0, beginIndex - 100),
-                        Math.min(detail.text.length, beginIndex + 239),
+                        Math.min(detail.text.length, beginIndex + 239)
                       ) as string;
                       break;
                     }