feat: enable quality

ui/components/ChatWindow.tsx

@@ -492,6 +492,18 @@ const ChatWindow = ({id}: { id?: string }) => {
     setFocusMode(mode);
   };
 
+  useEffect(() => {
+    const mode = localStorage.getItem('optimizationMode');
+    if (mode) {
+      setOptimizationMode(mode);
+    }
+  }, [setOptimizationMode]);
+
+  const handleOptimizationModeChange = (mode: string) => {
+    localStorage.setItem('optimizationMode', mode);
+    setOptimizationMode(mode);
+  };
+
   const messagesRef = useRef<Message[]>([]);
 
   useEffect(() => {
@@ -716,7 +728,7 @@ const ChatWindow = ({id}: { id?: string }) => {
             setCopilotEnabled={setCopilotEnabled}
             setFocusMode={handleFocusModeChange}
             optimizationMode={optimizationMode}
-            setOptimizationMode={setOptimizationMode}
+            setOptimizationMode={handleOptimizationModeChange}
             fileIds={fileIds}
             setFileIds={setFileIds}
             files={files}

ui/components/EmptyChatMessageInput.tsx

@@ -98,11 +98,8 @@ const EmptyChatMessageInput = ({
               showText
             />
 
-            <CopilotToggle setCopilotEnabled={setCopilotEnabled} copilotEnabled={copilotEnabled}/>
-            {/*<Optimization*/}
-            {/*  optimizationMode={optimizationMode}*/}
-            {/*  setOptimizationMode={setOptimizationMode}*/}
-            {/*/>*/}
+            {/*<CopilotToggle setCopilotEnabled={setCopilotEnabled} copilotEnabled={copilotEnabled}/>*/}
+            <Optimization optimizationMode={optimizationMode} setOptimizationMode={setOptimizationMode}/>
             <button
               disabled={message.trim().length === 0}
               className="bg-[#24A0ED] text-white disabled:text-black/50 dark:disabled:text-white/50 disabled:bg-[#e0e0dc] dark:disabled:bg-[#ececec21] hover:bg-opacity-85 transition duration-100 rounded-full p-2"

ui/components/MessageInputActions/Optimization.tsx

@@ -23,7 +23,7 @@ const OptimizationModes = [
   },
   {
     key: 'quality',
-    title: 'Quality (Soon)',
+    title: 'Quality',
     description: 'Get the most thorough and accurate answer',
     icon: (
       <Star
@@ -49,13 +49,11 @@ const Optimization = ({
       >
         <div className="flex flex-row items-center space-x-1">
           {
-            OptimizationModes.find((mode) => mode.key === optimizationMode)
-              ?.icon
+            OptimizationModes.find((mode) => mode.key === optimizationMode)?.icon
           }
           <p className="text-xs font-medium">
             {
-              OptimizationModes.find((mode) => mode.key === optimizationMode)
-                ?.title
+              OptimizationModes.find((mode) => mode.key === optimizationMode)?.title
             }
           </p>
           <ChevronDown size={20} />
@@ -76,13 +74,13 @@ const Optimization = ({
               <PopoverButton
                 onClick={() => setOptimizationMode(mode.key)}
                 key={i}
-                disabled={mode.key === 'quality'}
+                disabled={mode.key === 'quality1'}
                 className={cn(
                   'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-1 duration-200 cursor-pointer transition',
                   optimizationMode === mode.key
                     ? 'bg-light-secondary dark:bg-dark-secondary'
                     : 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
-                  mode.key === 'quality' && 'opacity-50 cursor-not-allowed',
+                  mode.key === 'quality1' && 'opacity-50 cursor-not-allowed',
                 )}
               >
                 <div className="flex flex-row items-center space-x-1 text-black dark:text-white">