mastra 0.1.57-alpha.9 → 0.1.57-unstable.34

package/dist/src/shared/components/ui/chat.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ThumbsDown, ThumbsUp } from 'lucide-react';
+import { forwardRef, useCallback, useState } from 'react';
+import { Button } from '../../components/ui/button';
+import { CopyButton } from '../../components/ui/copy-button';
+import { MessageInput } from '../../components/ui/message-input';
+import { MessageList } from '../../components/ui/message-list';
+import { PromptSuggestions } from '../../components/ui/prompt-suggestions';
+import { useAutoScroll } from '../../hooks/use-auto-scroll';
+import { cn } from '../../lib/utils';
+export function Chat({ messages, handleSubmit, input, handleInputChange, stop, isGenerating, append, suggestions, className, onRateResponse, }) {
+    const lastMessage = messages.at(-1);
+    const isEmpty = messages.length === 0;
+    const isTyping = lastMessage?.role === 'user';
+    const messageOptions = useCallback((message) => ({
+        actions: onRateResponse ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-r pr-1", children: _jsx(CopyButton, { content: message.content, copyMessage: "Copied response to clipboard!" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-6 w-6", onClick: () => onRateResponse(message.id, 'thumbs-up'), children: _jsx(ThumbsUp, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-6 w-6", onClick: () => onRateResponse(message.id, 'thumbs-down'), children: _jsx(ThumbsDown, { className: "h-4 w-4" }) })] })) : (_jsx(CopyButton, { content: message.content, copyMessage: "Copied response to clipboard!" })),
+    }), [onRateResponse]);
+    return (_jsxs(ChatContainer, { className: className, children: [isEmpty && append && suggestions ? (_jsx(PromptSuggestions, { label: "Try these prompts \u2728", append: append, suggestions: suggestions })) : null, messages.length > 0 ? (_jsx(ChatMessages, { messages: messages, children: _jsx(MessageList, { messages: messages, isTyping: isTyping, messageOptions: messageOptions }) })) : null, _jsx(ChatForm, { className: "mt-auto", isPending: isGenerating || isTyping, handleSubmit: handleSubmit, children: ({ files, setFiles }) => (_jsx(MessageInput, { value: input, onChange: handleInputChange, allowAttachments: true, files: files, setFiles: setFiles, stop: stop, isGenerating: isGenerating })) })] }));
+}
+Chat.displayName = 'Chat';
+export function ChatMessages({ messages, children, }) {
+    const { containerRef, scrollToBottom, handleScroll, shouldAutoScroll, handleTouchStart } = useAutoScroll([messages]);
+    return (_jsxs("div", { className: "grid overflow-y-auto pb-4 grid-cols-1", ref: containerRef, onScroll: handleScroll, onTouchStart: handleTouchStart, children: [_jsx("div", { className: "[grid-column:1/1] [grid-row:1/1] max-w-full", children: children }), _jsx("div", { className: "flex justify-end items-end [grid-column:1/1] [grid-row:1/1] flex-1", children: !shouldAutoScroll && (_jsx("div", { className: "sticky bottom-0 left-0 flex w-full justify-end", children: _jsx(Button, { onClick: scrollToBottom, className: "h-8 w-8 rounded-full ease-in-out animate-in fade-in-0 slide-in-from-bottom-1", size: "icon", variant: "ghost", children: _jsx(ArrowDown, { className: "h-4 w-4" }) }) })) })] }));
+}
+export const ChatContainer = forwardRef(({ className, ...props }, ref) => {
+    return _jsx("div", { ref: ref, className: cn('grid max-h-full w-full grid-rows-[1fr_auto]', className), ...props });
+});
+ChatContainer.displayName = 'ChatContainer';
+export const ChatForm = forwardRef(({ children, handleSubmit, isPending, className }, ref) => {
+    const [files, setFiles] = useState(null);
+    const onSubmit = (event) => {
+        if (isPending) {
+            event.preventDefault();
+            return;
+        }
+        if (!files) {
+            handleSubmit(event);
+            return;
+        }
+        const fileList = createFileList(files);
+        handleSubmit(event, { experimental_attachments: fileList });
+        setFiles(null);
+    };
+    return (_jsx("form", { ref: ref, onSubmit: onSubmit, className: className, children: children({ files, setFiles }) }));
+});
+ChatForm.displayName = 'ChatForm';
+function createFileList(files) {
+    const dataTransfer = new DataTransfer();
+    for (const file of Array.from(files)) {
+        dataTransfer.items.add(file);
+    }
+    return dataTransfer.files;
+}

package/dist/src/shared/components/ui/copy-button.d.ts

@@ -0,0 +1,6 @@
+type CopyButtonProps = {
+    content: string;
+    copyMessage?: string;
+};
+export declare function CopyButton({ content, copyMessage }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/shared/components/ui/copy-button.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy } from 'lucide-react';
+import { Button } from '../../components/ui/button';
+import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard';
+import { cn } from '../../lib/utils';
+export function CopyButton({ content, copyMessage }) {
+    const { isCopied, handleCopy } = useCopyToClipboard({
+        text: content,
+        copyMessage,
+    });
+    return (_jsxs(Button, { variant: "ghost", size: "icon", className: "relative h-6 w-6", "aria-label": "Copy to clipboard", onClick: handleCopy, children: [_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Check, { className: cn('h-4 w-4 transition-transform ease-in-out', isCopied ? 'scale-100' : 'scale-0') }) }), _jsx(Copy, { className: cn('h-4 w-4 transition-transform ease-in-out', isCopied ? 'scale-0' : 'scale-100') })] }));
+}

package/dist/src/shared/components/ui/file-preview.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface FilePreviewProps {
+    file: File;
+    onRemove?: () => void;
+}
+export declare const FilePreview: React.ForwardRefExoticComponent<FilePreviewProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/shared/components/ui/file-preview.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from 'framer-motion';
+import { FileIcon, X } from 'lucide-react';
+import React, { useEffect } from 'react';
+export const FilePreview = React.forwardRef((props, ref) => {
+    if (props.file.type.startsWith('image/')) {
+        return _jsx(ImageFilePreview, { ...props, ref: ref });
+    }
+    if (props.file.type.startsWith('text/') || props.file.name.endsWith('.txt') || props.file.name.endsWith('.md')) {
+        return _jsx(TextFilePreview, { ...props, ref: ref });
+    }
+    return _jsx(GenericFilePreview, { ...props, ref: ref });
+});
+FilePreview.displayName = 'FilePreview';
+const ImageFilePreview = React.forwardRef(({ file, onRemove }, ref) => {
+    return (_jsxs(motion.div, { ref: ref, className: "relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs", layout: true, initial: { opacity: 0, y: '100%' }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: '100%' }, children: [_jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx("img", { alt: `Attachment ${file.name}`, className: "grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted object-cover", src: URL.createObjectURL(file) }), _jsx("span", { className: "w-full truncate text-muted-foreground", children: file.name })] }), onRemove ? (_jsx("button", { className: "absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background", type: "button", onClick: onRemove, "aria-label": "Remove attachment", children: _jsx(X, { className: "h-2.5 w-2.5" }) })) : null] }));
+});
+ImageFilePreview.displayName = 'ImageFilePreview';
+const TextFilePreview = React.forwardRef(({ file, onRemove }, ref) => {
+    const [preview, setPreview] = React.useState('');
+    useEffect(() => {
+        const reader = new FileReader();
+        reader.onload = e => {
+            const text = e.target?.result;
+            setPreview(text.slice(0, 50) + (text.length > 50 ? '...' : ''));
+        };
+        reader.readAsText(file);
+    }, [file]);
+    return (_jsxs(motion.div, { ref: ref, className: "relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs", layout: true, initial: { opacity: 0, y: '100%' }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: '100%' }, children: [_jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx("div", { className: "grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted p-0.5", children: _jsx("div", { className: "h-full w-full overflow-hidden text-[6px] leading-none text-muted-foreground", children: preview || 'Loading...' }) }), _jsx("span", { className: "w-full truncate text-muted-foreground", children: file.name })] }), onRemove ? (_jsx("button", { className: "absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background", type: "button", onClick: onRemove, "aria-label": "Remove attachment", children: _jsx(X, { className: "h-2.5 w-2.5" }) })) : null] }));
+});
+TextFilePreview.displayName = 'TextFilePreview';
+const GenericFilePreview = React.forwardRef(({ file, onRemove }, ref) => {
+    return (_jsxs(motion.div, { ref: ref, className: "relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs", layout: true, initial: { opacity: 0, y: '100%' }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: '100%' }, children: [_jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx("div", { className: "grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted", children: _jsx(FileIcon, { className: "h-6 w-6 text-foreground" }) }), _jsx("span", { className: "w-full truncate text-muted-foreground", children: file.name })] }), onRemove ? (_jsx("button", { className: "absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background", type: "button", onClick: onRemove, "aria-label": "Remove attachment", children: _jsx(X, { className: "h-2.5 w-2.5" }) })) : null] }));
+});
+GenericFilePreview.displayName = 'GenericFilePreview';

package/dist/src/shared/components/ui/markdown-renderer.d.ts

@@ -0,0 +1,5 @@
+interface MarkdownRendererProps {
+    children: string;
+}
+export declare function MarkdownRenderer({ children }: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element;
+export default MarkdownRenderer;

package/dist/src/shared/components/ui/markdown-renderer.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense, useState, useEffect } from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { CopyButton } from '../../components/ui/copy-button';
+import { cn } from '../../lib/utils';
+import { highlight } from './syntax-highlighter';
+export function MarkdownRenderer({ children }) {
+    const processedText = children.replace(/\\n/g, '\n');
+    return (_jsx(Markdown, { remarkPlugins: [remarkGfm], components: COMPONENTS, className: "space-y-3", children: processedText }));
+}
+const HighlightedPre = React.memo(({ children, language, ...props }) => {
+    const [tokens, setTokens] = useState([]);
+    useEffect(() => {
+        highlight(children, language).then(tokens => {
+            if (tokens)
+                setTokens(tokens);
+        });
+    }, [children, language]);
+    if (!tokens.length) {
+        return _jsx("pre", { ...props, children: children });
+    }
+    return (_jsx("pre", { ...props, children: _jsx("code", { children: tokens.map((line, lineIndex) => (_jsxs(_Fragment, { children: [_jsx("span", { children: line.map((token, tokenIndex) => {
+                            const style = typeof token.htmlStyle === 'string' ? undefined : token.htmlStyle;
+                            return (_jsx("span", { className: "text-shiki-light bg-shiki-light-bg dark:text-shiki-dark dark:bg-shiki-dark-bg", style: style, children: token.content }, tokenIndex));
+                        }) }, lineIndex), lineIndex !== tokens.length - 1 && '\n'] }))) }) }));
+});
+HighlightedPre.displayName = 'HighlightedCode';
+const CodeBlock = ({ children, className, language, ...restProps }) => {
+    const code = typeof children === 'string' ? children : childrenTakeAllStringContents(children);
+    const preClass = cn('overflow-x-scroll rounded-md border bg-background/50 p-4 font-mono text-sm [scrollbar-width:none]', className);
+    return (_jsxs("div", { className: "group/code relative mb-4", children: [_jsx(Suspense, { fallback: _jsx("pre", { className: preClass, ...restProps, children: children }), children: _jsx(HighlightedPre, { language: language, className: preClass, children: code }) }), _jsx("div", { className: "invisible absolute right-2 top-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100", children: _jsx(CopyButton, { content: code, copyMessage: "Copied code to clipboard" }) })] }));
+};
+function childrenTakeAllStringContents(element) {
+    if (typeof element === 'string') {
+        return element;
+    }
+    if (element?.props?.children) {
+        let children = element.props.children;
+        if (Array.isArray(children)) {
+            return children.map(child => childrenTakeAllStringContents(child)).join('');
+        }
+        else {
+            return childrenTakeAllStringContents(children);
+        }
+    }
+    return '';
+}
+const COMPONENTS = {
+    h1: withClass('h1', 'text-2xl font-semibold'),
+    h2: withClass('h2', 'font-semibold text-xl'),
+    h3: withClass('h3', 'font-semibold text-lg'),
+    h4: withClass('h4', 'font-semibold text-base'),
+    h5: withClass('h5', 'font-medium'),
+    strong: withClass('strong', 'font-semibold'),
+    a: withClass('a', 'text-primary underline underline-offset-2'),
+    blockquote: withClass('blockquote', 'border-l-2 border-primary pl-4'),
+    code: ({ children, className, node, ...rest }) => {
+        const match = /language-(\w+)/.exec(className || '');
+        return match ? (_jsx(CodeBlock, { className: className, language: match[1], ...rest, children: children })) : (_jsx("code", { className: cn('font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5'), ...rest, children: children }));
+    },
+    pre: ({ children }) => children,
+    ol: withClass('ol', 'list-decimal space-y-2 pl-6'),
+    ul: withClass('ul', 'list-disc space-y-2 pl-6'),
+    li: withClass('li', 'my-1.5'),
+    table: withClass('table', 'w-full border-collapse overflow-y-auto rounded-md border border-foreground/20'),
+    th: withClass('th', 'border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right'),
+    td: withClass('td', 'border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right'),
+    tr: withClass('tr', 'm-0 border-t p-0 even:bg-muted'),
+    p: withClass('p', 'whitespace-pre-wrap leading-relaxed'),
+    hr: withClass('hr', 'border-foreground/20'),
+};
+function withClass(Tag, classes) {
+    const Component = ({ node, ...props }) => _jsx(Tag, { className: classes, ...props });
+    Component.displayName = Tag;
+    return Component;
+}
+export default MarkdownRenderer;

package/dist/src/shared/components/ui/message-input.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface MessageInputBaseProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    value: string;
+    submitOnEnter?: boolean;
+    stop?: () => void;
+    isGenerating: boolean;
+}
+interface MessageInputWithoutAttachmentProps extends MessageInputBaseProps {
+    allowAttachments?: false;
+}
+interface MessageInputWithAttachmentsProps extends MessageInputBaseProps {
+    allowAttachments: true;
+    files: File[] | null;
+    setFiles: React.Dispatch<React.SetStateAction<File[] | null>>;
+}
+type MessageInputProps = MessageInputWithoutAttachmentProps | MessageInputWithAttachmentsProps;
+export declare function MessageInput({ placeholder, className, onKeyDown: onKeyDownProp, submitOnEnter, stop, isGenerating, ...props }: MessageInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageInput {
+    var displayName: string;
+}
+export {};

package/dist/src/shared/components/ui/message-input.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from 'framer-motion';
+import { ArrowUp, Paperclip, Square } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { omit } from 'remeda';
+import { Button } from '../../components/ui/button';
+import { FilePreview } from '../../components/ui/file-preview';
+import { useAutosizeTextArea } from '../../hooks/use-autosize-textarea';
+import { cn } from '../../lib/utils';
+export function MessageInput({ placeholder = 'Ask AI...', className, onKeyDown: onKeyDownProp, submitOnEnter = true, stop, isGenerating, ...props }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const addFiles = (files) => {
+        if (props.allowAttachments) {
+            props.setFiles(currentFiles => {
+                if (currentFiles === null) {
+                    return files;
+                }
+                if (files === null) {
+                    return currentFiles;
+                }
+                return [...currentFiles, ...files];
+            });
+        }
+    };
+    const onDragOver = (event) => {
+        if (props.allowAttachments !== true)
+            return;
+        event.preventDefault();
+        setIsDragging(true);
+    };
+    const onDragLeave = (event) => {
+        if (props.allowAttachments !== true)
+            return;
+        event.preventDefault();
+        setIsDragging(false);
+    };
+    const onDrop = (event) => {
+        setIsDragging(false);
+        if (props.allowAttachments !== true)
+            return;
+        event.preventDefault();
+        const dataTransfer = event.dataTransfer;
+        if (dataTransfer.files.length) {
+            addFiles(Array.from(dataTransfer.files));
+        }
+    };
+    const onPaste = (event) => {
+        const items = event.clipboardData?.items;
+        if (!items)
+            return;
+        const files = Array.from(items)
+            .map(item => item.getAsFile())
+            .filter(file => file !== null);
+        if (props.allowAttachments && files.length > 0) {
+            addFiles(files);
+        }
+    };
+    const onKeyDown = (event) => {
+        if (submitOnEnter && event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            event.currentTarget.form?.requestSubmit();
+        }
+        onKeyDownProp?.(event);
+    };
+    const textAreaRef = useRef(null);
+    const showFileList = props.allowAttachments && props.files && props.files.length > 0;
+    useAutosizeTextArea({
+        ref: textAreaRef,
+        maxHeight: 240,
+        borderWidth: 1,
+        dependencies: [props.value, showFileList],
+    });
+    return (_jsxs("div", { className: "relative flex w-full", onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: [_jsx("textarea", { "aria-label": "Write your prompt here", placeholder: placeholder, ref: textAreaRef, onPaste: onPaste, onKeyDown: onKeyDown, className: cn('w-full grow resize-none rounded-xl border border-input bg-background p-3 pr-24 text-sm ring-offset-background transition-[border] placeholder:text-muted-foreground focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50', showFileList && 'pb-16', className), ...(props.allowAttachments
+                    ? omit(props, ['allowAttachments', 'files', 'setFiles'])
+                    : omit(props, ['allowAttachments'])) }), props.allowAttachments && (_jsx("div", { className: "absolute inset-x-3 bottom-0 overflow-x-scroll py-3", children: _jsx("div", { className: "flex space-x-3", children: _jsx(AnimatePresence, { mode: "popLayout", children: props.files?.map(file => {
+                            return (_jsx(FilePreview, { file: file, onRemove: () => {
+                                    props.setFiles(files => {
+                                        if (!files)
+                                            return null;
+                                        const filtered = Array.from(files).filter(f => f !== file);
+                                        if (filtered.length === 0)
+                                            return null;
+                                        return filtered;
+                                    });
+                                } }, file.name + String(file.lastModified)));
+                        }) }) }) })), _jsxs("div", { className: "absolute right-3 top-3 flex gap-2", children: [props.allowAttachments && (_jsx(Button, { type: "button", size: "icon", variant: "outline", className: "h-8 w-8", "aria-label": "Attach a file", onClick: async () => {
+                            const files = await showFileUploadDialog();
+                            addFiles(files);
+                        }, children: _jsx(Paperclip, { className: "h-4 w-4" }) })), isGenerating && stop ? (_jsx(Button, { type: "button", size: "icon", className: "h-8 w-8", "aria-label": "Stop generating", onClick: stop, children: _jsx(Square, { className: "h-3 w-3 animate-pulse", fill: "currentColor" }) })) : (_jsx(Button, { type: "submit", size: "icon", className: "h-8 w-8 transition-opacity", "aria-label": "Send message", disabled: props.value === '' || isGenerating, children: _jsx(ArrowUp, { className: "h-5 w-5" }) }))] }), props.allowAttachments && _jsx(FileUploadOverlay, { isDragging: isDragging })] }));
+}
+MessageInput.displayName = 'MessageInput';
+function FileUploadOverlay({ isDragging }) {
+    return (_jsx(AnimatePresence, { children: isDragging && (_jsxs(motion.div, { className: "pointer-events-none absolute inset-0 flex items-center justify-center space-x-2 rounded-xl border border-dashed border-border bg-background text-sm text-muted-foreground", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, "aria-hidden": true, children: [_jsx(Paperclip, { className: "h-4 w-4" }), _jsx("span", { children: "Drop your files here to attach them." })] })) }));
+}
+function showFileUploadDialog() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    input.accept = '*/*';
+    input.click();
+    return new Promise(resolve => {
+        input.onchange = e => {
+            const files = e.currentTarget.files;
+            if (files) {
+                resolve(Array.from(files));
+                return;
+            }
+            resolve(null);
+        };
+    });
+}

package/dist/src/shared/components/ui/message-list.d.ts

@@ -0,0 +1,10 @@
+import { type ChatMessageProps, type Message } from '../../components/ui/chat-message';
+type AdditionalMessageOptions = Omit<ChatMessageProps, keyof Message>;
+interface MessageListProps {
+    messages: Message[];
+    showTimeStamps?: boolean;
+    isTyping?: boolean;
+    messageOptions?: AdditionalMessageOptions | ((message: Message) => AdditionalMessageOptions);
+}
+export declare function MessageList({ messages, showTimeStamps, isTyping, messageOptions }: MessageListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/shared/components/ui/message-list.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChatMessage } from '../../components/ui/chat-message';
+import { TypingIndicator } from '../../components/ui/typing-indicator';
+export function MessageList({ messages, showTimeStamps = true, isTyping = false, messageOptions }) {
+    return (_jsxs("div", { className: "space-y-4 overflow-visible", children: [messages.map((message, index) => {
+                const additionalOptions = typeof messageOptions === 'function' ? messageOptions(message) : messageOptions;
+                if (message.role === 'assistant' && !message.content.trim()) {
+                    return null;
+                }
+                return _jsx(ChatMessage, { showTimeStamp: showTimeStamps, ...message, ...additionalOptions }, index);
+            }), isTyping && _jsx(TypingIndicator, {})] }));
+}

package/dist/src/shared/components/ui/prompt-suggestions.d.ts

@@ -0,0 +1,10 @@
+interface PromptSuggestionsProps {
+    label: string;
+    append: (message: {
+        role: 'user';
+        content: string;
+    }) => void;
+    suggestions: string[];
+}
+export declare function PromptSuggestions({ label, append, suggestions }: PromptSuggestionsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/shared/components/ui/prompt-suggestions.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PromptSuggestions({ label, append, suggestions }) {
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx("h2", { className: "text-center text-2xl font-bold", children: label }), _jsx("div", { className: "flex flex-col sm:flex-row gap-6 text-sm items-center justify-center", children: suggestions.map(suggestion => (_jsx("button", { onClick: () => append({ role: 'user', content: suggestion }), className: "h-max  rounded-xl border bg-background p-4 hover:bg-muted", children: _jsx("p", { children: suggestion }) }, suggestion))) })] }));
+}

package/dist/src/shared/components/ui/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollBar };

package/dist/src/shared/components/ui/scroll-area.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn('relative overflow-hidden', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = 'vertical', ...props }, ref) => (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, orientation: orientation, className: cn('flex touch-none select-none transition-colors', orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]', orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]', className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" }) })));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+export { ScrollArea, ScrollBar };

package/dist/src/shared/components/ui/sonner.d.ts

@@ -0,0 +1,4 @@
+import { Toaster as Sonner } from 'sonner';
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+declare const Toaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+export { Toaster };

package/dist/src/shared/components/ui/sonner.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner } from 'sonner';
+const Toaster = ({ ...props }) => {
+    const { theme = 'system' } = useTheme();
+    return (_jsx(Sonner, { theme: theme, className: "toaster group", toastOptions: {
+            classNames: {
+                toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+                description: 'group-[.toast]:text-muted-foreground',
+                actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+                cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+            },
+        }, ...props }));
+};
+export { Toaster };

package/dist/src/shared/components/ui/syntax-highlighter.d.ts

@@ -0,0 +1 @@
+export declare function highlight(code: string, language: string): Promise<import("shiki").ThemedToken[][]>;

package/dist/src/shared/components/ui/syntax-highlighter.js

@@ -0,0 +1,14 @@
+export async function highlight(code, language) {
+    const { codeToTokens, bundledLanguages } = await import('shiki');
+    if (!(language in bundledLanguages))
+        return null;
+    const { tokens } = await codeToTokens(code, {
+        lang: language,
+        defaultColor: false,
+        themes: {
+            light: 'github-light',
+            dark: 'github-dark',
+        },
+    });
+    return tokens;
+}

package/dist/src/shared/components/ui/theme-provider.d.ts

@@ -0,0 +1,12 @@
+type Theme = 'dark' | 'light' | 'system';
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    attribute?: string;
+};
+export declare function ThemeProvider({ children, defaultTheme }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+export {};

package/dist/src/shared/components/ui/theme-provider.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from 'react';
+const ThemeProviderContext = createContext({
+    theme: 'system',
+    setTheme: () => null,
+});
+export function ThemeProvider({ children, defaultTheme = 'system' }) {
+    const [theme, setTheme] = useState(defaultTheme);
+    useEffect(() => {
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+        if (theme === 'system') {
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            root.classList.add(systemTheme);
+            return;
+        }
+        root.classList.add(theme);
+    }, [theme]);
+    return _jsx(ThemeProviderContext.Provider, { value: { theme, setTheme }, children: children });
+}
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext);
+    if (context === undefined)
+        throw new Error('useTheme must be used within a ThemeProvider');
+    return context;
+};

package/dist/src/shared/components/ui/typing-indicator.d.ts

@@ -0,0 +1 @@
+export declare function TypingIndicator(): import("react/jsx-runtime").JSX.Element;

package/dist/src/shared/components/ui/typing-indicator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dot } from 'lucide-react';
+export function TypingIndicator() {
+    return (_jsx("div", { className: "justify-left flex space-x-1", children: _jsx("div", { className: "rounded-lg bg-muted p-3", children: _jsxs("div", { className: "flex -space-x-2.5", children: [_jsx(Dot, { className: "h-5 w-5 animate-typing-dot-bounce" }), _jsx(Dot, { className: "h-5 w-5 animate-typing-dot-bounce [animation-delay:90ms]" }), _jsx(Dot, { className: "h-5 w-5 animate-typing-dot-bounce [animation-delay:180ms]" })] }) }) }));
+}

package/dist/src/shared/hooks/use-auto-scroll.d.ts

@@ -0,0 +1,7 @@
+export declare function useAutoScroll(dependencies: React.DependencyList): {
+    containerRef: import("react").MutableRefObject<HTMLDivElement>;
+    scrollToBottom: () => void;
+    handleScroll: () => void;
+    shouldAutoScroll: boolean;
+    handleTouchStart: () => void;
+};

package/dist/src/shared/hooks/use-auto-scroll.js

@@ -0,0 +1,48 @@
+import { useEffect, useRef, useState } from 'react';
+// How many pixels from the bottom of the container to enable auto-scroll
+const ACTIVATION_THRESHOLD = 50;
+export function useAutoScroll(dependencies) {
+    const containerRef = useRef(null);
+    const previousScrollTop = useRef(null);
+    const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
+    const scrollToBottom = () => {
+        if (containerRef.current) {
+            containerRef.current.scrollTop = containerRef.current.scrollHeight;
+        }
+    };
+    const handleScroll = () => {
+        if (containerRef.current) {
+            const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+            const isScrollingUp = previousScrollTop.current ? scrollTop < previousScrollTop.current : false;
+            if (isScrollingUp) {
+                setShouldAutoScroll(false);
+            }
+            else {
+                const isScrolledToBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < ACTIVATION_THRESHOLD;
+                setShouldAutoScroll(isScrolledToBottom);
+            }
+            previousScrollTop.current = scrollTop;
+        }
+    };
+    const handleTouchStart = () => {
+        setShouldAutoScroll(false);
+    };
+    useEffect(() => {
+        if (containerRef.current) {
+            previousScrollTop.current = containerRef.current.scrollTop;
+        }
+    }, []);
+    useEffect(() => {
+        if (shouldAutoScroll) {
+            scrollToBottom();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, dependencies);
+    return {
+        containerRef,
+        scrollToBottom,
+        handleScroll,
+        shouldAutoScroll,
+        handleTouchStart,
+    };
+}

package/dist/src/shared/hooks/use-autosize-textarea.d.ts

@@ -0,0 +1,8 @@
+interface UseAutosizeTextAreaProps {
+    ref: React.RefObject<HTMLTextAreaElement>;
+    maxHeight?: number;
+    borderWidth?: number;
+    dependencies: React.DependencyList;
+}
+export declare function useAutosizeTextArea({ ref, maxHeight, borderWidth, dependencies, }: UseAutosizeTextAreaProps): void;
+export {};

package/dist/src/shared/hooks/use-autosize-textarea.js

@@ -0,0 +1,21 @@
+import { useLayoutEffect, useRef } from 'react';
+export function useAutosizeTextArea({ ref, maxHeight = Number.MAX_SAFE_INTEGER, borderWidth = 0, dependencies, }) {
+    const originalHeight = useRef(null);
+    useLayoutEffect(() => {
+        if (!ref.current)
+            return;
+        const currentRef = ref.current;
+        const borderAdjustment = borderWidth * 2;
+        if (originalHeight.current === null) {
+            originalHeight.current = currentRef.scrollHeight - borderAdjustment;
+        }
+        currentRef.style.removeProperty('height');
+        const scrollHeight = currentRef.scrollHeight;
+        // Make sure we don't go over maxHeight
+        const clampedToMax = Math.min(scrollHeight, maxHeight);
+        // Make sure we don't go less than the original height
+        const clampedToMin = Math.max(clampedToMax, originalHeight.current);
+        currentRef.style.height = `${clampedToMin + borderAdjustment}px`;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [maxHeight, ref, ...dependencies]);
+}

package/dist/src/shared/hooks/use-copy-to-clipboard.d.ts

@@ -0,0 +1,9 @@
+type UseCopyToClipboardProps = {
+    text: string;
+    copyMessage?: string;
+};
+export declare function useCopyToClipboard({ text, copyMessage }: UseCopyToClipboardProps): {
+    isCopied: boolean;
+    handleCopy: () => void;
+};
+export {};

package/dist/src/shared/hooks/use-copy-to-clipboard.js

@@ -0,0 +1,25 @@
+import { useCallback, useRef, useState } from 'react';
+import { toast } from 'sonner';
+export function useCopyToClipboard({ text, copyMessage = 'Copied to clipboard!' }) {
+    const [isCopied, setIsCopied] = useState(false);
+    const timeoutRef = useRef(null);
+    const handleCopy = useCallback(() => {
+        navigator.clipboard
+            .writeText(text)
+            .then(() => {
+            toast.success(copyMessage);
+            setIsCopied(true);
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+            timeoutRef.current = setTimeout(() => {
+                setIsCopied(false);
+            }, 2000);
+        })
+            .catch(() => {
+            toast.error('Failed to copy to clipboard.');
+        });
+    }, [text, copyMessage]);
+    return { isCopied, handleCopy };
+}