@agents24/chat-react 0.1.6 → 0.1.8

package/dist/model.d.ts

@@ -0,0 +1,29 @@
+import type { ChatPart, ChatContextWindow, ChatMessage, ChatReasoningStep, ChatThreadDetail, ChatThreadSummary, ChatToolState } from "./types";
+export declare const DEFAULT_THREAD_PAGE_SIZE = 5;
+export declare const isRunningThreadStatus: (status?: string | null) => boolean;
+export declare const createChatId: () => string;
+export declare const titleFromMessage: (text: string, files?: Array<{
+    filename?: string;
+}>) => string;
+export declare const threadActivityDate: (thread: ChatThreadSummary) => string;
+export declare const assistantTextFromResponseBlocks: (blocks?: Array<Record<string, unknown>>) => string;
+export declare const assistantTextFromParts: (parts?: ChatPart[]) => string;
+export declare const textFromFinalOutput: (value: unknown) => string;
+export declare const toolStateFromStatus: (status?: unknown) => ChatToolState;
+export declare const partsFromResponseBlocks: (blocks?: Array<Record<string, unknown>>, fallbackText?: string) => ChatPart[];
+export declare const mergeReasoningSteps: (steps?: ChatReasoningStep[], options?: {
+    finalize?: boolean;
+}) => ChatReasoningStep[];
+export declare const reasoningStepsFromParts: (parts?: ChatPart[]) => ChatReasoningStep[];
+export declare const threadDetailToMessages: (thread: ChatThreadDetail) => ChatMessage[];
+export declare const threadPaging: (thread: ChatThreadDetail) => {
+    hasOlderTurns: boolean;
+    nextBeforeTurnIndex: number | null;
+};
+export declare const latestContextWindowFromThread: (thread: ChatThreadDetail) => ChatContextWindow | null;
+export declare const activeRunIdFromThread: (thread?: Partial<ChatThreadSummary> | null) => string | null;
+export declare const hasUnfinishedAssistantMessage: (messages?: ChatMessage[]) => boolean;
+export declare const hasStaleUnfinishedAssistantCache: (thread?: (Partial<ChatThreadSummary> & {
+    messages?: ChatMessage[];
+}) | null) => boolean;
+export declare const activeRunIdFromThreadDetail: (thread?: ChatThreadDetail | null) => string | null;

package/dist/renderers.d.ts

@@ -0,0 +1,10 @@
+import type { Agents24ChatRenderOptions, ChatMessage, ChatPart, ChatToolPart } from "./types";
+export declare const DefaultToolPart: ({ part }: {
+    part: ChatToolPart;
+}) => import("react").JSX.Element;
+export declare const DefaultChatPart: ({ part, message, renderOptions, }: {
+    part: ChatPart;
+    message: ChatMessage;
+    renderOptions?: Agents24ChatRenderOptions;
+}) => import("react").JSX.Element;
+export declare const renderChatPart: (part: ChatPart, message: ChatMessage, renderOptions?: Agents24ChatRenderOptions) => import("react").JSX.Element;

package/dist/sse.d.ts

@@ -0,0 +1,3 @@
+import type { ChatRuntimeEvent, ChatStreamResult } from "./types";
+export declare const parseSseBlock: (block: string) => ChatRuntimeEvent | null;
+export declare const consumeSseResponse: (response: Response, onEvent: (event: ChatRuntimeEvent) => void | Promise<void>) => Promise<ChatStreamResult>;

package/dist/streaming-text.d.ts

@@ -0,0 +1,24 @@
+import type { ChatMessage, ChatPart } from "./types";
+export type StreamingTextMode = "streaming" | "static";
+export type StreamingTextCache = {
+    get: (id: string) => string | undefined;
+    set: (id: string, text: string) => void;
+};
+export type UseStreamingTextOptions = {
+    id: string;
+    isStreaming: boolean;
+    text: string;
+    cache?: StreamingTextCache | false;
+    charsPerSecond?: number;
+    catchupThreshold?: number;
+    maxCatchupChars?: number;
+};
+export type UseStreamingTextResult = {
+    displayedText: string;
+    isAnimating: boolean;
+    mode: StreamingTextMode;
+    parseIncompleteMarkdown: boolean;
+};
+export declare const getActiveStreamingTextPartId: (message: ChatMessage, streamingMessageId: string | null) => string | null;
+export declare const isActiveStreamingTextPart: (message: ChatMessage, part: ChatPart, streamingMessageId: string | null) => boolean;
+export declare function useStreamingText({ id, isStreaming, text, cache, charsPerSecond, catchupThreshold, maxCatchupChars, }: UseStreamingTextOptions): UseStreamingTextResult;

package/dist/templates/agent-chat-shell.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { type LatestThreadScrollerOutlineItem } from "../latest-thread-scroller";
+import type { ChatMessage } from "../types";
+export type AgentChatShellMessage = Pick<ChatMessage, "id" | "role" | "content"> & {
+    [key: string]: unknown;
+};
+export type AgentChatShellProps<TMessage extends AgentChatShellMessage> = {
+    className?: string;
+    contentClassName?: string;
+    composer?: React.ReactNode;
+    composerOverlayClassName?: string;
+    composerOverlayHeight?: number;
+    defaultComposerOverlayHeight?: number;
+    dir?: "ltr" | "rtl";
+    hideComposer?: boolean;
+    isLoadingOlder?: boolean;
+    messages: TMessage[];
+    onLoadOlder?: (() => Promise<unknown> | unknown) | null;
+    outlineItems?: LatestThreadScrollerOutlineItem[];
+    outlineSide?: "left" | "right";
+    renderMessage: (message: TMessage, index: number) => React.ReactNode;
+    renderOlderLoader?: () => React.ReactNode;
+};
+export declare function buildAgentChatOutlineItems<TMessage extends AgentChatShellMessage>(messages: TMessage[], getLabel?: (message: TMessage, index: number) => string, getResponsePreview?: (message: TMessage) => string): LatestThreadScrollerOutlineItem[];
+export declare function AgentChatShell<TMessage extends AgentChatShellMessage>({ className, composer, composerOverlayClassName, composerOverlayHeight, contentClassName, defaultComposerOverlayHeight, dir, hideComposer, isLoadingOlder, messages, onLoadOlder, outlineItems, outlineSide, renderMessage, renderOlderLoader, }: AgentChatShellProps<TMessage>): React.JSX.Element;

package/dist/templates/index.cjs

@@ -0,0 +1,523 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/templates/index.ts
+var templates_exports = {};
+__export(templates_exports, {
+  AgentChatShell: () => AgentChatShell,
+  buildAgentChatOutlineItems: () => buildAgentChatOutlineItems
+});
+module.exports = __toCommonJS(templates_exports);
+
+// src/templates/agent-chat-shell.tsx
+var React2 = __toESM(require("react"), 1);
+
+// src/latest-thread-scroller.tsx
+var React = __toESM(require("react"), 1);
+var import_message_scroller = require("@shadcn/react/message-scroller");
+var import_jsx_runtime = require("react/jsx-runtime");
+var cx = (...values) => values.filter(Boolean).join(" ");
+var LatestThreadScrollerLayoutContext = React.createContext(null);
+var useLatestThreadScrollerLayout = () => React.useContext(LatestThreadScrollerLayoutContext);
+function LatestThreadScrollerProvider({
+  autoScroll = true,
+  defaultScrollPosition = "last-anchor",
+  scrollPreviousItemPeek = 64,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Provider,
+    {
+      autoScroll,
+      defaultScrollPosition,
+      scrollPreviousItemPeek,
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerRoot({
+  className,
+  ref,
+  ...props
+}) {
+  const [rootElement, setRootElement] = React.useState(null);
+  const [contentElement, setContentElement] = React.useState(null);
+  const layoutContext = React.useMemo(
+    () => ({
+      contentElement,
+      rootElement,
+      setContentElement,
+      setRootElement
+    }),
+    [contentElement, rootElement]
+  );
+  const setRef = React.useCallback(
+    (node) => {
+      setRootElement(node);
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LatestThreadScrollerLayoutContext.Provider, { value: layoutContext, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Root,
+    {
+      ref: setRef,
+      className: cx(
+        "relative flex size-full min-h-0 flex-1 flex-col overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function LatestThreadScrollerViewport({
+  className,
+  onViewportChange,
+  preserveScrollOnPrepend = true,
+  ref,
+  ...props
+}) {
+  const setRef = React.useCallback(
+    (node) => {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+      onViewportChange?.(node);
+    },
+    [onViewportChange, ref]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Viewport,
+    {
+      ref: setRef,
+      className: cx(
+        "size-full min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain",
+        className
+      ),
+      preserveScrollOnPrepend,
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerContent({
+  className,
+  ref,
+  ...props
+}) {
+  const layout = useLatestThreadScrollerLayout();
+  const setRef = React.useCallback(
+    (node) => {
+      layout?.setContentElement(node);
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [layout, ref]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Content,
+    {
+      ref: setRef,
+      "data-agents24-latest-thread-content": "",
+      className: cx("flex h-max min-h-full flex-col gap-8 p-4", className),
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerItem({
+  className,
+  messageId,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Item,
+    {
+      className: cx(
+        "min-w-0 shrink-0 overflow-visible",
+        className
+      ),
+      messageId,
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerButton({
+  children,
+  className,
+  direction = "end",
+  render,
+  ...props
+}) {
+  if (render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_message_scroller.MessageScroller.Button,
+      {
+        direction,
+        render,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_message_scroller.MessageScroller.Button,
+    {
+      direction,
+      render: (buttonProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          ...buttonProps,
+          "aria-label": direction === "end" ? "Scroll to latest message" : "Scroll to first message",
+          className: cx(
+            "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",
+            className
+          ),
+          type: "button",
+          children: children ?? (direction === "end" ? "\u2193" : "\u2191")
+        }
+      ),
+      ...props
+    }
+  );
+}
+function LatestThreadScrollerOutline({
+  cardClassName,
+  className,
+  contentMaxWidth = 768,
+  dir = "ltr",
+  items,
+  minContainerWidthForRail = 0,
+  minSideGutterForRail = 48,
+  side
+}) {
+  const navRef = React.useRef(null);
+  const layout = useLatestThreadScrollerLayout();
+  const [hasSideRoom, setHasSideRoom] = React.useState(false);
+  const [hoveredIndex, setHoveredIndex] = React.useState(null);
+  const { scrollToMessage } = (0, import_message_scroller.useMessageScroller)();
+  const { currentAnchorId, visibleMessageIds } = (0, import_message_scroller.useMessageScrollerVisibility)();
+  const visibleMessageIdSet = React.useMemo(
+    () => new Set(visibleMessageIds),
+    [visibleMessageIds]
+  );
+  const focusIndex = hoveredIndex ?? -1;
+  const railSide = side ?? (dir === "rtl" ? "right" : "left");
+  React.useEffect(() => {
+    const root = layout?.rootElement ?? navRef.current?.parentElement;
+    if (!root) return;
+    const updateSideRoom = () => {
+      const rootRect = root.getBoundingClientRect();
+      const rootWidth = rootRect.width;
+      const content2 = layout?.contentElement;
+      const sideGutter = content2 ? Math.max(
+        0,
+        railSide === "left" ? content2.getBoundingClientRect().left - rootRect.left : rootRect.right - content2.getBoundingClientRect().right
+      ) : Math.max(0, (rootWidth - contentMaxWidth) / 2);
+      const nextHasSideRoom = rootWidth >= minContainerWidthForRail && sideGutter >= minSideGutterForRail;
+      setHasSideRoom(
+        (current) => current === nextHasSideRoom ? current : nextHasSideRoom
+      );
+    };
+    updateSideRoom();
+    const resizeObserver = new ResizeObserver(updateSideRoom);
+    resizeObserver.observe(root);
+    const content = layout?.contentElement;
+    if (content) {
+      resizeObserver.observe(content);
+    }
+    return () => resizeObserver.disconnect();
+  }, [
+    contentMaxWidth,
+    layout?.contentElement,
+    layout?.rootElement,
+    minContainerWidthForRail,
+    minSideGutterForRail,
+    railSide
+  ]);
+  if (items.length < 2) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "nav",
+    {
+      ref: navRef,
+      "aria-label": "Transcript outline",
+      className: cx(
+        "pointer-events-none absolute top-[46%] z-10 max-h-[min(18rem,calc(100%-10rem))] w-16 -translate-y-1/2 overflow-visible",
+        hasSideRoom ? "hidden md:block" : "hidden",
+        railSide === "left" ? "left-1" : "right-1",
+        className
+      ),
+      dir,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-auto flex flex-col gap-0 py-1", children: items.map((item, index) => {
+        const itemMessageIds = item.messageIds && item.messageIds.length > 0 ? item.messageIds : [item.id];
+        const active = itemMessageIds.some(
+          (messageId) => visibleMessageIdSet.has(messageId) || messageId === currentAnchorId
+        );
+        const distance = focusIndex >= 0 ? Math.abs(index - focusIndex) : Number.POSITIVE_INFINITY;
+        const isFocused = distance === 0;
+        const isNear = distance === 1;
+        const isNextNear = distance === 2;
+        const barWidth = isFocused ? 50 : isNear ? 36 : isNextNear ? 23 : 10;
+        const barOpacity = isFocused ? 1 : isNear ? 0.78 : isNextNear ? 0.58 : 0.36;
+        const fallbackLabel = `Turn ${index + 1}`;
+        const previewLabel = item.label && item.label !== fallbackLabel ? item.label : "";
+        const responsePreview = (item.responsePreview || "").trim();
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            "data-active": active,
+            dir: "ltr",
+            className: cx(
+              "group relative flex h-2 w-16 items-center rounded-sm outline-none",
+              railSide === "left" ? "justify-start" : "justify-end"
+            ),
+            "aria-label": `Jump to ${item.label || fallbackLabel}`,
+            onBlur: () => setHoveredIndex(null),
+            onFocus: () => setHoveredIndex(index),
+            onMouseEnter: () => setHoveredIndex(index),
+            onMouseLeave: () => setHoveredIndex(null),
+            onClick: () => scrollToMessage(item.id, {
+              align: "start",
+              behavior: "smooth"
+            }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  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",
+                  style: {
+                    opacity: barOpacity,
+                    width: barWidth
+                  }
+                }
+              ),
+              previewLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "span",
+                {
+                  dir,
+                  className: cx(
+                    "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",
+                    railSide === "left" ? "left-full ml-2 -translate-x-1 group-hover:translate-x-0 group-focus-visible:translate-x-0" : "right-full mr-2 translate-x-1 group-hover:translate-x-0 group-focus-visible:translate-x-0",
+                    cardClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        className: "block overflow-hidden text-sm leading-5 text-foreground",
+                        style: {
+                          display: "-webkit-box",
+                          WebkitBoxOrient: "vertical",
+                          WebkitLineClamp: responsePreview ? 2 : 4
+                        },
+                        children: previewLabel
+                      }
+                    ),
+                    responsePreview ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        className: "mt-1 block overflow-hidden text-sm leading-5 text-muted-foreground",
+                        style: {
+                          display: "-webkit-box",
+                          WebkitBoxOrient: "vertical",
+                          WebkitLineClamp: 2
+                        },
+                        children: responsePreview
+                      }
+                    ) : null
+                  ]
+                }
+              ) : null
+            ]
+          },
+          item.id
+        );
+      }) })
+    }
+  );
+}
+var LatestThreadScroller = {
+  Provider: LatestThreadScrollerProvider,
+  Root: LatestThreadScrollerRoot,
+  Viewport: LatestThreadScrollerViewport,
+  Content: LatestThreadScrollerContent,
+  Item: LatestThreadScrollerItem,
+  Button: LatestThreadScrollerButton,
+  Outline: LatestThreadScrollerOutline
+};
+
+// src/ui/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...values) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(values));
+}
+
+// src/templates/agent-chat-shell.tsx
+var import_jsx_runtime2 = require("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 = React2.useRef(null);
+  const [measuredOverlayHeight, setMeasuredOverlayHeight] = React2.useState(
+    defaultComposerOverlayHeight
+  );
+  const olderPageRequestRef = React2.useRef(false);
+  const items = React2.useMemo(
+    () => outlineItems || buildAgentChatOutlineItems(messages),
+    [messages, outlineItems]
+  );
+  React2.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 = React2.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__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("relative flex h-full min-h-0 w-full flex-col", className), dir, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(LatestThreadScroller.Provider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(LatestThreadScroller.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LatestThreadScroller.Viewport, { onScroll: handleScroll, children: /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(
+              LatestThreadScroller.Item,
+              {
+                messageId: message.id,
+                scrollAnchor: message.role === "user",
+                children: renderMessage(message, index)
+              },
+              message.id
+            ))
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        LatestThreadScroller.Outline,
+        {
+          dir,
+          items,
+          side: outlineSide
+        }
+      )
+    ] }),
+    !hideComposer && composer ? /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LatestThreadScroller.Button, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pointer-events-auto mx-auto w-full max-w-3xl", children: composer })
+        ]
+      }
+    ) : null
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AgentChatShell,
+  buildAgentChatOutlineItems
+});
+//# sourceMappingURL=index.cjs.map