@townco/gui-template 0.1.36 → 0.1.38

package/src/ChatView.tsx

@@ -1,434 +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,
-  SourcesTabContent,
-  Tabs,
-  TabsContent,
-  TodoTabContent,
-} from "@townco/ui/gui";
-import {
-  ArrowUp,
-  ChevronUp,
-  Code,
-  PanelRight,
-  Settings,
-  Sparkles,
-} from "lucide-react";
-import { useEffect, useState } from "react";
-
-const logger = createLogger("gui");
-
-// Helper component to provide openFiles callback
-function OpenFilesButton({
-  children,
-}: {
-  children: (props: { openFiles: () => void }) => React.ReactNode;
-}) {
-  const { setPanelSize, setActiveTab } = ChatLayout.useChatLayoutContext();
-
-  const openFiles = () => {
-    setPanelSize("small");
-    setActiveTab("files");
-  };
-
-  return <>{children({ openFiles })}</>;
-}
-
-export interface ChatViewProps {
-  client: AcpClient | null;
-  initialSessionId?: string | null;
-}
-
-// Mobile header component that uses ChatHeader context
-function MobileHeader({
-  agentName,
-  showHeader,
-}: {
-  agentName: string;
-  showHeader: boolean;
-}) {
-  const { isExpanded, setIsExpanded } = ChatHeader.useChatHeaderContext();
-
-  return (
-    <div className="flex lg:hidden items-center gap-2 flex-1">
-      {showHeader && (
-        <div className="flex items-center gap-2 flex-1">
-          <h1 className="text-heading-4 text-foreground">{agentName}</h1>
-        </div>
-      )}
-      {!showHeader && <div className="flex-1" />}
-      <button
-        type="button"
-        className="flex items-center justify-center shrink-0 cursor-pointer"
-        aria-label="Toggle menu"
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        <ChevronUp
-          className={cn(
-            "size-4 text-muted-foreground transition-transform duration-200",
-            isExpanded ? "" : "rotate-180",
-          )}
-        />
-      </button>
-    </div>
-  );
-}
-
-// Header component that uses ChatLayout context (must be inside ChatLayout.Root)
-function AppChatHeader({
-  agentName,
-  showHeader,
-}: {
-  agentName: string;
-  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-heading-4 text-foreground">{agentName}</h1>
-          </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: conditionally show agent name based on showHeader */}
-      <MobileHeader agentName={agentName} showHeader={showHeader} />
-
-      {/* 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 />
-          </TabsContent>
-          <TabsContent value="files" className="mt-4">
-            <FilesTabContent />
-          </TabsContent>
-          <TabsContent value="sources" className="mt-4">
-            <SourcesTabContent />
-          </TabsContent>
-        </Tabs>
-      </ChatHeader.ExpandablePanel>
-    </ChatHeader.Root>
-  );
-}
-
-export function ChatView({ client, initialSessionId }: ChatViewProps) {
-  // Use shared hooks from @townco/ui/core
-  const { connectionStatus, connect, sessionId, startSession } = useChatSession(
-    client,
-    initialSessionId,
-  );
-  const { messages, sendMessage } = useChatMessages(client, startSession);
-  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,
-  );
-  const [placeholder, setPlaceholder] = useState<string>(
-    "Type a message or / for commands...",
-  );
-
-  // 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);
-    };
-  }, []);
-
-  // Handle prompt hover - temporarily show the full prompt as placeholder
-  const handlePromptHover = (prompt: string) => {
-    setPlaceholder(prompt);
-  };
-
-  // Handle prompt leave - restore the default placeholder
-  const handlePromptLeave = () => {
-    setPlaceholder("Type a message or / for commands...");
-  };
-
-  // 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} 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-paragraph-sm font-semibold text-destructive">
-                  Connection Error
-                </h3>
-                <p className="whitespace-pre-line text-paragraph-sm text-foreground">
-                  {error}
-                </p>
-              </div>
-              <button
-                type="button"
-                onClick={connect}
-                className="rounded-lg bg-destructive px-4 py-2 text-paragraph-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>
-            {messages.length === 0 ? (
-              <OpenFilesButton>
-                {({ openFiles }) => (
-                  <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={[
-                        "Search the web for the latest news on top tech company earnings, produce a summary for each company, and then a macro trend analysis of the tech industry. Use your todo list",
-                        "Explain how this works",
-                        "Create a new feature",
-                        "Review my changes",
-                      ]}
-                      onPromptClick={(prompt) => {
-                        sendMessage(prompt);
-                        setPlaceholder("Type a message or / for commands...");
-                        logger.info("Prompt clicked", { prompt });
-                      }}
-                      onPromptHover={handlePromptHover}
-                      onPromptLeave={handlePromptLeave}
-                      onOpenFiles={openFiles}
-                    />
-                  </div>
-                )}
-              </OpenFilesButton>
-            ) : (
-              <div className="flex flex-col px-4">
-                {messages.map((message, index) => {
-                  // Calculate dynamic spacing based on message sequence
-                  const isFirst = index === 0;
-                  const previousMessage = isFirst ? null : messages[index - 1];
-
-                  let spacingClass = "mt-2";
-
-                  if (isFirst) {
-                    spacingClass = "mt-2";
-                  } else if (message.role === "user") {
-                    // User message usually starts a new turn
-                    spacingClass =
-                      previousMessage?.role === "user" ? "mt-4" : "mt-4";
-                  } else if (message.role === "assistant") {
-                    // Assistant message is usually a response
-                    spacingClass =
-                      previousMessage?.role === "assistant" ? "mt-2" : "mt-6";
-                  }
-
-                  return (
-                    <Message
-                      key={message.id}
-                      message={message}
-                      className={spacingClass}
-                      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={placeholder} 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 />
-            </TabsContent>
-            <TabsContent value="files" className="flex-1 p-4 mt-0">
-              <FilesTabContent />
-            </TabsContent>
-            <TabsContent value="sources" className="flex-1 p-4 mt-0">
-              <SourcesTabContent />
-            </TabsContent>
-          </Tabs>
-        </ChatLayout.Aside>
-      )}
-    </ChatLayout.Root>
-  );
-}