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

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

@@ -0,0 +1,35 @@
+/**
+ * EditingIndicator Component
+ *
+ * Displays "User is typing..." with animated ellipsis.
+ * Shows when one or more users are actively typing.
+ *
+ * @example
+ * ```tsx
+ * <PresenceProvider channel="chat" currentUser={user} adapter={adapter}>
+ *   <EditingIndicator position="above" showAvatars />
+ *   <input type="text" />
+ * </PresenceProvider>
+ * ```
+ */
+import React from "react";
+import { EditingIndicatorProps } from "./EditingIndicator.types";
+/**
+ * EditingIndicator - Show typing status
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <EditingIndicator />
+ *
+ * // With avatars
+ * <EditingIndicator showAvatars avatarSize="xs" />
+ *
+ * // Custom position
+ * <EditingIndicator position="below" />
+ *
+ * // Custom styling
+ * <EditingIndicator className="text-blue-600" />
+ * ```
+ */
+export declare const EditingIndicator: React.ForwardRefExoticComponent<EditingIndicatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/EditingIndicator/EditingIndicator.js

@@ -0,0 +1,94 @@
+import React__default, { useMemo } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { Avatar } from '../../core/Avatar/Avatar.js';
+import { usePresenceContext } from '../PresenceProvider/PresenceContext.js';
+import { editingIndicatorTheme } from './EditingIndicator.theme.js';
+import { containerVariants, avatarContainerVariants, avatarVariants, ellipsisVariants, pulseVariants } from './EditingIndicator.animations.js';
+import { cn } from '../../../utils/cn.js';
+import { formatTypingText } from '../../../utils/presenceUtils.js';
+
+/**
+ * EditingIndicator Component
+ *
+ * Displays "User is typing..." with animated ellipsis.
+ * Shows when one or more users are actively typing.
+ *
+ * @example
+ * ```tsx
+ * <PresenceProvider channel="chat" currentUser={user} adapter={adapter}>
+ *   <EditingIndicator position="above" showAvatars />
+ *   <input type="text" />
+ * </PresenceProvider>
+ * ```
+ */
+/**
+ * EditingIndicator - Show typing status
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <EditingIndicator />
+ *
+ * // With avatars
+ * <EditingIndicator showAvatars avatarSize="xs" />
+ *
+ * // Custom position
+ * <EditingIndicator position="below" />
+ *
+ * // Custom styling
+ * <EditingIndicator className="text-blue-600" />
+ * ```
+ */
+const EditingIndicator = React__default.forwardRef(({ position = "above", maxVisible = 3, showAvatars = false, avatarSize = "xs", formatText, animation = "ellipsis", shouldAnimate = true, icon, theme = editingIndicatorTheme, className, ...props }, ref) => {
+    var _a;
+    // Get typing users from context
+    const { typingUsers } = usePresenceContext();
+    // Check for reduced motion preference
+    const prefersReducedMotion = useReducedMotion();
+    const enableAnimations = shouldAnimate && !prefersReducedMotion;
+    // Format typing text
+    const typingText = useMemo(() => {
+        if (typingUsers.length === 0)
+            return null;
+        return formatText
+            ? formatText(typingUsers)
+            : formatTypingText(typingUsers, maxVisible);
+    }, [typingUsers, maxVisible, formatText]);
+    // Build ARIA label (without ellipsis)
+    const ariaLabel = useMemo(() => {
+        if (typingUsers.length === 0)
+            return "No one is typing";
+        if (typingUsers.length === 1)
+            return `${typingUsers[0].name} is typing`;
+        if (typingUsers.length === 2)
+            return `${typingUsers[0].name} and ${typingUsers[1].name} are typing`;
+        return `${typingUsers.length} people are typing`;
+    }, [typingUsers]);
+    // Merge theme
+    const mergedTheme = {
+        ...editingIndicatorTheme,
+        ...theme,
+    };
+    // Build className
+    const containerClassName = cn(mergedTheme.baseStyle, (_a = mergedTheme.positions) === null || _a === void 0 ? void 0 : _a[position], className // User overrides take precedence
+    );
+    // Don't render if no one is typing
+    if (typingUsers.length === 0) {
+        return null;
+    }
+    return (React__default.createElement(AnimatePresence, { mode: "wait" },
+        React__default.createElement(motion.div, { ref: ref, className: containerClassName, role: "status", "aria-live": "polite", "aria-label": ariaLabel, "data-typing-count": typingUsers.length, variants: enableAnimations ? containerVariants : undefined, initial: enableAnimations ? "hidden" : undefined, animate: enableAnimations ? "visible" : undefined, exit: enableAnimations ? "exit" : undefined, ...props },
+            showAvatars && typingUsers.length > 0 && (React__default.createElement(motion.div, { className: mergedTheme.avatarContainerStyle, variants: enableAnimations ? avatarContainerVariants : undefined }, typingUsers.slice(0, maxVisible).map((user) => (React__default.createElement(motion.div, { key: user.id, variants: enableAnimations ? avatarVariants : undefined },
+                React__default.createElement(Avatar, { src: user.avatar, alt: user.name, size: avatarSize, className: "border-2 border-white" })))))),
+            icon ? (React__default.createElement("div", { className: "flex items-center gap-1" },
+                icon,
+                React__default.createElement("span", { className: mergedTheme.textStyle }, typingText))) : (React__default.createElement("span", { className: mergedTheme.textStyle },
+                typingText,
+                enableAnimations && animation === "ellipsis" && (React__default.createElement("span", { className: mergedTheme.ellipsisStyle, "aria-hidden": "true" }, [0, 1, 2].map((index) => (React__default.createElement(motion.span, { key: index, custom: index, variants: ellipsisVariants, initial: "initial", animate: "animate" }, "."))))),
+                (!enableAnimations || animation === "none") && (React__default.createElement("span", { "aria-hidden": "true" }, "...")))),
+            enableAnimations && animation === "pulse" && (React__default.createElement(motion.span, { variants: pulseVariants, initial: "initial", animate: "animate", className: "inline-block w-2 h-2 rounded-full bg-[var(--color-primary)]", "aria-hidden": "true" })))));
+});
+// Display name for dev tools
+EditingIndicator.displayName = "EditingIndicator";
+
+export { EditingIndicator };

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

@@ -0,0 +1,2 @@
+import { EditingIndicatorTheme } from "./EditingIndicator.types";
+export declare const editingIndicatorTheme: EditingIndicatorTheme;

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

@@ -0,0 +1,13 @@
+const editingIndicatorTheme = {
+    baseStyle: "flex items-center gap-2 text-[var(--color-text-secondary)]",
+    textStyle: "text-sm font-medium",
+    avatarContainerStyle: "inline-flex -space-x-1",
+    ellipsisStyle: "inline-flex gap-0.5 ml-0.5",
+    positions: {
+        above: "mb-2",
+        below: "mt-2",
+        inline: "",
+    },
+};
+
+export { editingIndicatorTheme };

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

@@ -0,0 +1,54 @@
+/**
+ * EditingIndicator Type Definitions
+ *
+ * Defines props and interfaces for the EditingIndicator component.
+ */
+import React from 'react';
+import { TypingUser } from '../PresenceProvider/PresenceProvider.types';
+import { AvatarSize } from '../../core/Avatar/Avatar.types';
+/**
+ * Position of the indicator relative to input
+ */
+export type EditingIndicatorPosition = 'above' | 'below' | 'inline';
+/**
+ * Animation style for the indicator
+ */
+export type EditingIndicatorAnimation = 'ellipsis' | 'pulse' | 'none';
+/**
+ * EditingIndicator component props
+ */
+export interface EditingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Position relative to input (default: 'above') */
+    position?: EditingIndicatorPosition;
+    /** Maximum users to display in text (default: 3) */
+    maxVisible?: number;
+    /** Show user avatars alongside text (default: false) */
+    showAvatars?: boolean;
+    /** Avatar size when shown (default: 'xs') */
+    avatarSize?: Extract<AvatarSize, 'xs' | 'sm'>;
+    /** Custom text formatter */
+    formatText?: (users: TypingUser[]) => string;
+    /** Animation style (default: 'ellipsis') */
+    animation?: EditingIndicatorAnimation;
+    /** Enable animations (default: true) */
+    shouldAnimate?: boolean;
+    /** Custom icon instead of text */
+    icon?: React.ReactNode;
+    /** Theme overrides */
+    theme?: EditingIndicatorTheme;
+}
+/**
+ * Theme configuration for EditingIndicator
+ */
+export interface EditingIndicatorTheme {
+    /** Base container style */
+    baseStyle?: string;
+    /** Text label style */
+    textStyle?: string;
+    /** Avatar container style */
+    avatarContainerStyle?: string;
+    /** Ellipsis dots style */
+    ellipsisStyle?: string;
+    /** Position variants */
+    positions?: Partial<Record<EditingIndicatorPosition, string>>;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * EditingIndicator - Typing status indicator
+ *
+ * @module collaboration/EditingIndicator
+ */
+export { EditingIndicator } from './EditingIndicator';
+export { editingIndicatorTheme } from './EditingIndicator.theme';
+export { containerVariants, ellipsisVariants, pulseVariants, } from './EditingIndicator.animations';
+export type { EditingIndicatorProps, EditingIndicatorTheme, EditingIndicatorPosition, EditingIndicatorAnimation, } from './EditingIndicator.types';

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

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

package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.js

@@ -0,0 +1,126 @@
+import React__default, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { generativeRendererTheme } from './GenerativeRenderer.theme.js';
+import { Spinner } from '../../core/Spinner/Spinner.js';
+
+/**
+ * Wraps HTML content in a full document structure
+ */
+const createHTMLDocument = (content) => {
+    // If content already has <html> or <body>, use as-is
+    if (content.includes("<html") || content.includes("<!DOCTYPE")) {
+        return content;
+    }
+    // Check if content has style tags
+    content.includes("<style");
+    return `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { 
+      font-family: system-ui, -apple-system, sans-serif;
+      line-height: 1.5;
+      padding: 16px;
+      color: #1a1a1a;
+    }
+  </style>
+</head>
+<body>
+  ${content}
+</body>
+</html>
+  `.trim();
+};
+/**
+ * Converts markdown to basic HTML (lightweight, no external deps)
+ */
+const markdownToHTML = (markdown) => {
+    let html = markdown
+        // Headers
+        .replace(/^### (.*$)/gim, "<h3>$1</h3>")
+        .replace(/^## (.*$)/gim, "<h2>$1</h2>")
+        .replace(/^# (.*$)/gim, "<h1>$1</h1>")
+        // Bold & Italic
+        .replace(/\*\*\*(.*)\*\*\*/gim, "<strong><em>$1</em></strong>")
+        .replace(/\*\*(.*)\*\*/gim, "<strong>$1</strong>")
+        .replace(/\*(.*)\*/gim, "<em>$1</em>")
+        // Links
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/gim, '<a href="$2" target="_blank" rel="noopener">$1</a>')
+        // Code blocks
+        .replace(/```(\w+)?\n([\s\S]*?)```/gim, "<pre><code>$2</code></pre>")
+        // Inline code
+        .replace(/`([^`]+)`/gim, "<code>$1</code>")
+        // Line breaks to paragraphs
+        .replace(/\n\n/gim, "</p><p>")
+        .replace(/\n/gim, "<br>");
+    return `<p>${html}</p>`;
+};
+const GenerativeRenderer = ({ content, type = "html", onError, onLoad, sandboxOptions = ["allow-scripts"], showLoading = true, className, title = "Generated content preview", ...props }) => {
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const iframeRef = useRef(null);
+    // Process content based on type
+    const processedContent = useMemo(() => {
+        try {
+            switch (type) {
+                case "markdown":
+                    return createHTMLDocument(markdownToHTML(content));
+                case "react":
+                    // For React, we show the code in a styled container
+                    // Full React rendering would require a bundler like Sucrase
+                    return createHTMLDocument(`
+            <div style="background: #1e1e1e; padding: 16px; border-radius: 8px; overflow-x: auto;">
+              <pre style="color: #d4d4d4; font-family: 'Monaco', 'Consolas', monospace; font-size: 14px; margin: 0;">${content
+                        .replace(/</g, "&lt;")
+                        .replace(/>/g, "&gt;")}</pre>
+            </div>
+          `);
+                case "html":
+                default:
+                    return createHTMLDocument(content);
+            }
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error("Failed to process content");
+            setError(error);
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            return "";
+        }
+    }, [content, type, onError]);
+    // Handle iframe load
+    const handleLoad = useCallback(() => {
+        setIsLoading(false);
+        setError(null);
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+    }, [onLoad]);
+    // Handle iframe error
+    const handleError = useCallback(() => {
+        const error = new Error("Failed to load content in sandbox");
+        setError(error);
+        setIsLoading(false);
+        onError === null || onError === void 0 ? void 0 : onError(error);
+    }, [onError]);
+    // Reset loading state when content changes
+    useEffect(() => {
+        setIsLoading(true);
+        setError(null);
+    }, [content, type]);
+    // Build sandbox attribute
+    const sandboxAttribute = sandboxOptions.length > 0 ? sandboxOptions.join(" ") : undefined;
+    return (React__default.createElement("div", { className: cn(generativeRendererTheme.containerStyle, className), ...props },
+        showLoading && isLoading && !error && (React__default.createElement("div", { className: generativeRendererTheme.loadingStyle },
+            React__default.createElement(Spinner, { size: "md" }))),
+        error && (React__default.createElement("div", { className: generativeRendererTheme.errorStyle },
+            React__default.createElement(ExclamationTriangleIcon, { className: "size-8 mb-2" }),
+            React__default.createElement("p", { className: "font-medium" }, "Failed to render content"),
+            React__default.createElement("p", { className: "text-sm opacity-75 mt-1" }, error.message))),
+        !error && (React__default.createElement("iframe", { ref: iframeRef, srcDoc: processedContent, sandbox: sandboxAttribute, className: cn(generativeRendererTheme.iframeStyle, isLoading && "opacity-0"), title: title, onLoad: handleLoad, onError: handleError, "aria-label": title }))));
+};
+GenerativeRenderer.displayName = "GenerativeRenderer";
+
+export { GenerativeRenderer };

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

@@ -0,0 +1,2 @@
+import { GenerativeRendererTheme } from "./GenerativeRenderer.types";
+export declare const generativeRendererTheme: GenerativeRendererTheme;

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

@@ -0,0 +1,8 @@
+const generativeRendererTheme = {
+    containerStyle: "relative w-full h-full overflow-hidden rounded-lg border border-[var(--color-border)] bg-white",
+    iframeStyle: "w-full h-full border-0",
+    loadingStyle: "absolute inset-0 flex items-center justify-center bg-[var(--color-background)]",
+    errorStyle: "absolute inset-0 flex flex-col items-center justify-center bg-[var(--color-danger-50)] text-[var(--color-danger)] p-4 text-center",
+};
+
+export { generativeRendererTheme };

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

@@ -0,0 +1,45 @@
+import React from "react";
+export type RendererType = "html" | "react" | "markdown";
+export interface GenerativeRendererProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onError" | "onLoad"> {
+    /**
+     * Content to render (HTML, React component code, or Markdown)
+     */
+    content: string;
+    /**
+     * Type of content to render
+     * @default "html"
+     */
+    type?: RendererType;
+    /**
+     * Callback when an error occurs during rendering
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Callback when content loads successfully
+     */
+    onLoad?: () => void;
+    /**
+     * Additional sandbox restrictions for iframe
+     * @default ["allow-scripts"]
+     */
+    sandboxOptions?: string[];
+    /**
+     * Show loading state while iframe initializes
+     * @default true
+     */
+    showLoading?: boolean;
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Title for the iframe (accessibility)
+     */
+    title?: string;
+}
+export interface GenerativeRendererTheme {
+    containerStyle?: string;
+    iframeStyle?: string;
+    loadingStyle?: string;
+    errorStyle?: string;
+}

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

@@ -0,0 +1,3 @@
+export { GenerativeRenderer } from "./GenerativeRenderer";
+export type { GenerativeRendererProps, GenerativeRendererTheme, RendererType, } from "./GenerativeRenderer.types";
+export { generativeRendererTheme } from "./GenerativeRenderer.theme";

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { MessageHistoryProps } from "./MessageHistory.types";
+/**
+ * MessageHistory - Virtualized message container with auto-scroll
+ *
+ * Displays a scrollable list of chat messages with support for
+ * auto-scrolling on new messages and optional virtualization.
+ *
+ * @example
+ * ```tsx
+ * <MessageHistory
+ *   messages={messages}
+ *   virtualizeThreshold={50}
+ *   autoScroll
+ * />
+ * ```
+ */
+export declare const MessageHistory: React.ForwardRefExoticComponent<MessageHistoryProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/MessageHistory/MessageHistory.js

@@ -0,0 +1,100 @@
+import React__default, { useRef, useCallback, useEffect, useMemo } from 'react';
+import { messageHistoryTheme } from './MessageHistory.theme.js';
+import { Message } from '../../core/Message/Message.js';
+import '../../core/Message/TypeWriter.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * MessageHistory - Virtualized message container with auto-scroll
+ *
+ * Displays a scrollable list of chat messages with support for
+ * auto-scrolling on new messages and optional virtualization.
+ *
+ * @example
+ * ```tsx
+ * <MessageHistory
+ *   messages={messages}
+ *   virtualizeThreshold={50}
+ *   autoScroll
+ * />
+ * ```
+ */
+const MessageHistory = React__default.forwardRef(({ messages, virtualizeThreshold = 50, autoScroll = true, showTimestamps = true, renderMessage, onCopyMessage, onRegenerateMessage, className, theme: customTheme = {}, ...props }, ref) => {
+    const scrollRef = useRef(null);
+    const lastMessageCountRef = useRef(0);
+    const userHasScrolledRef = useRef(false);
+    // Determine if virtualization should be enabled
+    const shouldVirtualize = messages.length > virtualizeThreshold;
+    // For simple virtualization, track visible range
+    const [visibleRange, setVisibleRange] = React__default.useState({
+        start: 0,
+        end: 50,
+    });
+    // Merge theme
+    const containerStyle = customTheme.containerStyle || messageHistoryTheme.containerStyle;
+    const scrollAreaStyle = customTheme.scrollAreaStyle || messageHistoryTheme.scrollAreaStyle;
+    const messageListStyle = customTheme.messageListStyle || messageHistoryTheme.messageListStyle;
+    const emptyStateStyle = customTheme.emptyStateStyle || messageHistoryTheme.emptyStateStyle;
+    // Scroll to bottom
+    const scrollToBottom = useCallback(() => {
+        if (scrollRef.current) {
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+        }
+    }, []);
+    // Auto-scroll on new messages
+    useEffect(() => {
+        if (autoScroll && messages.length > lastMessageCountRef.current) {
+            // Only auto-scroll if user hasn't manually scrolled up
+            if (!userHasScrolledRef.current) {
+                scrollToBottom();
+            }
+        }
+        lastMessageCountRef.current = messages.length;
+    }, [messages.length, autoScroll, scrollToBottom]);
+    // Track user scroll position
+    const handleScroll = useCallback(() => {
+        if (!scrollRef.current)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+        const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
+        userHasScrolledRef.current = !isAtBottom;
+        // Update visible range for virtualization
+        if (shouldVirtualize) {
+            const itemHeight = 100; // Approximate message height
+            const start = Math.max(0, Math.floor(scrollTop / itemHeight) - 5);
+            const end = Math.min(messages.length, start + Math.ceil(clientHeight / itemHeight) + 10);
+            setVisibleRange({ start, end });
+        }
+    }, [shouldVirtualize, messages.length]);
+    // Initial scroll to bottom
+    useEffect(() => {
+        scrollToBottom();
+    }, [scrollToBottom]);
+    // Get visible messages
+    const visibleMessages = useMemo(() => {
+        if (!shouldVirtualize)
+            return messages;
+        return messages.slice(visibleRange.start, visibleRange.end);
+    }, [messages, shouldVirtualize, visibleRange]);
+    // Default message renderer
+    const defaultRenderMessage = useCallback((message, index) => (React__default.createElement(Message, { key: message.id, role: message.role, content: message.content, timestamp: message.timestamp, avatar: message.avatar, showTimestamp: showTimestamps, isStreaming: message.isStreaming, onCopy: onCopyMessage ? () => onCopyMessage(message) : undefined, onRegenerate: onRegenerateMessage ? () => onRegenerateMessage(message) : undefined })), [showTimestamps, onCopyMessage, onRegenerateMessage]);
+    // Empty state
+    if (messages.length === 0) {
+        return (React__default.createElement("div", { ref: ref, className: cn(containerStyle, className), ...props },
+            React__default.createElement("div", { className: emptyStateStyle },
+                React__default.createElement("p", null, "No messages yet. Start a conversation!"))));
+    }
+    return (React__default.createElement("div", { ref: ref, className: cn(containerStyle, className), ...props },
+        React__default.createElement("div", { ref: scrollRef, className: scrollAreaStyle, onScroll: handleScroll, role: "log", "aria-label": "Message history", "aria-live": "polite" },
+            React__default.createElement("div", { className: messageListStyle, style: shouldVirtualize
+                    ? {
+                        paddingTop: `${visibleRange.start * 100}px`,
+                        paddingBottom: `${(messages.length - visibleRange.end) * 100}px`,
+                    }
+                    : undefined }, visibleMessages.map((message, index) => renderMessage
+                ? renderMessage(message, visibleRange.start + index)
+                : defaultRenderMessage(message, visibleRange.start + index))))));
+});
+MessageHistory.displayName = "MessageHistory";
+
+export { MessageHistory };

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

@@ -0,0 +1,2 @@
+import { MessageHistoryTheme } from "./MessageHistory.types";
+export declare const messageHistoryTheme: MessageHistoryTheme;

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

@@ -0,0 +1,8 @@
+const messageHistoryTheme = {
+    containerStyle: "flex flex-col h-full",
+    scrollAreaStyle: "flex-1 overflow-y-auto scroll-smooth",
+    messageListStyle: "flex flex-col gap-4 p-4",
+    emptyStateStyle: "flex items-center justify-center h-full text-[var(--color-text-muted)]",
+};
+
+export { messageHistoryTheme };

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

@@ -0,0 +1,94 @@
+import { ReactNode } from "react";
+import { MessageRole, MessageAvatarProps } from "../../core/Message";
+/**
+ * Message data structure for MessageHistory
+ */
+export interface ChatMessageData {
+    /**
+     * Unique identifier for the message
+     */
+    id: string;
+    /**
+     * Role of the message sender
+     */
+    role: MessageRole;
+    /**
+     * Message content (text or ReactNode)
+     */
+    content: ReactNode;
+    /**
+     * Timestamp of the message
+     */
+    timestamp?: Date | string;
+    /**
+     * Avatar configuration
+     */
+    avatar?: MessageAvatarProps;
+    /**
+     * Whether the message is currently streaming
+     */
+    isStreaming?: boolean;
+}
+/**
+ * MessageHistory component props
+ */
+export interface MessageHistoryProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of messages to display
+     */
+    messages: ChatMessageData[];
+    /**
+     * Threshold for enabling virtualization
+     * When messages.length > virtualizeThreshold, virtualization is enabled
+     * @default 50
+     */
+    virtualizeThreshold?: number;
+    /**
+     * Whether to auto-scroll to bottom on new messages
+     * @default true
+     */
+    autoScroll?: boolean;
+    /**
+     * Whether to show timestamps
+     * @default true
+     */
+    showTimestamps?: boolean;
+    /**
+     * Custom render function for messages
+     */
+    renderMessage?: (message: ChatMessageData, index: number) => ReactNode;
+    /**
+     * Callback when copy button is clicked
+     */
+    onCopyMessage?: (message: ChatMessageData) => void;
+    /**
+     * Callback when regenerate button is clicked
+     */
+    onRegenerateMessage?: (message: ChatMessageData) => void;
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: MessageHistoryThemeOverrides;
+}
+/**
+ * Theme configuration
+ */
+export interface MessageHistoryTheme {
+    containerStyle: string;
+    scrollAreaStyle: string;
+    messageListStyle: string;
+    emptyStateStyle: string;
+}
+/**
+ * Theme overrides
+ */
+export interface MessageHistoryThemeOverrides {
+    containerStyle?: string;
+    scrollAreaStyle?: string;
+    messageListStyle?: string;
+    emptyStateStyle?: string;
+}

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

@@ -0,0 +1,3 @@
+export { MessageHistory } from "./MessageHistory";
+export { messageHistoryTheme } from "./MessageHistory.theme";
+export type { MessageHistoryProps, ChatMessageData, MessageHistoryTheme, MessageHistoryThemeOverrides, } from "./MessageHistory.types";

package/dist/components/ai/PresenceIndicator/PresenceIndicator.animations.d.ts

@@ -0,0 +1,17 @@
+/**
+ * PresenceIndicator Animations
+ *
+ * Framer Motion animation variants for the presence indicator.
+ * Import from 'motion/react'.
+ */
+import { Variants } from "motion/react";
+/**
+ * Container animation
+ * Scales in the entire group and staggers children
+ */
+export declare const containerVariants: Variants;
+/**
+ * Item animation (for custom avatars)
+ * Pops in individual avatars
+ */
+export declare const itemVariants: Variants;