@aphrody/m3-ai 3.3.2 → 3.3.4

package/src/GoogleSpotlightBar.tsx

@@ -0,0 +1,165 @@
+// SPDX-License-Identifier: Apache-2.0
+// Benchmark: assets/ui/google-desktop-spotlight-bar.png (manifest item 1)
+// Dimensions: ~1266x450px, border-radius 32dp (BRAND_CORNER_PROMPT_BAR_PX), Alt + Space capsule
+
+"use client";
+
+import { CircleButton, Icon } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+import { type ReactNode, useState } from "react";
+
+export interface GoogleSpotlightBarProps {
+  /** Placeholder text */
+  placeholder?: string;
+  /** Active query draft */
+  query?: string;
+  /** On change callback */
+  onQueryChange?: (val: string) => void;
+  /** Triggered on submit */
+  onSubmit?: (query: string) => void;
+  /** File/attachment action handler */
+  onAttach?: () => void;
+  /** Screen capture / share window handler */
+  onScreenCapture?: () => void;
+  /** Google Lens multimodal query handler */
+  onGoogleLens?: () => void;
+  /** User avatar element or image URL */
+  avatar?: ReactNode;
+  /** Additional container classes */
+  className?: string;
+}
+
+/**
+ * Floating Spotlight Assistant Bar & Search Capsule (Alt + Space).
+ * Benchmark parity: `google-desktop-spotlight-bar.png` (manifest item 1).
+ * Features:
+ * - Floating translucent frameless capsule with 32dp corner radius (--gemini-corner-prompt-bar).
+ * - Soft desktop elevation shadow.
+ * - Global shortcut pill indicator ('Alt + Space').
+ * - Multimodal action buttons (+ for attach, screen capture, Google Lens).
+ */
+export function GoogleSpotlightBar({
+  placeholder = "Ask anything or start typing...",
+  query: controlledQuery,
+  onQueryChange,
+  onSubmit,
+  onAttach,
+  onScreenCapture,
+  onGoogleLens,
+  avatar,
+  className,
+}: GoogleSpotlightBarProps) {
+  const [internalQuery, setInternalQuery] = useState("");
+  const query = controlledQuery !== undefined ? controlledQuery : internalQuery;
+
+  const handleChange = (val: string) => {
+    if (controlledQuery === undefined) {
+      setInternalQuery(val);
+    }
+    onQueryChange?.(val);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && query.trim().length > 0) {
+      e.preventDefault();
+      onSubmit?.(query);
+    }
+  };
+
+  return (
+    <search
+      aria-label="Google Spotlight Assistant"
+      className={clsx(
+        "google-spotlight-capsule relative mx-auto flex w-full max-w-[840px] items-center gap-3",
+        "rounded-[var(--gemini-corner-prompt-bar,32px)] bg-surface-container-high/90 px-5 py-3.5 backdrop-blur-xl",
+        "border border-outline-variant/30 text-on-surface shadow-md3-3 transition-all duration-200",
+        "focus-within:border-primary/50 focus-within:bg-surface-container-highest/95 focus-within:shadow-md3-4",
+        className,
+      )}
+    >
+      {/* Google Colorful G Logo */}
+      <div className="flex h-9 w-9 shrink-0 items-center justify-center">
+        <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+          <path
+            fill="#4285F4"
+            d="M23.745 12.27c0-.7-.06-1.4-.19-2.07H12v4.51h6.6c-.29 1.52-1.14 2.8-2.4 3.64v3.03h3.88c2.27-2.09 3.665-5.17 3.665-9.11z"
+          />
+          <path
+            fill="#34A853"
+            d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.88-3.03c-1.08.72-2.45 1.16-4.05 1.16-3.12 0-5.77-2.1-6.72-4.93H1.25v3.13C3.28 21.43 7.33 24 12 24z"
+          />
+          <path
+            fill="#FBBC05"
+            d="M5.28 14.29c-.25-.72-.38-1.49-.38-2.29s.14-1.57.38-2.29V6.57H1.25C.45 8.16 0 9.98 0 12s.45 3.84 1.25 5.43l4.03-3.14z"
+          />
+          <path
+            fill="#EA4335"
+            d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.33 0 3.28 2.57 1.25 6.57l4.03 3.14c.95-2.83 3.6-4.96 6.72-4.96z"
+          />
+        </svg>
+      </div>
+
+      {/* Main multimodal text input */}
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => handleChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        aria-label={placeholder}
+        className="block flex-1 border-0 bg-transparent px-1 text-body-large text-on-surface caret-primary outline-none placeholder:text-on-surface-variant focus:outline-none focus:ring-0"
+      />
+
+      {/* Multimodal Actions (Attach, Screen, Lens) */}
+      <div className="flex shrink-0 items-center gap-1.5">
+        {onAttach && (
+          <CircleButton
+            variant="standard"
+            size="sm"
+            onClick={onAttach}
+            aria-label="Add attachments"
+            title="Attach file"
+          >
+            <Icon name="add" size={20} />
+          </CircleButton>
+        )}
+
+        {onScreenCapture && (
+          <CircleButton
+            variant="standard"
+            size="sm"
+            onClick={onScreenCapture}
+            aria-label="Capture screen"
+            title="Share or capture screen"
+          >
+            <Icon name="screenshot" size={20} />
+          </CircleButton>
+        )}
+
+        {onGoogleLens && (
+          <CircleButton
+            variant="standard"
+            size="sm"
+            onClick={onGoogleLens}
+            aria-label="Google Lens"
+            title="Search with Google Lens"
+            className="hover:text-primary"
+          >
+            <Icon name="center_focus_strong" size={20} />
+          </CircleButton>
+        )}
+
+        {/* Global Shortcut Pill: Alt + Space */}
+        <div
+          aria-hidden="true"
+          className="ml-1 hidden select-none items-center rounded-full bg-surface-container px-2.5 py-1 text-label-small font-medium text-on-surface-variant sm:flex"
+        >
+          Alt + Space
+        </div>
+
+        {/* User avatar if provided */}
+        {avatar && <div className="ml-1 shrink-0">{avatar}</div>}
+      </div>
+    </search>
+  );
+}

package/src/InlineBranchCard.tsx

@@ -0,0 +1,97 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/InlineBranchCard.tsx), MIT, rebuilt on Material Design 3.
+
+import { useId, useState } from "react";
+import { clsx } from "clsx";
+import { AnimatePresence, motion } from "motion/react";
+import { Icon } from "@aphrody/m3-primitives";
+import { Markdown } from "./Markdown";
+import { CircularIndicator, StatusChip, expandMotion, focusRing } from "./internal";
+
+interface InlineBranchCardProps {
+  description: string;
+  completedAt: string | null;
+  conclusion?: string | null;
+  className?: string;
+  /** Start expanded (uncontrolled). */
+  defaultExpanded?: boolean;
+}
+
+/** A thinking branch as an M3 filled card: header, status chip, expandable conclusion. */
+function InlineBranchCard({
+  description,
+  completedAt,
+  conclusion,
+  className,
+  defaultExpanded = false,
+}: InlineBranchCardProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const isRunning = !completedAt;
+  const contentId = useId();
+  const canExpand = !!conclusion;
+
+  return (
+    <div className={clsx("group flex min-w-0 flex-col items-start", className)}>
+      <div className="min-w-0 max-w-full overflow-hidden rounded-medium bg-surface-container text-on-surface">
+        <button
+          type="button"
+          onClick={() => canExpand && setExpanded((v) => !v)}
+          aria-expanded={canExpand ? expanded : undefined}
+          aria-controls={canExpand ? contentId : undefined}
+          className={clsx(
+            "flex w-full items-start gap-3 rounded-medium px-4 py-3 text-left transition-colors duration-200 ease-standard",
+            canExpand && "hover:bg-on-surface/8 active:bg-on-surface/10",
+            focusRing,
+          )}
+        >
+          <div className="flex size-8 shrink-0 items-center justify-center">
+            {isRunning ? (
+              <CircularIndicator size={20} label="Thinking" />
+            ) : (
+              <div className="flex size-8 items-center justify-center rounded-full bg-primary-container text-on-primary-container">
+                <Icon name="alt_route" size={18} />
+              </div>
+            )}
+          </div>
+          <div className="min-w-0 flex-1 self-center">
+            <div className="flex items-center gap-2">
+              <div className="line-clamp-2 min-w-0 flex-1 text-title-small text-on-surface">
+                {description}
+              </div>
+              <StatusChip tone={isRunning ? "primary" : "success"}>
+                {isRunning ? "thinking" : "done"}
+              </StatusChip>
+            </div>
+          </div>
+          {canExpand && (
+            <Icon
+              name="expand_more"
+              size={20}
+              className={clsx(
+                "mt-1.5 shrink-0 text-on-surface-variant transition-transform duration-300 ease-emphasized",
+                expanded ? "rotate-180" : "",
+              )}
+            />
+          )}
+        </button>
+        <AnimatePresence initial={false}>
+          {expanded && conclusion ? (
+            <motion.div
+              id={contentId}
+              key="conclusion"
+              {...expandMotion}
+              className="overflow-hidden"
+            >
+              <div className="border-t border-outline-variant px-4 py-3">
+                <Markdown content={conclusion} size="small" className="text-on-surface-variant" />
+              </div>
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
+
+export { InlineBranchCard };
+export type { InlineBranchCardProps };

package/src/InlineWorkerCard.tsx

@@ -0,0 +1,182 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/InlineWorkerCard.tsx), MIT, rebuilt on Material Design 3.
+
+import { useId, useMemo, useState } from "react";
+import { clsx } from "clsx";
+import { AnimatePresence, motion } from "motion/react";
+import { Button, Icon } from "@aphrody/m3-primitives";
+import { ToolCall } from "./ToolCall";
+import { Markdown } from "./Markdown";
+import type { TranscriptStep } from "./types";
+import { pairTranscriptSteps } from "./types";
+import { CircularIndicator, StatusChip, type ChipTone, expandMotion, focusRing } from "./internal";
+
+/** Collapse runs of 3+ spaces to 2, preventing Markdown 4-space code blocks. */
+function stripExcessWhitespace(text: string): string {
+  return text.replace(/ {3,}/g, "  ");
+}
+
+interface InlineWorkerCardProps {
+  title: string;
+  status: string;
+  toolCallCount: number;
+  liveStatus?: string | null;
+  transcript: TranscriptStep[];
+  isTranscriptLoading?: boolean;
+  onCopyLogs?: () => void;
+  onCancel?: () => void;
+  className?: string;
+  /** Start expanded (uncontrolled). */
+  defaultExpanded?: boolean;
+}
+
+function statusTone(status: string): ChipTone {
+  switch (status) {
+    case "running":
+      return "primary";
+    case "completed":
+      return "success";
+    case "failed":
+    case "error":
+    case "cancelled":
+      return "error";
+    default:
+      return "neutral";
+  }
+}
+
+/** A worker run as an M3 filled card: header, status chip, expandable transcript. */
+function InlineWorkerCard({
+  title,
+  status,
+  toolCallCount,
+  liveStatus,
+  transcript,
+  isTranscriptLoading,
+  onCopyLogs,
+  onCancel,
+  className,
+  defaultExpanded = false,
+}: InlineWorkerCardProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const contentId = useId();
+
+  const items = useMemo(() => pairTranscriptSteps(transcript), [transcript]);
+
+  const isRunning = status === "running";
+  const isDone = status === "completed";
+  const tone = statusTone(status);
+
+  return (
+    <div className={clsx("group flex min-w-0 flex-col items-start", className)}>
+      <div className="min-w-0 max-w-full overflow-hidden rounded-medium bg-surface-container text-on-surface">
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          aria-expanded={expanded}
+          aria-controls={contentId}
+          className={clsx(
+            "flex w-full items-start gap-3 rounded-medium px-4 py-3 text-left transition-colors duration-200 ease-standard",
+            "hover:bg-on-surface/8 active:bg-on-surface/10",
+            focusRing,
+          )}
+        >
+          <div className="flex size-8 shrink-0 items-center justify-center">
+            {isRunning ? (
+              <CircularIndicator size={20} label="Worker running" />
+            ) : isDone ? (
+              <div className="flex size-8 items-center justify-center rounded-full bg-success-container text-on-success-container">
+                <Icon name="check_circle" size={18} filled />
+              </div>
+            ) : tone === "error" ? (
+              <div className="flex size-8 items-center justify-center rounded-full bg-error-container text-on-error-container">
+                <Icon name="error" size={18} filled />
+              </div>
+            ) : (
+              <div className="flex size-8 items-center justify-center rounded-full bg-surface-container-highest text-on-surface-variant">
+                <Icon name="build" size={18} />
+              </div>
+            )}
+          </div>
+
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2">
+              <div className="line-clamp-2 min-w-0 flex-1 text-title-small text-on-surface">
+                {title}
+              </div>
+              <StatusChip tone={tone}>{status}</StatusChip>
+            </div>
+            <div className="mt-1 flex items-center gap-2 text-body-small text-on-surface-variant">
+              <span>{toolCallCount} tool calls</span>
+              {liveStatus ? <span className="truncate text-outline">{liveStatus}</span> : null}
+            </div>
+          </div>
+
+          <Icon
+            name="expand_more"
+            size={20}
+            className={clsx(
+              "mt-1.5 shrink-0 text-on-surface-variant transition-transform duration-300 ease-emphasized",
+              expanded ? "rotate-180" : "",
+            )}
+          />
+        </button>
+
+        <AnimatePresence initial={false}>
+          {expanded ? (
+            <motion.div
+              id={contentId}
+              key="transcript"
+              {...expandMotion}
+              className="overflow-hidden"
+            >
+              <div className="flex flex-col gap-2 border-t border-outline-variant px-4 py-3">
+                {isTranscriptLoading ? (
+                  <div className="flex items-center gap-2 text-body-small text-on-surface-variant">
+                    <CircularIndicator size={16} label="Loading transcript" />
+                    Loading worker transcript...
+                  </div>
+                ) : items.length > 0 ? (
+                  items.map((item) =>
+                    item.kind === "tool" ? (
+                      <ToolCall key={item.pair.id} pair={item.pair} />
+                    ) : (
+                      <Markdown
+                        key={`text-${item.text}`}
+                        content={stripExcessWhitespace(item.text)}
+                        size="small"
+                        className="text-on-surface-variant"
+                      />
+                    ),
+                  )
+                ) : (
+                  <div className="text-body-small text-on-surface-variant">No tool calls yet.</div>
+                )}
+              </div>
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
+      </div>
+
+      {(onCopyLogs || (onCancel && isRunning)) && (
+        <div className="mt-1 flex gap-1 opacity-0 transition-opacity duration-200 ease-standard group-focus-within:opacity-100 group-hover:opacity-100">
+          {onCopyLogs && (
+            <Button variant="text" size="xs" onClick={onCopyLogs} title="Copy logs">
+              <Icon name="content_copy" size={18} />
+              Copy
+            </Button>
+          )}
+          {onCancel && isRunning && (
+            <Button variant="text" size="xs" onClick={onCancel} title="Cancel">
+              <Icon name="stop" size={18} />
+              Cancel
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { InlineWorkerCard };
+export type { InlineWorkerCardProps };