@vvedantb/ui 0.17.0 → 0.18.0

package/src/ai-elements/activity-step-detail.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { Badge } from "../ui/badge";
+import { useCn } from "../ui/ui-config";
+import type { ActivityStep } from "./activity-shared";
+import { CodeBlock, CodeBlockCopyButton } from "./code-block";
+import { FileChip } from "./file-chip";
+
+function basename(value: string): string {
+  const slash = Math.max(value.lastIndexOf("/"), value.lastIndexOf("\\"));
+  return slash >= 0 ? value.slice(slash + 1) : value;
+}
+
+/**
+ * Expandable body for a tool-call row: shell transcript, exit chip, edits,
+ * file chips, and write preview. Presentational only.
+ */
+export function ActivityStepDetail({
+  step,
+  onOpenFile,
+}: {
+  step: ActivityStep;
+  onOpenFile?: (path: string) => void;
+}) {
+  const merge = useCn();
+  const command =
+    step.command ?? (step.type === "bash" ? step.detail : undefined);
+  const transcript =
+    command || step.output
+      ? [command ? `$ ${command}` : null, step.output?.text ?? null]
+          .filter((part): part is string => Boolean(part))
+          .join("\n\n")
+      : "";
+
+  // The transcript query strips output/edits/preview; until the full payload
+  // lands there is genuinely nothing to show but the command that produced it.
+  const awaitingDetail =
+    step.hasHiddenDetail === true &&
+    !step.output &&
+    !step.edits?.length &&
+    !step.contentPreview;
+
+  return (
+    <div
+      className={merge("space-y-2 text-xs", step.isError && "text-destructive")}
+    >
+      {awaitingDetail ? (
+        <p className="text-muted-foreground">Loading output...</p>
+      ) : null}
+      {(step.output?.exitCode !== undefined || step.output?.truncated) && (
+        <div className="flex flex-wrap items-center gap-1.5">
+          {step.output.exitCode !== undefined ? (
+            <Badge
+              variant={step.output.exitCode === 0 ? "secondary" : "destructive"}
+            >
+              Exit code {step.output.exitCode}
+            </Badge>
+          ) : null}
+          {step.output.truncated ? (
+            <Badge variant="outline">Truncated</Badge>
+          ) : null}
+        </div>
+      )}
+
+      {transcript ? (
+        <CodeBlock code={transcript} language="shell" plain className="text-xs">
+          <CodeBlockCopyButton className="absolute right-2 top-2" />
+          <pre className="overflow-x-auto p-3 text-xs">
+            <code>{transcript}</code>
+          </pre>
+        </CodeBlock>
+      ) : null}
+
+      {step.edits && step.edits.length > 0 ? (
+        <div className="space-y-2">
+          {step.edits.map((edit, index) => (
+            <div
+              key={index}
+              className="overflow-hidden rounded-md border border-border"
+            >
+              <pre className="overflow-x-auto bg-destructive/10 p-2 text-xs text-destructive whitespace-pre-wrap">
+                {edit.oldText}
+              </pre>
+              <pre className="overflow-x-auto bg-emerald-500/10 p-2 text-xs text-emerald-700 dark:text-emerald-300 whitespace-pre-wrap">
+                {edit.newText}
+              </pre>
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      {step.files && step.files.length > 0 ? (
+        <div className="flex flex-wrap gap-1.5">
+          {step.files.map((filePath) => (
+            <FileChip
+              key={filePath}
+              name={basename(filePath)}
+              path={filePath}
+              onOpenFile={onOpenFile}
+            />
+          ))}
+        </div>
+      ) : null}
+
+      {step.contentPreview ? (
+        <CodeBlock code={step.contentPreview} language="text" plain className="text-xs">
+          <CodeBlockCopyButton className="absolute right-2 top-2" />
+          <pre className="overflow-x-auto p-3 text-xs">
+            <code>{step.contentPreview}</code>
+          </pre>
+        </CodeBlock>
+      ) : null}
+    </div>
+  );
+}