34 | ) 35 | } 36 | 37 | function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { 38 | return ( 39 |

47 | ) 48 | } 49 | 50 | function AlertDescription({ 51 | className, 52 | ...props 53 | }: React.ComponentProps<"div">) { 54 | return ( 55 |

63 | ) 64 | } 65 | 66 | export { Alert, AlertTitle, AlertDescription } 67 | -------------------------------------------------------------------------------- /components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", 9 | { 10 | variants: { 11 | variant: { 12 | default: 13 | "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", 14 | destructive: 15 | "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", 16 | outline: 17 | "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", 18 | secondary: 19 | "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", 20 | ghost: 21 | "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", 22 | link: "text-primary underline-offset-4 hover:underline", 23 | }, 24 | size: { 25 | default: "h-9 px-4 py-2 has-[>svg]:px-3", 26 | sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", 27 | lg: "h-10 rounded-md px-6 has-[>svg]:px-4", 28 | icon: "size-9", 29 | }, 30 | }, 31 | defaultVariants: { 32 | variant: "default", 33 | size: "default", 34 | }, 35 | } 36 | ) 37 | 38 | function Button({ 39 | className, 40 | variant, 41 | size, 42 | asChild = false, 43 | ...props 44 | }: React.ComponentProps<"button"> & 45 | VariantProps & { 46 | asChild?: boolean 47 | }) { 48 | const Comp = asChild ? Slot : "button" 49 | 50 | return ( 51 | 56 | ) 57 | } 58 | 59 | export { Button, buttonVariants } 60 | -------------------------------------------------------------------------------- /lib/hooks/use-available-models.ts: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useCallback } from "react"; 2 | import type { DisplayModel } from "@/lib/display-model"; 3 | import type { GatewayLanguageModelEntry } from "@ai-sdk/gateway"; 4 | import { SUPPORTED_MODELS } from "@/lib/constants"; 5 | 6 | const MAX_RETRIES = 3; 7 | const RETRY_DELAY_MILLIS = 5000; 8 | 9 | function buildModelList(models: GatewayLanguageModelEntry[]): DisplayModel[] { 10 | return models 11 | .filter((model) => SUPPORTED_MODELS.includes(model.id)) 12 | .map((model) => ({ 13 | id: model.id, 14 | label: model.name, 15 | })); 16 | } 17 | 18 | export function useAvailableModels() { 19 | const [models, setModels] = useState([]); 20 | const [isLoading, setIsLoading] = useState(true); 21 | const [error, setError] = useState(null); 22 | const [retryCount, setRetryCount] = useState(0); 23 | 24 | const fetchModels = useCallback( 25 | async (isRetry: boolean = false) => { 26 | if (!isRetry) { 27 | setIsLoading(true); 28 | setError(null); 29 | } 30 | 31 | try { 32 | const response = await fetch("/api/models"); 33 | if (!response.ok) { 34 | throw new Error("Failed to fetch models"); 35 | } 36 | const data = await response.json(); 37 | const newModels = buildModelList(data.models); 38 | setModels(newModels); 39 | setError(null); 40 | setRetryCount(0); 41 | setIsLoading(false); 42 | } catch (err) { 43 | setError( 44 | err instanceof Error ? err : new Error("Failed to fetch models") 45 | ); 46 | if (retryCount < MAX_RETRIES) { 47 | setRetryCount((prev) => prev + 1); 48 | setIsLoading(true); 49 | } else { 50 | setIsLoading(false); 51 | } 52 | } finally { 53 | setIsLoading(false); 54 | } 55 | }, 56 | [retryCount] 57 | ); 58 | 59 | useEffect(() => { 60 | if (retryCount === 0) { 61 | fetchModels(false); 62 | } else if (retryCount > 0 && retryCount <= MAX_RETRIES) { 63 | const timerId = setTimeout(() => { 64 | fetchModels(true); 65 | }, RETRY_DELAY_MILLIS); 66 | return () => clearTimeout(timerId); 67 | } 68 | }, [retryCount, fetchModels]); 69 | 70 | return { models, isLoading, error }; 71 | } 72 | -------------------------------------------------------------------------------- /components/ui/card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | function Card({ className, ...props }: React.ComponentProps<"div">) { 6 | return ( 7 |

15 | ) 16 | } 17 | 18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) { 19 | return ( 20 |

28 | ) 29 | } 30 | 31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) { 32 | return ( 33 |

38 | ) 39 | } 40 | 41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) { 42 | return ( 43 |

48 | ) 49 | } 50 | 51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) { 52 | return ( 53 |

61 | ) 62 | } 63 | 64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) { 65 | return ( 66 |

71 | ) 72 | } 73 | 74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) { 75 | return ( 76 |

81 | ) 82 | } 83 | 84 | export { 85 | Card, 86 | CardHeader, 87 | CardFooter, 88 | CardTitle, 89 | CardAction, 90 | CardDescription, 91 | CardContent, 92 | } 93 | -------------------------------------------------------------------------------- /components/model-selector.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useAvailableModels } from "@/lib/hooks/use-available-models"; 4 | import { Loader2, ChevronDown } from "lucide-react"; 5 | import { DEFAULT_MODEL } from "@/lib/constants"; 6 | import { 7 | Select, 8 | SelectContent, 9 | SelectItem, 10 | SelectTrigger, 11 | SelectValue, 12 | SelectGroup, 13 | SelectLabel, 14 | } from "@/components/ui/select"; 15 | import { memo } from "react"; 16 | 17 | type ModelSelectorProps = { 18 | modelId: string; 19 | onModelChange: (modelId: string) => void; 20 | }; 21 | 22 | export const ModelSelector = memo(function ModelSelector({ 23 | modelId = DEFAULT_MODEL, 24 | onModelChange, 25 | }: ModelSelectorProps) { 26 | const { models, isLoading, error } = useAvailableModels(); 27 | 28 | return ( 29 | 69 | ); 70 | }); 71 | -------------------------------------------------------------------------------- /components/ui/select.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as SelectPrimitive from "@radix-ui/react-select" 5 | import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | function Select({ 10 | ...props 11 | }: React.ComponentProps) { 12 | return 13 | } 14 | 15 | function SelectGroup({ 16 | ...props 17 | }: React.ComponentProps) { 18 | return 19 | } 20 | 21 | function SelectValue({ 22 | ...props 23 | }: React.ComponentProps) { 24 | return 25 | } 26 | 27 | function SelectTrigger({ 28 | className, 29 | size = "default", 30 | children, 31 | ...props 32 | }: React.ComponentProps & { 33 | size?: "sm" | "default" 34 | }) { 35 | return ( 36 | 45 | {children} 46 | 47 | 48 | 49 | 50 | ) 51 | } 52 | 53 | function SelectContent({ 54 | className, 55 | children, 56 | position = "popper", 57 | ...props 58 | }: React.ComponentProps) { 59 | return ( 60 | 61 | 72 | 73 | 80 | {children} 81 | 82 | 83 | 84 | 85 | ) 86 | } 87 | 88 | function SelectLabel({ 89 | className, 90 | ...props 91 | }: React.ComponentProps) { 92 | return ( 93 | 98 | ) 99 | } 100 | 101 | function SelectItem({ 102 | className, 103 | children, 104 | ...props 105 | }: React.ComponentProps) { 106 | return ( 107 | 115 | 116 | 117 | 118 | 119 | 120 | {children} 121 | 122 | ) 123 | } 124 | 125 | function SelectSeparator({ 126 | className, 127 | ...props 128 | }: React.ComponentProps) { 129 | return ( 130 | 135 | ) 136 | } 137 | 138 | function SelectScrollUpButton({ 139 | className, 140 | ...props 141 | }: React.ComponentProps) { 142 | return ( 143 | 151 | 152 | 153 | ) 154 | } 155 | 156 | function SelectScrollDownButton({ 157 | className, 158 | ...props 159 | }: React.ComponentProps) { 160 | return ( 161 | 169 | 170 | 171 | ) 172 | } 173 | 174 | export { 175 | Select, 176 | SelectContent, 177 | SelectGroup, 178 | SelectItem, 179 | SelectLabel, 180 | SelectScrollDownButton, 181 | SelectScrollUpButton, 182 | SelectSeparator, 183 | SelectTrigger, 184 | SelectValue, 185 | } 186 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | @import "tw-animate-css"; 3 | @source "../node_modules/streamdown/dist/*.js"; 4 | 5 | @custom-variant dark (&:is(.dark *)); 6 | 7 | @theme inline { 8 | --color-background: var(--background); 9 | --color-foreground: var(--foreground); 10 | --font-sans: var(--font-geist-sans); 11 | --font-mono: var(--font-geist-mono); 12 | --color-sidebar-ring: var(--sidebar-ring); 13 | --color-sidebar-border: var(--sidebar-border); 14 | --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); 15 | --color-sidebar-accent: var(--sidebar-accent); 16 | --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); 17 | --color-sidebar-primary: var(--sidebar-primary); 18 | --color-sidebar-foreground: var(--sidebar-foreground); 19 | --color-sidebar: var(--sidebar); 20 | --color-chart-5: var(--chart-5); 21 | --color-chart-4: var(--chart-4); 22 | --color-chart-3: var(--chart-3); 23 | --color-chart-2: var(--chart-2); 24 | --color-chart-1: var(--chart-1); 25 | --color-ring: var(--ring); 26 | --color-input: var(--input); 27 | --color-border: var(--border); 28 | --color-destructive: var(--destructive); 29 | --color-accent-foreground: var(--accent-foreground); 30 | --color-accent: var(--accent); 31 | --color-muted-foreground: var(--muted-foreground); 32 | --color-muted: var(--muted); 33 | --color-secondary-foreground: var(--secondary-foreground); 34 | --color-secondary: var(--secondary); 35 | --color-primary-foreground: var(--primary-foreground); 36 | --color-primary: var(--primary); 37 | --color-popover-foreground: var(--popover-foreground); 38 | --color-popover: var(--popover); 39 | --color-card-foreground: var(--card-foreground); 40 | --color-card: var(--card); 41 | --radius-sm: calc(var(--radius) - 4px); 42 | --radius-md: calc(var(--radius) - 2px); 43 | --radius-lg: var(--radius); 44 | --radius-xl: calc(var(--radius) + 4px); 45 | } 46 | 47 | :root { 48 | --radius: 0.75rem; 49 | --background: oklch(0.99 0 0); 50 | --foreground: oklch(0.12 0 0); 51 | --card: oklch(1 0 0); 52 | --card-foreground: oklch(0.12 0 0); 53 | --popover: oklch(1 0 0); 54 | --popover-foreground: oklch(0.12 0 0); 55 | --primary: oklch(0.15 0 0); 56 | --primary-foreground: oklch(0.98 0 0); 57 | --secondary: oklch(0.96 0 0); 58 | --secondary-foreground: oklch(0.15 0 0); 59 | --muted: oklch(0.96 0 0); 60 | --muted-foreground: oklch(0.45 0 0); 61 | --accent: oklch(0.94 0 0); 62 | --accent-foreground: oklch(0.15 0 0); 63 | --destructive: oklch(0.577 0.245 27.325); 64 | --border: oklch(0.89 0 0); 65 | --input: oklch(0.94 0 0); 66 | --ring: oklch(0.15 0 0); 67 | --chart-1: oklch(0.646 0.222 41.116); 68 | --chart-2: oklch(0.6 0.118 184.704); 69 | --chart-3: oklch(0.398 0.07 227.392); 70 | --chart-4: oklch(0.828 0.189 84.429); 71 | --chart-5: oklch(0.769 0.188 70.08); 72 | --sidebar: oklch(0.98 0 0); 73 | --sidebar-foreground: oklch(0.12 0 0); 74 | --sidebar-primary: oklch(0.15 0 0); 75 | --sidebar-primary-foreground: oklch(0.98 0 0); 76 | --sidebar-accent: oklch(0.96 0 0); 77 | --sidebar-accent-foreground: oklch(0.15 0 0); 78 | --sidebar-border: oklch(0.89 0 0); 79 | --sidebar-ring: oklch(0.15 0 0); 80 | } 81 | 82 | .dark { 83 | --background: oklch(0.08 0 0); 84 | --foreground: oklch(0.95 0 0); 85 | --card: oklch(0.12 0 0); 86 | --card-foreground: oklch(0.95 0 0); 87 | --popover: oklch(0.12 0 0); 88 | --popover-foreground: oklch(0.95 0 0); 89 | --primary: oklch(0.88 0 0); 90 | --primary-foreground: oklch(0.08 0 0); 91 | --secondary: oklch(0.18 0 0); 92 | --secondary-foreground: oklch(0.95 0 0); 93 | --muted: oklch(0.18 0 0); 94 | --muted-foreground: oklch(0.65 0 0); 95 | --accent: oklch(0.18 0 0); 96 | --accent-foreground: oklch(0.95 0 0); 97 | --destructive: oklch(0.704 0.191 22.216); 98 | --border: oklch(0.95 0 0 / 12%); 99 | --input: oklch(0.95 0 0 / 8%); 100 | --ring: oklch(0.88 0 0); 101 | --chart-1: oklch(0.488 0.243 264.376); 102 | --chart-2: oklch(0.696 0.17 162.48); 103 | --chart-3: oklch(0.769 0.188 70.08); 104 | --chart-4: oklch(0.627 0.265 303.9); 105 | --chart-5: oklch(0.645 0.246 16.439); 106 | --sidebar: oklch(0.12 0 0); 107 | --sidebar-foreground: oklch(0.95 0 0); 108 | --sidebar-primary: oklch(0.88 0 0); 109 | --sidebar-primary-foreground: oklch(0.08 0 0); 110 | --sidebar-accent: oklch(0.18 0 0); 111 | --sidebar-accent-foreground: oklch(0.95 0 0); 112 | --sidebar-border: oklch(0.95 0 0 / 12%); 113 | --sidebar-ring: oklch(0.88 0 0); 114 | } 115 | 116 | @layer base { 117 | * { 118 | @apply border-border outline-ring/50; 119 | } 120 | body { 121 | @apply bg-background text-foreground; 122 | } 123 | 124 | /* Hide scrollbar while keeping functionality */ 125 | .hide-scrollbar { 126 | scrollbar-width: none; /* Firefox */ 127 | -ms-overflow-style: none; /* Internet Explorer 10+ */ 128 | } 129 | 130 | .hide-scrollbar::-webkit-scrollbar { 131 | display: none; /* Safari and Chrome */ 132 | } 133 | } 134 | 135 | @layer utilities { 136 | .animate-fade-in { 137 | animation: fade-in 200ms ease-out; 138 | } 139 | 140 | .animate-slide-up { 141 | animation: slide-up 200ms ease-out; 142 | } 143 | 144 | .animate-slide-down { 145 | animation: slide-down 150ms ease-out; 146 | } 147 | 148 | .animate-scale-in { 149 | animation: scale-in 200ms ease-out; 150 | } 151 | 152 | .animate-message-in { 153 | animation: message-in 300ms ease-out; 154 | } 155 | 156 | .shadow-border-small { 157 | box-shadow: 158 | 0 0 0 1px rgba(0, 0, 0, 0.08), 159 | 0 1px 2px rgba(0, 0, 0, 0.12); 160 | } 161 | 162 | .shadow-border-medium { 163 | box-shadow: 164 | 0 0 0 1px rgba(0, 0, 0, 0.08), 165 | 0 2px 4px rgba(0, 0, 0, 0.12), 166 | 0 1px 6px rgba(0, 0, 0, 0.05); 167 | } 168 | 169 | .dark .shadow-border-small { 170 | box-shadow: 171 | 0 0 0 1px rgba(255, 255, 255, 0.1), 172 | 0 1px 2px rgba(0, 0, 0, 0.4); 173 | } 174 | 175 | .dark .shadow-border-medium { 176 | box-shadow: 177 | 0 0 0 1px rgba(255, 255, 255, 0.1), 178 | 0 2px 4px rgba(0, 0, 0, 0.4), 179 | 0 1px 6px rgba(0, 0, 0, 0.2); 180 | } 181 | 182 | .glass-effect { 183 | backdrop-filter: blur(12px); 184 | background: rgba(255, 255, 255, 0.8); 185 | border: 1px solid rgba(255, 255, 255, 0.2); 186 | } 187 | 188 | .dark .glass-effect { 189 | background: rgba(0, 0, 0, 0.4); 190 | border: 1px solid rgba(255, 255, 255, 0.1); 191 | } 192 | 193 | @keyframes fade-in { 194 | from { 195 | opacity: 0; 196 | } 197 | to { 198 | opacity: 1; 199 | } 200 | } 201 | 202 | @keyframes slide-up { 203 | from { 204 | opacity: 0; 205 | transform: translateY(20px); 206 | } 207 | to { 208 | opacity: 1; 209 | transform: translateY(0); 210 | } 211 | } 212 | 213 | @keyframes slide-down { 214 | from { 215 | opacity: 0; 216 | transform: translateY(-10px); 217 | } 218 | to { 219 | opacity: 1; 220 | transform: translateY(0); 221 | } 222 | } 223 | 224 | @keyframes scale-in { 225 | from { 226 | opacity: 0; 227 | transform: scale(0.95); 228 | } 229 | to { 230 | opacity: 1; 231 | transform: scale(1); 232 | } 233 | } 234 | 235 | @keyframes message-in { 236 | from { 237 | opacity: 0; 238 | transform: translateY(20px); 239 | filter: blur(4px); 240 | } 241 | to { 242 | opacity: 1; 243 | transform: translateY(0); 244 | filter: blur(0); 245 | } 246 | } 247 | 248 | @media (prefers-reduced-motion: reduce) { 249 | .animate-fade-in, 250 | .animate-slide-up, 251 | .animate-slide-down, 252 | .animate-scale-in, 253 | .animate-message-in { 254 | animation: fade-in 200ms ease-out; 255 | } 256 | } 257 | } 258 | -------------------------------------------------------------------------------- /components/chat.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useChat } from "@ai-sdk/react"; 4 | import { useRouter } from "next/navigation"; 5 | import { ModelSelector } from "@/components/model-selector"; 6 | import { Button } from "@/components/ui/button"; 7 | import { Input } from "@/components/ui/input"; 8 | import { ThemeToggle } from "@/components/theme-toggle"; 9 | import { SendIcon, PlusIcon } from "lucide-react"; 10 | import { useState, useEffect, useRef } from "react"; 11 | import { DEFAULT_MODEL } from "@/lib/constants"; 12 | import { Alert, AlertDescription } from "@/components/ui/alert"; 13 | import { AlertCircle } from "lucide-react"; 14 | import { cn } from "@/lib/utils"; 15 | import Link from "next/link"; 16 | import { Streamdown } from "streamdown"; 17 | 18 | function ModelSelectorHandler({ 19 | modelId, 20 | onModelIdChange, 21 | }: { 22 | modelId: string; 23 | onModelIdChange: (newModelId: string) => void; 24 | }) { 25 | const router = useRouter(); 26 | 27 | const handleSelectChange = (newModelId: string) => { 28 | onModelIdChange(newModelId); 29 | const params = new URLSearchParams(); 30 | params.set("modelId", newModelId); 31 | router.push(`?${params.toString()}`); 32 | }; 33 | 34 | return ; 35 | } 36 | 37 | export function Chat({ modelId = DEFAULT_MODEL }: { modelId: string }) { 38 | const [input, setInput] = useState(""); 39 | const [currentModelId, setCurrentModelId] = useState(modelId); 40 | const messagesEndRef = useRef(null); 41 | 42 | const handleModelIdChange = (newModelId: string) => { 43 | setCurrentModelId(newModelId); 44 | }; 45 | 46 | const { messages, error, sendMessage, regenerate, setMessages, stop, status } = useChat(); 47 | 48 | const hasMessages = messages.length > 0; 49 | 50 | const scrollToBottom = () => { 51 | messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); 52 | }; 53 | 54 | useEffect(() => { 55 | scrollToBottom(); 56 | }, [messages]); 57 | 58 | const handleNewChat = () => { 59 | stop(); 60 | setMessages([]); 61 | setInput(""); 62 | }; 63 | 64 | return ( 65 |

66 |

67 | 75 | 76 |

77 | {!hasMessages && ( 78 |

79 |

80 |

81 | 82 | AI GATEWAY 83 | 84 |

85 |

86 |

{ 88 | e.preventDefault(); 89 | sendMessage({ text: input }, { body: { modelId: currentModelId } }); 90 | setInput(""); 91 | }} 92 | > 93 |

94 | 98 |

99 | setInput(e.target.value)} 103 | value={input} 104 | autoFocus 105 | className="flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-base placeholder:text-muted-foreground/60" 106 | onKeyDown={(e) => { 107 | if (e.metaKey && e.key === "Enter") { 108 | sendMessage( 109 | { text: input }, 110 | { body: { modelId: currentModelId } }, 111 | ); 112 | setInput(""); 113 | } 114 | }} 115 | /> 116 | 125 |

126 |

127 |

128 |

129 |

130 |

131 | )} 132 | 133 | {hasMessages && ( 134 |

135 |

136 |

137 | {messages.map((m) => ( 138 |

146 | {m.parts.map((part, i) => { 147 | switch (part.type) { 148 | case "text": 149 | return m.role === "assistant" ? ( 150 | 151 | {part.text} 152 | 153 | ) : ( 154 |

{part.text}

155 | ); 156 | } 157 | })} 158 |

159 | ))} 160 | 161 |

162 |

163 |

164 |

165 | )} 166 | 167 | {error && ( 168 |

169 | 170 |

171 | 172 | 173 | {error.message.startsWith("AI Gateway requires a valid credit card") ?

AI Gateway requires a valid credit card on file to service requests. Please visit your dashboard to add a card and unlock your free credits.

: "An error occurred while generating the response."} 174 | 175 |

176 | 184 | 185 |

186 | )} 187 | 188 | {hasMessages && ( 189 |

190 |

{ 192 | e.preventDefault(); 193 | sendMessage({ text: input }, { body: { modelId: currentModelId } }); 194 | setInput(""); 195 | }} 196 | className="px-4 md:px-8 pb-6 md:pb-8" 197 | > 198 |

199 | 203 |

204 | setInput(e.target.value)} 208 | value={input} 209 | className="flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-base placeholder:text-muted-foreground/60 font-medium" 210 | onKeyDown={(e) => { 211 | if (e.metaKey && e.key === "Enter") { 212 | sendMessage( 213 | { text: input }, 214 | { body: { modelId: currentModelId } }, 215 | ); 216 | setInput(""); 217 | } 218 | }} 219 | /> 220 | 229 |

230 |

231 |

232 |

233 | )} 234 | 235 | 257 |

258 | ); 259 | } 260 | --------------------------------------------------------------------------------