feat(emptyChatInput): add model selector

src/components/MessageInputActions/Optimization.tsx

@@ -14,13 +14,13 @@ const OptimizationModes = [
     key: 'speed',
     title: 'Speed',
     description: 'Prioritize speed and get the quickest possible answer.',
-    icon: <Zap size={20} className="text-[#FF9800]" />,
+    icon: <Zap size={16} className="text-[#FF9800]" />,
   },
   {
     key: 'balanced',
     title: 'Balanced',
     description: 'Find the right balance between speed and accuracy',
-    icon: <Sliders size={20} className="text-[#4CAF50]" />,
+    icon: <Sliders size={16} className="text-[#4CAF50]" />,
   },
   {
     key: 'quality',
@@ -40,60 +40,64 @@ const Optimization = () => {
 
   return (
     <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
-      <PopoverButton
-        type="button"
-        className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
-      >
-        <div className="flex flex-row items-center space-x-1">
-          {
-            OptimizationModes.find((mode) => mode.key === optimizationMode)
-              ?.icon
-          }
-          <p className="text-xs font-medium">
-            {
-              OptimizationModes.find((mode) => mode.key === optimizationMode)
-                ?.title
-            }
-          </p>
-          <ChevronDown size={20} />
-        </div>
-      </PopoverButton>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-150"
-        enterFrom="opacity-0 translate-y-1"
-        enterTo="opacity-100 translate-y-0"
-        leave="transition ease-in duration-150"
-        leaveFrom="opacity-100 translate-y-0"
-        leaveTo="opacity-0 translate-y-1"
-      >
-        <PopoverPanel className="absolute z-10 w-64 md:w-[250px] right-0">
-          <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)}
-                key={i}
-                disabled={mode.key === 'quality'}
+      {({ open }) => (
+        <>
+          <PopoverButton
+            type="button"
+            className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white focus:outline-none"
+          >
+            <div className="flex flex-row items-center space-x-1">
+              {
+                OptimizationModes.find((mode) => mode.key === optimizationMode)
+                  ?.icon
+              }
+              <ChevronDown
+                size={16}
                 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',
+                  open ? 'rotate-180' : 'rotate-0',
+                  'transition duration:200',
                 )}
-              >
-                <div className="flex flex-row items-center space-x-1 text-black dark:text-white">
-                  {mode.icon}
-                  <p className="text-sm font-medium">{mode.title}</p>
-                </div>
-                <p className="text-black/70 dark:text-white/70 text-xs">
-                  {mode.description}
-                </p>
-              </PopoverButton>
-            ))}
-          </div>
-        </PopoverPanel>
-      </Transition>
+              />
+            </div>
+          </PopoverButton>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-150"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <PopoverPanel className="absolute z-10 w-64 md:w-[250px] left-0">
+              <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)}
+                    key={i}
+                    disabled={mode.key === 'quality'}
+                    className={cn(
+                      'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-1 duration-200 cursor-pointer transition focus:outline-none',
+                      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',
+                    )}
+                  >
+                    <div className="flex flex-row items-center space-x-1 text-black dark:text-white">
+                      {mode.icon}
+                      <p className="text-sm font-medium">{mode.title}</p>
+                    </div>
+                    <p className="text-black/70 dark:text-white/70 text-xs">
+                      {mode.description}
+                    </p>
+                  </PopoverButton>
+                ))}
+              </div>
+            </PopoverPanel>
+          </Transition>
+        </>
+      )}
     </Popover>
   );
 };