mastra 0.1.57-unstable.38 → 0.1.57-unstable.57

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.js

@@ -70,7 +70,7 @@ export function MessageInput({ placeholder = 'Ask AI...', className, onKeyDown:
         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
+    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: () => {

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.js

@@ -1,4 +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))) })] }));
+    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/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 };

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+function Skeleton({ className, ...props }) {
+    return _jsx("div", { className: cn('animate-pulse rounded-md bg-muted', className), ...props });
+}
+export { Skeleton };

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

@@ -0,0 +1,4 @@
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as React from 'react';
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };

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

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const Switch = React.forwardRef(({ className, ...props }, ref) => (_jsx(SwitchPrimitives.Root, { className: cn('peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-mastra-bg-7 data-[state=unchecked]:bg-input', className), ...props, ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0') }) })));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+export { Switch };

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const Table = React.forwardRef(({ className, ...props }, ref) => (_jsx("table", { ref: ref, className: cn('w-full caption-bottom text-sm border-spacing-0', className), ...props })));
+Table.displayName = 'Table';
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => _jsx("thead", { ref: ref, className: cn('[&_tr]:border-b', className), ...props }));
+TableHeader.displayName = 'TableHeader';
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn('[&_tr:last-child]:border-0', className), ...props })));
+TableBody.displayName = 'TableBody';
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className), ...props })));
+TableFooter.displayName = 'TableFooter';
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('border-b-[0.5px] border-mastra-border-1 transition-colors hover:bg-muted/50 data-[state=selected]:bg-mastra-bg-4/70', className), ...props })));
+TableRow.displayName = 'TableRow';
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', className), ...props })));
+TableHead.displayName = 'TableHead';
+const TableCell = React.forwardRef(({ className, ...props }, ref) => (_jsx("td", { ref: ref, className: cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className), ...props })));
+TableCell.displayName = 'TableCell';
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn('mt-4 text-sm text-muted-foreground', className), ...props })));
+TableCaption.displayName = 'TableCaption';
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

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

@@ -0,0 +1,7 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => _jsx(TabsPrimitive.List, { ref: ref, className: cn(className), ...props }));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => _jsx(TabsPrimitive.Trigger, { ref: ref, className: cn(className), ...props }));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className), ...props })));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import React from 'react';
+declare const textVariants: (props?: {
+    variant?: "primary" | "secondary";
+    size?: "default" | "sm" | "lg" | "md" | "xs" | "xl" | "2xl";
+    weight?: "bold" | "medium" | "normal" | "semibold";
+} & import("class-variance-authority/types").ClassProp) => string;
+export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement | HTMLSpanElement | HTMLDivElement>, VariantProps<typeof textVariants> {
+    as?: 'p' | 'span' | 'div';
+}
+export declare const Text: ({ className, weight, variant, as: Tag, size, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const textVariants = cva('block', {
+    variants: {
+        variant: {
+            primary: 'text-text',
+            secondary: 'text-text-dim',
+        },
+        size: {
+            default: 'text-base',
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-md',
+            lg: 'text-lg',
+            xl: 'text-xl',
+            '2xl': 'text-2xl',
+        },
+        weight: {
+            normal: 'font-normal',
+            medium: 'font-medium',
+            semibold: 'font-semibold',
+            bold: 'font-bold',
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'default',
+        weight: 'normal',
+    },
+});
+export const Text = ({ className, weight, variant, as: Tag = 'span', size, ...props }) => {
+    return _jsx(Tag, { className: cn(textVariants({ size, variant, weight, className })), ...props });
+};

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("textarea", { className: cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', className), ref: ref, ...props }));
+});
+Textarea.displayName = 'Textarea';
+export { Textarea };

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

@@ -0,0 +1,7 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 })));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/shared/hooks/use-agent-tools.d.ts

@@ -0,0 +1,11 @@
+import { Tool } from '@mastra/core';
+export declare const useAgentTools: () => {
+    tools: Record<string, Tool<any, any, any, any>>;
+    isLoading: boolean;
+    executeTool: ({ agentId, toolId, input }: {
+        agentId: string;
+        toolId: string;
+        input: any;
+    }) => Promise<any>;
+    isExecutingTool: boolean;
+};

package/dist/shared/hooks/use-agent-tools.js

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { useAgents } from './use-agents';
+export const useAgentTools = () => {
+    const { agents, isLoading } = useAgents();
+    const [isExecutingTool, setIsExecutingTool] = useState(false);
+    const tools = Object.values(agents).reduce((acc, agent) => {
+        return {
+            ...acc,
+            ...agent.tools,
+        };
+    }, {});
+    const executeTool = async ({ agentId, toolId, input }) => {
+        try {
+            setIsExecutingTool(true);
+            const response = await fetch(`/api/agents/${agentId}/tools/${toolId}/execute`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(input),
+            });
+            if (!response.ok) {
+                throw new Error(`Error executing tool: ${response.statusText}`);
+            }
+            return await response.json();
+        }
+        catch (error) {
+            console.error('Error executing tool:', error);
+            throw error;
+        }
+        finally {
+            setIsExecutingTool(false);
+        }
+    };
+    return { tools, isLoading, executeTool, isExecutingTool };
+};

package/dist/shared/hooks/use-agents.d.ts

@@ -0,0 +1,9 @@
+import { Agent } from '@mastra/core';
+export declare const useAgents: () => {
+    agents: Record<string, Agent<Record<string, import("@mastra/core").ToolAction<any, any, any, any>>>>;
+    isLoading: boolean;
+};
+export declare const useAgent: (agentId: string) => {
+    agent: Agent<Record<string, import("@mastra/core").ToolAction<any, any, any, any>>>;
+    isLoading: boolean;
+};