@agents24/chat-react 0.1.7 → 0.1.9

package/dist/templates/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/index.ts","../../src/templates/agent-chat-shell.tsx","../../src/latest-thread-scroller.tsx","../../src/ui/utils.ts"],"sourcesContent":["export * from \"./agent-chat-shell\";\n","import * as React from \"react\";\n\nimport {\n  LatestThreadScroller,\n  type LatestThreadScrollerOutlineItem,\n} from \"../latest-thread-scroller\";\nimport type { ChatMessage } from \"../types\";\nimport { cn } from \"../ui/utils\";\n\nexport type AgentChatShellMessage = Pick<ChatMessage, \"id\" | \"role\" | \"content\"> & {\n  [key: string]: unknown;\n};\n\nexport type AgentChatShellProps<TMessage extends AgentChatShellMessage> = {\n  className?: string;\n  contentClassName?: string;\n  composer?: React.ReactNode;\n  composerOverlayClassName?: string;\n  composerOverlayHeight?: number;\n  defaultComposerOverlayHeight?: number;\n  dir?: \"ltr\" | \"rtl\";\n  hideComposer?: boolean;\n  isLoadingOlder?: boolean;\n  messages: TMessage[];\n  onLoadOlder?: (() => Promise<unknown> | unknown) | null;\n  outlineItems?: LatestThreadScrollerOutlineItem[];\n  outlineSide?: \"left\" | \"right\";\n  renderMessage: (message: TMessage, index: number) => React.ReactNode;\n  renderOlderLoader?: () => React.ReactNode;\n};\n\nconst defaultOutlineLabel = (content: unknown, index: number) => {\n  const label = String(content || \"\").replace(/\\s+/g, \" \").trim();\n  return label || `Turn ${index + 1}`;\n};\n\nconst defaultOutlinePreview = (content: unknown) =>\n  String(content || \"\").replace(/\\s+/g, \" \").trim();\n\nexport function buildAgentChatOutlineItems<TMessage extends AgentChatShellMessage>(\n  messages: TMessage[],\n  getLabel: (message: TMessage, index: number) => string = (message, index) =>\n    defaultOutlineLabel(message.content, index),\n  getResponsePreview: (message: TMessage) => string = (message) =>\n    defaultOutlinePreview(message.content)\n): LatestThreadScrollerOutlineItem[] {\n  return messages.reduce((items, message) => {\n    if (message.role === \"user\") {\n      items.push({\n        id: message.id,\n        label: getLabel(message, items.length),\n        messageIds: [message.id],\n      });\n      return items;\n    }\n    const currentItem = items[items.length - 1];\n    currentItem?.messageIds?.push(message.id);\n    if (\n      currentItem &&\n      !currentItem.responsePreview &&\n      message.role === \"assistant\"\n    ) {\n      currentItem.responsePreview = getResponsePreview(message);\n    }\n    return items;\n  }, [] as LatestThreadScrollerOutlineItem[]);\n}\n\nexport function AgentChatShell<TMessage extends AgentChatShellMessage>({\n  className,\n  composer,\n  composerOverlayClassName,\n  composerOverlayHeight,\n  contentClassName,\n  defaultComposerOverlayHeight = 192,\n  dir = \"ltr\",\n  hideComposer = false,\n  isLoadingOlder = false,\n  messages,\n  onLoadOlder,\n  outlineItems,\n  outlineSide = \"left\",\n  renderMessage,\n  renderOlderLoader,\n}: AgentChatShellProps<TMessage>) {\n  const overlayRef = React.useRef<HTMLDivElement | null>(null);\n  const [measuredOverlayHeight, setMeasuredOverlayHeight] = React.useState(\n    defaultComposerOverlayHeight\n  );\n  const olderPageRequestRef = React.useRef(false);\n  const items = React.useMemo(\n    () => outlineItems || buildAgentChatOutlineItems(messages),\n    [messages, outlineItems]\n  );\n\n  React.useEffect(() => {\n    const overlay = overlayRef.current;\n    if (!overlay || hideComposer) return;\n    const updateHeight = () => {\n      setMeasuredOverlayHeight(Math.ceil(overlay.getBoundingClientRect().height));\n    };\n    updateHeight();\n    const observer = new ResizeObserver(updateHeight);\n    observer.observe(overlay);\n    return () => observer.disconnect();\n  }, [hideComposer]);\n\n  const handleScroll = React.useCallback(\n    (event: React.UIEvent<HTMLDivElement>) => {\n      if (\n        !onLoadOlder ||\n        isLoadingOlder ||\n        olderPageRequestRef.current ||\n        event.currentTarget.scrollTop > 48\n      ) {\n        return;\n      }\n      olderPageRequestRef.current = true;\n      void Promise.resolve(onLoadOlder()).finally(() => {\n        olderPageRequestRef.current = false;\n      });\n    },\n    [isLoadingOlder, onLoadOlder]\n  );\n\n  const bottomPadding = hideComposer\n    ? 32\n    : (composerOverlayHeight ?? measuredOverlayHeight) + 72;\n\n  return (\n    <div className={cn(\"relative flex h-full min-h-0 w-full flex-col\", className)} dir={dir}>\n      <LatestThreadScroller.Provider>\n        <LatestThreadScroller.Root>\n          <LatestThreadScroller.Viewport onScroll={handleScroll}>\n            <LatestThreadScroller.Content\n              className={cn(\n                \"mx-auto flex min-h-full w-full max-w-3xl flex-col gap-8 px-4 pt-12\",\n                contentClassName\n              )}\n              style={{ paddingBottom: bottomPadding }}\n            >\n              {isLoadingOlder ? renderOlderLoader?.() : null}\n              {messages.map((message, index) => (\n                <LatestThreadScroller.Item\n                  key={message.id}\n                  messageId={message.id}\n                  scrollAnchor={message.role === \"user\"}\n                >\n                  {renderMessage(message, index)}\n                </LatestThreadScroller.Item>\n              ))}\n            </LatestThreadScroller.Content>\n          </LatestThreadScroller.Viewport>\n          <LatestThreadScroller.Outline\n            dir={dir}\n            items={items}\n            side={outlineSide}\n          />\n        </LatestThreadScroller.Root>\n\n        {!hideComposer && composer ? (\n          <div\n            ref={overlayRef}\n            className={cn(\n              \"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-visible px-4 pb-4 pt-10\",\n              composerOverlayClassName\n            )}\n            style={{\n              background:\n                \"linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--chat-background, var(--background)) 85%, transparent) 45%, var(--chat-background, var(--background)) 65%, var(--chat-background, var(--background)) 100%)\",\n            }}\n          >\n            <div className=\"pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3\">\n              <LatestThreadScroller.Button />\n            </div>\n            <div className=\"pointer-events-auto mx-auto w-full max-w-3xl\">\n              {composer}\n            </div>\n          </div>\n        ) : null}\n      </LatestThreadScroller.Provider>\n    </div>\n  );\n}\n","import * as React from \"react\";\nimport {\n  MessageScroller,\n  useMessageScroller,\n  useMessageScrollerVisibility,\n} from \"@shadcn/react/message-scroller\";\n\nconst cx = (...values: Array<string | false | null | undefined>) =>\n  values.filter(Boolean).join(\" \");\n\ntype MessageScrollerProviderProps = React.ComponentProps<\n  typeof MessageScroller.Provider\n>;\ntype MessageScrollerRootProps = React.ComponentProps<typeof MessageScroller.Root>;\ntype MessageScrollerViewportProps = React.ComponentProps<\n  typeof MessageScroller.Viewport\n>;\ntype MessageScrollerContentProps = React.ComponentProps<\n  typeof MessageScroller.Content\n>;\ntype MessageScrollerItemProps = React.ComponentProps<typeof MessageScroller.Item>;\ntype MessageScrollerButtonProps = React.ComponentProps<typeof MessageScroller.Button>;\n\ntype LatestThreadScrollerLayoutContextValue = {\n  contentElement: HTMLElement | null;\n  rootElement: HTMLElement | null;\n  setContentElement: (node: HTMLElement | null) => void;\n  setRootElement: (node: HTMLElement | null) => void;\n};\n\nconst LatestThreadScrollerLayoutContext =\n  React.createContext<LatestThreadScrollerLayoutContextValue | null>(null);\n\nconst useLatestThreadScrollerLayout = () =>\n  React.useContext(LatestThreadScrollerLayoutContext);\n\nexport type LatestThreadScrollerProviderProps = MessageScrollerProviderProps;\n\nexport function LatestThreadScrollerProvider({\n  autoScroll = true,\n  defaultScrollPosition = \"last-anchor\",\n  scrollPreviousItemPeek = 64,\n  ...props\n}: LatestThreadScrollerProviderProps) {\n  return (\n    <MessageScroller.Provider\n      autoScroll={autoScroll}\n      defaultScrollPosition={defaultScrollPosition}\n      scrollPreviousItemPeek={scrollPreviousItemPeek}\n      {...props}\n    />\n  );\n}\n\nexport type LatestThreadScrollerRootProps = MessageScrollerRootProps;\n\nexport function LatestThreadScrollerRoot({\n  className,\n  ref,\n  ...props\n}: LatestThreadScrollerRootProps) {\n  const [rootElement, setRootElement] = React.useState<HTMLElement | null>(null);\n  const [contentElement, setContentElement] =\n    React.useState<HTMLElement | null>(null);\n  const layoutContext = React.useMemo<LatestThreadScrollerLayoutContextValue>(\n    () => ({\n      contentElement,\n      rootElement,\n      setContentElement,\n      setRootElement,\n    }),\n    [contentElement, rootElement]\n  );\n  const setRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      setRootElement(node);\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref]\n  );\n\n  return (\n    <LatestThreadScrollerLayoutContext.Provider value={layoutContext}>\n      <MessageScroller.Root\n        ref={setRef}\n        className={cx(\n          \"relative flex size-full min-h-0 flex-1 flex-col overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </LatestThreadScrollerLayoutContext.Provider>\n  );\n}\n\nexport type LatestThreadScrollerViewportProps =\n  MessageScrollerViewportProps & {\n    onViewportChange?: (node: HTMLElement | null) => void;\n  };\n\nexport function LatestThreadScrollerViewport({\n  className,\n  onViewportChange,\n  preserveScrollOnPrepend = true,\n  ref,\n  ...props\n}: LatestThreadScrollerViewportProps) {\n  const setRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n      onViewportChange?.(node);\n    },\n    [onViewportChange, ref]\n  );\n\n  return (\n    <MessageScroller.Viewport\n      ref={setRef}\n      className={cx(\n        \"size-full min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      preserveScrollOnPrepend={preserveScrollOnPrepend}\n      {...props}\n    />\n  );\n}\n\nexport type LatestThreadScrollerContentProps = MessageScrollerContentProps;\n\nexport function LatestThreadScrollerContent({\n  className,\n  ref,\n  ...props\n}: LatestThreadScrollerContentProps) {\n  const layout = useLatestThreadScrollerLayout();\n  const setRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      layout?.setContentElement(node);\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [layout, ref]\n  );\n\n  return (\n    <MessageScroller.Content\n      ref={setRef}\n      data-agents24-latest-thread-content=\"\"\n      className={cx(\"flex h-max min-h-full flex-col gap-8 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type LatestThreadScrollerItemProps = Omit<\n  MessageScrollerItemProps,\n  \"messageId\"\n> & {\n  messageId: string;\n};\n\nexport function LatestThreadScrollerItem({\n  className,\n  messageId,\n  ...props\n}: LatestThreadScrollerItemProps) {\n  return (\n    <MessageScroller.Item\n      className={cx(\n        \"min-w-0 shrink-0 overflow-visible\",\n        className\n      )}\n      messageId={messageId}\n      {...props}\n    />\n  );\n}\n\nexport type LatestThreadScrollerButtonProps = Omit<\n  MessageScrollerButtonProps,\n  \"render\"\n> & {\n  className?: string;\n  render?: MessageScrollerButtonProps[\"render\"];\n};\n\nexport function LatestThreadScrollerButton({\n  children,\n  className,\n  direction = \"end\",\n  render,\n  ...props\n}: LatestThreadScrollerButtonProps) {\n  if (render) {\n    return (\n      <MessageScroller.Button\n        direction={direction}\n        render={render}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <MessageScroller.Button\n      direction={direction}\n      render={(buttonProps) => (\n        <button\n          {...(buttonProps as Record<string, unknown>)}\n          aria-label={\n            direction === \"end\"\n              ? \"Scroll to latest message\"\n              : \"Scroll to first message\"\n          }\n          className={cx(\n            \"absolute bottom-4 left-1/2 z-50 flex size-9 -translate-x-1/2 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-md transition-all duration-200 data-[active=false]:pointer-events-none data-[active=false]:translate-y-2 data-[active=false]:opacity-0 data-[active=true]:translate-y-0 data-[active=true]:opacity-100\",\n            className\n          )}\n          type=\"button\"\n        >\n          {children ?? (direction === \"end\" ? \"↓\" : \"↑\")}\n        </button>\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type LatestThreadScrollerOutlineItem = {\n  id: string;\n  label: string;\n  messageIds?: string[];\n  responsePreview?: string;\n};\n\nexport type LatestThreadScrollerOutlineProps = {\n  cardClassName?: string;\n  className?: string;\n  contentMaxWidth?: number;\n  dir?: \"ltr\" | \"rtl\";\n  items: LatestThreadScrollerOutlineItem[];\n  minContainerWidthForRail?: number;\n  minSideGutterForRail?: number;\n  side?: \"left\" | \"right\";\n};\n\nexport function LatestThreadScrollerOutline({\n  cardClassName,\n  className,\n  contentMaxWidth = 768,\n  dir = \"ltr\",\n  items,\n  minContainerWidthForRail = 0,\n  minSideGutterForRail = 48,\n  side,\n}: LatestThreadScrollerOutlineProps) {\n  const navRef = React.useRef<HTMLElement | null>(null);\n  const layout = useLatestThreadScrollerLayout();\n  const [hasSideRoom, setHasSideRoom] = React.useState(false);\n  const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null);\n  const { scrollToMessage } = useMessageScroller();\n  const { currentAnchorId, visibleMessageIds } = useMessageScrollerVisibility();\n  const visibleMessageIdSet = React.useMemo(\n    () => new Set(visibleMessageIds),\n    [visibleMessageIds]\n  );\n  const focusIndex = hoveredIndex ?? -1;\n  const railSide = side ?? (dir === \"rtl\" ? \"right\" : \"left\");\n\n  React.useEffect(() => {\n    const root = layout?.rootElement ?? navRef.current?.parentElement;\n    if (!root) return;\n\n    const updateSideRoom = () => {\n      const rootRect = root.getBoundingClientRect();\n      const rootWidth = rootRect.width;\n      const content = layout?.contentElement;\n      const sideGutter = content\n        ? Math.max(\n            0,\n            railSide === \"left\"\n              ? content.getBoundingClientRect().left - rootRect.left\n              : rootRect.right - content.getBoundingClientRect().right\n          )\n        : Math.max(0, (rootWidth - contentMaxWidth) / 2);\n      const nextHasSideRoom =\n        rootWidth >= minContainerWidthForRail &&\n        sideGutter >= minSideGutterForRail;\n      setHasSideRoom((current) =>\n        current === nextHasSideRoom ? current : nextHasSideRoom\n      );\n    };\n\n    updateSideRoom();\n    const resizeObserver = new ResizeObserver(updateSideRoom);\n    resizeObserver.observe(root);\n    const content = layout?.contentElement;\n    if (content) {\n      resizeObserver.observe(content);\n    }\n    return () => resizeObserver.disconnect();\n  }, [\n    contentMaxWidth,\n    layout?.contentElement,\n    layout?.rootElement,\n    minContainerWidthForRail,\n    minSideGutterForRail,\n    railSide,\n  ]);\n\n  if (items.length < 2) {\n    return null;\n  }\n\n  return (\n    <nav\n      ref={navRef}\n      aria-label=\"Transcript outline\"\n      className={cx(\n        \"pointer-events-none absolute top-[46%] z-10 max-h-[min(18rem,calc(100%-10rem))] w-16 -translate-y-1/2 overflow-visible\",\n        hasSideRoom ? \"hidden md:block\" : \"hidden\",\n        railSide === \"left\" ? \"left-1\" : \"right-1\",\n        className\n      )}\n      dir={dir}\n    >\n      <div className=\"pointer-events-auto flex flex-col gap-0 py-1\">\n        {items.map((item, index) => {\n          const itemMessageIds =\n            item.messageIds && item.messageIds.length > 0\n              ? item.messageIds\n              : [item.id];\n          const active = itemMessageIds.some(\n            (messageId) =>\n              visibleMessageIdSet.has(messageId) || messageId === currentAnchorId\n          );\n          const distance =\n            focusIndex >= 0 ? Math.abs(index - focusIndex) : Number.POSITIVE_INFINITY;\n          const isFocused = distance === 0;\n          const isNear = distance === 1;\n          const isNextNear = distance === 2;\n          const barWidth = isFocused\n            ? 50\n            : isNear\n              ? 36\n              : isNextNear\n                ? 23\n                : 10;\n          const barOpacity = isFocused ? 1 : isNear ? 0.78 : isNextNear ? 0.58 : 0.36;\n          const fallbackLabel = `Turn ${index + 1}`;\n          const previewLabel =\n            item.label && item.label !== fallbackLabel ? item.label : \"\";\n          const responsePreview = (item.responsePreview || \"\").trim();\n\n          return (\n            <button\n              key={item.id}\n              type=\"button\"\n              data-active={active}\n              dir=\"ltr\"\n              className={cx(\n                \"group relative flex h-2 w-16 items-center rounded-sm outline-none\",\n                railSide === \"left\" ? \"justify-start\" : \"justify-end\"\n              )}\n              aria-label={`Jump to ${item.label || fallbackLabel}`}\n              onBlur={() => setHoveredIndex(null)}\n              onFocus={() => setHoveredIndex(index)}\n              onMouseEnter={() => setHoveredIndex(index)}\n              onMouseLeave={() => setHoveredIndex(null)}\n              onClick={() =>\n                scrollToMessage(item.id, {\n                  align: \"start\",\n                  behavior: \"smooth\",\n                })\n              }\n            >\n              <span\n                className=\"h-0.5 rounded-full bg-muted-foreground/55 transition-[width,background-color,opacity] duration-150 ease-out group-hover:bg-foreground group-focus-visible:bg-foreground group-data-[active=true]:bg-foreground\"\n                style={{\n                  opacity: barOpacity,\n                  width: barWidth,\n                }}\n              />\n              {previewLabel ? (\n                <span\n                  dir={dir}\n                  className={cx(\n                    \"pointer-events-none absolute top-1/2 z-20 max-h-32 w-64 -translate-y-1/2 overflow-hidden rounded-lg border border-border/80 bg-background p-3 text-start opacity-0 shadow-lg transition-all duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-visible:pointer-events-auto group-focus-visible:opacity-100\",\n                    railSide === \"left\"\n                      ? \"left-full ml-2 -translate-x-1 group-hover:translate-x-0 group-focus-visible:translate-x-0\"\n                      : \"right-full mr-2 translate-x-1 group-hover:translate-x-0 group-focus-visible:translate-x-0\",\n                    cardClassName\n                  )}\n                >\n                  <span\n                    className=\"block overflow-hidden text-sm leading-5 text-foreground\"\n                    style={{\n                      display: \"-webkit-box\",\n                      WebkitBoxOrient: \"vertical\",\n                      WebkitLineClamp: responsePreview ? 2 : 4,\n                    }}\n                  >\n                    {previewLabel}\n                  </span>\n                  {responsePreview ? (\n                    <span\n                      className=\"mt-1 block overflow-hidden text-sm leading-5 text-muted-foreground\"\n                      style={{\n                        display: \"-webkit-box\",\n                        WebkitBoxOrient: \"vertical\",\n                        WebkitLineClamp: 2,\n                      }}\n                    >\n                      {responsePreview}\n                    </span>\n                  ) : null}\n                </span>\n              ) : null}\n            </button>\n          );\n        })}\n      </div>\n    </nav>\n  );\n}\n\nexport const LatestThreadScroller = {\n  Provider: LatestThreadScrollerProvider,\n  Root: LatestThreadScrollerRoot,\n  Viewport: LatestThreadScrollerViewport,\n  Content: LatestThreadScrollerContent,\n  Item: LatestThreadScrollerItem,\n  Button: LatestThreadScrollerButton,\n  Outline: LatestThreadScrollerOutline,\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...values: ClassValue[]) {\n  return twMerge(clsx(values));\n}\n"],"mappings":"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","names":["React","content","import_jsx_runtime"]}

package/dist/templates/index.d.ts

@@ -0,0 +1 @@
+export * from "./agent-chat-shell";

package/dist/templates/index.js

@@ -0,0 +1,140 @@
+import {
+  LatestThreadScroller
+} from "../chunk-E3TJ3I6G.js";
+import {
+  cn
+} from "../chunk-UU7OXHL3.js";
+
+// src/templates/agent-chat-shell.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultOutlineLabel = (content, index) => {
+  const label = String(content || "").replace(/\s+/g, " ").trim();
+  return label || `Turn ${index + 1}`;
+};
+var defaultOutlinePreview = (content) => String(content || "").replace(/\s+/g, " ").trim();
+function buildAgentChatOutlineItems(messages, getLabel = (message, index) => defaultOutlineLabel(message.content, index), getResponsePreview = (message) => defaultOutlinePreview(message.content)) {
+  return messages.reduce((items, message) => {
+    if (message.role === "user") {
+      items.push({
+        id: message.id,
+        label: getLabel(message, items.length),
+        messageIds: [message.id]
+      });
+      return items;
+    }
+    const currentItem = items[items.length - 1];
+    currentItem?.messageIds?.push(message.id);
+    if (currentItem && !currentItem.responsePreview && message.role === "assistant") {
+      currentItem.responsePreview = getResponsePreview(message);
+    }
+    return items;
+  }, []);
+}
+function AgentChatShell({
+  className,
+  composer,
+  composerOverlayClassName,
+  composerOverlayHeight,
+  contentClassName,
+  defaultComposerOverlayHeight = 192,
+  dir = "ltr",
+  hideComposer = false,
+  isLoadingOlder = false,
+  messages,
+  onLoadOlder,
+  outlineItems,
+  outlineSide = "left",
+  renderMessage,
+  renderOlderLoader
+}) {
+  const overlayRef = React.useRef(null);
+  const [measuredOverlayHeight, setMeasuredOverlayHeight] = React.useState(
+    defaultComposerOverlayHeight
+  );
+  const olderPageRequestRef = React.useRef(false);
+  const items = React.useMemo(
+    () => outlineItems || buildAgentChatOutlineItems(messages),
+    [messages, outlineItems]
+  );
+  React.useEffect(() => {
+    const overlay = overlayRef.current;
+    if (!overlay || hideComposer) return;
+    const updateHeight = () => {
+      setMeasuredOverlayHeight(Math.ceil(overlay.getBoundingClientRect().height));
+    };
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(overlay);
+    return () => observer.disconnect();
+  }, [hideComposer]);
+  const handleScroll = React.useCallback(
+    (event) => {
+      if (!onLoadOlder || isLoadingOlder || olderPageRequestRef.current || event.currentTarget.scrollTop > 48) {
+        return;
+      }
+      olderPageRequestRef.current = true;
+      void Promise.resolve(onLoadOlder()).finally(() => {
+        olderPageRequestRef.current = false;
+      });
+    },
+    [isLoadingOlder, onLoadOlder]
+  );
+  const bottomPadding = hideComposer ? 32 : (composerOverlayHeight ?? measuredOverlayHeight) + 72;
+  return /* @__PURE__ */ jsx("div", { className: cn("relative flex h-full min-h-0 w-full flex-col", className), dir, children: /* @__PURE__ */ jsxs(LatestThreadScroller.Provider, { children: [
+    /* @__PURE__ */ jsxs(LatestThreadScroller.Root, { children: [
+      /* @__PURE__ */ jsx(LatestThreadScroller.Viewport, { onScroll: handleScroll, children: /* @__PURE__ */ jsxs(
+        LatestThreadScroller.Content,
+        {
+          className: cn(
+            "mx-auto flex min-h-full w-full max-w-3xl flex-col gap-8 px-4 pt-12",
+            contentClassName
+          ),
+          style: { paddingBottom: bottomPadding },
+          children: [
+            isLoadingOlder ? renderOlderLoader?.() : null,
+            messages.map((message, index) => /* @__PURE__ */ jsx(
+              LatestThreadScroller.Item,
+              {
+                messageId: message.id,
+                scrollAnchor: message.role === "user",
+                children: renderMessage(message, index)
+              },
+              message.id
+            ))
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        LatestThreadScroller.Outline,
+        {
+          dir,
+          items,
+          side: outlineSide
+        }
+      )
+    ] }),
+    !hideComposer && composer ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: overlayRef,
+        className: cn(
+          "pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-visible px-4 pb-4 pt-10",
+          composerOverlayClassName
+        ),
+        style: {
+          background: "linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--chat-background, var(--background)) 85%, transparent) 45%, var(--chat-background, var(--background)) 65%, var(--chat-background, var(--background)) 100%)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ jsx(LatestThreadScroller.Button, {}) }),
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-auto mx-auto w-full max-w-3xl", children: composer })
+        ]
+      }
+    ) : null
+  ] }) });
+}
+export {
+  AgentChatShell,
+  buildAgentChatOutlineItems
+};
+//# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/agent-chat-shell.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport {\n  LatestThreadScroller,\n  type LatestThreadScrollerOutlineItem,\n} from \"../latest-thread-scroller\";\nimport type { ChatMessage } from \"../types\";\nimport { cn } from \"../ui/utils\";\n\nexport type AgentChatShellMessage = Pick<ChatMessage, \"id\" | \"role\" | \"content\"> & {\n  [key: string]: unknown;\n};\n\nexport type AgentChatShellProps<TMessage extends AgentChatShellMessage> = {\n  className?: string;\n  contentClassName?: string;\n  composer?: React.ReactNode;\n  composerOverlayClassName?: string;\n  composerOverlayHeight?: number;\n  defaultComposerOverlayHeight?: number;\n  dir?: \"ltr\" | \"rtl\";\n  hideComposer?: boolean;\n  isLoadingOlder?: boolean;\n  messages: TMessage[];\n  onLoadOlder?: (() => Promise<unknown> | unknown) | null;\n  outlineItems?: LatestThreadScrollerOutlineItem[];\n  outlineSide?: \"left\" | \"right\";\n  renderMessage: (message: TMessage, index: number) => React.ReactNode;\n  renderOlderLoader?: () => React.ReactNode;\n};\n\nconst defaultOutlineLabel = (content: unknown, index: number) => {\n  const label = String(content || \"\").replace(/\\s+/g, \" \").trim();\n  return label || `Turn ${index + 1}`;\n};\n\nconst defaultOutlinePreview = (content: unknown) =>\n  String(content || \"\").replace(/\\s+/g, \" \").trim();\n\nexport function buildAgentChatOutlineItems<TMessage extends AgentChatShellMessage>(\n  messages: TMessage[],\n  getLabel: (message: TMessage, index: number) => string = (message, index) =>\n    defaultOutlineLabel(message.content, index),\n  getResponsePreview: (message: TMessage) => string = (message) =>\n    defaultOutlinePreview(message.content)\n): LatestThreadScrollerOutlineItem[] {\n  return messages.reduce((items, message) => {\n    if (message.role === \"user\") {\n      items.push({\n        id: message.id,\n        label: getLabel(message, items.length),\n        messageIds: [message.id],\n      });\n      return items;\n    }\n    const currentItem = items[items.length - 1];\n    currentItem?.messageIds?.push(message.id);\n    if (\n      currentItem &&\n      !currentItem.responsePreview &&\n      message.role === \"assistant\"\n    ) {\n      currentItem.responsePreview = getResponsePreview(message);\n    }\n    return items;\n  }, [] as LatestThreadScrollerOutlineItem[]);\n}\n\nexport function AgentChatShell<TMessage extends AgentChatShellMessage>({\n  className,\n  composer,\n  composerOverlayClassName,\n  composerOverlayHeight,\n  contentClassName,\n  defaultComposerOverlayHeight = 192,\n  dir = \"ltr\",\n  hideComposer = false,\n  isLoadingOlder = false,\n  messages,\n  onLoadOlder,\n  outlineItems,\n  outlineSide = \"left\",\n  renderMessage,\n  renderOlderLoader,\n}: AgentChatShellProps<TMessage>) {\n  const overlayRef = React.useRef<HTMLDivElement | null>(null);\n  const [measuredOverlayHeight, setMeasuredOverlayHeight] = React.useState(\n    defaultComposerOverlayHeight\n  );\n  const olderPageRequestRef = React.useRef(false);\n  const items = React.useMemo(\n    () => outlineItems || buildAgentChatOutlineItems(messages),\n    [messages, outlineItems]\n  );\n\n  React.useEffect(() => {\n    const overlay = overlayRef.current;\n    if (!overlay || hideComposer) return;\n    const updateHeight = () => {\n      setMeasuredOverlayHeight(Math.ceil(overlay.getBoundingClientRect().height));\n    };\n    updateHeight();\n    const observer = new ResizeObserver(updateHeight);\n    observer.observe(overlay);\n    return () => observer.disconnect();\n  }, [hideComposer]);\n\n  const handleScroll = React.useCallback(\n    (event: React.UIEvent<HTMLDivElement>) => {\n      if (\n        !onLoadOlder ||\n        isLoadingOlder ||\n        olderPageRequestRef.current ||\n        event.currentTarget.scrollTop > 48\n      ) {\n        return;\n      }\n      olderPageRequestRef.current = true;\n      void Promise.resolve(onLoadOlder()).finally(() => {\n        olderPageRequestRef.current = false;\n      });\n    },\n    [isLoadingOlder, onLoadOlder]\n  );\n\n  const bottomPadding = hideComposer\n    ? 32\n    : (composerOverlayHeight ?? measuredOverlayHeight) + 72;\n\n  return (\n    <div className={cn(\"relative flex h-full min-h-0 w-full flex-col\", className)} dir={dir}>\n      <LatestThreadScroller.Provider>\n        <LatestThreadScroller.Root>\n          <LatestThreadScroller.Viewport onScroll={handleScroll}>\n            <LatestThreadScroller.Content\n              className={cn(\n                \"mx-auto flex min-h-full w-full max-w-3xl flex-col gap-8 px-4 pt-12\",\n                contentClassName\n              )}\n              style={{ paddingBottom: bottomPadding }}\n            >\n              {isLoadingOlder ? renderOlderLoader?.() : null}\n              {messages.map((message, index) => (\n                <LatestThreadScroller.Item\n                  key={message.id}\n                  messageId={message.id}\n                  scrollAnchor={message.role === \"user\"}\n                >\n                  {renderMessage(message, index)}\n                </LatestThreadScroller.Item>\n              ))}\n            </LatestThreadScroller.Content>\n          </LatestThreadScroller.Viewport>\n          <LatestThreadScroller.Outline\n            dir={dir}\n            items={items}\n            side={outlineSide}\n          />\n        </LatestThreadScroller.Root>\n\n        {!hideComposer && composer ? (\n          <div\n            ref={overlayRef}\n            className={cn(\n              \"pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-visible px-4 pb-4 pt-10\",\n              composerOverlayClassName\n            )}\n            style={{\n              background:\n                \"linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--chat-background, var(--background)) 85%, transparent) 45%, var(--chat-background, var(--background)) 65%, var(--chat-background, var(--background)) 100%)\",\n            }}\n          >\n            <div className=\"pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3\">\n              <LatestThreadScroller.Button />\n            </div>\n            <div className=\"pointer-events-auto mx-auto w-full max-w-3xl\">\n              {composer}\n            </div>\n          </div>\n        ) : null}\n      </LatestThreadScroller.Provider>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/transport.d.ts

@@ -0,0 +1,29 @@
+import type { ChatSubmitInput, ChatTransport } from "./types";
+type MaybePromise<T> = T | Promise<T>;
+export type FetchChatTransportRoutes = {
+    listThreads: () => string;
+    getThread: (input: {
+        threadId: string;
+        limit?: number;
+        beforeTurnIndex?: number | null;
+        includeRunEvents?: boolean;
+    }) => string;
+    streamMessage: () => string;
+    attachRun: (input: {
+        runId: string;
+    }) => string;
+    cancelRun: (input: {
+        runId: string;
+    }) => string;
+    deleteThread?: (input: {
+        threadId: string;
+    }) => string;
+};
+export type FetchChatTransportOptions = {
+    routes: FetchChatTransportRoutes;
+    fetchImpl?: typeof fetch;
+    headers?: () => MaybePromise<HeadersInit>;
+    streamBody?: (input: ChatSubmitInput) => unknown;
+};
+export declare const createFetchChatTransport: ({ routes, fetchImpl, headers, streamBody, }: FetchChatTransportOptions) => ChatTransport;
+export {};

package/dist/types.d.ts

@@ -0,0 +1,312 @@
+import type { ReactNode, RefObject } from "react";
+import type { ContextWindow } from "./context-window";
+export type ChatRunStatus = "queued" | "running" | "completed" | "cancelled" | "failed" | string;
+export type ChatContextWindow = ContextWindow;
+export type ChatCitation = {
+    title: string;
+    url: string;
+    description: string;
+    sourceRef?: string;
+    ref?: string;
+    firstRef?: string;
+    totalSegments?: number;
+    rangeRef?: string;
+};
+export type ChatAttachment = {
+    url?: string;
+    filename?: string;
+    mediaType?: string;
+    contentType?: string;
+    [key: string]: unknown;
+};
+export type ChatReasoningStep = {
+    label: string;
+    status: "active" | "complete" | "pending";
+    icon?: unknown;
+    description?: string;
+    citations?: ChatCitation[];
+    query?: string;
+    sources?: Array<Record<string, unknown>>;
+};
+export type ChatToolState = "input-streaming" | "input-available" | "output-available" | "output-error" | "cancelled";
+export type ToolPresentation = {
+    title?: string | null;
+    activity?: string | null;
+    detail?: string | null;
+    category?: string | null;
+    groupKey?: string | null;
+    groupLabel?: string | null;
+    showOutput?: boolean;
+    outputView?: Record<string, unknown> | null;
+    [key: string]: unknown;
+};
+export type ChatTextPart = {
+    id: string;
+    type: "text";
+    kind: "text";
+    text: string;
+    raw?: Record<string, unknown>;
+};
+export type ChatToolPart = {
+    id: string;
+    type: `tool-${string}`;
+    kind: "tool";
+    toolName: string;
+    toolCallId?: string | null;
+    state: ChatToolState;
+    input?: unknown;
+    output?: unknown;
+    errorText?: string | null;
+    presentation?: ToolPresentation | null;
+    raw: Record<string, unknown>;
+};
+export type ChatReasoningPart = {
+    id: string;
+    type: "reasoning";
+    kind: "reasoning";
+    label?: string | null;
+    text?: string | null;
+    status?: string | null;
+    raw: Record<string, unknown>;
+};
+export type ChatUiBlocksPart = {
+    id: string;
+    type: "ui-blocks";
+    kind: "ui-blocks";
+    state: ChatToolState;
+    toolCallId?: string | null;
+    contractVersion?: string | null;
+    bundle?: Record<string, unknown> | null;
+    errorText?: string | null;
+    raw: Record<string, unknown>;
+};
+export type ChatApprovalPart = {
+    id: string;
+    type: "approval";
+    kind: "approval";
+    raw: Record<string, unknown>;
+};
+export type ChatErrorPart = {
+    id: string;
+    type: "error";
+    kind: "error";
+    errorText: string;
+    raw: Record<string, unknown>;
+};
+export type ChatDataPart = {
+    id: string;
+    type: "data";
+    kind: "data";
+    name: string;
+    data: Record<string, unknown>;
+    raw: Record<string, unknown>;
+};
+export type ChatPart = ChatTextPart | ChatToolPart | ChatReasoningPart | ChatUiBlocksPart | ChatApprovalPart | ChatErrorPart | ChatDataPart;
+export type ToolRenderer = (props: {
+    part: ChatToolPart;
+    message: ChatMessage;
+}) => ReactNode;
+export type Agents24ChatRenderOptions = {
+    renderPart?: (part: ChatPart, message: ChatMessage) => ReactNode;
+    toolRenderers?: Partial<Record<`tool-${string}`, ToolRenderer>>;
+    fallbackToolRenderer?: ToolRenderer;
+};
+export type ChatMessage = {
+    id: string;
+    role: "user" | "assistant";
+    runId?: string | null;
+    content: string;
+    createdAt: Date;
+    isFinal?: boolean;
+    parts: ChatPart[];
+    attachments?: ChatAttachment[];
+    citations?: ChatCitation[];
+    reasoningSteps?: ChatReasoningStep[];
+    thinkingDurationMs?: number;
+    liked?: boolean;
+    disliked?: boolean;
+    messageIndex?: number;
+    isVoice?: boolean;
+    tokenUsage?: {
+        inputTokens?: number | null;
+        outputTokens?: number | null;
+        totalTokens?: number | null;
+        usageSource?: string | null;
+    };
+};
+export type ChatRuntimeEvent = {
+    version?: string;
+    seq?: number;
+    ts?: string;
+    event: string;
+    run_id?: string;
+    stage?: string;
+    payload?: Record<string, unknown>;
+    diagnostics?: Array<Record<string, unknown>>;
+};
+export type ChatActiveRun = {
+    run_id?: string | null;
+    status?: string | null;
+    started_at?: string | null;
+    created_at?: string | null;
+};
+export type ChatThreadSummary = {
+    id: string;
+    title?: string | null;
+    status?: string | null;
+    surface?: string | null;
+    agent_id?: string | null;
+    last_run_id?: string | null;
+    last_run_status?: string | null;
+    active_run?: ChatActiveRun | null;
+    activeRun?: ChatActiveRun | null;
+    updated_at?: string | null;
+    last_activity_at?: string | null;
+    created_at?: string | null;
+    messages?: ChatMessage[];
+    isHydrated?: boolean;
+    hasOlderTurns?: boolean;
+    nextBeforeTurnIndex?: number | null;
+    lastRunId?: string | null;
+    lastRunStatus?: string | null;
+    lastEventSeq?: number | null;
+    isRunning?: boolean;
+    [key: string]: unknown;
+};
+export type ChatThreadTurn = {
+    id?: string;
+    run_id?: string;
+    turn_index?: number;
+    status?: string | null;
+    user_input_text?: string | null;
+    assistant_output_text?: string | null;
+    final_output?: unknown;
+    response_blocks?: Array<Record<string, unknown>>;
+    run_events?: ChatRuntimeEvent[];
+    context_window?: unknown;
+    run_usage?: {
+        source?: string | null;
+        input_tokens?: number | null;
+        output_tokens?: number | null;
+        total_tokens?: number | null;
+    } | null;
+    attachments?: Array<Record<string, unknown>>;
+    created_at?: string | null;
+    completed_at?: string | null;
+};
+export type ChatThreadDetail = ChatThreadSummary & {
+    turns?: ChatThreadTurn[];
+    context_window?: unknown;
+    paging?: {
+        has_more?: boolean;
+        next_before_turn_index?: number | null;
+    };
+};
+export type ChatSubmitInput = {
+    text: string;
+    threadId?: string | null;
+    files?: ChatAttachment[];
+    signal?: AbortSignal;
+    state?: Record<string, unknown>;
+    [key: string]: unknown;
+};
+export type ChatSubmitMessage = {
+    text: string;
+    files?: ChatAttachment[];
+    state?: Record<string, unknown>;
+    [key: string]: unknown;
+};
+export type ChatTransport = {
+    listThreads: (input?: {
+        signal?: AbortSignal;
+    }) => Promise<{
+        items: ChatThreadSummary[];
+        total?: number;
+    }>;
+    getThread: (input: {
+        threadId: string;
+        limit?: number;
+        beforeTurnIndex?: number | null;
+        includeRunEvents?: boolean;
+        signal?: AbortSignal;
+    }) => Promise<ChatThreadDetail>;
+    streamMessage: (input: ChatSubmitInput, onEvent: (event: ChatRuntimeEvent) => void | Promise<void>) => Promise<ChatStreamResult>;
+    attachRun: (input: {
+        runId: string;
+        signal?: AbortSignal;
+    }, onEvent: (event: ChatRuntimeEvent) => void | Promise<void>) => Promise<ChatStreamResult>;
+    cancelRun: (input: {
+        runId: string;
+        assistantOutputText?: string;
+    }) => Promise<{
+        run_id?: string;
+        status?: string;
+    }>;
+    deleteThread?: (input: {
+        threadId: string;
+    }) => Promise<{
+        deleted?: boolean;
+    }>;
+    uploadAttachment?: (input: {
+        file: File;
+        signal?: AbortSignal;
+    }) => Promise<ChatAttachment>;
+};
+export type ChatStreamResult = {
+    threadId?: string | null;
+    runId?: string | null;
+};
+export type StoredChatThread = ChatThreadSummary & {
+    messages: ChatMessage[];
+    isHydrated?: boolean;
+    hasOlderTurns?: boolean;
+    nextBeforeTurnIndex?: number | null;
+};
+export type ChatStorageAdapter = {
+    listThreads: () => StoredChatThread[];
+    setThreads: (threads: StoredChatThread[]) => void;
+    getThread: (threadId: string) => StoredChatThread | undefined;
+    upsertThread: (thread: StoredChatThread) => void;
+    deleteThread?: (threadId: string) => void;
+    getActiveThreadId?: () => string | null;
+    setActiveThreadId?: (threadId: string | null) => void;
+};
+export type ChatController = {
+    threads: StoredChatThread[];
+    activeThreadId: string | null;
+    activeThread: StoredChatThread | null;
+    messages: ChatMessage[];
+    streamingContent: string;
+    streamingMessageId: string | null;
+    contextStatus: ChatContextWindow | null;
+    currentReasoning: ChatReasoningStep[];
+    isLoading: boolean;
+    isLoadingHistory: boolean;
+    isLoadingOlder: boolean;
+    isRefreshingThreads: boolean;
+    hasOlderTurns: boolean;
+    liked: Record<string, boolean>;
+    disliked: Record<string, boolean>;
+    copiedMessageId: string | null;
+    lastThinkingDurationMs: number | null;
+    activeRunId: string | null;
+    handleSubmit: (message: ChatSubmitMessage) => Promise<void>;
+    handleStop: () => void;
+    handleCopy: (content: string, messageId: string) => void;
+    handleLike: (msg: ChatMessage) => Promise<void>;
+    handleDislike: (msg: ChatMessage) => Promise<void>;
+    handleRetry: (msg: ChatMessage) => Promise<void>;
+    handleSourceClick: (citations: ChatMessage["citations"]) => void;
+    upsertLiveVoiceMessage: (input: {
+        role: "user" | "assistant";
+        content: string;
+        isFinal?: boolean;
+        citations?: ChatCitation[];
+        reasoningSteps?: ChatReasoningStep[];
+    }) => void;
+    startNewThread: () => void;
+    loadThreadById: (threadId: string) => Promise<void>;
+    loadOlderTurns: () => Promise<void>;
+    refresh: () => Promise<void>;
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
+};

package/dist/ui/adapters.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { ChatAttachment as Agents24ChatAttachment, ChatMessage as Agents24ChatMessage } from "../types";
+import { Attachment, AttachmentGroup } from "./attachment";
+import { BubbleContent } from "./bubble";
+import { Message } from "./message";
+export type ChatMessageRole = Agents24ChatMessage["role"] | "system" | "data";
+export type ChatMessageProps = Omit<React.ComponentProps<typeof Message>, "align"> & {
+    from: ChatMessageRole;
+    align?: "start" | "end";
+};
+export declare function ChatMessage(input: ChatMessageProps): React.ReactElement;
+export type ChatMessageContentProps = React.ComponentProps<typeof BubbleContent> & {
+    from?: ChatMessageRole;
+};
+export declare function ChatMessageContent({ className, ...props }: ChatMessageContentProps): React.ReactElement;
+export type ChatMessageActionsProps = React.ComponentProps<"div">;
+export declare function ChatMessageActions({ className, ...props }: ChatMessageActionsProps): React.ReactElement;
+export type ChatMessageActionProps = React.ComponentProps<"button"> & {
+    label?: string;
+    tooltip?: React.ReactNode;
+};
+export declare function ChatMessageAction({ children, className, label, tooltip, type, ...props }: ChatMessageActionProps): React.ReactElement;
+export type ChatAttachmentData = Agents24ChatAttachment & {
+    type?: string;
+    name?: string;
+    mediaType?: string;
+    contentType?: string;
+};
+export type ChatAttachmentProps = React.ComponentProps<typeof Attachment> & {
+    data: ChatAttachmentData;
+    onRemove?: () => void;
+};
+export declare function ChatAttachment({ data, onRemove, orientation, ...props }: ChatAttachmentProps): React.ReactElement;
+export type ChatAttachmentsProps = React.ComponentProps<typeof AttachmentGroup>;
+export declare function ChatAttachments({ children, className, ...props }: ChatAttachmentsProps): React.ReactElement | null;
+export { ChatAttachment as MessageAttachment, ChatAttachments as MessageAttachments, ChatMessage as Message, ChatMessageAction as MessageAction, ChatMessageActions as MessageActions, ChatMessageContent as MessageContent, };

package/dist/ui/attachment.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const attachmentVariants: (props?: ({
+    size?: "default" | "sm" | "xs" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Attachment({ className, state, size, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done";
+}): React.JSX.Element;
+declare const attachmentMediaVariants: (props?: ({
+    variant?: "image" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function AttachmentMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): React.JSX.Element;
+declare function AttachmentContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentAction({ className, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function AttachmentTrigger({ className, asChild, type, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Attachment, AttachmentGroup, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, AttachmentAction, AttachmentTrigger, attachmentVariants, attachmentMediaVariants, };

package/dist/ui/bubble.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const bubbleVariants: (props?: ({
+    variant?: "default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
+    align?: "start" | "end";
+}): React.JSX.Element;
+declare function BubbleContent({ asChild, className, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function BubbleReactions({ side, align, className, ...props }: React.ComponentProps<"div"> & {
+    align?: "start" | "end";
+    side?: "top" | "bottom";
+}): React.JSX.Element;
+export { BubbleGroup, Bubble, BubbleContent, BubbleReactions, bubbleVariants };