From fd8b325ddab9180ed981b7396f4ec30a398512ee Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Tue, 25 Aug 2026 14:47:40 -0700
Subject: [PATCH 1/8] fix: clean-up chat & text-generation features.

---
 ai/ai-samples/src/features/chat/index.tsx     |  35 +++---
 .../src/features/text-generation/index.tsx    | 104 ++++++++++++++----
 2 files changed, 98 insertions(+), 41 deletions(-)

diff --git a/ai/ai-samples/src/features/chat/index.tsx b/ai/ai-samples/src/features/chat/index.tsx
index 3843f5a98..c1f6d953c 100644
--- a/ai/ai-samples/src/features/chat/index.tsx
+++ b/ai/ai-samples/src/features/chat/index.tsx
@@ -12,44 +12,37 @@ export default function ChatView() {
   const [input, setInput] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-
-  // Use a ref to hold the active chat session from the Firebase AI SDK.
-  // This prevents the session from being recreated on every React render.
   const chatSessionRef = useRef<ChatSession | null>(null);
-
-  // Initialize the chat when the component mounts
   useEffect(() => {
     handleResetChat();
   }, []);
 
-   const handleResetChat = () => {
-    try {
-      chatSessionRef.current = startNewChat();
-      setError(null);
-    } catch (err: any) {
-      setError(err.message || 'Failed to initialize chat session. Please check your Firebase configuration.');
-    }
-    setMessages([]);
-    setInput('');
-  };
+  const handleResetChat = () => {
+  try {
+    chatSessionRef.current = startNewChat();
+    setError(null);
+  } catch (err: unknown) {
+    const errorMessage = err instanceof Error 
+      ? err.message 
+      : 'Failed to initialize chat session. Please check your Firebase configuration.';
+    setError(errorMessage);
+  }
+  setMessages([]);
+  setInput('');
+};
 
   const handleSendMessage = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!input.trim() || !chatSessionRef.current) return;
 
     const userMessage = input.trim();
-    setInput(''); // Clear input immediately
+    setInput(''); 
     setError(null);
     setLoading(true);
-
-    // Optimistically add user message to UI
     setMessages((prev) => [...prev, { role: 'user', text: userMessage }]);
 
     try {
-      // Call framework-agnostic service layer
       const responseText = await sendChatMessage(chatSessionRef.current, userMessage);
-      
-      // Add model response to UI
       setMessages((prev) => [...prev, { role: 'model', text: responseText }]);
     } catch (err: any) {
       setError(err.message || 'Failed to send message. Check console for details.');
diff --git a/ai/ai-samples/src/features/text-generation/index.tsx b/ai/ai-samples/src/features/text-generation/index.tsx
index 7cf7034a6..23e29d77e 100644
--- a/ai/ai-samples/src/features/text-generation/index.tsx
+++ b/ai/ai-samples/src/features/text-generation/index.tsx
@@ -1,49 +1,113 @@
 import { useState } from 'react';
-import { generateText } from './service';
+import { 
+  generateText, 
+  streamText, 
+  generateWithSystemInstruction 
+} from './service';
 
 export default function TextGeneration() {
   const [prompt, setPrompt] = useState<string>('');
+  const cleanPrompt = prompt.trim();
+  const [systemInstruction, setSystemInstruction] = useState<string>('');
+  const [useStreaming, setUseStreaming] = useState<boolean>(true);
   const [response, setResponse] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
 
   const handleGenerate = async () => {
-    if (!prompt.trim()) return;
+   if (!cleanPrompt) return;
 
     setLoading(true);
     setError(null);
     setResponse('');
 
     try {
-      // Direct call to the decoupled logic service
-      const text = await generateText(prompt);
-      setResponse(text);
-    } catch (err: any) {
-      setError(err.message || 'An unexpected error occurred');
+     if (useStreaming) {
+        await streamText(cleanPrompt, (chunk) => {
+          setResponse((prev) => prev + chunk);
+        });
+      } else if (systemInstruction.trim()) {
+        const text = await generateWithSystemInstruction(systemInstruction, prompt);
+        setResponse(text);
+      } else {
+        const text = await generateText(prompt);
+        setResponse(text);
+      }
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error 
+        ? err.message 
+        : 'An unexpected error occurred';
+      
+      setError(errorMessage);
     } finally {
       setLoading(false);
     }
   };
 
-
   return (
     <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
       <h2>Text Generation</h2>
       
-      <textarea
-        value={prompt}
-        onChange={(e) => setPrompt(e.target.value)}
-        placeholder="Ask the AI a question..."
-        rows={5}
-        style={{ width: '100%', marginBottom: '10px', padding: '10px' }}
-      />
+      {/* System Instruction Input */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', color: '#5f6368' }}>
+          System Instruction (Persona/Rules)
+        </label>
+        <input
+          type="text"
+          value={systemInstruction}
+          onChange={(e) => setSystemInstruction(e.target.value)}
+          placeholder="e.g., You are a helpful assistant..."
+          disabled={loading || useStreaming} // Disabled if streaming, since your service stream function doesn't support it yet
+          style={{ width: '100%', padding: '10px', boxSizing: 'border-box' }}
+        />
+      </div>
+
+      {/* Main Prompt Input */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', color: '#5f6368' }}>
+          Prompt
+        </label>
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="Ask the AI a question..."
+          rows={5}
+          disabled={loading}
+          style={{ width: '100%', padding: '10px', boxSizing: 'border-box' }}
+        />
+      </div>
       
-      <button onClick={handleGenerate} disabled={loading || !prompt.trim()} style={{ padding: '10px 20px' }}>
-        {loading ? 'Generating...' : 'Generate'}
-      </button>
+      {/* Controls: Checkbox and Button */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+          <input 
+            type="checkbox" 
+            checked={useStreaming}
+            onChange={(e) => setUseStreaming(e.target.checked)}
+            disabled={loading}
+          />
+          Stream response
+        </label>
 
-      {error && <p style={{ color: 'red', marginTop: '15px' }}>{error}</p>}
-      {response && <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f0f0f0' }}><p style={{ whiteSpace: 'pre-wrap' }}>{response}</p></div>}
+        <button 
+          onClick={handleGenerate} 
+          disabled={loading || !prompt.trim()} 
+          style={{ padding: '10px 20px', cursor: (loading || !prompt.trim()) ? 'not-allowed' : 'pointer' }}
+        >
+          {loading ? 'Generating...' : 'Generate'}
+        </button>
+      </div>
+
+      {/* Error Message */}
+      {error && <p style={{ color: '#c5221f', marginTop: '15px' }}>{error}</p>}
+      
+      {/* Response Box */}
+      {response && (
+        <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f0f0f0', borderRadius: '8px' }}>
+          <p style={{ whiteSpace: 'pre-wrap', margin: 0 }}>{response}</p>
+        </div>
+      )}
     </div>
   );
 }
\ No newline at end of file

From 28b48066cdaaf111628d6ae32f56860b1994fb66 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Tue, 25 Aug 2026 14:53:51 -0700
Subject: [PATCH 2/8] comment cleanup

---
 ai/ai-samples/src/features/text-generation/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ai/ai-samples/src/features/text-generation/index.tsx b/ai/ai-samples/src/features/text-generation/index.tsx
index 23e29d77e..ffe2d8d6b 100644
--- a/ai/ai-samples/src/features/text-generation/index.tsx
+++ b/ai/ai-samples/src/features/text-generation/index.tsx
@@ -58,7 +58,7 @@ export default function TextGeneration() {
           value={systemInstruction}
           onChange={(e) => setSystemInstruction(e.target.value)}
           placeholder="e.g., You are a helpful assistant..."
-          disabled={loading || useStreaming} // Disabled if streaming, since your service stream function doesn't support it yet
+          disabled={loading || useStreaming} 
           style={{ width: '100%', padding: '10px', boxSizing: 'border-box' }}
         />
       </div>

From 8795f6826aee0a5d9393f6dbf50fb72e3f201836 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Tue, 25 Aug 2026 15:00:06 -0700
Subject: [PATCH 3/8] Update
 ai/ai-samples/src/features/text-generation/index.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 ai/ai-samples/src/features/text-generation/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ai/ai-samples/src/features/text-generation/index.tsx b/ai/ai-samples/src/features/text-generation/index.tsx
index ffe2d8d6b..37dcf6602 100644
--- a/ai/ai-samples/src/features/text-generation/index.tsx
+++ b/ai/ai-samples/src/features/text-generation/index.tsx
@@ -92,8 +92,8 @@ export default function TextGeneration() {
 
         <button 
           onClick={handleGenerate} 
-          disabled={loading || !prompt.trim()} 
-          style={{ padding: '10px 20px', cursor: (loading || !prompt.trim()) ? 'not-allowed' : 'pointer' }}
+          disabled={loading || !cleanPrompt} 
+          style={{ padding: '10px 20px', cursor: (loading || !cleanPrompt) ? 'not-allowed' : 'pointer' }}
         >
           {loading ? 'Generating...' : 'Generate'}
         </button>

From 239d37d6519ace19a597a6332adf7e74c28e7621 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Tue, 25 Aug 2026 15:00:21 -0700
Subject: [PATCH 4/8] Update ai/ai-samples/src/features/chat/index.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 ai/ai-samples/src/features/chat/index.tsx | 26 +++++++++++------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/ai/ai-samples/src/features/chat/index.tsx b/ai/ai-samples/src/features/chat/index.tsx
index c1f6d953c..555937b58 100644
--- a/ai/ai-samples/src/features/chat/index.tsx
+++ b/ai/ai-samples/src/features/chat/index.tsx
@@ -17,19 +17,19 @@ export default function ChatView() {
     handleResetChat();
   }, []);
 
-  const handleResetChat = () => {
-  try {
-    chatSessionRef.current = startNewChat();
-    setError(null);
-  } catch (err: unknown) {
-    const errorMessage = err instanceof Error 
-      ? err.message 
-      : 'Failed to initialize chat session. Please check your Firebase configuration.';
-    setError(errorMessage);
-  }
-  setMessages([]);
-  setInput('');
-};
+  const handleResetChat = React.useCallback(() => {
+    try {
+      chatSessionRef.current = startNewChat();
+      setError(null);
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error 
+        ? err.message 
+        : 'Failed to initialize chat session. Please check your Firebase configuration.';
+      setError(errorMessage);
+    }
+    setMessages([]);
+    setInput('');
+  }, []);
 
   const handleSendMessage = async (e: React.FormEvent) => {
     e.preventDefault();

From a01faab6b59dd2cedf2ce4c99e667497610d2db9 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Tue, 25 Aug 2026 15:06:14 -0700
Subject: [PATCH 5/8] fix: minor mismatch between prompt passing

---
 .../src/features/text-generation/index.tsx    | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/ai/ai-samples/src/features/text-generation/index.tsx b/ai/ai-samples/src/features/text-generation/index.tsx
index 37dcf6602..5d62ddb15 100644
--- a/ai/ai-samples/src/features/text-generation/index.tsx
+++ b/ai/ai-samples/src/features/text-generation/index.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import { 
-  generateText, 
-  streamText, 
-  generateWithSystemInstruction 
+import {
+  generateText,
+  streamText,
+  generateWithSystemInstruction
 } from './service';
 
 export default function TextGeneration() {
@@ -15,29 +15,29 @@ export default function TextGeneration() {
   const [error, setError] = useState<string | null>(null);
 
   const handleGenerate = async () => {
-   if (!cleanPrompt) return;
+    if (!cleanPrompt) return;
 
     setLoading(true);
     setError(null);
     setResponse('');
 
     try {
-     if (useStreaming) {
+      if (useStreaming) {
         await streamText(cleanPrompt, (chunk) => {
           setResponse((prev) => prev + chunk);
         });
       } else if (systemInstruction.trim()) {
-        const text = await generateWithSystemInstruction(systemInstruction, prompt);
+        const text = await generateWithSystemInstruction(systemInstruction, cleanPrompt);
         setResponse(text);
       } else {
-        const text = await generateText(prompt);
+        const text = await generateText(cleanPrompt);
         setResponse(text);
       }
     } catch (err: unknown) {
-      const errorMessage = err instanceof Error 
-        ? err.message 
+      const errorMessage = err instanceof Error
+        ? err.message
         : 'An unexpected error occurred';
-      
+
       setError(errorMessage);
     } finally {
       setLoading(false);
@@ -47,7 +47,7 @@ export default function TextGeneration() {
   return (
     <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
       <h2>Text Generation</h2>
-      
+
       {/* System Instruction Input */}
       <div style={{ marginBottom: '12px' }}>
         <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', color: '#5f6368' }}>
@@ -58,7 +58,7 @@ export default function TextGeneration() {
           value={systemInstruction}
           onChange={(e) => setSystemInstruction(e.target.value)}
           placeholder="e.g., You are a helpful assistant..."
-          disabled={loading || useStreaming} 
+          disabled={loading || useStreaming}
           style={{ width: '100%', padding: '10px', boxSizing: 'border-box' }}
         />
       </div>
@@ -77,12 +77,12 @@ export default function TextGeneration() {
           style={{ width: '100%', padding: '10px', boxSizing: 'border-box' }}
         />
       </div>
-      
+
       {/* Controls: Checkbox and Button */}
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
-          <input 
-            type="checkbox" 
+          <input
+            type="checkbox"
             checked={useStreaming}
             onChange={(e) => setUseStreaming(e.target.checked)}
             disabled={loading}
@@ -90,9 +90,9 @@ export default function TextGeneration() {
           Stream response
         </label>
 
-        <button 
-          onClick={handleGenerate} 
-          disabled={loading || !cleanPrompt} 
+        <button
+          onClick={handleGenerate}
+          disabled={loading || !cleanPrompt}
           style={{ padding: '10px 20px', cursor: (loading || !cleanPrompt) ? 'not-allowed' : 'pointer' }}
         >
           {loading ? 'Generating...' : 'Generate'}
@@ -101,7 +101,7 @@ export default function TextGeneration() {
 
       {/* Error Message */}
       {error && <p style={{ color: '#c5221f', marginTop: '15px' }}>{error}</p>}
-      
+
       {/* Response Box */}
       {response && (
         <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f0f0f0', borderRadius: '8px' }}>

From de95e86ba8e715b5332d4f12c236a9a2482ff23b Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Wed, 26 Aug 2026 18:31:29 -0700
Subject: [PATCH 6/8] fix: support optional `systemInstruction` parameter in
 `generateText` and `streamText`; remove redundant
 `generateWithSystemInstruction` helper function; enable system instruction
 input when streaming is enabled in `TextGenerationView`; renamed component to
 `TextGenerationView` for consistency

---
 .../src/features/text-generation/index.tsx    | 27 +++++++-------
 .../src/features/text-generation/service.ts   | 35 ++++++-------------
 2 files changed, 23 insertions(+), 39 deletions(-)

diff --git a/ai/ai-samples/src/features/text-generation/index.tsx b/ai/ai-samples/src/features/text-generation/index.tsx
index 5d62ddb15..738792d1e 100644
--- a/ai/ai-samples/src/features/text-generation/index.tsx
+++ b/ai/ai-samples/src/features/text-generation/index.tsx
@@ -1,13 +1,9 @@
 import { useState } from 'react';
-import {
-  generateText,
-  streamText,
-  generateWithSystemInstruction
-} from './service';
+import { generateText, streamText } from './service';
 
-export default function TextGeneration() {
+export default function TextGenerationView() {
   const [prompt, setPrompt] = useState<string>('');
-  const cleanPrompt = prompt.trim();
+  const cleanPrompt = prompt.trim(); 
   const [systemInstruction, setSystemInstruction] = useState<string>('');
   const [useStreaming, setUseStreaming] = useState<boolean>(true);
   const [response, setResponse] = useState<string>('');
@@ -22,15 +18,16 @@ export default function TextGeneration() {
     setResponse('');
 
     try {
+      const cleanInstruction = systemInstruction.trim() || undefined;
+
       if (useStreaming) {
-        await streamText(cleanPrompt, (chunk) => {
-          setResponse((prev) => prev + chunk);
-        });
-      } else if (systemInstruction.trim()) {
-        const text = await generateWithSystemInstruction(systemInstruction, cleanPrompt);
-        setResponse(text);
+        await streamText(
+          cleanPrompt, 
+          (chunk) => setResponse((prev) => prev + chunk),
+          cleanInstruction
+        );
       } else {
-        const text = await generateText(cleanPrompt);
+        const text = await generateText(cleanPrompt, cleanInstruction);
         setResponse(text);
       }
     } catch (err: unknown) {
@@ -58,7 +55,7 @@ export default function TextGeneration() {
           value={systemInstruction}
           onChange={(e) => setSystemInstruction(e.target.value)}
           placeholder="e.g., You are a helpful assistant..."
-          disabled={loading || useStreaming}
+          disabled={loading}
           style={{ width: '100%', padding: '10px', boxSizing: 'border-box' }}
         />
       </div>
diff --git a/ai/ai-samples/src/features/text-generation/service.ts b/ai/ai-samples/src/features/text-generation/service.ts
index 50bd2f1eb..8620e0d08 100644
--- a/ai/ai-samples/src/features/text-generation/service.ts
+++ b/ai/ai-samples/src/features/text-generation/service.ts
@@ -1,15 +1,17 @@
 import { getAiModel } from '../../services/firebaseAIService';
 
 /**
- * Generates text from a text prompt.
+ * Generates text from a text prompt, optionally using a system instruction.
  * @param prompt The string instruction sent to the model.
+ * @param systemInstruction (Optional) The persona or constraints for the model.
  * @returns The text string response generated by the model.
  */
-export async function generateText(prompt: string): Promise<string> {
+export async function generateText(prompt: string, systemInstruction?: string): Promise<string> {
   try {
-    const model = getAiModel('gemini-3.5-flash');
+    const options = systemInstruction ? { systemInstruction } : undefined;
+    const model = getAiModel('gemini-3.5-flash', options);
+    
     const result = await model.generateContent(prompt);
-
     return result.response.text(); 
   } catch (error) {
     console.error('Error generating text with Firebase AI:', error);
@@ -21,10 +23,13 @@ export async function generateText(prompt: string): Promise<string> {
  * Streams text from a text prompt, yielding chunks as they arrive.
  * @param prompt The string instruction sent to the model.
  * @param onChunk Callback fired for each non-empty text chunk.
+ * @param systemInstruction (Optional) The persona or constraints for the model.
  */
-export async function streamText(prompt: string, onChunk: (chunk: string) => void): Promise<void> {
+export async function streamText(prompt: string, onChunk: (chunk: string) => void, systemInstruction?: string): Promise<void> {
   try {
-    const model = getAiModel('gemini-3.5-flash');
+    const options = systemInstruction ? { systemInstruction } : undefined;
+    const model = getAiModel('gemini-3.5-flash', options);
+    
     const result = await model.generateContentStream(prompt);
 
     for await (const chunk of result.stream) {
@@ -37,22 +42,4 @@ export async function streamText(prompt: string, onChunk: (chunk: string) => voi
     console.error('Error streaming text with Firebase AI:', error);
     throw error;
   }
-}
-
-/**
- * Generates text using a specific system instruction to guide the model's behavior.
- * @param systemInstruction The persona or constraints for the model.
- * @param prompt The string instruction sent to the model.
- * @returns The text string response generated by the model.
- */
-export async function generateWithSystemInstruction(systemInstruction: string, prompt: string): Promise<string> {
-  try {
-    const model = getAiModel('gemini-3.5-flash', { systemInstruction });
-    
-    const result = await model.generateContent(prompt);
-    return result.response.text();
-  } catch (error) {
-    console.error('Error generating text with system instruction:', error);
-    throw error;
-  }
 }
\ No newline at end of file

From 33b494f929ac103160800063682fc6c134791da0 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Wed, 26 Aug 2026 19:07:15 -0700
Subject: [PATCH 7/8] refactor: centralize isolated feature routing and clean
 up App shell; Remove redundant isolated feature switch and unused component
 imports from `App.tsx`; ensure `automatic-function-calling` is handled in
 `index.tsx`; keep `App.tsx` strictly focused on layout shell and navigation

---
 ai/ai-samples/src/App.tsx   | 28 ++++------------------------
 ai/ai-samples/src/index.tsx |  5 -----
 2 files changed, 4 insertions(+), 29 deletions(-)

diff --git a/ai/ai-samples/src/App.tsx b/ai/ai-samples/src/App.tsx
index c6902376f..a3b802829 100644
--- a/ai/ai-samples/src/App.tsx
+++ b/ai/ai-samples/src/App.tsx
@@ -1,11 +1,4 @@
 import { Link, Outlet, useLocation } from 'react-router-dom';
-import TextGenerationView from './features/text-generation';
-import ChatView from './features/chat';
-import MultimodalView from './features/multimodal';
-import StructuredOutputView from './features/structured-output';
-import FunctionCallingView from './features/function-calling';
-import ImageGenerationView from './features/image-generation';
-import AutomaticFunctionCallingView from './features/automatic-function-calling';
 
 const NAV_ITEMS = [
   { path: '/text-generation', label: 'Text Generation' },
@@ -15,26 +8,13 @@ const NAV_ITEMS = [
   { path: '/function-calling', label: 'Function Calling' },
   { path: '/automatic-function-calling', label: 'Automatic Function Calling' },
   { path: '/image-generation', label: 'Image Generation' },
-  
+
 ];
 
 export default function App() {
   const { pathname } = useLocation();
-  const isolatedFeature = import.meta.env.VITE_ISOLATED_FEATURE;
-  // If running an isolated script, bypass the shell entirely
-  if (isolatedFeature) {
-    switch (isolatedFeature) {
-      case 'text-generation': return <TextGenerationView />;
-      case 'chat': return <ChatView />;
-      case 'multimodal': return <MultimodalView />;
-      case 'structured-output': return <StructuredOutputView />;
-      case 'function-calling': return <FunctionCallingView />;
-      case 'automatic-function-calling': return <AutomaticFunctionCallingView />;
-      case 'image-generation': return <ImageGenerationView />;
-    }
-  }
 
-  // Otherwise, return the multi-feature app shell layout
+
   return (
     <div className="app-shell">
       <nav className="sidebar">
@@ -42,8 +22,8 @@ export default function App() {
         <ul className="nav-list">
           {NAV_ITEMS.map(({ path, label }) => (
             <li key={path}>
-              <Link 
-                to={path} 
+              <Link
+                to={path}
                 className={`nav-link ${pathname === path ? 'nav-link-active' : ''}`}
               >
                 {label}
diff --git a/ai/ai-samples/src/index.tsx b/ai/ai-samples/src/index.tsx
index 7ea3f4f45..55e79a805 100644
--- a/ai/ai-samples/src/index.tsx
+++ b/ai/ai-samples/src/index.tsx
@@ -16,7 +16,6 @@ const router = createBrowserRouter([
     path: '/',
     element: <App />,
     children: [
-      // Redirect the root path to text-generation automatically
       { index: true, element: <Navigate to="/text-generation" replace /> },
       { path: 'text-generation', element: <TextGeneration /> },
       { path: 'chat', element: <Chat /> },
@@ -32,7 +31,6 @@ const router = createBrowserRouter([
 
 const isolatedFeature = import.meta.env.VITE_ISOLATED_FEATURE;
 
-// Determine what to render based on the flag
 const renderContent = () => {
   if (isolatedFeature) {
     switch (isolatedFeature) {
@@ -49,16 +47,13 @@ const renderContent = () => {
       case 'image-generation':
         return <ImageGeneration />;
       default:
-        // Fallback if the flag is set to something unknown
         return <RouterProvider router={router} />;
     }
   }
 
-  // If no flag provided, run the normal full app router
   return <RouterProvider router={router} />;
 };
 
-// Mount to the DOM
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     {renderContent()}

From e0a48dccd9f3ecd9b794205cb31473f767b11f30 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Wed, 2 Sep 2026 09:53:10 -0700
Subject: [PATCH 8/8] feat: Adds the video-analysis quickstart feature sample.

---
 .../src/features/video-anaylsis/index.tsx     | 237 ++++++++++++++++++
 .../src/features/video-anaylsis/service.ts    |  87 +++++++
 2 files changed, 324 insertions(+)
 create mode 100644 ai/ai-samples/src/features/video-anaylsis/index.tsx
 create mode 100644 ai/ai-samples/src/features/video-anaylsis/service.ts

diff --git a/ai/ai-samples/src/features/video-anaylsis/index.tsx b/ai/ai-samples/src/features/video-anaylsis/index.tsx
new file mode 100644
index 000000000..360d04c67
--- /dev/null
+++ b/ai/ai-samples/src/features/video-anaylsis/index.tsx
@@ -0,0 +1,237 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { analyzeVideo, streamVideoAnalysis } from './service';
+
+const SAMPLE_PROMPTS = [
+  'Describe what is happening in this video in detail.'
+];
+
+export default function VideoAnalysisView() {
+  const [prompt, setPrompt] = useState<string>(SAMPLE_PROMPTS[0]);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [useStreaming, setUseStreaming] = useState<boolean>(true);
+  const [response, setResponse] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!selectedFile) {
+      setPreviewUrl(null);
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(selectedFile);
+    setPreviewUrl(objectUrl);
+
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [selectedFile]);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] || null;
+    setSelectedFile(file);
+    setError(null);
+  };
+
+  const handleAnalyze = async () => {
+    const cleanedPrompt = prompt.trim();
+    if (!selectedFile || !cleanedPrompt) return;
+
+    setLoading(true);
+    setError(null);
+    setResponse('');
+
+    try {
+      if (useStreaming) {
+        await streamVideoAnalysis(cleanedPrompt, selectedFile, (chunk) => {
+          setResponse((prev) => prev + chunk);
+        });
+      } else {
+        const resultText = await analyzeVideo(cleanedPrompt, selectedFile);
+        setResponse(resultText);
+      }
+    } catch (err: unknown) {
+      const message =
+        err instanceof Error
+          ? err.message
+          : 'An unexpected error occurred during video analysis.';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClear = () => {
+    setSelectedFile(null);
+    setResponse('');
+    setError(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '700px', margin: '0 auto', fontFamily: 'system-ui, sans-serif' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2>Video Analysis & Understanding</h2>
+        {(selectedFile || response) && (
+          <button
+            onClick={handleClear}
+            disabled={loading}
+            style={{
+              padding: '6px 12px',
+              backgroundColor: '#f1f3f4',
+              color: '#3c4043',
+              border: '1px solid #dadce0',
+              borderRadius: '4px',
+              cursor: loading ? 'not-allowed' : 'pointer',
+              fontSize: '0.85rem',
+            }}
+          >
+            Clear All
+          </button>
+        )}
+      </div>
+
+      <p style={{ color: '#5f6368', marginBottom: '20px' }}>
+        Upload a video file alongside a prompt to analyze video frames, extract timestamps, describe actions, or transcribe content using Gemini.
+      </p>
+
+      {/* Video Upload Section */}
+      <div style={{ marginBottom: '16px' }}>
+        <label style={{ display: 'block', marginBottom: '6px', fontWeight: 'bold' }}>
+          Select Video File:
+        </label>
+        <input
+          type="file"
+          ref={fileInputRef}
+          accept="video/*,video/mp4,video/webm,video/quicktime,video/x-matroska"
+          onChange={handleFileChange}
+          disabled={loading}
+          style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}
+        />
+        <small style={{ display: 'block', color: '#80868b', marginTop: '4px' }}>
+          Supported formats: MP4, WebM, MOV, etc. (Inline payloads recommended under 20MB).
+        </small>
+      </div>
+
+      {/* Video Preview */}
+      {previewUrl && (
+        <div style={{ marginBottom: '16px', borderRadius: '8px', overflow: 'hidden', border: '1px solid #dadce0', backgroundColor: '#000' }}>
+          <video
+            src={previewUrl}
+            controls
+            style={{ width: '100%', maxHeight: '320px', display: 'block' }}
+          />
+          {selectedFile && (
+            <div style={{ padding: '8px 12px', backgroundColor: '#f8f9fa', fontSize: '0.85rem', color: '#5f6368', borderTop: '1px solid #dadce0' }}>
+              <strong>Selected:</strong> {selectedFile.name} ({(selectedFile.size / (1024 * 1024)).toFixed(2)} MB)
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Prompt Suggestions */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ display: 'block', marginBottom: '6px', fontSize: '0.85rem', color: '#5f6368', fontWeight: 600 }}>
+          Suggested Prompts:
+        </label>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+          {SAMPLE_PROMPTS.map((sample, idx) => (
+            <button
+              key={idx}
+              type="button"
+              onClick={() => setPrompt(sample)}
+              disabled={loading}
+              style={{
+                padding: '4px 10px',
+                fontSize: '0.8rem',
+                backgroundColor: prompt === sample ? '#e8f0fe' : '#f8f9fa',
+                color: prompt === sample ? '#1a73e8' : '#3c4043',
+                border: `1px solid ${prompt === sample ? '#aecbfa' : '#dadce0'}`,
+                borderRadius: '16px',
+                cursor: loading ? 'not-allowed' : 'pointer',
+              }}
+            >
+              {sample.length > 40 ? `${sample.slice(0, 40)}...` : sample}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Prompt Input */}
+      <div style={{ marginBottom: '16px' }}>
+        <label style={{ display: 'block', marginBottom: '6px', fontWeight: 'bold' }}>
+          Prompt:
+        </label>
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="Ask a question about the video or describe what you'd like analyzed..."
+          rows={3}
+          disabled={loading}
+          style={{ width: '100%', padding: '10px', boxSizing: 'border-box', fontFamily: 'inherit', borderRadius: '4px', border: '1px solid #dadce0' }}
+        />
+      </div>
+
+      {/* Controls */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', fontSize: '0.95rem' }}>
+          <input
+            type="checkbox"
+            checked={useStreaming}
+            onChange={(e) => setUseStreaming(e.target.checked)}
+            disabled={loading}
+          />
+          Stream response
+        </label>
+
+        <button
+          onClick={handleAnalyze}
+          disabled={loading || !selectedFile || !prompt.trim()}
+          style={{
+            padding: '10px 24px',
+            backgroundColor: loading || !selectedFile || !prompt.trim() ? '#ccc' : '#1a73e8',
+            color: '#fff',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: loading || !selectedFile || !prompt.trim() ? 'not-allowed' : 'pointer',
+            fontSize: '1rem',
+            fontWeight: 500,
+          }}
+        >
+          {loading ? 'Analyzing Video...' : 'Analyze Video'}
+        </button>
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <div style={{ color: '#c5221f', backgroundColor: '#fce8e6', border: '1px solid #fad2cf', padding: '12px', marginTop: '16px', borderRadius: '4px' }}>
+          <strong>Error:</strong> {error}
+        </div>
+      )}
+
+      {/* Response Display */}
+      {response && (
+        <div style={{ marginTop: '20px', borderTop: '1px solid #eee', paddingTop: '16px' }}>
+          <h3 style={{ margin: '0 0 10px 0', color: '#202124' }}>Analysis Result:</h3>
+          <div style={{
+            padding: '16px',
+            backgroundColor: '#f8f9fa',
+            border: '1px solid #dadce0',
+            borderRadius: '8px',
+            whiteSpace: 'pre-wrap',
+            lineHeight: '1.6',
+            color: '#202124',
+          }}>
+            {response}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
diff --git a/ai/ai-samples/src/features/video-anaylsis/service.ts b/ai/ai-samples/src/features/video-anaylsis/service.ts
new file mode 100644
index 000000000..4987133f1
--- /dev/null
+++ b/ai/ai-samples/src/features/video-anaylsis/service.ts
@@ -0,0 +1,87 @@
+import { getAiModel } from '../../services/firebaseAIService';
+import { Part } from 'firebase/ai';
+
+/**
+ * Converts a standard browser File object (Video) into a Firebase AI SDK Part.
+ * Uses the native browser FileReader API to extract the Base64 string.
+ * @param file The DOM File object from an <input type="file">
+ * @returns A Promise that resolves to an InlineData Part object
+ */
+export async function fileToGenerativePart(file: File): Promise<Part> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onloadend = () => {
+      const result = reader.result;
+      if (typeof result === 'string') {
+        const splitResult = result.split(',');
+        if (splitResult.length > 1) {
+          resolve({
+            inlineData: {
+              data: splitResult[1],
+              mimeType: file.type || 'video/mp4',
+            },
+          });
+          return;
+        }
+      }
+      reject(new Error('Failed to parse video file data as Base64.'));
+    };
+
+    reader.onerror = () => reject(reader.error || new Error('Error reading video file.'));
+    reader.readAsDataURL(file);
+  });
+}
+
+// Note: The Gemini API restricts the total size of inline data payloads. 
+// To process larger files without hitting HTTP 413 errors (PayLoad Too Large),
+// See the official Firebase AI documentation for current file size limits and workarounds:
+// https://firebase.google.com/docs/ai-logic/solutions/cloud-storage
+
+/**
+ * Sends a video analysis request (prompt + video file) to the Gemini model.
+ * @param prompt The string instruction sent to the model (e.g. "Describe what happens in this video").
+ * @param videoFile The DOM File object containing the video.
+ * @returns The text string response generated by the model.
+ */
+export async function analyzeVideo(prompt: string, videoFile: File): Promise<string> {
+  try {
+    const videoPart = await fileToGenerativePart(videoFile);
+    const model = getAiModel('gemini-3.5-flash');
+    const result = await model.generateContent([prompt, videoPart]);
+    return result.response.text();
+  } catch (error: unknown) {
+    throw error instanceof Error
+      ? error
+      : new Error('An unknown error occurred during video analysis.');
+  }
+}
+
+/**
+ * Streams the video analysis response from the Gemini model in real-time chunks.
+ * @param prompt The string instruction sent to the model.
+ * @param videoFile The DOM File object containing the video.
+ * @param onChunk Callback fired whenever a new text chunk is received.
+ */
+export async function streamVideoAnalysis(
+  prompt: string,
+  videoFile: File,
+  onChunk: (chunk: string) => void
+): Promise<void> {
+  try {
+    const videoPart = await fileToGenerativePart(videoFile);
+    const model = getAiModel('gemini-3.7-flash');
+    const result = await model.generateContentStream([prompt, videoPart]);
+
+    for await (const chunk of result.stream) {
+      const chunkText = chunk.text();
+      if (chunkText) {
+        onChunk(chunkText);
+      }
+    }
+  } catch (error: unknown) {
+    throw error instanceof Error
+      ? error
+      : new Error('An unknown error occurred during video streaming.');
+  }
+}
\ No newline at end of file