@aphrody/m3-ai 3.3.2 → 3.3.5

package/src/McpAppCard.tsx

@@ -0,0 +1,161 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * @aphrody/m3-ai - McpAppCard
+ *
+ * Material Design 3 Interactive MCP App Container:
+ * - Renders generative UI resources produced by MCP tools (SEP-1724 / mcp-ui).
+ * - Hosts interactive guest web applications in an isolated sandbox iframe.
+ * - Passes reactive M3 theme and color scheme context to the guest app.
+ * - Supports expandable full-bleed or embedded card layouts.
+ */
+
+import React, { useState, useRef, useMemo } from "react";
+import { clsx } from "clsx";
+import { AppRenderer, type SandboxConfig, type McpUiHostContext } from "@aphrody/mcp-ui";
+
+export interface McpAppCardProps {
+  toolName: string;
+  title?: string;
+  html?: string;
+  toolResourceUri?: string;
+  toolInput?: Record<string, unknown>;
+  toolResult?: any;
+  sandboxUrl?: string;
+  isExpandedDefault?: boolean;
+  className?: string;
+  onAction?: (action: string, payload?: unknown) => void;
+}
+
+export const McpAppCard: React.FC<McpAppCardProps> = ({
+  toolName,
+  title,
+  html,
+  toolResourceUri,
+  toolInput,
+  toolResult,
+  sandboxUrl,
+  isExpandedDefault = false,
+  className,
+  onAction: _onAction,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(isExpandedDefault);
+  const [hasError, setHasError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Host context with Material Design 3 tokens
+  const hostContext: McpUiHostContext = useMemo(() => {
+    const isDark =
+      typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return {
+      theme: isDark ? "dark" : "light",
+      locale: typeof navigator !== "undefined" ? navigator.language : "en-US",
+      displayMode: isExpanded ? "fullscreen" : "inline",
+    };
+  }, [isExpanded]);
+
+  // Fallback default sandbox proxy URL
+  const resolvedSandbox: SandboxConfig = useMemo(() => {
+    const url = sandboxUrl ? new URL(sandboxUrl) : new URL("https://mcpui.dev/sandbox_proxy.html");
+    return {
+      url,
+      permissions: "allow-scripts allow-forms allow-same-origin",
+    };
+  }, [sandboxUrl]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx(
+        "flex flex-col rounded-3xl border transition-all duration-300 overflow-hidden",
+        "bg-[var(--md-sys-color-surface-container-low,#f7f2fa)]",
+        "border-[var(--md-sys-color-outline-variant,#cac4d0)]",
+        "text-[var(--md-sys-color-on-surface,#1d1b20)]",
+        isExpanded ? "fixed inset-4 z-50 shadow-2xl" : "relative w-full shadow-sm",
+        className,
+      )}
+    >
+      {/* App Card Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--md-sys-color-outline-variant,#cac4d0)]/40 bg-[var(--md-sys-color-surface-container,#f3edf7)]/60">
+        <div className="flex items-center gap-2.5">
+          <div className="flex h-7 w-7 items-center justify-center rounded-xl bg-[var(--md-sys-color-primary-container,#eaddff)] text-[var(--md-sys-color-on-primary-container,#21005d)]">
+            <span className="material-symbols-outlined text-base">widgets</span>
+          </div>
+
+          <div className="flex flex-col">
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-semibold tracking-tight">{title || toolName}</span>
+              <span className="rounded-full bg-[var(--md-sys-color-surface-container-high,#ece6f0)] px-2 py-0.2 text-[10px] font-mono text-[var(--md-sys-color-on-surface-variant,#49454f)]">
+                mcp-ui
+              </span>
+            </div>
+            {toolResourceUri && (
+              <span className="text-[10px] font-mono text-[var(--md-sys-color-outline,#79747e)]">
+                {toolResourceUri}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Action icons */}
+        <div className="flex items-center gap-1">
+          <div className="flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-700 dark:text-emerald-400">
+            <span className="material-symbols-outlined text-xs">verified_user</span>
+            <span>Sandboxed</span>
+          </div>
+
+          <button
+            type="button"
+            onClick={() => setIsExpanded(!isExpanded)}
+            title={isExpanded ? "Collapse" : "Expand Fullscreen"}
+            className="flex h-7 w-7 items-center justify-center rounded-lg text-[var(--md-sys-color-on-surface-variant,#49454f)] hover:bg-[var(--md-sys-color-surface-container-high,#ece6f0)] transition-colors"
+          >
+            <span className="material-symbols-outlined text-base">
+              {isExpanded ? "close_fullscreen" : "open_in_full"}
+            </span>
+          </button>
+        </div>
+      </div>
+
+      {/* App Frame Content */}
+      <div
+        className={clsx(
+          "relative w-full overflow-hidden transition-all",
+          isExpanded ? "flex-1 min-h-[500px]" : "h-96",
+        )}
+      >
+        {hasError ? (
+          <div className="flex h-full flex-col items-center justify-center p-6 text-center text-xs text-[var(--md-sys-color-error,#b3261e)]">
+            <span className="material-symbols-outlined text-3xl mb-1">error</span>
+            <span className="font-semibold">MCP App Render Error</span>
+            <p className="mt-1 font-mono text-[11px] opacity-80">{hasError}</p>
+          </div>
+        ) : html ? (
+          <AppRenderer
+            toolName={toolName}
+            html={html}
+            sandbox={resolvedSandbox}
+            toolInput={toolInput}
+            toolResult={toolResult}
+            hostContext={hostContext}
+            onError={(err) => setHasError(err.message)}
+          />
+        ) : (
+          <div className="flex h-full flex-col items-center justify-center p-6 text-xs text-[var(--md-sys-color-outline,#79747e)]">
+            <span className="material-symbols-outlined text-2xl animate-spin mb-1 text-[var(--md-sys-color-primary,#6750a4)]">
+              progress_activity
+            </span>
+            <span>Awaiting MCP UI Resource ({toolName})...</span>
+          </div>
+        )}
+      </div>
+
+      {/* Footer info */}
+      {toolInput && (
+        <div className="flex items-center justify-between px-4 py-2 border-t border-[var(--md-sys-color-outline-variant,#cac4d0)]/30 bg-[var(--md-sys-color-surface-container-lowest,#ffffff)] text-[10px] text-[var(--md-sys-color-outline,#79747e)] font-mono">
+          <span className="truncate">input: {JSON.stringify(toolInput)}</span>
+          <span className="shrink-0 ml-2">M3 UI Bridge</span>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/MemoryPanel.tsx

@@ -0,0 +1,176 @@
+// SPDX-License-Identifier: Apache-2.0
+// Memory panel: the agent's saved memories as an M3 list, with per-item deletion and a
+// "clear all" action guarded by an inline confirmation (or an injected one).
+
+"use client";
+
+import { CircleButton } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+import { useMemo, useState } from "react";
+
+import { type ChatLabels, resolveChatLabels } from "./chatLabels";
+import { ChatIcon } from "./chatIcons";
+import { CircularIndicator, focusRing } from "./internal";
+
+export interface MemoryItem {
+  id: string;
+  content: string;
+  tags?: string[];
+  /** ISO string, epoch milliseconds or Date. */
+  createdAt: string | number | Date;
+}
+
+export interface MemoryPanelProps {
+  memories: readonly MemoryItem[];
+  loading?: boolean;
+  onDelete?: (id: string) => void;
+  /** Shows "clear all". */
+  onClear?: () => void;
+  /**
+   * Replaces the built-in inline confirmation of "clear all" (e.g. an app dialog):
+   * resolve `true` to clear.
+   */
+  confirmClear?: () => boolean | Promise<boolean>;
+  labels?: Partial<ChatLabels>;
+  locale?: string;
+  formatDate?: (createdAt: Date) => string;
+  className?: string;
+}
+
+const textButton = clsx(
+  "inline-flex h-10 items-center rounded-full px-3 text-label-large",
+  "transition-colors duration-200 ease-standard",
+  focusRing,
+);
+
+export function MemoryPanel({
+  memories,
+  loading = false,
+  onDelete,
+  onClear,
+  confirmClear,
+  labels,
+  locale,
+  formatDate,
+  className,
+}: MemoryPanelProps) {
+  const l = resolveChatLabels(labels);
+  const [confirming, setConfirming] = useState(false);
+  const dateFormat = useMemo(
+    () => new Intl.DateTimeFormat(locale, { dateStyle: "medium" }),
+    [locale],
+  );
+  const format = (value: string | number | Date) => {
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime())) return "";
+    return formatDate ? formatDate(date) : dateFormat.format(date);
+  };
+
+  const requestClear = async () => {
+    if (!onClear) return;
+    if (confirmClear) {
+      if (await confirmClear()) onClear();
+      return;
+    }
+    setConfirming(true);
+  };
+
+  return (
+    <section
+      aria-label={l.memory}
+      aria-busy={loading || undefined}
+      className={clsx(
+        "m3-memory-panel flex min-h-0 flex-col gap-2 rounded-large bg-surface-container-low py-3 text-on-surface",
+        className,
+      )}
+    >
+      <header className="flex items-center justify-between gap-2 px-4">
+        <h2 className="m-0 text-title-medium">{l.memory}</h2>
+        {onClear && memories.length > 0 && !confirming ? (
+          <button
+            type="button"
+            onClick={() => void requestClear()}
+            className={clsx(textButton, "text-error hover:bg-error/8")}
+          >
+            {l.clearMemory}
+          </button>
+        ) : null}
+      </header>
+      {confirming ? (
+        <div
+          role="alertdialog"
+          aria-label={l.clearMemory}
+          className="mx-4 flex flex-col gap-2 rounded-medium bg-error-container px-4 py-3 text-on-error-container"
+        >
+          <p className="m-0 text-body-medium">{l.clearMemoryConfirm}</p>
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => setConfirming(false)}
+              className={clsx(textButton, "hover:bg-on-error-container/8")}
+            >
+              {l.cancel}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setConfirming(false);
+                onClear?.();
+              }}
+              className={clsx(textButton, "bg-error px-4 text-on-error hover:bg-error/92")}
+            >
+              {l.confirm}
+            </button>
+          </div>
+        </div>
+      ) : null}
+      {loading ? (
+        <div className="flex justify-center py-6">
+          <CircularIndicator size={24} label={l.memoryLoading} />
+        </div>
+      ) : memories.length === 0 ? (
+        <p className="m-0 px-4 py-6 text-center text-body-medium text-on-surface-variant">
+          {l.memoryEmpty}
+        </p>
+      ) : (
+        <ul className="m-0 flex min-h-0 list-none flex-col overflow-y-auto p-0">
+          {memories.map((memory) => (
+            <li
+              key={memory.id}
+              className="group flex items-start gap-3 px-4 py-2 transition-colors duration-200 ease-standard hover:bg-on-surface/8"
+            >
+              <div className="min-w-0 flex-1">
+                <p className="m-0 text-body-medium break-words whitespace-pre-wrap text-on-surface">
+                  {memory.content}
+                </p>
+                <div className="mt-1 flex flex-wrap items-center gap-1.5">
+                  <time className="text-label-small text-on-surface-variant">
+                    {format(memory.createdAt)}
+                  </time>
+                  {memory.tags?.map((tag) => (
+                    <span
+                      key={tag}
+                      className="inline-flex h-6 items-center rounded-small border border-outline-variant px-2 text-label-small text-on-surface-variant"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              {onDelete ? (
+                <CircleButton
+                  icon={<ChatIcon name="delete" size={18} />}
+                  variant="standard"
+                  size="sm"
+                  onClick={() => onDelete(memory.id)}
+                  aria-label={l.deleteMemory}
+                  title={l.deleteMemory}
+                />
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

package/src/MessageBubble.tsx

@@ -0,0 +1,143 @@
+// SPDX-License-Identifier: Apache-2.0 AND MIT
+// Derived from SpaceUI (packages/aphrody-spaceui/packages/ai/src/MessageBubble.tsx), MIT, rebuilt on Material Design 3.
+
+"use client";
+
+import { CircleButton } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+
+import { type ChatLabels, resolveChatLabels } from "./chatLabels";
+import { type Citation, CitationList, CitedMarkdown, RefusalNotice } from "./citations";
+import { ChatIcon } from "./chatIcons";
+import { Markdown, type MarkdownLinkHandler } from "./Markdown";
+
+export interface MessageBubbleProps {
+  content: string;
+  isUser: boolean;
+  isStreaming?: boolean;
+  onCopy?: (content: string) => void;
+  onDislike?: (content: string) => void;
+  onFork?: () => void;
+  variant?: "default" | "codex";
+  className?: string;
+  /** Visible strings (aria-labels, titles); English defaults. */
+  labels?: Partial<ChatLabels>;
+  /** Grounded answer: `[n]` markers become citation chips and the sources are listed below. */
+  citations?: readonly Citation[];
+  /** The backend refused to answer: a refusal notice replaces an empty answer. */
+  refusal?: boolean;
+  onCitationSelect?: (citation: Citation) => void;
+  /** Link activation in the answer (e.g. open the system browser from Tauri). */
+  onLinkClick?: MarkdownLinkHandler;
+}
+
+/**
+ * One chat turn. The user turn is an M3 bubble, the assistant turn is plain markdown
+ * on the surface, as in M3 / Codex conversations.
+ */
+export function MessageBubble({
+  content,
+  isUser,
+  isStreaming = false,
+  onCopy,
+  onDislike,
+  onFork,
+  variant = "default",
+  className,
+  labels,
+  citations,
+  refusal = false,
+  onCitationSelect,
+  onLinkClick,
+}: MessageBubbleProps) {
+  const isCodex = variant === "codex";
+  const l = resolveChatLabels(labels);
+  const cited = !isUser && citations && citations.length > 0 ? citations : null;
+
+  return (
+    <div
+      className={clsx(
+        "group flex flex-col py-1.5 w-full",
+        isUser ? "items-end" : "items-start",
+        className,
+      )}
+    >
+      <div
+        className={clsx(
+          "min-w-0",
+          isUser
+            ? isCodex
+              ? "max-w-[75%] rounded-[28px] bg-surface-container-high px-5 py-3 text-body-large text-on-surface shadow-xs"
+              : "max-w-[80%] rounded-large rounded-br-extra-small bg-secondary-container px-4 py-2.5 text-body-large text-on-secondary-container"
+            : "w-full max-w-full bg-transparent text-body-large text-on-surface",
+        )}
+        aria-busy={isStreaming || undefined}
+      >
+        {isUser ? (
+          <div className="whitespace-pre-wrap break-words">{content}</div>
+        ) : (
+          <>
+            {refusal && !content.trim() ? (
+              <RefusalNotice labels={labels} />
+            ) : cited ? (
+              <CitedMarkdown
+                content={content}
+                citations={cited}
+                labels={labels}
+                onCitationSelect={onCitationSelect}
+                onLinkClick={onLinkClick}
+                className="break-words font-sans"
+              />
+            ) : (
+              <Markdown
+                content={content}
+                size="large"
+                labels={labels}
+                onLinkClick={onLinkClick}
+                className="break-words font-sans"
+              />
+            )}
+            {refusal && content.trim() ? <RefusalNotice labels={labels} className="mt-2" /> : null}
+            {cited && !isStreaming ? (
+              <CitationList citations={cited} labels={labels} onSelect={onCitationSelect} />
+            ) : null}
+          </>
+        )}
+      </div>
+      {!isUser && (onCopy || onDislike || onFork) ? (
+        <div className="mt-1.5 flex items-center gap-1 opacity-0 transition-opacity duration-200 ease-standard group-focus-within:opacity-100 group-hover:opacity-100">
+          {onCopy && (
+            <CircleButton
+              icon={<ChatIcon name="content_copy" size={18} />}
+              variant="standard"
+              size="sm"
+              onClick={() => onCopy(content)}
+              aria-label={isStreaming ? l.copyStreamingMessage : l.copyMessage}
+              title={isStreaming ? l.copyStreamingMessage : l.copyMessage}
+            />
+          )}
+          {onDislike && (
+            <CircleButton
+              icon={<ChatIcon name="thumb_down" size={18} />}
+              variant="standard"
+              size="sm"
+              onClick={() => onDislike(content)}
+              aria-label={l.dislike}
+              title={l.dislike}
+            />
+          )}
+          {onFork && (
+            <CircleButton
+              icon={<ChatIcon name="call_split" size={18} />}
+              variant="standard"
+              size="sm"
+              onClick={onFork}
+              aria-label={l.fork}
+              title={l.fork}
+            />
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}