@aphrody/m3-ai 3.3.0 → 3.3.1

package/dist/index.js

@@ -1,13 +1,13 @@
 'use client';
-import { forwardRef, useState, useMemo, useRef, useEffect, useId, useCallback } from 'react';
+import { forwardRef, useState, useMemo, useRef, useEffect, isValidElement, useId, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { AnimatePresence, motion } from 'motion/react';
 import { usePopover, Popover, SelectPill, Icon, CircleButton, Button, DropdownMenu, Collapsible, CollapsibleTrigger, CollapsibleContent, Select, SelectOption, Input, TextArea } from '@aphrody/m3-primitives';
 import { m3Easings, m3Durations } from '@aphrody/m3-motion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 
 // src/types.ts
 var TASK_STATUS_ORDER = [
@@ -967,6 +967,396 @@ var bodyClass = {
   medium: "text-body-medium",
   large: "text-body-large"
 };
+function extractText(node) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(extractText).join("");
+  if (isValidElement(node)) return extractText(node.props.children);
+  return "";
+}
+var LANGUAGE_MAP = {
+  typescript: "TypeScript",
+  ts: "TypeScript",
+  tsx: "TSX",
+  javascript: "JavaScript",
+  js: "JavaScript",
+  jsx: "JSX",
+  python: "Python",
+  py: "Python",
+  rust: "Rust",
+  rs: "Rust",
+  bash: "Bash",
+  sh: "Bash",
+  shell: "Bash",
+  zsh: "Bash",
+  json: "JSON",
+  jsonc: "JSONC",
+  sql: "SQL",
+  html: "HTML",
+  css: "CSS",
+  scss: "SCSS",
+  sass: "Sass",
+  yaml: "YAML",
+  yml: "YAML",
+  markdown: "Markdown",
+  md: "Markdown",
+  go: "Go",
+  golang: "Go",
+  java: "Java",
+  c: "C",
+  cpp: "C++",
+  "c++": "C++",
+  csharp: "C#",
+  cs: "C#",
+  "c#": "C#",
+  ruby: "Ruby",
+  rb: "Ruby",
+  php: "PHP",
+  swift: "Swift",
+  kotlin: "Kotlin",
+  kt: "Kotlin",
+  xml: "XML",
+  toml: "TOML",
+  dockerfile: "Dockerfile",
+  docker: "Dockerfile",
+  graphql: "GraphQL",
+  gql: "GraphQL",
+  wasm: "WebAssembly",
+  lua: "Lua",
+  r: "R",
+  diff: "Diff",
+  plaintext: "Text",
+  text: "Text",
+  txt: "Text"
+};
+function detectLanguage(raw) {
+  if (!raw) return { raw: "", label: "Code" };
+  const cleaned = raw.replace(/^language-|^lang-/, "").toLowerCase().trim();
+  if (LANGUAGE_MAP[cleaned]) {
+    return { raw: cleaned, label: LANGUAGE_MAP[cleaned] };
+  }
+  const label = cleaned.length <= 3 ? cleaned.toUpperCase() : cleaned.charAt(0).toUpperCase() + cleaned.slice(1);
+  return { raw: cleaned, label };
+}
+function CodeBlock({
+  code: explicitCode,
+  language: explicitLang,
+  onCopy,
+  className,
+  children,
+  ...restProps
+}) {
+  const { node: _node, ...props } = restProps;
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  const childElement = isValidElement(children) ? children : null;
+  const childProps = childElement ? childElement.props : null;
+  const rawLangMatch = explicitLang ?? className?.match(/language-([a-zA-Z0-9_+#-]+)/)?.[1] ?? childProps?.className?.match(/language-([a-zA-Z0-9_+#-]+)/)?.[1];
+  const { raw: rawLang, label: languageLabel } = detectLanguage(rawLangMatch);
+  const rawCode = explicitCode ?? (childProps?.children ? extractText(childProps.children) : extractText(children));
+  const codeContent = rawCode;
+  const codeToCopy = rawCode.replace(/\n$/, "");
+  const handleCopy = async () => {
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(codeToCopy);
+      }
+    } catch {
+    }
+    onCopy?.(codeToCopy);
+    setCopied(true);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setCopied(false);
+    }, 2e3);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "my-3 overflow-hidden rounded-medium border border-outline-variant bg-surface-container-highest",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-outline-variant bg-surface-container px-3 py-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-extra-small bg-surface-container-high px-2 py-0.5 text-label-small font-medium text-on-surface-variant border border-outline-variant/60", children: languageLabel }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleCopy,
+              className: clsx(
+                "inline-flex items-center gap-1.5 rounded-small px-2 py-1 text-label-small font-medium transition-colors duration-200",
+                copied ? "text-success" : "text-on-surface-variant hover:bg-on-surface/8 hover:text-on-surface active:bg-on-surface/12",
+                "focus-visible:outline-2 focus-visible:outline-primary"
+              ),
+              "aria-label": copied ? "Copied" : "Copy code",
+              title: copied ? "Copied!" : "Copy code",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: copied ? "check" : "content_copy",
+                    size: 16,
+                    className: copied ? "text-success" : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: copied ? "Copied!" : "Copy" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-3 font-code text-body-small text-on-surface bg-surface-container-highest [&_code]:bg-transparent [&_code]:p-0 [&_code]:text-[length:inherit]", children: /* @__PURE__ */ jsx("code", { className: rawLang ? `language-${rawLang}` : void 0, children: codeContent }) })
+      ]
+    }
+  );
+}
+var GREEK_AND_SYMBOLS = {
+  // Greek letters (lowercase)
+  alpha: "\u03B1",
+  beta: "\u03B2",
+  gamma: "\u03B3",
+  delta: "\u03B4",
+  epsilon: "\u03B5",
+  zeta: "\u03B6",
+  eta: "\u03B7",
+  theta: "\u03B8",
+  iota: "\u03B9",
+  kappa: "\u03BA",
+  lambda: "\u03BB",
+  mu: "\u03BC",
+  nu: "\u03BD",
+  xi: "\u03BE",
+  pi: "\u03C0",
+  rho: "\u03C1",
+  sigma: "\u03C3",
+  tau: "\u03C4",
+  upsilon: "\u03C5",
+  phi: "\u03C6",
+  chi: "\u03C7",
+  psi: "\u03C8",
+  omega: "\u03C9",
+  // Greek letters (uppercase)
+  Gamma: "\u0393",
+  Delta: "\u0394",
+  Theta: "\u0398",
+  Lambda: "\u039B",
+  Xi: "\u039E",
+  Pi: "\u03A0",
+  Sigma: "\u03A3",
+  Phi: "\u03A6",
+  Psi: "\u03A8",
+  Omega: "\u03A9",
+  // Operators & Relations
+  times: "\xD7",
+  div: "\xF7",
+  pm: "\xB1",
+  mp: "\u2213",
+  le: "\u2264",
+  leq: "\u2264",
+  ge: "\u2265",
+  geq: "\u2265",
+  approx: "\u2248",
+  neq: "\u2260",
+  ne: "\u2260",
+  infty: "\u221E",
+  cdot: "\xB7",
+  circ: "\xB0",
+  partial: "\u2202",
+  nabla: "\u2207",
+  sum: "\u2211",
+  prod: "\u220F",
+  int: "\u222B",
+  sqrt: "\u221A",
+  in: "\u2208",
+  notin: "\u2209",
+  subset: "\u2282",
+  subseteq: "\u2286",
+  cup: "\u222A",
+  cap: "\u2229",
+  to: "\u2192",
+  rightarrow: "\u2192",
+  leftarrow: "\u2190",
+  leftrightarrow: "\u2194",
+  Rightarrow: "\u21D2",
+  Leftarrow: "\u21D0",
+  Leftrightarrow: "\u21D4",
+  forall: "\u2200",
+  exists: "\u2203"
+};
+function formatSubSup(text) {
+  const parts = text.split(
+    /(\^\{[^}]+\}|\^[-+]?[a-zA-Z0-9\u0370-\u03FF\u2100-\u214F]|_\{[^}]+\}|_[-+]?[a-zA-Z0-9\u0370-\u03FF\u2100-\u214F])/g
+  );
+  if (parts.length === 1) return text;
+  return parts.map((part, index) => {
+    if (part.startsWith("^")) {
+      const val = part.startsWith("^{") && part.endsWith("}") ? part.slice(2, -1) : part.slice(1);
+      return /* @__PURE__ */ jsx("sup", { className: "text-[0.75em] leading-none", children: val }, index);
+    }
+    if (part.startsWith("_")) {
+      const val = part.startsWith("_{") && part.endsWith("}") ? part.slice(2, -1) : part.slice(1);
+      return /* @__PURE__ */ jsx("sub", { className: "text-[0.75em] leading-none", children: val }, index);
+    }
+    return part;
+  });
+}
+function formatMathContent(math) {
+  const text = math.replace(/\\+([a-zA-Z]+)/g, (match, name) => {
+    return GREEK_AND_SYMBOLS[name] ?? match;
+  });
+  const fracRegex = /\\+frac\{([^{}]+)\}\{([^{}]+)\}/g;
+  if (fracRegex.test(text)) {
+    const parts = [];
+    let lastIndex = 0;
+    text.replace(fracRegex, (match, num, den, offset) => {
+      if (offset > lastIndex) {
+        parts.push(formatSubSup(text.slice(lastIndex, offset)));
+      }
+      parts.push(
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "inline-flex flex-col items-center align-middle mx-1 text-center text-[0.85em] leading-none not-italic",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "border-b border-current px-0.5 pb-0.5", children: formatSubSup(num) }),
+              /* @__PURE__ */ jsx("span", { className: "px-0.5 pt-0.5", children: formatSubSup(den) })
+            ]
+          },
+          `frac-${offset}`
+        )
+      );
+      lastIndex = offset + match.length;
+      return match;
+    });
+    if (lastIndex < text.length) {
+      parts.push(formatSubSup(text.slice(lastIndex)));
+    }
+    return parts;
+  }
+  return formatSubSup(text);
+}
+function InlineMath({ math, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx(
+        "inline-flex items-center px-1 font-serif italic font-medium text-primary",
+        className
+      ),
+      ...props,
+      children: formatMathContent(math)
+    }
+  );
+}
+function BlockMath({ math, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "my-3 flex justify-center overflow-x-auto rounded-medium bg-surface-container-low/40 px-4 py-2 text-title-medium font-serif italic font-medium text-primary",
+        className
+      ),
+      ...props,
+      children: formatMathContent(math)
+    }
+  );
+}
+function remarkMathPlugin() {
+  return (tree) => {
+    function transformBlocks(parent) {
+      if (!parent.children) return;
+      const newChildren = [];
+      for (const child of parent.children) {
+        if (child.type === "paragraph" && Array.isArray(child.children)) {
+          const hasBlockMath = child.children.some(
+            (c) => c.type === "text" && /\$\$[\s\S]+?\$\$/.test(c.value)
+          );
+          if (hasBlockMath) {
+            let currentParagraphChildren = [];
+            for (const item of child.children) {
+              if (item.type === "text" && /\$\$[\s\S]+?\$\$/.test(item.value)) {
+                const parts = item.value.split(/(\$\$[\s\S]+?\$\$)/g);
+                for (const part of parts) {
+                  if (part.startsWith("$$") && part.endsWith("$$") && part.length >= 4) {
+                    if (currentParagraphChildren.length > 0) {
+                      newChildren.push({
+                        type: "paragraph",
+                        children: currentParagraphChildren
+                      });
+                      currentParagraphChildren = [];
+                    }
+                    const mathVal = part.slice(2, -2).trim();
+                    newChildren.push({
+                      type: "mathBlock",
+                      data: {
+                        hName: "div",
+                        hProperties: { className: "math-block", "data-math": mathVal },
+                        hChildren: [{ type: "text", value: mathVal }]
+                      },
+                      children: [{ type: "text", value: mathVal }]
+                    });
+                  } else if (part.trim().length > 0) {
+                    currentParagraphChildren.push({ type: "text", value: part });
+                  }
+                }
+              } else {
+                currentParagraphChildren.push(item);
+              }
+            }
+            if (currentParagraphChildren.length > 0) {
+              newChildren.push({
+                type: "paragraph",
+                children: currentParagraphChildren
+              });
+            }
+            continue;
+          }
+        }
+        transformBlocks(child);
+        newChildren.push(child);
+      }
+      parent.children = newChildren;
+    }
+    function transformInlines(node) {
+      if (!node.children) return;
+      const newChildren = [];
+      for (const child of node.children) {
+        if (child.type === "text" && typeof child.value === "string" && child.value.includes("$")) {
+          const parts = child.value.split(/((?<!\\)\$(?!\s)[^$\n]+?(?<!\s)\$(?!\d))/g);
+          for (const part of parts) {
+            if (part.startsWith("$") && part.endsWith("$") && !part.startsWith("$$") && part.length > 2) {
+              const mathVal = part.slice(1, -1).trim();
+              newChildren.push({
+                type: "mathInline",
+                data: {
+                  hName: "span",
+                  hProperties: { className: "math-inline", "data-math": mathVal },
+                  hChildren: [{ type: "text", value: mathVal }]
+                },
+                children: [{ type: "text", value: mathVal }]
+              });
+            } else if (part) {
+              newChildren.push({ type: "text", value: part });
+            }
+          }
+        } else {
+          transformInlines(child);
+          newChildren.push(child);
+        }
+      }
+      node.children = newChildren;
+    }
+    transformBlocks(tree);
+    transformInlines(tree);
+  };
+}
 function m3Components(size) {
   const body = bodyClass[size];
   return {
@@ -1067,17 +1457,7 @@ function m3Components(size) {
         ...props
       }
     ),
-    pre: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx(
-      "pre",
-      {
-        className: clsx(
-          "my-3 overflow-x-auto rounded-small bg-surface-container-highest p-3 font-code text-body-small text-on-surface",
-          "[&_code]:bg-transparent [&_code]:p-0 [&_code]:text-[length:inherit]",
-          className
-        ),
-        ...props
-      }
-    ),
+    pre: ({ node: _node, children, className, style }) => /* @__PURE__ */ jsx(CodeBlock, { className, style, children }),
     hr: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx("hr", { className: clsx("my-4 border-outline-variant", className), ...props }),
     table: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-3 overflow-x-auto rounded-small border border-outline-variant", children: /* @__PURE__ */ jsx("table", { className: clsx("w-full border-collapse", body, className), ...props }) }),
     thead: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx("thead", { className: clsx("bg-surface-container", className), ...props }),
@@ -1106,7 +1486,21 @@ function m3Components(size) {
         ...props
       }
     ),
-    input: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx("input", { className: clsx("mr-2 accent-primary", className), ...props })
+    input: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx("input", { className: clsx("mr-2 accent-primary", className), ...props }),
+    div: ({ node: _node, className, children, ...props }) => {
+      if (className?.includes("math-block")) {
+        const math = props["data-math"] ?? extractText(children);
+        return /* @__PURE__ */ jsx(BlockMath, { math, className });
+      }
+      return /* @__PURE__ */ jsx("div", { className, ...props, children });
+    },
+    span: ({ node: _node, className, children, ...props }) => {
+      if (className?.includes("math-inline")) {
+        const math = props["data-math"] ?? extractText(children);
+        return /* @__PURE__ */ jsx(InlineMath, { math, className });
+      }
+      return /* @__PURE__ */ jsx("span", { className, ...props, children });
+    }
   };
 }
 var Markdown = forwardRef(
@@ -1119,7 +1513,7 @@ var Markdown = forwardRef(
         children: /* @__PURE__ */ jsx(
           ReactMarkdown,
           {
-            remarkPlugins: [remarkGfm],
+            remarkPlugins: [remarkGfm, remarkMathPlugin],
             rehypePlugins: allowHtml ? [rehypeRaw] : void 0,
             components: m3Components(size),
             children: content
@@ -1135,35 +1529,63 @@ function MessageBubble({
   isUser,
   isStreaming = false,
   onCopy,
+  onDislike,
+  onFork,
+  variant = "default",
   className
 }) {
+  const isCodex = variant === "codex";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx("group flex flex-col py-2", isUser ? "items-end" : "items-start", className),
+      className: clsx("group flex flex-col py-1.5 w-full", isUser ? "items-end" : "items-start", className),
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx(
               "min-w-0",
-              isUser ? "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"
+              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 || void 0,
-            children: isUser ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words", children: content }) : /* @__PURE__ */ jsx(Markdown, { content, size: "large", className: "break-words" })
+            children: isUser ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words", children: content }) : /* @__PURE__ */ jsx(Markdown, { content, size: "large", className: "break-words font-sans" })
           }
         ),
-        !isUser && onCopy ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex opacity-0 transition-opacity duration-200 ease-standard group-focus-within:opacity-100 group-hover:opacity-100", children: /* @__PURE__ */ jsx(
-          CircleButton,
-          {
-            icon: "content_copy",
-            variant: "standard",
-            size: "sm",
-            onClick: () => onCopy(content),
-            "aria-label": isStreaming ? "Copy Streaming Message" : "Copy Message",
-            title: isStreaming ? "Copy streaming message" : "Copy message"
-          }
-        ) }) : null
+        !isUser && (onCopy || onDislike || onFork) ? /* @__PURE__ */ jsxs("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", children: [
+          onCopy && /* @__PURE__ */ jsx(
+            CircleButton,
+            {
+              icon: "content_copy",
+              variant: "standard",
+              size: "sm",
+              onClick: () => onCopy(content),
+              "aria-label": isStreaming ? "Copy Streaming Message" : "Copy Message",
+              title: isStreaming ? "Copy streaming message" : "Copier"
+            }
+          ),
+          onDislike && /* @__PURE__ */ jsx(
+            CircleButton,
+            {
+              icon: "thumb_down",
+              variant: "standard",
+              size: "sm",
+              onClick: () => onDislike(content),
+              "aria-label": "Dislike",
+              title: "Je n'aime pas"
+            }
+          ),
+          onFork && /* @__PURE__ */ jsx(
+            CircleButton,
+            {
+              icon: "call_split",
+              variant: "standard",
+              size: "sm",
+              onClick: onFork,
+              "aria-label": "Fork",
+              title: "Bifurquer \xE0 partir de ce tour"
+            }
+          )
+        ] }) : null
       ]
     }
   );
@@ -2222,6 +2644,6 @@ function TaskCreateForm({
   );
 }
 
-export { ChatComposer, InlineBranchCard, InlineWorkerCard, Markdown, MessageBubble, ModelOptionList, ModelSelector, TASK_PRIORITY_LABEL, TASK_STATUS_LABEL, TASK_STATUS_ORDER, TaskCreateForm, TaskDetail, TaskList, TaskPriorityIcon, TaskRow, TaskStatusIcon, ToolCall, groupModelsByProvider, isErrorResult, pairTranscriptSteps, tryParseJson };
+export { BlockMath, ChatComposer, CodeBlock, InlineBranchCard, InlineMath, InlineWorkerCard, Markdown, MessageBubble, ModelOptionList, ModelSelector, TASK_PRIORITY_LABEL, TASK_STATUS_LABEL, TASK_STATUS_ORDER, TaskCreateForm, TaskDetail, TaskList, TaskPriorityIcon, TaskRow, TaskStatusIcon, ToolCall, groupModelsByProvider, isErrorResult, pairTranscriptSteps, tryParseJson };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map