motion-ui-skill 2.0.0

package/components/agents/streaming-response.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import {
+  Check,
+  ChevronDown,
+  Copy,
+  RotateCcw,
+  ThumbsDown,
+  ThumbsUp,
+} from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
+import {
+  type CitationItem,
+  CitationList,
+  CitationStack,
+} from "@/components/agents/citations";
+import { AgentDisclosure } from "@/components/agents/agent-disclosure";
+import { EASE_OUT, SPRING_PRESS, SPRING_SWAP } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export type StreamingResponseStatus = "streaming" | "complete" | "error";
+export type StreamingResponseFeedback = "up" | "down" | null;
+
+export interface StreamingResponseProps {
+  /** Rendered response content. Pass plain text or the output of a Markdown renderer. */
+  children: ReactNode;
+  status?: StreamingResponseStatus;
+  /** Plain-text value copied by the built-in copy action. */
+  copyText?: string;
+  /** Overrides the built-in clipboard action. */
+  onCopy?: () => void | Promise<void>;
+  onRetry?: () => void;
+  /** Optional sources shown as a compact footer disclosure after streaming. */
+  sources?: CitationItem[];
+  sourcesOpen?: boolean;
+  defaultSourcesOpen?: boolean;
+  onSourcesOpenChange?: (open: boolean) => void;
+  sourceIdPrefix?: string;
+  feedback?: StreamingResponseFeedback;
+  defaultFeedback?: StreamingResponseFeedback;
+  onFeedbackChange?: (feedback: StreamingResponseFeedback) => void;
+  /** Set false when a surrounding conversation log announces streamed text. */
+  announce?: boolean;
+  /** Hides the built-in completion actions without changing response status. */
+  showActions?: boolean;
+  className?: string;
+  contentClassName?: string;
+  actionsClassName?: string;
+}
+
+function ResponseAction({
+  label,
+  active = false,
+  onClick,
+  children,
+}: {
+  label: string;
+  active?: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  const reduce = useReducedMotion() ?? false;
+
+  return (
+    <motion.button
+      type="button"
+      aria-label={label}
+      title={label}
+      aria-pressed={label === "Helpful" || label === "Not helpful" ? active : undefined}
+      onClick={onClick}
+      whileTap={reduce ? undefined : { scale: 0.9 }}
+      transition={SPRING_PRESS}
+      className={cn(
+        "grid size-7 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+        active && "bg-muted text-foreground",
+      )}
+    >
+      {children}
+    </motion.button>
+  );
+}
+
+export function StreamingResponse({
+  children,
+  status = "streaming",
+  copyText,
+  onCopy,
+  onRetry,
+  sources = [],
+  sourcesOpen,
+  defaultSourcesOpen = false,
+  onSourcesOpenChange,
+  sourceIdPrefix,
+  feedback,
+  defaultFeedback = null,
+  onFeedbackChange,
+  announce = true,
+  showActions = true,
+  className,
+  contentClassName,
+  actionsClassName,
+}: StreamingResponseProps) {
+  const reduce = useReducedMotion() ?? false;
+  const baseId = useId();
+  const [copied, setCopied] = useState(false);
+  const [internalFeedback, setInternalFeedback] =
+    useState<StreamingResponseFeedback>(defaultFeedback);
+  const [internalSourcesOpen, setInternalSourcesOpen] =
+    useState(defaultSourcesOpen);
+  const copyTimer = useRef<number | undefined>(undefined);
+  const currentFeedback = feedback ?? internalFeedback;
+  const currentSourcesOpen = sourcesOpen ?? internalSourcesOpen;
+  const streaming = status === "streaming";
+  const complete = status === "complete";
+  const canCopy = Boolean(copyText || onCopy);
+  const hasSources = sources.length > 0;
+  const shouldShowActions =
+    showActions && !streaming && (canCopy || onRetry || complete || hasSources);
+  const sourcesContentId = `${baseId}-sources`;
+  const resolvedSourcePrefix =
+    sourceIdPrefix ?? `response-source-${baseId.replace(/:/g, "")}`;
+
+  useEffect(
+    () => () => {
+      if (copyTimer.current) window.clearTimeout(copyTimer.current);
+    },
+    [],
+  );
+
+  const handleCopy = useCallback(async () => {
+    if (onCopy) await onCopy();
+    else if (copyText) await navigator.clipboard?.writeText(copyText);
+
+    setCopied(true);
+    if (copyTimer.current) window.clearTimeout(copyTimer.current);
+    copyTimer.current = window.setTimeout(() => setCopied(false), 1600);
+  }, [copyText, onCopy]);
+
+  const setFeedback = (next: Exclude<StreamingResponseFeedback, null>) => {
+    const value = currentFeedback === next ? null : next;
+    if (feedback === undefined) setInternalFeedback(value);
+    onFeedbackChange?.(value);
+  };
+
+  const setSourcesOpen = useCallback(
+    (next: boolean) => {
+      if (sourcesOpen === undefined) setInternalSourcesOpen(next);
+      onSourcesOpenChange?.(next);
+    },
+    [onSourcesOpenChange, sourcesOpen],
+  );
+
+  return (
+    <div
+      data-state={status}
+      aria-busy={streaming}
+      className={cn("w-full", className)}
+    >
+      <div
+        aria-live={announce ? "polite" : "off"}
+        className={cn(
+          "text-sm leading-6 text-foreground/90 [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_ol]:my-3 [&_ol]:list-decimal [&_ol]:space-y-1 [&_ol]:pl-5 [&_p+p]:mt-3 [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted/45 [&_pre]:p-3 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_ul]:my-3 [&_ul]:list-disc [&_ul]:space-y-1 [&_ul]:pl-5",
+          contentClassName,
+        )}
+      >
+        {children}
+      </div>
+
+      <AnimatePresence initial={false}>
+        {shouldShowActions ? (
+          <motion.div
+            initial={reduce ? { opacity: 0 } : { opacity: 0, y: 4 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: reduce ? 0.12 : 0.22, ease: EASE_OUT }}
+            className="mt-3"
+          >
+            <div className={cn("flex items-center gap-0.5", actionsClassName)}>
+              {canCopy ? (
+                <ResponseAction
+                  label={copied ? "Copied" : "Copy response"}
+                  onClick={handleCopy}
+                >
+                  {copied ? (
+                    <Check className="size-3.5" />
+                  ) : (
+                    <Copy className="size-3.5" />
+                  )}
+                </ResponseAction>
+              ) : null}
+              {onRetry ? (
+                <ResponseAction label="Retry response" onClick={onRetry}>
+                  <RotateCcw className="size-3.5" />
+                </ResponseAction>
+              ) : null}
+              {complete ? (
+                <>
+                  <ResponseAction
+                    label="Helpful"
+                    active={currentFeedback === "up"}
+                    onClick={() => setFeedback("up")}
+                  >
+                    <ThumbsUp className="size-3.5" />
+                  </ResponseAction>
+                  <ResponseAction
+                    label="Not helpful"
+                    active={currentFeedback === "down"}
+                    onClick={() => setFeedback("down")}
+                  >
+                    <ThumbsDown className="size-3.5" />
+                  </ResponseAction>
+                </>
+              ) : null}
+              {hasSources ? (
+                <button
+                  type="button"
+                  aria-expanded={currentSourcesOpen}
+                  aria-controls={sourcesContentId}
+                  onClick={() => setSourcesOpen(!currentSourcesOpen)}
+                  className="group ml-1 inline-flex min-h-7 items-center gap-2 rounded-md px-1.5 text-xs text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <CitationStack citations={sources} />
+                  <span className="tabular-nums">
+                    {sources.length} {sources.length === 1 ? "source" : "sources"}
+                  </span>
+                  <motion.span
+                    aria-hidden="true"
+                    animate={{ rotate: currentSourcesOpen ? 180 : 0 }}
+                    transition={reduce ? { duration: 0 } : SPRING_SWAP}
+                    className="text-muted-foreground/50 group-hover:text-muted-foreground"
+                  >
+                    <ChevronDown className="size-3" />
+                  </motion.span>
+                </button>
+              ) : null}
+            </div>
+
+            {hasSources ? (
+              <AgentDisclosure
+                id={sourcesContentId}
+                open={currentSourcesOpen}
+              >
+                <CitationList
+                  citations={sources}
+                  idPrefix={resolvedSourcePrefix}
+                  className="mt-2 rounded-xl bg-muted p-2"
+                />
+              </AgentDisclosure>
+            ) : null}
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
+}

package/components/agents/todo-list.tsx

@@ -0,0 +1,387 @@
+"use client";
+
+import { ChevronDown, ListTodo } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { ActionSwapRollText } from "@/components/motion/action-swap-roll";
+import { AgentDisclosure } from "@/components/agents/agent-disclosure";
+import {
+  EASE_OUT,
+  SPRING_LAYOUT,
+  SPRING_SWAP,
+} from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export type TodoItemStatus =
+  | "pending"
+  | "in-progress"
+  | "completed"
+  | "cancelled";
+
+export interface TodoItem {
+  id: string;
+  title: ReactNode;
+  status?: TodoItemStatus;
+  progress?: number;
+  detail?: ReactNode;
+}
+
+export interface TodoListProps {
+  items: TodoItem[];
+  title?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  collapseOnComplete?: boolean;
+  maxHeight?: number;
+  className?: string;
+}
+
+function statusLabel(status: TodoItemStatus) {
+  if (status === "in-progress") return "In progress";
+  if (status === "completed") return "Completed";
+  if (status === "cancelled") return "Cancelled";
+  return "Pending";
+}
+
+function TodoHeaderIcon({ complete }: { complete: boolean }) {
+  const reduce = useReducedMotion() ?? false;
+
+  return (
+    <span
+      aria-hidden="true"
+      className="relative grid size-6 shrink-0 place-items-center"
+    >
+      <AnimatePresence initial={false} mode="popLayout">
+        {complete ? (
+          <motion.svg
+            key="complete"
+            viewBox="0 0 24 24"
+            initial={reduce ? { opacity: 1 } : { opacity: 0, scale: 0.72 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0 }}
+            transition={reduce ? { duration: 0 } : SPRING_SWAP}
+            className="absolute size-5.5 overflow-visible text-emerald-500"
+          >
+            <circle cx="12" cy="12" r="9" fill="currentColor" />
+            <motion.path
+              d="M7.5 12.25 10.5 15.25 16.75 8.75"
+              fill="none"
+              stroke="white"
+              strokeWidth="2.25"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              initial={reduce ? { pathLength: 1 } : { pathLength: 0 }}
+              animate={{ pathLength: 1 }}
+              transition={
+                reduce ? { duration: 0 } : { duration: 0.24, ease: EASE_OUT }
+              }
+            />
+          </motion.svg>
+        ) : (
+          <motion.span
+            key="todo"
+            initial={reduce ? { opacity: 1 } : { opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.72 }}
+            transition={reduce ? { duration: 0 } : SPRING_SWAP}
+            className="absolute grid place-items-center text-muted-foreground"
+          >
+            <ListTodo className="size-4" />
+          </motion.span>
+        )}
+      </AnimatePresence>
+    </span>
+  );
+}
+
+function TodoStatusIcon({
+  status,
+  progress,
+}: {
+  status: TodoItemStatus;
+  progress?: number;
+}) {
+  const reduce = useReducedMotion() ?? false;
+  const normalizedProgress =
+    progress === undefined ? 0.68 : Math.min(100, Math.max(0, progress)) / 100;
+
+  return (
+    <motion.svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      initial={false}
+      className={cn(
+        "mx-0.5 size-5 shrink-0 overflow-visible text-muted-foreground",
+        status === "in-progress" && "text-foreground",
+        status === "cancelled" && "text-rose-600 dark:text-rose-400",
+      )}
+    >
+      <motion.circle
+        cx="12"
+        cy="12"
+        r="9"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeDasharray={status === "pending" ? "2 3" : undefined}
+        strokeLinecap="round"
+        initial={false}
+        animate={{ fillOpacity: status === "completed" ? 0.06 : 0 }}
+        transition={reduce ? { duration: 0 } : { duration: 0.18, ease: EASE_OUT }}
+        className={cn(status === "in-progress" && "opacity-20")}
+      />
+      <motion.circle
+        cx="12"
+        cy="12"
+        r="9"
+        pathLength="1"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        initial={false}
+        animate={{
+          pathLength: status === "in-progress" ? normalizedProgress : 0,
+          opacity: status === "in-progress" ? 1 : 0,
+          rotate:
+            status === "in-progress" && progress === undefined && !reduce
+              ? 360
+              : -90,
+        }}
+        transition={
+          status === "in-progress" && progress === undefined && !reduce
+            ? { rotate: { duration: 1.1, repeat: Infinity, ease: "linear" } }
+            : reduce
+              ? { duration: 0 }
+              : SPRING_LAYOUT
+        }
+        style={{ transformOrigin: "12px 12px" }}
+      />
+      <motion.path
+        d="M7.5 12.25 10.5 15.25 16.75 8.75"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        initial={false}
+        animate={{
+          pathLength: status === "completed" ? 1 : 0,
+          opacity: status === "completed" ? 1 : 0,
+        }}
+        transition={reduce ? { duration: 0 } : { duration: 0.24, ease: EASE_OUT }}
+      />
+      <motion.path
+        d="M8.5 8.5 15.5 15.5M15.5 8.5 8.5 15.5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        initial={false}
+        animate={{
+          pathLength: status === "cancelled" ? 1 : 0,
+          opacity: status === "cancelled" ? 1 : 0,
+        }}
+        transition={reduce ? { duration: 0 } : { duration: 0.2, ease: EASE_OUT }}
+      />
+    </motion.svg>
+  );
+}
+
+export function TodoList({
+  items,
+  title = "To-dos",
+  open,
+  defaultOpen = true,
+  onOpenChange,
+  collapseOnComplete = true,
+  maxHeight = 248,
+  className,
+}: TodoListProps) {
+  const reduce = useReducedMotion() ?? false;
+  const baseId = useId();
+  const triggerId = `${baseId}-trigger`;
+  const contentId = `${baseId}-content`;
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const previousComplete = useRef(false);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const currentOpen = open ?? internalOpen;
+  const completed = items.filter((item) => item.status === "completed").length;
+  const allComplete = items.length > 0 && completed === items.length;
+  const itemCount = items.length;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (open === undefined) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange, open],
+  );
+
+  useEffect(() => {
+    if (previousComplete.current && !allComplete) {
+      setOpen(true);
+    }
+    if (!previousComplete.current && allComplete && collapseOnComplete) {
+      setOpen(false);
+    }
+    previousComplete.current = allComplete;
+  }, [allComplete, collapseOnComplete, setOpen]);
+
+  useLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport || itemCount === 0) return;
+
+    const frame = requestAnimationFrame(() => {
+      if (viewport.scrollHeight <= viewport.clientHeight) return;
+      if (typeof viewport.scrollTo === "function") {
+        viewport.scrollTo({
+          top: viewport.scrollHeight,
+          behavior: reduce ? "auto" : "smooth",
+        });
+      } else {
+        viewport.scrollTop = viewport.scrollHeight;
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [itemCount, reduce]);
+
+  return (
+    <section
+      aria-label="Agent task list"
+      className={cn(
+        "w-full overflow-hidden rounded-2xl border border-border/70",
+        className,
+      )}
+    >
+      <button
+        id={triggerId}
+        type="button"
+        aria-expanded={currentOpen}
+        aria-controls={contentId}
+        onClick={() => setOpen(!currentOpen)}
+        className="group flex h-11 w-full items-center gap-2.5 rounded-2xl px-3.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <TodoHeaderIcon complete={allComplete} />
+        <h3 className="min-w-0 flex-1 truncate text-sm font-medium text-foreground/90">
+          {title}
+        </h3>
+        <span
+          className={cn(
+            "shrink-0 text-xs font-medium tabular-nums text-muted-foreground",
+            allComplete && "text-emerald-600 dark:text-emerald-400",
+          )}
+        >
+          <span className="sr-only">
+            {completed} of {items.length} tasks completed
+          </span>
+          <span aria-hidden="true" className="inline-flex">
+            <ActionSwapRollText value={String(completed)}>
+              {completed}
+            </ActionSwapRollText>
+            <span>/</span>
+            <span>{items.length}</span>
+          </span>
+        </span>
+        <motion.span
+          aria-hidden="true"
+          animate={{ rotate: currentOpen ? 180 : 0 }}
+          transition={reduce ? { duration: 0 } : SPRING_SWAP}
+          className="text-muted-foreground/50 transition-colors group-hover:text-muted-foreground"
+        >
+          <ChevronDown className="size-3.5" />
+        </motion.span>
+      </button>
+
+      <AgentDisclosure
+        id={contentId}
+        role="region"
+        aria-labelledby={triggerId}
+        open={currentOpen}
+      >
+        <div
+          ref={viewportRef}
+          className="scrollbar-hide overflow-y-auto px-2 pb-2"
+          style={{ maxHeight }}
+        >
+          {items.length ? (
+            <ol aria-live="polite" className="space-y-0">
+            <AnimatePresence initial={false} mode="popLayout">
+              {items.map((item) => {
+                const status = item.status ?? "pending";
+                return (
+                  <motion.li
+                    layout="position"
+                    key={item.id}
+                    initial={reduce ? { opacity: 1 } : { opacity: 0, y: 6 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={reduce ? { opacity: 0 } : { opacity: 0, y: -3 }}
+                    transition={
+                      reduce
+                        ? { duration: 0 }
+                        : {
+                            opacity: { duration: 0.18, ease: EASE_OUT },
+                            y: SPRING_LAYOUT,
+                            layout: SPRING_LAYOUT,
+                          }
+                    }
+                    className="flex min-h-9 items-center gap-2.5 rounded-xl px-1.5 py-1"
+                  >
+                    <TodoStatusIcon status={status} progress={item.progress} />
+                    <span className="sr-only">{statusLabel(status)}: </span>
+                    <span
+                      className={cn(
+                        "min-w-0 flex-1 truncate text-sm leading-5",
+                        status === "pending" && "text-muted-foreground/65",
+                        status === "in-progress" && "text-foreground",
+                        status === "completed" && "text-muted-foreground/60",
+                        status === "cancelled" && "text-muted-foreground/55",
+                      )}
+                    >
+                      <span className="relative inline-block max-w-full">
+                        {item.title}
+                        <motion.span
+                          aria-hidden="true"
+                          initial={false}
+                          animate={{
+                            scaleX: status === "completed" ? 1 : 0,
+                            opacity: status === "completed" ? 1 : 0,
+                          }}
+                          transition={
+                            reduce
+                              ? { duration: 0 }
+                              : { duration: 0.28, ease: EASE_OUT, delay: 0.06 }
+                          }
+                          className="absolute inset-x-0 top-1/2 h-px origin-left bg-current"
+                        />
+                      </span>
+                    </span>
+                    {item.detail ? (
+                      <span className="shrink-0 text-sm text-muted-foreground/55">
+                        {item.detail}
+                      </span>
+                    ) : null}
+                  </motion.li>
+                );
+              })}
+            </AnimatePresence>
+            </ol>
+          ) : (
+            <p className="px-1.5 py-2 text-sm text-muted-foreground">
+              No tasks yet
+            </p>
+          )}
+        </div>
+      </AgentDisclosure>
+    </section>
+  );
+}