Improve chat navigation, model selection, and streaming

components/chat/ChatInput.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import type { ChatStatus } from 'ai';
-import { PlusIcon } from 'lucide-react';
+import { RiAddLine } from '@remixicon/react';
+import { ChatModelSelector } from './ChatModelSelector';
+import type { OpenRouterModelId } from '@/lib/openrouter';
 import {
   PromptInput,
   PromptInputActionAddAttachments,
@@ -23,6 +25,9 @@ interface ChatInputProps {
   value: string;
   onChange: (value: string) => void;
   onSubmit: (message: PromptInputMessage) => void;
+  modelId: OpenRouterModelId;
+  onModelChange: (modelId: OpenRouterModelId) => void;
+  onStop?: () => void;
   status?: ChatStatus;
   placeholder?: string;
 }
@@ -31,9 +36,14 @@ export function ChatInput({
   value,
   onChange,
   onSubmit,
+  modelId,
+  onModelChange,
+  onStop,
   status = 'ready',
   placeholder,
 }: ChatInputProps) {
+  const isGenerating = status === 'submitted' || status === 'streaming';
+
   return (
     <PromptInput
       className="[&_[data-slot=input-group]]:bg-background"
@@ -55,18 +65,22 @@ export function ChatInput({
         />
       </PromptInputBody>
       <PromptInputFooter className="pt-0 pb-2">
-        <PromptInputTools>
+        <PromptInputTools className="min-w-0">
           <PromptInputActionMenu>
             <PromptInputActionMenuTrigger>
-              <PlusIcon className="size-4" />
+              <RiAddLine className="size-4" />
             </PromptInputActionMenuTrigger>
             <PromptInputActionMenuContent>
               <PromptInputActionAddAttachments />
             </PromptInputActionMenuContent>
           </PromptInputActionMenu>
+          <ChatModelSelector value={modelId} onChange={onModelChange} disabled={isGenerating} />
         </PromptInputTools>
         <PromptInputSubmit
-          disabled={status === 'streaming'}
+          aria-label={isGenerating ? 'Stop response' : 'Send message'}
+          type={isGenerating ? 'button' : 'submit'}
+          onClick={isGenerating ? onStop : undefined}
+          disabled={isGenerating && !onStop}
           status={status}
         />
       </PromptInputFooter>