feat(app): Allow selecting the AI model at any time without opening the settings page.

Allow changing focus mode at any time while chatting.
Styling tweaks.

src/components/MessageInput.tsx

@@ -1,12 +1,11 @@
-import { cn } from '@/lib/utils';
-import { ArrowUp } from 'lucide-react';
+import { ArrowRight, ArrowUp } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import Attach from './MessageInputActions/Attach';
-import CopilotToggle from './MessageInputActions/Copilot';
-import Optimization from './MessageInputActions/Optimization';
 import { File } from './ChatWindow';
-import AttachSmall from './MessageInputActions/AttachSmall';
+import Attach from './MessageInputActions/Attach';
+import Focus from './MessageInputActions/Focus';
+import ModelSelector from './MessageInputActions/ModelSelector';
+import Optimization from './MessageInputActions/Optimization';
 
 const MessageInput = ({
   sendMessage,
@@ -17,6 +16,9 @@ const MessageInput = ({
   setFiles,
   optimizationMode,
   setOptimizationMode,
+  focusMode,
+  setFocusMode,
+  firstMessage,
 }: {
   sendMessage: (message: string) => void;
   loading: boolean;
@@ -26,19 +28,28 @@ const MessageInput = ({
   setFiles: (files: File[]) => void;
   optimizationMode: string;
   setOptimizationMode: (mode: string) => void;
+  focusMode: string;
+  setFocusMode: (mode: string) => void;
+  firstMessage: boolean;
 }) => {
-  const [copilotEnabled, setCopilotEnabled] = useState(false);
   const [message, setMessage] = useState('');
-  const [textareaRows, setTextareaRows] = useState(1);
-  const [mode, setMode] = useState<'multi' | 'single'>('single');
+  const [selectedModel, setSelectedModel] = useState<{
+    provider: string;
+    model: string;
+  } | null>(null);
 
   useEffect(() => {
-    if (textareaRows >= 2 && message && mode === 'single') {
-      setMode('multi');
-    } else if (!message && mode === 'multi') {
-      setMode('single');
+    // Load saved model preferences from localStorage
+    const chatModelProvider = localStorage.getItem('chatModelProvider');
+    const chatModel = localStorage.getItem('chatModel');
+
+    if (chatModelProvider && chatModel) {
+      setSelectedModel({
+        provider: chatModelProvider,
+        model: chatModel,
+      });
     }
-  }, [textareaRows, mode, message]);
+  }, []);
 
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
@@ -60,117 +71,74 @@ const MessageInput = ({
     };
   }, []);
 
-  return (
+  // Function to handle message submission
+  const handleSubmitMessage = () => {
+    // Only submit if we have a non-empty message and not currently loading
+    if (loading || message.trim().length === 0) return;
+
+    // Make sure the selected model is used when sending a message
+    if (selectedModel) {
+      localStorage.setItem('chatModelProvider', selectedModel.provider);
+      localStorage.setItem('chatModel', selectedModel.model);
+    }
+
+    sendMessage(message);
+    setMessage('');
+  };
+
+ return (
     <form
       onSubmit={(e) => {
-        if (loading) return;
         e.preventDefault();
-        sendMessage(message);
-        setMessage('');
+        handleSubmitMessage();
       }}
       onKeyDown={(e) => {
-        if (e.key === 'Enter' && !e.shiftKey && !loading) {
+        if (e.key === 'Enter' && !e.shiftKey) {
           e.preventDefault();
-          sendMessage(message);
-          setMessage('');
+          handleSubmitMessage();
         }
       }}
-      className={cn(
-        'bg-light-secondary dark:bg-dark-secondary p-4 flex items-center border border-light-200 dark:border-dark-200',
-        mode === 'multi'
-          ? 'flex-col rounded-lg'
-          : 'flex-col md:flex-row rounded-lg md:rounded-full',
-      )}
+      className="w-full"
     >
-      {mode === 'single' && (
-        <div className="flex flex-row items-center justify-between w-full mb-2 md:mb-0 md:w-auto">
-          <div className="flex flex-row items-center space-x-2">
-            <AttachSmall
-              fileIds={fileIds}
-              setFileIds={setFileIds}
-              files={files}
-              setFiles={setFiles}
-            />
-            <Optimization
-              optimizationMode={optimizationMode}
-              setOptimizationMode={setOptimizationMode}
-            />
-          </div>
-          <div className="md:hidden">
-            <CopilotToggle
-              copilotEnabled={copilotEnabled}
-              setCopilotEnabled={setCopilotEnabled}
-            />
-          </div>
-        </div>
-      )}
-      <div className="flex flex-row items-center w-full">
+      <div className="flex flex-col bg-light-secondary dark:bg-dark-secondary px-5 pt-5 pb-2 rounded-lg w-full border border-light-200 dark:border-dark-200">
         <TextareaAutosize
           ref={inputRef}
           value={message}
           onChange={(e) => setMessage(e.target.value)}
-          onHeightChange={(height, props) => {
-            setTextareaRows(Math.ceil(height / props.rowHeight));
-          }}
-          className="transition bg-transparent dark:placeholder:text-white/50 placeholder:text-sm text-sm dark:text-white resize-none focus:outline-none w-full px-2 max-h-24 lg:max-h-36 xl:max-h-48 flex-grow flex-shrink"
-          placeholder="Ask a follow-up"
+          minRows={2}
+          className="bg-transparent placeholder:text-black/50 dark:placeholder:text-white/50 text-sm text-black dark:text-white resize-none focus:outline-none w-full max-h-24 lg:max-h-36 xl:max-h-48"
+          placeholder={firstMessage ? "Ask anything..." :"Ask a follow-up"}
         />
-        {mode === 'single' && (
-          <div className="flex flex-row items-center space-x-4">
-            <div className="hidden md:block">
-              <CopilotToggle
-                copilotEnabled={copilotEnabled}
-                setCopilotEnabled={setCopilotEnabled}
-              />
-            </div>
-            <button
-              disabled={message.trim().length === 0 || loading}
-              className="bg-[#24A0ED] text-white disabled:text-black/50 dark:disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#e0e0dc79] dark:disabled:bg-[#ececec21] rounded-full p-2"
-            >
-              <ArrowUp className="bg-background" size={17} />
-            </button>
+        <div className="flex flex-row items-center justify-between mt-4">
+          <div className="flex flex-row items-center space-x-2 lg:space-x-4">
+            <Focus focusMode={focusMode} setFocusMode={setFocusMode} />
+            <Attach
+              fileIds={fileIds}
+              setFileIds={setFileIds}
+              files={files}
+              setFiles={setFiles}
+              showText={firstMessage}
+            />
+            <ModelSelector
+              selectedModel={selectedModel}
+              setSelectedModel={setSelectedModel}
+            />
           </div>
-        )}
-      </div>
-
-      {mode === 'multi' && (
-        <div className="flex flex-col md:flex-row items-start md:items-center justify-between w-full pt-2">
-          <div className="flex flex-row items-center justify-between w-full md:w-auto mb-2 md:mb-0">
-            <div className="flex flex-row items-center space-x-2">
-              <AttachSmall
-                fileIds={fileIds}
-                setFileIds={setFileIds}
-                files={files}
-                setFiles={setFiles}
-              />
-              <Optimization
-                optimizationMode={optimizationMode}
-                setOptimizationMode={setOptimizationMode}
-              />
-            </div>
-            <div className="md:hidden">
-              <CopilotToggle
-                copilotEnabled={copilotEnabled}
-                setCopilotEnabled={setCopilotEnabled}
-              />
-            </div>
-          </div>
-          <div className="flex flex-row items-center space-x-4 self-end">
-            <div className="hidden md:block">
-              <CopilotToggle
-                copilotEnabled={copilotEnabled}
-                setCopilotEnabled={setCopilotEnabled}
-              />
-            </div>
+          <div className="flex flex-row items-center space-x-1 sm:space-x-4">
+            <Optimization
+              optimizationMode={optimizationMode}
+              setOptimizationMode={setOptimizationMode}
+            />
             <button
-              disabled={message.trim().length === 0 || loading}
-              className="bg-[#24A0ED] text-white disabled:text-black/50 dark:disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#e0e0dc79] dark:disabled:bg-[#ececec21] rounded-full p-2"
+              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"
+              type="submit"
             >
-              <ArrowUp className="bg-background" size={17} />
+              {firstMessage ? <ArrowRight className="bg-background" size={17} /> : <ArrowUp className="bg-background" size={17} />}
             </button>
           </div>
         </div>
-      )}
+      </div>
     </form>
   );
 };