mastra 0.1.57-alpha.90 → 0.1.57-unstable.100

package/dist/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/shared/components/ui/mastra.d.ts

@@ -0,0 +1 @@
+export declare const Mastra: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Mastra = () => {
+    return (_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" })] }));
+};

package/dist/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/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-transparent 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/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/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/shared/components/ui/multi-select.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+export type MultiSelectShape = Record<string, unknown>;
+export type MultiSelectProps<T extends MultiSelectShape> = {
+    /**
+     * The placeholder text for the search input
+     */
+    placeholder: string;
+    /**
+     * The data to display in the dropdown
+     */
+    data: T[];
+    /**
+     * The currently selected values
+     */
+    selectedValues: T[];
+    /**
+     * A render prop for the icon
+     */
+    iconRenderProp?: (item: T) => React.ReactNode;
+    /**
+     * Dispatch to set selected values
+     */
+    setSelectedValues: (newValues: T[]) => void;
+    /**
+     * Callback on item selection
+     */
+    onSelectItem?: (value: T) => void;
+    /**
+     * Callback on item deselection
+     */
+    onDeselectItem?: (value: T) => void;
+    /**
+     * A message to show when an empty data array is passed
+     */
+    emptyMessage?: string;
+    /**
+     * The key to use for the name of the item
+     */
+    nameKey?: keyof T;
+    /**
+     * The key to use for the id of the item
+     */
+    idKey?: keyof T;
+    /**
+     * the key to group the items in a multiselect
+     */
+    groupKey?: keyof T;
+    /**
+     * If true, group options by certain criteria
+     */
+    groupOptions?: boolean;
+    /**
+     * If true, only one item can be selected at a time
+     */
+    isSingleSelect?: boolean;
+    /**
+     * If true, show the search input
+     */
+    withSearch?: boolean;
+    /**
+     * If true, show the checkbox
+     */
+    withCheckbox?: boolean;
+    /**
+     * If true, consumer can deselect all items
+     */
+    asRadio?: boolean;
+    /**
+     * If true, show the add new button
+     */
+    withAddNewButton?: boolean;
+    /**
+     * The title for add new button
+     */
+    addNewButtonTitle?: string;
+    /**
+     * If true, show the add new button when the searched item doesn't exist in the list
+     */
+    withAddNewFromSearchValueButton?: boolean;
+    /**
+     * Function to trigger add new item e.g to pop a dialog/popup
+     */
+    addNewButtonAction?: () => void;
+    /**
+     * Function to add new item and return the added item, to be added to selected values or used as selected value
+     */
+    addNewFromSearchValueButtonAction?: (item: string) => Promise<T>;
+    /**
+     * Function to search for value from a larger database, which then populates the options list
+     */
+    onSearch?: (item: string) => void;
+    /**
+     * If true, shows searching text instead of No options text
+     */
+    isSearching?: boolean;
+};
+export declare function MultiSelect<T extends MultiSelectShape>({ placeholder, data, selectedValues, setSelectedValues, iconRenderProp, onSelectItem, onDeselectItem, isSingleSelect, emptyMessage, nameKey, idKey, withSearch, withCheckbox, asRadio, addNewButtonTitle, withAddNewButton, withAddNewFromSearchValueButton, addNewButtonAction, addNewFromSearchValueButtonAction, groupKey, groupOptions, onSearch, isSearching, }: MultiSelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/shared/components/ui/multi-select.js

@@ -0,0 +1,117 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { capitalizeFirstLetter } from '../../lib/string';
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+import { Checkbox } from './checkbox';
+import { Command, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from './command';
+import { Text } from './text';
+export function MultiSelect({ placeholder, data = [], selectedValues = [], setSelectedValues, iconRenderProp, onSelectItem, onDeselectItem, isSingleSelect, emptyMessage, nameKey, idKey, withSearch = true, withCheckbox = true, asRadio, addNewButtonTitle, withAddNewButton, withAddNewFromSearchValueButton, addNewButtonAction, addNewFromSearchValueButtonAction, groupKey, groupOptions, onSearch, isSearching, }) {
+    if (!data) {
+        return null;
+    }
+    return (_jsx(Command, { className: "h-fit", shouldFilter: false, children: !data.length ? (_jsx(EmptyBody, { emptyMessage: emptyMessage })) : (_jsx(SelectBody, { placeholder: placeholder, data: data, selectedValues: selectedValues, setSelectedValues: setSelectedValues, iconRenderProp: iconRenderProp, onSelectItem: onSelectItem, onDeselectItem: onDeselectItem, isSingleSelect: isSingleSelect, nameKey: nameKey, idKey: idKey, withSearch: withSearch, withCheckbox: withCheckbox, asRadio: asRadio, addNewButtonTitle: addNewButtonTitle, withAddNewButton: withAddNewButton, withAddNewFromSearchValueButton: withAddNewFromSearchValueButton, addNewButtonAction: addNewButtonAction, addNewFromSearchValueButtonAction: addNewFromSearchValueButtonAction, groupKey: groupKey, groupOptions: groupOptions, onSearch: onSearch, isSearching: isSearching })) }));
+}
+function EmptyBody({ emptyMessage }) {
+    return (_jsx("div", { className: "px-2 py-6 text-center text-sm", children: _jsx(Text, { children: emptyMessage || 'No data found.' }) }));
+}
+function SelectBody({ placeholder, data, selectedValues, setSelectedValues, iconRenderProp, onSelectItem, onDeselectItem, isSingleSelect, withSearch, withCheckbox, asRadio, nameKey = 'name', idKey = 'id', addNewButtonTitle, withAddNewButton, withAddNewFromSearchValueButton, addNewButtonAction, addNewFromSearchValueButtonAction, groupKey, groupOptions, onSearch, isSearching, }) {
+    const [searchValue, setSearchValue] = useState('');
+    const [isAdding, setIsAdding] = useState(false);
+    function deselectItem(item) {
+        if (asRadio && selectedValues.length === 1)
+            return; // A radio must have a selected value
+        if (isSingleSelect) {
+            setSelectedValues([]);
+        }
+        else {
+            setSelectedValues(selectedValues.filter(value => value[idKey] !== item[idKey]));
+        }
+        onDeselectItem?.(item);
+    }
+    function selectItem(item) {
+        if (isSingleSelect) {
+            setSelectedValues([item]);
+        }
+        else {
+            setSelectedValues([...selectedValues, item]);
+        }
+        onSelectItem?.(item);
+    }
+    async function handleAddNewItem() {
+        if (addNewButtonAction) {
+            addNewButtonAction();
+            return;
+        }
+        if (addNewFromSearchValueButtonAction) {
+            setIsAdding(true);
+            const item = await addNewFromSearchValueButtonAction(searchValue);
+            setIsAdding(false);
+            setSearchValue('');
+            selectItem(item);
+        }
+    }
+    const options = useMemo(() => searchValue
+        ? data.filter(item => item[nameKey]?.toLocaleLowerCase()?.includes(searchValue?.toLocaleLowerCase()))
+        : data, [data, searchValue, nameKey]);
+    const showButton = withAddNewButton || (withAddNewFromSearchValueButton && !!searchValue && !options.length);
+    const groupOptionsByKey = (options, groupKey) => {
+        //plain array, that i want group based on object of a key in that array
+        //{ google: [options], slack: [options] }
+        return options.reduce((acc, curr) => {
+            const groupedKey = curr[groupKey];
+            return { ...acc, [groupedKey]: [...(acc[groupedKey] || []), curr] };
+        }, {});
+    };
+    const groupedData = groupOptions && groupKey ? groupOptionsByKey(options, groupKey) : {};
+    return (_jsxs(_Fragment, { children: [withSearch && (_jsx(CommandInput, { placeholder: placeholder, value: searchValue, onValueChange: val => {
+                    setSearchValue(val);
+                    onSearch?.(val);
+                }, className: "text-xs", onKeyDown: e => {
+                    if (e.key == 'Enter' && !(e.ctrlKey || e.metaKey)) {
+                        e.stopPropagation();
+                        if (withAddNewFromSearchValueButton && !!searchValue && !options.length) {
+                            handleAddNewItem();
+                        }
+                    }
+                } })), _jsxs(CommandList, { children: [options.length ? (groupKey ? (Object.keys(groupedData).map(key => {
+                        return (_jsxs("div", { className: "border-b border-mastra-border-1 p-1", children: [_jsx("p", { className: "text-white px-3 py-1 text-xs capitalize bg-[#5f5fc5] rounded w-fit my-1 ml-1", children: capitalizeFirstLetter(key) }), _jsx(CommandGroup, { children: groupedData[key].map((item, idx) => {
+                                        const isSelected = !!selectedValues.length
+                                            ? isSingleSelect
+                                                ? selectedValues[0][idKey] === item[idKey]
+                                                : !!selectedValues.find(value => value[idKey] === item[idKey])
+                                            : false;
+                                        return (_jsxs(CommandItem, { className: cn({ 'bg-white/5': isSelected }), value: item[idKey], "aria-selected": isSelected, "aria-disabled": item?.isDisabled ? 'true' : 'false', "data-disabled": item?.isDisabled ? 'true' : 'false', onSelect: () => {
+                                                if (item?.isDisabled) {
+                                                    return;
+                                                }
+                                                if (isSelected) {
+                                                    deselectItem(item);
+                                                }
+                                                else {
+                                                    selectItem(item);
+                                                }
+                                            }, disabled: item?.isDisabled, children: [_jsx(Checkbox, { checked: isSelected, className: cn('mr-2', { 'sr-only': !withCheckbox }) }), iconRenderProp ? _jsx("span", { className: "mr-2", children: iconRenderProp(item) }) : null, _jsx("span", { className: "break-words hyphens-auto", children: item[nameKey] })] }, `${item[idKey]}-${idx}`));
+                                    }) })] }, key));
+                    })) : (_jsx(CommandGroup, { children: options.map((item, idx) => {
+                            const isSelected = !!selectedValues.length
+                                ? isSingleSelect
+                                    ? selectedValues[0][idKey] === item[idKey]
+                                    : !!selectedValues.find(value => value[idKey] === item[idKey])
+                                : false;
+                            return (_jsxs(CommandItem, { className: cn({ 'bg-white/5': isSelected }), value: item[idKey], "aria-selected": isSelected, "aria-disabled": item?.isDisabled ? 'true' : 'false', "data-disabled": item?.isDisabled ? 'true' : 'false', onSelect: () => {
+                                    if (item?.isDisabled) {
+                                        return;
+                                    }
+                                    if (isSelected) {
+                                        deselectItem(item);
+                                    }
+                                    else {
+                                        selectItem(item);
+                                    }
+                                }, disabled: item?.isDisabled, children: [_jsx(Checkbox, { checked: isSelected, className: cn('mr-2', { 'sr-only': !withCheckbox }) }), iconRenderProp ? _jsx("span", { className: "mr-2", children: iconRenderProp(item) }) : null, _jsx("span", { className: "break-words hyphens-auto", children: item[nameKey] })] }, `${item[idKey]}-${idx}`));
+                        }) }))) : (_jsx("p", { className: "text-mastra-el-4 py-6 text-center text-sm", children: isSearching ? 'Searching...' : 'No results found' })), selectedValues.length > 0 && !isSingleSelect && !searchValue && (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, { className: "bg-white/10" }), _jsx(CommandGroup, { children: _jsx(CommandItem, { onSelect: () => {
+                                        setSelectedValues([]);
+                                    }, className: "justify-center text-center", children: "Clear selection" }) })] })), showButton ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, { className: "bg-white/10" }), _jsx(CommandGroup, { children: _jsx(Button, { className: "h-[28px] w-full font-semibold", size: "sm", type: "submit", variant: "default", onClick: handleAddNewItem, disabled: isAdding, children: isAdding ? 'Adding...' : addNewButtonTitle || `Add ${searchValue}` }) })] })) : null] })] }));
+}

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

@@ -0,0 +1,6 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };

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

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className), ...props }) })));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/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/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-transparent p-4 hover:bg-accent", children: _jsx("p", { children: suggestion }) }, suggestion))) })] }));
+}

package/dist/shared/components/ui/radio-group.d.ts

@@ -0,0 +1,5 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as React from 'react';
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { RadioGroup, RadioGroupItem };

package/dist/shared/components/ui/radio-group.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx(RadioGroupPrimitive.Root, { className: cn('grid gap-2', className), ...props, ref: ref });
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(RadioGroupPrimitive.Item, { ref: ref, className: cn('aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) }) }));
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+export { RadioGroup, RadioGroupItem };

package/dist/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/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/shared/components/ui/select.d.ts

@@ -0,0 +1,9 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as React from 'react';
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectItem };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { ref: ref, className: cn('relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
+                'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }) }) })));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectItem };

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

@@ -0,0 +1 @@
+export declare const Sidebar: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bot, Play } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Mastra } from './mastra';
+const links = [
+    {
+        name: 'Agents',
+        url: '/agents',
+        icon: Bot,
+    },
+    // {
+    //   name: 'Workflows',
+    //   url: '/workflows',
+    //   icon: Workflow, //import from lucide-react
+    // },
+    {
+        name: 'Playground',
+        url: '/playground',
+        icon: Play,
+    },
+];
+export const Sidebar = () => {
+    const pathname = window.location.pathname;
+    const path = pathname.split('/')[1];
+    return (_jsx("div", { className: "relative z-20 h-full text-mastra-el-6", children: _jsxs("div", { className: "bg-mastra-bg-1 h-full w-full p-4 flex gap-6 flex-col", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex gap-2 px-2 items-center", children: [_jsx(Mastra, {}), _jsx("p", { className: "text-medium text-sm  gradient py-[0.38rem] font-tasa", children: "Mastra" })] }) }), _jsx("div", { children: _jsx("div", { className: "flex flex-col gap-0.5", children: links.map(link => {
+                            const [pagePath] = path.split('/');
+                            const lowercasedPagePath = link.name.toLowerCase();
+                            const isActive = link.url === path ||
+                                link.name === path ||
+                                pagePath === lowercasedPagePath ||
+                                (link.name === 'Agents' && path === '');
+                            return (_jsxs("a", { href: link.url, className: cn('flex cursor-pointer w-full px-2 items-center focus-visible:outline-none transition-colors focus-visible:ring-1 focus-visible:ring-mastra-border-4 gap-3 rounded-xs group text-small hover:bg-mastra-el-6/5', isActive ? 'bg-mastra-el-6/5' : ''), children: [_jsx(link.icon, { className: cn('w-[0.875rem] h-[0.875rem] text-mastra-el-3 group-hover:text-mastra-el-6', isActive ? 'text-mastra-el-6' : '') }), _jsx("p", { className: cn('py-[0.38rem] text-mastra-el-6/60 group-hover:text-mastra-el-6 transition-all  capitalize ', isActive ? 'text-mastra-el-6' : ''), children: link.name })] }));
+                        }) }) }), _jsxs("div", { className: "flex mt-auto gap-2 items-center justify-center", children: [_jsx("a", { href: "https://mastra.ai", target: "_blank", rel: "noopener", className: "text-sm text-gray-300/60 hover:text-gray-100", children: "Mastra.AI" }), _jsx("div", { className: "w-1 h-1 bg-gray-300/60 rounded-full" }), _jsx("a", { href: "https://mastra.ai/docs/guide", target: "_blank", rel: "noopener", className: "text-sm text-gray-300/60 hover:text-gray-100", children: "Docs" }), _jsx("div", { className: "w-1 h-1 bg-gray-300/60 rounded-full" }), _jsx("a", { href: "https://github.com/mastra-ai/mastra", target: "_blank", rel: "noopener", className: "text-sm text-gray-300/60 hover:text-gray-100", children: "GitHub" })] })] }) }));
+};

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

@@ -0,0 +1,2 @@
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };