@chatsdk-dev/elements 0.0.1

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

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Alert, AlertDescription } from '@chatsdk-dev/ui/components/alert';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { ToolUIPart } from 'ai';
+import { ComponentProps, ReactNode } from 'react';
+
+type ToolUIPartApproval = {
+    id: string;
+    approved?: never;
+    reason?: never;
+} | {
+    id: string;
+    approved: boolean;
+    reason?: string;
+} | {
+    id: string;
+    approved: true;
+    reason?: string;
+} | {
+    id: string;
+    approved: true;
+    reason?: string;
+} | {
+    id: string;
+    approved: false;
+    reason?: string;
+} | undefined;
+type ConfirmationProps = ComponentProps<typeof Alert> & {
+    approval?: ToolUIPartApproval;
+    state: ToolUIPart["state"];
+};
+declare const Confirmation: ({ className, approval, state, ...props }: ConfirmationProps) => react_jsx_runtime.JSX.Element | null;
+type ConfirmationTitleProps = ComponentProps<typeof AlertDescription>;
+declare const ConfirmationTitle: ({ className, ...props }: ConfirmationTitleProps) => react_jsx_runtime.JSX.Element;
+interface ConfirmationRequestProps {
+    children?: ReactNode;
+}
+declare const ConfirmationRequest: ({ children }: ConfirmationRequestProps) => ReactNode;
+interface ConfirmationAcceptedProps {
+    children?: ReactNode;
+}
+declare const ConfirmationAccepted: ({ children, }: ConfirmationAcceptedProps) => ReactNode;
+interface ConfirmationRejectedProps {
+    children?: ReactNode;
+}
+declare const ConfirmationRejected: ({ children, }: ConfirmationRejectedProps) => ReactNode;
+type ConfirmationActionsProps = ComponentProps<"div">;
+declare const ConfirmationActions: ({ className, ...props }: ConfirmationActionsProps) => react_jsx_runtime.JSX.Element | null;
+type ConfirmationActionProps = ComponentProps<typeof Button>;
+declare const ConfirmationAction: (props: ConfirmationActionProps) => react_jsx_runtime.JSX.Element;
+
+export { Confirmation, ConfirmationAccepted, type ConfirmationAcceptedProps, ConfirmationAction, type ConfirmationActionProps, ConfirmationActions, type ConfirmationActionsProps, type ConfirmationProps, ConfirmationRejected, type ConfirmationRejectedProps, ConfirmationRequest, type ConfirmationRequestProps, ConfirmationTitle, type ConfirmationTitleProps };

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

@@ -0,0 +1,76 @@
+import { Alert, AlertDescription } from '@chatsdk-dev/ui/components/alert';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { createContext, useMemo, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var ConfirmationContext = createContext(
+  null
+);
+var useConfirmation = () => {
+  const context = useContext(ConfirmationContext);
+  if (!context) {
+    throw new Error("Confirmation components must be used within Confirmation");
+  }
+  return context;
+};
+var Confirmation = ({
+  className,
+  approval,
+  state,
+  ...props
+}) => {
+  const contextValue = useMemo(() => ({ approval, state }), [approval, state]);
+  if (!approval || state === "input-streaming" || state === "input-available") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ConfirmationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Alert, { className: cn("flex flex-col gap-2", className), ...props }) });
+};
+var ConfirmationTitle = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(AlertDescription, { className: cn("inline", className), ...props });
+var ConfirmationRequest = ({ children }) => {
+  const { state } = useConfirmation();
+  if (state !== "approval-requested") {
+    return null;
+  }
+  return children;
+};
+var ConfirmationAccepted = ({
+  children
+}) => {
+  const { approval, state } = useConfirmation();
+  if (!approval?.approved || state !== "approval-responded" && state !== "output-denied" && state !== "output-available") {
+    return null;
+  }
+  return children;
+};
+var ConfirmationRejected = ({
+  children
+}) => {
+  const { approval, state } = useConfirmation();
+  if (approval?.approved !== false || state !== "approval-responded" && state !== "output-denied" && state !== "output-available") {
+    return null;
+  }
+  return children;
+};
+var ConfirmationActions = ({
+  className,
+  ...props
+}) => {
+  const { state } = useConfirmation();
+  if (state !== "approval-requested") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-end gap-2 self-end", className),
+      ...props
+    }
+  );
+};
+var ConfirmationAction = (props) => /* @__PURE__ */ jsx(Button, { className: "h-8 px-3 text-sm", type: "button", ...props });
+
+export { Confirmation, ConfirmationAccepted, ConfirmationAction, ConfirmationActions, ConfirmationRejected, ConfirmationRequest, ConfirmationTitle };

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

@@ -0,0 +1,5 @@
+import { ConnectionLineComponent } from '@xyflow/react';
+
+declare const Connection: ConnectionLineComponent;
+
+export { Connection };

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

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ai-elements/connection.tsx
+var HALF = 0.5;
+var Connection = ({
+  fromX,
+  fromY,
+  toX,
+  toY
+}) => /* @__PURE__ */ jsxs("g", { children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      className: "animated",
+      d: `M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`,
+      fill: "none",
+      stroke: "var(--color-ring)",
+      strokeWidth: 1
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: toX,
+      cy: toY,
+      fill: "#fff",
+      r: 3,
+      stroke: "var(--color-ring)",
+      strokeWidth: 1
+    }
+  )
+] });
+
+export { Connection };

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

@@ -0,0 +1,36 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { HoverCard, HoverCardContent } from '@chatsdk-dev/ui/components/hover-card';
+import { LanguageModelUsage } from 'ai';
+
+type ModelId = string;
+interface ContextSchema {
+    usedTokens: number;
+    maxTokens: number;
+    usage?: LanguageModelUsage;
+    modelId?: ModelId;
+}
+type ContextProps = ComponentProps<typeof HoverCard> & ContextSchema;
+declare const Context: ({ usedTokens, maxTokens, usage, modelId, ...props }: ContextProps) => react_jsx_runtime.JSX.Element;
+type ContextTriggerProps = ComponentProps<typeof Button>;
+declare const ContextTrigger: ({ children, ...props }: ContextTriggerProps) => react_jsx_runtime.JSX.Element;
+type ContextContentProps = ComponentProps<typeof HoverCardContent>;
+declare const ContextContent: ({ className, ...props }: ContextContentProps) => react_jsx_runtime.JSX.Element;
+type ContextContentHeaderProps = ComponentProps<"div">;
+declare const ContextContentHeader: ({ children, className, ...props }: ContextContentHeaderProps) => react_jsx_runtime.JSX.Element;
+type ContextContentBodyProps = ComponentProps<"div">;
+declare const ContextContentBody: ({ children, className, ...props }: ContextContentBodyProps) => react_jsx_runtime.JSX.Element;
+type ContextContentFooterProps = ComponentProps<"div">;
+declare const ContextContentFooter: ({ children, className, ...props }: ContextContentFooterProps) => react_jsx_runtime.JSX.Element;
+type ContextInputUsageProps = ComponentProps<"div">;
+declare const ContextInputUsage: ({ className, children, ...props }: ContextInputUsageProps) => string | number | bigint | true | react_jsx_runtime.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | null;
+type ContextOutputUsageProps = ComponentProps<"div">;
+declare const ContextOutputUsage: ({ className, children, ...props }: ContextOutputUsageProps) => string | number | bigint | true | react_jsx_runtime.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | null;
+type ContextReasoningUsageProps = ComponentProps<"div">;
+declare const ContextReasoningUsage: ({ className, children, ...props }: ContextReasoningUsageProps) => string | number | bigint | true | react_jsx_runtime.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | null;
+type ContextCacheUsageProps = ComponentProps<"div">;
+declare const ContextCacheUsage: ({ className, children, ...props }: ContextCacheUsageProps) => string | number | bigint | true | react_jsx_runtime.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | null;
+
+export { Context, ContextCacheUsage, type ContextCacheUsageProps, ContextContent, ContextContentBody, type ContextContentBodyProps, ContextContentFooter, type ContextContentFooterProps, ContextContentHeader, type ContextContentHeaderProps, type ContextContentProps, ContextInputUsage, type ContextInputUsageProps, ContextOutputUsage, type ContextOutputUsageProps, type ContextProps, ContextReasoningUsage, type ContextReasoningUsageProps, ContextTrigger, type ContextTriggerProps };

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

@@ -0,0 +1,320 @@
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@chatsdk-dev/ui/components/hover-card';
+import { Progress } from '@chatsdk-dev/ui/components/progress';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { createContext, useMemo, useContext } from 'react';
+import { getUsage } from 'tokenlens';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var PERCENT_MAX = 100;
+var ICON_RADIUS = 10;
+var ICON_VIEWBOX = 24;
+var ICON_CENTER = 12;
+var ICON_STROKE_WIDTH = 2;
+var ContextContext = createContext(null);
+var useContextValue = () => {
+  const context = useContext(ContextContext);
+  if (!context) {
+    throw new Error("Context components must be used within Context");
+  }
+  return context;
+};
+var Context = ({
+  usedTokens,
+  maxTokens,
+  usage,
+  modelId,
+  ...props
+}) => {
+  const contextValue = useMemo(
+    () => ({ maxTokens, modelId, usage, usedTokens }),
+    [maxTokens, modelId, usage, usedTokens]
+  );
+  return /* @__PURE__ */ jsx(ContextContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(HoverCard, { ...props }) });
+};
+var ContextIcon = () => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const circumference = 2 * Math.PI * ICON_RADIUS;
+  const usedPercent = usedTokens / maxTokens;
+  const dashOffset = circumference * (1 - usedPercent);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-label": "Model context usage",
+      height: "20",
+      role: "img",
+      style: { color: "currentcolor" },
+      viewBox: `0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`,
+      width: "20",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: ICON_CENTER,
+            cy: ICON_CENTER,
+            fill: "none",
+            opacity: "0.25",
+            r: ICON_RADIUS,
+            stroke: "currentColor",
+            strokeWidth: ICON_STROKE_WIDTH
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: ICON_CENTER,
+            cy: ICON_CENTER,
+            fill: "none",
+            opacity: "0.7",
+            r: ICON_RADIUS,
+            stroke: "currentColor",
+            strokeDasharray: `${circumference} ${circumference}`,
+            strokeDashoffset: dashOffset,
+            strokeLinecap: "round",
+            strokeWidth: ICON_STROKE_WIDTH,
+            style: { transform: "rotate(-90deg)", transformOrigin: "center" }
+          }
+        )
+      ]
+    }
+  );
+};
+var ContextTrigger = ({ children, ...props }) => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const renderedPercent = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 1,
+    style: "percent"
+  }).format(usedPercent);
+  return /* @__PURE__ */ jsx(
+    HoverCardTrigger,
+    {
+      render: () => children ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", ...props, children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: renderedPercent }),
+        /* @__PURE__ */ jsx(ContextIcon, {})
+      ] })
+    }
+  );
+};
+var ContextContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  HoverCardContent,
+  {
+    className: cn("min-w-60 divide-y overflow-hidden p-0", className),
+    ...props
+  }
+);
+var ContextContentHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const displayPct = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 1,
+    style: "percent"
+  }).format(usedPercent);
+  const used = new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(usedTokens);
+  const total = new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(maxTokens);
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full space-y-2 p-3", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [
+      /* @__PURE__ */ jsx("p", { children: displayPct }),
+      /* @__PURE__ */ jsxs("p", { className: "font-mono text-muted-foreground", children: [
+        used,
+        " / ",
+        total
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(Progress, { className: "bg-muted", value: usedPercent * PERCENT_MAX }) })
+  ] }) });
+};
+var ContextContentBody = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("w-full p-3", className), ...props, children });
+var ContextContentFooter = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { modelId, usage } = useContextValue();
+  const costUSD = modelId ? getUsage({
+    modelId,
+    usage: {
+      input: usage?.inputTokens ?? 0,
+      output: usage?.outputTokens ?? 0
+    }
+  }).costUSD?.totalUSD : void 0;
+  const totalCost = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(costUSD ?? 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-center justify-between gap-3 bg-secondary p-3 text-xs",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Total cost" }),
+        /* @__PURE__ */ jsx("span", { children: totalCost })
+      ] })
+    }
+  );
+};
+var TokensWithCost = ({
+  tokens,
+  costText
+}) => /* @__PURE__ */ jsxs("span", { children: [
+  tokens === void 0 ? "\u2014" : new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(tokens),
+  costText ? /* @__PURE__ */ jsxs("span", { className: "ml-2 text-muted-foreground", children: [
+    "\u2022 ",
+    costText
+  ] }) : null
+] });
+var ContextInputUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const inputTokens = usage?.inputTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!inputTokens) {
+    return null;
+  }
+  const inputCost = modelId ? getUsage({
+    modelId,
+    usage: { input: inputTokens, output: 0 }
+  }).costUSD?.totalUSD : void 0;
+  const inputCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(inputCost ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Input" }),
+        /* @__PURE__ */ jsx(TokensWithCost, { costText: inputCostText, tokens: inputTokens })
+      ]
+    }
+  );
+};
+var ContextOutputUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const outputTokens = usage?.outputTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!outputTokens) {
+    return null;
+  }
+  const outputCost = modelId ? getUsage({
+    modelId,
+    usage: { input: 0, output: outputTokens }
+  }).costUSD?.totalUSD : void 0;
+  const outputCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(outputCost ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Output" }),
+        /* @__PURE__ */ jsx(TokensWithCost, { costText: outputCostText, tokens: outputTokens })
+      ]
+    }
+  );
+};
+var ContextReasoningUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const reasoningTokens = usage?.reasoningTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!reasoningTokens) {
+    return null;
+  }
+  const reasoningCost = modelId ? getUsage({
+    modelId,
+    usage: { reasoningTokens }
+  }).costUSD?.totalUSD : void 0;
+  const reasoningCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(reasoningCost ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Reasoning" }),
+        /* @__PURE__ */ jsx(TokensWithCost, { costText: reasoningCostText, tokens: reasoningTokens })
+      ]
+    }
+  );
+};
+var ContextCacheUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const cacheTokens = usage?.cachedInputTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!cacheTokens) {
+    return null;
+  }
+  const cacheCost = modelId ? getUsage({
+    modelId,
+    usage: { cacheReads: cacheTokens, input: 0, output: 0 }
+  }).costUSD?.totalUSD : void 0;
+  const cacheCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(cacheCost ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Cache" }),
+        /* @__PURE__ */ jsx(TokensWithCost, { costText: cacheCostText, tokens: cacheTokens })
+      ]
+    }
+  );
+};
+
+export { Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextOutputUsage, ContextReasoningUsage, ContextTrigger };

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

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Controls as Controls$1 } from '@xyflow/react';
+import { ComponentProps } from 'react';
+
+type ControlsProps = ComponentProps<typeof Controls$1>;
+declare const Controls: ({ className, ...props }: ControlsProps) => react_jsx_runtime.JSX.Element;
+
+export { Controls, type ControlsProps };

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

@@ -0,0 +1,17 @@
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { Controls as Controls$1 } from '@xyflow/react';
+import { jsx } from 'react/jsx-runtime';
+
+var Controls = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Controls$1,
+  {
+    className: cn(
+      "gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!",
+      "[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!",
+      className
+    ),
+    ...props
+  }
+);
+
+export { Controls };

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

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { UIMessage } from 'ai';
+import { ComponentProps } from 'react';
+import { StickToBottom } from 'use-stick-to-bottom';
+
+type ConversationProps = ComponentProps<typeof StickToBottom>;
+declare const Conversation: ({ className, ...props }: ConversationProps) => react_jsx_runtime.JSX.Element;
+type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
+declare const ConversationContent: ({ className, ...props }: ConversationContentProps) => react_jsx_runtime.JSX.Element;
+type ConversationEmptyStateProps = ComponentProps<"div"> & {
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+};
+declare const ConversationEmptyState: ({ className, title, description, icon, children, ...props }: ConversationEmptyStateProps) => react_jsx_runtime.JSX.Element;
+type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+declare const ConversationScrollButton: ({ className, ...props }: ConversationScrollButtonProps) => false | react_jsx_runtime.JSX.Element;
+type ConversationDownloadProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+    messages: UIMessage[];
+    filename?: string;
+    formatMessage?: (message: UIMessage, index: number) => string;
+};
+declare const messagesToMarkdown: (messages: UIMessage[], formatMessage?: (message: UIMessage, index: number) => string) => string;
+declare const ConversationDownload: ({ messages, filename, formatMessage, className, children, ...props }: ConversationDownloadProps) => react_jsx_runtime.JSX.Element;
+
+export { Conversation, ConversationContent, type ConversationContentProps, ConversationDownload, type ConversationDownloadProps, ConversationEmptyState, type ConversationEmptyStateProps, type ConversationProps, ConversationScrollButton, type ConversationScrollButtonProps, messagesToMarkdown };