@springbrand/message-panel 0.1.3-alpha.1 → 0.1.3-alpha.3

package/cloud-os/chat/tool-rows.tsx

@@ -0,0 +1,216 @@
+import { CaretRight } from "@phosphor-icons/react";
+import { memo } from "react";
+import { MarkdownMessage } from "./markdown-message";
+import {
+  getToolCallSummary,
+  getToolIcon,
+  normalizeOutputText,
+  safeStringify,
+  type CloudOsToolCall,
+  type PhosphorIcon,
+  type ToolCallGroup,
+} from "./tool-presentation";
+
+/**
+ * 工作行(work rows)。整块从 cloudflare-os-main 的 ChatInterface.tsx 拷来:
+ * WorkIcon / ToolCallDetails / NestedToolCallRow / ToolGroupRow / ThinkingTraceRow。
+ * className 一个字没改;改的只有取数——从 gadgets 的 AiToolCall 换成
+ * UIMessage 归一化后的 CloudOsToolCall。
+ */
+
+export function WorkIcon({ Icon }: { Icon: PhosphorIcon }) {
+  return <Icon size={15} className="text-kumo-inactive" />;
+}
+
+function OutputPre({ label, value }: { label?: string; value: string }) {
+  if (!value) return null;
+  return (
+    <>
+      {label && (
+        <span className="font-mono text-[11px] leading-4 text-kumo-inactive uppercase tracking-[0.08em]">
+          {label}
+        </span>
+      )}
+      <pre className="max-h-56 overflow-auto rounded-xl border border-kumo-line/70 bg-kumo-base p-3 font-mono text-[12px] leading-[18px] text-kumo-subtle whitespace-pre-wrap">
+        {value}
+      </pre>
+    </>
+  );
+}
+
+export const ToolCallDetails = memo(function ToolCallDetails({
+  toolCall: tc,
+}: {
+  toolCall: CloudOsToolCall;
+}) {
+  const code =
+    typeof tc.input.code === "string"
+      ? tc.input.code
+      : typeof tc.input.command === "string"
+        ? tc.input.command
+        : "";
+  const inputText =
+    Object.keys(tc.input).length > 0 ? safeStringify(tc.input) : "";
+  return (
+    <div className="space-y-2">
+      {tc.errorText && (
+        <pre className="rounded-xl border border-kumo-danger/20 bg-kumo-danger-tint/40 p-3 font-mono text-[12px] leading-[18px] text-kumo-danger whitespace-pre-wrap">
+          {tc.errorText}
+        </pre>
+      )}
+      {code ? (
+        <>
+          <OutputPre label="Code" value={code} />
+          <OutputPre label="Output" value={tc.outputText} />
+        </>
+      ) : (
+        <>
+          <OutputPre value={inputText} />
+          {tc.outputText && <OutputPre label="Output" value={tc.outputText} />}
+        </>
+      )}
+      {!code && !inputText && !tc.outputText && !tc.errorText && (
+        <p className="m-0 text-[12px] leading-4 text-kumo-inactive">
+          No additional data
+        </p>
+      )}
+    </div>
+  );
+});
+
+export const NestedToolCallRow = memo(function NestedToolCallRow({
+  toolCall: tc,
+  open,
+  onToggle,
+}: {
+  toolCall: CloudOsToolCall;
+  open: boolean;
+  onToggle: (key: string) => void;
+}) {
+  const key = `call-${tc.toolCallId}`;
+  const summary = getToolCallSummary(tc);
+  const label = `${summary.verb}${summary.target ? ` ${summary.target}` : ""}`;
+  const Icon = getToolIcon(tc.kind);
+
+  return (
+    <div className="group/nested">
+      <button
+        type="button"
+        onClick={() => onToggle(key)}
+        className="flex w-full cursor-pointer items-center gap-3 rounded-xl px-1.5 py-1 text-left text-kumo-subtle transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.995]"
+        aria-expanded={open}
+      >
+        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+          <WorkIcon Icon={Icon} />
+        </span>
+        <span className="flex min-w-0 flex-1 items-center gap-2 text-[14px] leading-5 tracking-[-0.25px]">
+          <span className="min-w-0 truncate">{label}</span>
+          {tc.failed && (
+            <span className="flex-shrink-0 rounded-full bg-kumo-danger-tint px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-kumo-danger">
+              Error
+            </span>
+          )}
+          <CaretRight
+            size={13}
+            weight="bold"
+            className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
+          />
+        </span>
+      </button>
+      {open && (
+        <div className="themed-surface-inset ml-8 mt-1 space-y-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3">
+          <ToolCallDetails toolCall={tc} />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const ThinkingTraceRow = memo(function ThinkingTraceRow({
+  reasoning,
+}: {
+  reasoning: string;
+}) {
+  return (
+    <div className="min-w-0 py-1 text-kumo-subtle">
+      <div className="cos-markdown min-w-0 text-[13px] leading-[19px]">
+        <MarkdownMessage message={reasoning} />
+      </div>
+    </div>
+  );
+});
+
+export const ToolGroupRow = memo(function ToolGroupRow({
+  group,
+  open,
+  expandedKeys,
+  onToggle,
+}: {
+  group: ToolCallGroup;
+  open: boolean;
+  expandedKeys: ReadonlySet<string>;
+  onToggle: (key: string) => void;
+}) {
+  return (
+    <div className="group -ml-0.5">
+      <button
+        type="button"
+        onClick={() => onToggle(group.key)}
+        className="flex w-full cursor-pointer items-center gap-3 rounded-xl px-1.5 py-1 text-left text-kumo-subtle transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.995]"
+        aria-expanded={open}
+      >
+        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+          <WorkIcon Icon={group.Icon} />
+        </span>
+        <span className="min-w-0 flex-1">
+          <span className="flex min-w-0 items-center gap-2 text-[14px] leading-5 tracking-[-0.25px]">
+            <span
+              className={`min-w-0 truncate ${group.hasRunning ? "cos-thinking-shimmer" : ""}`}
+            >
+              {group.label}
+            </span>
+            {group.hasError && (
+              <span className="flex-shrink-0 rounded-full bg-kumo-danger-tint px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-kumo-danger">
+                Error
+              </span>
+            )}
+            <CaretRight
+              size={13}
+              weight="bold"
+              className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
+            />
+          </span>
+          {group.detailLines.length > 1 && (
+            <span className="mt-1 block truncate font-mono text-[12px] leading-4 text-kumo-inactive">
+              {group.detailLines.join(" · ")}
+            </span>
+          )}
+        </span>
+      </button>
+      {open &&
+        (group.calls.length === 1 ? (
+          <div className="themed-surface-inset ml-8 mt-1 space-y-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3">
+            <ToolCallDetails toolCall={group.calls[0]} />
+          </div>
+        ) : (
+          <div className="ml-8 mt-1 space-y-1">
+            {group.calls.map((toolCall) => {
+              const key = `call-${toolCall.toolCallId}`;
+              return (
+                <NestedToolCallRow
+                  key={toolCall.toolCallId}
+                  toolCall={toolCall}
+                  open={expandedKeys.has(key)}
+                  onToggle={onToggle}
+                />
+              );
+            })}
+          </div>
+        ))}
+    </div>
+  );
+});
+
+export function toolOutputSummary(call: CloudOsToolCall): string {
+  return normalizeOutputText(call.output);
+}