flikkui 0.1.0-beta.9 → 0.2.0-beta.2

package/dist/cli/utils/setupTailwind.js

@@ -0,0 +1,98 @@
+import { readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+async function setupTailwind(projectInfo) {
+    const cwd = process.cwd();
+    // Check if Tailwind config exists
+    if (!projectInfo.tailwindConfigFile) {
+        return {
+            success: false,
+            message: 'No Tailwind config file found. Create one first with: npx tailwindcss init',
+        };
+    }
+    const configPath = join(cwd, projectInfo.tailwindConfigFile);
+    try {
+        let content = readFileSync(configPath, 'utf-8');
+        // Check if preset already exists
+        if (content.includes('flikkui/tailwind.preset')) {
+            return {
+                success: true,
+                message: 'Tailwind preset already configured',
+            };
+        }
+        // Different strategies for different file types
+        if (projectInfo.tailwindConfigFile.endsWith('.ts')) {
+            // TypeScript config
+            content = updateTypeScriptConfig(content);
+        }
+        else {
+            // JavaScript/CommonJS config
+            content = updateJavaScriptConfig(content);
+        }
+        // Update content array to include flikkui
+        if (!content.includes('node_modules/flikkui')) {
+            content = addFlikkuiToContent(content);
+        }
+        // Write back
+        writeFileSync(configPath, content, 'utf-8');
+        return { success: true };
+    }
+    catch (error) {
+        return {
+            success: false,
+            message: error instanceof Error ? error.message : 'Unknown error',
+        };
+    }
+}
+function updateTypeScriptConfig(content) {
+    // Check if there's already a presets array
+    if (content.includes('presets:')) {
+        // Add to existing presets array
+        content = content.replace(/presets:\s*\[(.*?)\]/s, (match, presets) => {
+            if (!presets.trim()) {
+                return `presets: [require('flikkui/tailwind.preset.cjs')]`;
+            }
+            return `presets: [require('flikkui/tailwind.preset.cjs'), ${presets}]`;
+        });
+    }
+    else {
+        // Add presets array to config
+        content = content.replace(/(export default\s*{|module\.exports\s*=\s*{)/, `$1\n  presets: [require('flikkui/tailwind.preset.cjs')],`);
+    }
+    return content;
+}
+function updateJavaScriptConfig(content) {
+    // Check if there's already a presets array
+    if (content.includes('presets:')) {
+        // Add to existing presets array
+        content = content.replace(/presets:\s*\[(.*?)\]/s, (match, presets) => {
+            if (!presets.trim()) {
+                return `presets: [require('flikkui/tailwind.preset.cjs')]`;
+            }
+            return `presets: [require('flikkui/tailwind.preset.cjs'), ${presets}]`;
+        });
+    }
+    else {
+        // Add presets array to config
+        content = content.replace(/module\.exports\s*=\s*{/, `module.exports = {\n  presets: [require('flikkui/tailwind.preset.cjs')],`);
+    }
+    return content;
+}
+function addFlikkuiToContent(content) {
+    // Find the content array
+    const contentMatch = content.match(/content:\s*\[([\s\S]*?)\]/);
+    if (contentMatch) {
+        const contentArray = contentMatch[1];
+        const newContent = contentArray.trim()
+            ? `${contentArray.trim()}, './node_modules/flikkui/**/*.{js,ts,jsx,tsx}'`
+            : `'./node_modules/flikkui/**/*.{js,ts,jsx,tsx}'`;
+        content = content.replace(/content:\s*\[([\s\S]*?)\]/, `content: [${newContent}]`);
+    }
+    else {
+        // No content array found, add one
+        content = content.replace(/(export default\s*{|module\.exports\s*=\s*{)/, `$1\n  content: ['./node_modules/flikkui/**/*.{js,ts,jsx,tsx}'],`);
+    }
+    return content;
+}
+
+export { setupTailwind };

package/dist/components/ai/ApprovalCard/ApprovalCard.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ApprovalCardProps } from "./ApprovalCard.types";
+export declare const ApprovalCard: React.FC<ApprovalCardProps>;

package/dist/components/ai/ApprovalCard/ApprovalCard.js

@@ -0,0 +1,42 @@
+import React__default from 'react';
+import { ExclamationTriangleIcon, ShieldCheckIcon, CheckCircleIcon } from '@heroicons/react/16/solid';
+import { approvalCardTheme } from './ApprovalCard.theme.js';
+import { Card } from '../../core/Card/Card.js';
+import { Badge } from '../../core/Badge/Badge.js';
+import { Button } from '../../core/Button/Button.js';
+import { AlertDialog } from '../../core/AlertDialog/AlertDialog.js';
+import { cn } from '../../../utils/cn.js';
+
+const ApprovalCard = ({ title, description, riskLevel = "medium", mode = "inline", onApprove, onDeny, children, isApproving = false, className, }) => {
+    // --- MODAL MODE ---
+    if (mode === "modal") {
+        return (React__default.createElement(AlertDialog, { trigger: React__default.createElement(Button, { variant: "outline", color: "neutral" }, "Review Approval"), title: title, icon: riskLevel === "critical" || riskLevel === "high" ? (React__default.createElement(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" })) : (React__default.createElement(ShieldCheckIcon, { className: "size-6 text-[var(--color-primary)]" })), description: description, footer: (close) => (React__default.createElement("div", { className: "flex gap-2 justify-end w-full" },
+                React__default.createElement(Button, { variant: "outline", color: "neutral", onClick: () => {
+                        onDeny();
+                        close();
+                    } }, "Deny"),
+                React__default.createElement(Button, { color: riskLevel === "critical" ? "danger" : "primary", state: isApproving ? "loading" : "default", onClick: () => {
+                        onApprove();
+                        close();
+                    } }, "Approve"))) }));
+    }
+    // --- INLINE MODE ---
+    const riskColor = approvalCardTheme.badgeColors[riskLevel];
+    const riskIcon = riskLevel === "critical" || riskLevel === "high" ? (React__default.createElement(ExclamationTriangleIcon, { className: "" })) : (React__default.createElement(CheckCircleIcon, { className: "" }));
+    return (React__default.createElement(Card, { className: cn(approvalCardTheme.baseStyle, approvalCardTheme.riskStyles[riskLevel], className) },
+        React__default.createElement(Card.Header, null,
+            React__default.createElement("div", { className: "flex flex-col items-start" },
+                React__default.createElement(Badge, { variant: "outline", color: riskColor, size: "sm", iconStart: riskIcon, className: "font-semibold shadow" },
+                    riskLevel.toUpperCase(),
+                    " RISK"))),
+        React__default.createElement(Card.Content, { className: "space-y-3" },
+            React__default.createElement("div", { className: "space-y-1" },
+                React__default.createElement(Card.Title, { className: "text-base" }, title),
+                description && (React__default.createElement("p", { className: "text-sm text-[var(--color-text-secondary)]" }, description))),
+            children && (React__default.createElement("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-xs font-mono border border-[var(--color-border)] overflow-x-auto" }, children))),
+        React__default.createElement(Card.Footer, { className: "justify-end gap-2 mt-3" },
+            React__default.createElement(Button, { variant: "filled", color: "neutral", size: "sm", onClick: onDeny }, "Deny"),
+            React__default.createElement(Button, { color: riskColor, size: "sm", state: isApproving ? "loading" : "default", onClick: onApprove }, "Approve"))));
+};
+
+export { ApprovalCard };

package/dist/components/ai/ApprovalCard/ApprovalCard.theme.d.ts

@@ -0,0 +1,15 @@
+export declare const approvalCardTheme: {
+    baseStyle: string;
+    riskStyles: {
+        low: string;
+        medium: string;
+        high: string;
+        critical: string;
+    };
+    badgeColors: {
+        readonly low: "success";
+        readonly medium: "warning";
+        readonly high: "danger";
+        readonly critical: "danger";
+    };
+};

package/dist/components/ai/ApprovalCard/ApprovalCard.theme.js

@@ -0,0 +1,17 @@
+const approvalCardTheme = {
+    baseStyle: "glass-effect ",
+    riskStyles: {
+        low: "bg-[var(--color-success-50)]/40 border-[var(--color-border)]",
+        medium: "bg-[var(--color-warning-50)]/40 border-[var(--color-border)]",
+        high: "bg-[var(--color-danger-50)]/40 border-[var(--color-border)]",
+        critical: "bg-[var(--color-danger-50)]/40 border-[var(--color-border)]",
+    },
+    badgeColors: {
+        low: "success",
+        medium: "warning",
+        high: "danger",
+        critical: "danger",
+    },
+};
+
+export { approvalCardTheme };

package/dist/components/ai/ApprovalCard/ApprovalCard.types.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+export type ApprovalRiskLevel = "low" | "medium" | "high" | "critical";
+export type ApprovalMode = "inline" | "modal";
+export interface ApprovalCardProps {
+    /**
+     * Title of the approval request
+     */
+    title: string;
+    /**
+     * Description or context for the user
+     */
+    description?: string;
+    /**
+     * Risk level determining visual severity
+     * @default "medium"
+     */
+    riskLevel?: ApprovalRiskLevel;
+    /**
+     * Display mode: Inline card or Modal dialog
+     * @default "inline"
+     */
+    mode?: ApprovalMode;
+    /**
+     * Callback when user approves the action
+     */
+    onApprove: () => void;
+    /**
+     * Callback when user denies/cancels the action
+     */
+    onDeny: () => void;
+    /**
+     * Optional payload to display (e.g. code snippet, JSON)
+     */
+    children?: ReactNode;
+    /**
+     * Loading state for the approve button
+     */
+    isApproving?: boolean;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}

package/dist/components/ai/ApprovalCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ApprovalCard";
+export * from "./ApprovalCard.types";

package/dist/components/ai/ArtifactContainer/ArtifactContainer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ArtifactContainerProps, ArtifactContainerChatProps, ArtifactContainerCanvasProps } from "./ArtifactContainer.types";
+export declare const ArtifactContainer: React.FC<ArtifactContainerProps> & {
+    Chat: React.FC<ArtifactContainerChatProps>;
+    Canvas: React.FC<ArtifactContainerCanvasProps>;
+};

package/dist/components/ai/ArtifactContainer/ArtifactContainer.js

@@ -0,0 +1,127 @@
+import React__default, { createContext, useRef, useState, useCallback, useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { artifactContainerTheme, handleSizes } from './ArtifactContainer.theme.js';
+
+// Context for compound components
+const ArtifactContainerContext = createContext(undefined);
+const useArtifactContainerContext = () => {
+    const ctx = useContext(ArtifactContainerContext);
+    if (!ctx) {
+        throw new Error("ArtifactContainer compound components must be used within <ArtifactContainer>");
+    }
+    return ctx;
+};
+// Chat Pane Component
+const ArtifactContainerChat = ({ className, children, ...props }) => {
+    useArtifactContainerContext();
+    return (React__default.createElement("div", { className: cn(artifactContainerTheme.paneStyle, artifactContainerTheme.chatPaneStyle, className), ...props }, children));
+};
+ArtifactContainerChat.displayName = "ArtifactContainer.Chat";
+// Canvas Pane Component
+const ArtifactContainerCanvas = ({ className, children, ...props }) => {
+    useArtifactContainerContext();
+    return (React__default.createElement("div", { className: cn(artifactContainerTheme.paneStyle, artifactContainerTheme.canvasPaneStyle, className), ...props }, children));
+};
+ArtifactContainerCanvas.displayName = "ArtifactContainer.Canvas";
+const ArtifactContainerRoot = ({ direction = "horizontal", defaultSplit = 50, minPaneSize = 20, onSplitChange, className, children, ...props }) => {
+    const containerRef = useRef(null);
+    const [split, setSplit] = useState(defaultSplit);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    // Calculate split from pointer position
+    const getSplitFromPosition = useCallback((clientX, clientY) => {
+        if (!containerRef.current)
+            return split;
+        const rect = containerRef.current.getBoundingClientRect();
+        let percentage;
+        if (direction === "horizontal") {
+            percentage = ((clientX - rect.left) / rect.width) * 100;
+        }
+        else {
+            percentage = ((clientY - rect.top) / rect.height) * 100;
+        }
+        // Clamp to min/max
+        return Math.max(minPaneSize, Math.min(100 - minPaneSize, percentage));
+    }, [direction, minPaneSize, split]);
+    // Handle drag start
+    const handlePointerDown = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(true);
+        // Capture cursor globally while dragging
+        document.body.style.cursor =
+            direction === "horizontal" ? "col-resize" : "row-resize";
+        document.body.style.userSelect = "none";
+        const handleMove = (moveEvent) => {
+            const newSplit = getSplitFromPosition(moveEvent.clientX, moveEvent.clientY);
+            setSplit(newSplit);
+            onSplitChange === null || onSplitChange === void 0 ? void 0 : onSplitChange(newSplit);
+        };
+        const handleEnd = () => {
+            setIsDragging(false);
+            // Restore body styles
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+            document.removeEventListener("pointermove", handleMove);
+            document.removeEventListener("pointerup", handleEnd);
+        };
+        document.addEventListener("pointermove", handleMove);
+        document.addEventListener("pointerup", handleEnd);
+    }, [getSplitFromPosition, onSplitChange, direction]);
+    // Double-click to reset to 50%
+    const handleDoubleClick = useCallback(() => {
+        setSplit(50);
+        onSplitChange === null || onSplitChange === void 0 ? void 0 : onSplitChange(50);
+    }, [onSplitChange]);
+    // Context value
+    const contextValue = {
+        direction,
+        split,
+    };
+    // Extract Chat and Canvas children
+    const childArray = React__default.Children.toArray(children);
+    const chatChild = childArray.find((child) => React__default.isValidElement(child) && child.type === ArtifactContainerChat);
+    const canvasChild = childArray.find((child) => React__default.isValidElement(child) && child.type === ArtifactContainerCanvas);
+    // Calculate pane styles
+    // We substract 1px for the border line between panes
+    const firstPaneStyle = direction === "horizontal"
+        ? { width: `${split}%` }
+        : { height: `${split}%` };
+    const secondPaneStyle = direction === "horizontal"
+        ? { width: `${100 - split}%` }
+        : { height: `${100 - split}%` };
+    return (React__default.createElement(ArtifactContainerContext.Provider, { value: contextValue },
+        React__default.createElement("div", { ref: containerRef, className: cn(artifactContainerTheme.containerStyle, direction === "vertical" && "flex-col", className), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), ...props },
+            chatChild && (React__default.createElement("div", { style: firstPaneStyle, className: artifactContainerTheme.paneStyle },
+                chatChild,
+                React__default.createElement("div", { className: cn("absolute bg-[var(--color-border)] transition-opacity duration-300", direction === "horizontal"
+                        ? "top-0 right-0 w-[1px] h-full"
+                        : "bottom-0 left-0 w-full h-[1px]", isHovered || isDragging ? "opacity-100" : "opacity-60") }))),
+            React__default.createElement("div", { className: cn(artifactContainerTheme.handleStyle, handleSizes[direction], isDragging && artifactContainerTheme.handleActiveStyle), style: {
+                    // Negative margin to center the handle over the border
+                    [direction === "horizontal" ? "marginLeft" : "marginTop"]: direction === "horizontal" ? "-8px" : "-8px",
+                }, onPointerDown: handlePointerDown, onDoubleClick: handleDoubleClick, role: "separator", "aria-orientation": direction, "aria-valuenow": Math.round(split), "aria-valuemin": minPaneSize, "aria-valuemax": 100 - minPaneSize, tabIndex: 0, "aria-label": "Resize handle" },
+                React__default.createElement("div", { className: cn("absolute bg-[var(--color-background)] border border-[var(--color-border)] shadow-sm flex items-center justify-center transition-all duration-200", 
+                    // Pill Shape
+                    direction === "horizontal"
+                        ? "w-4 h-8 rounded-full"
+                        : "w-8 h-4 rounded-full", 
+                    // State styles
+                    isHovered || isDragging
+                        ? "opacity-100 scale-100"
+                        : "opacity-0 scale-90", isDragging &&
+                        "ring-2 ring-[var(--color-primary-200)] border-[var(--color-primary)]") },
+                    React__default.createElement("div", { className: cn("flex gap-0.5", direction === "horizontal" ? "flex-col" : "flex-row") },
+                        React__default.createElement("div", { className: "w-0.5 h-0.5 rounded-full bg-[var(--color-text-tertiary)]" }),
+                        React__default.createElement("div", { className: "w-0.5 h-0.5 rounded-full bg-[var(--color-text-tertiary)]" }),
+                        React__default.createElement("div", { className: "w-0.5 h-0.5 rounded-full bg-[var(--color-text-tertiary)]" }))),
+                React__default.createElement("div", { className: cn("absolute bg-[var(--color-primary)] opacity-0 transition-opacity duration-200", direction === "horizontal" ? "w-[2px] h-full" : "h-[2px] w-full", isDragging && "opacity-100") })),
+            canvasChild && (React__default.createElement("div", { style: secondPaneStyle, className: artifactContainerTheme.paneStyle }, canvasChild)))));
+};
+ArtifactContainerRoot.displayName = "ArtifactContainer";
+// Attach compound components
+const ArtifactContainer = Object.assign(ArtifactContainerRoot, {
+    Chat: ArtifactContainerChat,
+    Canvas: ArtifactContainerCanvas,
+});
+
+export { ArtifactContainer };

package/dist/components/ai/ArtifactContainer/ArtifactContainer.theme.d.ts

@@ -0,0 +1,6 @@
+import { ArtifactContainerTheme } from "./ArtifactContainer.types";
+export declare const artifactContainerTheme: ArtifactContainerTheme;
+export declare const handleSizes: {
+    horizontal: string;
+    vertical: string;
+};

package/dist/components/ai/ArtifactContainer/ArtifactContainer.theme.js

@@ -0,0 +1,14 @@
+const artifactContainerTheme = {
+    containerStyle: "flex w-full h-full overflow-hidden bg-[var(--color-background)] rounded-[var(--radius-xl)] border border-[var(--color-border)] shadow-sm isolate",
+    paneStyle: "overflow-auto relative min-w-0 min-h-0",
+    chatPaneStyle: "flex flex-col bg-[var(--color-background)] z-0",
+    canvasPaneStyle: "flex flex-col bg-[var(--color-background-secondary)] z-0",
+    handleStyle: "flex-shrink-0 relative z-20 flex items-center justify-center transition-all duration-300 ease-out hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/5 dark:active:bg-white/10 group outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    handleActiveStyle: "bg-black/5 dark:bg-white/5",
+};
+const handleSizes = {
+    horizontal: "w-4 -ml-2 h-full cursor-col-resize",
+    vertical: "h-4 -mt-2 w-full cursor-row-resize",
+};
+
+export { artifactContainerTheme, handleSizes };

package/dist/components/ai/ArtifactContainer/ArtifactContainer.types.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+export type SplitDirection = "horizontal" | "vertical";
+export interface ArtifactContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Direction of the split layout
+     * @default "horizontal"
+     */
+    direction?: SplitDirection;
+    /**
+     * Default split percentage (0-100)
+     * @default 50
+     */
+    defaultSplit?: number;
+    /**
+     * Minimum size for each pane as percentage
+     * @default 20
+     */
+    minPaneSize?: number;
+    /**
+     * Callback when split percentage changes
+     */
+    onSplitChange?: (split: number) => void;
+    /**
+     * Additional className for the container
+     */
+    className?: string;
+    /**
+     * Children - should contain Chat and Canvas components
+     */
+    children: React.ReactNode;
+}
+export interface ArtifactContainerChatProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Additional className
+     */
+    className?: string;
+    children: React.ReactNode;
+}
+export interface ArtifactContainerCanvasProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Additional className
+     */
+    className?: string;
+    children: React.ReactNode;
+}
+export interface ArtifactContainerContextValue {
+    direction: SplitDirection;
+    split: number;
+}
+export interface ArtifactContainerTheme {
+    containerStyle?: string;
+    paneStyle?: string;
+    chatPaneStyle?: string;
+    canvasPaneStyle?: string;
+    handleStyle?: string;
+    handleActiveStyle?: string;
+}

package/dist/components/ai/ArtifactContainer/index.d.ts

@@ -0,0 +1,3 @@
+export { ArtifactContainer } from "./ArtifactContainer";
+export type { ArtifactContainerProps, ArtifactContainerChatProps, ArtifactContainerCanvasProps, ArtifactContainerContextValue, ArtifactContainerTheme, SplitDirection, } from "./ArtifactContainer.types";
+export { artifactContainerTheme, handleSizes } from "./ArtifactContainer.theme";

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

@@ -0,0 +1,26 @@
+import React, { ReactNode } from "react";
+import { ChatInterfaceProps } from "./ChatInterface.types";
+/**
+ * ChatInterface Header component
+ */
+interface ChatInterfaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * ChatInterface Body component
+ */
+interface ChatInterfaceBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * ChatInterface Footer component
+ */
+interface ChatInterfaceFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export declare const ChatInterface: React.ForwardRefExoticComponent<ChatInterfaceProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<ChatInterfaceHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<ChatInterfaceBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<ChatInterfaceFooterProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/ai/ChatInterface/ChatInterface.js

@@ -0,0 +1,65 @@
+import React__default, { useState } from 'react';
+import { ChatInterfaceContext } from './ChatInterface.types.js';
+import { chatInterfaceTheme } from './ChatInterface.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const ChatInterfaceHeader = React__default.forwardRef(({ children, className, ...props }, ref) => (React__default.createElement("div", { ref: ref, className: cn(chatInterfaceTheme.headerStyle, className), ...props }, children)));
+ChatInterfaceHeader.displayName = "ChatInterface.Header";
+const ChatInterfaceBody = React__default.forwardRef(({ children, className, ...props }, ref) => (React__default.createElement("div", { ref: ref, className: cn(chatInterfaceTheme.bodyStyle, className), ...props }, children)));
+ChatInterfaceBody.displayName = "ChatInterface.Body";
+const ChatInterfaceFooter = React__default.forwardRef(({ children, className, ...props }, ref) => (React__default.createElement("div", { ref: ref, className: cn(chatInterfaceTheme.footerStyle, className), ...props }, children)));
+ChatInterfaceFooter.displayName = "ChatInterface.Footer";
+/**
+ * ChatInterface - Main compound container for AI chat UI
+ *
+ * Provides a flexible layout for chat interfaces with optional context
+ * for shared state between child components.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ChatInterface>
+ *   <ChatInterface.Body>
+ *     <MessageHistory messages={messages} />
+ *     <ThinkingIndicator visible={isLoading} />
+ *   </ChatInterface.Body>
+ *   <ChatInterface.Footer>
+ *     <PromptInput onSubmit={handleSubmit} />
+ *   </ChatInterface.Footer>
+ * </ChatInterface>
+ * ```
+ *
+ * @example With context
+ * ```tsx
+ * <ChatInterface messages={messages} isLoading={isLoading}>
+ *   <ChatInterface.Body>
+ *     <MessageHistory messages={messages} />
+ *   </ChatInterface.Body>
+ *   <ChatInterface.Footer>
+ *     <PromptInput />
+ *   </ChatInterface.Footer>
+ * </ChatInterface>
+ * ```
+ */
+const ChatInterfaceRoot = React__default.forwardRef(({ children, messages = [], isLoading = false, className, theme: customTheme = {}, ...props }, ref) => {
+    const [inputValue, setInputValue] = useState("");
+    // Merge theme
+    const containerStyle = customTheme.containerStyle || chatInterfaceTheme.containerStyle;
+    // Context value
+    const contextValue = {
+        messages,
+        isLoading,
+        inputValue,
+        setInputValue,
+    };
+    return (React__default.createElement(ChatInterfaceContext.Provider, { value: contextValue },
+        React__default.createElement("div", { ref: ref, className: cn(containerStyle, className), ...props }, children)));
+});
+ChatInterfaceRoot.displayName = "ChatInterface";
+// Attach compound components
+const ChatInterface = Object.assign(ChatInterfaceRoot, {
+    Header: ChatInterfaceHeader,
+    Body: ChatInterfaceBody,
+    Footer: ChatInterfaceFooter,
+});
+
+export { ChatInterface };

package/dist/components/ai/ChatInterface/ChatInterface.theme.d.ts

@@ -0,0 +1,2 @@
+import { ChatInterfaceTheme } from "./ChatInterface.types";
+export declare const chatInterfaceTheme: ChatInterfaceTheme;

package/dist/components/ai/ChatInterface/ChatInterface.theme.js

@@ -0,0 +1,8 @@
+const chatInterfaceTheme = {
+    containerStyle: "flex flex-col h-full bg-[var(--color-background)]",
+    headerStyle: "flex-shrink-0 border-b border-[var(--color-border)] p-4",
+    bodyStyle: "flex-1 overflow-hidden",
+    footerStyle: "flex-shrink-0 border-t border-[var(--color-border)] p-4",
+};
+
+export { chatInterfaceTheme };

package/dist/components/ai/ChatInterface/ChatInterface.types.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode } from "react";
+import { ChatMessageData } from "../MessageHistory/MessageHistory.types";
+/**
+ * ChatInterface context value
+ */
+export interface ChatInterfaceContextValue {
+    /**
+     * Messages in the chat
+     */
+    messages: ChatMessageData[];
+    /**
+     * Whether the AI is currently generating a response
+     */
+    isLoading: boolean;
+    /**
+     * Current input value
+     */
+    inputValue: string;
+    /**
+     * Set input value
+     */
+    setInputValue: (value: string) => void;
+}
+/**
+ * ChatInterface component props
+ */
+export interface ChatInterfaceProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Children components (MessageHistory, ThinkingIndicator, PromptInput, etc.)
+     */
+    children: ReactNode;
+    /**
+     * Messages in the chat (for context)
+     */
+    messages?: ChatMessageData[];
+    /**
+     * Whether the AI is currently generating
+     */
+    isLoading?: boolean;
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: ChatInterfaceThemeOverrides;
+}
+/**
+ * Theme configuration
+ */
+export interface ChatInterfaceTheme {
+    containerStyle: string;
+    headerStyle: string;
+    bodyStyle: string;
+    footerStyle: string;
+}
+/**
+ * Theme overrides
+ */
+export interface ChatInterfaceThemeOverrides {
+    containerStyle?: string;
+    headerStyle?: string;
+    bodyStyle?: string;
+    footerStyle?: string;
+}
+export declare const ChatInterfaceContext: import("react").Context<ChatInterfaceContextValue | undefined>;
+export declare const useChatInterfaceContext: () => ChatInterfaceContextValue;

package/dist/components/ai/ChatInterface/ChatInterface.types.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+// Context
+const ChatInterfaceContext = createContext(undefined);
+const useChatInterfaceContext = () => {
+    const context = useContext(ChatInterfaceContext);
+    if (!context) {
+        // Return default values when not in context (allows standalone use)
+        return {
+            messages: [],
+            isLoading: false,
+            inputValue: "",
+            setInputValue: () => { },
+        };
+    }
+    return context;
+};
+
+export { ChatInterfaceContext, useChatInterfaceContext };

package/dist/components/ai/ChatInterface/index.d.ts

@@ -0,0 +1,4 @@
+export { ChatInterface } from "./ChatInterface";
+export { chatInterfaceTheme } from "./ChatInterface.theme";
+export { useChatInterfaceContext } from "./ChatInterface.types";
+export type { ChatInterfaceProps, ChatInterfaceContextValue, ChatInterfaceTheme, ChatInterfaceThemeOverrides, } from "./ChatInterface.types";