Gemini code review fixes

Author: DellaBitta

ai/ai-react-app/src/components/Layout/RightSidebar.tsx

@@ -9,13 +9,22 @@ import {
 } from "../../services/firebaseAIService";
 import {
   ModelParams,
+  GenerationConfig,
   HarmCategory,
   HarmBlockThreshold,
   FunctionCallingMode,
   UsageMetadata,
   ResponseModality,
 } from "firebase/ai";
 
+export interface ExtendedGenerationConfig extends GenerationConfig {
+  responseModalities?: ResponseModality[];
+}
+
+export interface ExtendedModelParams extends ModelParams {
+  generationConfig?: ExtendedGenerationConfig;
+}
+
 interface RightSidebarProps {
   usageMetadata: UsageMetadata | null;
   activeMode: AppMode;
@@ -49,6 +58,20 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
     setNanoBananaParams((prevState) => updateFn(prevState));
   };
 
+  const handleModalityChange = (modality: ResponseModality, checked: boolean) => {
+    handleNanoBananaModelParamsUpdate((prev) => {
+      const currentModalities = (prev.generationConfig as ExtendedGenerationConfig)?.responseModalities || [ResponseModality.TEXT];
+      let newModalities = [...currentModalities];
+      if (checked) {
+        if (!newModalities.includes(modality)) newModalities.push(modality);
+      } else {
+        newModalities = newModalities.filter((m) => m !== modality);
+      }
+      if (newModalities.length === 0) return prev;
+      return { ...prev, generationConfig: { ...prev.generationConfig, responseModalities: newModalities } };
+    });
+  };
+
   const getThresholdForCategory = (
     category: HarmCategory,
   ): HarmBlockThreshold => {
@@ -419,40 +442,16 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
               <label style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
                 <input
                   type="checkbox"
-                  checked={((nanoBananaParams.generationConfig as any)?.responseModalities || [ResponseModality.TEXT]).includes(ResponseModality.TEXT)}
-                  onChange={(e) => {
-                    handleNanoBananaModelParamsUpdate((prev) => {
-                      const currentModalities = (prev.generationConfig as any)?.responseModalities || [ResponseModality.TEXT];
-                      let newModalities = [...currentModalities];
-                      if (e.target.checked) {
-                        if (!newModalities.includes(ResponseModality.TEXT)) newModalities.push(ResponseModality.TEXT);
-                      } else {
-                        newModalities = newModalities.filter((m) => m !== ResponseModality.TEXT);
-                      }
-                      if (newModalities.length === 0) return prev;
-                      return { ...prev, generationConfig: { ...prev.generationConfig, responseModalities: newModalities } };
-                    });
-                  }}
+                  checked={((nanoBananaParams.generationConfig as ExtendedGenerationConfig)?.responseModalities || [ResponseModality.TEXT]).includes(ResponseModality.TEXT)}
+                  onChange={(e) => handleModalityChange(ResponseModality.TEXT, e.target.checked)}
                 />
                 Text
               </label>
               <label style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
                 <input
                   type="checkbox"
-                  checked={((nanoBananaParams.generationConfig as any)?.responseModalities || []).includes(ResponseModality.IMAGE)}
-                  onChange={(e) => {
-                    handleNanoBananaModelParamsUpdate((prev) => {
-                      const currentModalities = (prev.generationConfig as any)?.responseModalities || [ResponseModality.TEXT];
-                      let newModalities = [...currentModalities];
-                      if (e.target.checked) {
-                        if (!newModalities.includes(ResponseModality.IMAGE)) newModalities.push(ResponseModality.IMAGE);
-                      } else {
-                        newModalities = newModalities.filter((m) => m !== ResponseModality.IMAGE);
-                      }
-                      if (newModalities.length === 0) return prev;
-                      return { ...prev, generationConfig: { ...prev.generationConfig, responseModalities: newModalities } };
-                    });
-                  }}
+                  checked={((nanoBananaParams.generationConfig as ExtendedGenerationConfig)?.responseModalities || []).includes(ResponseModality.IMAGE)}
+                  onChange={(e) => handleModalityChange(ResponseModality.IMAGE, e.target.checked)}
                 />
                 Image
               </label>

ai/ai-react-app/src/views/NanoBananaView.module.css

@@ -1,4 +1,4 @@
-.imagenViewContainer {
+.nanoBananaViewContainer {
   display: flex;
   flex-direction: column;
   height: 100%;

ai/ai-react-app/src/views/NanoBananaView.tsx

@@ -107,6 +107,7 @@ const NanoBananaView: React.FC<NanoBananaViewProps> = ({
       const response = result.response;
       const parts: GeneratedContentPart[] = [];
 
+      // Intentionally only support handling the primary candidate.
       if (response.candidates?.[0].content?.parts) {
         for (const part of response.candidates?.[0].content?.parts) {
           if (part.text) {
@@ -122,6 +123,16 @@ const NanoBananaView: React.FC<NanoBananaViewProps> = ({
           }
         }
       }
+
+      const candidate = response.candidates?.[0];
+      if (candidate && candidate.finishReason && candidate.finishReason !== "STOP") {
+        setFilteredReason(`Generation stopped due to: ${candidate.finishReason}`);
+      }
+
+      if (response.promptFeedback?.blockReason) {
+        setFilteredReason(`Prompt blocked due to: ${response.promptFeedback.blockReason}`);
+      }
+
       setGeneratedContent(parts);
     } catch (err: unknown) {
       console.error("[NanoBananaView] Error during generation:", err);
@@ -153,7 +164,7 @@ const NanoBananaView: React.FC<NanoBananaViewProps> = ({
   };
 
   return (
-    <div className={styles.imagenViewContainer}>
+    <div className={styles.nanoBananaViewContainer}>
       {error && <div className={styles.errorMessage}>{error}</div>}
       <div className={styles.displayArea}>
         <ContentDisplay