@aphrody/m3-ai 3.3.1 → 3.3.4

package/src/ChatComposer.tsx

@@ -0,0 +1,239 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/ChatComposer.tsx), MIT, rebuilt on Material Design 3.
+
+"use client";
+
+import { CircleButton, Icon, Popover, SelectPill, usePopover } from "@aphrody/m3-primitives";
+import { m3Durations, m3Easings } from "@aphrody/m3-motion";
+import { clsx } from "clsx";
+import { AnimatePresence, motion } from "motion/react";
+import { type ReactNode } from "react";
+
+import { focusRing } from "./internal";
+import { ModelSelector } from "./ModelSelector";
+import type { ModelOption } from "./types";
+
+export interface ChatComposerProps {
+  /** Current draft text */
+  draft: string;
+  /** Called when draft changes */
+  onDraftChange: (value: string) => void;
+  /** Called when user hits send (Enter or send button) */
+  onSend: () => void;
+  /** Placeholder for the textarea */
+  placeholder?: string;
+  /** Show an optional heading above the composer */
+  heading?: ReactNode;
+  /** Disable the composer — draft can still change, but send/voice are blocked */
+  isSending?: boolean;
+  /** Project selector config — omit to hide */
+  projectSelector?: {
+    value: string;
+    options: string[];
+    onChange: (project: string) => void;
+    popover: ReturnType<typeof usePopover>;
+  };
+  /** Model selector config — omit to hide */
+  modelSelector?: {
+    value: string;
+    options: ModelOption[];
+    onChange: (model: string) => void;
+  };
+  /** Voice button handler — omit to hide */
+  onOpenVoice?: () => void;
+  /** Optional content rendered at the far right of the toolbar (before send) */
+  toolbarExtra?: ReactNode;
+  /** Stop handler: while `isSending`, the send button becomes an M3 `stop` icon button. */
+  onStop?: () => void;
+  /** Additional className on the composer container */
+  className?: string;
+}
+
+const iconButtonEnter = {
+  initial: { scale: 0.6, opacity: 0 },
+  animate: {
+    scale: 1,
+    opacity: 1,
+    transition: { duration: m3Durations.short4, ease: m3Easings.emphasizedDecelerate },
+  },
+  exit: {
+    scale: 0.6,
+    opacity: 0,
+    transition: { duration: m3Durations.short3, ease: m3Easings.emphasizedAccelerate },
+  },
+} as const;
+
+/**
+ * Generic chat composer on the M3 search-bar anatomy: a `surface-container-high` container with
+ * the extra-large (28 dp) shape, a `text-body-large` expanding textarea, an optional project
+ * pill, model selector chip, a standard mic icon button and a filled send / stop icon button.
+ */
+export function ChatComposer({
+  draft,
+  onDraftChange,
+  onSend,
+  placeholder = "Ask something...",
+  heading,
+  isSending = false,
+  projectSelector,
+  modelSelector,
+  onOpenVoice,
+  toolbarExtra,
+  onStop,
+  className,
+}: ChatComposerProps) {
+  const canSend = !isSending && draft.trim().length > 0;
+  const showStop = isSending && !!onStop;
+
+  return (
+    <>
+      {heading && (
+        <div className="mb-3 flex items-center gap-2 px-1 text-title-small text-on-surface-variant">
+          <Icon name="auto_awesome" size={18} filled className="text-primary" />
+          {heading}
+        </div>
+      )}
+
+      <div
+        className={clsx(
+          "m3-chat-composer rounded-extra-large bg-surface-container-high px-4 pt-3 pb-2 text-on-surface",
+          "transition-colors duration-200 ease-standard focus-within:bg-surface-container-highest",
+          className,
+        )}
+      >
+        <textarea
+          value={draft}
+          onChange={(event) => onDraftChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              onSend();
+            }
+          }}
+          placeholder={placeholder}
+          aria-label={placeholder}
+          rows={2}
+          className="block w-full resize-none 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"
+        />
+
+        <div className="mt-2 flex items-center justify-between gap-2">
+          {projectSelector ? (
+            <div className="w-[210px]">
+              <Popover.Root
+                open={projectSelector.popover.open}
+                onOpenChange={projectSelector.popover.setOpen}
+              >
+                <Popover.Trigger asChild>
+                  <SelectPill className="w-full" aria-haspopup="listbox">
+                    {projectSelector.value}
+                  </SelectPill>
+                </Popover.Trigger>
+                <Popover.Content
+                  align="start"
+                  sideOffset={8}
+                  className="min-w-[210px] overflow-hidden rounded-extra-small! py-2"
+                >
+                  <div
+                    // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- M3 menu in a popover with icon rows; a native <select>/<datalist> cannot render it.
+                    role="listbox"
+                    aria-label="Projects"
+                  >
+                    {projectSelector.options.map((option) => {
+                      const selected = option === projectSelector.value;
+                      return (
+                        <button
+                          key={option}
+                          type="button"
+                          // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- M3 menu item with a check icon and state layer; a native <option> can only hold text.
+                          role="option"
+                          aria-selected={selected}
+                          onClick={() => {
+                            projectSelector.onChange(option);
+                            projectSelector.popover.setOpen(false);
+                          }}
+                          className={clsx(
+                            "flex h-12 w-full items-center gap-3 px-3 text-left text-label-large",
+                            "transition-colors duration-200 ease-standard",
+                            selected
+                              ? "bg-secondary-container text-on-secondary-container"
+                              : "text-on-surface hover:bg-on-surface/8",
+                            focusRing,
+                            "focus-visible:outline-offset-[-3px]",
+                          )}
+                        >
+                          <span className="min-w-0 flex-1 truncate">{option}</span>
+                          {selected && <Icon name="check" size={20} />}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </Popover.Content>
+              </Popover.Root>
+            </div>
+          ) : (
+            <div />
+          )}
+
+          <motion.div layout className="flex items-center gap-1">
+            {modelSelector && (
+              <div className="w-[180px]">
+                <ModelSelector
+                  models={modelSelector.options}
+                  value={modelSelector.value}
+                  onChange={modelSelector.onChange}
+                  size="md"
+                />
+              </div>
+            )}
+
+            {toolbarExtra}
+
+            {onOpenVoice && (
+              <CircleButton
+                icon="mic"
+                variant="standard"
+                onClick={onOpenVoice}
+                disabled={isSending}
+                aria-label="Open Voice Input"
+              />
+            )}
+
+            <AnimatePresence initial={false} mode="popLayout">
+              {showStop ? (
+                <motion.button
+                  key="stop"
+                  type="button"
+                  {...iconButtonEnter}
+                  onClick={onStop}
+                  aria-label="Stop"
+                  className={clsx(
+                    "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary",
+                    "transition-colors duration-200 ease-standard hover:bg-primary/92 active:bg-primary/90",
+                    focusRing,
+                  )}
+                >
+                  <Icon name="stop" size={24} filled />
+                </motion.button>
+              ) : canSend ? (
+                <motion.button
+                  key="send"
+                  type="button"
+                  {...iconButtonEnter}
+                  onClick={onSend}
+                  aria-label="Send"
+                  className={clsx(
+                    "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary",
+                    "transition-colors duration-200 ease-standard hover:bg-primary/92 active:bg-primary/90",
+                    focusRing,
+                  )}
+                >
+                  <Icon name="arrow_upward" size={24} />
+                </motion.button>
+              ) : null}
+            </AnimatePresence>
+          </motion.div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/GeminiAccountMenu.tsx

@@ -0,0 +1,212 @@
+// SPDX-License-Identifier: Apache-2.0
+// Benchmark: assets/ui/gemini-account-menu.png & gemini-composer-more-uploads.png
+// Anchored account menu and composer actions menu matching Google Gemini Web UI
+
+"use client";
+
+import { Icon, Popover } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+import type { ReactNode } from "react";
+
+export interface MenuItem {
+  id: string;
+  label: string;
+  icon?: string;
+  shortcut?: string;
+  onClick?: () => void;
+  destructive?: boolean;
+  dividerAfter?: boolean;
+}
+
+export interface GeminiAccountMenuProps {
+  /** User name */
+  name: string;
+  /** User email */
+  email: string;
+  /** Avatar image URL or fallback initials */
+  avatar?: ReactNode;
+  /** Menu open state */
+  open: boolean;
+  /** Menu open state change */
+  onOpenChange: (open: boolean) => void;
+  /** Menu items */
+  items?: MenuItem[];
+  /** Trigger element */
+  children: ReactNode;
+  /** Additional container class */
+  className?: string;
+}
+
+const EMPTY_MENU_ITEMS: MenuItem[] = [];
+
+/**
+ * Gemini Sidebar Footer Account Menu.
+ * Benchmark parity: `assets/ui/gemini-account-menu.png` (manifest item 2).
+ * Anchored to the sidebar footer avatar/profile card, displaying Google account
+ * details and navigation links with M3 typography, icons, and keyboard-reachable rows.
+ */
+export function GeminiAccountMenu({
+  name,
+  email,
+  avatar,
+  open,
+  onOpenChange,
+  items = EMPTY_MENU_ITEMS,
+  children,
+  className,
+}: GeminiAccountMenuProps) {
+  return (
+    <Popover.Root open={open} onOpenChange={onOpenChange}>
+      <Popover.Trigger asChild>{children}</Popover.Trigger>
+      <Popover.Content
+        align="start"
+        side="top"
+        sideOffset={8}
+        className={clsx(
+          "gemini-account-menu w-[300px] overflow-hidden rounded-[var(--gemini-corner-card,16px)]",
+          "border border-outline-variant/40 bg-surface-container p-2 text-on-surface shadow-md3-3",
+          className,
+        )}
+      >
+        {/* User Card Header */}
+        <div className="flex items-center gap-3 rounded-small bg-surface-container-high p-3">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-container text-title-medium text-on-primary-container">
+            {avatar ?? name.charAt(0).toUpperCase()}
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="truncate text-body-medium font-medium text-on-surface">{name}</div>
+            <div className="truncate text-body-small text-on-surface-variant">{email}</div>
+          </div>
+        </div>
+
+        {/* Action Items List */}
+        <div className="mt-2 space-y-0.5" role="menu">
+          {items.map((item) => (
+            <div key={item.id}>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  item.onClick?.();
+                  onOpenChange(false);
+                }}
+                className={clsx(
+                  "flex w-full items-center justify-between rounded-small px-3 py-2 text-body-medium transition-colors",
+                  "hover:bg-on-surface/8 active:bg-on-surface/12",
+                  item.destructive
+                    ? "text-error hover:bg-error/8"
+                    : "text-on-surface hover:text-on-surface",
+                )}
+              >
+                <div className="flex items-center gap-3">
+                  {item.icon && (
+                    <Icon
+                      name={item.icon}
+                      size={20}
+                      className={item.destructive ? "text-error" : "text-on-surface-variant"}
+                    />
+                  )}
+                  <span>{item.label}</span>
+                </div>
+                {item.shortcut && (
+                  <span className="text-label-small text-on-surface-variant">{item.shortcut}</span>
+                )}
+              </button>
+              {item.dividerAfter && <div className="my-1 border-t border-outline-variant/30" />}
+            </div>
+          ))}
+        </div>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}
+
+export interface ComposerMoreUploadsMenuProps {
+  /** Menu open state */
+  open: boolean;
+  /** Menu open state change */
+  onOpenChange: (open: boolean) => void;
+  /** Items in upload/add menu */
+  items: MenuItem[];
+  /** Submenu items (e.g., More uploads / Google Drive / Workspace) */
+  submenuItems?: MenuItem[];
+  /** Trigger element */
+  children: ReactNode;
+}
+
+/**
+ * Composer Add & More Uploads Menu.
+ * Benchmark parity: `assets/ui/gemini-composer-more-uploads.png` (manifest item 3).
+ * Anchored to the '+' trigger of the composer, grouping related upload actions
+ * with an optional adjacent secondary submenu.
+ */
+export function ComposerMoreUploadsMenu({
+  open,
+  onOpenChange,
+  items,
+  submenuItems,
+  children,
+}: ComposerMoreUploadsMenuProps) {
+  return (
+    <Popover.Root open={open} onOpenChange={onOpenChange}>
+      <Popover.Trigger asChild>{children}</Popover.Trigger>
+      <Popover.Content
+        align="start"
+        side="top"
+        sideOffset={10}
+        className="gemini-composer-uploads-menu flex gap-2 rounded-[var(--gemini-corner-card,16px)] border border-outline-variant/30 bg-surface-container p-1.5 shadow-md3-3"
+      >
+        {/* Primary Menu */}
+        <div className="w-[220px] space-y-0.5" role="menu">
+          {items.map((item) => (
+            <div key={item.id}>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  item.onClick?.();
+                  onOpenChange(false);
+                }}
+                className="flex w-full items-center gap-3 rounded-small px-3 py-2 text-body-medium text-on-surface transition-colors hover:bg-on-surface/8"
+              >
+                {item.icon && (
+                  <Icon name={item.icon} size={20} className="text-on-surface-variant" />
+                )}
+                <span className="flex-1 text-left">{item.label}</span>
+              </button>
+              {item.dividerAfter && <div className="my-1 border-t border-outline-variant/30" />}
+            </div>
+          ))}
+        </div>
+
+        {/* Secondary Submenu if provided */}
+        {submenuItems && submenuItems.length > 0 && (
+          <div
+            className="w-[200px] border-l border-outline-variant/20 pl-2 space-y-0.5"
+            role="menu"
+            aria-label="More uploads"
+          >
+            <div className="px-2 py-1 text-label-small font-medium text-on-surface-variant uppercase tracking-wider">
+              Cloud & Storage
+            </div>
+            {submenuItems.map((sub) => (
+              <button
+                key={sub.id}
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  sub.onClick?.();
+                  onOpenChange(false);
+                }}
+                className="flex w-full items-center gap-3 rounded-small px-3 py-2 text-body-medium text-on-surface transition-colors hover:bg-on-surface/8"
+              >
+                {sub.icon && <Icon name={sub.icon} size={20} className="text-primary" />}
+                <span className="flex-1 text-left">{sub.label}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </Popover.Content>
+    </Popover.Root>
+  );
+}

package/src/GeminiPersonalContextEdit.tsx

@@ -0,0 +1,147 @@
+// SPDX-License-Identifier: Apache-2.0
+// Benchmark: assets/ui/gemini-personal-context-edit.png
+// Focused multiline context editor dialog for user preferences and saved agent memory
+
+"use client";
+
+import { Button, DialogClose, DialogContent, DialogRoot, Icon } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+import { useState } from "react";
+
+export interface GeminiPersonalContextEditProps {
+  /** Controls open state of the dialog */
+  open: boolean;
+  /** Open state change callback */
+  onOpenChange: (open: boolean) => void;
+  /** Current context text */
+  initialContext?: string;
+  /** Title of the dialog */
+  title?: string;
+  /** Subtitle/description of context rules */
+  description?: string;
+  /** Save callback */
+  onSave: (context: string) => void | Promise<void>;
+  /** Clear/delete context callback */
+  onClear?: () => void;
+  /** Additional container classes */
+  className?: string;
+}
+
+/**
+ * Gemini Personal Context & User Memory Editor Dialog.
+ * Benchmark parity: `assets/ui/gemini-personal-context-edit.png` (manifest item 4).
+ * Features:
+ * - Centered dialog over translucent backdrop blur.
+ * - Focused multiline context editor with visible focus outline.
+ * - Save button is disabled when context is empty or unchanged.
+ * - Contextual instructions for how agent uses personal context.
+ */
+export function GeminiPersonalContextEdit({
+  open,
+  onOpenChange,
+  initialContext = "",
+  title = "Your personal context",
+  description = "Help Gemini understand your preferences, interests, and how you want it to respond. This information is saved and applied across your conversations.",
+  onSave,
+  onClear,
+  className,
+}: GeminiPersonalContextEditProps) {
+  const [context, setContext] = useState(initialContext);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const [previousInputs, setPreviousInputs] = useState({ initialContext, open });
+  // Reset the draft before committing a changed source or open state, while preserving the editor node and focus.
+  if (previousInputs.initialContext !== initialContext || previousInputs.open !== open) {
+    setPreviousInputs({ initialContext, open });
+    setContext(initialContext);
+  }
+
+  const hasChanged = context.trim() !== initialContext.trim();
+  const canSave = context.trim().length > 0 && hasChanged && !isSaving;
+
+  const handleSave = async () => {
+    if (!canSave) return;
+    setIsSaving(true);
+    try {
+      await onSave(context.trim());
+      onOpenChange(false);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <DialogRoot open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className={clsx(
+          "gemini-context-edit-dialog w-full max-w-[620px] rounded-[var(--gemini-corner-card,16px)]",
+          "border border-outline-variant/30 bg-surface p-6 text-on-surface shadow-md3-3",
+          className,
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-1">
+            <h2 className="text-headline-small font-normal text-on-surface flex items-center gap-2">
+              <Icon name="psychology" size={24} className="text-primary" />
+              {title}
+            </h2>
+            <p className="text-body-medium text-on-surface-variant leading-relaxed">
+              {description}
+            </p>
+          </div>
+          <DialogClose asChild>
+            <button
+              type="button"
+              className="rounded-full p-1.5 text-on-surface-variant hover:bg-on-surface/8 transition-colors"
+              aria-label="Close"
+            >
+              <Icon name="close" size={20} />
+            </button>
+          </DialogClose>
+        </div>
+
+        {/* Text Area Input */}
+        <div className="mt-5 space-y-2">
+          <div className="relative rounded-medium border-2 border-primary/60 bg-surface-container-low transition-all focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20">
+            <textarea
+              value={context}
+              onChange={(e) => setContext(e.target.value)}
+              placeholder="e.g. Always respond in concise bullet points, write modern TypeScript with Bun, favor pure functions..."
+              rows={6}
+              aria-label="Personal context content"
+              className="block w-full resize-y border-0 bg-transparent p-3.5 text-body-medium text-on-surface caret-primary outline-none placeholder:text-on-surface-variant/60"
+            />
+          </div>
+          <div className="flex justify-between px-1 text-label-small text-on-surface-variant">
+            <span>{context.length} characters</span>
+            {initialContext.length > 0 && onClear && (
+              <button
+                type="button"
+                onClick={() => {
+                  setContext("");
+                  onClear();
+                }}
+                className="text-error hover:underline transition-all"
+              >
+                Clear saved context
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Footer Actions */}
+        <div className="mt-6 flex items-center justify-end gap-3">
+          <DialogClose asChild>
+            <Button variant="text" disabled={isSaving}>
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button variant="filled" onClick={handleSave} disabled={!canSave} className="px-6">
+            {isSaving ? "Saving..." : "Save"}
+          </Button>
+        </div>
+      </DialogContent>
+    </DialogRoot>
+  );
+}