feat(frontend): pass model and length from Hero submit

Author: Manishram-ai

frontend/src/components/landing/Hero.tsx

@@ -12,7 +12,7 @@ import { filesToAttached } from "@/lib/attachFiles"
 import type { AttachedFile } from "@/types/file"
 import { useSpeechRecognition } from "@/hooks/useSpeechRecognition"
 import { useAuth } from "@/context/AuthContext"
-import { MODEL_OPTIONS, DEFAULT_MODEL_ID, type ModelOptionId } from "@/lib/models"
+import { MODEL_OPTIONS, DEFAULT_MODEL_ID, MODEL_ID_TO_API, type ModelOptionId } from "@/lib/models"
 import { startBackendSession, uploadLandingStashedFiles } from "@/lib/api"
 
 /* ——— Rotating placeholder questions ——— */
@@ -172,7 +172,7 @@ function HeroModelBadge({ value, onChange }: { value: ModelOptionId; onChange?:
   )
 }
 
-function ChatBox({ active, onActiveChange, onSubmit }: { active: boolean; onActiveChange: (v: boolean) => void; onSubmit: (text: string, files?: AttachedFile[]) => void }) {
+function ChatBox({ active, onActiveChange, onSubmit }: { active: boolean; onActiveChange: (v: boolean) => void; onSubmit: (text: string, files?: AttachedFile[], model?: ModelOptionId, lengthPreset?: "short" | "medium" | "long") => void }) {
   const [inputValue, setInputValue] = useState("")
   const [typedText, setTypedText] = useState("")
   const [model, setModel] = useState<ModelOptionId>(DEFAULT_MODEL_ID)
@@ -287,7 +287,7 @@ function ChatBox({ active, onActiveChange, onSubmit }: { active: boolean; onActi
     const text = inputValue.trim()
     if (!text && attachments.length === 0) return
     const messageText = text || "See attached files."
-    onSubmit(messageText, attachments.length > 0 ? attachments : undefined)
+    onSubmit(messageText, attachments.length > 0 ? attachments : undefined, model, lengthPreset)
     setInputValue("")
     setAttachments([])
     const ta = textareaRef.current
@@ -298,7 +298,7 @@ function ChatBox({ active, onActiveChange, onSubmit }: { active: boolean; onActi
       if (wrapper) wrapper.style.height = `${ROW_H}px`
     }
     setAttachments([])
-  }, [inputValue, attachments, onSubmit])
+  }, [inputValue, attachments, onSubmit, model, lengthPreset])
 
   const handleFileChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files
@@ -611,9 +611,9 @@ export function Hero() {
   const [chatActive, setChatActive] = useState(false)
   const [creatingSession, setCreatingSession] = useState(false)
   const [createError, setCreateError] = useState<string | null>(null)
-  const pendingSubmitRef = useRef<{ text: string; files?: AttachedFile[] } | null>(null)
+  const pendingSubmitRef = useRef<{ text: string; files?: AttachedFile[]; modelId?: ModelOptionId; length?: "short" | "medium" | "long" } | null>(null)
 
-  const doSubmit = useCallback((text: string, files?: AttachedFile[]) => {
+  const doSubmit = useCallback((text: string, files?: AttachedFile[], modelId?: ModelOptionId, length?: "short" | "medium" | "long") => {
     const question = text.trim()
     if (!question && !files?.length) return
 
@@ -632,14 +632,20 @@ export function Hero() {
       }
     }
 
+    const apiModel = modelId ? MODEL_ID_TO_API[modelId] : undefined
+    const depth = length
+      ? (length.charAt(0).toUpperCase() + length.slice(1)) as "Short" | "Medium" | "Long"
+      : "Medium"
+
     setCreatingSession(true)
     void (async () => {
       try {
         const filesForApi = await uploadLandingStashedFiles()
         const run = await startBackendSession({
           question: messageText,
           webSearch: true,
-          explanationDepth: "Medium",
+          explanationDepth: depth,
+          model: apiModel,
           topicName: messageText,
           files: filesForApi ?? undefined,
         })
@@ -658,20 +664,20 @@ export function Hero() {
   /* After user logs in, auto-submit any pending message */
   useEffect(() => {
     if (!loading && user && pendingSubmitRef.current) {
-      const { text, files } = pendingSubmitRef.current
+      const { text, files, modelId, length } = pendingSubmitRef.current
       pendingSubmitRef.current = null
-      doSubmit(text, files)
+      doSubmit(text, files, modelId, length)
     }
   }, [loading, user, doSubmit])
 
-  const handleHeroSubmit = useCallback((text: string, files?: AttachedFile[]) => {
+  const handleHeroSubmit = useCallback((text: string, files?: AttachedFile[], modelId?: ModelOptionId, length?: "short" | "medium" | "long") => {
     if (loading) return
     if (!user) {
-      pendingSubmitRef.current = { text, files }
+      pendingSubmitRef.current = { text, files, modelId, length }
       openLoginModal("Sign in to start a chat session.")
       return
     }
-    doSubmit(text, files)
+    doSubmit(text, files, modelId, length)
   }, [loading, user, openLoginModal, doSubmit])
 
   /* ——— Mouse parallax — direct DOM refs for performance (no React re-renders) ——— */