@vvedantb/ui 0.17.1 → 0.18.1

package/src/ai-elements/activity-question.tsx

@@ -0,0 +1,159 @@
+import type { ReactNode } from "react";
+import {
+  IconCheck,
+  IconMessageQuestion,
+  IconPencil,
+} from "@tabler/icons-react";
+
+import { Badge } from "../ui/badge";
+import { useCn, useUiConfig } from "../ui/ui-config";
+import { freeTextAnswer, selectedLabels } from "./activity-question-utils";
+import type { ActivityQuestion } from "./activity-shared";
+
+/**
+ * `UiConfig.ActivityQuestionCard`: `classes.selectedOption` replaces the fill
+ * of the picked option row (default `bg-surface-tertiary`).
+ */
+export interface ActivityQuestionCardConfig {
+  classes?: { selectedOption?: string };
+}
+
+const OPTION_LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+const CHIP_CLASS =
+  "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-md text-3xs font-bold tracking-wide";
+
+function OptionRow({
+  chip,
+  label,
+  description,
+  isSelected,
+}: {
+  chip: ReactNode;
+  label: string;
+  description?: string;
+  isSelected: boolean;
+}) {
+  const merge = useCn();
+  const selectedClass =
+    useUiConfig("ActivityQuestionCard")?.classes?.selectedOption ?? "bg-surface-tertiary";
+  return (
+    <div
+      className={merge(
+        "flex items-start gap-2 rounded-md px-2 py-1.5",
+        isSelected ? selectedClass : undefined,
+      )}
+    >
+      <span
+        className={merge(
+          CHIP_CLASS,
+          isSelected
+            ? "bg-primary text-primary-foreground"
+            : "bg-secondary text-muted-foreground",
+        )}
+      >
+        {chip}
+      </span>
+      <div className="min-w-0 flex-1">
+        <span
+          className={merge(
+            "text-sm leading-snug",
+            isSelected
+              ? "font-medium text-foreground"
+              : "text-muted-foreground",
+          )}
+        >
+          {label}
+        </span>
+        {description ? (
+          <p className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
+            {description}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Read-only record of an AskUserQuestion prompt and the answer given. The live
+ * prompt is `MultipleChoiceQuestion` in the composer dock; this is the history
+ * left behind in the transcript once the question is answered.
+ */
+export function ActivityQuestionCard({
+  questions,
+  answers,
+}: {
+  questions: ActivityQuestion[];
+  answers?: Record<string, string>;
+}) {
+  if (questions.length === 0) return null;
+
+  return (
+    <div className="rounded-surface bg-card p-3 space-y-3">
+      <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+        <IconMessageQuestion size={14} />
+        {questions.length > 1 ? "Questions" : "Question"}
+      </div>
+      {questions.map((question, questionIndex) => {
+        const answer = answers?.[question.question];
+        const hasAnswer = answer !== undefined && answer.trim().length > 0;
+        const chosen = selectedLabels(answer, question);
+        const freeText = freeTextAnswer(answer, chosen);
+        return (
+          <div
+            key={`${question.question}-${questionIndex}`}
+            className="space-y-1.5"
+          >
+            <div className="flex items-start justify-between gap-2">
+              <p className="text-sm font-medium text-foreground">
+                {question.question}
+              </p>
+              {question.header ? (
+                <Badge
+                  variant="secondary"
+                  className="shrink-0 text-3xs font-semibold"
+                >
+                  {question.header}
+                </Badge>
+              ) : null}
+            </div>
+            <div className="space-y-0.5">
+              {question.options.map((option, optionIndex) => {
+                const isSelected = chosen.includes(option.label);
+                return (
+                  <OptionRow
+                    key={`${option.label}-${optionIndex}`}
+                    chip={
+                      isSelected ? (
+                        <IconCheck size={12} strokeWidth={3} />
+                      ) : (
+                        (OPTION_LETTERS[optionIndex] ?? String(optionIndex + 1))
+                      )
+                    }
+                    label={option.label}
+                    description={option.description}
+                    isSelected={isSelected}
+                  />
+                );
+              })}
+              {freeText ? (
+                <OptionRow
+                  chip={<IconPencil size={12} strokeWidth={3} />}
+                  label="Other"
+                  description={freeText}
+                  isSelected
+                />
+              ) : null}
+            </div>
+            {hasAnswer ? null : (
+              <p className="text-xs text-muted-foreground">
+                Answered in the next message
+              </p>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/ai-elements/activity-shared.tsx

@@ -0,0 +1,459 @@
+"use client";
+
+import type { ComponentType } from "react";
+import {
+  IconFileSearch,
+  IconPencil,
+  IconFilePlus,
+  IconTerminal2,
+  IconFolderSearch,
+  IconFileText,
+  IconWorld,
+  IconSearch,
+  IconSitemap,
+  IconBook2,
+  IconTool,
+  IconMessage,
+  IconListCheck,
+  IconInfoCircle,
+  IconAnchor,
+  IconSteeringWheel,
+  IconBrain,
+} from "@tabler/icons-react";
+import { Spinner } from "../ui/spinner";
+import { useCn, useUiConfig } from "../ui/ui-config";
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+import { quantizedSnapshot, subscribeQuantized } from "../utils/sharedClock";
+
+/** Props the activity timeline passes to its Markdown renderer. */
+export interface ActivityMarkdownProps {
+  className?: string;
+  /** `streaming` while the text is still arriving. */
+  mode?: "static" | "streaming";
+  children: string;
+}
+
+/**
+ * `UiConfig.ActivityTasks`: defaults for the agent activity timeline
+ * (`ActivityTasks`, `ActivityThinkingIcon`).
+ */
+export interface ActivityTasksConfig {
+  /** Agent name in the streaming header ("<name> is thinking..."). Default "Agent"; the `name` prop wins. */
+  name?: string;
+  /** Renders reasoning and mid-turn reply text. Default: `Streamdown`. */
+  markdown?: ComponentType<ActivityMarkdownProps>;
+  /**
+   * An image for `ActivityThinkingIcon` (for example the app's logo mark),
+   * shown 16px and round. Without it the icon is the brain glyph.
+   */
+  thinkingIcon?: { src: string; alt: string };
+}
+
+/** One item in a todo checklist step (type "todos"). */
+export interface ActivityTodoItem {
+  content: string;
+  status: "pending" | "in_progress" | "completed";
+}
+
+export interface ActivityStepOutput {
+  text: string;
+  exitCode?: number;
+  truncated?: boolean;
+}
+
+export interface ActivityStepEdit {
+  oldText: string;
+  newText: string;
+}
+
+/** One choice offered by an AskUserQuestion prompt. */
+export interface ActivityQuestionOption {
+  label: string;
+  description?: string;
+}
+
+/** One question of an AskUserQuestion prompt, with the choices shown. */
+export interface ActivityQuestion {
+  question: string;
+  header?: string;
+  multiSelect?: boolean;
+  options: ActivityQuestionOption[];
+}
+
+export interface ActivityStep {
+  type:
+    | "read"
+    | "edit"
+    | "write"
+    | "bash"
+    | "search_files"
+    | "search_code"
+    | "web_fetch"
+    | "web_search"
+    | "subtask"
+    | "notebook"
+    | "thinking"
+    | "reasoning"
+    | "response"
+    | "question"
+    | "todos"
+    | "tool"
+    | "notice"
+    | "hook"
+    | "status"
+    /** A queued user message the agent took into this live turn (Steer). */
+    | "steer";
+  label: string;
+  detail?: string;
+  /** Full, unshortened path for file-type steps. Powers the chat File Viewer. */
+  path?: string;
+  /** `pending`: a planned step that has not started (sandbox startup stages). */
+  status: "complete" | "active" | "pending";
+  /** The tool_use id that produced this step (Claude only). */
+  toolUseId?: string;
+  /** Parent `Agent` tool_use id — set on steps that ran inside a subagent. */
+  parentToolUseId?: string;
+  /** Todo checklist snapshot (type "todos" only). */
+  todos?: ActivityTodoItem[];
+  /** Bash command (fuller than detail, capped). */
+  command?: string;
+  /** Tool result transcript (tail-capped). */
+  output?: ActivityStepOutput;
+  /** Edit before/after snippets. */
+  edits?: ActivityStepEdit[];
+  /** Codex file_change paths. */
+  files?: string[];
+  /** Write tool content head preview. */
+  contentPreview?: string;
+  /** True when the tool failed or exited non-zero. */
+  isError?: boolean;
+  /** Wall time from push → complete (ms). */
+  durationMs?: number;
+  /** AskUserQuestion prompt (type "question" only): the questions and options shown to the user. */
+  questions?: ActivityQuestion[];
+  /** AskUserQuestion answers keyed by question text. Absent when the turn ended without a structured answer. */
+  answers?: Record<string, string>;
+  /**
+   * The transcript query stripped this step's expanded-only fields (`output`,
+   * `edits`, `contentPreview`) to keep the chat subscription small. The row
+   * still opens; the body fills in once the full payload is fetched.
+   */
+  hasHiddenDetail?: boolean;
+}
+
+/** True when the step has expandable rich detail to show. */
+export function activityStepHasRichDetail(step: ActivityStep): boolean {
+  return Boolean(
+    step.command ||
+    step.output ||
+    (step.edits && step.edits.length > 0) ||
+    (step.files && step.files.length > 0) ||
+    step.contentPreview ||
+    step.hasHiddenDetail,
+  );
+}
+
+/** Glyph for thinking steps: the app's mark from `UiConfig.ActivityTasks.thinkingIcon`, or a brain. */
+export function ActivityThinkingIcon({ className }: { className?: string }) {
+  const image = useUiConfig("ActivityTasks")?.thinkingIcon;
+  const merge = useCn();
+  if (!image) return <IconBrain aria-hidden className={className} />;
+  return (
+    <img
+      src={image.src}
+      alt={image.alt}
+      width={16}
+      height={16}
+      className={merge("rounded-full", className)}
+    />
+  );
+}
+
+/** The `status` step glyph: the `circle` {@link Spinner}. */
+function ActivityStatusSpinner() {
+  return <Spinner variant="circle" />;
+}
+
+/** Glyph and fallback label per step type. */
+export const activityStepConfig = {
+  read: { icon: IconFileSearch, defaultLabel: "Read file" },
+  edit: { icon: IconPencil, defaultLabel: "Edited file" },
+  write: { icon: IconFilePlus, defaultLabel: "Created file" },
+  bash: { icon: IconTerminal2, defaultLabel: "Ran command" },
+  search_files: { icon: IconFolderSearch, defaultLabel: "Found files" },
+  search_code: { icon: IconFileText, defaultLabel: "Searched code" },
+  web_fetch: { icon: IconWorld, defaultLabel: "Fetched URL" },
+  web_search: { icon: IconSearch, defaultLabel: "Web search" },
+  subtask: { icon: IconSitemap, defaultLabel: "Ran agent" },
+  notebook: { icon: IconBook2, defaultLabel: "Edited notebook" },
+  thinking: { icon: ActivityThinkingIcon, defaultLabel: "Thinking..." },
+  reasoning: { icon: ActivityThinkingIcon, defaultLabel: "Thinking..." },
+  response: { icon: IconMessage, defaultLabel: "Response" },
+  question: { icon: IconMessage, defaultLabel: "Asked a question" },
+  todos: { icon: IconListCheck, defaultLabel: "Task list" },
+  tool: { icon: IconTool, defaultLabel: "Used tool" },
+  notice: { icon: IconInfoCircle, defaultLabel: "Notice" },
+  hook: { icon: IconAnchor, defaultLabel: "Hook" },
+  status: { icon: ActivityStatusSpinner, defaultLabel: "Status" },
+  steer: { icon: IconSteeringWheel, defaultLabel: "Steered" },
+};
+
+const SPINNER_VERBS = [
+  "Accomplishing",
+  "Actioning",
+  "Actualizing",
+  "Architecting",
+  "Baking",
+  "Beaming",
+  "Beboppin'",
+  "Befuddling",
+  "Billowing",
+  "Blanching",
+  "Bloviating",
+  "Boogieing",
+  "Boondoggling",
+  "Booping",
+  "Bootstrapping",
+  "Brewing",
+  "Bunning",
+  "Burrowing",
+  "Calculating",
+  "Canoodling",
+  "Caramelizing",
+  "Cascading",
+  "Catapulting",
+  "Cerebrating",
+  "Channeling",
+  "Channelling",
+  "Choreographing",
+  "Churning",
+  "Clauding",
+  "Coalescing",
+  "Cogitating",
+  "Combobulating",
+  "Composing",
+  "Computing",
+  "Concocting",
+  "Considering",
+  "Contemplating",
+  "Cooking",
+  "Crafting",
+  "Creating",
+  "Crunching",
+  "Crystallizing",
+  "Cultivating",
+  "Deciphering",
+  "Deliberating",
+  "Determining",
+  "Dilly-dallying",
+  "Discombobulating",
+  "Doing",
+  "Doodling",
+  "Drizzling",
+  "Ebbing",
+  "Effecting",
+  "Elucidating",
+  "Embellishing",
+  "Enchanting",
+  "Envisioning",
+  "Evaporating",
+  "Fermenting",
+  "Fiddle-faddling",
+  "Finagling",
+  "Flambéing",
+  "Flibbertigibbeting",
+  "Flowing",
+  "Flummoxing",
+  "Fluttering",
+  "Forging",
+  "Forming",
+  "Frolicking",
+  "Frosting",
+  "Gallivanting",
+  "Galloping",
+  "Garnishing",
+  "Generating",
+  "Gesticulating",
+  "Germinating",
+  "Gitifying",
+  "Grooving",
+  "Gusting",
+  "Harmonizing",
+  "Hashing",
+  "Hatching",
+  "Herding",
+  "Honking",
+  "Hullaballooing",
+  "Hyperspacing",
+  "Ideating",
+  "Imagining",
+  "Improvising",
+  "Incubating",
+  "Inferring",
+  "Infusing",
+  "Ionizing",
+  "Jitterbugging",
+  "Julienning",
+  "Kneading",
+  "Leavening",
+  "Levitating",
+  "Lollygagging",
+  "Manifesting",
+  "Marinating",
+  "Meandering",
+  "Metamorphosing",
+  "Misting",
+  "Moonwalking",
+  "Moseying",
+  "Mulling",
+  "Mustering",
+  "Musing",
+  "Nebulizing",
+  "Nesting",
+  "Newspapering",
+  "Noodling",
+  "Nucleating",
+  "Orbiting",
+  "Orchestrating",
+  "Osmosing",
+  "Perambulating",
+  "Percolating",
+  "Perusing",
+  "Philosophising",
+  "Photosynthesizing",
+  "Pollinating",
+  "Pondering",
+  "Pontificating",
+  "Pouncing",
+  "Precipitating",
+  "Prestidigitating",
+  "Processing",
+  "Proofing",
+  "Propagating",
+  "Puttering",
+  "Puzzling",
+  "Quantumizing",
+  "Razzle-dazzling",
+  "Razzmatazzing",
+  "Recombobulating",
+  "Reticulating",
+  "Roosting",
+  "Ruminating",
+  "Sautéing",
+  "Scampering",
+  "Schlepping",
+  "Scurrying",
+  "Seasoning",
+  "Shenaniganing",
+  "Shimmying",
+  "Simmering",
+  "Skedaddling",
+  "Sketching",
+  "Slithering",
+  "Smooshing",
+  "Sock-hopping",
+  "Spelunking",
+  "Spinning",
+  "Sprouting",
+  "Stewing",
+  "Sublimating",
+  "Swirling",
+  "Swooping",
+  "Symbioting",
+  "Synthesizing",
+  "Tempering",
+  "Thinking",
+  "Thundering",
+  "Tinkering",
+  "Tomfoolering",
+  "Topsy-turvying",
+  "Transfiguring",
+  "Transmuting",
+  "Twisting",
+  "Undulating",
+  "Unfurling",
+  "Unravelling",
+  "Vibing",
+  "Waddling",
+  "Wandering",
+  "Warping",
+  "Whatchamacalliting",
+  "Whirlpooling",
+  "Whirring",
+  "Whisking",
+  "Wibbling",
+  "Working",
+  "Wrangling",
+  "Zesting",
+  "Zigzagging",
+] as const;
+
+export function getRandomActivityVerb(): string {
+  return SPINNER_VERBS[Math.floor(Math.random() * SPINNER_VERBS.length)] ?? "Working";
+}
+
+export function useActivitySpinnerVerb(active: boolean): string {
+  const [verb, setVerb] = useState(getRandomActivityVerb);
+  useEffect(() => {
+    if (!active) return;
+    let id: ReturnType<typeof setInterval> | undefined;
+    const start = () => {
+      if (id !== undefined) return;
+      id = setInterval(() => {
+        setVerb(getRandomActivityVerb());
+      }, 3000);
+    };
+    const stop = () => {
+      if (id === undefined) return;
+      clearInterval(id);
+      id = undefined;
+    };
+    const onVisibility = () => {
+      if (
+        typeof document !== "undefined" &&
+        document.visibilityState === "hidden"
+      ) {
+        stop();
+        return;
+      }
+      start();
+    };
+    onVisibility();
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", onVisibility);
+    }
+    return () => {
+      stop();
+      if (typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", onVisibility);
+      }
+    };
+  }, [active]);
+  return verb;
+}
+
+const SECOND_MS = 1000;
+const noopSubscribe = () => () => {};
+
+export function useActivityElapsedSeconds(
+  startedAt: number | undefined,
+  active: boolean,
+) {
+  const tick = useSyncExternalStore(
+    active && startedAt
+      ? (onChange) => subscribeQuantized(SECOND_MS, onChange)
+      : noopSubscribe,
+    () => quantizedSnapshot(SECOND_MS),
+    () => quantizedSnapshot(SECOND_MS),
+  );
+  if (!active || !startedAt) return 0;
+  return Math.max(0, Math.floor((tick - startedAt) / 1000));
+}
+
+export function formatActivityElapsed(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return s > 0 ? `${m}m ${s}s` : `${m}m`;
+}