agent-starter-pack 0.5.3__py3-none-any.whl → 0.6.1__py3-none-any.whl

src/frontends/adk_gemini_fullstack/frontend/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@langchain/core": "^0.3.55",
+    "@langchain/langgraph-sdk": "^0.0.74",
+    "@radix-ui/react-scroll-area": "^1.2.8",
+    "@radix-ui/react-select": "^2.2.4",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.6",
+    "@tailwindcss/vite": "^4.1.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.508.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^9.0.3",
+    "react-router-dom": "^7.5.3",
+    "tailwind-merge": "^3.2.0",
+    "tailwindcss": "^4.1.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "@types/node": "^22.15.17",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
+    "@vitejs/plugin-react-swc": "^3.9.0",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "tw-animate-css": "^1.2.9",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.26.1",
+    "vite": "^6.3.4"
+  }
+}

src/frontends/adk_gemini_fullstack/frontend/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/frontends/adk_gemini_fullstack/frontend/src/App.tsx

@@ -0,0 +1,565 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { v4 as uuidv4 } from 'uuid';
+import { WelcomeScreen } from "@/components/WelcomeScreen";
+import { ChatMessagesView } from "@/components/ChatMessagesView";
+
+// Update DisplayData to be a string type
+type DisplayData = string | null;
+interface MessageWithAgent {
+  type: "human" | "ai";
+  content: string;
+  id: string;
+  agent?: string;
+  finalReportWithCitations?: boolean;
+}
+
+interface AgentMessage {
+  parts: { text: string }[];
+  role: string;
+}
+
+interface AgentResponse {
+  content: AgentMessage;
+  usageMetadata: {
+    candidatesTokenCount: number;
+    promptTokenCount: number;
+    totalTokenCount: number;
+  };
+  author: string;
+  actions: {
+    stateDelta: {
+      research_plan?: string;
+      final_report_with_citations?: boolean;
+    };
+  };
+}
+
+interface ProcessedEvent {
+  title: string;
+  data: any;
+}
+
+export default function App() {
+  const [userId, setUserId] = useState<string | null>(null);
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [appName, setAppName] = useState<string | null>(null);
+  const [messages, setMessages] = useState<MessageWithAgent[]>([]);
+  const [displayData, setDisplayData] = useState<DisplayData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [messageEvents, setMessageEvents] = useState<Map<string, ProcessedEvent[]>>(new Map());
+  const [websiteCount, setWebsiteCount] = useState<number>(0);
+  const [isBackendReady, setIsBackendReady] = useState(false);
+  const [isCheckingBackend, setIsCheckingBackend] = useState(true);
+  const currentAgentRef = useRef('');
+  const accumulatedTextRef = useRef("");
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+
+  const retryWithBackoff = async (
+    fn: () => Promise<any>,
+    maxRetries: number = 10,
+    maxDuration: number = 120000 // 2 minutes
+  ): Promise<any> => {
+    const startTime = Date.now();
+    let lastError: Error;
+    
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+      if (Date.now() - startTime > maxDuration) {
+        throw new Error(`Retry timeout after ${maxDuration}ms`);
+      }
+      
+      try {
+        return await fn();
+      } catch (error) {
+        lastError = error as Error;
+        const delay = Math.min(1000 * Math.pow(2, attempt), 5000); // Exponential backoff, max 5s
+        console.log(`Attempt ${attempt + 1} failed, retrying in ${delay}ms...`, error);
+        await new Promise(resolve => setTimeout(resolve, delay));
+      }
+    }
+    
+    throw lastError!;
+  };
+
+  const createSession = async (): Promise<{userId: string, sessionId: string, appName: string}> => {
+    const generatedSessionId = uuidv4();
+    const response = await fetch(`/api/apps/app/users/u_999/sessions/${generatedSessionId}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    
+    if (!response.ok) {
+      throw new Error(`Failed to create session: ${response.status} ${response.statusText}`);
+    }
+    
+    const data = await response.json();
+    return {
+      userId: data.userId,
+      sessionId: data.id,
+      appName: data.appName
+    };
+  };
+
+  const checkBackendHealth = async (): Promise<boolean> => {
+    try {
+      // Use the docs endpoint or root endpoint to check if backend is ready
+      const response = await fetch("/api/docs", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json"
+        }
+      });
+      return response.ok;
+    } catch (error) {
+      console.log("Backend not ready yet:", error);
+      return false;
+    }
+  };
+
+  // Function to extract text and metadata from SSE data
+  const extractDataFromSSE = (data: string) => {
+    try {
+      const parsed = JSON.parse(data);
+      console.log('[SSE PARSED EVENT]:', JSON.stringify(parsed, null, 2)); // DEBUG: Log parsed event
+
+      let textParts: string[] = [];
+      let agent = '';
+      let finalReportWithCitations = undefined;
+      let functionCall = null;
+      let functionResponse = null;
+      let sources = null;
+
+      // Check if content.parts exists and has text
+      if (parsed.content && parsed.content.parts) {
+        textParts = parsed.content.parts
+          .filter((part: any) => part.text)
+          .map((part: any) => part.text);
+        
+        // Check for function calls
+        const functionCallPart = parsed.content.parts.find((part: any) => part.functionCall);
+        if (functionCallPart) {
+          functionCall = functionCallPart.functionCall;
+        }
+        
+        // Check for function responses
+        const functionResponsePart = parsed.content.parts.find((part: any) => part.functionResponse);
+        if (functionResponsePart) {
+          functionResponse = functionResponsePart.functionResponse;
+        }
+      }
+
+      // Extract agent information
+      if (parsed.author) {
+        agent = parsed.author;
+        console.log('[SSE EXTRACT] Agent:', agent); // DEBUG: Log agent
+      }
+
+      if (
+        parsed.actions &&
+        parsed.actions.stateDelta &&
+        parsed.actions.stateDelta.final_report_with_citations
+      ) {
+        finalReportWithCitations = parsed.actions.stateDelta.final_report_with_citations;
+      }
+
+      // Extract website count from research agents
+      let sourceCount = 0;
+      if ((parsed.author === 'section_researcher' || parsed.author === 'enhanced_search_executor')) {
+        console.log('[SSE EXTRACT] Relevant agent for source count:', parsed.author); // DEBUG
+        if (parsed.actions?.stateDelta?.url_to_short_id) {
+          console.log('[SSE EXTRACT] url_to_short_id found:', parsed.actions.stateDelta.url_to_short_id); // DEBUG
+          sourceCount = Object.keys(parsed.actions.stateDelta.url_to_short_id).length;
+          console.log('[SSE EXTRACT] Calculated sourceCount:', sourceCount); // DEBUG
+        } else {
+          console.log('[SSE EXTRACT] url_to_short_id NOT found for agent:', parsed.author); // DEBUG
+        }
+      }
+
+      // Extract sources if available
+      if (parsed.actions?.stateDelta?.sources) {
+        sources = parsed.actions.stateDelta.sources;
+        console.log('[SSE EXTRACT] Sources found:', sources); // DEBUG
+      }
+
+
+      return { textParts, agent, finalReportWithCitations, functionCall, functionResponse, sourceCount, sources };
+    } catch (error) {
+      // Log the error and a truncated version of the problematic data for easier debugging.
+      const truncatedData = data.length > 200 ? data.substring(0, 200) + "..." : data;
+      console.error('Error parsing SSE data. Raw data (truncated): "', truncatedData, '". Error details:', error);
+      return { textParts: [], agent: '', finalReportWithCitations: undefined, functionCall: null, functionResponse: null, sourceCount: 0, sources: null };
+    }
+  };
+
+  // Define getEventTitle here or ensure it's in scope from where it's used
+  const getEventTitle = (agentName: string): string => {
+    switch (agentName) {
+      case "plan_generator":
+        return "Planning Research Strategy";
+      case "section_planner":
+        return "Structuring Report Outline";
+      case "section_researcher":
+        return "Initial Web Research";
+      case "research_evaluator":
+        return "Evaluating Research Quality";
+      case "EscalationChecker":
+        return "Quality Assessment";
+      case "enhanced_search_executor":
+        return "Enhanced Web Research";
+      case "research_pipeline":
+        return "Executing Research Pipeline";
+      case "iterative_refinement_loop":
+        return "Refining Research";
+      case "interactive_planner_agent":
+      case "root_agent":
+        return "Interactive Planning";
+      default:
+        return `Processing (${agentName || 'Unknown Agent'})`;
+    }
+  };
+
+  const processSseEventData = (jsonData: string, aiMessageId: string) => {
+    const { textParts, agent, finalReportWithCitations, functionCall, functionResponse, sourceCount, sources } = extractDataFromSSE(jsonData);
+
+    if (sourceCount > 0) {
+      console.log('[SSE HANDLER] Updating websiteCount. Current sourceCount:', sourceCount);
+      setWebsiteCount(prev => Math.max(prev, sourceCount));
+    }
+
+    if (agent && agent !== currentAgentRef.current) {
+      currentAgentRef.current = agent;
+    }
+
+    if (functionCall) {
+      const functionCallTitle = `Function Call: ${functionCall.name}`;
+      console.log('[SSE HANDLER] Adding Function Call timeline event:', functionCallTitle);
+      setMessageEvents(prev => new Map(prev).set(aiMessageId, [...(prev.get(aiMessageId) || []), {
+        title: functionCallTitle,
+        data: { type: 'functionCall', name: functionCall.name, args: functionCall.args, id: functionCall.id }
+      }]));
+    }
+
+    if (functionResponse) {
+      const functionResponseTitle = `Function Response: ${functionResponse.name}`;
+      console.log('[SSE HANDLER] Adding Function Response timeline event:', functionResponseTitle);
+      setMessageEvents(prev => new Map(prev).set(aiMessageId, [...(prev.get(aiMessageId) || []), {
+        title: functionResponseTitle,
+        data: { type: 'functionResponse', name: functionResponse.name, response: functionResponse.response, id: functionResponse.id }
+      }]));
+    }
+
+    if (textParts.length > 0 && agent !== "report_composer_with_citations") {
+      if (agent !== "interactive_planner_agent") {
+        const eventTitle = getEventTitle(agent);
+        console.log('[SSE HANDLER] Adding Text timeline event for agent:', agent, 'Title:', eventTitle, 'Data:', textParts.join(" "));
+        setMessageEvents(prev => new Map(prev).set(aiMessageId, [...(prev.get(aiMessageId) || []), {
+          title: eventTitle,
+          data: { type: 'text', content: textParts.join(" ") }
+        }]));
+      } else { // interactive_planner_agent text updates the main AI message
+        for (const text of textParts) {
+          accumulatedTextRef.current += text + " ";
+          setMessages(prev => prev.map(msg =>
+            msg.id === aiMessageId ? { ...msg, content: accumulatedTextRef.current.trim(), agent: currentAgentRef.current || msg.agent } : msg
+          ));
+          setDisplayData(accumulatedTextRef.current.trim());
+        }
+      }
+    }
+
+    if (sources) {
+      console.log('[SSE HANDLER] Adding Retrieved Sources timeline event:', sources);
+      setMessageEvents(prev => new Map(prev).set(aiMessageId, [...(prev.get(aiMessageId) || []), {
+        title: "Retrieved Sources", data: { type: 'sources', content: sources }
+      }]));
+    }
+
+    if (agent === "report_composer_with_citations" && finalReportWithCitations) {
+      const finalReportMessageId = Date.now().toString() + "_final";
+      setMessages(prev => [...prev, { type: "ai", content: finalReportWithCitations as string, id: finalReportMessageId, agent: currentAgentRef.current, finalReportWithCitations: true }]);
+      setDisplayData(finalReportWithCitations as string);
+    }
+  };
+
+  const handleSubmit = useCallback(async (query: string, model: string, effort: string) => {
+    if (!query.trim()) return;
+
+    setIsLoading(true);
+    try {
+      // Create session if it doesn't exist
+      let currentUserId = userId;
+      let currentSessionId = sessionId;
+      let currentAppName = appName;
+      
+      if (!currentSessionId || !currentUserId || !currentAppName) {
+        console.log('Creating new session...');
+        const sessionData = await retryWithBackoff(createSession);
+        currentUserId = sessionData.userId;
+        currentSessionId = sessionData.sessionId;
+        currentAppName = sessionData.appName;
+        
+        setUserId(currentUserId);
+        setSessionId(currentSessionId);
+        setAppName(currentAppName);
+        console.log('Session created successfully:', { currentUserId, currentSessionId, currentAppName });
+      }
+
+      // Add user message to chat
+      const userMessageId = Date.now().toString();
+      setMessages(prev => [...prev, { type: "human", content: query, id: userMessageId }]);
+
+      // Create AI message placeholder
+      const aiMessageId = Date.now().toString() + "_ai";
+      currentAgentRef.current = ''; // Reset current agent
+      accumulatedTextRef.current = ''; // Reset accumulated text
+
+      setMessages(prev => [...prev, {
+        type: "ai",
+        content: "",
+        id: aiMessageId,
+        agent: '',
+      }]);
+
+      // Send the message with retry logic
+      const sendMessage = async () => {
+        const response = await fetch("/api/run_sse", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            appName: currentAppName,
+            userId: currentUserId,
+            sessionId: currentSessionId,
+            newMessage: {
+              parts: [{ text: query }],
+              role: "user"
+            },
+            streaming: false
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error(`Failed to send message: ${response.status} ${response.statusText}`);
+        }
+        
+        return response;
+      };
+
+      const response = await retryWithBackoff(sendMessage);
+
+      // Handle SSE streaming
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+      let lineBuffer = ""; 
+      let eventDataBuffer = "";
+
+      if (reader) {
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+          const { done, value } = await reader.read();
+
+          if (value) {
+            lineBuffer += decoder.decode(value, { stream: true });
+          }
+          
+          let eolIndex;
+          // Process all complete lines in the buffer, or the remaining buffer if 'done'
+          while ((eolIndex = lineBuffer.indexOf('\n')) >= 0 || (done && lineBuffer.length > 0)) {
+            let line: string;
+            if (eolIndex >= 0) {
+              line = lineBuffer.substring(0, eolIndex);
+              lineBuffer = lineBuffer.substring(eolIndex + 1);
+            } else { // Only if done and lineBuffer has content without a trailing newline
+              line = lineBuffer;
+              lineBuffer = "";
+            }
+
+            if (line.trim() === "") { // Empty line: dispatch event
+              if (eventDataBuffer.length > 0) {
+                // Remove trailing newline before parsing
+                const jsonDataToParse = eventDataBuffer.endsWith('\n') ? eventDataBuffer.slice(0, -1) : eventDataBuffer;
+                console.log('[SSE DISPATCH EVENT]:', jsonDataToParse.substring(0, 200) + "..."); // DEBUG
+                processSseEventData(jsonDataToParse, aiMessageId);
+                eventDataBuffer = ""; // Reset for next event
+              }
+            } else if (line.startsWith('data:')) {
+              eventDataBuffer += line.substring(5).trimStart() + '\n'; // Add newline as per spec for multi-line data
+            } else if (line.startsWith(':')) {
+              // Comment line, ignore
+            } // Other SSE fields (event, id, retry) can be handled here if needed
+          }
+
+          if (done) {
+            // If the loop exited due to 'done', and there's still data in eventDataBuffer
+            // (e.g., stream ended after data lines but before an empty line delimiter)
+            if (eventDataBuffer.length > 0) {
+              const jsonDataToParse = eventDataBuffer.endsWith('\n') ? eventDataBuffer.slice(0, -1) : eventDataBuffer;
+              console.log('[SSE DISPATCH FINAL EVENT]:', jsonDataToParse.substring(0,200) + "..."); // DEBUG
+              processSseEventData(jsonDataToParse, aiMessageId);
+              eventDataBuffer = ""; // Clear buffer
+            }
+            break; // Exit the while(true) loop
+          }
+        }
+      }
+
+      setIsLoading(false);
+
+    } catch (error) {
+      console.error("Error:", error);
+      // Update the AI message placeholder with an error message
+      const aiMessageId = Date.now().toString() + "_ai_error";
+      setMessages(prev => [...prev, { 
+        type: "ai", 
+        content: `Sorry, there was an error processing your request: ${error instanceof Error ? error.message : 'Unknown error'}`, 
+        id: aiMessageId 
+      }]);
+      setIsLoading(false);
+    }
+  }, [processSseEventData]);
+
+  useEffect(() => {
+    if (scrollAreaRef.current) {
+      const scrollViewport = scrollAreaRef.current.querySelector(
+        "[data-radix-scroll-area-viewport]"
+      );
+      if (scrollViewport) {
+        scrollViewport.scrollTop = scrollViewport.scrollHeight;
+      }
+    }
+  }, [messages]);
+
+  useEffect(() => {
+    const checkBackend = async () => {
+      setIsCheckingBackend(true);
+      
+      // Check if backend is ready with retry logic
+      const maxAttempts = 60; // 2 minutes with 2-second intervals
+      let attempts = 0;
+      
+      while (attempts < maxAttempts) {
+        const isReady = await checkBackendHealth();
+        if (isReady) {
+          setIsBackendReady(true);
+          setIsCheckingBackend(false);
+          return;
+        }
+        
+        attempts++;
+        await new Promise(resolve => setTimeout(resolve, 2000)); // Wait 2 seconds between checks
+      }
+      
+      // If we get here, backend didn't come up in time
+      setIsCheckingBackend(false);
+      console.error("Backend failed to start within 2 minutes");
+    };
+    
+    checkBackend();
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    setMessages([]);
+    setDisplayData(null);
+    setMessageEvents(new Map());
+    setWebsiteCount(0);
+    window.location.reload();
+  }, []);
+
+  // Scroll to bottom when messages update
+  const scrollToBottom = useCallback(() => {
+    if (scrollAreaRef.current) {
+      const scrollViewport = scrollAreaRef.current.querySelector(
+        "[data-radix-scroll-area-viewport]"
+      );
+      if (scrollViewport) {
+        scrollViewport.scrollTop = scrollViewport.scrollHeight;
+      }
+    }
+  }, []);
+
+  const BackendLoadingScreen = () => (
+    <div className="flex-1 flex flex-col items-center justify-center p-4 overflow-hidden relative">
+      <div className="w-full max-w-2xl z-10
+                      bg-neutral-900/50 backdrop-blur-md 
+                      p-8 rounded-2xl border border-neutral-700 
+                      shadow-2xl shadow-black/60">
+        
+        <div className="text-center space-y-6">
+          <h1 className="text-4xl font-bold text-white flex items-center justify-center gap-3">
+            ✨ Gemini FullStack - ADK 🚀
+          </h1>
+          
+          <div className="flex flex-col items-center space-y-4">
+            {/* Spinning animation */}
+            <div className="relative">
+              <div className="w-16 h-16 border-4 border-neutral-600 border-t-blue-500 rounded-full animate-spin"></div>
+              <div className="absolute inset-0 w-16 h-16 border-4 border-transparent border-r-purple-500 rounded-full animate-spin" style={{animationDirection: 'reverse', animationDuration: '1.5s'}}></div>
+            </div>
+            
+            <div className="space-y-2">
+              <p className="text-xl text-neutral-300">
+                Waiting for backend to be ready...
+              </p>
+              <p className="text-sm text-neutral-400">
+                This may take a moment on first startup
+              </p>
+            </div>
+            
+            {/* Animated dots */}
+            <div className="flex space-x-1">
+              <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{animationDelay: '0ms'}}></div>
+              <div className="w-2 h-2 bg-purple-500 rounded-full animate-bounce" style={{animationDelay: '150ms'}}></div>
+              <div className="w-2 h-2 bg-pink-500 rounded-full animate-bounce" style={{animationDelay: '300ms'}}></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex h-screen bg-neutral-800 text-neutral-100 font-sans antialiased">
+      <main className="flex-1 flex flex-col overflow-hidden w-full">
+        <div className={`flex-1 overflow-y-auto ${(messages.length === 0 || isCheckingBackend) ? "flex" : ""}`}>
+          {isCheckingBackend ? (
+            <BackendLoadingScreen />
+          ) : !isBackendReady ? (
+            <div className="flex-1 flex flex-col items-center justify-center p-4">
+              <div className="text-center space-y-4">
+                <h2 className="text-2xl font-bold text-red-400">Backend Unavailable</h2>
+                <p className="text-neutral-300">
+                  Unable to connect to backend services at localhost:8000
+                </p>
+                <button 
+                  onClick={() => window.location.reload()} 
+                  className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+                >
+                  Retry
+                </button>
+              </div>
+            </div>
+          ) : messages.length === 0 ? (
+            <WelcomeScreen
+              handleSubmit={handleSubmit}
+              isLoading={isLoading}
+              onCancel={handleCancel}
+            />
+          ) : (
+            <ChatMessagesView
+              messages={messages}
+              isLoading={isLoading}
+              scrollAreaRef={scrollAreaRef}
+              onSubmit={handleSubmit}
+              onCancel={handleCancel}
+              displayData={displayData}
+              messageEvents={messageEvents}
+              websiteCount={websiteCount}
+            />
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}