@elabs-ai/components-ai 4.1.0 → 5.0.0

package/src/message-table.tsx

@@ -116,6 +116,8 @@ export interface MessageTableProps extends Omit<HTMLAttributes<HTMLDivElement>,
   /** Per-cell render override for custom composition. */
   renderCell?: RenderCell;
   /** The spec is still streaming (columns-but-no-rows shows skeleton rows). */
+  isStreaming?: boolean;
+  /** @deprecated Use `isStreaming`. */
   streaming?: boolean;
 }
 
@@ -145,12 +147,14 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
     onSortChange,
     maxRows,
     renderCell,
+    isStreaming,
     streaming = false,
     className,
     ...props
   },
   ref,
 ) {
+  const resolvedStreaming = isStreaming ?? streaming;
   const { t } = useLocale();
   const reactId = useId();
   const isControlled = sortProp !== undefined;
@@ -181,7 +185,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
 
   // No columns: skeleton while streaming, otherwise a fallback.
   if (columns.length === 0) {
-    if (streaming) {
+    if (resolvedStreaming) {
       return (
         <div ref={ref} className={cn("w-full", className)} {...props}>
           <span className="sr-only" role="status" aria-live="polite">
@@ -256,7 +260,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
         </p>
       )}
       <div className="overflow-hidden rounded-md border border-border">
-        {streaming && cappedRows.length === 0 && (
+        {resolvedStreaming && cappedRows.length === 0 && (
           <span className="sr-only" role="status" aria-live="polite">
             Loading table…
           </span>
@@ -264,7 +268,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
         <Table
           aria-labelledby={titleId}
           aria-label={title ? undefined : t("ai.messageTable.label")}
-          aria-busy={(streaming && cappedRows.length === 0) || undefined}
+          aria-busy={(resolvedStreaming && cappedRows.length === 0) || undefined}
         >
           {truncatedCount > 0 && (
             <TableCaption className="mb-2 mt-3 px-3 text-caption">
@@ -297,7 +301,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
                         onClick={() => toggleSort(column)}
                         className={cn(
                           "inline-flex items-center gap-1 rounded-sm font-medium",
-                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                          "focus-ring",
                           "hover:text-foreground transition-colors duration-fast ease-standard motion-reduce:transition-none",
                           numeric && "flex-row-reverse",
                         )}
@@ -322,7 +326,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
             </TableRow>
           </TableHeader>
           <TableBody>
-            {cappedRows.length === 0 && streaming ? (
+            {cappedRows.length === 0 && resolvedStreaming ? (
               [0, 1, 2].map((i) => (
                 <TableRow key={`skeleton-${i}`} aria-hidden="true">
                   {columns.map((column) => (

package/src/message.test.tsx

@@ -2,7 +2,7 @@ import { math } from "@streamdown/math";
 import { useState } from "react";
 import type { ComponentProps } from "react";
 import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import {
   AgentMessage,
@@ -185,8 +185,47 @@ describe("MessageResponse loading (#269, loading-states.md)", () => {
   });
 });
 
+describe("MessageResponse memo comparator covers every prop, not a hand-picked field list (perf review §2)", () => {
+  it("re-renders when only `className` changes (children/isAnimating/loading held constant)", () => {
+    const { container, rerender } = render(
+      <MessageResponse className="response-a">{"same content"}</MessageResponse>,
+    );
+    // Streamdown's own root `<div>` does not forward `data-slot` (it spreads
+    // rest props onto the inner markdown renderer, not its wrapper div), so
+    // key off the fixed `size-full` class `MessageResponse` always applies.
+    const responseEl = () => container.querySelector(".size-full");
+    expect(responseEl()).toHaveClass("response-a");
+
+    rerender(<MessageResponse className="response-b">{"same content"}</MessageResponse>);
+
+    // Under the old comparator (children/isAnimating/loading only), this
+    // rerender was skipped entirely — the DOM kept `response-a` even though
+    // the caller supplied a new `className`.
+    expect(responseEl()).toHaveClass("response-b");
+    expect(responseEl()).not.toHaveClass("response-a");
+  });
+
+  it("re-renders when only `mode` changes (children/isAnimating/loading held constant)", () => {
+    // `mode="streaming"` (the default) leniently auto-closes incomplete
+    // markdown syntax; `mode="static"` renders it literally. A real,
+    // discriminating, upstream-independent signal for this prop.
+    const { container, rerender } = render(
+      <MessageResponse mode="streaming">{"**bold"}</MessageResponse>,
+    );
+    expect(container.querySelector('[data-streamdown="strong"]')).toBeInTheDocument();
+
+    rerender(<MessageResponse mode="static">{"**bold"}</MessageResponse>);
+
+    // Under the old comparator (children/isAnimating/loading only), this
+    // rerender was skipped, so the switch to `mode="static"` never took
+    // effect and the incomplete markdown stayed auto-completed.
+    expect(container.querySelector('[data-streamdown="strong"]')).not.toBeInTheDocument();
+    expect(screen.getByText("**bold")).toBeInTheDocument();
+  });
+});
+
 describe("MessageResponse plugins/components overrides (#10 — merge-not-replace semantics)", () => {
-  it("merges a real `plugins.cjk` override in (append), keeps sanitisation on, and keeps the untouched `plugins.math` default alive (#10)", () => {
+  it("merges a real `plugins.cjk` override in (append), keeps sanitisation on, and keeps the untouched `plugins.math` default alive (#10)", async () => {
     // A real, discriminating lock — NOT `plugins={{}}` (that exercises zero
     // slots and passes identically under merge, replace, or a no-op; #10
     // review I3). This test supplies a genuine `cjk` plugin (one of the two
@@ -228,7 +267,14 @@ $$x^2$$
     expect(cjkRemarkSpy).toHaveBeenCalled();
     // (2b) …and the internal `math` default the consumer did not set is
     // still active — real KaTeX markup, not the literal `$$x^2$$` text.
-    expect(document.querySelector(".katex")).toBeInTheDocument();
+    // `math` is now lazy-loaded off the source text (#perf-5) — it starts
+    // `undefined` and arrives after a dynamic import, hence `waitFor`.
+    await waitFor(
+      () => {
+        expect(document.querySelector(".katex")).toBeInTheDocument();
+      },
+      { timeout: 5000 },
+    );
   });
 });
 
@@ -381,6 +427,30 @@ function BranchHarness(props: { branch?: number; onBranchChange?: (n: number) =>
   );
 }
 
+describe("MessageBranchContent — id uniqueness and content sync (perf review §2)", () => {
+  it("does not spread a caller-supplied id onto every branch (each branch keeps a unique id)", () => {
+    const { container } = render(
+      <MessageBranch>
+        <MessageBranchContent id="branch-content">
+          <div key="a">Branch A</div>
+          <div key="b">Branch B</div>
+          <div key="c">Branch C</div>
+        </MessageBranchContent>
+      </MessageBranch>,
+    );
+
+    const contentDivs = container.querySelectorAll('[data-slot="message-branch-content"]');
+    expect(contentDivs).toHaveLength(3);
+    const ids = Array.from(contentDivs).map((el) => el.getAttribute("id"));
+    // Under the bug, `{...props}` spread the literal `id="branch-content"`
+    // onto every mapped div — three duplicate DOM ids for one supplied id.
+    expect(new Set(ids).size).toBe(ids.length);
+    for (const id of ids) {
+      expect(id).toMatch(/^branch-content-\d+$/);
+    }
+  });
+});
+
 describe("MessageBranch — controlled mode (#361)", () => {
   it("is uncontrolled by default: defaultBranch + internal Next/Previous navigation are unaffected", async () => {
     const onBranchChange = vi.fn();

package/src/message.tsx

@@ -8,6 +8,7 @@ import { useLocale } from "@elabs-ai/components-ui";
 import { cva, type VariantProps } from "class-variance-authority";
 import { stripSanitizerOverrides, warnOnTrustedPluginSlots } from "./_streamdown-safety";
 import {
+  getStreamdownPluginsKey,
   useStreamdownMermaidOptions,
   useStreamdownPlugins,
   useStreamdownTranslations,
@@ -433,19 +434,20 @@ export const MessageBranch = ({
 
 export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
 
-export const MessageBranchContent = ({ children, ...props }: MessageBranchContentProps) => {
-  const { currentBranch, setBranches, branches } = useMessageBranch();
+export const MessageBranchContent = ({ children, id, ...props }: MessageBranchContentProps) => {
+  const { currentBranch, setBranches } = useMessageBranch();
   const childrenArray = useMemo(
     () => (Array.isArray(children) ? children : [children]),
     [children],
   );
 
-  // Use useEffect to update branches when they change
+  // Always resync — an earlier length-gate (`branches.length !==
+  // childrenArray.length`) skipped this when a branch's CONTENT changed
+  // (e.g. an edited message) without the branch COUNT changing, leaving
+  // `context.branches` stale relative to what is actually rendered.
   useEffect(() => {
-    if (branches.length !== childrenArray.length) {
-      setBranches(childrenArray);
-    }
-  }, [childrenArray, branches, setBranches]);
+    setBranches(childrenArray);
+  }, [childrenArray, setBranches]);
 
   return childrenArray.map((branch, index) => (
     <div
@@ -454,6 +456,10 @@ export const MessageBranchContent = ({ children, ...props }: MessageBranchConten
         index === currentBranch ? "block" : "hidden",
       )}
       data-slot="message-branch-content"
+      // Spreading a caller-supplied `id` onto every mapped branch produced
+      // duplicate DOM ids (one per branch); suffix it per index instead so
+      // each branch keeps a unique, stable id.
+      id={id ? `${id}-${index}` : undefined}
       key={branch.key}
       {...props}
     >
@@ -624,7 +630,12 @@ export const MessageResponse = memo(
     const { t } = useLocale();
     // Brand-token-derived `code` plugin, not the package's static github-*
     // default (#315 follow-up) — re-derives when the active theme changes.
-    const internalPlugins = useStreamdownPlugins();
+    // `math`/`cjk` are lazy-loaded off the raw markdown source (#perf-5, see
+    // `_streamdown-i18n.ts`) — pass `props.children` so they load only when
+    // this message actually needs them.
+    const internalPlugins = useStreamdownPlugins(
+      typeof props.children === "string" ? props.children : "",
+    );
     // MERGED per key over the internal defaults — the same semantics as
     // `MarkdownView`'s `plugins` prop (#10 fix round, M4): a consumer entry
     // wins for its key; every key the consumer does not set keeps the
@@ -676,6 +687,9 @@ export const MessageResponse = memo(
           "[&_p]:text-body [&_li]:text-body [&_code]:text-code",
           className,
         )}
+        // Forces a remount the first time the lazy math/cjk slot resolves —
+        // see `getStreamdownPluginsKey`'s doc in `_streamdown-i18n.ts` for why.
+        key={getStreamdownPluginsKey(internalPlugins)}
         data-slot="message-response"
         plugins={plugins}
         translations={translations}
@@ -684,10 +698,20 @@ export const MessageResponse = memo(
       />
     );
   },
-  (prevProps, nextProps) =>
-    prevProps.children === nextProps.children &&
-    nextProps.isAnimating === prevProps.isAnimating &&
-    nextProps.loading === prevProps.loading,
+  // A hand-picked field list (`children`/`isAnimating`/`loading`) silently
+  // went stale as `MessageResponseProps` grew: `className`, `components`,
+  // `plugins`, `mode` and every other `Streamdown` prop passed through
+  // `...props` were never compared, so a caller-driven change to any of them
+  // (e.g. toggling `mode="static"`/`"streaming"`, swapping `components`, or
+  // overriding a `plugins` slot) rendered stale content until an unrelated
+  // prop also changed. Compare every own key on BOTH sides with `Object.is`
+  // instead, so a newly added prop is covered for free.
+  (prevProps, nextProps) => {
+    const prevKeys = Object.keys(prevProps) as (keyof MessageResponseProps)[];
+    const nextKeys = Object.keys(nextProps) as (keyof MessageResponseProps)[];
+    if (prevKeys.length !== nextKeys.length) return false;
+    return prevKeys.every((key) => Object.is(prevProps[key], nextProps[key]));
+  },
 );
 
 MessageResponse.displayName = "MessageResponse";

package/src/model-provider-logo.test.tsx

@@ -1,7 +1,17 @@
-import { describe, expect, it, vi } from "vitest";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 
-import { MODEL_PROVIDER_LOGO_BASE_URL, ModelProviderLogo } from "./model-provider-logo";
+import {
+  MODEL_PROVIDER_LOGO_BASE_URL,
+  ModelProviderLogo,
+  ModelProviderLogoGroup,
+} from "./model-provider-logo";
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.removeAttribute("data-theme");
+  document.documentElement.style.colorScheme = "";
+});
 
 describe("ModelProviderLogo — remote origin escape hatches", () => {
   it("defaults to the models.dev logo for the provider", () => {
@@ -53,3 +63,47 @@ describe("ModelProviderLogo — remote origin escape hatches", () => {
     expect(screen.getByRole("img", { name: "openai logo" })).toBeInTheDocument();
   });
 });
+
+// Was `dark:invert` — a bare Tailwind dark: variant, which per theming.md only
+// covers the two SHIPPED themes and misses any consumer-registered dark theme
+// (ADR 0029, open theme registry). Now driven by `resolveThemeIsDark`, the
+// same signal `Toaster` uses, so it follows the ACTIVE theme's own
+// `color-scheme`, not a hardcoded theme name (review #1).
+describe("ModelProviderLogo — theme-driven invert (review #1)", () => {
+  it("does not invert under the light theme", () => {
+    document.documentElement.setAttribute("data-theme", "light");
+    render(<ModelProviderLogo provider="anthropic" />);
+    expect(screen.getByRole("img", { name: "anthropic logo" })).not.toHaveClass("invert");
+  });
+
+  it("inverts under the dark theme", () => {
+    document.documentElement.setAttribute("data-theme", "dark");
+    render(<ModelProviderLogo provider="anthropic" />);
+    expect(screen.getByRole("img", { name: "anthropic logo" })).toHaveClass("invert");
+  });
+
+  it("also inverts under a consumer-registered dark theme, not only the shipped one", () => {
+    // A raw `dark:` utility only ever matches `data-theme="dark"` — this
+    // is exactly the gap `resolveThemeIsDark`'s `color-scheme` reading closes.
+    document.documentElement.setAttribute("data-theme", "midnight");
+    document.documentElement.style.colorScheme = "dark";
+    render(<ModelProviderLogo provider="anthropic" />);
+    expect(screen.getByRole("img", { name: "anthropic logo" })).toHaveClass("invert");
+  });
+});
+
+describe("ModelProviderLogoGroup — theme-driven backdrop (review #1)", () => {
+  it("backs logos with --background in the light theme", () => {
+    document.documentElement.setAttribute("data-theme", "light");
+    const { container } = render(<ModelProviderLogoGroup />);
+    expect(container.firstElementChild?.className).toContain("[&>img]:bg-background");
+    expect(container.firstElementChild?.className).not.toContain("[&>img]:bg-foreground");
+  });
+
+  it("backs logos with --foreground in the dark theme", () => {
+    document.documentElement.setAttribute("data-theme", "dark");
+    const { container } = render(<ModelProviderLogoGroup />);
+    expect(container.firstElementChild?.className).toContain("[&>img]:bg-foreground");
+    expect(container.firstElementChild?.className).not.toContain("[&>img]:bg-background");
+  });
+});

package/src/model-provider-logo.tsx

@@ -1,7 +1,32 @@
+"use client";
+
 import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { resolveThemeIsDark } from "@elabs-ai/components-tokens";
 import { BotIcon } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
+/**
+ * Tracks the ACTIVE theme's own `color-scheme` (`resolveThemeIsDark`), not the
+ * two shipped `light`/`dark` themes — a consumer-authored dark theme still
+ * gets an inverted (visible) logo with no registration step (theming.md:
+ * "Use semantic tokens, not `dark:` — `@custom-variant dark` covers only the
+ * themes shipped HERE"). Mirrors `Toaster`'s `useDocumentThemeMode`
+ * (`packages/ui/src/components/sonner/sonner.tsx`).
+ */
+function useIsDarkTheme(): boolean {
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const el = document.documentElement;
+    const read = () => setIsDark(resolveThemeIsDark(el));
+    read();
+    const obs = new MutationObserver(read);
+    obs.observe(el, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => obs.disconnect();
+  }, []);
+  return isDark;
+}
 
 /**
  * Where provider logos are fetched from by default.
@@ -106,6 +131,7 @@ export const ModelProviderLogo = ({
   ...props
 }: ModelProviderLogoProps) => {
   const [failed, setFailed] = useState(false);
+  const isDark = useIsDarkTheme();
 
   // A blocked/missing logo must not leave a broken-image glyph in the row.
   if (failed) {
@@ -122,7 +148,7 @@ export const ModelProviderLogo = ({
     <img
       {...props}
       alt={`${provider} logo`}
-      className={cn("size-3 dark:invert", className)}
+      className={cn("size-3", isDark && "invert", className)}
       height={12}
       onError={(event) => {
         setFailed(true);
@@ -138,12 +164,20 @@ export const ModelProviderLogo = ({
 
 export type ModelProviderLogoGroupProps = ComponentProps<"div">;
 
-export const ModelProviderLogoGroup = ({ className, ...props }: ModelProviderLogoGroupProps) => (
-  <div
-    className={cn(
-      "flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground",
-      className,
-    )}
-    {...props}
-  />
-);
+export const ModelProviderLogoGroup = ({ className, ...props }: ModelProviderLogoGroupProps) => {
+  // Same active-theme signal as the single logo above (not the two shipped
+  // `light`/`dark` themes) — the backdrop swaps to `--foreground` so a
+  // transparent-background SVG still reads against a dark chip in ANY dark
+  // theme a consumer registers.
+  const isDark = useIsDarkTheme();
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:p-px [&>img]:ring-1",
+        isDark ? "[&>img]:bg-foreground" : "[&>img]:bg-background",
+        className,
+      )}
+      {...props}
+    />
+  );
+};

package/src/open-in-chat.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@elabs-ai/components-ui";
+import { Button, useLocale } from "@elabs-ai/components-ui";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -23,11 +23,11 @@ const providers = {
       })}`,
     icon: (
       <svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <title>OpenAI</title>
+        <title>OpenAI</title> {/* i18n-exempt: brand name */}
         <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
       </svg>
     ),
-    title: "Open in ChatGPT",
+    title: "ChatGPT", // i18n-exempt: brand name
   },
   claude: {
     createUrl: (q: string) =>
@@ -36,7 +36,7 @@ const providers = {
       })}`,
     icon: (
       <svg fill="currentColor" role="img" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-        <title>Claude</title>
+        <title>Claude</title> {/* i18n-exempt: brand name */}
         <path
           clipRule="evenodd"
           d="M2.3545 7.9775L4.7145 6.654L4.7545 6.539L4.7145 6.475H4.6L4.205 6.451L2.856 6.4145L1.6865 6.366L0.5535 6.305L0.268 6.2445L0 5.892L0.0275 5.716L0.2675 5.5555L0.6105 5.5855L1.3705 5.637L2.5095 5.716L3.3355 5.7645L4.56 5.892H4.7545L4.782 5.8135L4.715 5.7645L4.6635 5.716L3.4845 4.918L2.2085 4.074L1.5405 3.588L1.1785 3.3425L0.9965 3.1115L0.9175 2.6075L1.2455 2.2465L1.686 2.2765L1.7985 2.307L2.245 2.65L3.199 3.388L4.4445 4.3045L4.627 4.4565L4.6995 4.405L4.709 4.3685L4.627 4.2315L3.9495 3.0085L3.2265 1.7635L2.9045 1.2475L2.8195 0.938C2.78711 0.819128 2.76965 0.696687 2.7675 0.5735L3.1415 0.067L3.348 0L3.846 0.067L4.056 0.249L4.366 0.956L4.867 2.0705L5.6445 3.5855L5.8725 4.0345L5.994 4.4505L6.0395 4.578H6.1185V4.505L6.1825 3.652L6.301 2.6045L6.416 1.257L6.456 0.877L6.644 0.422L7.0175 0.176L7.3095 0.316L7.5495 0.6585L7.516 0.8805L7.373 1.806L7.0935 3.2575L6.9115 4.2285H7.0175L7.139 4.1075L7.6315 3.4545L8.4575 2.4225L8.8225 2.0125L9.2475 1.5605L9.521 1.345H10.0375L10.4175 1.9095L10.2475 2.4925L9.7155 3.166L9.275 3.737L8.643 4.587L8.248 5.267L8.2845 5.322L8.3785 5.312L9.8065 5.009L10.578 4.869L11.4985 4.7115L11.915 4.9055L11.9605 5.103L11.7965 5.5065L10.812 5.7495L9.6575 5.9805L7.938 6.387L7.917 6.402L7.9415 6.4325L8.716 6.5055L9.047 6.5235H9.858L11.368 6.636L11.763 6.897L12 7.216L11.9605 7.4585L11.353 7.7685L10.533 7.574L8.6185 7.119L7.9625 6.9545H7.8715V7.0095L8.418 7.5435L9.421 8.4485L10.6755 9.6135L10.739 9.9025L10.578 10.13L10.408 10.1055L9.3055 9.277L8.88 8.9035L7.917 8.0935H7.853V8.1785L8.075 8.503L9.2475 10.2635L9.3085 10.8035L9.2235 10.98L8.9195 11.0865L8.5855 11.0255L7.8985 10.063L7.191 8.9795L6.6195 8.008L6.5495 8.048L6.2125 11.675L6.0545 11.86L5.69 12L5.3865 11.7695L5.2255 11.396L5.3865 10.658L5.581 9.696L5.7385 8.931L5.8815 7.981L5.9665 7.665L5.9605 7.644L5.8905 7.653L5.1735 8.6365L4.0835 10.109L3.2205 11.0315L3.0135 11.1135L2.655 10.9285L2.6885 10.5975L2.889 10.303L4.083 8.785L4.803 7.844L5.268 7.301L5.265 7.222H5.2375L2.066 9.28L1.501 9.353L1.2575 9.125L1.288 8.752L1.4035 8.6305L2.3575 7.9745L2.3545 7.9775Z"
@@ -44,7 +44,7 @@ const providers = {
         />
       </svg>
     ),
-    title: "Open in Claude",
+    title: "Claude", // i18n-exempt: brand name
   },
   cursor: {
     createUrl: (text: string) => {
@@ -54,24 +54,24 @@ const providers = {
     },
     icon: (
       <svg version="1.1" viewBox="0 0 466.73 532.09" xmlns="http://www.w3.org/2000/svg">
-        <title>Cursor</title>
+        <title>Cursor</title> {/* i18n-exempt: brand name */}
         <path
           d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"
           fill="currentColor"
         />
       </svg>
     ),
-    title: "Open in Cursor",
+    title: "Cursor", // i18n-exempt: brand name
   },
   github: {
     createUrl: (url: string) => url,
     icon: (
       <svg fill="currentColor" role="img" viewBox="0 0 24 24">
-        <title>GitHub</title>
+        <title>GitHub</title> {/* i18n-exempt: brand name */}
         <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
       </svg>
     ),
-    title: "Open in GitHub",
+    title: "GitHub", // i18n-exempt: brand name
   },
   scira: {
     createUrl: (q: string) =>
@@ -86,7 +86,7 @@ const providers = {
         width="910"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <title>Scira AI</title>
+        <title>Scira AI</title> {/* i18n-exempt: brand name */}
         <path
           d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
           fill="currentColor"
@@ -136,7 +136,7 @@ const providers = {
         />
       </svg>
     ),
-    title: "Open in Scira",
+    title: "Scira", // i18n-exempt: brand name
   },
   t3: {
     createUrl: (q: string) =>
@@ -144,7 +144,7 @@ const providers = {
         q,
       })}`,
     icon: <MessageCircleIcon />,
-    title: "Open in T3 Chat",
+    title: "T3 Chat", // i18n-exempt: brand name
   },
   v0: {
     createUrl: (q: string) =>
@@ -158,7 +158,7 @@ const providers = {
         <path d="M147 56H133V23.9531L100.953 56H133V70H96.6875C85.8144 70 77 61.1856 77 50.3125V14H91V46.1562L123.156 14H91V0H127.312C138.186 0 147 8.81439 147 19.6875V56Z" />
       </svg>
     ),
-    title: "Open in v0",
+    title: "v0", // i18n-exempt: brand name
   },
 };
 
@@ -208,21 +208,25 @@ export const OpenInSeparator = (props: OpenInSeparatorProps) => (
 
 export type OpenInTriggerProps = ComponentProps<typeof DropdownMenuTrigger>;
 
-export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => (
-  <DropdownMenuTrigger {...props} asChild>
-    {children ?? (
-      <Button type="button" variant="outline">
-        Open in chat
-        <ChevronDownIcon className="size-4" />
-      </Button>
-    )}
-  </DropdownMenuTrigger>
-);
+export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => {
+  const { t } = useLocale();
+  return (
+    <DropdownMenuTrigger {...props} asChild>
+      {children ?? (
+        <Button type="button" variant="outline">
+          {t("ai.openInChat.trigger")}
+          <ChevronDownIcon className="size-4" />
+        </Button>
+      )}
+    </DropdownMenuTrigger>
+  );
+};
 
 export type OpenInChatGPTProps = ComponentProps<typeof DropdownMenuItem>;
 
 export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
   const { query } = useOpenInContext();
+  const { t } = useLocale();
   return (
     <DropdownMenuItem asChild {...props}>
       <a
@@ -232,7 +236,9 @@ export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
         target="_blank"
       >
         <span className="shrink-0">{providers.chatgpt.icon}</span>
-        <span className="flex-1">{providers.chatgpt.title}</span>
+        <span className="flex-1">
+          {t("ai.openInChat.openInProvider", { provider: providers.chatgpt.title })}
+        </span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
     </DropdownMenuItem>
@@ -243,6 +249,7 @@ export type OpenInClaudeProps = ComponentProps<typeof DropdownMenuItem>;
 
 export const OpenInClaude = (props: OpenInClaudeProps) => {
   const { query } = useOpenInContext();
+  const { t } = useLocale();
   return (
     <DropdownMenuItem asChild {...props}>
       <a
@@ -252,7 +259,9 @@ export const OpenInClaude = (props: OpenInClaudeProps) => {
         target="_blank"
       >
         <span className="shrink-0">{providers.claude.icon}</span>
-        <span className="flex-1">{providers.claude.title}</span>
+        <span className="flex-1">
+          {t("ai.openInChat.openInProvider", { provider: providers.claude.title })}
+        </span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
     </DropdownMenuItem>
@@ -263,6 +272,7 @@ export type OpenInT3Props = ComponentProps<typeof DropdownMenuItem>;
 
 export const OpenInT3 = (props: OpenInT3Props) => {
   const { query } = useOpenInContext();
+  const { t } = useLocale();
   return (
     <DropdownMenuItem asChild {...props}>
       <a
@@ -272,7 +282,9 @@ export const OpenInT3 = (props: OpenInT3Props) => {
         target="_blank"
       >
         <span className="shrink-0">{providers.t3.icon}</span>
-        <span className="flex-1">{providers.t3.title}</span>
+        <span className="flex-1">
+          {t("ai.openInChat.openInProvider", { provider: providers.t3.title })}
+        </span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
     </DropdownMenuItem>
@@ -283,6 +295,7 @@ export type OpenInSciraProps = ComponentProps<typeof DropdownMenuItem>;
 
 export const OpenInScira = (props: OpenInSciraProps) => {
   const { query } = useOpenInContext();
+  const { t } = useLocale();
   return (
     <DropdownMenuItem asChild {...props}>
       <a
@@ -292,7 +305,9 @@ export const OpenInScira = (props: OpenInSciraProps) => {
         target="_blank"
       >
         <span className="shrink-0">{providers.scira.icon}</span>
-        <span className="flex-1">{providers.scira.title}</span>
+        <span className="flex-1">
+          {t("ai.openInChat.openInProvider", { provider: providers.scira.title })}
+        </span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
     </DropdownMenuItem>
@@ -303,6 +318,7 @@ export type OpenInv0Props = ComponentProps<typeof DropdownMenuItem>;
 
 export const OpenInv0 = (props: OpenInv0Props) => {
   const { query } = useOpenInContext();
+  const { t } = useLocale();
   return (
     <DropdownMenuItem asChild {...props}>
       <a
@@ -312,7 +328,9 @@ export const OpenInv0 = (props: OpenInv0Props) => {
         target="_blank"
       >
         <span className="shrink-0">{providers.v0.icon}</span>
-        <span className="flex-1">{providers.v0.title}</span>
+        <span className="flex-1">
+          {t("ai.openInChat.openInProvider", { provider: providers.v0.title })}
+        </span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
     </DropdownMenuItem>
@@ -323,6 +341,7 @@ export type OpenInCursorProps = ComponentProps<typeof DropdownMenuItem>;
 
 export const OpenInCursor = (props: OpenInCursorProps) => {
   const { query } = useOpenInContext();
+  const { t } = useLocale();
   return (
     <DropdownMenuItem asChild {...props}>
       <a
@@ -332,7 +351,9 @@ export const OpenInCursor = (props: OpenInCursorProps) => {
         target="_blank"
       >
         <span className="shrink-0">{providers.cursor.icon}</span>
-        <span className="flex-1">{providers.cursor.title}</span>
+        <span className="flex-1">
+          {t("ai.openInChat.openInProvider", { provider: providers.cursor.title })}
+        </span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
     </DropdownMenuItem>