Feat/ai samples cleanup

ai/ai-samples/README.md

@@ -1,12 +1,12 @@
 # Firebase AI Samples
 
-A modular migration of the Firebase AI logic, demonstrating different capabilities:
+This directory contains samples for the Firebase AI SDK for Web.
 
 ## Samples
 
-You can open this sample as a Node/React project and run it in your local browser. When doing so, you need to add this sample app to a Firebase project on the Firebase console. You can add multiple sample apps to the same Firebase project; no need to create separate projects for each app.
+You can open a sample as a Node/React project and run it in your local browser. When doing so, you need to add this sample app to a Firebase project on the Firebase console. You can add multiple sample apps to the same Firebase project; no need to create separate projects for each app.
 
-This repository demonstrates the following capabilities:
+This repository contains the following samples:
 * Text Generation
 * Chat
 * Multimodal
@@ -18,55 +18,69 @@ This repository demonstrates the following capabilities:
 
 To connect this sample app to your Firebase project, register a new Web App in your Firebase Console to generate your Firebase configuration object.
 
-1. Navigate to this directory and install dependencies:
-   ```bash
-   npm install
+### 1. Navigate to this directory and install dependencies:
+```bash
+npm install
+```
 
-2. Add your Firebase config
+### 2. Add your Firebase config:
 
-Go to console.firebase.google.com and follow the Firebase AI Logic guided setup to enable the API and choose your gemini API provider. 
-Copy the example config file and fill in your project values. Open src/config/firebase-config.ts and replace the placeholder values with your firebase project config (found in Project Settings -> your apps)
+Go to https://console.firebase.google.com and follow the Firebase AI Logic guided setup to enable the API and choose your gemini API provider. 
+Copy the example config file and fill in your project values. Open `src/config/firebase-config.ts` and replace the placeholder values with your firebase project config (found in **Project Settings** -> **your apps**)
 
 
-3. Running the samples
+### 3. Running the samples:
 
 For a full app experience to browse all features:
-    npm run dev
-
-To run indivual features in isolated mode, run the single feature directly without the app shell using one of these scripts:
+```bash
+npm run dev
+```
 
+To run individual features in isolated mode, run the single feature directly without the app shell using one of these scripts:
+```bash
 npm run dev:text #Text Generation
+```
+```bash
 npm run dev:chat #Chat
+```
+```bash
 npm run dev:multimodal #Multimodal
+```
+```bash
 npm run dev:structured #Structured Output
+```
+```bash
 npm run dev:function #Function Calling
+```
+```bash
 npm run dev:image #Image Generation
+```
 
 After running any of the above commands, open your browser to https://localhost:*** (provided in the console)
 
 ## Copy service.ts for platform agnostic use
 
-All AI logic is decoupled from the React UI. If you want to use these features in your own project, navigate to any src/features/*/service.ts file. These files are framework-agnostic and can be safely copy-pasted into any JavaScript or TypeScript web project.
+All AI logic is decoupled from the React UI. If you want to use these features in your own project, navigate to any `src/features/*/service.ts file`. These files are framework-agnostic and can be safely copy-pasted into any JavaScript or TypeScript web project.
 
 
 
 ## App Check 
 
-App check protects your API Key from unauthorized use. It is not required to run the samples locally but highly recommended before deployig to production. 
+App check protects your API Key from unauthorized use. It is not required to run the samples locally but highly recommended before deploying to production. 
 
-Debug token: 
-firebaseAIService.ts includes App Check intilization for local development. To enable it:
+### Debug token: 
+`firebaseAIService.ts` includes App Check initialization for local development. To enable it:
 
-1. Set VITE_APPCHECK_DEBUG_TOKEN=true in your .env.local file
-2. On the first run, a deug token will be printed in the browser console.
+1. Set `VITE_APPCHECK_DEBUG_TOKEN=true` in your **.env.local** file
+2. On the first run, a debug token will be printed in the browser console.
 3. Copy that token and register it in the Firebase Console under
-App Check -> Apps -> your apps -> Debug Token
+**App Check -> Apps -> your apps -> Debug Token**
 
-Production setup:
+### Production setup:
 For production, use reCAPTCHA v3 as the App Check provider:
 
-1. Go to the Firebase Console -> App Check -> Register your app
+1. Go to the **Firebase Console -> App Check -> Register your app**
 2. Choose reCaptcha v3 and follow the setup steps
-3. Add your reCaptcha site key to firebase-config.ts 
+3. Add your reCaptcha site key to **firebase-config.ts**
 
-See the [App Check Docs](https://firebase.google.com/docs/app-check/web/recaptcha-provider) for full instruction.
+See the [App Check Documentation](https://firebase.google.com/docs/app-check/web/recaptcha-provider) for full instructions.

ai/ai-samples/package.json

@@ -25,7 +25,6 @@
   "devDependencies": {
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "~5.7.2",
     "vite": "^6.3.1"

ai/ai-samples/src/App.tsx

@@ -1,10 +1,5 @@
 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';
+
 
 const NAV_ITEMS = [
   { path: '/text-generation', label: 'Text Generation' },
@@ -17,20 +12,7 @@ const NAV_ITEMS = [
 
 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 'image-generation': return <ImageGenerationView />;
-    }
-  }
 
-  // Otherwise, return the multi-feature app shell layout
   return (
     <div className="app-shell">
       <nav className="sidebar">

ai/ai-samples/src/features/chat/index.tsx

@@ -124,7 +124,7 @@ export default function ChatView() {
           value={input}
           onChange={(e) => setInput(e.target.value)}
           placeholder="Type your message..."
-          disabled={loading}
+          disabled={loading || !chatSessionRef.current}
           style={{
             flex: 1,
             padding: '12px',
@@ -135,7 +135,7 @@ export default function ChatView() {
         />
         <button
           type="submit"
-          disabled={loading || !input.trim()}
+          disabled={loading || !input.trim() || !chatSessionRef.current}
           style={{
             padding: '0 24px',
             backgroundColor: loading || !input.trim() ? '#ccc' : '#1a73e8',

ai/ai-samples/src/services/firebaseAIService.ts

@@ -1,7 +1,8 @@
 import { initializeApp} from 'firebase/app';
 import { getAI, getGenerativeModel } from 'firebase/ai';
-// Import App Check if you haven't already
 import { initializeAppCheck, ReCaptchaEnterpriseProvider } from 'firebase/app-check';
+//This file is Vite specific.
+//If using a different environment, adjust as needed.
 
 const firebaseConfig = import.meta.env.VITE_FIREBASE_CONFIG 
   ? JSON.parse(import.meta.env.VITE_FIREBASE_CONFIG) 
@@ -16,10 +17,11 @@ const firebaseConfig = import.meta.env.VITE_FIREBASE_CONFIG
 
 const app = initializeApp(firebaseConfig);
 
-// initialize app check with debug token 
-if (typeof window !== 'undefined') {
+// This shield prevents fatal ReferenceErrors if this file is executed 
+// in a Server-Side Rendering (SSR) environment like Node.js or Next.js.
+if (typeof window !== 'undefined'){
+  // initialize app check with debug token 
   (window as any).FIREBASE_APPCHECK_DEBUG_TOKEN = true;
-
   initializeAppCheck(app, {
   // The string here doesn't matter in this specific case, as setting 
   // FIREBASE_APPCHECK_DEBUG_TOKEN above means it will be ignored. 
@@ -33,4 +35,4 @@ const ai = getAI(app);
 
 export const getAiModel = (modelName: string = 'gemini-3.5-flash', additionalConfig: Record<string, any> = {}) => {
   return getGenerativeModel(ai, { model: modelName, ...additionalConfig });
-};
+}