agent-starter-pack 0.11.2__py3-none-any.whl → 0.12.0__py3-none-any.whl

src/frontends/adk_gemini_fullstack/frontend/src/components/ActivityTimeline.tsx

@@ -1,244 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-} from "@/components/ui/card";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-  Loader2,
-  Activity,
-  Info,
-  Search,
-  TextSearch,
-  Brain,
-  Pen,
-  ChevronDown,
-  ChevronUp,
-  Link,
-} from "lucide-react";
-import { useEffect, useState } from "react";
-import ReactMarkdown from "react-markdown";
-
-export interface ProcessedEvent {
-  title: string;
-  data: any;
-}
-
-interface ActivityTimelineProps {
-  processedEvents: ProcessedEvent[];
-  isLoading: boolean;
-  websiteCount: number;
-}
-
-export function ActivityTimeline({
-  processedEvents,
-  isLoading,
-  websiteCount,
-}: ActivityTimelineProps) {
-  const [isTimelineCollapsed, setIsTimelineCollapsed] =
-    useState<boolean>(false);
-
-  const formatEventData = (data: any): string => {
-    // Handle new structured data types
-    if (typeof data === "object" && data !== null && data.type) {
-      switch (data.type) {
-        case 'functionCall':
-          return `Calling function: ${data.name}\nArguments: ${JSON.stringify(data.args, null, 2)}`;
-        case 'functionResponse':
-          return `Function ${data.name} response:\n${JSON.stringify(data.response, null, 2)}`;
-        case 'text':
-          return data.content;
-        case 'sources':
-          const sources = data.content as Record<string, { title: string; url: string }>;
-          if (Object.keys(sources).length === 0) {
-            return "No sources found.";
-          }
-          return Object.values(sources)
-            .map(source => `[${source.title || 'Untitled Source'}](${source.url})`).join(', ');
-        default:
-          return JSON.stringify(data, null, 2);
-      }
-    }
-    
-    // Existing logic for backward compatibility
-    if (typeof data === "string") {
-      // Try to parse as JSON first
-      try {
-        const parsed = JSON.parse(data);
-        return JSON.stringify(parsed, null, 2);
-      } catch {
-        // If not JSON, return as string (could be markdown)
-        return data;
-      }
-    } else if (Array.isArray(data)) {
-      return data.join(", ");
-    } else if (typeof data === "object" && data !== null) {
-      return JSON.stringify(data, null, 2);
-    }
-    return String(data);
-  };
-
-  const isJsonData = (data: any): boolean => {
-    // Handle new structured data types
-    if (typeof data === "object" && data !== null && data.type) {
-      if (data.type === 'sources') {
-        return false; // Let ReactMarkdown handle this
-      }
-      return data.type === 'functionCall' || data.type === 'functionResponse';
-    }
-    
-    // Existing logic
-    if (typeof data === "string") {
-      try {
-        JSON.parse(data);
-        return true;
-      } catch {
-        return false;
-      }
-    }
-    return typeof data === "object" && data !== null;
-  };
-  const getEventIcon = (title: string, index: number) => {
-    if (index === 0 && isLoading && processedEvents.length === 0) {
-      return <Loader2 className="h-4 w-4 text-neutral-400 animate-spin" />;
-    }
-    if (title.toLowerCase().includes("function call")) {
-      return <Activity className="h-4 w-4 text-blue-400" />;
-    } else if (title.toLowerCase().includes("function response")) {
-      return <Activity className="h-4 w-4 text-green-400" />;
-    } else if (title.toLowerCase().includes("generating")) {
-      return <TextSearch className="h-4 w-4 text-neutral-400" />;
-    } else if (title.toLowerCase().includes("thinking")) {
-      return <Loader2 className="h-4 w-4 text-neutral-400 animate-spin" />;
-    } else if (title.toLowerCase().includes("reflection")) {
-      return <Brain className="h-4 w-4 text-neutral-400" />;
-    } else if (title.toLowerCase().includes("research")) {
-      return <Search className="h-4 w-4 text-neutral-400" />;
-    } else if (title.toLowerCase().includes("finalizing")) {
-      return <Pen className="h-4 w-4 text-neutral-400" />;
-    } else if (title.toLowerCase().includes("retrieved sources")) {
-      return <Link className="h-4 w-4 text-yellow-400" />;
-    }
-    return <Activity className="h-4 w-4 text-neutral-400" />;
-  };
-
-  useEffect(() => {
-    if (!isLoading && processedEvents.length !== 0) {
-      setIsTimelineCollapsed(true);
-    }
-  }, [isLoading, processedEvents]);
-  return (
-    <Card className={`border-none rounded-lg bg-neutral-700 ${isTimelineCollapsed ? "h-10 py-2" : "max-h-96 py-2"}`}>
-      <CardHeader className="py-0">
-        <CardDescription className="flex items-center justify-between">
-          <div
-            className="flex items-center justify-start text-sm w-full cursor-pointer gap-2 text-neutral-100"
-            onClick={() => setIsTimelineCollapsed(!isTimelineCollapsed)}
-          >
-            <span>Research</span>
-            {websiteCount > 0 && (
-              <span className="text-xs bg-neutral-600 px-2 py-0.5 rounded-full">
-                {websiteCount} websites
-              </span>
-            )}
-            {isTimelineCollapsed ? (
-              <ChevronDown className="h-4 w-4 mr-2" />
-            ) : (
-              <ChevronUp className="h-4 w-4 mr-2" />
-            )}
-          </div>
-        </CardDescription>
-      </CardHeader>
-      {!isTimelineCollapsed && (
-        <ScrollArea className="max-h-80 overflow-y-auto">
-          <CardContent>
-            {isLoading && processedEvents.length === 0 && (
-              <div className="relative pl-8 pb-4">
-                <div className="absolute left-3 top-3.5 h-full w-0.5 bg-neutral-800" />
-                <div className="absolute left-0.5 top-2 h-5 w-5 rounded-full bg-neutral-800 flex items-center justify-center ring-4 ring-neutral-900">
-                  <Loader2 className="h-3 w-3 text-neutral-400 animate-spin" />
-                </div>
-                <div>
-                  <p className="text-sm text-neutral-300 font-medium">
-                    Thinking...
-                  </p>
-                </div>
-              </div>
-            )}
-            {processedEvents.length > 0 ? (
-              <div className="space-y-0">
-                {processedEvents.map((eventItem, index) => (
-                  <div key={index} className="relative pl-8 pb-4">
-                    {index < processedEvents.length - 1 ||
-                    (isLoading && index === processedEvents.length - 1) ? (
-                      <div className="absolute left-3 top-3.5 h-full w-0.5 bg-neutral-600" />
-                    ) : null}
-                    <div className="absolute left-0.5 top-2 h-6 w-6 rounded-full bg-neutral-600 flex items-center justify-center ring-4 ring-neutral-700">
-                      {getEventIcon(eventItem.title, index)}
-                    </div>
-                    <div>
-                      <p className="text-sm text-neutral-200 font-medium mb-0.5">
-                        {eventItem.title}
-                      </p>
-                      <div className="text-xs text-neutral-300 leading-relaxed">
-                        {isJsonData(eventItem.data) ? (
-                          <pre className="bg-neutral-800 p-2 rounded text-xs overflow-x-auto whitespace-pre-wrap">
-                            {formatEventData(eventItem.data)}
-                          </pre>
-                        ) : (
-                          <ReactMarkdown
-                            components={{
-                              p: ({ children }) => <span>{children}</span>,
-                              a: ({ href, children }) => (
-                                <a
-                                  href={href}
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                  className="text-blue-400 hover:text-blue-300 underline"
-                                >
-                                  {children}
-                                </a>
-                              ),
-                              code: ({ children }) => (
-                                <code className="bg-neutral-800 px-1 py-0.5 rounded text-xs">
-                                  {children}
-                                </code>
-                              ),
-                            }}
-                          >
-                            {formatEventData(eventItem.data)}
-                          </ReactMarkdown>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                ))}
-                {isLoading && processedEvents.length > 0 && (
-                  <div className="relative pl-8 pb-4">
-                    <div className="absolute left-0.5 top-2 h-5 w-5 rounded-full bg-neutral-600 flex items-center justify-center ring-4 ring-neutral-700">
-                      <Loader2 className="h-3 w-3 text-neutral-400 animate-spin" />
-                    </div>
-                    <div>
-                      <p className="text-sm text-neutral-300 font-medium">
-                        Thinking...
-                      </p>
-                    </div>
-                  </div>
-                )}
-              </div>
-            ) : !isLoading ? ( // Only show "No activity" if not loading and no events
-              <div className="flex flex-col items-center justify-center h-full text-neutral-500 pt-10">
-                <Info className="h-6 w-6 mb-3" />
-                <p className="text-sm">No activity to display.</p>
-                <p className="text-xs text-neutral-600 mt-1">
-                  Timeline will update during processing.
-                </p>
-              </div>
-            ) : null}
-          </CardContent>
-        </ScrollArea>
-      )}
-    </Card>
-  );
-}

src/frontends/adk_gemini_fullstack/frontend/src/components/ChatMessagesView.tsx

@@ -1,420 +0,0 @@
-import type React from "react";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Loader2, Copy, CopyCheck } from "lucide-react";
-import { InputForm } from "@/components/InputForm";
-import { Button } from "@/components/ui/button";
-import { useState, ReactNode } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from 'remark-gfm';
-import { cn } from "@/utils";
-import { Badge } from "@/components/ui/badge";
-import { ActivityTimeline } from "@/components/ActivityTimeline";
-
-// Markdown component props type from former ReportView
-type MdComponentProps = {
-  className?: string;
-  children?: ReactNode;
-  [key: string]: any;
-};
-
-interface ProcessedEvent {
-  title: string;
-  data: any;
-}
-
-// Markdown components (from former ReportView.tsx)
-const mdComponents = {
-  h1: ({ className, children, ...props }: MdComponentProps) => (
-    <h1 className={cn("text-2xl font-bold mt-4 mb-2", className)} {...props}>
-      {children}
-    </h1>
-  ),
-  h2: ({ className, children, ...props }: MdComponentProps) => (
-    <h2 className={cn("text-xl font-bold mt-3 mb-2", className)} {...props}>
-      {children}
-    </h2>
-  ),
-  h3: ({ className, children, ...props }: MdComponentProps) => (
-    <h3 className={cn("text-lg font-bold mt-3 mb-1", className)} {...props}>
-      {children}
-    </h3>
-  ),
-  p: ({ className, children, ...props }: MdComponentProps) => (
-    <p className={cn("mb-3 leading-7", className)} {...props}>
-      {children}
-    </p>
-  ),
-  a: ({ className, children, href, ...props }: MdComponentProps) => (
-    <Badge className="text-xs mx-0.5">
-      <a
-        className={cn("text-blue-400 hover:text-blue-300 text-xs", className)}
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        {...props}
-      >
-        {children}
-      </a>
-    </Badge>
-  ),
-  ul: ({ className, children, ...props }: MdComponentProps) => (
-    <ul className={cn("list-disc pl-6 mb-3", className)} {...props}>
-      {children}
-    </ul>
-  ),
-  ol: ({ className, children, ...props }: MdComponentProps) => (
-    <ol className={cn("list-decimal pl-6 mb-3", className)} {...props}>
-      {children}
-    </ol>
-  ),
-  li: ({ className, children, ...props }: MdComponentProps) => (
-    <li className={cn("mb-1", className)} {...props}>
-      {children}
-    </li>
-  ),
-  blockquote: ({ className, children, ...props }: MdComponentProps) => (
-    <blockquote
-      className={cn(
-        "border-l-4 border-neutral-600 pl-4 italic my-3 text-sm",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </blockquote>
-  ),
-  code: ({ className, children, ...props }: MdComponentProps) => (
-    <code
-      className={cn(
-        "bg-neutral-900 rounded px-1 py-0.5 font-mono text-xs",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </code>
-  ),
-  pre: ({ className, children, ...props }: MdComponentProps) => (
-    <pre
-      className={cn(
-        "bg-neutral-900 p-3 rounded-lg overflow-x-auto font-mono text-xs my-3",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </pre>
-  ),
-  hr: ({ className, ...props }: MdComponentProps) => (
-    <hr className={cn("border-neutral-600 my-4", className)} {...props} />
-  ),
-  table: ({ className, children, ...props }: MdComponentProps) => (
-    <div className="my-3 overflow-x-auto">
-      <table className={cn("border-collapse w-full", className)} {...props}>
-        {children}
-      </table>
-    </div>
-  ),
-  th: ({ className, children, ...props }: MdComponentProps) => (
-    <th
-      className={cn(
-        "border border-neutral-600 px-3 py-2 text-left font-bold",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </th>
-  ),
-  td: ({ className, children, ...props }: MdComponentProps) => (
-    <td
-      className={cn("border border-neutral-600 px-3 py-2", className)}
-      {...props}
-    >
-      {children}
-    </td>
-  ),
-};
-
-// Props for HumanMessageBubble
-interface HumanMessageBubbleProps {
-  message: { content: string; id: string };
-  mdComponents: typeof mdComponents;
-}
-
-// HumanMessageBubble Component
-const HumanMessageBubble: React.FC<HumanMessageBubbleProps> = ({
-  message,
-  mdComponents,
-}) => {
-  return (
-    <div className="text-white rounded-3xl break-words min-h-7 bg-neutral-700 max-w-[100%] sm:max-w-[90%] px-4 pt-3 rounded-br-lg">
-      <ReactMarkdown components={mdComponents} remarkPlugins={[remarkGfm]}>
-        {message.content}
-      </ReactMarkdown>
-    </div>
-  );
-};
-
-// Props for AiMessageBubble
-interface AiMessageBubbleProps {
-  message: { content: string; id: string };
-  mdComponents: typeof mdComponents;
-  handleCopy: (text: string, messageId: string) => void;
-  copiedMessageId: string | null;
-  agent?: string;
-  finalReportWithCitations?: boolean;
-  processedEvents: ProcessedEvent[];
-  websiteCount: number;
-  isLoading: boolean;
-}
-
-// AiMessageBubble Component
-const AiMessageBubble: React.FC<AiMessageBubbleProps> = ({
-  message,
-  mdComponents,
-  handleCopy,
-  copiedMessageId,
-  agent,
-  finalReportWithCitations,
-  processedEvents,
-  websiteCount,
-  isLoading,
-}) => {
-  // Show ActivityTimeline if we have processedEvents (this will be the first AI message)
-  const shouldShowTimeline = processedEvents.length > 0;
-  
-  // Condition for DIRECT DISPLAY (interactive_planner_agent OR final report)
-  const shouldDisplayDirectly = 
-    agent === "interactive_planner_agent" || 
-    (agent === "report_composer_with_citations" && finalReportWithCitations);
-  
-  if (shouldDisplayDirectly) {
-    // Direct display - show content with copy button, and timeline if available
-    return (
-      <div className="relative break-words flex flex-col w-full">
-        {/* Show timeline for interactive_planner_agent if available */}
-        {shouldShowTimeline && agent === "interactive_planner_agent" && (
-          <div className="w-full mb-2">
-            <ActivityTimeline 
-              processedEvents={processedEvents}
-              isLoading={isLoading}
-              websiteCount={websiteCount}
-            />
-          </div>
-        )}
-        <div className="flex items-start gap-3">
-          <div className="flex-1">
-            <ReactMarkdown components={mdComponents} remarkPlugins={[remarkGfm]}>
-              {message.content}
-            </ReactMarkdown>
-          </div>
-          <button
-            onClick={() => handleCopy(message.content, message.id)}
-            className="p-1 hover:bg-neutral-700 rounded"
-          >
-            {copiedMessageId === message.id ? (
-              <CopyCheck className="h-4 w-4 text-green-500" />
-            ) : (
-              <Copy className="h-4 w-4 text-neutral-400" />
-            )}
-          </button>
-        </div>
-      </div>
-    );
-  } else if (shouldShowTimeline) {
-    // First AI message with timeline only (no direct content display)
-    return (
-      <div className="relative break-words flex flex-col w-full">
-        <div className="w-full">
-          <ActivityTimeline 
-            processedEvents={processedEvents}
-            isLoading={isLoading}
-            websiteCount={websiteCount}
-          />
-        </div>
-        {/* Only show accumulated content if it's not empty and not from research agents */}
-        {message.content && message.content.trim() && agent !== "interactive_planner_agent" && (
-          <div className="flex items-start gap-3 mt-2">
-            <div className="flex-1">
-              <ReactMarkdown components={mdComponents} remarkPlugins={[remarkGfm]}>
-                {message.content}
-              </ReactMarkdown>
-            </div>
-            <button
-              onClick={() => handleCopy(message.content, message.id)}
-              className="p-1 hover:bg-neutral-700 rounded"
-            >
-              {copiedMessageId === message.id ? (
-                <CopyCheck className="h-4 w-4 text-green-500" />
-              ) : (
-                <Copy className="h-4 w-4 text-neutral-400" />
-              )}
-            </button>
-          </div>
-        )}
-      </div>
-    );
-  } else {
-    // Fallback for other messages - just show content
-    return (
-      <div className="relative break-words flex flex-col w-full">
-        <div className="flex items-start gap-3">
-          <div className="flex-1">
-            <ReactMarkdown components={mdComponents} remarkPlugins={[remarkGfm]}>
-              {message.content}
-            </ReactMarkdown>
-          </div>
-          <button
-            onClick={() => handleCopy(message.content, message.id)}
-            className="p-1 hover:bg-neutral-700 rounded"
-          >
-            {copiedMessageId === message.id ? (
-              <CopyCheck className="h-4 w-4 text-green-500" />
-            ) : (
-              <Copy className="h-4 w-4 text-neutral-400" />
-            )}
-          </button>
-        </div>
-      </div>
-    );
-  }
-};
-
-interface ChatMessagesViewProps {
-  messages: { type: "human" | "ai"; content: string; id: string; agent?: string; finalReportWithCitations?: boolean }[];
-  isLoading: boolean;
-  scrollAreaRef: React.RefObject<HTMLDivElement | null>;
-  onSubmit: (query: string) => void;
-  onCancel: () => void;
-  displayData: string | null;
-  messageEvents: Map<string, ProcessedEvent[]>;
-  websiteCount: number;
-}
-
-export function ChatMessagesView({
-  messages,
-  isLoading,
-  scrollAreaRef,
-  onSubmit,
-  onCancel,
-  messageEvents,
-  websiteCount,
-}: ChatMessagesViewProps) {
-  const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
-
-  const handleCopy = async (text: string, messageId: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopiedMessageId(messageId);
-      setTimeout(() => setCopiedMessageId(null), 2000);
-    } catch (err) {
-      console.error("Failed to copy text:", err);
-    }
-  };
-
-  const handleNewChat = () => {
-    window.location.reload();
-  };
-
-  // Find the ID of the last AI message
-  const lastAiMessage = messages.slice().reverse().find(m => m.type === "ai");
-  const lastAiMessageId = lastAiMessage?.id;
-
-  return (
-    <div className="flex flex-col h-full w-full">
-      {/* Header with New Chat button */}
-      <div className="border-b border-neutral-700 p-4 bg-neutral-800">
-        <div className="max-w-4xl mx-auto flex justify-between items-center">
-          <h1 className="text-lg font-semibold text-neutral-100">Chat</h1>
-          <Button
-            onClick={handleNewChat}
-            variant="outline"
-            className="bg-neutral-700 hover:bg-neutral-600 text-neutral-100 border-neutral-600 hover:border-neutral-500"
-          >
-            New Chat
-          </Button>
-        </div>
-      </div>
-      <div className="flex-1 flex flex-col w-full">
-        <ScrollArea ref={scrollAreaRef} className="flex-1 w-full">
-          <div className="p-4 md:p-6 space-y-2 max-w-4xl mx-auto">
-            {messages.map((message) => { // Removed index as it's not directly used for this logic
-              const eventsForMessage = message.type === "ai" ? (messageEvents.get(message.id) || []) : [];
-              
-              // Determine if the current AI message is the last one
-              const isCurrentMessageTheLastAiMessage = message.type === "ai" && message.id === lastAiMessageId;
-
-              return (
-                <div
-                  key={message.id}
-                  className={`flex ${message.type === "human" ? "justify-end" : "justify-start"}`}
-                >
-                  {message.type === "human" ? (
-                    <HumanMessageBubble
-                      message={message}
-                      mdComponents={mdComponents}
-                    />
-                  ) : (
-                    <AiMessageBubble
-                      message={message}
-                      mdComponents={mdComponents}
-                      handleCopy={handleCopy}
-                      copiedMessageId={copiedMessageId}
-                      agent={message.agent}
-                      finalReportWithCitations={message.finalReportWithCitations}
-                      processedEvents={eventsForMessage}
-                      // MODIFIED: Pass websiteCount only if it's the last AI message
-                      websiteCount={isCurrentMessageTheLastAiMessage ? websiteCount : 0}
-                      // MODIFIED: Pass isLoading only if it's the last AI message and global isLoading is true
-                      isLoading={isCurrentMessageTheLastAiMessage && isLoading}
-                    />
-                  )}
-                </div>
-              );
-            })}
-            {/* This global "Thinking..." indicator appears below all messages if isLoading is true */}
-            {/* It's independent of the per-timeline isLoading state */}
-            {isLoading && !lastAiMessage && messages.some(m => m.type === 'human') && (
-              <div className="flex justify-start">
-                <div className="flex items-center gap-2 text-neutral-400">
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  <span>Thinking...</span>
-                </div>
-              </div>
-            )}
-             {/* Show "Thinking..." if the last message is human and we are loading, 
-                 or if there's an active AI message that is the last one and we are loading.
-                 The AiMessageBubble's internal isLoading will handle its own spinner.
-                 This one is for the general loading state at the bottom.
-             */}
-            {isLoading && messages.length > 0 && messages[messages.length -1].type === 'human' && (
-                 <div className="flex justify-start pl-10 pt-2"> {/* Adjusted padding to align similarly to AI bubble */}
-                    <div className="flex items-center gap-2 text-neutral-400">
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                        <span>Thinking...</span>
-                    </div>
-                </div>
-            )}
-          </div>
-        </ScrollArea>
-      </div>
-      <div className="border-t border-neutral-700 p-4 w-full">
-        <div className="max-w-3xl mx-auto">
-          <InputForm onSubmit={onSubmit} isLoading={isLoading} context="chat" />
-          {isLoading && (
-            <div className="mt-4 flex justify-center">
-              <Button
-                variant="outline"
-                onClick={onCancel}
-                className="text-red-400 hover:text-red-300"
-              >
-                Cancel
-              </Button>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}