From c170e6e51bbeebe8d3e6f2ed3c76b85380c82368 Mon Sep 17 00:00:00 2001
From: Max Korp <maxkorp@8bytealchemy.com>
Date: Mon, 25 Aug 2025 16:52:58 -0700
Subject: [PATCH 1/7] correct default port for langgraph typescript

---
 typescript-sdk/apps/dojo/src/env.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/typescript-sdk/apps/dojo/src/env.ts b/typescript-sdk/apps/dojo/src/env.ts
index 2e9a6a66a..a9748c8e3 100644
--- a/typescript-sdk/apps/dojo/src/env.ts
+++ b/typescript-sdk/apps/dojo/src/env.ts
@@ -27,7 +27,7 @@ export default function getEnvVars(): envVars {
     mastraUrl: process.env.MASTRA_URL || 'http://localhost:4111',
     langgraphPythonUrl: process.env.LANGGRAPH_PYTHON_URL || 'http://localhost:2024',
     langgraphFastApiUrl: process.env.LANGGRAPH_FAST_API_URL || 'http://localhost:8000',
-    langgraphTypescriptUrl: process.env.LANGGRAPH_TYPESCRIPT_URL || 'http://localhost:8000',
+    langgraphTypescriptUrl: process.env.LANGGRAPH_TYPESCRIPT_URL || 'http://localhost:2024',
     agnoUrl: process.env.AGNO_URL || 'http://localhost:9001',
     llamaIndexUrl: process.env.LLAMA_INDEX_URL || 'http://localhost:9000',
     crewAiUrl: process.env.CREW_AI_URL || 'http://localhost:9002',

From df518dc279b65a070c175d9a1fd98a3bd6a524d5 Mon Sep 17 00:00:00 2001
From: Max Korp <maxkorp@8bytealchemy.com>
Date: Mon, 25 Aug 2025 16:53:16 -0700
Subject: [PATCH 2/7] Update toolbased gen ui example on frontend

---
 .../feature/tool_based_generative_ui/page.tsx | 528 +++++++++---------
 typescript-sdk/apps/dojo/src/files.json       |  24 +-
 2 files changed, 274 insertions(+), 278 deletions(-)

diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/page.tsx
index cd7e19a77..cb461aee4 100644
--- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/page.tsx
+++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/page.tsx
@@ -14,31 +14,23 @@ interface ToolBasedGenerativeUIProps {
   }>;
 }
 
-interface GenerateHaiku{
-  japanese : string[] | [],
-  english : string[] | [],
-  image_names : string[] | [],
-  selectedImage : string | null,
+interface GenerateHaiku {
+  japanese: string[] | [],
+  english: string[] | [],
+  image_names: string[] | [],
+  selectedImage: string | null,
 }
 
-interface HaikuCardProps{
-  generatedHaiku : GenerateHaiku | Partial<GenerateHaiku>
-  setHaikus : Dispatch<SetStateAction<GenerateHaiku[]>>
-  haikus : GenerateHaiku[]
+interface HaikuCardProps {
+  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>
+  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>
+  haikus: GenerateHaiku[]
 }
 
 export default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {
   const { integrationId } = React.use(params);
   const { isMobile } = useMobileView();
-  const defaultChatHeight = 50
-  const {
-    isChatOpen,
-    setChatHeight,
-    setIsChatOpen,
-    isDragging,
-    chatHeight,
-    handleDragStart
-  } = useMobileChat(defaultChatHeight)
+
 
   const chatTitle = 'Haiku Generator'
   const chatDescription = 'Ask me to create haikus'
@@ -52,12 +44,6 @@ export default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIP
     >
       <div
         className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}
-        style={
-          {
-            // "--copilot-kit-primary-color": "#222",
-            // "--copilot-kit-separator-color": "#CCC",
-          } as CopilotKitCSSProperties
-        }
       >
         <Haiku />
 
@@ -74,92 +60,105 @@ export default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIP
         )}
 
         {/* Mobile Pull-Up Chat */}
-        {isMobile && (
-          <>
-            {/* Chat Toggle Button */}
-            <div className="fixed bottom-0 left-0 right-0 z-50">
-              <div className="bg-gradient-to-t from-white via-white to-transparent h-6"></div>
-              <div
-                className="bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg"
-                onClick={() => {
-                  if (!isChatOpen) {
-                    setChatHeight(defaultChatHeight); // Reset to good default when opening
-                  }
-                  setIsChatOpen(!isChatOpen);
-                }}
-              >
-                <div className="flex items-center gap-3">
-                  <div>
-                    <div className="font-medium text-gray-900">{chatTitle}</div>
-                    <div className="text-sm text-gray-500">{chatDescription}</div>
-                  </div>
-                </div>
-                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>
-                  <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
-                  </svg>
-                </div>
-              </div>
+        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}
+      </div>
+    </CopilotKit>
+  );
+}
+
+function MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {
+  const defaultChatHeight = 50
+
+  const {
+    isChatOpen,
+    setChatHeight,
+    setIsChatOpen,
+    isDragging,
+    chatHeight,
+    handleDragStart
+  } = useMobileChat(defaultChatHeight)
+  return (
+    <>
+      {/* Chat Toggle Button */}
+      <div className="fixed bottom-0 left-0 right-0 z-50">
+        <div className="bg-gradient-to-t from-white via-white to-transparent h-6"></div>
+        <div
+          className="bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg"
+          onClick={() => {
+            if (!isChatOpen) {
+              setChatHeight(defaultChatHeight); // Reset to good default when opening
+            }
+            setIsChatOpen(!isChatOpen);
+          }}
+        >
+          <div className="flex items-center gap-3">
+            <div>
+              <div className="font-medium text-gray-900">{chatTitle}</div>
+              <div className="text-sm text-gray-500">{chatDescription}</div>
             </div>
+          </div>
+          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>
+            <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
+            </svg>
+          </div>
+        </div>
+      </div>
 
-            {/* Pull-Up Chat Container */}
-            <div
-              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${
-                isChatOpen ? 'translate-y-0' : 'translate-y-full'
-              } ${isDragging ? 'transition-none' : ''}`}
-              style={{ 
-                height: `${chatHeight}vh`,
-                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding
-              }}
-            >
-              {/* Drag Handle Bar */}
-              <div 
-                className="flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing"
-                onMouseDown={handleDragStart}
-              >
-                <div className="w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors"></div>
-              </div>
-              
-              {/* Chat Header */}
-              <div className="px-4 py-3 border-b border-gray-100 flex-shrink-0">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <h3 className="font-semibold text-gray-900">{chatTitle}</h3>
-                  </div>
-                  <button
-                    onClick={() => setIsChatOpen(false)}
-                    className="p-2 hover:bg-gray-100 rounded-full transition-colors"
-                  >
-                    <svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                  </button>
-                </div>
-              </div>
+      {/* Pull-Up Chat Container */}
+      <div
+        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'
+          } ${isDragging ? 'transition-none' : ''}`}
+        style={{
+          height: `${chatHeight}vh`,
+          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding
+        }}
+      >
+        {/* Drag Handle Bar */}
+        <div
+          className="flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing"
+          onMouseDown={handleDragStart}
+        >
+          <div className="w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors"></div>
+        </div>
 
-              {/* Chat Content - Flexible container for messages and input */}
-              <div className="flex-1 flex flex-col min-h-0 overflow-hidden pb-16">
-                <CopilotChat
-                  className="h-full flex flex-col"
-                  labels={{
-                    initial: initialLabel,
-                  }}
-                />
-              </div>
+        {/* Chat Header */}
+        <div className="px-4 py-3 border-b border-gray-100 flex-shrink-0">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <h3 className="font-semibold text-gray-900">{chatTitle}</h3>
             </div>
+            <button
+              onClick={() => setIsChatOpen(false)}
+              className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+            >
+              <svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
 
-            {/* Backdrop */}
-            {isChatOpen && (
-              <div
-                className="fixed inset-0 z-30"
-                onClick={() => setIsChatOpen(false)}
-              />
-            )}
-          </>
-        )}
+        {/* Chat Content - Flexible container for messages and input */}
+        <div className="flex-1 flex flex-col min-h-0 overflow-hidden pb-16">
+          <CopilotChat
+            className="h-full flex flex-col"
+            labels={{
+              initial: initialLabel,
+            }}
+          />
+        </div>
       </div>
-    </CopilotKit>
-  );
+
+      {/* Backdrop */}
+      {isChatOpen && (
+        <div
+          className="fixed inset-0 z-30"
+          onClick={() => setIsChatOpen(false)}
+        />
+      )}
+    </>
+  )
 }
 
 const VALID_IMAGE_NAMES = [
@@ -175,14 +174,45 @@ const VALID_IMAGE_NAMES = [
   "Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg"
 ];
 
-function HaikuCard({generatedHaiku, setHaikus, haikus} : HaikuCardProps) {
+function getRandomImage(): string {
+  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];
+}
+
+const validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {
+  if (!rawNames || rawNames.length !== 3) {
+    return null;
+  }
+
+  const correctedNames: string[] = [];
+  const usedValidNames = new Set<string>();
+
+  for (const name of rawNames) {
+    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {
+      correctedNames.push(name);
+      usedValidNames.add(name);
+      if (correctedNames.length === 3) break;
+    }
+  }
+
+  while (correctedNames.length < 3) {
+    const nextImage = getRandomImage();
+    if (!usedValidNames.has(nextImage)) {
+      correctedNames.push(nextImage);
+      usedValidNames.add(nextImage);
+    }
+  }
+
+  return correctedNames.slice(0, 3);
+};
+
+function HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {
   return (
-    <div 
-     data-testid="haiku-card"
-     className="suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100">
+    <div
+      data-testid="haiku-card"
+      className="suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100">
       <div className="mb-4 pb-4">
         {generatedHaiku?.japanese?.map((line, index) => (
-          <div className="flex items-center gap-3 mb-2"  data-testid="haiku-line" key={index}>
+          <div className="flex items-center gap-3 mb-2" data-testid="haiku-line" key={index}>
             <p className="text-lg font-bold">{line}</p>
             <p className="text-sm font-light">
               {generatedHaiku.english?.[index]}
@@ -250,48 +280,8 @@ function Haiku() {
   const [activeIndex, setActiveIndex] = useState(0);
   const [isJustApplied, setIsJustApplied] = useState(false);
 
-  const validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {
-    if (!rawNames || rawNames.length !== 3) {
-      return null;
-    }
-
-    const correctedNames: string[] = [];
-    const usedValidNames = new Set<string>();
-
-    for (const name of rawNames) {
-      if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {
-        correctedNames.push(name);
-        usedValidNames.add(name);
-        if (correctedNames.length === 3) break;
-      }
-    }
-
-    if (correctedNames.length < 3) {
-      const availableFallbacks = VALID_IMAGE_NAMES.filter(name => !usedValidNames.has(name));
-      for (let i = availableFallbacks.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [availableFallbacks[i], availableFallbacks[j]] = [availableFallbacks[j], availableFallbacks[i]];
-      }
-
-      while (correctedNames.length < 3 && availableFallbacks.length > 0) {
-        const fallbackName = availableFallbacks.pop();
-        if (fallbackName) {
-          correctedNames.push(fallbackName);
-        }
-      }
-    }
-
-    while (correctedNames.length < 3 && VALID_IMAGE_NAMES.length > 0) {
-      const fallbackName = VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];
-      correctedNames.push(fallbackName);
-    }
-
-    return correctedNames.slice(0, 3);
-  };
-
   useCopilotAction({
     name: "generate_haiku",
-    available: "frontend",
     parameters: [
       {
         name: "japanese",
@@ -304,7 +294,7 @@ function Haiku() {
       {
         name: "image_names",
         type: "string[]",
-        description: "Names of 3 relevant images",
+        description: `Names of 3 relevant images selected from the following: \n  -${VALID_IMAGE_NAMES.join('\n  -')}`,
       },
     ],
     followUp: false,
@@ -316,7 +306,7 @@ function Haiku() {
         image_names: finalCorrectedImages || [],
         selectedImage: finalCorrectedImages?.[0] || null,
       };
-      setHaikus(prev => [...prev, newHaiku]);
+      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== "A placeholder verse—"));
       setActiveIndex(haikus.length - 1);
       setIsJustApplied(true);
       setTimeout(() => setIsJustApplied(false), 600);
@@ -329,135 +319,141 @@ function Haiku() {
     },
   }, [haikus]);
 
-  const generatedHaikus = useMemo(() => (
-    haikus.filter((haiku) => haiku.english[0] !== "A placeholder verse—")
-  ), [haikus]);
-
   const { isMobile } = useMobileView();
 
   return (
     <div className="flex h-full w-full">
-      {/* Thumbnail List */}
-      {Boolean(generatedHaikus.length) && !isMobile && (
-        <div className="w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden">
-          {generatedHaikus.map((haiku, index) => (
-            <div
-              key={index}
-              data-testid="thumbnail-haiku"
-              className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}
-              style={{
-                width: '80px',
-                transform: 'scale(0.2)',
-                transformOrigin: 'top left',
-                marginBottom: '-340px',
-                opacity: index === activeIndex ? 1 : 0.5,
-                transition: 'opacity 0.2s',
-              }}
-              onClick={() => setActiveIndex(index)}
-            >
-              {haiku.japanese.map((line, lineIndex) => (
-                <div
-                  className="flex items-start gap-2 mb-2 haiku-line"
-                  key={lineIndex}
-                >
-                  <p className="text-2xl font-bold text-gray-600 w-auto">{line}</p>
-                  <p className="text-xs font-light text-gray-500 w-auto">{haiku.english?.[lineIndex]}</p>
-                </div>
-              ))}
-              {haiku.image_names && haiku.image_names.length === 3 && (
-                <div className="mt-2 flex gap-2 justify-center">
-                  {haiku.image_names.map((imageName, imgIndex) => (
-                    <img
-                      style={{
-                        width: '110px',
-                        height: '110px',
-                        objectFit: 'cover',
-                      }}
-                      key={imageName}
-                      src={`/images/${imageName}`}
-                      alt={imageName || ""}
-                      className="haiku-card-image w-12 h-12 object-cover"
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
+      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />
 
       {/* Main Display */}
-      <div className={`flex-1 flex items-center justify-center h-full ${
-        isMobile 
-          ? 'px-6' 
-          : 'p-8'
-      }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>
+      <div className={`flex-1 flex items-center justify-center h-full ${isMobile
+        ? 'px-6'
+        : 'p-8'
+        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>
         <div className="haiku-stack w-full max-w-lg">
-          {haikus.filter((_haiku: Haiku, index: number) => {
-            if (haikus.length == 1) return true;
-            else return index == activeIndex + 1;
-          }).map((haiku, index) => (
-            <div
-              key={index}
-              data-testid="main-haiku-display"
-              className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}
-              style={{
-                zIndex: index === activeIndex ? haikus.length : index,
-                transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,
-              }}
-            >
-              {haiku.japanese.map((line, lineIndex) => (
-                <div
-                  data-testid="main-haiku-line"
-                  className={`flex items-start mb-4 haiku-line ${
-                    isMobile 
-                      ? 'flex-col gap-1' 
+          {haikus.map((haiku, index) => (
+            (haikus.length == 1 || index == activeIndex) && (
+
+              <div
+                key={index}
+                data-testid="main-haiku-display"
+                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}
+                style={{
+                  zIndex: index === activeIndex ? haikus.length : index,
+                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,
+                }}
+              >
+                {haiku.japanese.map((line, lineIndex) => (
+                  <div
+                    data-testid="main-haiku-line"
+                    className={`flex items-start mb-4 haiku-line ${isMobile
+                      ? 'flex-col gap-1'
                       : 'gap-4'
-                  }`}
-                  key={lineIndex}
-                  style={{ animationDelay: `${lineIndex * 0.1}s` }}
-                >
-                  <p className={`font-bold text-gray-600 w-auto ${
-                    isMobile 
-                      ? 'text-2xl leading-tight' 
+                      }`}
+                    key={lineIndex}
+                    style={{ animationDelay: `${lineIndex * 0.1}s` }}
+                  >
+                    <p className={`font-bold text-gray-600 w-auto ${isMobile
+                      ? 'text-2xl leading-tight'
                       : 'text-4xl'
-                  }`}>
-                    {line}
-                  </p>
-                  <p className={`font-light text-gray-500 w-auto ${
-                    isMobile 
-                      ? 'text-sm ml-2' 
+                      }`}>
+                      {line}
+                    </p>
+                    <p className={`font-light text-gray-500 w-auto ${isMobile
+                      ? 'text-sm ml-2'
                       : 'text-base'
-                  }`}>
-                    {haiku.english?.[lineIndex]}
-                  </p>
-                </div>
-              ))}
-              {haiku.image_names && haiku.image_names.length === 3 && (
-                <div className={`flex justify-center ${
-                  isMobile 
-                    ? 'mt-4 gap-2 flex-wrap' 
+                      }`}>
+                      {haiku.english?.[lineIndex]}
+                    </p>
+                  </div>
+                ))}
+                {haiku.image_names && haiku.image_names.length === 3 && (
+                  <div className={`flex justify-center ${isMobile
+                    ? 'mt-4 gap-2 flex-wrap'
                     : 'mt-6 gap-4'
-                }`}>
-                  {haiku.image_names.map((imageName, imgIndex) => (
-                    <img
-                      key={imageName}
-                      src={`/images/${imageName}`}
-                      alt={imageName || ""}
-                      style={{
-                        width: isMobile ? '90px' : '130px',
-                        height: isMobile ? '90px' : '130px',
-                        objectFit: 'cover',
-                      }}
-                      className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus` : `haiku-card-image`}
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
+                    }`}>
+                    {haiku.image_names.map((imageName, imgIndex) => (
+                      <img
+                        key={imageName}
+                        src={`/images/${imageName}`}
+                        alt={imageName || ""}
+                        style={{
+                          width: isMobile ? '90px' : '130px',
+                          height: isMobile ? '90px' : '130px',
+                          objectFit: 'cover',
+                          marginTop: 0,
+                        }}
+                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}
+                        onClick={() => setHaikus((prevHaikus) => {
+                          return prevHaikus.map((h, idx) => {
+                            if (idx === index) {
+                              return { ...h, selectedImage: imageName }
+                            } else {
+                              return { ...h }
+                            }
+                          })
+                        })}
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+            )
           ))}
         </div>
       </div>
     </div>
   );
 }
+
+function Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {
+  if (haikus.length == 0 || isMobile) { return null }
+  return (
+    <div className="w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden">
+      {haikus.map((haiku, index) => (
+        <div
+          key={index}
+          data-testid="thumbnail-haiku"
+          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}
+          style={{
+            width: '80px',
+            transform: 'scale(0.2)',
+            transformOrigin: 'top left',
+            marginBottom: '-340px',
+            opacity: index === activeIndex ? 1 : 0.5,
+            transition: 'opacity 0.2s',
+          }}
+          onClick={() => setActiveIndex(index)}
+        >
+          {haiku.japanese.map((line, lineIndex) => (
+            <div
+              className="flex items-start gap-2 mb-2 haiku-line"
+              key={lineIndex}
+            >
+              <p className="text-2xl font-bold text-gray-600 w-auto">{line}</p>
+              <p className="text-xs font-light text-gray-500 w-auto">{haiku.english?.[lineIndex]}</p>
+            </div>
+          ))}
+          {haiku.image_names && haiku.image_names.length === 3 && (
+            <div className="mt-2 flex gap-2 justify-center">
+              {haiku.image_names.map((imageName, imgIndex) => (
+                <img
+                  style={{
+                    width: '110px',
+                    height: '110px',
+                    objectFit: 'cover',
+                  }}
+                  key={imageName}
+                  src={`/images/${imageName}`}
+                  alt={imageName || ""}
+                  className="haiku-card-image w-12 h-12 object-cover"
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+
+}
\ No newline at end of file
diff --git a/typescript-sdk/apps/dojo/src/files.json b/typescript-sdk/apps/dojo/src/files.json
index 4949e57b6..69dcc6fd6 100644
--- a/typescript-sdk/apps/dojo/src/files.json
+++ b/typescript-sdk/apps/dojo/src/files.json
@@ -158,7 +158,7 @@
   "pydantic-ai::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku{\n  japanese : string[] | [],\n  english : string[] | [],\n  image_names : string[] | [],\n  selectedImage : string | null,\n}\n\ninterface HaikuCardProps{\n  generatedHaiku : GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus : Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus : GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{ \n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div \n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n              \n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction HaikuCard({generatedHaiku, setHaikus, haikus} : HaikuCardProps) {\n  return (\n    <div \n     data-testid=\"haiku-card\"\n     className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\"  data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  const validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n    if (!rawNames || rawNames.length !== 3) {\n      return null;\n    }\n\n    const correctedNames: string[] = [];\n    const usedValidNames = new Set<string>();\n\n    for (const name of rawNames) {\n      if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n        correctedNames.push(name);\n        usedValidNames.add(name);\n        if (correctedNames.length === 3) break;\n      }\n    }\n\n    if (correctedNames.length < 3) {\n      const availableFallbacks = VALID_IMAGE_NAMES.filter(name => !usedValidNames.has(name));\n      for (let i = availableFallbacks.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n        [availableFallbacks[i], availableFallbacks[j]] = [availableFallbacks[j], availableFallbacks[i]];\n      }\n\n      while (correctedNames.length < 3 && availableFallbacks.length > 0) {\n        const fallbackName = availableFallbacks.pop();\n        if (fallbackName) {\n          correctedNames.push(fallbackName);\n        }\n      }\n    }\n\n    while (correctedNames.length < 3 && VALID_IMAGE_NAMES.length > 0) {\n      const fallbackName = VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n      correctedNames.push(fallbackName);\n    }\n\n    return correctedNames.slice(0, 3);\n  };\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    available: \"frontend\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: \"Names of 3 relevant images\",\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku]);\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const generatedHaikus = useMemo(() => (\n    haikus.filter((haiku) => haiku.english[0] !== \"A placeholder verse—\")\n  ), [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      {/* Thumbnail List */}\n      {Boolean(generatedHaikus.length) && !isMobile && (\n        <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n          {generatedHaikus.map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"thumbnail-haiku\"\n              className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                width: '80px',\n                transform: 'scale(0.2)',\n                transformOrigin: 'top left',\n                marginBottom: '-340px',\n                opacity: index === activeIndex ? 1 : 0.5,\n                transition: 'opacity 0.2s',\n              }}\n              onClick={() => setActiveIndex(index)}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  className=\"flex items-start gap-2 mb-2 haiku-line\"\n                  key={lineIndex}\n                >\n                  <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n                  <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className=\"mt-2 flex gap-2 justify-center\">\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      style={{\n                        width: '110px',\n                        height: '110px',\n                        objectFit: 'cover',\n                      }}\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      className=\"haiku-card-image w-12 h-12 object-cover\"\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${\n        isMobile \n          ? 'px-6' \n          : 'p-8'\n      }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.filter((_haiku: Haiku, index: number) => {\n            if (haikus.length == 1) return true;\n            else return index == activeIndex + 1;\n          }).map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"main-haiku-display\"\n              className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                zIndex: index === activeIndex ? haikus.length : index,\n                transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n              }}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  data-testid=\"main-haiku-line\"\n                  className={`flex items-start mb-4 haiku-line ${\n                    isMobile \n                      ? 'flex-col gap-1' \n                      : 'gap-4'\n                  }`}\n                  key={lineIndex}\n                  style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                >\n                  <p className={`font-bold text-gray-600 w-auto ${\n                    isMobile \n                      ? 'text-2xl leading-tight' \n                      : 'text-4xl'\n                  }`}>\n                    {line}\n                  </p>\n                  <p className={`font-light text-gray-500 w-auto ${\n                    isMobile \n                      ? 'text-sm ml-2' \n                      : 'text-base'\n                  }`}>\n                    {haiku.english?.[lineIndex]}\n                  </p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className={`flex justify-center ${\n                  isMobile \n                    ? 'mt-4 gap-2 flex-wrap' \n                    : 'mt-6 gap-4'\n                }`}>\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      style={{\n                        width: isMobile ? '90px' : '130px',\n                        height: isMobile ? '90px' : '130px',\n                        objectFit: 'cover',\n                      }}\n                      className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus` : `haiku-card-image`}\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },
@@ -288,7 +288,7 @@
   "server-starter-all-features::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku{\n  japanese : string[] | [],\n  english : string[] | [],\n  image_names : string[] | [],\n  selectedImage : string | null,\n}\n\ninterface HaikuCardProps{\n  generatedHaiku : GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus : Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus : GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{ \n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div \n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n              \n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction HaikuCard({generatedHaiku, setHaikus, haikus} : HaikuCardProps) {\n  return (\n    <div \n     data-testid=\"haiku-card\"\n     className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\"  data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  const validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n    if (!rawNames || rawNames.length !== 3) {\n      return null;\n    }\n\n    const correctedNames: string[] = [];\n    const usedValidNames = new Set<string>();\n\n    for (const name of rawNames) {\n      if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n        correctedNames.push(name);\n        usedValidNames.add(name);\n        if (correctedNames.length === 3) break;\n      }\n    }\n\n    if (correctedNames.length < 3) {\n      const availableFallbacks = VALID_IMAGE_NAMES.filter(name => !usedValidNames.has(name));\n      for (let i = availableFallbacks.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n        [availableFallbacks[i], availableFallbacks[j]] = [availableFallbacks[j], availableFallbacks[i]];\n      }\n\n      while (correctedNames.length < 3 && availableFallbacks.length > 0) {\n        const fallbackName = availableFallbacks.pop();\n        if (fallbackName) {\n          correctedNames.push(fallbackName);\n        }\n      }\n    }\n\n    while (correctedNames.length < 3 && VALID_IMAGE_NAMES.length > 0) {\n      const fallbackName = VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n      correctedNames.push(fallbackName);\n    }\n\n    return correctedNames.slice(0, 3);\n  };\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    available: \"frontend\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: \"Names of 3 relevant images\",\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku]);\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const generatedHaikus = useMemo(() => (\n    haikus.filter((haiku) => haiku.english[0] !== \"A placeholder verse—\")\n  ), [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      {/* Thumbnail List */}\n      {Boolean(generatedHaikus.length) && !isMobile && (\n        <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n          {generatedHaikus.map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"thumbnail-haiku\"\n              className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                width: '80px',\n                transform: 'scale(0.2)',\n                transformOrigin: 'top left',\n                marginBottom: '-340px',\n                opacity: index === activeIndex ? 1 : 0.5,\n                transition: 'opacity 0.2s',\n              }}\n              onClick={() => setActiveIndex(index)}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  className=\"flex items-start gap-2 mb-2 haiku-line\"\n                  key={lineIndex}\n                >\n                  <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n                  <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className=\"mt-2 flex gap-2 justify-center\">\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      style={{\n                        width: '110px',\n                        height: '110px',\n                        objectFit: 'cover',\n                      }}\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      className=\"haiku-card-image w-12 h-12 object-cover\"\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${\n        isMobile \n          ? 'px-6' \n          : 'p-8'\n      }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.filter((_haiku: Haiku, index: number) => {\n            if (haikus.length == 1) return true;\n            else return index == activeIndex + 1;\n          }).map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"main-haiku-display\"\n              className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                zIndex: index === activeIndex ? haikus.length : index,\n                transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n              }}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  data-testid=\"main-haiku-line\"\n                  className={`flex items-start mb-4 haiku-line ${\n                    isMobile \n                      ? 'flex-col gap-1' \n                      : 'gap-4'\n                  }`}\n                  key={lineIndex}\n                  style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                >\n                  <p className={`font-bold text-gray-600 w-auto ${\n                    isMobile \n                      ? 'text-2xl leading-tight' \n                      : 'text-4xl'\n                  }`}>\n                    {line}\n                  </p>\n                  <p className={`font-light text-gray-500 w-auto ${\n                    isMobile \n                      ? 'text-sm ml-2' \n                      : 'text-base'\n                  }`}>\n                    {haiku.english?.[lineIndex]}\n                  </p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className={`flex justify-center ${\n                  isMobile \n                    ? 'mt-4 gap-2 flex-wrap' \n                    : 'mt-6 gap-4'\n                }`}>\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      style={{\n                        width: isMobile ? '90px' : '130px',\n                        height: isMobile ? '90px' : '130px',\n                        objectFit: 'cover',\n                      }}\n                      className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus` : `haiku-card-image`}\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },
@@ -552,7 +552,7 @@
   "langgraph::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku{\n  japanese : string[] | [],\n  english : string[] | [],\n  image_names : string[] | [],\n  selectedImage : string | null,\n}\n\ninterface HaikuCardProps{\n  generatedHaiku : GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus : Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus : GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{ \n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div \n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n              \n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction HaikuCard({generatedHaiku, setHaikus, haikus} : HaikuCardProps) {\n  return (\n    <div \n     data-testid=\"haiku-card\"\n     className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\"  data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  const validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n    if (!rawNames || rawNames.length !== 3) {\n      return null;\n    }\n\n    const correctedNames: string[] = [];\n    const usedValidNames = new Set<string>();\n\n    for (const name of rawNames) {\n      if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n        correctedNames.push(name);\n        usedValidNames.add(name);\n        if (correctedNames.length === 3) break;\n      }\n    }\n\n    if (correctedNames.length < 3) {\n      const availableFallbacks = VALID_IMAGE_NAMES.filter(name => !usedValidNames.has(name));\n      for (let i = availableFallbacks.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n        [availableFallbacks[i], availableFallbacks[j]] = [availableFallbacks[j], availableFallbacks[i]];\n      }\n\n      while (correctedNames.length < 3 && availableFallbacks.length > 0) {\n        const fallbackName = availableFallbacks.pop();\n        if (fallbackName) {\n          correctedNames.push(fallbackName);\n        }\n      }\n    }\n\n    while (correctedNames.length < 3 && VALID_IMAGE_NAMES.length > 0) {\n      const fallbackName = VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n      correctedNames.push(fallbackName);\n    }\n\n    return correctedNames.slice(0, 3);\n  };\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    available: \"frontend\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: \"Names of 3 relevant images\",\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku]);\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const generatedHaikus = useMemo(() => (\n    haikus.filter((haiku) => haiku.english[0] !== \"A placeholder verse—\")\n  ), [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      {/* Thumbnail List */}\n      {Boolean(generatedHaikus.length) && !isMobile && (\n        <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n          {generatedHaikus.map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"thumbnail-haiku\"\n              className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                width: '80px',\n                transform: 'scale(0.2)',\n                transformOrigin: 'top left',\n                marginBottom: '-340px',\n                opacity: index === activeIndex ? 1 : 0.5,\n                transition: 'opacity 0.2s',\n              }}\n              onClick={() => setActiveIndex(index)}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  className=\"flex items-start gap-2 mb-2 haiku-line\"\n                  key={lineIndex}\n                >\n                  <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n                  <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className=\"mt-2 flex gap-2 justify-center\">\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      style={{\n                        width: '110px',\n                        height: '110px',\n                        objectFit: 'cover',\n                      }}\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      className=\"haiku-card-image w-12 h-12 object-cover\"\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${\n        isMobile \n          ? 'px-6' \n          : 'p-8'\n      }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.filter((_haiku: Haiku, index: number) => {\n            if (haikus.length == 1) return true;\n            else return index == activeIndex + 1;\n          }).map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"main-haiku-display\"\n              className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                zIndex: index === activeIndex ? haikus.length : index,\n                transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n              }}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  data-testid=\"main-haiku-line\"\n                  className={`flex items-start mb-4 haiku-line ${\n                    isMobile \n                      ? 'flex-col gap-1' \n                      : 'gap-4'\n                  }`}\n                  key={lineIndex}\n                  style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                >\n                  <p className={`font-bold text-gray-600 w-auto ${\n                    isMobile \n                      ? 'text-2xl leading-tight' \n                      : 'text-4xl'\n                  }`}>\n                    {line}\n                  </p>\n                  <p className={`font-light text-gray-500 w-auto ${\n                    isMobile \n                      ? 'text-sm ml-2' \n                      : 'text-base'\n                  }`}>\n                    {haiku.english?.[lineIndex]}\n                  </p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className={`flex justify-center ${\n                  isMobile \n                    ? 'mt-4 gap-2 flex-wrap' \n                    : 'mt-6 gap-4'\n                }`}>\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      style={{\n                        width: isMobile ? '90px' : '130px',\n                        height: isMobile ? '90px' : '130px',\n                        objectFit: 'cover',\n                      }}\n                      className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus` : `haiku-card-image`}\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },
@@ -570,13 +570,13 @@
     },
     {
       "name": "agent.py",
-      "content": "\"\"\"\nAn example demonstrating tool-based generative UI using LangGraph.\n\"\"\"\n\nfrom typing import List, Any, Optional, Annotated\nimport os\n\n# LangGraph imports\nfrom langchain_openai import ChatOpenAI\nfrom langchain_core.runnables import RunnableConfig\nfrom langchain_core.messages import SystemMessage\nfrom langchain_core.tools import tool\nfrom langgraph.graph import StateGraph, END, START\nfrom langgraph.types import Command\nfrom langgraph.graph import MessagesState\nfrom langgraph.prebuilt import ToolNode\n\n@tool\ndef generate_haiku(\n    japanese: Annotated[ # pylint: disable=unused-argument\n        List[str],\n        \"An array of three lines of the haiku in Japanese\"\n    ],\n    english: Annotated[ # pylint: disable=unused-argument\n        List[str],\n        \"An array of three lines of the haiku in English\"\n    ]\n):\n    \"\"\"\n    Generate a haiku in Japanese and its English translation.\n    Also select exactly 3 relevant images from the provided list based on the haiku's theme.\n    \"\"\"\n\nclass AgentState(MessagesState):\n    \"\"\"\n    State of the agent.\n    \"\"\"\n    tools: List[Any]\n\nasync def chat_node(state: AgentState, config: Optional[RunnableConfig] = None):\n    \"\"\"\n    The main function handling chat and tool calls.\n    \"\"\"\n\n    system_prompt = \"\"\"\n        You assist the user in generating a haiku.\n        When generating a haiku using the 'generate_haiku' tool.\n    \"\"\"\n\n    # Define the model\n    model = ChatOpenAI(model=\"gpt-4o\")\n\n    # Define config for the model\n    if config is None:\n        config = RunnableConfig(recursion_limit=25)\n\n    # Bind the tools to the model\n    model_with_tools = model.bind_tools(\n        [generate_haiku],\n        # Disable parallel tool calls to avoid race conditions\n        parallel_tool_calls=False,\n    )\n\n    # Run the model to generate a response\n    response = await model_with_tools.ainvoke([\n        SystemMessage(content=system_prompt),\n        *state[\"messages\"],\n    ], config)\n\n    if response.tool_calls:\n        return Command(\n            goto=\"tool_node\",\n            update={\n                \"messages\": state[\"messages\"] + [response]\n            }\n        )\n    # Return Command to end with updated messages\n    return Command(\n        goto=END,\n        update={\n            \"messages\": state[\"messages\"] + [response]\n        }\n    )\n\n# Define the graph\nworkflow = StateGraph(AgentState)\n\n# Add nodes\nworkflow.add_node(\"chat_node\", chat_node)\nworkflow.add_node(\"tool_node\", ToolNode([generate_haiku]))\n\n# Add edges\nworkflow.set_entry_point(\"chat_node\")\nworkflow.add_edge(START, \"chat_node\")\nworkflow.add_edge(\"chat_node\", END)\nworkflow.add_edge(\"tool_node\", END)\n\n\n# Conditionally use a checkpointer based on the environment\n# Check for multiple indicators that we're running in LangGraph dev/API mode\nis_fast_api = os.environ.get(\"LANGGRAPH_FAST_API\", \"false\").lower() == \"true\"\n\n# Compile the graph\nif is_fast_api:\n    # For CopilotKit and other contexts, use MemorySaver\n    from langgraph.checkpoint.memory import MemorySaver\n    memory = MemorySaver()\n    graph = workflow.compile(checkpointer=memory)\nelse:\n    # When running in LangGraph API/dev, don't use a custom checkpointer\n    graph = workflow.compile()\n\n",
+      "content": "\"\"\"\nAn example demonstrating tool-based generative UI using LangGraph.\n\"\"\"\n\nfrom typing import Any, List\nfrom typing_extensions import Literal\nfrom langchain_openai import ChatOpenAI\nfrom langchain_core.messages import SystemMessage\nfrom langchain_core.runnables import RunnableConfig\nfrom langgraph.graph import StateGraph, END\nfrom langgraph.types import Command\nfrom langgraph.graph import MessagesState\nfrom langgraph.prebuilt import ToolNode\n\n\nclass AgentState(MessagesState):\n    \"\"\"\n    State of the agent.\n    \"\"\"\n    tools: List[Any]\n\nasync def chat_node(state: AgentState, config: RunnableConfig) -> Command[Literal[\"tool_node\", \"__end__\"]]:\n    \"\"\"\n    Standard chat node based on the ReAct design pattern. It handles:\n    - The model to use (and binds in CopilotKit actions and the tools defined above)\n    - The system prompt\n    - Getting a response from the model\n    - Handling tool calls\n\n    For more about the ReAct design pattern, see:\n    https://www.perplexity.ai/search/react-agents-NcXLQhreS0WDzpVaS4m9Cg\n    \"\"\"\n\n    model = ChatOpenAI(model=\"gpt-4o\")\n\n    model_with_tools = model.bind_tools(\n        [\n            *state.get(\"tools\", []), # bind tools defined by ag-ui\n        ],\n        parallel_tool_calls=False,\n    )\n\n    system_message = SystemMessage(\n        content=f\"Help the user with writing Haikus. If the user asks for a haiku, use the generate_haiku tool to display the haiku to the user.\"\n    )\n\n    response = await model_with_tools.ainvoke([\n        system_message,\n        *state[\"messages\"],\n    ], config)\n\n    return Command(\n        goto=END,\n        update={\n            \"messages\": [response],\n        }\n    )\n\nworkflow = StateGraph(AgentState)\nworkflow.add_node(\"chat_node\", chat_node)\n# This is required even though we don't have any backend tools to pass in.\nworkflow.add_node(\"tool_node\", ToolNode(tools=[]))\nworkflow.set_entry_point(\"chat_node\")\n\ngraph = workflow.compile()",
       "language": "python",
       "type": "file"
     },
     {
       "name": "agent.ts",
-      "content": "/**\n * An example demonstrating tool-based generative UI using LangGraph.\n */\n\nimport { ChatOpenAI } from \"@langchain/openai\";\nimport { SystemMessage } from \"@langchain/core/messages\";\nimport { RunnableConfig } from \"@langchain/core/runnables\";\nimport { Command, Annotation, MessagesAnnotation, StateGraph, END, START } from \"@langchain/langgraph\";\n\n// List of available images (modify path if needed)\nconst IMAGE_LIST = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\n// This tool generates a haiku on the server.\n// The tool call will be streamed to the frontend as it is being generated.\nconst GENERATE_HAIKU_TOOL = {\n  type: \"function\",\n  function: {\n    name: \"generate_haiku\",\n    description: \"Generate a haiku in Japanese and its English translation. Also select exactly 3 relevant images from the provided list based on the haiku's theme.\",\n    parameters: {\n      type: \"object\",\n      properties: {\n        japanese: {\n          type: \"array\",\n          items: {\n            type: \"string\"\n          },\n          description: \"An array of three lines of the haiku in Japanese\"\n        },\n        english: {\n          type: \"array\",\n          items: {\n            type: \"string\"\n          },\n          description: \"An array of three lines of the haiku in English\"\n        },\n        image_names: {\n          type: \"array\",\n          items: {\n            type: \"string\"\n          },\n          description: \"An array of EXACTLY THREE image filenames from the provided list that are most relevant to the haiku.\"\n        }\n      },\n      required: [\"japanese\", \"english\", \"image_names\"]\n    }\n  }\n};\n\nexport const AgentStateAnnotation = Annotation.Root({\n  tools: Annotation<any[]>(),\n  ...MessagesAnnotation.spec,\n});\nexport type AgentState = typeof AgentStateAnnotation.State;\n\nasync function chatNode(state: AgentState, config?: RunnableConfig): Promise<Command> {\n  /**\n   * The main function handling chat and tool calls.\n   */\n  // Prepare the image list string for the prompt\n  const imageListStr = IMAGE_LIST.map(img => `- ${img}`).join(\"\\n\");\n\n  const systemPrompt = `\n        You assist the user in generating a haiku.\n        When generating a haiku using the 'generate_haiku' tool, you MUST also select exactly 3 image filenames from the following list that are most relevant to the haiku's content or theme. Return the filenames in the 'image_names' parameter.\n        \n        Available images:\n        ${imageListStr}\n        \n        Don't provide the relevant image names in your final response to the user.\n    `;\n\n  // Define the model\n  const model = new ChatOpenAI({ model: \"gpt-4o\" });\n  \n  // Define config for the model\n  if (!config) {\n    config = { recursionLimit: 25 };\n  }\n\n  // Bind the tools to the model\n  const modelWithTools = model.bindTools(\n    [GENERATE_HAIKU_TOOL],\n    {\n      // Disable parallel tool calls to avoid race conditions\n      parallel_tool_calls: false,\n    }\n  );\n\n  // Run the model to generate a response\n  const response = await modelWithTools.invoke([\n    new SystemMessage({ content: systemPrompt }),\n    ...state.messages,\n  ], config);\n\n  // Return Command to end with updated messages\n  return new Command({\n    goto: END,\n    update: {\n      messages: [...state.messages, response]\n    }\n  });\n}\n\n// Define the graph\nconst workflow = new StateGraph<AgentState>(AgentStateAnnotation);\n\n// Add nodes\nworkflow.addNode(\"chat_node\", chatNode);\n\n// Add edges\nworkflow.setEntryPoint(\"chat_node\");\nworkflow.addEdge(START, \"chat_node\");\nworkflow.addEdge(\"chat_node\", END);\n\n// Compile the graph\nexport const toolBasedGenerativeUiGraph = workflow.compile();",
+      "content": "/**\n * An example demonstrating tool-based generative UI using LangGraph.\n */\n\nimport { ChatOpenAI } from \"@langchain/openai\";\nimport { SystemMessage } from \"@langchain/core/messages\";\nimport { RunnableConfig } from \"@langchain/core/runnables\";\nimport { Command, Annotation, MessagesAnnotation, StateGraph, END, START } from \"@langchain/langgraph\";\n\n\nexport const AgentStateAnnotation = Annotation.Root({\n  tools: Annotation<any[]>(),\n  ...MessagesAnnotation.spec,\n});\nexport type AgentState = typeof AgentStateAnnotation.State;\n\nasync function chatNode(state: AgentState, config?: RunnableConfig): Promise<Command> {\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  const model = new ChatOpenAI({ model: \"gpt-4o\" });\n\n  const modelWithTools = model.bindTools(\n    [\n      ...state.tools || []\n    ],\n    { parallel_tool_calls: false }\n  );\n\n  const systemMessage = new SystemMessage({\n     content: 'Help the user with writing Haikus. If the user asks for a haiku, use the generate_haiku tool to display the haiku to the user.'\n  });\n\n  const response = await modelWithTools.invoke([\n    systemMessage,\n    ...state.messages,\n  ], config);\n\n  return new Command({\n    goto: END,\n    update: {\n      messages: [response]\n    }\n  });\n}\n\nconst workflow = new StateGraph<AgentState>(AgentStateAnnotation);\nworkflow.addNode(\"chat_node\", chatNode);\n// This is required even though we don't have any backend tools to pass in.\n// workflow.addNode(\"tool_node\", ToolNode(tools=[]));\nworkflow.addEdge(START, \"chat_node\");\n\nexport const toolBasedGenerativeUiGraph = workflow.compile();",
       "language": "ts",
       "type": "file"
     }
@@ -741,7 +741,7 @@
   "langgraph-fastapi::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku{\n  japanese : string[] | [],\n  english : string[] | [],\n  image_names : string[] | [],\n  selectedImage : string | null,\n}\n\ninterface HaikuCardProps{\n  generatedHaiku : GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus : Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus : GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{ \n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div \n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n              \n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction HaikuCard({generatedHaiku, setHaikus, haikus} : HaikuCardProps) {\n  return (\n    <div \n     data-testid=\"haiku-card\"\n     className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\"  data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  const validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n    if (!rawNames || rawNames.length !== 3) {\n      return null;\n    }\n\n    const correctedNames: string[] = [];\n    const usedValidNames = new Set<string>();\n\n    for (const name of rawNames) {\n      if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n        correctedNames.push(name);\n        usedValidNames.add(name);\n        if (correctedNames.length === 3) break;\n      }\n    }\n\n    if (correctedNames.length < 3) {\n      const availableFallbacks = VALID_IMAGE_NAMES.filter(name => !usedValidNames.has(name));\n      for (let i = availableFallbacks.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n        [availableFallbacks[i], availableFallbacks[j]] = [availableFallbacks[j], availableFallbacks[i]];\n      }\n\n      while (correctedNames.length < 3 && availableFallbacks.length > 0) {\n        const fallbackName = availableFallbacks.pop();\n        if (fallbackName) {\n          correctedNames.push(fallbackName);\n        }\n      }\n    }\n\n    while (correctedNames.length < 3 && VALID_IMAGE_NAMES.length > 0) {\n      const fallbackName = VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n      correctedNames.push(fallbackName);\n    }\n\n    return correctedNames.slice(0, 3);\n  };\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    available: \"frontend\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: \"Names of 3 relevant images\",\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku]);\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const generatedHaikus = useMemo(() => (\n    haikus.filter((haiku) => haiku.english[0] !== \"A placeholder verse—\")\n  ), [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      {/* Thumbnail List */}\n      {Boolean(generatedHaikus.length) && !isMobile && (\n        <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n          {generatedHaikus.map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"thumbnail-haiku\"\n              className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                width: '80px',\n                transform: 'scale(0.2)',\n                transformOrigin: 'top left',\n                marginBottom: '-340px',\n                opacity: index === activeIndex ? 1 : 0.5,\n                transition: 'opacity 0.2s',\n              }}\n              onClick={() => setActiveIndex(index)}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  className=\"flex items-start gap-2 mb-2 haiku-line\"\n                  key={lineIndex}\n                >\n                  <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n                  <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className=\"mt-2 flex gap-2 justify-center\">\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      style={{\n                        width: '110px',\n                        height: '110px',\n                        objectFit: 'cover',\n                      }}\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      className=\"haiku-card-image w-12 h-12 object-cover\"\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${\n        isMobile \n          ? 'px-6' \n          : 'p-8'\n      }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.filter((_haiku: Haiku, index: number) => {\n            if (haikus.length == 1) return true;\n            else return index == activeIndex + 1;\n          }).map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"main-haiku-display\"\n              className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                zIndex: index === activeIndex ? haikus.length : index,\n                transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n              }}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  data-testid=\"main-haiku-line\"\n                  className={`flex items-start mb-4 haiku-line ${\n                    isMobile \n                      ? 'flex-col gap-1' \n                      : 'gap-4'\n                  }`}\n                  key={lineIndex}\n                  style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                >\n                  <p className={`font-bold text-gray-600 w-auto ${\n                    isMobile \n                      ? 'text-2xl leading-tight' \n                      : 'text-4xl'\n                  }`}>\n                    {line}\n                  </p>\n                  <p className={`font-light text-gray-500 w-auto ${\n                    isMobile \n                      ? 'text-sm ml-2' \n                      : 'text-base'\n                  }`}>\n                    {haiku.english?.[lineIndex]}\n                  </p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className={`flex justify-center ${\n                  isMobile \n                    ? 'mt-4 gap-2 flex-wrap' \n                    : 'mt-6 gap-4'\n                }`}>\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      style={{\n                        width: isMobile ? '90px' : '130px',\n                        height: isMobile ? '90px' : '130px',\n                        objectFit: 'cover',\n                      }}\n                      className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus` : `haiku-card-image`}\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },
@@ -759,7 +759,7 @@
     },
     {
       "name": "agent.py",
-      "content": "\"\"\"\nAn example demonstrating tool-based generative UI using LangGraph.\n\"\"\"\n\nfrom typing import List, Any, Optional, Annotated\nimport os\n\n# LangGraph imports\nfrom langchain_openai import ChatOpenAI\nfrom langchain_core.runnables import RunnableConfig\nfrom langchain_core.messages import SystemMessage\nfrom langchain_core.tools import tool\nfrom langgraph.graph import StateGraph, END, START\nfrom langgraph.types import Command\nfrom langgraph.graph import MessagesState\nfrom langgraph.prebuilt import ToolNode\n\n@tool\ndef generate_haiku(\n    japanese: Annotated[ # pylint: disable=unused-argument\n        List[str],\n        \"An array of three lines of the haiku in Japanese\"\n    ],\n    english: Annotated[ # pylint: disable=unused-argument\n        List[str],\n        \"An array of three lines of the haiku in English\"\n    ]\n):\n    \"\"\"\n    Generate a haiku in Japanese and its English translation.\n    Also select exactly 3 relevant images from the provided list based on the haiku's theme.\n    \"\"\"\n\nclass AgentState(MessagesState):\n    \"\"\"\n    State of the agent.\n    \"\"\"\n    tools: List[Any]\n\nasync def chat_node(state: AgentState, config: Optional[RunnableConfig] = None):\n    \"\"\"\n    The main function handling chat and tool calls.\n    \"\"\"\n\n    system_prompt = \"\"\"\n        You assist the user in generating a haiku.\n        When generating a haiku using the 'generate_haiku' tool.\n    \"\"\"\n\n    # Define the model\n    model = ChatOpenAI(model=\"gpt-4o\")\n\n    # Define config for the model\n    if config is None:\n        config = RunnableConfig(recursion_limit=25)\n\n    # Bind the tools to the model\n    model_with_tools = model.bind_tools(\n        [generate_haiku],\n        # Disable parallel tool calls to avoid race conditions\n        parallel_tool_calls=False,\n    )\n\n    # Run the model to generate a response\n    response = await model_with_tools.ainvoke([\n        SystemMessage(content=system_prompt),\n        *state[\"messages\"],\n    ], config)\n\n    if response.tool_calls:\n        return Command(\n            goto=\"tool_node\",\n            update={\n                \"messages\": state[\"messages\"] + [response]\n            }\n        )\n    # Return Command to end with updated messages\n    return Command(\n        goto=END,\n        update={\n            \"messages\": state[\"messages\"] + [response]\n        }\n    )\n\n# Define the graph\nworkflow = StateGraph(AgentState)\n\n# Add nodes\nworkflow.add_node(\"chat_node\", chat_node)\nworkflow.add_node(\"tool_node\", ToolNode([generate_haiku]))\n\n# Add edges\nworkflow.set_entry_point(\"chat_node\")\nworkflow.add_edge(START, \"chat_node\")\nworkflow.add_edge(\"chat_node\", END)\nworkflow.add_edge(\"tool_node\", END)\n\n\n# Conditionally use a checkpointer based on the environment\n# Check for multiple indicators that we're running in LangGraph dev/API mode\nis_fast_api = os.environ.get(\"LANGGRAPH_FAST_API\", \"false\").lower() == \"true\"\n\n# Compile the graph\nif is_fast_api:\n    # For CopilotKit and other contexts, use MemorySaver\n    from langgraph.checkpoint.memory import MemorySaver\n    memory = MemorySaver()\n    graph = workflow.compile(checkpointer=memory)\nelse:\n    # When running in LangGraph API/dev, don't use a custom checkpointer\n    graph = workflow.compile()\n\n",
+      "content": "\"\"\"\nAn example demonstrating tool-based generative UI using LangGraph.\n\"\"\"\n\nfrom typing import Any, List\nfrom typing_extensions import Literal\nfrom langchain_openai import ChatOpenAI\nfrom langchain_core.messages import SystemMessage\nfrom langchain_core.runnables import RunnableConfig\nfrom langgraph.graph import StateGraph, END\nfrom langgraph.types import Command\nfrom langgraph.graph import MessagesState\nfrom langgraph.prebuilt import ToolNode\n\n\nclass AgentState(MessagesState):\n    \"\"\"\n    State of the agent.\n    \"\"\"\n    tools: List[Any]\n\nasync def chat_node(state: AgentState, config: RunnableConfig) -> Command[Literal[\"tool_node\", \"__end__\"]]:\n    \"\"\"\n    Standard chat node based on the ReAct design pattern. It handles:\n    - The model to use (and binds in CopilotKit actions and the tools defined above)\n    - The system prompt\n    - Getting a response from the model\n    - Handling tool calls\n\n    For more about the ReAct design pattern, see:\n    https://www.perplexity.ai/search/react-agents-NcXLQhreS0WDzpVaS4m9Cg\n    \"\"\"\n\n    model = ChatOpenAI(model=\"gpt-4o\")\n\n    model_with_tools = model.bind_tools(\n        [\n            *state.get(\"tools\", []), # bind tools defined by ag-ui\n        ],\n        parallel_tool_calls=False,\n    )\n\n    system_message = SystemMessage(\n        content=f\"Help the user with writing Haikus. If the user asks for a haiku, use the generate_haiku tool to display the haiku to the user.\"\n    )\n\n    response = await model_with_tools.ainvoke([\n        system_message,\n        *state[\"messages\"],\n    ], config)\n\n    return Command(\n        goto=END,\n        update={\n            \"messages\": [response],\n        }\n    )\n\nworkflow = StateGraph(AgentState)\nworkflow.add_node(\"chat_node\", chat_node)\n# This is required even though we don't have any backend tools to pass in.\nworkflow.add_node(\"tool_node\", ToolNode(tools=[]))\nworkflow.set_entry_point(\"chat_node\")\n\ngraph = workflow.compile()",
       "language": "python",
       "type": "file"
     }
@@ -953,7 +953,7 @@
   "langgraph-typescript::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku{\n  japanese : string[] | [],\n  english : string[] | [],\n  image_names : string[] | [],\n  selectedImage : string | null,\n}\n\ninterface HaikuCardProps{\n  generatedHaiku : GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus : Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus : GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{ \n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div \n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n              \n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction HaikuCard({generatedHaiku, setHaikus, haikus} : HaikuCardProps) {\n  return (\n    <div \n     data-testid=\"haiku-card\"\n     className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\"  data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  const validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n    if (!rawNames || rawNames.length !== 3) {\n      return null;\n    }\n\n    const correctedNames: string[] = [];\n    const usedValidNames = new Set<string>();\n\n    for (const name of rawNames) {\n      if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n        correctedNames.push(name);\n        usedValidNames.add(name);\n        if (correctedNames.length === 3) break;\n      }\n    }\n\n    if (correctedNames.length < 3) {\n      const availableFallbacks = VALID_IMAGE_NAMES.filter(name => !usedValidNames.has(name));\n      for (let i = availableFallbacks.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n        [availableFallbacks[i], availableFallbacks[j]] = [availableFallbacks[j], availableFallbacks[i]];\n      }\n\n      while (correctedNames.length < 3 && availableFallbacks.length > 0) {\n        const fallbackName = availableFallbacks.pop();\n        if (fallbackName) {\n          correctedNames.push(fallbackName);\n        }\n      }\n    }\n\n    while (correctedNames.length < 3 && VALID_IMAGE_NAMES.length > 0) {\n      const fallbackName = VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n      correctedNames.push(fallbackName);\n    }\n\n    return correctedNames.slice(0, 3);\n  };\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    available: \"frontend\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: \"Names of 3 relevant images\",\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku]);\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const generatedHaikus = useMemo(() => (\n    haikus.filter((haiku) => haiku.english[0] !== \"A placeholder verse—\")\n  ), [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      {/* Thumbnail List */}\n      {Boolean(generatedHaikus.length) && !isMobile && (\n        <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n          {generatedHaikus.map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"thumbnail-haiku\"\n              className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                width: '80px',\n                transform: 'scale(0.2)',\n                transformOrigin: 'top left',\n                marginBottom: '-340px',\n                opacity: index === activeIndex ? 1 : 0.5,\n                transition: 'opacity 0.2s',\n              }}\n              onClick={() => setActiveIndex(index)}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  className=\"flex items-start gap-2 mb-2 haiku-line\"\n                  key={lineIndex}\n                >\n                  <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n                  <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className=\"mt-2 flex gap-2 justify-center\">\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      style={{\n                        width: '110px',\n                        height: '110px',\n                        objectFit: 'cover',\n                      }}\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      className=\"haiku-card-image w-12 h-12 object-cover\"\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${\n        isMobile \n          ? 'px-6' \n          : 'p-8'\n      }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.filter((_haiku: Haiku, index: number) => {\n            if (haikus.length == 1) return true;\n            else return index == activeIndex + 1;\n          }).map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"main-haiku-display\"\n              className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                zIndex: index === activeIndex ? haikus.length : index,\n                transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n              }}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  data-testid=\"main-haiku-line\"\n                  className={`flex items-start mb-4 haiku-line ${\n                    isMobile \n                      ? 'flex-col gap-1' \n                      : 'gap-4'\n                  }`}\n                  key={lineIndex}\n                  style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                >\n                  <p className={`font-bold text-gray-600 w-auto ${\n                    isMobile \n                      ? 'text-2xl leading-tight' \n                      : 'text-4xl'\n                  }`}>\n                    {line}\n                  </p>\n                  <p className={`font-light text-gray-500 w-auto ${\n                    isMobile \n                      ? 'text-sm ml-2' \n                      : 'text-base'\n                  }`}>\n                    {haiku.english?.[lineIndex]}\n                  </p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className={`flex justify-center ${\n                  isMobile \n                    ? 'mt-4 gap-2 flex-wrap' \n                    : 'mt-6 gap-4'\n                }`}>\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      style={{\n                        width: isMobile ? '90px' : '130px',\n                        height: isMobile ? '90px' : '130px',\n                        objectFit: 'cover',\n                      }}\n                      className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus` : `haiku-card-image`}\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },
@@ -971,13 +971,13 @@
     },
     {
       "name": "agent.py",
-      "content": "\"\"\"\nAn example demonstrating tool-based generative UI using LangGraph.\n\"\"\"\n\nfrom typing import List, Any, Optional, Annotated\nimport os\n\n# LangGraph imports\nfrom langchain_openai import ChatOpenAI\nfrom langchain_core.runnables import RunnableConfig\nfrom langchain_core.messages import SystemMessage\nfrom langchain_core.tools import tool\nfrom langgraph.graph import StateGraph, END, START\nfrom langgraph.types import Command\nfrom langgraph.graph import MessagesState\nfrom langgraph.prebuilt import ToolNode\n\n@tool\ndef generate_haiku(\n    japanese: Annotated[ # pylint: disable=unused-argument\n        List[str],\n        \"An array of three lines of the haiku in Japanese\"\n    ],\n    english: Annotated[ # pylint: disable=unused-argument\n        List[str],\n        \"An array of three lines of the haiku in English\"\n    ]\n):\n    \"\"\"\n    Generate a haiku in Japanese and its English translation.\n    Also select exactly 3 relevant images from the provided list based on the haiku's theme.\n    \"\"\"\n\nclass AgentState(MessagesState):\n    \"\"\"\n    State of the agent.\n    \"\"\"\n    tools: List[Any]\n\nasync def chat_node(state: AgentState, config: Optional[RunnableConfig] = None):\n    \"\"\"\n    The main function handling chat and tool calls.\n    \"\"\"\n\n    system_prompt = \"\"\"\n        You assist the user in generating a haiku.\n        When generating a haiku using the 'generate_haiku' tool.\n    \"\"\"\n\n    # Define the model\n    model = ChatOpenAI(model=\"gpt-4o\")\n\n    # Define config for the model\n    if config is None:\n        config = RunnableConfig(recursion_limit=25)\n\n    # Bind the tools to the model\n    model_with_tools = model.bind_tools(\n        [generate_haiku],\n        # Disable parallel tool calls to avoid race conditions\n        parallel_tool_calls=False,\n    )\n\n    # Run the model to generate a response\n    response = await model_with_tools.ainvoke([\n        SystemMessage(content=system_prompt),\n        *state[\"messages\"],\n    ], config)\n\n    if response.tool_calls:\n        return Command(\n            goto=\"tool_node\",\n            update={\n                \"messages\": state[\"messages\"] + [response]\n            }\n        )\n    # Return Command to end with updated messages\n    return Command(\n        goto=END,\n        update={\n            \"messages\": state[\"messages\"] + [response]\n        }\n    )\n\n# Define the graph\nworkflow = StateGraph(AgentState)\n\n# Add nodes\nworkflow.add_node(\"chat_node\", chat_node)\nworkflow.add_node(\"tool_node\", ToolNode([generate_haiku]))\n\n# Add edges\nworkflow.set_entry_point(\"chat_node\")\nworkflow.add_edge(START, \"chat_node\")\nworkflow.add_edge(\"chat_node\", END)\nworkflow.add_edge(\"tool_node\", END)\n\n\n# Conditionally use a checkpointer based on the environment\n# Check for multiple indicators that we're running in LangGraph dev/API mode\nis_fast_api = os.environ.get(\"LANGGRAPH_FAST_API\", \"false\").lower() == \"true\"\n\n# Compile the graph\nif is_fast_api:\n    # For CopilotKit and other contexts, use MemorySaver\n    from langgraph.checkpoint.memory import MemorySaver\n    memory = MemorySaver()\n    graph = workflow.compile(checkpointer=memory)\nelse:\n    # When running in LangGraph API/dev, don't use a custom checkpointer\n    graph = workflow.compile()\n\n",
+      "content": "\"\"\"\nAn example demonstrating tool-based generative UI using LangGraph.\n\"\"\"\n\nfrom typing import Any, List\nfrom typing_extensions import Literal\nfrom langchain_openai import ChatOpenAI\nfrom langchain_core.messages import SystemMessage\nfrom langchain_core.runnables import RunnableConfig\nfrom langgraph.graph import StateGraph, END\nfrom langgraph.types import Command\nfrom langgraph.graph import MessagesState\nfrom langgraph.prebuilt import ToolNode\n\n\nclass AgentState(MessagesState):\n    \"\"\"\n    State of the agent.\n    \"\"\"\n    tools: List[Any]\n\nasync def chat_node(state: AgentState, config: RunnableConfig) -> Command[Literal[\"tool_node\", \"__end__\"]]:\n    \"\"\"\n    Standard chat node based on the ReAct design pattern. It handles:\n    - The model to use (and binds in CopilotKit actions and the tools defined above)\n    - The system prompt\n    - Getting a response from the model\n    - Handling tool calls\n\n    For more about the ReAct design pattern, see:\n    https://www.perplexity.ai/search/react-agents-NcXLQhreS0WDzpVaS4m9Cg\n    \"\"\"\n\n    model = ChatOpenAI(model=\"gpt-4o\")\n\n    model_with_tools = model.bind_tools(\n        [\n            *state.get(\"tools\", []), # bind tools defined by ag-ui\n        ],\n        parallel_tool_calls=False,\n    )\n\n    system_message = SystemMessage(\n        content=f\"Help the user with writing Haikus. If the user asks for a haiku, use the generate_haiku tool to display the haiku to the user.\"\n    )\n\n    response = await model_with_tools.ainvoke([\n        system_message,\n        *state[\"messages\"],\n    ], config)\n\n    return Command(\n        goto=END,\n        update={\n            \"messages\": [response],\n        }\n    )\n\nworkflow = StateGraph(AgentState)\nworkflow.add_node(\"chat_node\", chat_node)\n# This is required even though we don't have any backend tools to pass in.\nworkflow.add_node(\"tool_node\", ToolNode(tools=[]))\nworkflow.set_entry_point(\"chat_node\")\n\ngraph = workflow.compile()",
       "language": "python",
       "type": "file"
     },
     {
       "name": "agent.ts",
-      "content": "/**\n * An example demonstrating tool-based generative UI using LangGraph.\n */\n\nimport { ChatOpenAI } from \"@langchain/openai\";\nimport { SystemMessage } from \"@langchain/core/messages\";\nimport { RunnableConfig } from \"@langchain/core/runnables\";\nimport { Command, Annotation, MessagesAnnotation, StateGraph, END, START } from \"@langchain/langgraph\";\n\n// List of available images (modify path if needed)\nconst IMAGE_LIST = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\n// This tool generates a haiku on the server.\n// The tool call will be streamed to the frontend as it is being generated.\nconst GENERATE_HAIKU_TOOL = {\n  type: \"function\",\n  function: {\n    name: \"generate_haiku\",\n    description: \"Generate a haiku in Japanese and its English translation. Also select exactly 3 relevant images from the provided list based on the haiku's theme.\",\n    parameters: {\n      type: \"object\",\n      properties: {\n        japanese: {\n          type: \"array\",\n          items: {\n            type: \"string\"\n          },\n          description: \"An array of three lines of the haiku in Japanese\"\n        },\n        english: {\n          type: \"array\",\n          items: {\n            type: \"string\"\n          },\n          description: \"An array of three lines of the haiku in English\"\n        },\n        image_names: {\n          type: \"array\",\n          items: {\n            type: \"string\"\n          },\n          description: \"An array of EXACTLY THREE image filenames from the provided list that are most relevant to the haiku.\"\n        }\n      },\n      required: [\"japanese\", \"english\", \"image_names\"]\n    }\n  }\n};\n\nexport const AgentStateAnnotation = Annotation.Root({\n  tools: Annotation<any[]>(),\n  ...MessagesAnnotation.spec,\n});\nexport type AgentState = typeof AgentStateAnnotation.State;\n\nasync function chatNode(state: AgentState, config?: RunnableConfig): Promise<Command> {\n  /**\n   * The main function handling chat and tool calls.\n   */\n  // Prepare the image list string for the prompt\n  const imageListStr = IMAGE_LIST.map(img => `- ${img}`).join(\"\\n\");\n\n  const systemPrompt = `\n        You assist the user in generating a haiku.\n        When generating a haiku using the 'generate_haiku' tool, you MUST also select exactly 3 image filenames from the following list that are most relevant to the haiku's content or theme. Return the filenames in the 'image_names' parameter.\n        \n        Available images:\n        ${imageListStr}\n        \n        Don't provide the relevant image names in your final response to the user.\n    `;\n\n  // Define the model\n  const model = new ChatOpenAI({ model: \"gpt-4o\" });\n  \n  // Define config for the model\n  if (!config) {\n    config = { recursionLimit: 25 };\n  }\n\n  // Bind the tools to the model\n  const modelWithTools = model.bindTools(\n    [GENERATE_HAIKU_TOOL],\n    {\n      // Disable parallel tool calls to avoid race conditions\n      parallel_tool_calls: false,\n    }\n  );\n\n  // Run the model to generate a response\n  const response = await modelWithTools.invoke([\n    new SystemMessage({ content: systemPrompt }),\n    ...state.messages,\n  ], config);\n\n  // Return Command to end with updated messages\n  return new Command({\n    goto: END,\n    update: {\n      messages: [...state.messages, response]\n    }\n  });\n}\n\n// Define the graph\nconst workflow = new StateGraph<AgentState>(AgentStateAnnotation);\n\n// Add nodes\nworkflow.addNode(\"chat_node\", chatNode);\n\n// Add edges\nworkflow.setEntryPoint(\"chat_node\");\nworkflow.addEdge(START, \"chat_node\");\nworkflow.addEdge(\"chat_node\", END);\n\n// Compile the graph\nexport const toolBasedGenerativeUiGraph = workflow.compile();",
+      "content": "/**\n * An example demonstrating tool-based generative UI using LangGraph.\n */\n\nimport { ChatOpenAI } from \"@langchain/openai\";\nimport { SystemMessage } from \"@langchain/core/messages\";\nimport { RunnableConfig } from \"@langchain/core/runnables\";\nimport { Command, Annotation, MessagesAnnotation, StateGraph, END, START } from \"@langchain/langgraph\";\n\n\nexport const AgentStateAnnotation = Annotation.Root({\n  tools: Annotation<any[]>(),\n  ...MessagesAnnotation.spec,\n});\nexport type AgentState = typeof AgentStateAnnotation.State;\n\nasync function chatNode(state: AgentState, config?: RunnableConfig): Promise<Command> {\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  const model = new ChatOpenAI({ model: \"gpt-4o\" });\n\n  const modelWithTools = model.bindTools(\n    [\n      ...state.tools || []\n    ],\n    { parallel_tool_calls: false }\n  );\n\n  const systemMessage = new SystemMessage({\n     content: 'Help the user with writing Haikus. If the user asks for a haiku, use the generate_haiku tool to display the haiku to the user.'\n  });\n\n  const response = await modelWithTools.invoke([\n    systemMessage,\n    ...state.messages,\n  ], config);\n\n  return new Command({\n    goto: END,\n    update: {\n      messages: [response]\n    }\n  });\n}\n\nconst workflow = new StateGraph<AgentState>(AgentStateAnnotation);\nworkflow.addNode(\"chat_node\", chatNode);\n// This is required even though we don't have any backend tools to pass in.\n// workflow.addNode(\"tool_node\", ToolNode(tools=[]));\nworkflow.addEdge(START, \"chat_node\");\n\nexport const toolBasedGenerativeUiGraph = workflow.compile();",
       "language": "ts",
       "type": "file"
     }
@@ -1005,7 +1005,7 @@
   "agno::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku{\n  japanese : string[] | [],\n  english : string[] | [],\n  image_names : string[] | [],\n  selectedImage : string | null,\n}\n\ninterface HaikuCardProps{\n  generatedHaiku : GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus : Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus : GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{ \n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div \n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n              \n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction HaikuCard({generatedHaiku, setHaikus, haikus} : HaikuCardProps) {\n  return (\n    <div \n     data-testid=\"haiku-card\"\n     className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\"  data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  const validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n    if (!rawNames || rawNames.length !== 3) {\n      return null;\n    }\n\n    const correctedNames: string[] = [];\n    const usedValidNames = new Set<string>();\n\n    for (const name of rawNames) {\n      if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n        correctedNames.push(name);\n        usedValidNames.add(name);\n        if (correctedNames.length === 3) break;\n      }\n    }\n\n    if (correctedNames.length < 3) {\n      const availableFallbacks = VALID_IMAGE_NAMES.filter(name => !usedValidNames.has(name));\n      for (let i = availableFallbacks.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n        [availableFallbacks[i], availableFallbacks[j]] = [availableFallbacks[j], availableFallbacks[i]];\n      }\n\n      while (correctedNames.length < 3 && availableFallbacks.length > 0) {\n        const fallbackName = availableFallbacks.pop();\n        if (fallbackName) {\n          correctedNames.push(fallbackName);\n        }\n      }\n    }\n\n    while (correctedNames.length < 3 && VALID_IMAGE_NAMES.length > 0) {\n      const fallbackName = VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n      correctedNames.push(fallbackName);\n    }\n\n    return correctedNames.slice(0, 3);\n  };\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    available: \"frontend\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: \"Names of 3 relevant images\",\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku]);\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const generatedHaikus = useMemo(() => (\n    haikus.filter((haiku) => haiku.english[0] !== \"A placeholder verse—\")\n  ), [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      {/* Thumbnail List */}\n      {Boolean(generatedHaikus.length) && !isMobile && (\n        <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n          {generatedHaikus.map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"thumbnail-haiku\"\n              className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                width: '80px',\n                transform: 'scale(0.2)',\n                transformOrigin: 'top left',\n                marginBottom: '-340px',\n                opacity: index === activeIndex ? 1 : 0.5,\n                transition: 'opacity 0.2s',\n              }}\n              onClick={() => setActiveIndex(index)}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  className=\"flex items-start gap-2 mb-2 haiku-line\"\n                  key={lineIndex}\n                >\n                  <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n                  <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className=\"mt-2 flex gap-2 justify-center\">\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      style={{\n                        width: '110px',\n                        height: '110px',\n                        objectFit: 'cover',\n                      }}\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      className=\"haiku-card-image w-12 h-12 object-cover\"\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${\n        isMobile \n          ? 'px-6' \n          : 'p-8'\n      }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.filter((_haiku: Haiku, index: number) => {\n            if (haikus.length == 1) return true;\n            else return index == activeIndex + 1;\n          }).map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"main-haiku-display\"\n              className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                zIndex: index === activeIndex ? haikus.length : index,\n                transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n              }}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  data-testid=\"main-haiku-line\"\n                  className={`flex items-start mb-4 haiku-line ${\n                    isMobile \n                      ? 'flex-col gap-1' \n                      : 'gap-4'\n                  }`}\n                  key={lineIndex}\n                  style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                >\n                  <p className={`font-bold text-gray-600 w-auto ${\n                    isMobile \n                      ? 'text-2xl leading-tight' \n                      : 'text-4xl'\n                  }`}>\n                    {line}\n                  </p>\n                  <p className={`font-light text-gray-500 w-auto ${\n                    isMobile \n                      ? 'text-sm ml-2' \n                      : 'text-base'\n                  }`}>\n                    {haiku.english?.[lineIndex]}\n                  </p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className={`flex justify-center ${\n                  isMobile \n                    ? 'mt-4 gap-2 flex-wrap' \n                    : 'mt-6 gap-4'\n                }`}>\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      style={{\n                        width: isMobile ? '90px' : '130px',\n                        height: isMobile ? '90px' : '130px',\n                        objectFit: 'cover',\n                      }}\n                      className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus` : `haiku-card-image`}\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },
@@ -1181,7 +1181,7 @@
   "crewai::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku{\n  japanese : string[] | [],\n  english : string[] | [],\n  image_names : string[] | [],\n  selectedImage : string | null,\n}\n\ninterface HaikuCardProps{\n  generatedHaiku : GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus : Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus : GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{ \n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div \n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n              \n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        )}\n      </div>\n    </CopilotKit>\n  );\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction HaikuCard({generatedHaiku, setHaikus, haikus} : HaikuCardProps) {\n  return (\n    <div \n     data-testid=\"haiku-card\"\n     className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\"  data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  const validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n    if (!rawNames || rawNames.length !== 3) {\n      return null;\n    }\n\n    const correctedNames: string[] = [];\n    const usedValidNames = new Set<string>();\n\n    for (const name of rawNames) {\n      if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n        correctedNames.push(name);\n        usedValidNames.add(name);\n        if (correctedNames.length === 3) break;\n      }\n    }\n\n    if (correctedNames.length < 3) {\n      const availableFallbacks = VALID_IMAGE_NAMES.filter(name => !usedValidNames.has(name));\n      for (let i = availableFallbacks.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n        [availableFallbacks[i], availableFallbacks[j]] = [availableFallbacks[j], availableFallbacks[i]];\n      }\n\n      while (correctedNames.length < 3 && availableFallbacks.length > 0) {\n        const fallbackName = availableFallbacks.pop();\n        if (fallbackName) {\n          correctedNames.push(fallbackName);\n        }\n      }\n    }\n\n    while (correctedNames.length < 3 && VALID_IMAGE_NAMES.length > 0) {\n      const fallbackName = VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n      correctedNames.push(fallbackName);\n    }\n\n    return correctedNames.slice(0, 3);\n  };\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    available: \"frontend\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: \"Names of 3 relevant images\",\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku]);\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const generatedHaikus = useMemo(() => (\n    haikus.filter((haiku) => haiku.english[0] !== \"A placeholder verse—\")\n  ), [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      {/* Thumbnail List */}\n      {Boolean(generatedHaikus.length) && !isMobile && (\n        <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n          {generatedHaikus.map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"thumbnail-haiku\"\n              className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                width: '80px',\n                transform: 'scale(0.2)',\n                transformOrigin: 'top left',\n                marginBottom: '-340px',\n                opacity: index === activeIndex ? 1 : 0.5,\n                transition: 'opacity 0.2s',\n              }}\n              onClick={() => setActiveIndex(index)}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  className=\"flex items-start gap-2 mb-2 haiku-line\"\n                  key={lineIndex}\n                >\n                  <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n                  <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className=\"mt-2 flex gap-2 justify-center\">\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      style={{\n                        width: '110px',\n                        height: '110px',\n                        objectFit: 'cover',\n                      }}\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      className=\"haiku-card-image w-12 h-12 object-cover\"\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${\n        isMobile \n          ? 'px-6' \n          : 'p-8'\n      }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.filter((_haiku: Haiku, index: number) => {\n            if (haikus.length == 1) return true;\n            else return index == activeIndex + 1;\n          }).map((haiku, index) => (\n            <div\n              key={index}\n              data-testid=\"main-haiku-display\"\n              className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n              style={{\n                zIndex: index === activeIndex ? haikus.length : index,\n                transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n              }}\n            >\n              {haiku.japanese.map((line, lineIndex) => (\n                <div\n                  data-testid=\"main-haiku-line\"\n                  className={`flex items-start mb-4 haiku-line ${\n                    isMobile \n                      ? 'flex-col gap-1' \n                      : 'gap-4'\n                  }`}\n                  key={lineIndex}\n                  style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                >\n                  <p className={`font-bold text-gray-600 w-auto ${\n                    isMobile \n                      ? 'text-2xl leading-tight' \n                      : 'text-4xl'\n                  }`}>\n                    {line}\n                  </p>\n                  <p className={`font-light text-gray-500 w-auto ${\n                    isMobile \n                      ? 'text-sm ml-2' \n                      : 'text-base'\n                  }`}>\n                    {haiku.english?.[lineIndex]}\n                  </p>\n                </div>\n              ))}\n              {haiku.image_names && haiku.image_names.length === 3 && (\n                <div className={`flex justify-center ${\n                  isMobile \n                    ? 'mt-4 gap-2 flex-wrap' \n                    : 'mt-6 gap-4'\n                }`}>\n                  {haiku.image_names.map((imageName, imgIndex) => (\n                    <img\n                      key={imageName}\n                      src={`/images/${imageName}`}\n                      alt={imageName || \"\"}\n                      style={{\n                        width: isMobile ? '90px' : '130px',\n                        height: isMobile ? '90px' : '130px',\n                        objectFit: 'cover',\n                      }}\n                      className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus` : `haiku-card-image`}\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },

From d3c0bb122d0719bbf4e46d097d7287d4e784c178 Mon Sep 17 00:00:00 2001
From: Max Korp <maxkorp@8bytealchemy.com>
Date: Mon, 25 Aug 2025 16:53:38 -0700
Subject: [PATCH 3/7] tighten up agno agentic chat and tool based gen ui
 examples

---
 .../agno/examples/server/api/agentic_chat.py  | 14 +++++++-
 .../server/api/tool_based_generative_ui.py    | 35 +++++++++++--------
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/typescript-sdk/integrations/agno/examples/server/api/agentic_chat.py b/typescript-sdk/integrations/agno/examples/server/api/agentic_chat.py
index 934fc2882..0638a4e6e 100644
--- a/typescript-sdk/integrations/agno/examples/server/api/agentic_chat.py
+++ b/typescript-sdk/integrations/agno/examples/server/api/agentic_chat.py
@@ -6,13 +6,25 @@
 from agno.app.agui.app import AGUIApp
 from agno.models.openai import OpenAIChat
 from agno.tools.yfinance import YFinanceTools
+from agno.tools import tool
+
+
+@tool(external_execution=True)
+def change_background(background: str) -> str: # pylint: disable=unused-argument
+    """
+    Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.
+
+    Args:
+        background: str: The background color to change to. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.
+    """ # pylint: disable=line-too-long
 
 agent = Agent(
   model=OpenAIChat(id="gpt-4o"),
   tools=[
     YFinanceTools(
       stock_price=True, analyst_recommendations=True, stock_fundamentals=True
-    )
+    ),
+    change_background,
   ],
   description="You are an investment analyst that researches stock prices, analyst recommendations, and stock fundamentals.",
   instructions="Format your response using markdown and use tables to display data where possible.",
diff --git a/typescript-sdk/integrations/agno/examples/server/api/tool_based_generative_ui.py b/typescript-sdk/integrations/agno/examples/server/api/tool_based_generative_ui.py
index 203aff12f..6e52f7501 100644
--- a/typescript-sdk/integrations/agno/examples/server/api/tool_based_generative_ui.py
+++ b/typescript-sdk/integrations/agno/examples/server/api/tool_based_generative_ui.py
@@ -11,35 +11,40 @@
 from agno.tools import tool
 
 
-@tool()
-def generate_haiku(english: List[str], japanese: List[str]) -> str: # pylint: disable=unused-argument
+@tool(external_execution=True)
+def generate_haiku(english: List[str], japanese: List[str], image_names: List[str]) -> str: # pylint: disable=unused-argument
     """
+
     Generate a haiku in Japanese and its English translation.
-    YOU MUST PROVIDE THE ENGLISH HAIKU AND THE JAPANESE HAIKU.
+    YOU MUST PROVIDE THE ENGLISH HAIKU AND THE JAPANESE HAIKU AND THE IMAGE NAMES.
+    When picking image names, pick them from the following list:
+        - "Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg",
+        - "Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg",
+        - "Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg",
+        - "Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg",
+        - "Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg",
+        - "Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg",
+        - "Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg",
+        - "Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg",
+        - "Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg",
+        - "Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg"
 
     Args:
         english: List[str]: An array of three lines of the haiku in English. YOU MUST PROVIDE THE ENGLISH HAIKU.
         japanese: List[str]: An array of three lines of the haiku in Japanese. YOU MUST PROVIDE THE JAPANESE HAIKU.
+        image_names: List[str]: An array of three image names. YOU MUST PROVIDE THE IMAGE NAMES.
+
 
     Returns:
         str: A confirmation message.
     """ # pylint: disable=line-too-long
     return "Haiku generated"
 
-
-@tool(external_execution=True)
-def change_background(background: str) -> str: # pylint: disable=unused-argument
-    """
-    Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.
-
-    Args:
-        background: str: The background color to change to. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.
-    """ # pylint: disable=line-too-long
-
 agent = Agent(
     model=OpenAIChat(id="gpt-4o"),
-    tools=[generate_haiku, change_background],
-    description="You are a helpful assistant that can help with tasks and answer questions.",
+    tools=[generate_haiku],
+    description="Help the user with writing Haikus. If the user asks for a haiku, use the generate_haiku tool to display the haiku to the user.",
+    debug_mode=True,
 )
 
 agui_app = AGUIApp(

From 84515e840651c2f8182b64d879a6b9ce97374284 Mon Sep 17 00:00:00 2001
From: Max Korp <maxkorp@8bytealchemy.com>
Date: Mon, 25 Aug 2025 16:53:51 -0700
Subject: [PATCH 4/7] fixup langgraph examples.

---
 .../agents/tool_based_generative_ui/agent.py  | 97 +++++-------------
 .../agents/tool_based_generative_ui/agent.ts  | 99 ++-----------------
 2 files changed, 35 insertions(+), 161 deletions(-)

diff --git a/typescript-sdk/integrations/langgraph/examples/python/agents/tool_based_generative_ui/agent.py b/typescript-sdk/integrations/langgraph/examples/python/agents/tool_based_generative_ui/agent.py
index acba8b2e6..b42b1aef6 100644
--- a/typescript-sdk/integrations/langgraph/examples/python/agents/tool_based_generative_ui/agent.py
+++ b/typescript-sdk/integrations/langgraph/examples/python/agents/tool_based_generative_ui/agent.py
@@ -2,34 +2,16 @@
 An example demonstrating tool-based generative UI using LangGraph.
 """
 
-from typing import List, Any, Optional, Annotated
-import os
-
-# LangGraph imports
+from typing import Any, List
+from typing_extensions import Literal
 from langchain_openai import ChatOpenAI
-from langchain_core.runnables import RunnableConfig
 from langchain_core.messages import SystemMessage
-from langchain_core.tools import tool
-from langgraph.graph import StateGraph, END, START
+from langchain_core.runnables import RunnableConfig
+from langgraph.graph import StateGraph, END
 from langgraph.types import Command
 from langgraph.graph import MessagesState
 from langgraph.prebuilt import ToolNode
 
-@tool
-def generate_haiku(
-    japanese: Annotated[ # pylint: disable=unused-argument
-        List[str],
-        "An array of three lines of the haiku in Japanese"
-    ],
-    english: Annotated[ # pylint: disable=unused-argument
-        List[str],
-        "An array of three lines of the haiku in English"
-    ]
-):
-    """
-    Generate a haiku in Japanese and its English translation.
-    Also select exactly 3 relevant images from the provided list based on the haiku's theme.
-    """
 
 class AgentState(MessagesState):
     """
@@ -37,76 +19,47 @@ class AgentState(MessagesState):
     """
     tools: List[Any]
 
-async def chat_node(state: AgentState, config: Optional[RunnableConfig] = None):
-    """
-    The main function handling chat and tool calls.
+async def chat_node(state: AgentState, config: RunnableConfig) -> Command[Literal["tool_node", "__end__"]]:
     """
-
-    system_prompt = """
-        You assist the user in generating a haiku.
-        When generating a haiku using the 'generate_haiku' tool.
+    Standard chat node based on the ReAct design pattern. It handles:
+    - The model to use (and binds in CopilotKit actions and the tools defined above)
+    - The system prompt
+    - Getting a response from the model
+    - Handling tool calls
+
+    For more about the ReAct design pattern, see:
+    https://www.perplexity.ai/search/react-agents-NcXLQhreS0WDzpVaS4m9Cg
     """
 
-    # Define the model
     model = ChatOpenAI(model="gpt-4o")
 
-    # Define config for the model
-    if config is None:
-        config = RunnableConfig(recursion_limit=25)
-
-    # Bind the tools to the model
     model_with_tools = model.bind_tools(
-        [generate_haiku],
-        # Disable parallel tool calls to avoid race conditions
+        [
+            *state.get("tools", []), # bind tools defined by ag-ui
+        ],
         parallel_tool_calls=False,
     )
 
-    # Run the model to generate a response
+    system_message = SystemMessage(
+        content=f"Help the user with writing Haikus. If the user asks for a haiku, use the generate_haiku tool to display the haiku to the user."
+    )
+
     response = await model_with_tools.ainvoke([
-        SystemMessage(content=system_prompt),
+        system_message,
         *state["messages"],
     ], config)
 
-    if response.tool_calls:
-        return Command(
-            goto="tool_node",
-            update={
-                "messages": state["messages"] + [response]
-            }
-        )
-    # Return Command to end with updated messages
     return Command(
         goto=END,
         update={
-            "messages": state["messages"] + [response]
+            "messages": [response],
         }
     )
 
-# Define the graph
 workflow = StateGraph(AgentState)
-
-# Add nodes
 workflow.add_node("chat_node", chat_node)
-workflow.add_node("tool_node", ToolNode([generate_haiku]))
-
-# Add edges
+# This is required even though we don't have any backend tools to pass in.
+workflow.add_node("tool_node", ToolNode(tools=[]))
 workflow.set_entry_point("chat_node")
-workflow.add_edge(START, "chat_node")
-workflow.add_edge("chat_node", END)
-workflow.add_edge("tool_node", END)
-
-
-# Conditionally use a checkpointer based on the environment
-# Check for multiple indicators that we're running in LangGraph dev/API mode
-is_fast_api = os.environ.get("LANGGRAPH_FAST_API", "false").lower() == "true"
-
-# Compile the graph
-if is_fast_api:
-    # For CopilotKit and other contexts, use MemorySaver
-    from langgraph.checkpoint.memory import MemorySaver
-    memory = MemorySaver()
-    graph = workflow.compile(checkpointer=memory)
-else:
-    # When running in LangGraph API/dev, don't use a custom checkpointer
-    graph = workflow.compile()
 
+graph = workflow.compile()
\ No newline at end of file
diff --git a/typescript-sdk/integrations/langgraph/examples/typescript/src/agents/tool_based_generative_ui/agent.ts b/typescript-sdk/integrations/langgraph/examples/typescript/src/agents/tool_based_generative_ui/agent.ts
index 522b514a4..cfe8a66d4 100644
--- a/typescript-sdk/integrations/langgraph/examples/typescript/src/agents/tool_based_generative_ui/agent.ts
+++ b/typescript-sdk/integrations/langgraph/examples/typescript/src/agents/tool_based_generative_ui/agent.ts
@@ -7,56 +7,6 @@ import { SystemMessage } from "@langchain/core/messages";
 import { RunnableConfig } from "@langchain/core/runnables";
 import { Command, Annotation, MessagesAnnotation, StateGraph, END, START } from "@langchain/langgraph";
 
-// List of available images (modify path if needed)
-const IMAGE_LIST = [
-  "Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg",
-  "Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg",
-  "Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg",
-  "Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg",
-  "Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg",
-  "Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg",
-  "Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg",
-  "Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg",
-  "Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg",
-  "Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg"
-];
-
-// This tool generates a haiku on the server.
-// The tool call will be streamed to the frontend as it is being generated.
-const GENERATE_HAIKU_TOOL = {
-  type: "function",
-  function: {
-    name: "generate_haiku",
-    description: "Generate a haiku in Japanese and its English translation. Also select exactly 3 relevant images from the provided list based on the haiku's theme.",
-    parameters: {
-      type: "object",
-      properties: {
-        japanese: {
-          type: "array",
-          items: {
-            type: "string"
-          },
-          description: "An array of three lines of the haiku in Japanese"
-        },
-        english: {
-          type: "array",
-          items: {
-            type: "string"
-          },
-          description: "An array of three lines of the haiku in English"
-        },
-        image_names: {
-          type: "array",
-          items: {
-            type: "string"
-          },
-          description: "An array of EXACTLY THREE image filenames from the provided list that are most relevant to the haiku."
-        }
-      },
-      required: ["japanese", "english", "image_names"]
-    }
-  }
-};
 
 export const AgentStateAnnotation = Annotation.Root({
   tools: Annotation<any[]>(),
@@ -65,64 +15,35 @@ export const AgentStateAnnotation = Annotation.Root({
 export type AgentState = typeof AgentStateAnnotation.State;
 
 async function chatNode(state: AgentState, config?: RunnableConfig): Promise<Command> {
-  /**
-   * The main function handling chat and tool calls.
-   */
-  // Prepare the image list string for the prompt
-  const imageListStr = IMAGE_LIST.map(img => `- ${img}`).join("\n");
-
-  const systemPrompt = `
-        You assist the user in generating a haiku.
-        When generating a haiku using the 'generate_haiku' tool, you MUST also select exactly 3 image filenames from the following list that are most relevant to the haiku's content or theme. Return the filenames in the 'image_names' parameter.
-        
-        Available images:
-        ${imageListStr}
-        
-        Don't provide the relevant image names in your final response to the user.
-    `;
-
-  // Define the model
   const model = new ChatOpenAI({ model: "gpt-4o" });
-  
-  // Define config for the model
-  if (!config) {
-    config = { recursionLimit: 25 };
-  }
 
-  // Bind the tools to the model
   const modelWithTools = model.bindTools(
-    [GENERATE_HAIKU_TOOL],
-    {
-      // Disable parallel tool calls to avoid race conditions
-      parallel_tool_calls: false,
-    }
+    [
+      ...state.tools || []
+    ],
+    { parallel_tool_calls: false }
   );
 
-  // Run the model to generate a response
+  const systemMessage = new SystemMessage({
+     content: 'Help the user with writing Haikus. If the user asks for a haiku, use the generate_haiku tool to display the haiku to the user.'
+  });
+
   const response = await modelWithTools.invoke([
-    new SystemMessage({ content: systemPrompt }),
+    systemMessage,
     ...state.messages,
   ], config);
 
-  // Return Command to end with updated messages
   return new Command({
     goto: END,
     update: {
-      messages: [...state.messages, response]
+      messages: [response]
     }
   });
 }
 
-// Define the graph
 const workflow = new StateGraph<AgentState>(AgentStateAnnotation);
-
-// Add nodes
 workflow.addNode("chat_node", chatNode);
 
-// Add edges
-workflow.setEntryPoint("chat_node");
 workflow.addEdge(START, "chat_node");
-workflow.addEdge("chat_node", END);
 
-// Compile the graph
 export const toolBasedGenerativeUiGraph = workflow.compile();
\ No newline at end of file

From 7f04f23b5ac7ec8013790bc2bd2c1f59e4bedeac Mon Sep 17 00:00:00 2001
From: Max Korp <maxkorp@8bytealchemy.com>
Date: Mon, 25 Aug 2025 16:54:16 -0700
Subject: [PATCH 5/7] remove backend tool from mastra example

---
 .../src/mastra/agents/tool-based-generative-ui.ts | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/typescript-sdk/integrations/mastra/example/src/mastra/agents/tool-based-generative-ui.ts b/typescript-sdk/integrations/mastra/example/src/mastra/agents/tool-based-generative-ui.ts
index 45d54c392..20c231078 100644
--- a/typescript-sdk/integrations/mastra/example/src/mastra/agents/tool-based-generative-ui.ts
+++ b/typescript-sdk/integrations/mastra/example/src/mastra/agents/tool-based-generative-ui.ts
@@ -11,21 +11,6 @@ export const toolBasedGenerativeUIAgent = new Agent({
       You are a helpful haiku assistant that provides the user with a haiku.
 `,
   model: openai("gpt-4o-mini"),
-  tools: {
-    generate_haiku: createTool({
-      id: "generate_haiku",
-      description:
-        "Generate a haiku in Japanese and its English translation. Also select exactly 3 relevant images from the provided list based on the haiku's theme.",
-      inputSchema: z.object({
-        japanese: z.array(z.string()).describe("An array of three lines of the haiku in Japanese"),
-        english: z.array(z.string()).describe("An array of three lines of the haiku in English"),
-      }),
-      outputSchema: z.string(),
-      execute: async ({ context }) => {
-        return "Haiku generated.";
-      },
-    }),
-  },
   memory: new Memory({
     storage: new LibSQLStore({
       url: "file:../mastra.db", // path is relative to the .mastra/output directory

From c8b9cc7154360011b7a60722af93278ef1270db2 Mon Sep 17 00:00:00 2001
From: Max Korp <maxkorp@8bytealchemy.com>
Date: Mon, 25 Aug 2025 17:24:15 -0700
Subject: [PATCH 6/7] Be more explicit in agno test

---
 .../dojo/e2e/tests/agnoTests/agenticChatPage.spec.ts   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/typescript-sdk/apps/dojo/e2e/tests/agnoTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/agnoTests/agenticChatPage.spec.ts
index bd84be4b3..7f921d5cd 100644
--- a/typescript-sdk/apps/dojo/e2e/tests/agnoTests/agenticChatPage.spec.ts
+++ b/typescript-sdk/apps/dojo/e2e/tests/agnoTests/agenticChatPage.spec.ts
@@ -6,6 +6,8 @@ import {
 } from "../../test-isolation-helper";
 import { AgenticChatPage } from "../../pages/agnoPages/AgenticChatPage";
 
+const appleAsk = "What is the current stock price of AAPL? Please respond in the format of 'The current stock price of Apple Inc. (AAPL) is {{price}}'"
+
 test("[Agno] Agentic Chat sends and receives a greeting message", async ({
   page,
 }) => {
@@ -40,8 +42,8 @@ test("[Agno] Agentic Chat provides stock price information", async ({
     await chat.agentGreeting.waitFor({ state: "visible" });
 
     // Ask for AAPL stock price
-    await chat.sendMessage("What is the current stock price of AAPL");
-    await chat.assertUserMessageVisible("What is the current stock price of AAPL");
+    await chat.sendMessage(appleAsk);
+    await chat.assertUserMessageVisible(appleAsk);
     await waitForAIResponse(page);
 
     // Check if the response contains the expected stock price information
@@ -63,8 +65,8 @@ test("[Agno] Agentic Chat retains memory of previous questions", async ({
 
     // First question
     await chat.sendMessage("Hi");
-    await chat.sendMessage("What is the current stock price of AAPL");
-    await chat.assertUserMessageVisible("What is the current stock price of AAPL");
+    await chat.sendMessage(appleAsk);
+    await chat.assertUserMessageVisible(appleAsk);
     await waitForAIResponse(page);
     await chat.assertAgentReplyContains("The current stock price of Apple Inc. (AAPL) is");
 

From 2169365ffbdf9db5dd6ca7c7d69e81e337717a58 Mon Sep 17 00:00:00 2001
From: Max Korp <maxkorp@8bytealchemy.com>
Date: Tue, 26 Aug 2025 09:39:44 -0700
Subject: [PATCH 7/7] regen files

---
 typescript-sdk/apps/dojo/src/files.json | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/typescript-sdk/apps/dojo/src/files.json b/typescript-sdk/apps/dojo/src/files.json
index 69dcc6fd6..eb24814bc 100644
--- a/typescript-sdk/apps/dojo/src/files.json
+++ b/typescript-sdk/apps/dojo/src/files.json
@@ -158,7 +158,7 @@
   "pydantic-ai::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },
@@ -288,7 +288,7 @@
   "server-starter-all-features::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },
@@ -552,7 +552,7 @@
   "langgraph::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },
@@ -576,7 +576,7 @@
     },
     {
       "name": "agent.ts",
-      "content": "/**\n * An example demonstrating tool-based generative UI using LangGraph.\n */\n\nimport { ChatOpenAI } from \"@langchain/openai\";\nimport { SystemMessage } from \"@langchain/core/messages\";\nimport { RunnableConfig } from \"@langchain/core/runnables\";\nimport { Command, Annotation, MessagesAnnotation, StateGraph, END, START } from \"@langchain/langgraph\";\n\n\nexport const AgentStateAnnotation = Annotation.Root({\n  tools: Annotation<any[]>(),\n  ...MessagesAnnotation.spec,\n});\nexport type AgentState = typeof AgentStateAnnotation.State;\n\nasync function chatNode(state: AgentState, config?: RunnableConfig): Promise<Command> {\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  const model = new ChatOpenAI({ model: \"gpt-4o\" });\n\n  const modelWithTools = model.bindTools(\n    [\n      ...state.tools || []\n    ],\n    { parallel_tool_calls: false }\n  );\n\n  const systemMessage = new SystemMessage({\n     content: 'Help the user with writing Haikus. If the user asks for a haiku, use the generate_haiku tool to display the haiku to the user.'\n  });\n\n  const response = await modelWithTools.invoke([\n    systemMessage,\n    ...state.messages,\n  ], config);\n\n  return new Command({\n    goto: END,\n    update: {\n      messages: [response]\n    }\n  });\n}\n\nconst workflow = new StateGraph<AgentState>(AgentStateAnnotation);\nworkflow.addNode(\"chat_node\", chatNode);\n// This is required even though we don't have any backend tools to pass in.\n// workflow.addNode(\"tool_node\", ToolNode(tools=[]));\nworkflow.addEdge(START, \"chat_node\");\n\nexport const toolBasedGenerativeUiGraph = workflow.compile();",
+      "content": "/**\n * An example demonstrating tool-based generative UI using LangGraph.\n */\n\nimport { ChatOpenAI } from \"@langchain/openai\";\nimport { SystemMessage } from \"@langchain/core/messages\";\nimport { RunnableConfig } from \"@langchain/core/runnables\";\nimport { Command, Annotation, MessagesAnnotation, StateGraph, END, START } from \"@langchain/langgraph\";\n\n\nexport const AgentStateAnnotation = Annotation.Root({\n  tools: Annotation<any[]>(),\n  ...MessagesAnnotation.spec,\n});\nexport type AgentState = typeof AgentStateAnnotation.State;\n\nasync function chatNode(state: AgentState, config?: RunnableConfig): Promise<Command> {\n  const model = new ChatOpenAI({ model: \"gpt-4o\" });\n\n  const modelWithTools = model.bindTools(\n    [\n      ...state.tools || []\n    ],\n    { parallel_tool_calls: false }\n  );\n\n  const systemMessage = new SystemMessage({\n     content: 'Help the user with writing Haikus. If the user asks for a haiku, use the generate_haiku tool to display the haiku to the user.'\n  });\n\n  const response = await modelWithTools.invoke([\n    systemMessage,\n    ...state.messages,\n  ], config);\n\n  return new Command({\n    goto: END,\n    update: {\n      messages: [response]\n    }\n  });\n}\n\nconst workflow = new StateGraph<AgentState>(AgentStateAnnotation);\nworkflow.addNode(\"chat_node\", chatNode);\n\nworkflow.addEdge(START, \"chat_node\");\n\nexport const toolBasedGenerativeUiGraph = workflow.compile();",
       "language": "ts",
       "type": "file"
     }
@@ -741,7 +741,7 @@
   "langgraph-fastapi::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },
@@ -953,7 +953,7 @@
   "langgraph-typescript::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },
@@ -977,7 +977,7 @@
     },
     {
       "name": "agent.ts",
-      "content": "/**\n * An example demonstrating tool-based generative UI using LangGraph.\n */\n\nimport { ChatOpenAI } from \"@langchain/openai\";\nimport { SystemMessage } from \"@langchain/core/messages\";\nimport { RunnableConfig } from \"@langchain/core/runnables\";\nimport { Command, Annotation, MessagesAnnotation, StateGraph, END, START } from \"@langchain/langgraph\";\n\n\nexport const AgentStateAnnotation = Annotation.Root({\n  tools: Annotation<any[]>(),\n  ...MessagesAnnotation.spec,\n});\nexport type AgentState = typeof AgentStateAnnotation.State;\n\nasync function chatNode(state: AgentState, config?: RunnableConfig): Promise<Command> {\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  const model = new ChatOpenAI({ model: \"gpt-4o\" });\n\n  const modelWithTools = model.bindTools(\n    [\n      ...state.tools || []\n    ],\n    { parallel_tool_calls: false }\n  );\n\n  const systemMessage = new SystemMessage({\n     content: 'Help the user with writing Haikus. If the user asks for a haiku, use the generate_haiku tool to display the haiku to the user.'\n  });\n\n  const response = await modelWithTools.invoke([\n    systemMessage,\n    ...state.messages,\n  ], config);\n\n  return new Command({\n    goto: END,\n    update: {\n      messages: [response]\n    }\n  });\n}\n\nconst workflow = new StateGraph<AgentState>(AgentStateAnnotation);\nworkflow.addNode(\"chat_node\", chatNode);\n// This is required even though we don't have any backend tools to pass in.\n// workflow.addNode(\"tool_node\", ToolNode(tools=[]));\nworkflow.addEdge(START, \"chat_node\");\n\nexport const toolBasedGenerativeUiGraph = workflow.compile();",
+      "content": "/**\n * An example demonstrating tool-based generative UI using LangGraph.\n */\n\nimport { ChatOpenAI } from \"@langchain/openai\";\nimport { SystemMessage } from \"@langchain/core/messages\";\nimport { RunnableConfig } from \"@langchain/core/runnables\";\nimport { Command, Annotation, MessagesAnnotation, StateGraph, END, START } from \"@langchain/langgraph\";\n\n\nexport const AgentStateAnnotation = Annotation.Root({\n  tools: Annotation<any[]>(),\n  ...MessagesAnnotation.spec,\n});\nexport type AgentState = typeof AgentStateAnnotation.State;\n\nasync function chatNode(state: AgentState, config?: RunnableConfig): Promise<Command> {\n  const model = new ChatOpenAI({ model: \"gpt-4o\" });\n\n  const modelWithTools = model.bindTools(\n    [\n      ...state.tools || []\n    ],\n    { parallel_tool_calls: false }\n  );\n\n  const systemMessage = new SystemMessage({\n     content: 'Help the user with writing Haikus. If the user asks for a haiku, use the generate_haiku tool to display the haiku to the user.'\n  });\n\n  const response = await modelWithTools.invoke([\n    systemMessage,\n    ...state.messages,\n  ], config);\n\n  return new Command({\n    goto: END,\n    update: {\n      messages: [response]\n    }\n  });\n}\n\nconst workflow = new StateGraph<AgentState>(AgentStateAnnotation);\nworkflow.addNode(\"chat_node\", chatNode);\n\nworkflow.addEdge(START, \"chat_node\");\n\nexport const toolBasedGenerativeUiGraph = workflow.compile();",
       "language": "ts",
       "type": "file"
     }
@@ -1005,7 +1005,7 @@
   "agno::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },
@@ -1181,7 +1181,7 @@
   "crewai::tool_based_generative_ui": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as CopilotKitCSSProperties\n        }\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
+      "content": "\"use client\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotKitCSSProperties, CopilotSidebar, CopilotChat } from \"@copilotkit/react-ui\";\nimport { Dispatch, SetStateAction, useState, useEffect } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport React, { useMemo } from \"react\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\ninterface ToolBasedGenerativeUIProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\ninterface GenerateHaiku {\n  japanese: string[] | [],\n  english: string[] | [],\n  image_names: string[] | [],\n  selectedImage: string | null,\n}\n\ninterface HaikuCardProps {\n  generatedHaiku: GenerateHaiku | Partial<GenerateHaiku>\n  setHaikus: Dispatch<SetStateAction<GenerateHaiku[]>>\n  haikus: GenerateHaiku[]\n}\n\nexport default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n\n\n  const chatTitle = 'Haiku Generator'\n  const chatDescription = 'Ask me to create haikus'\n  const initialLabel = 'I\\'m a haiku generator 👋. How can I help you?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      agent=\"tool_based_generative_ui\"\n    >\n      <div\n        className={`${isMobile ? 'h-screen' : 'min-h-full flex'} w-full relative overflow-hidden`}\n      >\n        <Haiku />\n\n        {/* Desktop Sidebar */}\n        {!isMobile && (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n\n        {/* Mobile Pull-Up Chat */}\n        {isMobile && <MobileChat chatTitle={chatTitle} chatDescription={chatDescription} initialLabel={initialLabel} />}\n      </div>\n    </CopilotKit>\n  );\n}\n\nfunction MobileChat({ chatTitle, chatDescription, initialLabel }: { chatTitle: string, chatDescription: string, initialLabel: string }) {\n  const defaultChatHeight = 50\n\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  return (\n    <>\n      {/* Chat Toggle Button */}\n      <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n        <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n        <div\n          className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n          onClick={() => {\n            if (!isChatOpen) {\n              setChatHeight(defaultChatHeight); // Reset to good default when opening\n            }\n            setIsChatOpen(!isChatOpen);\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div>\n              <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n              <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n            </div>\n          </div>\n          <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n            <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      {/* Pull-Up Chat Container */}\n      <div\n        className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${isChatOpen ? 'translate-y-0' : 'translate-y-full'\n          } ${isDragging ? 'transition-none' : ''}`}\n        style={{\n          height: `${chatHeight}vh`,\n          paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n        }}\n      >\n        {/* Drag Handle Bar */}\n        <div\n          className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n          onMouseDown={handleDragStart}\n        >\n          <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n        </div>\n\n        {/* Chat Header */}\n        <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n            </div>\n            <button\n              onClick={() => setIsChatOpen(false)}\n              className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n            >\n              <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Chat Content - Flexible container for messages and input */}\n        <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n          <CopilotChat\n            className=\"h-full flex flex-col\"\n            labels={{\n              initial: initialLabel,\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Backdrop */}\n      {isChatOpen && (\n        <div\n          className=\"fixed inset-0 z-30\"\n          onClick={() => setIsChatOpen(false)}\n        />\n      )}\n    </>\n  )\n}\n\nconst VALID_IMAGE_NAMES = [\n  \"Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg\",\n  \"Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg\",\n  \"Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg\",\n  \"Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg\",\n  \"Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg\",\n  \"Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg\",\n  \"Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg\",\n  \"Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg\",\n  \"Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg\",\n  \"Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg\"\n];\n\nfunction getRandomImage(): string {\n  return VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];\n}\n\nconst validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {\n  if (!rawNames || rawNames.length !== 3) {\n    return null;\n  }\n\n  const correctedNames: string[] = [];\n  const usedValidNames = new Set<string>();\n\n  for (const name of rawNames) {\n    if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {\n      correctedNames.push(name);\n      usedValidNames.add(name);\n      if (correctedNames.length === 3) break;\n    }\n  }\n\n  while (correctedNames.length < 3) {\n    const nextImage = getRandomImage();\n    if (!usedValidNames.has(nextImage)) {\n      correctedNames.push(nextImage);\n      usedValidNames.add(nextImage);\n    }\n  }\n\n  return correctedNames.slice(0, 3);\n};\n\nfunction HaikuCard({ generatedHaiku, setHaikus, haikus }: HaikuCardProps) {\n  return (\n    <div\n      data-testid=\"haiku-card\"\n      className=\"suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100\">\n      <div className=\"mb-4 pb-4\">\n        {generatedHaiku?.japanese?.map((line, index) => (\n          <div className=\"flex items-center gap-3 mb-2\" data-testid=\"haiku-line\" key={index}>\n            <p className=\"text-lg font-bold\">{line}</p>\n            <p className=\"text-sm font-light\">\n              {generatedHaiku.english?.[index]}\n            </p>\n          </div>\n        ))}\n        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (\n          <div className=\"mt-3 flex gap-2 justify-between w-full suggestion-image-container\">\n            {(() => {\n              const firstLine = generatedHaiku?.japanese?.[0];\n              if (!firstLine) return null;\n              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);\n              const haiku = haikus[haikuIndex];\n              if (!haiku?.image_names) return null;\n\n              return haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  key={haikus.length + \"_\" + imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName}\n                  tabIndex={0}\n                  className={`${haiku.selectedImage === imageName ? \"suggestion-card-image-focus\" : \"suggestion-card-image\"}`}\n                  onClick={() => {\n                    setHaikus(prevHaikus => {\n                      const newHaikus = prevHaikus.map((h, idx) => {\n                        if (idx === haikuIndex) {\n                          return {\n                            ...h,\n                            selectedImage: imageName\n                          };\n                        }\n                        return h;\n                      });\n                      return newHaikus;\n                    });\n                  }}\n                />\n              ));\n            })()}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\ninterface Haiku {\n  japanese: string[];\n  english: string[];\n  image_names: string[];\n  selectedImage: string | null;\n}\n\nfunction Haiku() {\n  const [haikus, setHaikus] = useState<Haiku[]>([{\n    japanese: [\"仮の句よ\", \"まっさらながら\", \"花を呼ぶ\"],\n    english: [\n      \"A placeholder verse—\",\n      \"even in a blank canvas,\",\n      \"it beckons flowers.\",\n    ],\n    image_names: [],\n    selectedImage: null,\n  }])\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isJustApplied, setIsJustApplied] = useState(false);\n\n  useCopilotAction({\n    name: \"generate_haiku\",\n    parameters: [\n      {\n        name: \"japanese\",\n        type: \"string[]\",\n      },\n      {\n        name: \"english\",\n        type: \"string[]\",\n      },\n      {\n        name: \"image_names\",\n        type: \"string[]\",\n        description: `Names of 3 relevant images selected from the following: \\n  -${VALID_IMAGE_NAMES.join('\\n  -')}`,\n      },\n    ],\n    followUp: false,\n    handler: async ({ japanese, english, image_names }: { japanese: string[], english: string[], image_names: string[] }) => {\n      const finalCorrectedImages = validateAndCorrectImageNames(image_names);\n      const newHaiku = {\n        japanese: japanese || [],\n        english: english || [],\n        image_names: finalCorrectedImages || [],\n        selectedImage: finalCorrectedImages?.[0] || null,\n      };\n      setHaikus(prev => [...prev, newHaiku].filter(h => h.english[0] !== \"A placeholder verse—\"));\n      setActiveIndex(haikus.length - 1);\n      setIsJustApplied(true);\n      setTimeout(() => setIsJustApplied(false), 600);\n      return \"Haiku generated.\";\n    },\n    render: ({ args: generatedHaiku }: { args: Partial<GenerateHaiku> }) => {\n      return (\n        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />\n      );\n    },\n  }, [haikus]);\n\n  const { isMobile } = useMobileView();\n\n  return (\n    <div className=\"flex h-full w-full\">\n      <Thumbnails haikus={haikus} activeIndex={activeIndex} setActiveIndex={setActiveIndex} isMobile={isMobile} />\n\n      {/* Main Display */}\n      <div className={`flex-1 flex items-center justify-center h-full ${isMobile\n        ? 'px-6'\n        : 'p-8'\n        }`} style={{ marginLeft: isMobile ? '0' : '-48px' }}>\n        <div className=\"haiku-stack w-full max-w-lg\">\n          {haikus.map((haiku, index) => (\n            (haikus.length == 1 || index == activeIndex) && (\n\n              <div\n                key={index}\n                data-testid=\"main-haiku-display\"\n                className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}\n                style={{\n                  zIndex: index === activeIndex ? haikus.length : index,\n                  transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,\n                }}\n              >\n                {haiku.japanese.map((line, lineIndex) => (\n                  <div\n                    data-testid=\"main-haiku-line\"\n                    className={`flex items-start mb-4 haiku-line ${isMobile\n                      ? 'flex-col gap-1'\n                      : 'gap-4'\n                      }`}\n                    key={lineIndex}\n                    style={{ animationDelay: `${lineIndex * 0.1}s` }}\n                  >\n                    <p className={`font-bold text-gray-600 w-auto ${isMobile\n                      ? 'text-2xl leading-tight'\n                      : 'text-4xl'\n                      }`}>\n                      {line}\n                    </p>\n                    <p className={`font-light text-gray-500 w-auto ${isMobile\n                      ? 'text-sm ml-2'\n                      : 'text-base'\n                      }`}>\n                      {haiku.english?.[lineIndex]}\n                    </p>\n                  </div>\n                ))}\n                {haiku.image_names && haiku.image_names.length === 3 && (\n                  <div className={`flex justify-center ${isMobile\n                    ? 'mt-4 gap-2 flex-wrap'\n                    : 'mt-6 gap-4'\n                    }`}>\n                    {haiku.image_names.map((imageName, imgIndex) => (\n                      <img\n                        key={imageName}\n                        src={`/images/${imageName}`}\n                        alt={imageName || \"\"}\n                        style={{\n                          width: isMobile ? '90px' : '130px',\n                          height: isMobile ? '90px' : '130px',\n                          objectFit: 'cover',\n                          marginTop: 0,\n                        }}\n                        className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus ` : `haiku-card-image`}\n                        onClick={() => setHaikus((prevHaikus) => {\n                          return prevHaikus.map((h, idx) => {\n                            if (idx === index) {\n                              return { ...h, selectedImage: imageName }\n                            } else {\n                              return { ...h }\n                            }\n                          })\n                        })}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            )\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Thumbnails({ haikus, activeIndex, setActiveIndex, isMobile }: { haikus: Haiku[], activeIndex: number, setActiveIndex: (index: number) => void, isMobile: boolean }) {\n  if (haikus.length == 0 || isMobile) { return null }\n  return (\n    <div className=\"w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden\">\n      {haikus.map((haiku, index) => (\n        <div\n          key={index}\n          data-testid=\"thumbnail-haiku\"\n          className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}\n          style={{\n            width: '80px',\n            transform: 'scale(0.2)',\n            transformOrigin: 'top left',\n            marginBottom: '-340px',\n            opacity: index === activeIndex ? 1 : 0.5,\n            transition: 'opacity 0.2s',\n          }}\n          onClick={() => setActiveIndex(index)}\n        >\n          {haiku.japanese.map((line, lineIndex) => (\n            <div\n              className=\"flex items-start gap-2 mb-2 haiku-line\"\n              key={lineIndex}\n            >\n              <p className=\"text-2xl font-bold text-gray-600 w-auto\">{line}</p>\n              <p className=\"text-xs font-light text-gray-500 w-auto\">{haiku.english?.[lineIndex]}</p>\n            </div>\n          ))}\n          {haiku.image_names && haiku.image_names.length === 3 && (\n            <div className=\"mt-2 flex gap-2 justify-center\">\n              {haiku.image_names.map((imageName, imgIndex) => (\n                <img\n                  style={{\n                    width: '110px',\n                    height: '110px',\n                    objectFit: 'cover',\n                  }}\n                  key={imageName}\n                  src={`/images/${imageName}`}\n                  alt={imageName || \"\"}\n                  className=\"haiku-card-image w-12 h-12 object-cover\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n\n}",
       "language": "typescript",
       "type": "file"
     },