@townco/ui 0.1.0

package/dist/gui/components/ChatInput.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { useChatInput as useCoreChatInput } from "../../core/hooks/use-chat-input.js";
+import { useChatStore } from "../../core/store/chat-store.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./Button.js";
+const ChatInputContext = React.createContext(undefined);
+const useChatInputContext = () => {
+    const context = React.useContext(ChatInputContext);
+    if (!context) {
+        throw new Error("ChatInput components must be used within ChatInput.Root");
+    }
+    return context;
+};
+const ChatInputRoot = React.forwardRef(({ client, value: valueProp, onChange: onChangeProp, onSubmit: onSubmitProp, disabled = false, isSubmitting: isSubmittingProp, submitOnEnter = true, className, children, ...props }, ref) => {
+    const textareaRef = React.useRef(null);
+    // Always call hooks unconditionally (React rules)
+    const hookData = useCoreChatInput(client ?? null);
+    const storeIsStreaming = useChatStore((state) => state.isStreaming);
+    // Choose data source based on whether client is provided
+    const value = hookData ? hookData.value : valueProp || "";
+    const onChange = hookData ? hookData.onChange : onChangeProp || (() => { });
+    const onSubmit = hookData
+        ? hookData.onSubmit
+        : onSubmitProp || (async () => { });
+    const isSubmitting = hookData
+        ? hookData.isSubmitting || storeIsStreaming
+        : isSubmittingProp || false;
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (value.trim() && !isSubmitting && !disabled) {
+            await onSubmit();
+            // Restore focus to textarea after submit
+            setTimeout(() => {
+                textareaRef.current?.focus();
+            }, 0);
+        }
+    };
+    // Expose textarea ref to children via context
+    React.useEffect(() => {
+        const textarea = document.querySelector('textarea[name="chat-input"]');
+        if (textarea && textareaRef.current !== textarea) {
+            textareaRef.current = textarea;
+        }
+    }, []);
+    // Reset textarea height when value becomes empty (after submit)
+    React.useEffect(() => {
+        if (!value && textareaRef.current) {
+            textareaRef.current.style.height = "auto";
+            textareaRef.current.style.overflowY = "hidden";
+        }
+    }, [value]);
+    return (_jsx(ChatInputContext.Provider, { value: {
+            value,
+            onChange,
+            onSubmit,
+            disabled,
+            isSubmitting,
+            submitOnEnter,
+        }, children: _jsx("form", { ref: ref, onSubmit: handleSubmit, className: cn("w-full divide-y overflow-hidden rounded-xl border bg-background shadow-sm", className), ...props, children: children }) }));
+});
+ChatInputRoot.displayName = "ChatInput.Root";
+const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown, children, ...props }, ref) => {
+    const { value, onChange, onSubmit, disabled, isSubmitting, submitOnEnter } = useChatInputContext();
+    const textareaRef = React.useRef(null);
+    const handleRef = React.useCallback((node) => {
+        textareaRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const handleKeyDown = (e) => {
+        // Handle Enter without Shift - only submit if not already submitting
+        if (submitOnEnter && e.key === "Enter" && !e.shiftKey) {
+            // Only prevent default and submit if conditions are met
+            if (value.trim() && !isSubmitting && !disabled) {
+                e.preventDefault();
+                onSubmit();
+            }
+            else if (isSubmitting || disabled) {
+                // Block Enter when submitting or disabled - don't add newline
+                e.preventDefault();
+            }
+        }
+        onKeyDown?.(e);
+    };
+    const handleChange = (e) => {
+        onChange(e.target.value);
+        // Auto-resize
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        textarea.style.height = "auto";
+        const newHeight = Math.min(textarea.scrollHeight, 164);
+        textarea.style.height = `${newHeight}px`;
+        if (textarea.scrollHeight > 164) {
+            textarea.style.overflowY = "auto";
+        }
+        else {
+            textarea.style.overflowY = "hidden";
+        }
+    };
+    const fieldProps = {
+        ref: handleRef,
+        name: "chat-input",
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        disabled: disabled,
+        ...props,
+    };
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, fieldProps);
+    }
+    return (_jsx("textarea", { ...fieldProps, className: cn("w-full resize-none rounded-none border-none p-3 shadow-none", "outline-none ring-0 field-sizing-content max-h-[6lh]", "bg-transparent dark:bg-transparent focus-visible:ring-0", "text-sm placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", className) }));
+});
+ChatInputField.displayName = "ChatInput.Field";
+const ChatInputSubmit = React.forwardRef(({ asChild = false, className, disabled: disabledProp, children, ...props }, ref) => {
+    const { value, disabled, isSubmitting } = useChatInputContext();
+    const isDisabled = disabledProp || disabled || isSubmitting || !value.trim();
+    const Comp = asChild ? Slot : Button;
+    return (_jsx(Comp, { ref: ref, type: "submit", disabled: isDisabled, size: "icon", className: cn(!asChild &&
+            "gap-1.5 rounded-lg bg-transparent text-foreground hover:bg-transparent", className), ...props, children: children }));
+});
+ChatInputSubmit.displayName = "ChatInput.Submit";
+const ChatInputToolbar = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("flex items-center justify-between p-1", className), ...props, children: children }));
+});
+ChatInputToolbar.displayName = "ChatInput.Toolbar";
+/* -------------------------------------------------------------------------------------------------
+ * Exports
+ * -----------------------------------------------------------------------------------------------*/
+export { ChatInputRoot as Root, ChatInputField as Field, ChatInputSubmit as Submit, ChatInputToolbar as Toolbar, };

package/dist/gui/components/ChatInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.js","sourceRoot":"","sources":["../../../src/gui/components/ChatInput.tsx"],"names":[],"mappings":"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"}

package/dist/gui/components/ChatInterface.d.ts

@@ -0,0 +1,9 @@
+import { type DisplayMessage } from "./MessageList.js";
+interface ChatInterfaceProps {
+    initialMessages?: DisplayMessage[];
+    thinkingDisplayStyle?: "collapsible" | "inline";
+    status?: string;
+}
+export declare function ChatInterface({ initialMessages, thinkingDisplayStyle, status, }: ChatInterfaceProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatInterface.d.ts.map

package/dist/gui/components/ChatInterface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInterface.d.ts","sourceRoot":"","sources":["../../../src/gui/components/ChatInterface.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQpE,UAAU,kBAAkB;IAC1B,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,oBAAoB,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAC;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2FD,wBAAgB,aAAa,CAAC,EAC5B,eAAiC,EACjC,oBAAoC,EACpC,MAAoB,GACrB,EAAE,kBAAkB,2CA+FpB"}

package/dist/gui/components/ChatInterface.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { ChevronDown } from "lucide-react";
+import { MessageList } from "./MessageList.js";
+import { ChatStatus } from "./ChatStatus.js";
+import { ChatSecondaryPanel } from "./ChatSecondaryPanel.js";
+import { HeightTransition } from "./HeightTransition.js";
+import { ChatInput } from "./ChatInput.js";
+const SAMPLE_TODOS = [
+    {
+        id: "1",
+        text: "Identify the last 25 Winter Olympics host countries",
+        status: "completed",
+    },
+    {
+        id: "2",
+        text: "For each host country, find the tallest mountain",
+        status: "in_progress",
+    },
+    {
+        id: "3",
+        text: "Gather key details for each mountain (name, elevation, location)",
+        status: "pending",
+    },
+    {
+        id: "4",
+        text: "Verify information using reliable sources (geographical databases, official records)",
+        status: "pending",
+    },
+    {
+        id: "5",
+        text: "Compile findings into a summary table or document",
+        status: "pending",
+    },
+];
+const SAMPLE_MESSAGES = [
+    {
+        id: "msg-1",
+        role: "user",
+        content: "Hello! Can you help me understand how to use markdown?",
+        timestamp: new Date().toISOString(),
+        isStreaming: false,
+    },
+    {
+        id: "msg-2",
+        role: "assistant",
+        content: `Sure! Markdown is a lightweight markup language. Here are some basics:
+
+## Headings
+Use \`#\` for headings. More \`#\` symbols make smaller headings.
+
+## Lists
+- Unordered lists use dashes
+- Or asterisks
+- Or plus signs
+
+1. Ordered lists
+2. Use numbers
+3. Like this
+
+## Code
+Inline code uses \`backticks\` and code blocks use triple backticks:
+
+\`\`\`javascript
+function hello() {
+  console.log("Hello world!");
+}
+\`\`\`
+
+## Links and emphasis
+[This is a link](https://example.com)
+
+You can make text **bold** or *italic*.
+
+> Blockquotes use the > character
+
+## Tables
+| Header 1 | Header 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+| Cell 3   | Cell 4   |`,
+        timestamp: new Date().toISOString(),
+        isStreaming: false,
+        metadata: {
+            thinking: "Let me provide a comprehensive overview of markdown syntax...",
+        },
+    },
+    {
+        id: "msg-3",
+        role: "user",
+        content: "That's really helpful, thank you!",
+        timestamp: new Date().toISOString(),
+        isStreaming: false,
+    },
+];
+export function ChatInterface({ initialMessages = SAMPLE_MESSAGES, thinkingDisplayStyle = "collapsible", status = "Connected", }) {
+    const [messages, setMessages] = useState(initialMessages);
+    const [currentStatus, setCurrentStatus] = useState(status);
+    const [config, setConfig] = useState(null);
+    const [isHeaderExpanded, setIsHeaderExpanded] = useState(false);
+    const [todos] = useState(SAMPLE_TODOS);
+    // Listen for config and status updates from parent window
+    useEffect(() => {
+        const handleMessage = (event) => {
+            if (event.data.type === "CONFIG_UPDATE") {
+                const newConfig = event.data.config;
+                setConfig(newConfig);
+                applyConfigToDocument(newConfig);
+            }
+            else if (event.data.type === "STATUS_UPDATE") {
+                setCurrentStatus(event.data.status);
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        // Request config from parent on mount
+        if (window.parent !== window) {
+            window.parent.postMessage({ type: "REQUEST_CONFIG" }, "*");
+        }
+        return () => {
+            window.removeEventListener("message", handleMessage);
+        };
+    }, []);
+    const applyConfigToDocument = (cfg) => {
+        const root = document.documentElement;
+        root.setAttribute("data-theme", cfg.colorScheme);
+        root.style.setProperty("--color-accent", cfg.accentColor);
+        root.style.setProperty("--font-family", cfg.typography);
+        root.style.setProperty("--font-size", `${cfg.fontSize}px`);
+    };
+    return (_jsxs("div", { className: "flex flex-col h-screen bg-[var(--color-bg)] text-[var(--color-text)]", children: [_jsxs("div", { className: "relative border-b border-[var(--color-border)] bg-[var(--color-surface)] z-10", children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [_jsx("h1", { className: "text-xl font-semibold m-0", children: "Chat Interface" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ChatStatus, { children: currentStatus }), _jsx("button", { onClick: () => setIsHeaderExpanded(!isHeaderExpanded), className: "p-1 rounded hover:bg-[var(--color-bg)] transition-colors", "aria-label": isHeaderExpanded ? "Collapse header" : "Expand header", children: _jsx(ChevronDown, { className: `w-5 h-5 text-[var(--color-text)] transition-transform duration-200 ${isHeaderExpanded ? "rotate-180" : ""}` }) })] })] }), _jsx("div", { className: "absolute top-full left-0 right-0 z-20", children: _jsx(HeightTransition, { children: isHeaderExpanded && (_jsx("div", { className: "bg-[var(--color-surface)] border-b border-[var(--color-border)] px-6 py-4 shadow-lg", children: _jsx(ChatSecondaryPanel, { todos: todos }) })) }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto py-4", children: _jsx(MessageList, { messages: messages, thinkingDisplayStyle: config?.thinkingDisplayStyle || thinkingDisplayStyle }) }), _jsx("div", { className: "border-t border-[var(--color-border)] px-6 py-4 bg-[var(--color-surface)]", children: _jsx(ChatInput, { value: "", onChange: () => { }, onSubmit: () => { }, disabled: true, placeholder: "Type a message..." }) })] }));
+}
+//# sourceMappingURL=ChatInterface.js.map

package/dist/gui/components/ChatInterface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInterface.js","sourceRoot":"","sources":["../../../src/gui/components/ChatInterface.tsx"],"names":[],"mappings":"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"}

package/dist/gui/components/ChatLayout.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+type PanelSize = "hidden" | "small" | "large";
+type PanelTabType = "todo" | "files" | "database";
+interface ChatLayoutContextValue {
+    sidebarOpen: boolean;
+    setSidebarOpen: (open: boolean) => void;
+    panelSize: PanelSize;
+    setPanelSize: (size: PanelSize) => void;
+    activeTab: PanelTabType;
+    setActiveTab: (tab: PanelTabType) => void;
+}
+declare const useChatLayoutContext: () => ChatLayoutContextValue;
+export interface ChatLayoutRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Initial sidebar open state */
+    defaultSidebarOpen?: boolean;
+    /** Initial panel size state */
+    defaultPanelSize?: PanelSize;
+    /** Initial active tab */
+    defaultActiveTab?: PanelTabType;
+}
+declare const ChatLayoutRoot: React.ForwardRefExoticComponent<ChatLayoutRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatLayoutHeader: React.ForwardRefExoticComponent<ChatLayoutHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutMainProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatLayoutMain: React.ForwardRefExoticComponent<ChatLayoutMainProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Whether to show toaster */
+    showToaster?: boolean;
+}
+declare const ChatLayoutBody: React.ForwardRefExoticComponent<ChatLayoutBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutMessagesProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Callback when scroll position changes */
+    onScrollChange?: (isAtBottom: boolean) => void;
+    /** Whether to show scroll to bottom button */
+    showScrollToBottom?: boolean;
+}
+declare const ChatLayoutMessages: React.ForwardRefExoticComponent<ChatLayoutMessagesProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatLayoutFooter: React.ForwardRefExoticComponent<ChatLayoutFooterProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatLayoutSidebar: React.ForwardRefExoticComponent<ChatLayoutSidebarProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutAsideProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Show panel on these breakpoints (default: lg and above) */
+    breakpoint?: "md" | "lg" | "xl" | "2xl";
+}
+declare const ChatLayoutAside: React.ForwardRefExoticComponent<ChatLayoutAsideProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatLayoutRoot as Root, ChatLayoutHeader as Header, ChatLayoutMain as Main, ChatLayoutBody as Body, ChatLayoutMessages as Messages, ChatLayoutFooter as Footer, ChatLayoutSidebar as Sidebar, ChatLayoutAside as Aside, useChatLayoutContext, };
+export type { PanelSize, PanelTabType };

package/dist/gui/components/ChatLayout.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import { Toaster } from "./Sonner.js";
+const ChatLayoutContext = React.createContext(undefined);
+const useChatLayoutContext = () => {
+    const context = React.useContext(ChatLayoutContext);
+    if (!context) {
+        throw new Error("ChatLayout components must be used within ChatLayout.Root");
+    }
+    return context;
+};
+const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPanelSize = "hidden", defaultActiveTab = "todo", className, children, ...props }, ref) => {
+    const [sidebarOpen, setSidebarOpen] = React.useState(defaultSidebarOpen);
+    const [panelSize, setPanelSize] = React.useState(defaultPanelSize);
+    const [activeTab, setActiveTab] = React.useState(defaultActiveTab);
+    return (_jsx(ChatLayoutContext.Provider, { value: {
+            sidebarOpen,
+            setSidebarOpen,
+            panelSize,
+            setPanelSize,
+            activeTab,
+            setActiveTab,
+        }, children: _jsx("div", { ref: ref, className: cn("flex h-screen flex-row bg-background text-foreground", className), ...props, children: children }) }));
+});
+ChatLayoutRoot.displayName = "ChatLayout.Root";
+const ChatLayoutHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("relative z-10 border-b border-border bg-card shrink-0", className), ...props, children: children }));
+});
+ChatLayoutHeader.displayName = "ChatLayout.Header";
+const ChatLayoutMain = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("flex flex-1 flex-col overflow-hidden", className), ...props, children: children }));
+});
+ChatLayoutMain.displayName = "ChatLayout.Main";
+const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, children, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("relative flex flex-1 flex-col overflow-hidden", className), ...props, children: [children, showToaster && _jsx(Toaster, {})] }));
+});
+ChatLayoutBody.displayName = "ChatLayout.Body";
+const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChange, showScrollToBottom = true, ...props }, ref) => {
+    const [showScrollButton, setShowScrollButton] = React.useState(false);
+    const scrollContainerRef = React.useRef(null);
+    // Merge refs
+    React.useImperativeHandle(ref, () => scrollContainerRef.current);
+    // Check if user is at bottom of scroll
+    const checkScrollPosition = React.useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        const isAtBottom = distanceFromBottom < 100; // 100px threshold
+        setShowScrollButton(!isAtBottom && showScrollToBottom);
+        onScrollChange?.(isAtBottom);
+    }, [onScrollChange, showScrollToBottom]);
+    // Handle scroll events
+    const handleScroll = React.useCallback(() => {
+        checkScrollPosition();
+    }, [checkScrollPosition]);
+    // Scroll to bottom function
+    const scrollToBottom = React.useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        container.scrollTo({
+            top: container.scrollHeight,
+            behavior: "smooth",
+        });
+    }, []);
+    // Check scroll position on mount and when children change
+    React.useEffect(() => {
+        checkScrollPosition();
+    }, [checkScrollPosition]);
+    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto", className), onScroll: handleScroll, ...props, children: children }), showScrollButton && (_jsx("button", { type: "button", onClick: scrollToBottom, className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "h-4 w-4" }) }))] }));
+});
+ChatLayoutMessages.displayName = "ChatLayout.Messages";
+const ChatLayoutFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("bg-linear-to-t from-background to-transparent px-4 pb-4", className), ...props, children: children }));
+});
+ChatLayoutFooter.displayName = "ChatLayout.Footer";
+const ChatLayoutSidebar = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { sidebarOpen } = useChatLayoutContext();
+    if (!sidebarOpen)
+        return null;
+    return (_jsx("div", { ref: ref, className: cn("border-r border-border bg-card w-64 overflow-y-auto", className), ...props, children: children }));
+});
+ChatLayoutSidebar.displayName = "ChatLayout.Sidebar";
+const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, children, ...props }, ref) => {
+    const { panelSize } = useChatLayoutContext();
+    // Hidden state - don't render
+    if (panelSize === "hidden")
+        return null;
+    return (_jsx("div", { ref: ref, className: cn(
+        // Hidden by default, visible at breakpoint
+        "hidden border-l border-border bg-card overflow-y-auto transition-all duration-300", 
+        // Breakpoint visibility
+        breakpoint === "md" && "md:block", breakpoint === "lg" && "lg:block", breakpoint === "xl" && "xl:block", breakpoint === "2xl" && "2xl:block", 
+        // Size variants
+        panelSize === "small" && "w-80", panelSize === "large" && "w-[32rem]", className), ...props, children: children }));
+});
+ChatLayoutAside.displayName = "ChatLayout.Aside";
+/* -------------------------------------------------------------------------------------------------
+ * Exports
+ * -----------------------------------------------------------------------------------------------*/
+export { ChatLayoutRoot as Root, ChatLayoutHeader as Header, ChatLayoutMain as Main, ChatLayoutBody as Body, ChatLayoutMessages as Messages, ChatLayoutFooter as Footer, ChatLayoutSidebar as Sidebar, ChatLayoutAside as Aside, useChatLayoutContext, };

package/dist/gui/components/ChatPanelTabContent.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { TodoItem } from "./TodoListItem.js";
+/**
+ * Shared tab content components for both mobile (ChatHeader) and desktop (Panel) views
+ * Following component architecture best practices
+ */
+export interface TodoTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    todos: TodoItem[];
+}
+export declare const TodoTabContent: React.ForwardRefExoticComponent<TodoTabContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface FilesTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    files?: string[];
+}
+export declare const FilesTabContent: React.ForwardRefExoticComponent<FilesTabContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface DatabaseTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    data?: unknown;
+}
+export declare const DatabaseTabContent: React.ForwardRefExoticComponent<DatabaseTabContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/ChatPanelTabContent.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+export const TodoTabContent = React.forwardRef(({ todos, className, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("space-y-4", className), ...props, children: [_jsx("h3", { className: "font-semibold text-lg", children: "Tasks" }), _jsx("div", { className: "space-y-2", children: todos.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "No tasks yet" })) : (todos.map((todo) => (_jsx("div", { className: "text-sm", children: todo.text }, todo.id)))) })] }));
+});
+TodoTabContent.displayName = "TodoTabContent";
+export const FilesTabContent = React.forwardRef(({ files = [], className, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("space-y-4", className), ...props, children: [_jsx("h3", { className: "font-semibold text-lg", children: "Files" }), files.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "No files attached" })) : (_jsx("div", { className: "space-y-2", children: files.map((file) => (_jsx("div", { className: "text-sm", children: file }, file))) }))] }));
+});
+FilesTabContent.displayName = "FilesTabContent";
+export const DatabaseTabContent = React.forwardRef(({ data, className, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("space-y-4", className), ...props, children: [_jsx("h3", { className: "font-semibold text-lg", children: "Database" }), _jsxs("div", { className: "text-sm text-muted-foreground", children: [_jsx("p", { children: "Database viewer - panel automatically expanded to large size" }), _jsxs("div", { className: "mt-4 p-4 border border-border rounded", children: [_jsx("p", { children: "Your large data table would go here" }), data && typeof data === "object" ? (_jsx("pre", { className: "mt-2 text-xs overflow-auto", children: JSON.stringify(data, null, 2) })) : null] })] })] }));
+});
+DatabaseTabContent.displayName = "DatabaseTabContent";

package/dist/gui/components/ChatPreview.d.ts

@@ -0,0 +1,9 @@
+import type { ThemeConfig } from "./ConfigPanel.js";
+interface ChatPreviewProps {
+    config: ThemeConfig;
+    status: string;
+    iframeSrc?: string;
+}
+export declare function ChatPreview({ config, status, iframeSrc, }: ChatPreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatPreview.d.ts.map

package/dist/gui/components/ChatPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatPreview.d.ts","sourceRoot":"","sources":["../../../src/gui/components/ChatPreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,UAAU,gBAAgB;IACxB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,MAAM,EACN,SAA8B,GAC/B,EAAE,gBAAgB,2CA2OlB"}