Improve chat navigation, model selection, and streaming

components/chat/ChatPrompt.tsx

@@ -5,72 +5,40 @@ import { ChatInput, type PromptInputMessage } from './ChatInput';
 import { Suggestion } from '@/components/ai-elements/suggestion';
 import { RiOpenaiLine } from '@remixicon/react';
 import { Shimmer } from '@/components/ai-elements/shimmer';
+import type { OpenRouterModelId } from '@/lib/openrouter';
+import {
+  offlineSuggestions,
+  webSearchSuggestions,
+  type PromptSuggestion,
+} from '@/config/suggestions';
 
-export interface PromptSuggestion {
-  key: string;
-  value: string;
-}
+export type { PromptSuggestion } from '@/config/suggestions';
 
 interface ChatPromptProps {
   value: string;
   onChange: (value: string) => void;
   onSubmit: (message: PromptInputMessage) => void;
+  modelId: OpenRouterModelId;
+  onModelChange: (modelId: OpenRouterModelId) => void;
+  onStop?: () => void;
   status?: ChatStatus;
   suggestions?: PromptSuggestion[];
   webSearchEnabled?: boolean;
 }
 
-const defaultSuggestions: PromptSuggestion[] = [
-  {
-    key: 'Latest AI news',
-    value:
-      'What are the latest developments in AI in 2026? Search for recent news.',
-  },
-  {
-    key: 'Research a company',
-    value: 'Research OpenAI: their latest products, funding, and news.',
-  },
-  {
-    key: 'Fact check',
-    value:
-      'What is the current population of the world and how is it changing?',
-  },
-  {
-    key: 'Compare topics',
-    value:
-      'Compare the latest iPhone vs Samsung Galaxy flagship models with sources.',
-  },
-];
-
-const offlineSuggestions: PromptSuggestion[] = [
-  {
-    key: 'Explain a concept',
-    value: 'Explain retrieval-augmented generation in plain language.',
-  },
-  {
-    key: 'Compare approaches',
-    value: 'Compare REST and GraphQL, including when to choose each.',
-  },
-  {
-    key: 'Draft an outline',
-    value: 'Draft an outline for a practical guide to evaluating AI agents.',
-  },
-  {
-    key: 'Brainstorm ideas',
-    value: 'Brainstorm useful AI agent ideas for a small business.',
-  },
-];
-
 export function ChatPrompt({
   value,
   onChange,
   onSubmit,
+  modelId,
+  onModelChange,
+  onStop,
   status = 'ready',
   suggestions,
   webSearchEnabled = false,
 }: ChatPromptProps) {
   const displayedSuggestions =
-    suggestions ?? (webSearchEnabled ? defaultSuggestions : offlineSuggestions);
+    suggestions ?? (webSearchEnabled ? webSearchSuggestions : offlineSuggestions);
 
   const handleSuggestionClick = (suggestion: string) => {
     onChange(suggestion);
@@ -99,6 +67,9 @@ export function ChatPrompt({
           value={value}
           onChange={onChange}
           onSubmit={onSubmit}
+          modelId={modelId}
+          onModelChange={onModelChange}
+          onStop={onStop}
           status={status}
         />
       </div>