@tangle-network/agent-app 0.42.3 → 0.42.5

package/dist/web-react/index.js

@@ -1444,6 +1444,73 @@ function ToolCallCard({
     }
   );
 }
+function StreamingCaret() {
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      className: "ml-0.5 inline-block h-[1.1em] w-[3px] translate-y-[2px] animate-pulse rounded-sm bg-foreground/70",
+      "aria-hidden": true
+    }
+  );
+}
+function SegmentText({
+  content,
+  streaming,
+  showCaret,
+  renderBody
+}) {
+  const text = useSmoothText(content, streaming);
+  const body = useMemo3(() => renderBody(text), [renderBody, text]);
+  if (!content.trim() && !showCaret) return null;
+  return /* @__PURE__ */ jsxs7("div", { className: "text-base leading-[1.75]", children: [
+    body,
+    showCaret && /* @__PURE__ */ jsx7(StreamingCaret, {})
+  ] });
+}
+function SegmentedBody({
+  segments,
+  msg,
+  streaming,
+  renderBody,
+  approval,
+  onToolCallClick,
+  toolRenderers
+}) {
+  const lastIndex = segments.length - 1;
+  const segmentToolIds = new Set(
+    segments.flatMap((s) => s.kind === "tool" ? [s.call.id] : [])
+  );
+  const leftoverToolCalls = (msg.toolCalls ?? []).filter(
+    (tc) => !segmentToolIds.has(tc.id)
+  );
+  const renderToolCard = (call) => /* @__PURE__ */ jsx7(
+    ToolCallCard,
+    {
+      call,
+      message: msg,
+      approval,
+      onOpenRun: onToolCallClick,
+      renderers: toolRenderers
+    },
+    `tool-${call.id}`
+  );
+  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
+    segments.map(
+      (seg, i) => seg.kind === "text" ? /* @__PURE__ */ jsx7(
+        SegmentText,
+        {
+          content: seg.content,
+          streaming: streaming && i === lastIndex,
+          showCaret: streaming && i === lastIndex,
+          renderBody
+        },
+        `text-${i}`
+      ) : renderToolCard(seg.call)
+    ),
+    leftoverToolCalls.map(renderToolCard),
+    streaming && segments[lastIndex]?.kind === "tool" && /* @__PURE__ */ jsx7(StreamingCaret, {})
+  ] });
+}
 function AssistantMessageImpl({
   msg,
   streaming,
@@ -1458,19 +1525,21 @@ function AssistantMessageImpl({
   const content = useSmoothText(msg.content, streaming);
   const reasoning = useSmoothText(msg.reasoning ?? "", streaming);
   const body = useMemo3(() => renderBody(content), [renderBody, content]);
+  const segments = msg.segments;
+  const hasAnswerText = content !== "" || (segments?.some((s) => s.kind === "text" && s.content.trim() !== "") ?? false);
   const reasoningScrollRef = useRef4(null);
   const thinkStartRef = useRef4(null);
   const thinkMsRef = useRef4(null);
-  if (streaming && reasoning && !content && thinkStartRef.current === null) {
+  if (streaming && reasoning && !hasAnswerText && thinkStartRef.current === null) {
     thinkStartRef.current = performance.now();
   }
-  if (content && thinkStartRef.current !== null && thinkMsRef.current === null) {
+  if (hasAnswerText && thinkStartRef.current !== null && thinkMsRef.current === null) {
     thinkMsRef.current = performance.now() - thinkStartRef.current;
   }
   useEffect5(() => {
     const el = reasoningScrollRef.current;
-    if (el && streaming && !content) el.scrollTop = el.scrollHeight;
-  }, [reasoning, streaming, content]);
+    if (el && streaming && !hasAnswerText) el.scrollTop = el.scrollHeight;
+  }, [reasoning, streaming, hasAnswerText]);
   return /* @__PURE__ */ jsxs7("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
     /* @__PURE__ */ jsxs7("div", { className: "mb-1 flex items-baseline gap-2 text-[11px] tracking-wide text-muted-foreground", children: [
       /* @__PURE__ */ jsx7("span", { className: "font-semibold uppercase", children: agentLabel }),
@@ -1478,25 +1547,38 @@ function AssistantMessageImpl({
       formatTokensPerSecond(msg) && /* @__PURE__ */ jsx7("span", { children: formatTokensPerSecond(msg) }),
       formatModelCost(msg, models) && /* @__PURE__ */ jsx7("span", { children: formatModelCost(msg, models) })
     ] }),
-    reasoning && /* @__PURE__ */ jsxs7("details", { className: "mb-2 rounded-lg border-l-2 border-border/70 bg-muted/20 px-3 py-2", open: !content, children: [
-      /* @__PURE__ */ jsx7("summary", { className: "cursor-pointer select-none text-xs font-medium text-muted-foreground", children: !content ? /* @__PURE__ */ jsx7("span", { className: "animate-pulse", children: "Thinking\u2026" }) : thinkMsRef.current != null ? `Thought for ${Math.max(1, Math.round(thinkMsRef.current / 1e3))}s` : "Thought process" }),
+    reasoning && /* @__PURE__ */ jsxs7("details", { className: "mb-2 rounded-lg border-l-2 border-border/70 bg-muted/20 px-3 py-2", open: !hasAnswerText, children: [
+      /* @__PURE__ */ jsx7("summary", { className: "cursor-pointer select-none text-xs font-medium text-muted-foreground", children: !hasAnswerText ? /* @__PURE__ */ jsx7("span", { className: "animate-pulse", children: "Thinking\u2026" }) : thinkMsRef.current != null ? `Thought for ${Math.max(1, Math.round(thinkMsRef.current / 1e3))}s` : "Thought process" }),
       /* @__PURE__ */ jsx7("div", { ref: reasoningScrollRef, className: "mt-2 max-h-48 overflow-y-auto whitespace-pre-wrap text-[13px] leading-relaxed text-muted-foreground", children: reasoning })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "text-base leading-[1.75]", children: [
-      body,
-      streaming && content && !msg.toolCalls?.length && /* @__PURE__ */ jsx7("span", { className: "ml-0.5 inline-block h-[1.1em] w-[3px] translate-y-[2px] animate-pulse rounded-sm bg-foreground/70", "aria-hidden": true })
-    ] }),
-    msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-2 flex flex-col gap-1.5", children: msg.toolCalls.map((tc) => /* @__PURE__ */ jsx7(
-      ToolCallCard,
+    segments && segments.length > 0 ? /* @__PURE__ */ jsx7(
+      SegmentedBody,
       {
-        call: tc,
-        message: msg,
+        segments,
+        msg,
+        streaming,
+        renderBody,
         approval,
-        onOpenRun: onToolCallClick,
-        renderers: toolRenderers
-      },
-      tc.id
-    )) }),
+        onToolCallClick,
+        toolRenderers
+      }
+    ) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+      /* @__PURE__ */ jsxs7("div", { className: "text-base leading-[1.75]", children: [
+        body,
+        streaming && content && !msg.toolCalls?.length && /* @__PURE__ */ jsx7(StreamingCaret, {})
+      ] }),
+      msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-2 flex flex-col gap-1.5", children: msg.toolCalls.map((tc) => /* @__PURE__ */ jsx7(
+        ToolCallCard,
+        {
+          call: tc,
+          message: msg,
+          approval,
+          onOpenRun: onToolCallClick,
+          renderers: toolRenderers
+        },
+        tc.id
+      )) })
+    ] }),
     renderExtras?.(msg)
   ] });
 }