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

package/dist/index.js

@@ -1,98 +1,229 @@
 #! /usr/bin/env node
-import chalk from 'chalk';
+import * as p from '@clack/prompts';
 import { Command } from 'commander';
-import { retro } from 'gradient-string';
-import { createNewAgent } from './commands/agents/createNewAgent.js';
-import { listAgents } from './commands/agents/listAgents.js';
-import { updateAgentIndexFile } from './commands/agents/updateAgentFile.js';
+import color from 'picocolors';
+import { PosthogAnalytics } from './analytics/index.js';
+import { createNewAgent } from './commands/agents/create-new-agent.js';
+import { listAgents } from './commands/agents/list-agent.js';
+import { updateAgentIndexFile } from './commands/agents/update-agent-file.js';
+import { cloudflareDeploy, netlifyDeploy, vercelDeploy } from './commands/deploy/index.js';
+import { dev } from './commands/dev.js';
 import { generate } from './commands/generate.js';
-import { init } from './commands/init.js';
-import { installEngineDeps } from './commands/installEngineDeps.js';
+import { init } from './commands/init/init.js';
+import { checkPkgJsonAndCreateStarter, interactivePrompt } from './commands/init/utils.js';
+import { installEngineDeps } from './commands/install-engine-deps.js';
 import { migrate } from './commands/migrate.js';
 import { provision } from './commands/provision.js';
-import { serve } from './commands/serve.js';
-import { getEnv } from './utils/getEnv.js';
-import { setupEnvFile } from './utils/setupEnvFile.js';
+import { findApiKeys } from './utils/find-api-keys.js';
+import { getEnv } from './utils/get-env.js';
+import { getPackageVersion } from './utils/get-package-version.js';
+import { logger } from './utils/logger.js';
+import { setupEnvFile } from './utils/setup-env-file.js';
+const version = await getPackageVersion();
+const analytics = new PosthogAnalytics({
+    apiKey: 'phc_yfAcSuemwdkkLzl6F6q4uyRGeUkHSHMHq9W2ZaRicZw',
+    host: 'https://us.posthog.com',
+    version: version,
+});
 const program = new Command();
-const version = '0.1.57-alpha.7';
-const text = retro(`
-███╗   ███╗ █████╗ ███████╗████████╗██████╗  █████╗ 
-████╗ ████║██╔══██╗██╔════╝╚══██╔══╝██╔══██╗██╔══██╗
-██╔████╔██║███████║███████╗   ██║   ██████╔╝███████║
-██║╚██╔╝██║██╔══██║╚════██║   ██║   ██╔══██╗██╔══██║
-██║ ╚═╝ ██║██║  ██║███████║   ██║   ██║  ██║██║  ██║
-╚═╝     ╚═╝╚═╝  ╚═╝╚══════╝   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝
-`);
 program
-    .version(`${version}`)
-    .description(`mastra CLI ${version}`)
+    .version(`${version}`, '-v, --version')
+    .description(`Mastra CLI ${version}`)
     .action(() => {
-    console.log(text);
+    try {
+        analytics.trackCommand({
+            command: 'version',
+        });
+        console.log(`Mastra CLI: ${version}`);
+    }
+    catch (e) { }
 });
 program
     .command('init')
     .description('Initialize a new Mastra project')
-    .action(() => {
-    init();
+    .option('--default', 'Quick start with defaults(src, OpenAI, no examples)')
+    .option('-d, --dir <directory>', 'Directory for Mastra files to (defaults to src/)')
+    .option('-c, --components <components>', 'Comma-separated list of components (agents, tools, workflows)')
+    .option('-l, --llm <model-provider>', 'Default model provider (openai, anthropic, or groq))')
+    .option('-e, --example', 'Include example code')
+    .option('-ne, --no-example', 'Skip example code')
+    .action(async (args) => {
+    await analytics.trackCommandExecution({
+        command: 'init',
+        args,
+        execution: async () => {
+            await checkPkgJsonAndCreateStarter();
+            if (!Object.keys(args).length)
+                return interactivePrompt();
+            if (args?.default) {
+                init({
+                    directory: 'src/',
+                    components: ['agents', 'tools', 'workflows'],
+                    llmProvider: 'openai',
+                    addExample: false,
+                    showSpinner: true,
+                });
+                return;
+            }
+            const componentsArr = args.components ? args.components.split(',') : [];
+            init({
+                directory: args.dir,
+                components: componentsArr,
+                llmProvider: args.llm,
+                addExample: args.example,
+                showSpinner: true,
+            });
+            return;
+        },
+    });
 });
 program
-    .command('serve')
+    .command('dev')
     .description('Start mastra server')
+    .option('-d, --dir <dir>', 'Path to your mastra folder')
     .option('-e, --env <env>', 'Environment File to use (defaults to .env.development)')
-    .action(() => {
-    serve(4111);
+    .action(args => {
+    analytics.trackCommand({
+        command: 'dev',
+    });
+    const apiKeys = findApiKeys();
+    dev({ port: 4111, env: apiKeys, dir: args?.dir });
 });
 const engine = program.command('engine').description('Manage the mastra engine');
 engine
     .command('add')
     .description('Add the mastra engine to your application')
-    .action(() => {
-    installEngineDeps();
+    .action(async () => {
+    await analytics.trackCommandExecution({
+        command: 'engine add',
+        args: {},
+        execution: async () => {
+            await installEngineDeps();
+            const { dbUrl } = await provision();
+            await setupEnvFile({ dbUrl });
+        },
+    });
 });
 engine
     .command('generate')
     .description('Generate types and drizzle client')
-    .action(() => {
-    generate(process.env.DB_URL);
+    .action(async () => {
+    await analytics.trackCommandExecution({
+        command: 'engine generate',
+        args: {},
+        execution: async () => {
+            await generate(process.env.DB_URL);
+        },
+    });
 });
 engine
     .command('up')
     .description('Runs docker-compose up to start docker containers')
     .action(async () => {
-    const { dbUrl } = await provision();
-    await setupEnvFile({ dbUrl });
+    await analytics.trackCommandExecution({
+        command: 'engine up',
+        args: {},
+        execution: async () => {
+            const { dbUrl } = await provision();
+            await setupEnvFile({ dbUrl });
+        },
+    });
 });
 engine
     .command('migrate')
     .description('Migrate the Mastra database forward')
-    .action(() => {
-    const dbUrl = getEnv();
-    if (dbUrl) {
-        void migrate(dbUrl);
-    }
-    else {
-        console.error('Please add DB_URL to your .env file');
-        console.info(`Run ${chalk.blueBright('Mastra engine up')} to get started with a pg db`);
-    }
+    .action(async () => {
+    await analytics.trackCommandExecution({
+        command: 'engine migrate',
+        args: {},
+        execution: async () => {
+            const dbUrl = getEnv();
+            if (dbUrl) {
+                await migrate(dbUrl);
+            }
+            else {
+                logger.log('Please add DB_URL to your .env.development file');
+                logger.log(`Run ${color.blueBright('mastra engine up')} to get started with a pg db`);
+            }
+        },
+    });
 });
-const agent = program.command('agent').description('Manage the mastra agent');
+const agent = program.command('agent').description('Manage Mastra agents');
 agent
     .command('new')
     .description('Create a new agent')
-    .action(async () => {
-    const result = await createNewAgent();
-    if (!result)
-        return;
-    await updateAgentIndexFile(result);
+    .option('-d, --dir <dir>', 'Path to your mastra folder')
+    .action(async (args) => {
+    await analytics.trackCommandExecution({
+        command: 'agent new',
+        args: {},
+        execution: async () => {
+            const result = await createNewAgent({ dir: args?.dir });
+            if (!result)
+                return;
+            await updateAgentIndexFile({ newAgentName: result, dir: args?.dir });
+        },
+    });
 });
 agent
     .command('list')
     .description('List all agents')
-    .action(async () => {
-    const agents = await listAgents();
-    console.log('Agents:');
-    agents.forEach((agent, index) => {
-        console.log(`${index + 1}. ${chalk.blueBright(agent)}`);
+    .option('-d, --dir <dir>', 'Path to your mastra folder')
+    .action(async (args) => {
+    await analytics.trackCommandExecution({
+        command: 'agent list',
+        args,
+        execution: async () => {
+            const agents = await listAgents({ dir: args?.dir });
+            if (!agents.length) {
+                p.note('No Agents...');
+                return;
+            }
+            p.intro(color.bgCyan(color.black(' Agents List ')));
+            agents.forEach((agent, index) => {
+                logger.log(`${index + 1}. ${color.blue(agent)}`);
+            });
+        },
+    });
+});
+const deploy = program.command('deploy').description('Deploy your Mastra project');
+deploy
+    .command('vercel')
+    .description('Deploy your Mastra project to Vercel')
+    .option('-d, --dir <dir>', 'Path to your mastra folder')
+    .action(async (args) => {
+    await analytics.trackCommandExecution({
+        command: 'deploy vercel',
+        args,
+        execution: async () => {
+            await vercelDeploy({ dir: args?.dir });
+        },
+    });
+});
+deploy
+    .command('cloudflare')
+    .description('Deploy your Mastra project to Cloudflare')
+    .option('-d, --dir <dir>', 'Path to your mastra folder')
+    .action(async (args) => {
+    await analytics.trackCommandExecution({
+        command: 'deploy cloudflare',
+        args,
+        execution: async () => {
+            await cloudflareDeploy({ dir: args?.dir });
+        },
+    });
+});
+deploy
+    .command('netlify')
+    .description('Deploy your Mastra project to Netlify')
+    .option('-d, --dir <dir>', 'Path to your mastra folder')
+    .action(async (args) => {
+    await analytics.trackCommandExecution({
+        command: 'deploy netlify',
+        args,
+        execution: async () => {
+            await netlifyDeploy({ dir: args?.dir });
+        },
     });
 });
 program.parse(process.argv);

package/dist/shared/components/Chat.d.ts

@@ -0,0 +1,2 @@
+import { ChatProps } from '../types';
+export declare function Chat({ agentId, initialMessages }: ChatProps): import("react/jsx-runtime").JSX.Element;

package/dist/shared/components/Chat.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { ChatContainer, ChatForm, ChatMessages } from './ui/chat';
+import { MessageInput } from './ui/message-input';
+import { MessageList } from './ui/message-list';
+import { PromptSuggestions } from './ui/prompt-suggestions';
+import { ScrollArea } from './ui/scroll-area';
+export function Chat({ agentId, initialMessages = [] }) {
+    const [messages, setMessages] = useState(initialMessages);
+    const [input, setInput] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const handleInputChange = useCallback((e) => {
+        setInput(e.target.value);
+    }, []);
+    const handleSubmit = async (event) => {
+        event?.preventDefault?.();
+        if (!input.trim() || isLoading)
+            return;
+        const userMessage = input;
+        setInput('');
+        setIsLoading(true);
+        const newUserMessage = {
+            id: Date.now().toString(),
+            role: 'user',
+            content: userMessage,
+        };
+        const newAssistantMessage = {
+            id: (Date.now() + 1).toString(),
+            role: 'assistant',
+            content: '',
+        };
+        setMessages(prev => [...prev, newUserMessage, newAssistantMessage]);
+        try {
+            const response = await fetch('/agent/' + agentId + '/stream', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ messages: [userMessage] }),
+            });
+            if (!response.body)
+                return;
+            if (response.status !== 200) {
+                const error = await response.json();
+                setMessages(prev => [
+                    ...prev.slice(0, -1),
+                    {
+                        ...prev[prev.length - 1],
+                        content: error.error,
+                        isError: true,
+                    },
+                ]);
+                return;
+            }
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+            let assistantMessage = '';
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                const chunk = decoder.decode(value);
+                buffer += chunk;
+                const matches = buffer.matchAll(/0:"([^"]*)"/g);
+                for (const match of matches) {
+                    const content = match[1];
+                    assistantMessage += content;
+                    setMessages(prev => [...prev.slice(0, -1), { ...prev[prev.length - 1], content: assistantMessage }]);
+                }
+                buffer = '';
+            }
+        }
+        catch (error) {
+            console.error('Error:', error);
+            setMessages(prev => [
+                ...prev.slice(0, -1),
+                {
+                    ...prev[prev.length - 1],
+                    content: 'An error occurred while processing your request.',
+                    isError: true,
+                },
+            ]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const lastMessage = messages.at(-1);
+    const isEmpty = messages.length === 0;
+    const isTyping = lastMessage?.role === 'user' || (lastMessage?.role === 'assistant' && !lastMessage?.content.trim());
+    const append = useCallback((message) => {
+        setInput(message.content);
+        handleSubmit();
+    }, [handleSubmit]);
+    const suggestions = ['What capabilities do you have?', 'How can you help me?', 'Tell me about yourself'];
+    return (_jsxs(ChatContainer, { className: "h-[calc(100vh-50px)] p-4 lg:px-[10rem] max-w-[1000px] mx-auto", children: [_jsxs("div", { className: "flex flex-col h-full py-4", children: [_jsx("div", { className: "mb-4 flex justify-center", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [_jsx("circle", { cx: "18.0002", cy: "18.0002", r: "15.2365", stroke: "currentColor", strokeWidth: "1.25409" }), _jsx("ellipse", { cx: "18.0008", cy: "18", rx: "15.2365", ry: "10.2193", transform: "rotate(45 18.0008 18)", stroke: "currentColor", strokeWidth: "1.25409" }), _jsx("path", { d: "M11.7793 18.0547H24.3007", stroke: "currentColor", strokeWidth: "1.25409" }), _jsx("path", { d: "M14.8574 21.2354L21.2192 14.8736", stroke: "currentColor", strokeWidth: "1.25409" }), _jsx("path", { d: "M21.2207 21.2354L14.8589 14.8736", stroke: "currentColor", strokeWidth: "1.25409" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.57571 11.2943C4.93105 13.0681 3.39081 15.4508 3.39081 17.9997C3.39081 20.5486 4.93105 22.9313 7.57571 24.7051C10.2163 26.4762 13.9001 27.592 18.0003 27.592C22.1004 27.592 25.7842 26.4762 28.4248 24.7051C31.0695 22.9313 32.6097 20.5486 32.6097 17.9997C32.6097 15.4508 31.0695 13.0681 28.4248 11.2943C25.7842 9.5232 22.1004 8.40741 18.0003 8.40741C13.9001 8.40741 10.2163 9.5232 7.57571 11.2943ZM6.87715 10.2528C9.75106 8.32521 13.6855 7.15332 18.0003 7.15332C22.315 7.15332 26.2495 8.32521 29.1234 10.2528C31.9932 12.1776 33.8638 14.9046 33.8638 17.9997C33.8638 21.0948 31.9932 23.8218 29.1234 25.7466C26.2495 27.6742 22.315 28.8461 18.0003 28.8461C13.6855 28.8461 9.75106 27.6742 6.87715 25.7466C4.00728 23.8218 2.13672 21.0948 2.13672 17.9997C2.13672 14.9046 4.00728 12.1776 6.87715 10.2528Z", fill: "currentColor" })] }) }), isEmpty ? (_jsx("div", { className: "mx-auto max-w-2xl", children: _jsx(PromptSuggestions, { label: `Chat with ${agentId}`, append: append, suggestions: suggestions }) })) : (_jsx(ScrollArea, { className: " h-[calc(100vh-15rem)] px-4", children: _jsx(ChatMessages, { messages: messages, children: _jsx(MessageList, { messages: messages, isTyping: isTyping }) }) }))] }), _jsx(ChatForm, { className: "mt-auto ", isPending: isLoading || isTyping, handleSubmit: handleSubmit, children: ({ files, setFiles }) => (_jsx(MessageInput, { value: input, onChange: handleInputChange, files: files, setFiles: setFiles, isGenerating: isLoading, placeholder: `Enter your message...` })) })] }));
+}

package/dist/shared/components/ui/button.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: {
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
+    size?: "default" | "sm" | "lg" | "icon";
+} & import("class-variance-authority/types").ClassProp) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/shared/components/ui/button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+            destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+            outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+            secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-9 px-4 py-2',
+            sm: 'h-8 rounded-md px-3 text-xs',
+            lg: 'h-10 rounded-md px-8',
+            icon: 'h-9 w-9',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return _jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props });
+});
+Button.displayName = 'Button';
+export { Button, buttonVariants };

package/dist/shared/components/ui/chat-message.d.ts

@@ -0,0 +1,29 @@
+import { type VariantProps } from 'class-variance-authority';
+import React from 'react';
+declare const chatBubbleVariants: (props?: {
+    isUser?: boolean;
+    isError?: boolean;
+    animation?: "none" | "scale" | "slide" | "fade";
+} & import("class-variance-authority/types").ClassProp) => string;
+type Animation = VariantProps<typeof chatBubbleVariants>['animation'];
+interface Attachment {
+    name?: string;
+    contentType?: string;
+    url: string;
+}
+export interface Message {
+    id?: string;
+    role?: 'user' | 'assistant';
+    content: any;
+    isError?: boolean;
+    createdAt?: Date;
+}
+export interface ChatMessageProps extends Message {
+    showTimeStamp?: boolean;
+    animation?: Animation;
+    actions?: React.ReactNode;
+    className?: string;
+    experimental_attachments?: Attachment[];
+}
+export declare const ChatMessage: React.FC<ChatMessageProps>;
+export {};

package/dist/shared/components/ui/chat-message.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { useMemo } from 'react';
+import { FilePreview } from '../../components/ui/file-preview';
+import { MarkdownRenderer } from '../../components/ui/markdown-renderer';
+import { cn } from '../../lib/utils';
+const chatBubbleVariants = cva('group/message relative break-words rounded-lg p-3 text-sm sm:max-w-[70%]', {
+    variants: {
+        isUser: {
+            true: 'bg-primary text-primary-foreground',
+            false: 'bg-muted text-foreground',
+        },
+        isError: {
+            true: 'bg-red-100 dark:bg-red-900/20',
+            false: '',
+        },
+        animation: {
+            none: '',
+            slide: 'duration-300 animate-in fade-in-0',
+            scale: 'duration-300 animate-in fade-in-0 zoom-in-75',
+            fade: 'duration-500 animate-in fade-in-0',
+        },
+    },
+    compoundVariants: [
+        {
+            isUser: true,
+            animation: 'slide',
+            class: 'slide-in-from-right',
+        },
+        {
+            isUser: false,
+            animation: 'slide',
+            class: 'slide-in-from-left',
+        },
+        {
+            isUser: true,
+            animation: 'scale',
+            class: 'origin-bottom-right',
+        },
+        {
+            isUser: false,
+            animation: 'scale',
+            class: 'origin-bottom-left',
+        },
+    ],
+});
+export const ChatMessage = ({ role, content, createdAt, showTimeStamp = false, animation = 'scale', actions, className, experimental_attachments, isError = false, }) => {
+    const isUser = role === 'user';
+    const files = useMemo(() => {
+        return experimental_attachments?.map(attachment => {
+            const dataArray = dataUrlToUint8Array(attachment.url);
+            const file = new File([dataArray], attachment.name ?? 'Unknown');
+            return file;
+        });
+    }, [experimental_attachments]);
+    const formattedTime = createdAt?.toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+    return (_jsxs("div", { className: cn('flex flex-col', isUser ? 'items-end' : 'items-start'), children: [files ? (_jsx("div", { className: "mb-1 flex gap-2 flex-wrap", children: files.map((file, index) => {
+                    return _jsx(FilePreview, { file: file }, index);
+                }) })) : null, _jsxs("div", { className: cn(chatBubbleVariants({ isUser, isError, animation }), className), children: [_jsx("div", { children: _jsx(MarkdownRenderer, { children: content }) }), role === 'assistant' && actions ? (_jsx("div", { className: "absolute -bottom-4 right-2 flex space-x-1 rounded-lg border bg-background p-1 opacity-0 transition-opacity group-hover/message:opacity-100 text-foreground", children: actions })) : null] }), showTimeStamp && createdAt ? (_jsx("time", { dateTime: createdAt.toISOString(), className: cn('mt-1 block px-1 text-xs opacity-50', animation !== 'none' && 'duration-500 animate-in fade-in-0'), children: formattedTime })) : null] }));
+};
+function dataUrlToUint8Array(data) {
+    const base64 = data.split(',')[1];
+    const buf = Buffer.from(base64 ?? '', 'base64');
+    return new Uint8Array(buf);
+}

package/dist/shared/components/ui/chat.d.ts

@@ -0,0 +1,51 @@
+import { type ReactElement } from 'react';
+import { type Message } from '../../components/ui/chat-message';
+interface ChatPropsBase {
+    handleSubmit: (event?: {
+        preventDefault?: () => void;
+    }, options?: {
+        experimental_attachments?: FileList;
+    }) => void;
+    messages: Array<Message>;
+    input: string;
+    className?: string;
+    handleInputChange: React.ChangeEventHandler<HTMLTextAreaElement>;
+    isGenerating: boolean;
+    stop?: () => void;
+    onRateResponse?: (messageId: string, rating: 'thumbs-up' | 'thumbs-down') => void;
+}
+interface ChatPropsWithoutSuggestions extends ChatPropsBase {
+    append?: never;
+    suggestions?: never;
+}
+interface ChatPropsWithSuggestions extends ChatPropsBase {
+    append: (message: {
+        role: 'user';
+        content: string;
+    }) => void;
+    suggestions: string[];
+}
+type ChatProps = ChatPropsWithoutSuggestions | ChatPropsWithSuggestions;
+export declare function Chat({ messages, handleSubmit, input, handleInputChange, stop, isGenerating, append, suggestions, className, onRateResponse, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Chat {
+    var displayName: string;
+}
+export declare function ChatMessages({ messages, children, }: React.PropsWithChildren<{
+    messages: Message[];
+}>): import("react/jsx-runtime").JSX.Element;
+export declare const ChatContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+interface ChatFormProps {
+    className?: string;
+    isPending: boolean;
+    handleSubmit: (event?: {
+        preventDefault?: () => void;
+    }, options?: {
+        experimental_attachments?: FileList;
+    }) => void;
+    children: (props: {
+        files: File[] | null;
+        setFiles: React.Dispatch<React.SetStateAction<File[] | null>>;
+    }) => ReactElement;
+}
+export declare const ChatForm: import("react").ForwardRefExoticComponent<ChatFormProps & import("react").RefAttributes<HTMLFormElement>>;
+export {};

package/dist/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/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 {};