@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,97 @@
+import { jsx } from 'react/jsx-runtime';
+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) => (jsx(Message, { 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 }, message.id)), [showTimestamps, onCopyMessage, onRegenerateMessage]);
+    // Empty state
+    if (messages.length === 0) {
+        return (jsx("div", { ref: ref, className: cn(containerStyle, className), ...props, children: jsx("div", { className: emptyStateStyle, children: jsx("p", { children: "No messages yet. Start a conversation!" }) }) }));
+    }
+    return (jsx("div", { ref: ref, className: cn(containerStyle, className), ...props, children: jsx("div", { ref: scrollRef, className: scrollAreaStyle, onScroll: handleScroll, role: "log", "aria-label": "Message history", "aria-live": "polite", children: jsx("div", { className: messageListStyle, style: shouldVirtualize
+                    ? {
+                        paddingTop: `${visibleRange.start * 100}px`,
+                        paddingBottom: `${(messages.length - visibleRange.end) * 100}px`,
+                    }
+                    : undefined, children: 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/PromptInput/PromptInput.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { PromptInputProps } from "./PromptInput.types";
+/**
+ * AI prompt input component with integrated controls for model selection,
+ * attachments, voice input, and settings.
+ *
+ * Supports both controlled and uncontrolled patterns for maximum flexibility.
+ *
+ * @example Uncontrolled usage
+ * ```tsx
+ * <PromptInput onSubmit={(text, model) => handlePrompt(text, model)} />
+ * ```
+ *
+ * @example Controlled usage
+ * ```tsx
+ * <PromptInput
+ *   value={prompt}
+ *   onChange={setPrompt}
+ *   selectedModel={model}
+ *   onModelChange={setModel}
+ * />
+ * ```
+ */
+export declare const PromptInput: React.ForwardRefExoticComponent<PromptInputProps & React.RefAttributes<HTMLTextAreaElement>>;