@springbrand/message-panel 0.1.3-alpha.33 → 0.1.3-alpha.36

package/cloud-os/chat/surfaces.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../internal/cn";
+
+export const paper = "bg-background border border-border/60 dark:bg-popover";
+
+export const field = "bg-foreground/[0.04] dark:bg-foreground/[0.06]";
+
+export const ghostButton =
+  "flex items-center justify-center rounded-full text-foreground/45 outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]";
+
+export const labelSwap =
+  "col-start-1 row-start-1 flex w-max items-center gap-1.5 leading-none transition-[opacity,filter] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none";
+
+export const labelSwapIn = "opacity-100 blur-none";
+
+export const labelSwapOut =
+  "pointer-events-none select-none opacity-0 blur-[2px]";
+
+export const collapsePanel =
+  "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none";
+
+export const mono = "font-mono text-[11px] tracking-tight";
+
+export const codeScroll = "max-h-48 overflow-auto";
+
+export const codeSurface = "w-max min-w-full";
+
+export function ShimmerLabel({
+  active = true,
+  className,
+  ...props
+}: ComponentProps<"span"> & { active?: boolean }) {
+  return (
+    <span
+      className={cn(active && "shimmer motion-reduce:animate-none", className)}
+      {...props}
+    />
+  );
+}
+
+export function SwapLabel({
+  active,
+  children,
+  className,
+}: {
+  active: 0 | 1;
+  children: [React.ReactNode, React.ReactNode];
+  className?: string;
+}) {
+  const layers = [useRef<HTMLSpanElement>(null), useRef<HTMLSpanElement>(null)];
+  const [width, setWidth] = useState<number | null>(null);
+
+  useLayoutEffect(() => {
+    const target = layers[active]?.current;
+    if (!target) return undefined;
+    const measure = () =>
+      setWidth(Math.ceil(target.getBoundingClientRect().width));
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [active]);
+
+  return (
+    <span
+      style={width === null ? undefined : { width }}
+      className={cn(
+        "grid overflow-x-clip transition-[width] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
+        className,
+      )}
+    >
+      {children.map((layer, index) => (
+        <span
+          key={index}
+          ref={layers[index]}
+          aria-hidden={active !== index}
+          className={cn(
+            labelSwap,
+            active === index ? labelSwapIn : labelSwapOut,
+          )}
+        >
+          {layer}
+        </span>
+      ))}
+    </span>
+  );
+}

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

@@ -0,0 +1,94 @@
+"use client";
+
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../primitives/collapsible";
+import { cn } from "../internal/cn";
+import {
+  collapsePanel,
+  field,
+  mono,
+  ShimmerLabel,
+  SwapLabel,
+} from "./surfaces";
+
+export interface ToolCallProps {
+  label: string;
+  activeLabel: string;
+  query: string;
+  result: string;
+  running: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function ToolCall({
+  label,
+  activeLabel,
+  query,
+  result,
+  running,
+  open,
+  onOpenChange,
+  className,
+  children,
+}: ToolCallProps) {
+  return (
+    <Collapsible
+      data-slot="tool-call"
+      open={open}
+      onOpenChange={onOpenChange}
+      className={cn("w-full max-w-sm", className)}
+    >
+      <CollapsibleTrigger className="group/trigger text-foreground/55 hover:text-foreground/90 flex items-center gap-2 rounded-md py-1 text-[13.5px] transition-colors outline-none">
+        <ChevronRightIcon className="size-3.5 shrink-0 opacity-60 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-open/trigger:rotate-90 group-data-panel-open/trigger:rotate-90 motion-reduce:transition-none" />
+        <SwapLabel active={running ? 0 : 1} className="text-start">
+          <ShimmerLabel
+            active={running}
+            className="relative inline-block leading-none"
+          >
+            {activeLabel}
+          </ShimmerLabel>
+          <>{label}</>
+        </SwapLabel>
+        {query && (
+          <span
+            className={cn(
+              mono,
+              "bg-foreground/[0.06] text-foreground/70 rounded-md px-1.5 py-0.5",
+            )}
+          >
+            {query}
+          </span>
+        )}
+        <span className="ms-auto flex w-4 items-center justify-end">
+          {!running && (
+            <CheckIcon className="fade-in zoom-in-90 animate-in size-3.5 text-emerald-500 duration-200" />
+          )}
+        </span>
+      </CollapsibleTrigger>
+      <CollapsibleContent className={cn(collapsePanel, "outline-none")}>
+        {children ? (
+          <div className="mt-2">{children}</div>
+        ) : (
+          <div className={cn(field, "mt-2 overflow-hidden rounded-2xl text-xs")}>
+            <div className="px-3.5 py-2.5">
+              <p className={cn(mono, "text-foreground/35 mb-1")}>Result</p>
+              <p
+                className="text-foreground/90 overflow-auto leading-4"
+                style={{ maxHeight: "5rem" }}
+              >
+                {result}
+              </p>
+            </div>
+          </div>
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/cloud-os/chat/tool-presentation.ts

@@ -213,7 +213,7 @@ export function canonicalToolKind(name: string): CloudOsToolKind {
     return "web-fetch";
   }
   if (
-    ["javascript", "js_exec", "node_repl", "execute_javascript", "execute_code"].includes(
+    ["javascript", "js_exec", "node_repl", "execute", "execute_javascript", "execute_code"].includes(
       normalized,
     )
   ) {
@@ -329,16 +329,8 @@ export function getToolCallSummary(call: CloudOsToolCall): {
         target: url ? hostnameOf(url) : undefined,
       };
     }
-    case "javascript": {
-      const firstLine = stringField(input, "code")
-        .split("\n")
-        .map((line) => line.trim())
-        .find((line) => line.length > 0);
-      return {
-        verb: running ? "Running code" : "Ran code",
-        target: firstLine ? truncate(firstLine, 60) : undefined,
-      };
-    }
+    case "javascript":
+      return { verb: running ? "Running code" : "Ran code" };
     case "tasks":
       return { verb: running ? "Updating plan" : "Updated plan" };
     case "agent": {