@agents24/chat-react 0.5.6 → 0.5.7

package/dist/scaffold/index.cjs

@@ -39,11 +39,12 @@ module.exports = __toCommonJS(src_exports);
 
 // scaffold/src/app.tsx
 var import_runtime3 = require("@agents24/chat-react/runtime");
-var import_react3 = require("@agents24/react");
+var import_react2 = require("@agents24/react");
 
 // scaffold/src/components/chat/chat-shell.tsx
 var import_runtime2 = require("@agents24/chat-react/runtime");
 var import_lucide_react12 = require("lucide-react");
+var React8 = __toESM(require("react"), 1);
 
 // scaffold/src/components/chat/chat-composer.tsx
 var import_lucide_react3 = require("lucide-react");
@@ -1140,7 +1141,7 @@ function MessageFooter({ className, ...props }) {
     {
       "data-slot": "message-footer",
       className: cn(
-        "flex max-w-full min-w-0 items-center px-3.5 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        "flex max-w-full min-w-0 items-center pl-3.5 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
         className
       ),
       ...props
@@ -1162,7 +1163,7 @@ function ChatMessage({
   Timeline
 }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MessageContent, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(MessageContent, { className: isUser ? "gap-0" : void 0, children: [
     isUser && message.attachments?.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_ui3.ChatAttachmentRows,
       {
@@ -1181,6 +1182,17 @@ function ChatMessage({
         Timeline
       }
     ) }) }),
+    isUser && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui3.AgentChatUserMessageActionRow, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_ui3.AgentChatDefaultActions,
+      {
+        handlers: {
+          onCopy: (content) => {
+            void navigator.clipboard.writeText(content).catch(() => void 0);
+          }
+        },
+        message
+      }
+    ) }),
     !isUser && message.isFinal !== false && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageFooter, { className: "gap-1 opacity-70 transition-opacity group-hover/message:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_ui3.AgentChatDefaultActions,
       {
@@ -1583,7 +1595,7 @@ function Sidebar({
             className: cn(
               "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
               // Adjust the padding for floating and inset variants.
-              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "border-border/50 group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
               className
             ),
             ...props,
@@ -1982,20 +1994,60 @@ function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoading
 }
 
 // scaffold/src/components/chat/turn-outline.tsx
-var import_react2 = require("react");
+var import_chat_react = require("@agents24/chat-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function turnsFromMessages(messages) {
+  return messages.reduce((turns, message) => {
+    if (message.role === "user") {
+      turns.push({
+        id: message.id,
+        label: message.content.trim() || `Turn ${turns.length + 1}`,
+        messageIds: [message.id],
+        responsePreview: ""
+      });
+    } else if (turns.length) {
+      const turn = turns[turns.length - 1];
+      turn.messageIds?.push(message.id);
+      if (!turn.responsePreview) turn.responsePreview = message.content.trim();
+    }
+    return turns;
+  }, []);
+}
+function TurnOutline({ messages }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_chat_react.LatestThreadScroller.Outline,
+    {
+      items: turnsFromMessages(messages),
+      minSideGutterForRail: 0,
+      side: "left",
+      verticalOffset: "3.5rem"
+    }
+  );
+}
+
+// scaffold/src/components/chat/timeline-loading.ts
+function isScaffoldTimelineLoading({
+  activeRunId,
+  message,
+  runState,
+  streamingMessageId
+}) {
+  if (runState !== "streaming" && runState !== "reconnecting") return false;
+  return message.id === streamingMessageId || Boolean(message.runId && message.runId === activeRunId);
+}
 
 // scaffold/src/components/ui/message-scroller.tsx
 var import_message_scroller = require("@shadcn/react/message-scroller");
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function MessageScrollerProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_message_scroller.MessageScroller.Provider, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_message_scroller.MessageScroller.Provider, { ...props });
 }
 function MessageScroller({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_message_scroller.MessageScroller.Root,
     {
       "data-slot": "message-scroller",
@@ -2011,7 +2063,7 @@ function MessageScrollerViewport({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_message_scroller.MessageScroller.Viewport,
     {
       "data-slot": "message-scroller-viewport",
@@ -2027,11 +2079,11 @@ function MessageScrollerContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_message_scroller.MessageScroller.Content,
     {
       "data-slot": "message-scroller-content",
-      className: cn("flex h-max min-h-full flex-col gap-8", className),
+      className: cn("flex h-max min-h-full flex-col gap-3", className),
       ...props
     }
   );
@@ -2041,7 +2093,7 @@ function MessageScrollerItem({
   scrollAnchor = false,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_message_scroller.MessageScroller.Item,
     {
       "data-slot": "message-scroller-item",
@@ -2063,7 +2115,7 @@ function MessageScrollerButton({
   size = "icon-sm",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_message_scroller.MessageScroller.Button,
     {
       "data-slot": "message-scroller-button",
@@ -2075,86 +2127,19 @@ function MessageScrollerButton({
         "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
         className
       ),
-      render: render ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { variant, size }),
+      render: render ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant, size }),
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_lucide_react11.ArrowDownIcon,
           {}
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
       ] })
     }
   );
 }
 
-// scaffold/src/components/chat/turn-outline.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function turnsFromMessages(messages) {
-  return messages.reduce((turns, message) => {
-    if (message.role === "user") {
-      turns.push({ id: message.id, label: message.content.trim() || `Turn ${turns.length + 1}`, messageIds: [message.id], response: "" });
-    } else if (turns.length) {
-      const turn = turns[turns.length - 1];
-      turn.messageIds.push(message.id);
-      if (!turn.response) turn.response = message.content.trim();
-    }
-    return turns;
-  }, []);
-}
-function TurnOutline({ messages }) {
-  const turns = turnsFromMessages(messages);
-  const { scrollToMessage } = (0, import_message_scroller.useMessageScroller)();
-  const { currentAnchorId, visibleMessageIds } = (0, import_message_scroller.useMessageScrollerVisibility)();
-  const visible = new Set(visibleMessageIds);
-  const [hoveredIndex, setHoveredIndex] = (0, import_react2.useState)(null);
-  const focusIndex = hoveredIndex ?? -1;
-  if (turns.length < 2) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("nav", { "aria-label": "Transcript outline", className: "pointer-events-none absolute end-2 top-1/2 z-20 hidden max-h-72 w-14 -translate-y-1/2 md:block xl:end-5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pointer-events-auto flex flex-col items-end gap-0.5 py-2", children: turns.map((turn, index) => {
-    const active = turn.messageIds.some((id) => visible.has(id) || currentAnchorId === id);
-    const distance = focusIndex >= 0 ? Math.abs(index - focusIndex) : Number.POSITIVE_INFINITY;
-    const barWidth = focusIndex < 0 ? 12 : distance === 0 ? 50 : distance === 1 ? 36 : distance === 2 ? 23 : 10;
-    const barOpacity = focusIndex < 0 ? active ? 1 : 0.4 : distance === 0 ? 1 : distance === 1 ? 0.78 : distance === 2 ? 0.58 : 0.36;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        "button",
-        {
-          type: "button",
-          "aria-label": `Jump to ${turn.label}`,
-          className: "group relative flex h-2 w-14 items-center justify-end outline-none after:pointer-events-auto after:absolute after:-inset-y-0.5 after:inset-x-0 after:content-['']",
-          onBlur: () => setHoveredIndex(null),
-          onFocus: () => setHoveredIndex(index),
-          onMouseEnter: () => setHoveredIndex(index),
-          onMouseLeave: () => setHoveredIndex(null),
-          onClick: () => scrollToMessage(turn.id, { align: "start", behavior: "smooth" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            "span",
-            {
-              className: cn("h-0.5 rounded-full bg-muted-foreground/40 transition-[width,background-color,opacity] duration-150 ease-out group-hover:bg-foreground group-focus-visible:bg-foreground", active && "bg-foreground"),
-              style: { opacity: barOpacity, width: barWidth }
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(TooltipContent, { side: "left", className: "w-64 flex-col items-stretch gap-0 overflow-hidden p-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "line-clamp-2 max-w-full wrap-break-word text-sm font-medium", children: turn.label }),
-        turn.response && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "mt-1 line-clamp-2 max-w-full wrap-break-word text-xs opacity-70", children: turn.response })
-      ] })
-    ] }, turn.id);
-  }) }) });
-}
-
-// scaffold/src/components/chat/timeline-loading.ts
-function isScaffoldTimelineLoading({
-  activeRunId,
-  message,
-  runState,
-  streamingMessageId
-}) {
-  if (runState !== "streaming" && runState !== "reconnecting") return false;
-  return message.id === streamingMessageId || Boolean(message.runId && message.runId === activeRunId);
-}
-
 // scaffold/src/components/chat/chat-shell.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var LOADING_INPUT_CONTRACT = {
@@ -2211,6 +2196,19 @@ function ChatShell({
   const activeTitle = controller.threads.find((thread) => thread.id === controller.activeThreadId)?.title;
   const hasBlockingError = Boolean(runtime.fatalError && controller.messages.length === 0);
   const isEmptyState = controller.activeThreadId === null && controller.messages.length === 0 && !hasBlockingError;
+  const composerOverlayRef = React8.useRef(null);
+  const [composerOverlayHeight, setComposerOverlayHeight] = React8.useState(192);
+  React8.useEffect(() => {
+    const overlay = composerOverlayRef.current;
+    if (!overlay || isEmptyState) return;
+    const updateHeight = () => {
+      setComposerOverlayHeight(Math.ceil(overlay.getBoundingClientRect().height));
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(overlay);
+    return () => resizeObserver.disconnect();
+  }, [isEmptyState]);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     SidebarProvider,
     {
@@ -2238,7 +2236,7 @@ function ChatShell({
           /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "header",
             {
-              className: "flex h-12 shrink-0 items-center gap-2 border-b border-border/30 px-3 sm:px-4",
+              className: "flex h-12 shrink-0 items-center gap-2 border-b border-border/50 px-3 sm:px-4",
               "data-agents24-chat-header": "",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CollapsedHeaderActions, { onNew: runtime.newThread }),
@@ -2289,18 +2287,19 @@ function ChatShell({
                       })
                     }
                   )
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                    MessageScrollerProvider,
-                    {
-                      autoScroll: true,
-                      defaultScrollPosition: "last-anchor",
-                      scrollPreviousItemPeek: 64,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(MessageScroller, { className: "relative min-h-0 flex-1", children: [
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                  MessageScrollerProvider,
+                  {
+                    autoScroll: true,
+                    defaultScrollPosition: "last-anchor",
+                    scrollPreviousItemPeek: 64,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(MessageScroller, { className: "relative min-h-0 flex-1", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageScrollerViewport, { preserveScrollOnPrepend: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                           MessageScrollerContent,
                           {
-                            className: "mx-auto w-full max-w-3xl gap-7 px-4 pt-8 pb-16 sm:px-6 sm:pt-12",
+                            className: "mx-auto w-full max-w-3xl gap-3 px-4 pt-8 pb-0 sm:px-6 sm:pt-12",
+                            style: { paddingBottom: composerOverlayHeight + 72 },
                             children: [
                               controller.hasOlderTurns && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Button, { className: "self-center", variant: "ghost", size: "sm", disabled: controller.isLoadingOlder, onClick: () => {
                                 void controller.loadOlder().catch(() => void 0);
@@ -2348,44 +2347,56 @@ function ChatShell({
                             ]
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TurnOutline, { messages: controller.messages }),
-                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageScrollerButton, {})
-                      ] })
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "relative z-30 shrink-0 bg-background pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                    ChatComposer,
-                    {
-                      inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
-                      contextWindow: runtime.contextWindow,
-                      disabled: runtime.isBootstrapping || runtime.isChangingAgent || hasBlockingError || isUploading,
-                      focusKey: controller.activeThreadId,
-                      isCancelling,
-                      isRunning,
-                      agentId: runtime.agentId,
-                      agents: runtime.agents,
-                      onAgentChange: (agentId) => {
-                        void runtime.changeAgent(agentId);
-                      },
-                      onStop: () => {
-                        void controller.cancelRun().catch(() => void 0);
-                      },
-                      modelId: runtime.modelId,
-                      models: runtime.models,
-                      onModelChange: runtime.changeModel,
-                      onSubmit: (text, files) => runtime.submit({
-                        text,
-                        files: files.map((file) => ({
-                          data: file.source,
-                          mediaType: file.mediaType,
-                          name: file.filename
-                        })),
-                        attachments: files
-                      }),
-                      utilityRow: "below"
-                    }
-                  ) })
-                ] })
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TurnOutline, { messages: controller.messages })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                        "div",
+                        {
+                          ref: composerOverlayRef,
+                          className: "pointer-events-none absolute inset-x-0 bottom-0 z-30 overflow-visible pt-10",
+                          style: {
+                            background: "linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--background) 85%, transparent) 45%, var(--background) 65%, var(--background) 100%)"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)(MessageScrollerButton, { className: "!relative !inset-auto !translate-x-0 rtl:!translate-x-0" }) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                              ChatComposer,
+                              {
+                                inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
+                                contextWindow: runtime.contextWindow,
+                                disabled: runtime.isBootstrapping || runtime.isChangingAgent || hasBlockingError || isUploading,
+                                focusKey: controller.activeThreadId,
+                                isCancelling,
+                                isRunning,
+                                agentId: runtime.agentId,
+                                agents: runtime.agents,
+                                onAgentChange: (agentId) => {
+                                  void runtime.changeAgent(agentId);
+                                },
+                                onStop: () => {
+                                  void controller.cancelRun().catch(() => void 0);
+                                },
+                                modelId: runtime.modelId,
+                                models: runtime.models,
+                                onModelChange: runtime.changeModel,
+                                onSubmit: (text, files) => runtime.submit({
+                                  text,
+                                  files: files.map((file) => ({
+                                    data: file.source,
+                                    mediaType: file.mediaType,
+                                    name: file.filename
+                                  })),
+                                  attachments: files
+                                }),
+                                utilityRow: "below"
+                              }
+                            ) })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ) })
               ]
             }
           )
@@ -2414,7 +2425,7 @@ function RuntimeChat({
 }
 function App(props) {
   const identity = props.identity || GUEST_CHAT_IDENTITY;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react3.Agents24Provider, { client: props.client, createAbortController: createBrowserAbortController, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RuntimeChat, { ...props }, identity.state) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react2.Agents24Provider, { client: props.client, createAbortController: createBrowserAbortController, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RuntimeChat, { ...props }, identity.state) });
 }
 
 // scaffold/src/index.tsx