@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/message.cjs

@@ -0,0 +1,287 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _button = require('../ui/button');
+
+
+
+var _buttongroup = require('../ui/button-group');
+
+
+
+
+
+var _tooltip = require('../ui/tooltip');
+var _utils = require('../../lib/utils');
+var _cjk = require('@streamdown/cjk');
+var _code = require('@streamdown/code');
+var _math = require('@streamdown/math');
+var _mermaid = require('@streamdown/mermaid');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+
+var _react = require('react');
+var _streamdown = require('streamdown');
+const Message = ({ className, from, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "group flex w-full max-w-[95%] flex-col gap-2",
+      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
+      className
+    ),
+    ...props
+  }
+);
+const MessageContent = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "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
+  }
+);
+const MessageActions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "flex items-center gap-1", className), ...props, children });
+const MessageAction = ({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "icon-sm",
+  ...props
+}) => {
+  const button = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _button.Button, { size, type: "button", variant, ...props, children: [
+    children,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: label || tooltip })
+  ] });
+  if (tooltip) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _tooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _tooltip.Tooltip, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _tooltip.TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _tooltip.TooltipContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: tooltip }) })
+    ] }) });
+  }
+  return button;
+};
+const MessageBranchContext = _react.createContext.call(void 0, 
+  null
+);
+const useMessageBranch = () => {
+  const context = _react.use.call(void 0, MessageBranchContext);
+  if (!context) {
+    throw new Error(
+      "MessageBranch components must be used within MessageBranch"
+    );
+  }
+  return context;
+};
+const MessageBranch = ({
+  defaultBranch = 0,
+  onBranchChange,
+  className,
+  ...props
+}) => {
+  const [currentBranch, setCurrentBranch] = _react.useState.call(void 0, defaultBranch);
+  const [branches, setBranches] = _react.useState.call(void 0, []);
+  const handleBranchChange = _react.useCallback.call(void 0, 
+    (newBranch) => {
+      setCurrentBranch(newBranch);
+      _optionalChain([onBranchChange, 'optionalCall', _ => _(newBranch)]);
+    },
+    [onBranchChange]
+  );
+  const goToPrevious = _react.useCallback.call(void 0, () => {
+    const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+    handleBranchChange(newBranch);
+  }, [currentBranch, branches.length, handleBranchChange]);
+  const goToNext = _react.useCallback.call(void 0, () => {
+    const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+    handleBranchChange(newBranch);
+  }, [currentBranch, branches.length, handleBranchChange]);
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({
+      branches,
+      currentBranch,
+      goToNext,
+      goToPrevious,
+      setBranches,
+      totalBranches: branches.length
+    }),
+    [branches, currentBranch, goToNext, goToPrevious]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MessageBranchContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "grid w-full gap-2 [&>div]:pb-0", className),
+      ...props
+    }
+  ) });
+};
+const MessageBranchContent = ({
+  children,
+  ...props
+}) => {
+  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const childrenArray = _react.useMemo.call(void 0, 
+    () => Array.isArray(children) ? children : [children],
+    [children]
+  );
+  _react.useEffect.call(void 0, () => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray);
+    }
+  }, [childrenArray, branches, setBranches]);
+  return childrenArray.map((branch, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        index === currentBranch ? "block" : "hidden"
+      ),
+      ...props,
+      children: branch
+    },
+    branch.key
+  ));
+};
+const MessageBranchSelector = ({
+  className,
+  ...props
+}) => {
+  const { totalBranches } = useMessageBranch();
+  if (totalBranches <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _buttongroup.ButtonGroup,
+    {
+      className: _utils.cn.call(void 0, 
+        "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
+        className
+      ),
+      orientation: "horizontal",
+      ...props
+    }
+  );
+};
+const MessageBranchPrevious = ({
+  children,
+  ...props
+}) => {
+  const { goToPrevious, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _button.Button,
+    {
+      "aria-label": "Previous branch",
+      disabled: totalBranches <= 1,
+      onClick: goToPrevious,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeftIcon, { size: 14 })))
+    }
+  );
+};
+const MessageBranchNext = ({
+  children,
+  ...props
+}) => {
+  const { goToNext, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _button.Button,
+    {
+      "aria-label": "Next branch",
+      disabled: totalBranches <= 1,
+      onClick: goToNext,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRightIcon, { size: 14 })))
+    }
+  );
+};
+const MessageBranchPage = ({
+  className,
+  ...props
+}) => {
+  const { currentBranch, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _buttongroup.ButtonGroupText,
+    {
+      className: _utils.cn.call(void 0, 
+        "border-none bg-transparent text-muted-foreground shadow-none",
+        className
+      ),
+      ...props,
+      children: [
+        currentBranch + 1,
+        " of ",
+        totalBranches
+      ]
+    }
+  );
+};
+const streamdownPlugins = { cjk: _cjk.cjk, code: _code.code, math: _math.math, mermaid: _mermaid.mermaid };
+const MessageResponse = _react.memo.call(void 0, 
+  ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _streamdown.Streamdown,
+    {
+      className: _utils.cn.call(void 0, 
+        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        className
+      ),
+      plugins: streamdownPlugins,
+      ...props
+    }
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children
+);
+MessageResponse.displayName = "MessageResponse";
+const MessageToolbar = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "mt-4 flex w-full items-center justify-between gap-4",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Message = Message; exports.MessageAction = MessageAction; exports.MessageActions = MessageActions; exports.MessageBranch = MessageBranch; exports.MessageBranchContent = MessageBranchContent; exports.MessageBranchNext = MessageBranchNext; exports.MessageBranchPage = MessageBranchPage; exports.MessageBranchPrevious = MessageBranchPrevious; exports.MessageBranchSelector = MessageBranchSelector; exports.MessageContent = MessageContent; exports.MessageResponse = MessageResponse; exports.MessageToolbar = MessageToolbar;

package/dist/components/ai-elements/message.d.cts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { HTMLAttributes, ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UIMessage } from 'ai';
+import { Button } from '../ui/button.cjs';
+import { ButtonGroup } from '../ui/button-group.cjs';
+import { Streamdown } from 'streamdown';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../ui/separator.cjs';
+import 'radix-ui';
+
+type MessageProps = HTMLAttributes<HTMLDivElement> & {
+    from: UIMessage["role"];
+};
+declare const Message: ({ className, from, ...props }: MessageProps) => react_jsx_runtime.JSX.Element;
+type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+declare const MessageContent: ({ children, className, ...props }: MessageContentProps) => react_jsx_runtime.JSX.Element;
+type MessageActionsProps = ComponentProps<"div">;
+declare const MessageActions: ({ className, children, ...props }: MessageActionsProps) => react_jsx_runtime.JSX.Element;
+type MessageActionProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+    label?: string;
+};
+declare const MessageAction: ({ tooltip, children, label, variant, size, ...props }: MessageActionProps) => react_jsx_runtime.JSX.Element;
+type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
+    defaultBranch?: number;
+    onBranchChange?: (branchIndex: number) => void;
+};
+declare const MessageBranch: ({ defaultBranch, onBranchChange, className, ...props }: MessageBranchProps) => react_jsx_runtime.JSX.Element;
+type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
+declare const MessageBranchContent: ({ children, ...props }: MessageBranchContentProps) => react_jsx_runtime.JSX.Element[];
+type MessageBranchSelectorProps = ComponentProps<typeof ButtonGroup>;
+declare const MessageBranchSelector: ({ className, ...props }: MessageBranchSelectorProps) => react_jsx_runtime.JSX.Element | null;
+type MessageBranchPreviousProps = ComponentProps<typeof Button>;
+declare const MessageBranchPrevious: ({ children, ...props }: MessageBranchPreviousProps) => react_jsx_runtime.JSX.Element;
+type MessageBranchNextProps = ComponentProps<typeof Button>;
+declare const MessageBranchNext: ({ children, ...props }: MessageBranchNextProps) => react_jsx_runtime.JSX.Element;
+type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
+declare const MessageBranchPage: ({ className, ...props }: MessageBranchPageProps) => react_jsx_runtime.JSX.Element;
+type MessageResponseProps = ComponentProps<typeof Streamdown>;
+declare const MessageResponse: React.MemoExoticComponent<({ className, ...props }: MessageResponseProps) => react_jsx_runtime.JSX.Element>;
+type MessageToolbarProps = ComponentProps<"div">;
+declare const MessageToolbar: ({ className, children, ...props }: MessageToolbarProps) => react_jsx_runtime.JSX.Element;
+
+export { Message, MessageAction, type MessageActionProps, MessageActions, type MessageActionsProps, MessageBranch, MessageBranchContent, type MessageBranchContentProps, MessageBranchNext, type MessageBranchNextProps, MessageBranchPage, type MessageBranchPageProps, MessageBranchPrevious, type MessageBranchPreviousProps, type MessageBranchProps, MessageBranchSelector, type MessageBranchSelectorProps, MessageContent, type MessageContentProps, type MessageProps, MessageResponse, type MessageResponseProps, MessageToolbar, type MessageToolbarProps };

package/dist/components/ai-elements/message.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { HTMLAttributes, ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UIMessage } from 'ai';
+import { Button } from '../ui/button.js';
+import { ButtonGroup } from '../ui/button-group.js';
+import { Streamdown } from 'streamdown';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../ui/separator.js';
+import 'radix-ui';
+
+type MessageProps = HTMLAttributes<HTMLDivElement> & {
+    from: UIMessage["role"];
+};
+declare const Message: ({ className, from, ...props }: MessageProps) => react_jsx_runtime.JSX.Element;
+type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+declare const MessageContent: ({ children, className, ...props }: MessageContentProps) => react_jsx_runtime.JSX.Element;
+type MessageActionsProps = ComponentProps<"div">;
+declare const MessageActions: ({ className, children, ...props }: MessageActionsProps) => react_jsx_runtime.JSX.Element;
+type MessageActionProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+    label?: string;
+};
+declare const MessageAction: ({ tooltip, children, label, variant, size, ...props }: MessageActionProps) => react_jsx_runtime.JSX.Element;
+type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
+    defaultBranch?: number;
+    onBranchChange?: (branchIndex: number) => void;
+};
+declare const MessageBranch: ({ defaultBranch, onBranchChange, className, ...props }: MessageBranchProps) => react_jsx_runtime.JSX.Element;
+type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
+declare const MessageBranchContent: ({ children, ...props }: MessageBranchContentProps) => react_jsx_runtime.JSX.Element[];
+type MessageBranchSelectorProps = ComponentProps<typeof ButtonGroup>;
+declare const MessageBranchSelector: ({ className, ...props }: MessageBranchSelectorProps) => react_jsx_runtime.JSX.Element | null;
+type MessageBranchPreviousProps = ComponentProps<typeof Button>;
+declare const MessageBranchPrevious: ({ children, ...props }: MessageBranchPreviousProps) => react_jsx_runtime.JSX.Element;
+type MessageBranchNextProps = ComponentProps<typeof Button>;
+declare const MessageBranchNext: ({ children, ...props }: MessageBranchNextProps) => react_jsx_runtime.JSX.Element;
+type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
+declare const MessageBranchPage: ({ className, ...props }: MessageBranchPageProps) => react_jsx_runtime.JSX.Element;
+type MessageResponseProps = ComponentProps<typeof Streamdown>;
+declare const MessageResponse: React.MemoExoticComponent<({ className, ...props }: MessageResponseProps) => react_jsx_runtime.JSX.Element>;
+type MessageToolbarProps = ComponentProps<"div">;
+declare const MessageToolbar: ({ className, children, ...props }: MessageToolbarProps) => react_jsx_runtime.JSX.Element;
+
+export { Message, MessageAction, type MessageActionProps, MessageActions, type MessageActionsProps, MessageBranch, MessageBranchContent, type MessageBranchContentProps, MessageBranchNext, type MessageBranchNextProps, MessageBranchPage, type MessageBranchPageProps, MessageBranchPrevious, type MessageBranchPreviousProps, type MessageBranchProps, MessageBranchSelector, type MessageBranchSelectorProps, MessageContent, type MessageContentProps, type MessageProps, MessageResponse, type MessageResponseProps, MessageToolbar, type MessageToolbarProps };

package/dist/components/ai-elements/message.js

@@ -0,0 +1,287 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import {
+  ButtonGroup,
+  ButtonGroupText
+} from "../ui/button-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../ui/tooltip";
+import { cn } from "../../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,
+  use,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { Streamdown } from "streamdown";
+const Message = ({ className, from, ...props }) => /* @__PURE__ */ 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
+  }
+);
+const MessageContent = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ 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
+  }
+);
+const MessageActions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), ...props, children });
+const MessageAction = ({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "icon-sm",
+  ...props
+}) => {
+  const button = /* @__PURE__ */ jsxs(Button, { size, type: "button", variant, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label || tooltip })
+  ] });
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+    ] }) });
+  }
+  return button;
+};
+const MessageBranchContext = createContext(
+  null
+);
+const useMessageBranch = () => {
+  const context = use(MessageBranchContext);
+  if (!context) {
+    throw new Error(
+      "MessageBranch components must be used within MessageBranch"
+    );
+  }
+  return context;
+};
+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 /* @__PURE__ */ jsx(MessageBranchContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid w-full gap-2 [&>div]:pb-0", className),
+      ...props
+    }
+  ) });
+};
+const MessageBranchContent = ({
+  children,
+  ...props
+}) => {
+  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const childrenArray = useMemo(
+    () => Array.isArray(children) ? children : [children],
+    [children]
+  );
+  useEffect(() => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray);
+    }
+  }, [childrenArray, branches, setBranches]);
+  return childrenArray.map((branch, index) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        index === currentBranch ? "block" : "hidden"
+      ),
+      ...props,
+      children: branch
+    },
+    branch.key
+  ));
+};
+const MessageBranchSelector = ({
+  className,
+  ...props
+}) => {
+  const { totalBranches } = useMessageBranch();
+  if (totalBranches <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ButtonGroup,
+    {
+      className: cn(
+        "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
+        className
+      ),
+      orientation: "horizontal",
+      ...props
+    }
+  );
+};
+const MessageBranchPrevious = ({
+  children,
+  ...props
+}) => {
+  const { goToPrevious, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Previous branch",
+      disabled: totalBranches <= 1,
+      onClick: goToPrevious,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 14 })
+    }
+  );
+};
+const MessageBranchNext = ({
+  children,
+  ...props
+}) => {
+  const { goToNext, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Next branch",
+      disabled: totalBranches <= 1,
+      onClick: goToNext,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { size: 14 })
+    }
+  );
+};
+const MessageBranchPage = ({
+  className,
+  ...props
+}) => {
+  const { currentBranch, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ 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 };
+const MessageResponse = memo(
+  ({ className, ...props }) => /* @__PURE__ */ jsx(
+    Streamdown,
+    {
+      className: cn(
+        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        className
+      ),
+      plugins: streamdownPlugins,
+      ...props
+    }
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children
+);
+MessageResponse.displayName = "MessageResponse";
+const MessageToolbar = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "mt-4 flex w-full items-center justify-between gap-4",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+export {
+  Message,
+  MessageAction,
+  MessageActions,
+  MessageBranch,
+  MessageBranchContent,
+  MessageBranchNext,
+  MessageBranchPage,
+  MessageBranchPrevious,
+  MessageBranchSelector,
+  MessageContent,
+  MessageResponse,
+  MessageToolbar
+};