@chatsdk-dev/ui 0.0.1 → 0.1.3

package/dist/molecules/ai/file-tree.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type FileTreeProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+    expanded?: Set<string>;
+    defaultExpanded?: Set<string>;
+    selectedPath?: string;
+    onSelect?: (path: string) => void;
+    onExpandedChange?: (expanded: Set<string>) => void;
+};
+export declare const FileTree: ({ expanded: controlledExpanded, defaultExpanded, selectedPath, onSelect, onExpandedChange, className, children, ...props }: FileTreeProps) => import("react/jsx-runtime").JSX.Element;
+export type FileTreeIconProps = HTMLAttributes<HTMLSpanElement>;
+export declare const FileTreeIcon: ({ className, children, ...props }: FileTreeIconProps) => import("react/jsx-runtime").JSX.Element;
+export type FileTreeNameProps = HTMLAttributes<HTMLSpanElement>;
+export declare const FileTreeName: ({ className, children, ...props }: FileTreeNameProps) => import("react/jsx-runtime").JSX.Element;
+export type FileTreeFolderProps = HTMLAttributes<HTMLDivElement> & {
+    path: string;
+    name: string;
+};
+export declare const FileTreeFolder: ({ path, name, className, children, ...props }: FileTreeFolderProps) => import("react/jsx-runtime").JSX.Element;
+export type FileTreeFileProps = HTMLAttributes<HTMLDivElement> & {
+    path: string;
+    name: string;
+    icon?: ReactNode;
+};
+export declare const FileTreeFile: ({ path, name, icon, className, children, ...props }: FileTreeFileProps) => import("react/jsx-runtime").JSX.Element;
+export type FileTreeActionsProps = HTMLAttributes<HTMLDivElement>;
+export declare const FileTreeActions: ({ className, children, ...props }: FileTreeActionsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=file-tree.d.ts.map

package/dist/molecules/ai/file-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-tree.d.ts","sourceRoot":"","sources":["../../../src/molecules/ai/file-tree.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BvD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,4HAStB,aAAa,4CAqCf,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEhE,eAAO,MAAM,YAAY,GAAI,mCAI1B,iBAAiB,4CAInB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEhE,eAAO,MAAM,YAAY,GAAI,mCAI1B,iBAAiB,4CAInB,CAAC;AAcF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,+CAM5B,mBAAmB,4CAuErB,CAAC;AAYF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,qDAO1B,iBAAiB,4CA8CnB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAIlE,eAAO,MAAM,eAAe,GAAI,mCAI7B,oBAAoB,4CAUtB,CAAC"}

package/dist/molecules/ai/file-tree.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@chatsdk-dev/ui/atoms/collapsible";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { ChevronRightIcon, FileIcon, FolderIcon, FolderOpenIcon, } from "lucide-react";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+// Default noop for context default value
+// oxlint-disable-next-line eslint(no-empty-function)
+const noop = () => { };
+const FileTreeContext = createContext({
+    // oxlint-disable-next-line eslint-plugin-unicorn(no-new-builtin)
+    expandedPaths: new Set(),
+    togglePath: noop,
+});
+export const FileTree = ({ expanded: controlledExpanded, defaultExpanded = new Set(), selectedPath, onSelect, onExpandedChange, className, children, ...props }) => {
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    const expandedPaths = controlledExpanded ?? internalExpanded;
+    const togglePath = useCallback((path) => {
+        const newExpanded = new Set(expandedPaths);
+        if (newExpanded.has(path)) {
+            newExpanded.delete(path);
+        }
+        else {
+            newExpanded.add(path);
+        }
+        setInternalExpanded(newExpanded);
+        onExpandedChange?.(newExpanded);
+    }, [expandedPaths, onExpandedChange]);
+    const contextValue = useMemo(() => ({ expandedPaths, onSelect, selectedPath, togglePath }), [expandedPaths, onSelect, selectedPath, togglePath]);
+    return (_jsx(FileTreeContext.Provider, { value: contextValue, children: _jsx("div", { className: cn("rounded-lg border bg-background font-mono text-sm", className), role: "tree", ...props, children: _jsx("div", { className: "p-2", children: children }) }) }));
+};
+export const FileTreeIcon = ({ className, children, ...props }) => (_jsx("span", { className: cn("shrink-0", className), ...props, children: children }));
+export const FileTreeName = ({ className, children, ...props }) => (_jsx("span", { className: cn("truncate", className), ...props, children: children }));
+const FileTreeFolderContext = createContext({
+    isExpanded: false,
+    name: "",
+    path: "",
+});
+export const FileTreeFolder = ({ path, name, className, children, ...props }) => {
+    const { expandedPaths, togglePath, selectedPath, onSelect } = useContext(FileTreeContext);
+    const isExpanded = expandedPaths.has(path);
+    const isSelected = selectedPath === path;
+    const handleOpenChange = useCallback(() => {
+        togglePath(path);
+    }, [togglePath, path]);
+    const handleSelect = useCallback(() => {
+        onSelect?.(path);
+    }, [onSelect, path]);
+    const folderContextValue = useMemo(() => ({ isExpanded, name, path }), [isExpanded, name, path]);
+    return (_jsx(FileTreeFolderContext.Provider, { value: folderContextValue, children: _jsx(Collapsible, { onOpenChange: handleOpenChange, open: isExpanded, children: _jsxs("div", { className: cn("", className), role: "treeitem", tabIndex: 0, ...props, children: [_jsxs("div", { className: cn("flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50", isSelected && "bg-muted"), children: [_jsx(CollapsibleTrigger, { render: () => (_jsx("button", { className: "flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0", type: "button", children: _jsx(ChevronRightIcon, { className: cn("size-4 shrink-0 text-muted-foreground transition-transform", isExpanded && "rotate-90") }) })) }), _jsxs("button", { className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left", onClick: handleSelect, type: "button", children: [_jsx(FileTreeIcon, { children: isExpanded ? (_jsx(FolderOpenIcon, { className: "size-4 text-blue-500" })) : (_jsx(FolderIcon, { className: "size-4 text-blue-500" })) }), _jsx(FileTreeName, { children: name })] })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "ml-4 border-l pl-2", children: children }) })] }) }) }));
+};
+const FileTreeFileContext = createContext({
+    name: "",
+    path: "",
+});
+export const FileTreeFile = ({ path, name, icon, className, children, ...props }) => {
+    const { selectedPath, onSelect } = useContext(FileTreeContext);
+    const isSelected = selectedPath === path;
+    const handleClick = useCallback(() => {
+        onSelect?.(path);
+    }, [onSelect, path]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            onSelect?.(path);
+        }
+    }, [onSelect, path]);
+    const fileContextValue = useMemo(() => ({ name, path }), [name, path]);
+    return (_jsx(FileTreeFileContext.Provider, { value: fileContextValue, children: _jsx("div", { className: cn("flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50", isSelected && "bg-muted", className), onClick: handleClick, onKeyDown: handleKeyDown, role: "treeitem", tabIndex: 0, ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx("span", { className: "size-4 shrink-0" }), _jsx(FileTreeIcon, { children: icon ?? _jsx(FileIcon, { className: "size-4 text-muted-foreground" }) }), _jsx(FileTreeName, { children: name })] })) }) }));
+};
+const stopPropagation = (e) => e.stopPropagation();
+export const FileTreeActions = ({ className, children, ...props }) => (_jsx("div", { className: cn("ml-auto flex items-center gap-1", className), onClick: stopPropagation, onKeyDown: stopPropagation, role: "group", ...props, children: children }));

package/dist/molecules/ai/image.d.ts

@@ -0,0 +1,7 @@
+import type { Experimental_GeneratedImage } from "ai";
+export type ImageProps = Experimental_GeneratedImage & {
+    className?: string;
+    alt?: string;
+};
+export declare const Image: ({ base64, uint8Array: _uint8Array, mediaType, ...props }: ImageProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=image.d.ts.map

package/dist/molecules/ai/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/molecules/ai/image.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,IAAI,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,2BAA2B,GAAG;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,0DAKnB,UAAU,4CAUZ,CAAC"}

package/dist/molecules/ai/image.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+export const Image = ({ base64, uint8Array: _uint8Array, mediaType, ...props }) => (_jsx("img", { ...props, alt: props.alt, className: cn("h-auto max-w-full overflow-hidden rounded-md", props.className), src: `data:${mediaType};base64,${base64}` }));

package/dist/molecules/ai/inline-citation.d.ts

@@ -0,0 +1,39 @@
+import { Badge } from "@chatsdk-dev/ui/atoms/badge";
+import { Carousel } from "@chatsdk-dev/ui/atoms/carousel";
+import { HoverCard } from "@chatsdk-dev/ui/atoms/hover-card";
+import type { ComponentProps } from "react";
+export type InlineCitationProps = ComponentProps<"span">;
+export declare const InlineCitation: ({ className, ...props }: InlineCitationProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationTextProps = ComponentProps<"span">;
+export declare const InlineCitationText: ({ className, ...props }: InlineCitationTextProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCardProps = ComponentProps<typeof HoverCard>;
+export declare const InlineCitationCard: (props: InlineCitationCardProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {
+    sources: string[];
+};
+export declare const InlineCitationCardTrigger: ({ sources, className, ...props }: InlineCitationCardTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCardBodyProps = ComponentProps<"div">;
+export declare const InlineCitationCardBody: ({ className, ...props }: InlineCitationCardBodyProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselProps = ComponentProps<typeof Carousel>;
+export declare const InlineCitationCarousel: ({ className, children, ...props }: InlineCitationCarouselProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselContentProps = ComponentProps<"div">;
+export declare const InlineCitationCarouselContent: (props: InlineCitationCarouselContentProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselItemProps = ComponentProps<"div">;
+export declare const InlineCitationCarouselItem: ({ className, ...props }: InlineCitationCarouselItemProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselHeaderProps = ComponentProps<"div">;
+export declare const InlineCitationCarouselHeader: ({ className, ...props }: InlineCitationCarouselHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselIndexProps = ComponentProps<"div">;
+export declare const InlineCitationCarouselIndex: ({ children, className, ...props }: InlineCitationCarouselIndexProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselPrevProps = ComponentProps<"button">;
+export declare const InlineCitationCarouselPrev: ({ className, ...props }: InlineCitationCarouselPrevProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselNextProps = ComponentProps<"button">;
+export declare const InlineCitationCarouselNext: ({ className, ...props }: InlineCitationCarouselNextProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationSourceProps = ComponentProps<"div"> & {
+    title?: string;
+    url?: string;
+    description?: string;
+};
+export declare const InlineCitationSource: ({ title, url, description, className, children, ...props }: InlineCitationSourceProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationQuoteProps = ComponentProps<"blockquote">;
+export declare const InlineCitationQuote: ({ children, className, ...props }: InlineCitationQuoteProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=inline-citation.d.ts.map

package/dist/molecules/ai/inline-citation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-citation.d.ts","sourceRoot":"","sources":["../../../src/molecules/ai/inline-citation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,OAAO,EACL,QAAQ,EAGT,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAS5C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AAEzD,eAAO,MAAM,cAAc,GAAI,yBAG5B,mBAAmB,4CAKrB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AAE7D,eAAO,MAAM,kBAAkB,GAAI,yBAGhC,uBAAuB,4CAKzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AAEvE,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4CAEhE,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,GAAG;IAC1E,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,kCAIvC,8BAA8B,4CAmBhC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhE,eAAO,MAAM,sBAAsB,GAAI,yBAGpC,2BAA2B,4CAE7B,CAAC;AASF,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE1E,eAAO,MAAM,sBAAsB,GAAI,mCAIpC,2BAA2B,4CAU7B,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEvE,eAAO,MAAM,6BAA6B,GACxC,OAAO,kCAAkC,4CACR,CAAC;AAEpC,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpE,eAAO,MAAM,0BAA0B,GAAI,yBAGxC,+BAA+B,4CAKjC,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEtE,eAAO,MAAM,4BAA4B,GAAI,yBAG1C,iCAAiC,4CAQnC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAErE,eAAO,MAAM,2BAA2B,GAAI,mCAIzC,gCAAgC,4CAsClC,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAEvE,eAAO,MAAM,0BAA0B,GAAI,yBAGxC,+BAA+B,4CAoBjC,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAEvE,eAAO,MAAM,0BAA0B,GAAI,yBAGxC,+BAA+B,4CAoBjC,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,4DAOlC,yBAAyB,4CAe3B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;AAEpE,eAAO,MAAM,mBAAmB,GAAI,mCAIjC,wBAAwB,4CAU1B,CAAC"}

package/dist/molecules/ai/inline-citation.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@chatsdk-dev/ui/atoms/badge";
+import { Carousel, CarouselContent, CarouselItem, } from "@chatsdk-dev/ui/atoms/carousel";
+import { HoverCard, HoverCardContent, HoverCardTrigger, } from "@chatsdk-dev/ui/atoms/hover-card";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { createContext, useCallback, useContext, useEffect, useState, } from "react";
+export const InlineCitation = ({ className, ...props }) => (_jsx("span", { className: cn("group inline items-center gap-1", className), ...props }));
+export const InlineCitationText = ({ className, ...props }) => (_jsx("span", { className: cn("transition-colors group-hover:bg-accent", className), ...props }));
+export const InlineCitationCard = (props) => (_jsx(HoverCard, { ...props }));
+export const InlineCitationCardTrigger = ({ sources, className, ...props }) => (_jsx(HoverCardTrigger, { render: () => (_jsx(Badge, { className: cn("ml-1 rounded-full", className), variant: "secondary", ...props, children: sources[0] ? (_jsxs(_Fragment, { children: [new URL(sources[0]).hostname, " ", sources.length > 1 && `+${sources.length - 1}`] })) : ("unknown") })) }));
+export const InlineCitationCardBody = ({ className, ...props }) => (_jsx(HoverCardContent, { className: cn("relative w-80 p-0", className), ...props }));
+const CarouselApiContext = createContext(undefined);
+const useCarouselApi = () => {
+    const context = useContext(CarouselApiContext);
+    return context;
+};
+export const InlineCitationCarousel = ({ className, children, ...props }) => {
+    const [api, setApi] = useState();
+    return (_jsx(CarouselApiContext.Provider, { value: api, children: _jsx(Carousel, { className: cn("w-full", className), setApi: setApi, ...props, children: children }) }));
+};
+export const InlineCitationCarouselContent = (props) => _jsx(CarouselContent, { ...props });
+export const InlineCitationCarouselItem = ({ className, ...props }) => (_jsx(CarouselItem, { className: cn("w-full space-y-2 p-4 pl-8", className), ...props }));
+export const InlineCitationCarouselHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2", className), ...props }));
+export const InlineCitationCarouselIndex = ({ children, className, ...props }) => {
+    const api = useCarouselApi();
+    const [current, setCurrent] = useState(0);
+    const [count, setCount] = useState(0);
+    const syncState = useCallback(() => {
+        if (!api) {
+            return;
+        }
+        setCount(api.scrollSnapList().length);
+        setCurrent(api.selectedScrollSnap() + 1);
+    }, [api]);
+    useEffect(() => {
+        if (!api) {
+            return;
+        }
+        syncState();
+        api.on("select", syncState);
+        return () => {
+            api.off("select", syncState);
+        };
+    }, [api, syncState]);
+    return (_jsx("div", { className: cn("flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs", className), ...props, children: children ?? `${current}/${count}` }));
+};
+export const InlineCitationCarouselPrev = ({ className, ...props }) => {
+    const api = useCarouselApi();
+    const handleClick = useCallback(() => {
+        if (api) {
+            api.scrollPrev();
+        }
+    }, [api]);
+    return (_jsx("button", { "aria-label": "Previous", className: cn("shrink-0", className), onClick: handleClick, type: "button", ...props, children: _jsx(ArrowLeftIcon, { className: "size-4 text-muted-foreground" }) }));
+};
+export const InlineCitationCarouselNext = ({ className, ...props }) => {
+    const api = useCarouselApi();
+    const handleClick = useCallback(() => {
+        if (api) {
+            api.scrollNext();
+        }
+    }, [api]);
+    return (_jsx("button", { "aria-label": "Next", className: cn("shrink-0", className), onClick: handleClick, type: "button", ...props, children: _jsx(ArrowRightIcon, { className: "size-4 text-muted-foreground" }) }));
+};
+export const InlineCitationSource = ({ title, url, description, className, children, ...props }) => (_jsxs("div", { className: cn("space-y-1", className), ...props, children: [title && (_jsx("h4", { className: "truncate font-medium text-sm leading-tight", children: title })), url && (_jsx("p", { className: "truncate break-all text-muted-foreground text-xs", children: url })), description && (_jsx("p", { className: "line-clamp-3 text-muted-foreground text-sm leading-relaxed", children: description })), children] }));
+export const InlineCitationQuote = ({ children, className, ...props }) => (_jsx("blockquote", { className: cn("border-muted border-l-2 pl-3 text-muted-foreground text-sm italic", className), ...props, children: children }));

package/dist/molecules/ai/jsx-preview.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { TProps as JsxParserProps } from "react-jsx-parser";
+interface JSXPreviewContextValue {
+    jsx: string;
+    processedJsx: string;
+    isStreaming: boolean;
+    error: Error | null;
+    setError: (error: Error | null) => void;
+    setLastGoodJsx: (jsx: string) => void;
+    components: JsxParserProps["components"];
+    bindings: JsxParserProps["bindings"];
+    onErrorProp?: (error: Error) => void;
+}
+export declare const useJSXPreview: () => JSXPreviewContextValue;
+export type JSXPreviewProps = ComponentProps<"div"> & {
+    jsx: string;
+    isStreaming?: boolean;
+    components?: JsxParserProps["components"];
+    bindings?: JsxParserProps["bindings"];
+    onError?: (error: Error) => void;
+};
+export declare const JSXPreview: import("react").MemoExoticComponent<({ jsx, isStreaming, components, bindings, onError, className, children, ...props }: JSXPreviewProps) => import("react/jsx-runtime").JSX.Element>;
+export type JSXPreviewContentProps = Omit<ComponentProps<"div">, "children">;
+export declare const JSXPreviewContent: import("react").MemoExoticComponent<({ className, ...props }: JSXPreviewContentProps) => import("react/jsx-runtime").JSX.Element>;
+export type JSXPreviewErrorProps = ComponentProps<"div"> & {
+    children?: ReactNode | ((error: Error) => ReactNode);
+};
+export declare const JSXPreviewError: import("react").MemoExoticComponent<({ className, children, ...props }: JSXPreviewErrorProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};
+//# sourceMappingURL=jsx-preview.d.ts.map

package/dist/molecules/ai/jsx-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-preview.d.ts","sourceRoot":"","sources":["../../../src/molecules/ai/jsx-preview.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvD,OAAO,KAAK,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGjE,UAAU,sBAAsB;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IACzC,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC;AAMD,eAAO,MAAM,aAAa,8BAMzB,CAAC;AAqFF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,UAAU,2HAUlB,eAAe,6CAgDnB,CAAC;AAIF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7E,eAAO,MAAM,iBAAiB,gEACF,sBAAsB,6CAgEjD,CAAC;AAIF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACzD,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC;CACtD,CAAC;AAYF,eAAO,MAAM,eAAe,0EACU,oBAAoB,oDA0BzD,CAAC"}

package/dist/molecules/ai/jsx-preview.js

@@ -0,0 +1,167 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { AlertCircle } from "lucide-react";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import JsxParser from "react-jsx-parser";
+const JSXPreviewContext = createContext(null);
+const TAG_REGEX = /<\/?([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*?)(\/)?>/;
+export const useJSXPreview = () => {
+    const context = useContext(JSXPreviewContext);
+    if (!context) {
+        throw new Error("JSXPreview components must be used within JSXPreview");
+    }
+    return context;
+};
+const matchJsxTag = (code) => {
+    if (code.trim() === "") {
+        return null;
+    }
+    const match = code.match(TAG_REGEX);
+    if (!match || match.index === undefined) {
+        return null;
+    }
+    const [fullMatch, tagName, attributes, selfClosing] = match;
+    let type;
+    if (selfClosing) {
+        type = "self-closing";
+    }
+    else if (fullMatch.startsWith("</")) {
+        type = "closing";
+    }
+    else {
+        type = "opening";
+    }
+    return {
+        attributes: attributes?.trim(),
+        endIndex: match.index + fullMatch.length,
+        startIndex: match.index,
+        tag: fullMatch,
+        tagName,
+        type,
+    };
+};
+const stripIncompleteTag = (text) => {
+    // Find the last '<' that isn't part of a complete tag
+    const lastOpen = text.lastIndexOf("<");
+    if (lastOpen === -1) {
+        return text;
+    }
+    const afterOpen = text.slice(lastOpen);
+    // If there's no closing '>' after the last '<', it's an incomplete tag
+    if (!afterOpen.includes(">")) {
+        return text.slice(0, lastOpen);
+    }
+    return text;
+};
+const completeJsxTag = (code) => {
+    const stack = [];
+    let result = "";
+    let currentPosition = 0;
+    while (currentPosition < code.length) {
+        const match = matchJsxTag(code.slice(currentPosition));
+        if (!match) {
+            // No more tags found, strip any trailing incomplete tag
+            result += stripIncompleteTag(code.slice(currentPosition));
+            break;
+        }
+        const { tagName, type, endIndex } = match;
+        // Include any text content before this tag
+        result += code.slice(currentPosition, currentPosition + endIndex);
+        if (type === "opening") {
+            stack.push(tagName ?? "");
+        }
+        else if (type === "closing") {
+            stack.pop();
+        }
+        currentPosition += endIndex;
+    }
+    return (result +
+        stack
+            .reverse()
+            .map((tag) => `</${tag}>`)
+            .join(""));
+};
+export const JSXPreview = memo(({ jsx, isStreaming = false, components, bindings, onError, className, children, ...props }) => {
+    const [prevJsx, setPrevJsx] = useState(jsx);
+    const [error, setError] = useState(null);
+    const [_lastGoodJsx, setLastGoodJsx] = useState("");
+    // Clear error when jsx changes (derived state pattern)
+    if (jsx !== prevJsx) {
+        setPrevJsx(jsx);
+        setError(null);
+    }
+    const processedJsx = useMemo(() => (isStreaming ? completeJsxTag(jsx) : jsx), [jsx, isStreaming]);
+    const contextValue = useMemo(() => ({
+        bindings,
+        components,
+        error,
+        isStreaming,
+        jsx,
+        onErrorProp: onError,
+        processedJsx,
+        setError,
+        setLastGoodJsx,
+    }), [
+        bindings,
+        components,
+        error,
+        isStreaming,
+        jsx,
+        onError,
+        processedJsx,
+        setError,
+    ]);
+    return (_jsx(JSXPreviewContext.Provider, { value: contextValue, children: _jsx("div", { className: cn("relative", className), ...props, children: children }) }));
+});
+JSXPreview.displayName = "JSXPreview";
+export const JSXPreviewContent = memo(({ className, ...props }) => {
+    const { processedJsx, isStreaming, components, bindings, setError, setLastGoodJsx, onErrorProp, } = useJSXPreview();
+    const errorReportedRef = useRef(null);
+    const lastGoodJsxRef = useRef("");
+    const [hadError, setHadError] = useState(false);
+    // Reset error tracking when jsx changes
+    useEffect(() => {
+        errorReportedRef.current = null;
+        setHadError(false);
+    }, [processedJsx]);
+    const handleError = useCallback((err) => {
+        // Prevent duplicate error reports for the same jsx
+        if (errorReportedRef.current === processedJsx) {
+            return;
+        }
+        errorReportedRef.current = processedJsx;
+        // During streaming, suppress errors and fall back to last good JSX
+        if (isStreaming) {
+            setHadError(true);
+            return;
+        }
+        setError(err);
+        onErrorProp?.(err);
+    }, [processedJsx, isStreaming, onErrorProp, setError]);
+    // Track the last JSX that rendered without error
+    useEffect(() => {
+        if (!errorReportedRef.current) {
+            lastGoodJsxRef.current = processedJsx;
+            setLastGoodJsx(processedJsx);
+        }
+    }, [processedJsx, setLastGoodJsx]);
+    // During streaming, if the current JSX errored, re-render with last good version
+    const displayJsx = isStreaming && hadError ? lastGoodJsxRef.current : processedJsx;
+    return (_jsx("div", { className: cn("jsx-preview-content", className), ...props, children: _jsx(JsxParser, { bindings: bindings, components: components, jsx: displayJsx, onError: handleError, renderInWrapper: false }) }));
+});
+JSXPreviewContent.displayName = "JSXPreviewContent";
+const renderChildren = (children, error) => {
+    if (typeof children === "function") {
+        return children(error);
+    }
+    return children;
+};
+export const JSXPreviewError = memo(({ className, children, ...props }) => {
+    const { error } = useJSXPreview();
+    if (!error) {
+        return null;
+    }
+    return (_jsx("div", { className: cn("flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm", className), ...props, children: children ? (renderChildren(children, error)) : (_jsxs(_Fragment, { children: [_jsx(AlertCircle, { className: "size-4 shrink-0" }), _jsx("span", { children: error.message })] })) }));
+});
+JSXPreviewError.displayName = "JSXPreviewError";

package/dist/molecules/ai/loader.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "react";
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+    size?: number;
+};
+export declare const Loader: ({ className, size, ...props }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=loader.d.ts.map

package/dist/molecules/ai/loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../src/molecules/ai/loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAkF5C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,+BAAoC,WAAW,4CAUrE,CAAC"}

package/dist/molecules/ai/loader.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+const LoaderIcon = ({ size = 16 }) => (_jsxs("svg", { height: size, strokeLinejoin: "round", style: { color: "currentcolor" }, viewBox: "0 0 16 16", width: size, children: [_jsx("title", { children: "Loader" }), _jsxs("g", { clipPath: "url(#clip0_2393_1490)", children: [_jsx("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M8 16V12", opacity: "0.5", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M3.29773 1.52783L5.64887 4.7639", opacity: "0.9", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M12.7023 1.52783L10.3511 4.7639", opacity: "0.1", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M12.7023 14.472L10.3511 11.236", opacity: "0.4", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M3.29773 14.472L5.64887 11.236", opacity: "0.6", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M15.6085 5.52783L11.8043 6.7639", opacity: "0.2", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M0.391602 10.472L4.19583 9.23598", opacity: "0.7", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M15.6085 10.4722L11.8043 9.2361", opacity: "0.3", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M0.391602 5.52783L4.19583 6.7639", opacity: "0.8", stroke: "currentColor", strokeWidth: "1.5" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_2393_1490", children: _jsx("rect", { fill: "white", height: "16", width: "16" }) }) })] }));
+export const Loader = ({ className, size = 16, ...props }) => (_jsx("div", { className: cn("inline-flex animate-spin items-center justify-center", className), ...props, children: _jsx(LoaderIcon, { size: size }) }));

package/dist/molecules/ai/message.d.ts

@@ -0,0 +1,38 @@
+import { Button } from "@chatsdk-dev/ui/atoms/button";
+import { ButtonGroup } from "@chatsdk-dev/ui/atoms/button-group";
+import type { UIMessage } from "ai";
+import type { ComponentProps, HTMLAttributes } from "react";
+import { Streamdown } from "streamdown";
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+    from: UIMessage["role"];
+};
+export declare const Message: ({ className, from, ...props }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+export declare const MessageContent: ({ children, className, ...props }: MessageContentProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageActionsProps = ComponentProps<"div">;
+export declare const MessageActions: ({ className, children, ...props }: MessageActionsProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageActionProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+    label?: string;
+};
+export declare const MessageAction: ({ tooltip, children, label, variant, size, ...props }: MessageActionProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
+    defaultBranch?: number;
+    onBranchChange?: (branchIndex: number) => void;
+};
+export declare const MessageBranch: ({ defaultBranch, onBranchChange, className, ...props }: MessageBranchProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
+export declare const MessageBranchContent: ({ children, ...props }: MessageBranchContentProps) => import("react/jsx-runtime").JSX.Element[];
+export type MessageBranchSelectorProps = ComponentProps<typeof ButtonGroup>;
+export declare const MessageBranchSelector: ({ className, ...props }: MessageBranchSelectorProps) => import("react/jsx-runtime").JSX.Element | null;
+export type MessageBranchPreviousProps = ComponentProps<typeof Button>;
+export declare const MessageBranchPrevious: ({ children, ...props }: MessageBranchPreviousProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageBranchNextProps = ComponentProps<typeof Button>;
+export declare const MessageBranchNext: ({ children, ...props }: MessageBranchNextProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
+export declare const MessageBranchPage: ({ className, ...props }: MessageBranchPageProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageResponseProps = ComponentProps<typeof Streamdown>;
+export declare const MessageResponse: import("react").MemoExoticComponent<({ className, ...props }: MessageResponseProps) => import("react/jsx-runtime").JSX.Element>;
+export type MessageToolbarProps = ComponentProps<"div">;
+export declare const MessageToolbar: ({ className, children, ...props }: MessageToolbarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=message.d.ts.map

package/dist/molecules/ai/message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/molecules/ai/message.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EACL,WAAW,EAEZ,MAAM,oCAAoC,CAAC;AAY5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAEpC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAgB,MAAM,OAAO,CAAC;AAU1E,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC1D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,+BAA+B,YAAY,4CASlE,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjE,eAAO,MAAM,cAAc,GAAI,mCAI5B,mBAAmB,4CAYrB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAExD,eAAO,MAAM,cAAc,GAAI,mCAI5B,mBAAmB,4CAIrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,uDAO3B,kBAAkB,4CAsBpB,CAAC;AA2BF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,wDAK3B,kBAAkB,4CA4CpB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvE,eAAO,MAAM,oBAAoB,GAAI,wBAGlC,yBAAyB,8CA0B3B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;AAE5E,eAAO,MAAM,qBAAqB,GAAI,yBAGnC,0BAA0B,mDAkB5B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEvE,eAAO,MAAM,qBAAqB,GAAI,wBAGnC,0BAA0B,4CAgB5B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEnE,eAAO,MAAM,iBAAiB,GAAI,wBAG/B,sBAAsB,4CAgBxB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAErE,eAAO,MAAM,iBAAiB,GAAI,yBAG/B,sBAAsB,4CAcxB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAIrE,eAAO,MAAM,eAAe,gEACA,oBAAoB,6CAa/C,CAAC;AAIF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAExD,eAAO,MAAM,cAAc,GAAI,mCAI5B,mBAAmB,4CAUrB,CAAC"}

package/dist/molecules/ai/message.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@chatsdk-dev/ui/atoms/button";
+import { ButtonGroup, ButtonGroupText, } from "@chatsdk-dev/ui/atoms/button-group";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@chatsdk-dev/ui/atoms/tooltip";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+import { Streamdown } from "streamdown";
+export const Message = ({ className, from, ...props }) => (_jsx("div", { className: cn("group flex w-full max-w-[95%] flex-col gap-2", from === "user" ? "is-user ml-auto justify-end" : "is-assistant", className), ...props }));
+export const MessageContent = ({ children, className, ...props }) => (_jsx("div", { className: cn("is-user:dark flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm", "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground", "group-[.is-assistant]:text-foreground", className), ...props, children: children }));
+export const MessageActions = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center gap-1", className), ...props, children: children }));
+export const MessageAction = ({ tooltip, children, label, variant = "ghost", size = "icon", ...props }) => {
+    const button = (_jsxs(Button, { size: size, type: "button", variant: variant, ...props, children: [children, _jsx("span", { className: "sr-only", children: label || tooltip })] }));
+    if (tooltip) {
+        return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: () => button }), _jsx(TooltipContent, { children: _jsx("p", { children: tooltip }) })] }) }));
+    }
+    return button;
+};
+const MessageBranchContext = createContext(null);
+const useMessageBranch = () => {
+    const context = useContext(MessageBranchContext);
+    if (!context) {
+        throw new Error("MessageBranch components must be used within MessageBranch");
+    }
+    return context;
+};
+export const MessageBranch = ({ defaultBranch = 0, onBranchChange, className, ...props }) => {
+    const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+    const [branches, setBranches] = useState([]);
+    const handleBranchChange = useCallback((newBranch) => {
+        setCurrentBranch(newBranch);
+        onBranchChange?.(newBranch);
+    }, [onBranchChange]);
+    const goToPrevious = useCallback(() => {
+        const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+        handleBranchChange(newBranch);
+    }, [currentBranch, branches.length, handleBranchChange]);
+    const goToNext = useCallback(() => {
+        const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+        handleBranchChange(newBranch);
+    }, [currentBranch, branches.length, handleBranchChange]);
+    const contextValue = useMemo(() => ({
+        branches,
+        currentBranch,
+        goToNext,
+        goToPrevious,
+        setBranches,
+        totalBranches: branches.length,
+    }), [branches, currentBranch, goToNext, goToPrevious]);
+    return (_jsx(MessageBranchContext.Provider, { value: contextValue, children: _jsx("div", { className: cn("grid w-full gap-2 [&>div]:pb-0", className), ...props }) }));
+};
+export const MessageBranchContent = ({ children, ...props }) => {
+    const { currentBranch, setBranches, branches } = useMessageBranch();
+    const childrenArray = useMemo(() => (Array.isArray(children) ? children : [children]), [children]);
+    // Use useEffect to update branches when they change
+    useEffect(() => {
+        if (branches.length !== childrenArray.length) {
+            setBranches(childrenArray);
+        }
+    }, [childrenArray, branches, setBranches]);
+    return childrenArray.map((branch, index) => (_jsx("div", { className: cn("grid gap-2 overflow-hidden [&>div]:pb-0", index === currentBranch ? "block" : "hidden"), ...props, children: branch }, branch.key)));
+};
+export const MessageBranchSelector = ({ className, ...props }) => {
+    const { totalBranches } = useMessageBranch();
+    // Don't render if there's only one branch
+    if (totalBranches <= 1) {
+        return null;
+    }
+    return (_jsx(ButtonGroup, { className: cn("[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md", className), orientation: "horizontal", ...props }));
+};
+export const MessageBranchPrevious = ({ children, ...props }) => {
+    const { goToPrevious, totalBranches } = useMessageBranch();
+    return (_jsx(Button, { "aria-label": "Previous branch", disabled: totalBranches <= 1, onClick: goToPrevious, size: "icon", type: "button", variant: "ghost", ...props, children: children ?? _jsx(ChevronLeftIcon, { size: 14 }) }));
+};
+export const MessageBranchNext = ({ children, ...props }) => {
+    const { goToNext, totalBranches } = useMessageBranch();
+    return (_jsx(Button, { "aria-label": "Next branch", disabled: totalBranches <= 1, onClick: goToNext, size: "icon", type: "button", variant: "ghost", ...props, children: children ?? _jsx(ChevronRightIcon, { size: 14 }) }));
+};
+export const MessageBranchPage = ({ className, ...props }) => {
+    const { currentBranch, totalBranches } = useMessageBranch();
+    return (_jsxs(ButtonGroupText, { className: cn("border-none bg-transparent text-muted-foreground shadow-none", className), ...props, children: [currentBranch + 1, " of ", totalBranches] }));
+};
+const streamdownPlugins = { cjk, code, math, mermaid };
+export const MessageResponse = memo(({ className, ...props }) => (_jsx(Streamdown, { className: cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className), plugins: streamdownPlugins, ...props })), (prevProps, nextProps) => prevProps.children === nextProps.children &&
+    nextProps.isAnimating === prevProps.isAnimating);
+MessageResponse.displayName = "MessageResponse";
+export const MessageToolbar = ({ className, children, ...props }) => (_jsx("div", { className: cn("mt-4 flex w-full items-center justify-between gap-4", className), ...props, children: children }));