Added compact mode for more concise answers.

Made optimization mode persist between page refreshes.
Added mode switcher to chat so it can be changed while researching.

ui/components/MessageInputActions/Optimization.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, Sliders, Star, Zap } from 'lucide-react';
+import { ChevronDown, Minimize2, Sliders, Star, Zap } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import {
   Popover,
@@ -6,8 +6,7 @@ import {
   PopoverPanel,
   Transition,
 } from '@headlessui/react';
-import { Fragment } from 'react';
-
+import { Fragment, useEffect } from 'react';
 const OptimizationModes = [
   {
     key: 'speed',
@@ -37,10 +36,33 @@ const OptimizationModes = [
 const Optimization = ({
   optimizationMode,
   setOptimizationMode,
+  isCompact,
+  setIsCompact,
 }: {
   optimizationMode: string;
   setOptimizationMode: (mode: string) => void;
+  isCompact: boolean;
+  setIsCompact: (isCompact: boolean) => void;
 }) => {
+  useEffect(() => {
+    const savedCompactMode = localStorage.getItem('compactMode');
+    if (savedCompactMode === null) {
+      localStorage.setItem('compactMode', String(isCompact));
+    } else {
+      setIsCompact(savedCompactMode === 'true');
+    }
+  }, [setIsCompact]);
+
+  const handleCompactChange = (checked: boolean) => {
+    setIsCompact(checked);
+    localStorage.setItem('compactMode', String(checked));
+  };
+
+  const handleOptimizationChange = (mode: string) => {
+    setOptimizationMode(mode);
+    localStorage.setItem('optimizationMode', mode);
+  };
+
   return (
     <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
       <PopoverButton
@@ -70,11 +92,11 @@ const Optimization = ({
         leaveFrom="opacity-100 translate-y-0"
         leaveTo="opacity-0 translate-y-1"
       >
-        <PopoverPanel className="absolute z-10 w-64 md:w-[250px] right-0">
+        <PopoverPanel className="absolute z-10 w-64 md:w-[250px] right-0 bottom-[100%] mb-2">
           <div className="flex flex-col gap-2 bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-4 max-h-[200px] md:max-h-none overflow-y-auto">
             {OptimizationModes.map((mode, i) => (
               <PopoverButton
-                onClick={() => setOptimizationMode(mode.key)}
+                onClick={() => handleOptimizationChange(mode.key)}
                 key={i}
                 disabled={mode.key === 'quality'}
                 className={cn(
@@ -94,6 +116,30 @@ const Optimization = ({
                 </p>
               </PopoverButton>
             ))}
+            <div className="border-t border-light-200 dark:border-dark-200 pt-2 mt-1">
+              <label className="flex items-center space-x-2 p-2 rounded-lg cursor-pointer hover:bg-light-secondary dark:hover:bg-dark-secondary">
+                <input
+                  type="checkbox"
+                  checked={isCompact}
+                  onChange={(e) => handleCompactChange(e.target.checked)}
+                  className="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
+                />
+                <div className="flex items-center space-x-2">
+                  <Minimize2
+                    size={16}
+                    className="text-gray-600 dark:text-gray-400"
+                  />
+                  <div>
+                    <p className="text-sm font-medium text-black dark:text-white">
+                      Compact Mode
+                    </p>
+                    <p className="text-xs text-black/70 dark:text-white/70">
+                      Generate more concise responses
+                    </p>
+                  </div>
+                </div>
+              </label>
+            </div>
           </div>
         </PopoverPanel>
       </Transition>