@townco/gui-template 0.1.28 → 0.1.30

package/src/ChatView.tsx

@@ -1,429 +0,0 @@
-import { createLogger } from "@townco/core";
-import type { AcpClient } from "@townco/ui";
-import {
-  useChatMessages,
-  useChatSession,
-  useChatStore,
-  useToolCalls,
-} from "@townco/ui/core";
-import {
-  ChatEmptyState,
-  ChatHeader,
-  ChatInputActions,
-  ChatInputAttachment,
-  ChatInputCommandMenu,
-  ChatInputField,
-  ChatInputRoot,
-  ChatInputSubmit,
-  ChatInputToolbar,
-  ChatInputVoiceInput,
-  ChatLayout,
-  type CommandMenuItem,
-  cn,
-  FilesTabContent,
-  Message,
-  MessageContent,
-  PanelTabsHeader,
-  type SourceItem,
-  SourcesTabContent,
-  Tabs,
-  TabsContent,
-  type TodoItem,
-  TodoTabContent,
-} from "@townco/ui/gui";
-import {
-  ArrowUp,
-  ChevronUp,
-  Code,
-  PanelRight,
-  Settings,
-  Sparkles,
-} from "lucide-react";
-import { useEffect, useState } from "react";
-
-const logger = createLogger("gui");
-
-export interface ChatViewProps {
-  client: AcpClient | null;
-  initialSessionId?: string | null;
-}
-
-// Mobile header component that uses ChatHeader context
-function MobileHeader({ agentName }: { agentName: string }) {
-  const { isExpanded, setIsExpanded } = ChatHeader.useChatHeaderContext();
-
-  return (
-    <div className="flex lg:hidden items-center gap-2 flex-1">
-      <div className="flex items-center gap-2 flex-1">
-        <h1 className="text-[20px] font-semibold leading-[1.2] tracking-[-0.4px] text-foreground">
-          {agentName}
-        </h1>
-        <div className="flex items-center justify-center shrink-0">
-          <ChevronUp className="size-4 rotate-180 text-muted-foreground" />
-        </div>
-      </div>
-      <button
-        type="button"
-        className="flex items-center justify-center shrink-0 cursor-pointer"
-        aria-label="Toggle menu"
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        <PanelRight className="size-4 text-muted-foreground" />
-      </button>
-    </div>
-  );
-}
-
-// Header component that uses ChatLayout context (must be inside ChatLayout.Root)
-function AppChatHeader({
-  agentName,
-  todos,
-  sources,
-  showHeader,
-}: {
-  agentName: string;
-  todos: TodoItem[];
-  sources: SourceItem[];
-  showHeader: boolean;
-}) {
-  const { panelSize, setPanelSize } = ChatLayout.useChatLayoutContext();
-
-  return (
-    <ChatHeader.Root
-      className={cn(
-        "border-b border-border bg-card relative lg:p-0",
-        "[border-bottom-width:0.5px]",
-      )}
-    >
-      {/* Desktop view: 64px height, padding 20px vertical, 24px left, 16px right */}
-      <div className="hidden lg:flex items-center gap-2 w-full h-16 py-5 pl-6 pr-4">
-        {showHeader && (
-          <div className="flex items-center gap-2 flex-1">
-            <h1 className="text-[20px] font-semibold leading-[1.2] tracking-[-0.4px] text-foreground">
-              {agentName}
-            </h1>
-            <div className="flex items-center justify-center shrink-0">
-              <ChevronUp className="size-4 rotate-180 text-muted-foreground" />
-            </div>
-          </div>
-        )}
-        {!showHeader && <div className="flex-1" />}
-        <button
-          type="button"
-          className="flex items-center justify-center shrink-0 cursor-pointer"
-          aria-label="Toggle sidebar"
-          onClick={() => {
-            setPanelSize(panelSize === "hidden" ? "small" : "hidden");
-          }}
-        >
-          <PanelRight className="size-4 text-muted-foreground" />
-        </button>
-      </div>
-
-      {/* Mobile view: always show full header with agent name */}
-      <MobileHeader agentName={agentName} />
-
-      {/* Expandable Panel for Mobile - always available */}
-      <ChatHeader.ExpandablePanel
-        className={cn(
-          "pt-6 pb-8 px-6",
-          "border-b border-border bg-card",
-          "shadow-[0_4px_16px_0_rgba(0,0,0,0.04)]",
-          "[border-bottom-width:0.5px]",
-        )}
-      >
-        <Tabs defaultValue="todo" className="w-full">
-          <PanelTabsHeader
-            showIcons={true}
-            visibleTabs={["todo", "files", "sources"]}
-            variant="default"
-          />
-          <TabsContent value="todo" className="mt-4">
-            <TodoTabContent todos={todos} />
-          </TabsContent>
-          <TabsContent value="files" className="mt-4">
-            <FilesTabContent />
-          </TabsContent>
-          <TabsContent value="sources" className="mt-4">
-            <SourcesTabContent sources={sources} />
-          </TabsContent>
-        </Tabs>
-      </ChatHeader.ExpandablePanel>
-    </ChatHeader.Root>
-  );
-}
-
-export function ChatView({ client, initialSessionId }: ChatViewProps) {
-  // Use shared hooks from @townco/ui/core
-  const { connectionStatus, connect, sessionId } = useChatSession(
-    client,
-    initialSessionId,
-  );
-  const { messages } = useChatMessages(client);
-  useToolCalls(client); // Still need to subscribe to tool call events
-  const error = useChatStore((state) => state.error);
-  const [agentName, setAgentName] = useState<string>("Agent");
-  const [isLargeScreen, setIsLargeScreen] = useState(
-    typeof window !== "undefined" ? window.innerWidth >= 1024 : true,
-  );
-
-  // Log connection status changes
-  useEffect(() => {
-    logger.debug("Connection status changed", { status: connectionStatus });
-
-    if (connectionStatus === "error" && error) {
-      logger.error("Connection error occurred", { error });
-    }
-  }, [connectionStatus, error]);
-
-  // Get agent name from session metadata
-  useEffect(() => {
-    if (client && sessionId) {
-      const session = client.getCurrentSession();
-      if (session?.metadata?.agentName) {
-        setAgentName(session.metadata.agentName);
-      }
-    }
-  }, [client, sessionId]);
-
-  // Monitor screen size changes and update isLargeScreen state
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(min-width: 1024px)");
-
-    const handleChange = (e: MediaQueryListEvent) => {
-      setIsLargeScreen(e.matches);
-    };
-
-    // Set initial value
-    setIsLargeScreen(mediaQuery.matches);
-
-    // Listen for changes
-    mediaQuery.addEventListener("change", handleChange);
-
-    return () => {
-      mediaQuery.removeEventListener("change", handleChange);
-    };
-  }, []);
-
-  // TODO: Replace with useChatStore((state) => state.todos) when todos are added to the store
-  const todos: TodoItem[] = [];
-
-  // Dummy sources data based on Figma design
-  const sources: SourceItem[] = [
-    {
-      id: "1",
-      title: "Boeing Scores Early Wins at Dubai Airshow",
-      sourceName: "Reuters",
-      url: "https://www.reuters.com/markets/companies/BA.N",
-      snippet:
-        "DUBAI, Nov 17 (Reuters) - Boeing (BA.N), opens new tab took centre stage at day one of the Dubai Airshow on Monday, booking a $38 billion order from host carrier Emirates and clinching more deals with African carriers, while China displayed its C919 in the Middle East for the first time.",
-      favicon: "https://www.google.com/s2/favicons?domain=reuters.com&sz=32",
-    },
-    {
-      id: "2",
-      title: "Boeing's Sustainable Aviation Goals Take Flight",
-      sourceName: "Forbes",
-      url: "https://www.forbes.com",
-      snippet:
-        "SEATTLE, Nov 18 (Reuters) - Boeing is making headway towards its sustainability targets, unveiling plans for a new eco-friendly aircraft design aimed at reducing emissions by 50% by 2030.",
-      favicon: "https://www.google.com/s2/favicons?domain=forbes.com&sz=32",
-    },
-    {
-      id: "3",
-      title: "Boeing Faces Increased Competition in Global Aviation Market",
-      sourceName: "Reuters",
-      url: "https://www.reuters.com",
-      snippet:
-        "CHICAGO, Nov 19 (Reuters) - As the global aviation industry rebounds post-pandemic, Boeing is grappling with intensified competition from rival manufacturers, particularly in the Asian market.",
-      favicon: "https://www.google.com/s2/favicons?domain=reuters.com&sz=32",
-    },
-    {
-      id: "4",
-      title: "Boeing's Starliner Successfully Completes Orbital Test Flight",
-      sourceName: "The Verge",
-      url: "https://www.theverge.com",
-      snippet:
-        "NASA, Nov 20 (Reuters) - Boeing's CST-100 Starliner spacecraft achieves a significant milestone, successfully completing its orbital test flight, paving the way for future crewed missions to the International Space Station.",
-      favicon: "https://www.google.com/s2/favicons?domain=theverge.com&sz=32",
-    },
-  ];
-
-  // Command menu items for chat input
-  const commandMenuItems: CommandMenuItem[] = [
-    {
-      id: "model-sonnet",
-      label: "Use Sonnet 4.5",
-      description: "Switch to Claude Sonnet 4.5 model",
-      icon: <Sparkles className="h-4 w-4" />,
-      category: "model",
-      onSelect: () => {
-        logger.info("User selected Sonnet 4.5 model");
-      },
-    },
-    {
-      id: "model-opus",
-      label: "Use Opus",
-      description: "Switch to Claude Opus model",
-      icon: <Sparkles className="h-4 w-4" />,
-      category: "model",
-      onSelect: () => {
-        logger.info("User selected Opus model");
-      },
-    },
-    {
-      id: "settings",
-      label: "Open Settings",
-      description: "Configure chat preferences",
-      icon: <Settings className="h-4 w-4" />,
-      category: "action",
-      onSelect: () => {
-        logger.info("User opened settings");
-      },
-    },
-    {
-      id: "code-mode",
-      label: "Code Mode",
-      description: "Enable code-focused responses",
-      icon: <Code className="h-4 w-4" />,
-      category: "mode",
-      onSelect: () => {
-        logger.info("User enabled code mode");
-      },
-    },
-  ];
-
-  return (
-    <ChatLayout.Root defaultPanelSize="hidden" defaultActiveTab="todo">
-      {/* Main: Vertical container for Messages + Footer */}
-      <ChatLayout.Main>
-        {/* Top Row */}
-        <AppChatHeader
-          agentName={agentName}
-          todos={todos}
-          sources={sources}
-          showHeader={messages.length > 0}
-        />
-
-        {/* Connection Error Banner */}
-        {connectionStatus === "error" && error && (
-          <div className="border-b border-destructive/20 bg-destructive/10 px-6 py-4">
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex-1">
-                <h3 className="mb-1 text-sm font-semibold text-destructive">
-                  Connection Error
-                </h3>
-                <p className="whitespace-pre-line text-sm text-foreground">
-                  {error}
-                </p>
-              </div>
-              <button
-                type="button"
-                onClick={connect}
-                className="rounded-lg bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive-hover"
-              >
-                Retry
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* Body: Container for Messages + Footer + Toaster */}
-        <ChatLayout.Body>
-          {/* Messages: Scrollable message area */}
-          <ChatLayout.Messages className={messages.length > 0 ? "pt-4" : ""}>
-            {messages.length === 0 ? (
-              <div className="flex flex-1 items-center px-4">
-                <ChatEmptyState
-                  title={agentName}
-                  description="This agent can help you with your tasks. Start a conversation by typing a message below."
-                  suggestedPrompts={[
-                    "Help me debug this code",
-                    "Explain how this works",
-                    "Create a new feature",
-                    "Review my changes",
-                  ]}
-                  onPromptClick={(prompt) => {
-                    // TODO: Implement prompt click handler
-                    logger.info("Prompt clicked", { prompt });
-                  }}
-                />
-              </div>
-            ) : (
-              <div className="flex flex-col gap-4 px-4">
-                {messages.map((message, index) => (
-                  <Message
-                    key={message.id}
-                    message={message}
-                    isLastMessage={index === messages.length - 1}
-                  >
-                    <MessageContent
-                      message={message}
-                      thinkingDisplayStyle="collapsible"
-                    />
-                  </Message>
-                ))}
-              </div>
-            )}
-          </ChatLayout.Messages>
-
-          {/* Footer: Input area */}
-          <ChatLayout.Footer>
-            <ChatInputRoot client={client}>
-              <ChatInputCommandMenu commands={commandMenuItems} />
-              <ChatInputField
-                placeholder="Type a message or / for commands..."
-                autoFocus
-              />
-              <ChatInputToolbar>
-                <div className="flex items-center gap-1">
-                  <ChatInputActions />
-                  <ChatInputAttachment />
-                </div>
-                <div className="flex items-center gap-1">
-                  <ChatInputVoiceInput />
-                  <ChatInputSubmit>
-                    <ArrowUp className="size-4" />
-                  </ChatInputSubmit>
-                </div>
-              </ChatInputToolbar>
-            </ChatInputRoot>
-          </ChatLayout.Footer>
-        </ChatLayout.Body>
-      </ChatLayout.Main>
-
-      {/* Aside: Right side panel - only render on large screens */}
-      {isLargeScreen && (
-        <ChatLayout.Aside breakpoint="lg">
-          <Tabs defaultValue="todo" className="flex flex-col h-full">
-            {/* Desktop sidebar header (64px) */}
-            <div
-              className={cn(
-                "border-b border-border bg-card",
-                "px-6 py-2 h-16",
-                "flex items-center",
-                "[border-bottom-width:0.5px]",
-              )}
-            >
-              <PanelTabsHeader
-                showIcons={true}
-                visibleTabs={["todo", "files", "sources"]}
-                variant="compact"
-              />
-            </div>
-
-            {/* Desktop sidebar content */}
-            <TabsContent value="todo" className="flex-1 p-4 mt-0">
-              <TodoTabContent todos={todos} />
-            </TabsContent>
-            <TabsContent value="files" className="flex-1 p-4 mt-0">
-              <FilesTabContent />
-            </TabsContent>
-            <TabsContent value="sources" className="flex-1 p-4 mt-0">
-              <SourcesTabContent sources={sources} />
-            </TabsContent>
-          </Tabs>
-        </ChatLayout.Aside>
-      )}
-    </ChatLayout.Root>
-  );
-}