@opengeni/react 0.57.0 → 1.0.2-canary.37191796234001

package/src/components/artifacts/chat-interactive-block.tsx

@@ -0,0 +1,260 @@
+import type { OpenGeniClient, ToolGatewayIdentity } from "@opengeni/sdk";
+import { useEffect, useMemo, useState } from "react";
+
+import { loadSiteSnapshot } from "../../sites-ui";
+import { useOpenGeniLinkResolver } from "../open-geni-links";
+import {
+  ArtifactButton,
+  ArtifactLabelsProvider,
+  ArtifactSelect,
+  useArtifactLabels,
+  type ArtifactLabels,
+} from "./artifact-chrome";
+import { ArtifactSandbox } from "./artifact-sandbox";
+import { DeferredChatMedia } from "./deferred-chat-media";
+import { inlineHtmlDocument } from "./inline-html-document";
+import type { PublishedHtmlArtifactToolBridge } from "./published-html-artifact-frame";
+
+// Fixed chat viewports keep async Site loads and fragment resize messages from
+// moving the conversation. Full-screen remains available for larger content.
+const INLINE_PREVIEW_HEIGHT = 360;
+const SITE_PREVIEW_HEIGHT = 400;
+const PREVIEW_CHROME_HEIGHT = 50;
+
+/** Reads a Site needs to render; the console client, the SDK client, or a proxy. */
+export type SiteSnapshotClient = Pick<
+  OpenGeniClient,
+  "getWorkspaceArtifact" | "getWorkspaceArtifactHtml"
+> &
+  Partial<Pick<OpenGeniClient, "getWorkspaceArtifactContent">>;
+
+/** The exact saved Site a tool bridge is pinned to (absent for inline HTML). */
+export type SiteToolScope = {
+  artifactId: string;
+  siteVersionId: string;
+  requestedTools: readonly ToolGatewayIdentity[];
+};
+
+/** Host-owned Site API access. Omit it and Sites render without workspace tools. */
+export type SiteToolBridgeFactory = (
+  site?: SiteToolScope,
+) => PublishedHtmlArtifactToolBridge | undefined;
+
+export type ChatInteractiveBlockProps = {
+  workspaceId: string;
+  kind: "html" | "site";
+  content: string;
+  client: SiteSnapshotClient;
+  toolBridge?: SiteToolBridgeFactory | undefined;
+  theme?: "light" | "dark" | undefined;
+  /** Translations for the preview's copy; defaults to English. */
+  labels?: Partial<ArtifactLabels> | undefined;
+};
+
+/**
+ * Inline preview for an assistant `opengeni-html` or `opengeni-site` fence, as
+ * the OpenGeni console renders it. "Open Site" goes through the nearest
+ * `resolveLink`, so a host decides where a Site opens.
+ */
+export function ChatInteractiveBlock({ labels, ...props }: ChatInteractiveBlockProps) {
+  return (
+    <ArtifactLabelsProvider labels={labels}>
+      <InteractiveBlock {...props} />
+    </ArtifactLabelsProvider>
+  );
+}
+
+function InteractiveBlock(props: ChatInteractiveBlockProps) {
+  const labels = useArtifactLabels();
+  const height =
+    (props.kind === "html" ? INLINE_PREVIEW_HEIGHT : SITE_PREVIEW_HEIGHT) + PREVIEW_CHROME_HEIGHT;
+  return (
+    <DeferredChatMedia
+      key={`${props.workspaceId}:${props.kind}:${props.kind === "site" ? props.content : "inline"}`}
+      height={height}
+      actionLabel={props.kind === "html" ? labels.loadPreview : labels.loadSitePreview}
+    >
+      <div style={{ height }}>
+        <LoadedChatInteractiveBlock {...props} />
+      </div>
+    </DeferredChatMedia>
+  );
+}
+
+function LoadedChatInteractiveBlock(props: ChatInteractiveBlockProps) {
+  const labels = useArtifactLabels();
+  if (props.kind === "html") return <InlineHtml {...props} />;
+  try {
+    const value = JSON.parse(props.content);
+    if (
+      !value ||
+      typeof value.siteId !== "string" ||
+      !/^[0-9a-f-]{36}$/i.test(value.siteId) ||
+      (value.versionId !== undefined &&
+        (typeof value.versionId !== "string" || !/^[0-9a-f-]{36}$/i.test(value.versionId)))
+    )
+      throw new Error("Invalid Site reference");
+    return (
+      <SiteEmbed
+        key={`${props.workspaceId}:${value.siteId}:${value.versionId ?? "current"}`}
+        {...props}
+        siteId={value.siteId}
+        initialVersionId={value.versionId}
+      />
+    );
+  } catch {
+    return <p role="alert">{labels.siteReferenceInvalid}</p>;
+  }
+}
+
+function InlineHtml({ content, toolBridge, theme }: ChatInteractiveBlockProps) {
+  const labels = useArtifactLabels();
+  const html = useMemo(() => inlineHtmlDocument(content), [content]);
+  const bridge = useMemo(() => toolBridge?.(), [toolBridge]);
+  return (
+    <ArtifactSandbox
+      title={labels.preview}
+      showTitle={false}
+      showLiveStatus={false}
+      html={html}
+      toolBridge={bridge}
+      height={INLINE_PREVIEW_HEIGHT}
+      className="h-full"
+      fill
+      theme={theme}
+    />
+  );
+}
+
+function SiteEmbed(
+  props: ChatInteractiveBlockProps & { siteId: string; initialVersionId?: string },
+) {
+  const [versionId, setVersionId] = useState(props.initialVersionId);
+  return (
+    <SiteEmbedContent
+      key={versionId ?? "current"}
+      {...props}
+      versionId={versionId}
+      onVersionChange={setVersionId}
+    />
+  );
+}
+
+function SiteEmbedContent({
+  workspaceId,
+  client,
+  toolBridge,
+  theme,
+  siteId,
+  versionId,
+  onVersionChange,
+}: ChatInteractiveBlockProps & {
+  siteId: string;
+  versionId?: string | undefined;
+  onVersionChange: (id: string) => void;
+}) {
+  const [loaded, setLoaded] = useState<{
+    client: SiteSnapshotClient;
+    snapshot: Awaited<ReturnType<typeof loadSiteSnapshot>>;
+  } | null>(null);
+  const snapshot = loaded?.client === client ? loaded.snapshot : null;
+  const [error, setError] = useState(false);
+  const [retry, setRetry] = useState(0);
+  useEffect(() => {
+    const abort = new AbortController();
+    setError(false);
+    setLoaded(null);
+    void loadSiteSnapshot(client, workspaceId, siteId, {
+      signal: abort.signal,
+      ...(versionId ? { versionId } : {}),
+    })
+      .then((value) => {
+        if (!abort.signal.aborted) setLoaded({ client, snapshot: value });
+      })
+      .catch(() => {
+        if (!abort.signal.aborted) setError(true);
+      });
+    return () => abort.abort();
+  }, [client, workspaceId, siteId, versionId, retry]);
+  const content = snapshot?.content;
+  const bridge = useMemo(
+    () =>
+      content
+        ? toolBridge?.({
+            artifactId: siteId,
+            siteVersionId: content.versionId,
+            requestedTools: content.requestedTools,
+          })
+        : undefined,
+    [toolBridge, siteId, content],
+  );
+  const open = useOpenGeniLinkResolver()?.({ kind: "site", artifactId: siteId, workspaceId });
+  const labels = useArtifactLabels();
+  if (error)
+    return (
+      <p role="alert">
+        {labels.siteLoadFailed}{" "}
+        <ArtifactButton size="sm" onClick={() => setRetry((v) => v + 1)}>
+          {labels.retry}
+        </ArtifactButton>
+      </p>
+    );
+  if (!snapshot) return <p role="status">{labels.loadingSite}</p>;
+  if (!content) return <p>{labels.siteUnpublished}</p>;
+  return (
+    <ArtifactSandbox
+      title={snapshot.detail.artifact.title}
+      html={content.html}
+      toolBridge={bridge}
+      height={SITE_PREVIEW_HEIGHT}
+      className="h-full"
+      fill
+      theme={theme}
+      headerControls={
+        <>
+          {/* One published version has nothing to choose; keep the bar for the title. */}
+          {snapshot.detail.versions.length > 1 ||
+          !snapshot.detail.versions.some((v) => v.id === content.versionId) ? (
+            <ArtifactSelect
+              aria-label={labels.siteVersion}
+              className="bg-transparent text-xs"
+              value={content.versionId}
+              onChange={(e) => onVersionChange(e.target.value)}
+            >
+              {!snapshot.detail.versions.some((v) => v.id === content.versionId) && (
+                <option value={content.versionId}>{labels.savedVersion}</option>
+              )}
+              {snapshot.detail.versions.map((v) => (
+                <option key={v.id} value={v.id}>
+                  {labels.version(v.revision)}
+                </option>
+              ))}
+            </ArtifactSelect>
+          ) : null}
+          {open?.href ? (
+            <a
+              className="shrink-0 whitespace-nowrap text-xs underline"
+              href={open.href}
+              data-og-open-site=""
+            >
+              {labels.openSite}
+            </a>
+          ) : open?.open ? (
+            <button
+              type="button"
+              className="shrink-0 cursor-pointer whitespace-nowrap text-xs underline"
+              data-og-open-site=""
+              onClick={() =>
+                void Promise.resolve()
+                  .then(open.open)
+                  .catch(() => undefined)
+              }
+            >
+              {labels.openSite}
+            </button>
+          ) : null}
+        </>
+      }
+    />
+  );
+}

package/src/components/artifacts/deferred-chat-media.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+/**
+ * Reserve the chat slot before starting expensive media work. Activation is
+ * one-way: scrolling away must not discard an interactive preview's state.
+ * The timeline parks at its initial tip in layout effects before this observer
+ * is attached, so historical previews above the entry viewport stay dormant.
+ */
+export function DeferredChatMedia({
+  children,
+  height,
+  label,
+  actionLabel,
+}: {
+  children: ReactNode;
+  height: number;
+  /** What is loading, as in "Load {label}". */
+  label?: string | undefined;
+  /** The complete (translated) activation label; overrides `label`. */
+  actionLabel?: string | undefined;
+}) {
+  const host = useRef<HTMLDivElement>(null);
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    const node = host.current;
+    if (active || !node) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setActive(true);
+      return;
+    }
+    let disposed = false;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (disposed || !entries.some((entry) => entry.isIntersecting)) return;
+        setActive(true);
+        observer.disconnect();
+      },
+      {
+        root: node.closest("[data-og-timeline-scroller]"),
+        rootMargin: "200px 0px",
+      },
+    );
+    observer.observe(node);
+    return () => {
+      disposed = true;
+      observer.disconnect();
+    };
+  }, [active]);
+
+  return (
+    <div ref={host} data-chat-media={active ? "active" : "deferred"}>
+      {active ? (
+        children
+      ) : (
+        <div className="flex w-full items-center justify-center" style={{ height }}>
+          <button
+            type="button"
+            className="rounded-md px-3 py-2 text-sm text-fg-muted hover:text-fg focus-visible:outline-2 focus-visible:outline-ring"
+            onClick={() => setActive(true)}
+          >
+            {actionLabel ?? `Load ${label ?? "media"}`}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/artifacts/document-editor.tsx

@@ -204,6 +204,7 @@ export type DocumentProjectionArtifactSurfaceProps = Omit<
   "ariaLabel" | "className"
 > & {
   title: string;
+  showHeader?: boolean | undefined;
   subtitle?: ReactNode | undefined;
   busy?: boolean | undefined;
   className?: string | undefined;
@@ -212,6 +213,7 @@ export type DocumentProjectionArtifactSurfaceProps = Omit<
 
 export type DocumentArtifactSurfaceProps = Omit<DocumentEditorProps, "ariaLabel" | "className"> & {
   title: string;
+  showHeader?: boolean | undefined;
   subtitle?: ReactNode | undefined;
   busy?: boolean | undefined;
   className?: string | undefined;
@@ -899,7 +901,7 @@ function DocumentEditorCore({
                 <button
                   type="button"
                   onClick={addFirstParagraph}
-                  className="mt-3 rounded-og-md border border-og-border bg-og-surface-1 px-3 py-1.5 text-og-sm text-og-fg hover:bg-og-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent"
+                  className="mt-3 rounded-og-md border border-og-primary-border bg-og-primary px-3 py-1.5 text-og-sm text-og-primary-fg hover:bg-og-primary-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent"
                 >
                   Start writing
                 </button>
@@ -907,10 +909,27 @@ function DocumentEditorCore({
             </div>
           </div>
         ) : (
-          <div className="relative min-w-full" style={{ height: axis.total }}>
+          <div
+            className="relative min-w-full"
+            style={{
+              height: axis.total,
+              minWidth:
+                layout === "paginated"
+                  ? pages.reduce(
+                      (width, page) =>
+                        Math.max(
+                          width,
+                          page.page.widthPt * POINT_TO_CSS_PIXEL * page.renderScale + 32,
+                        ),
+                      0,
+                    )
+                  : undefined,
+            }}
+          >
             {mountedIndexes.map((pageIndex) => {
               const page = pages[pageIndex]!;
               const top = axis.offsets[pageIndex]!;
+              const pageWidth = page.page.widthPt * POINT_TO_CSS_PIXEL * page.renderScale;
               return (
                 <article
                   key={page.key}
@@ -923,19 +942,23 @@ function DocumentEditorCore({
                   className={cn(
                     "absolute overflow-hidden",
                     layout === "paginated"
-                      ? "left-1/2 -translate-x-1/2 border shadow-og-sm"
+                      ? "border shadow-og-sm"
                       : "left-0 right-0 border-b border-og-border bg-og-surface-1 text-og-fg",
                   )}
                   style={{
                     top,
+                    // Center against the visible viewport, not the shared width
+                    // reserved for the widest section in this document.
+                    left:
+                      layout === "paginated"
+                        ? Math.max(16, (measuredViewport.width - pageWidth) / 2)
+                        : undefined,
                     color: layout === "paginated" ? "#171717" : undefined,
                     backgroundColor: layout === "paginated" ? "#fff" : undefined,
                     borderColor: layout === "paginated" ? "#0000001a" : undefined,
-                    width:
-                      layout === "paginated"
-                        ? page.page.widthPt * POINT_TO_CSS_PIXEL * page.renderScale
-                        : undefined,
+                    width: layout === "paginated" ? pageWidth : undefined,
                     height: page.height,
+                    containerType: layout === "continuous" ? "inline-size" : undefined,
                   }}
                 >
                   <MeasuredPageBody
@@ -998,6 +1021,7 @@ function DocumentEditorCore({
 export function DocumentArtifactSurface({
   document,
   title,
+  showHeader,
   subtitle,
   busy,
   className,
@@ -1008,6 +1032,7 @@ export function DocumentArtifactSurface({
     <ArtifactSurface
       modality="document"
       title={title}
+      showHeader={showHeader}
       subtitle={subtitle}
       busy={busy}
       className={className}
@@ -1026,6 +1051,7 @@ export function DocumentArtifactSurface({
 export function DocumentProjectionArtifactSurface({
   projection,
   title,
+  showHeader,
   subtitle,
   busy,
   className,
@@ -1036,6 +1062,7 @@ export function DocumentProjectionArtifactSurface({
     <ArtifactSurface
       modality="document"
       title={title}
+      showHeader={showHeader}
       subtitle={subtitle}
       busy={busy}
       className={className}
@@ -1261,6 +1288,7 @@ const ParagraphLeaf = memo(
     onKeyDown,
   }: ParagraphLeafProps) {
     const composing = useRef(false);
+    const suppressNextEnter = useRef(false);
     const Tag = headingTag(paragraph.style.headingLevel);
     const label =
       paragraph.style.list?.kind === "number"
@@ -1292,6 +1320,15 @@ const ParagraphLeaf = memo(
         }}
         onCompositionEnd={(event) => {
           composing.current = false;
+          // IME commit Enter often arrives in the same turn as compositionend.
+          // Suppress that key so it cannot also insert a trailing newline, but
+          // clear before the next task so a later explicit Enter still works.
+          suppressNextEnter.current = true;
+          queueMicrotask(() => {
+            suppressNextEnter.current = false;
+          });
+          syncTrailingBreak(event.currentTarget);
+          stabilizeCaretAfterTrailingNewline(event.currentTarget);
           onInput(paragraph, event.currentTarget.textContent ?? "");
           onSelection(paragraph);
         }}
@@ -1316,15 +1353,18 @@ const ParagraphLeaf = memo(
         onKeyDown={(event) => {
           onKeyDown(event, paragraph);
           if (event.defaultPrevented || readOnly) return;
-          if (event.key === "Enter" && !event.metaKey && !event.ctrlKey && !event.altKey) {
-            event.preventDefault();
-            insertPlainText(event.currentTarget, "\n");
-            onInput(paragraph, event.currentTarget.textContent ?? "");
-            onSelection(paragraph);
-          }
+          if (event.key !== "Enter" || event.metaKey || event.ctrlKey || event.altKey) return;
+          if (isDocumentImeComposing(event, composing.current)) return;
+          event.preventDefault();
+          if (suppressNextEnter.current) return;
+          insertPlainText(event.currentTarget, "\n");
+          onInput(paragraph, event.currentTarget.textContent ?? "");
+          onSelection(paragraph);
         }}
         onInput={(event) => {
           if (!composing.current && !(event.nativeEvent as InputEvent).isComposing) {
+            syncTrailingBreak(event.currentTarget);
+            stabilizeCaretAfterTrailingNewline(event.currentTarget);
             onInput(paragraph, event.currentTarget.textContent ?? "");
           }
         }}
@@ -1348,6 +1388,9 @@ const ParagraphLeaf = memo(
             {segment.text}
           </span>
         ))}
+        {segments.at(-1)?.text.endsWith("\n") ? (
+          <br data-og-trailing-break="" aria-hidden="true" />
+        ) : null}
       </Tag>
     );
   },
@@ -1366,11 +1409,12 @@ function DocumentTableView({
   viewBlockId: string;
 }) {
   const columnWidths = table.style.columnWidthsPt;
+  const headerColor = tableHeaderTextColor(table.style.headerFill);
   return (
     <div
       data-og-document-block={viewBlockId}
       data-og-block-kind="table"
-      className="overflow-x-auto py-2"
+      className="w-full max-w-full overflow-x-auto py-2"
     >
       <table
         className="w-full border-collapse text-left"
@@ -1406,6 +1450,8 @@ function DocumentTableView({
                     style={{
                       borderColor: table.style.borderColor ?? "#d1d5db",
                       background: header ? (table.style.headerFill ?? "#f3f4f6") : undefined,
+                      // An explicitly colored run still owns its authored text style.
+                      color: header ? headerColor : undefined,
                       padding: `${table.style.cellPaddingPt ?? 6}pt`,
                     }}
                   >
@@ -1427,6 +1473,42 @@ function DocumentTableView({
   );
 }
 
+/** Choose a theme-independent header color only when both light and dark backdrops allow one. */
+function tableHeaderTextColor(fill: string | undefined): string | undefined {
+  if (!fill) return "#171717";
+  const hex = /^#([\da-f]{3}|[\da-f]{6}|[\da-f]{8})$/i.exec(fill)?.[1];
+  if (!hex) return undefined;
+  const channels =
+    hex.length === 3
+      ? [...hex].map((digit) => Number.parseInt(digit + digit, 16))
+      : [0, 2, 4].map((index) => Number.parseInt(hex.slice(index, index + 2), 16));
+  const alpha = hex.length === 8 ? Number.parseInt(hex.slice(6), 16) / 255 : 1;
+  const luminanceOn = (backdrop: number) => {
+    const linear = channels.map((channel) => {
+      const normalized = (channel * alpha + backdrop * (1 - alpha)) / 255;
+      return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+    });
+    return linear[0]! * 0.2126 + linear[1]! * 0.7152 + linear[2]! * 0.0722;
+  };
+  // A paginated page is white; a continuous page follows its theme. For alpha
+  // fills, choose a fixed foreground only if it contrasts on both extremes.
+  const backdrops = alpha < 1 ? [luminanceOn(0), luminanceOn(255)] : [luminanceOn(255)];
+  const darkTextLuminance = ((23 / 255 + 0.055) / 1.055) ** 2.4;
+  const whiteContrast = Math.min(...backdrops.map((value) => 1.05 / (value + 0.05)));
+  const darkContrast = Math.min(
+    ...backdrops.map(
+      (value) =>
+        (Math.max(value, darkTextLuminance) + 0.05) / (Math.min(value, darkTextLuminance) + 0.05),
+    ),
+  );
+  if (Math.max(whiteContrast, darkContrast) < 4.5) {
+    // Opaque midtones need pure black where the softer #171717 cannot meet
+    // normal-text contrast. Translucent fills inherit the theme's text color.
+    return alpha < 1 ? undefined : "#000";
+  }
+  return whiteContrast > darkContrast ? "#fff" : "#171717";
+}
+
 function ToolbarButton({
   label,
   shortcut,
@@ -1617,7 +1699,9 @@ function responsiveDocumentPageScale(
 ): number {
   if (viewportWidth <= 0) return 1;
   const naturalWidth = page.widthPt * POINT_TO_CSS_PIXEL;
-  return Math.min(1, Math.max(0.1, (viewportWidth - 32) / naturalWidth));
+  // Below this scale the page text becomes too small to read in a narrow dock.
+  // The viewport can pan horizontally without changing the chosen layout.
+  return Math.min(1, Math.max(0.75, (viewportWidth - 32) / naturalWidth));
 }
 
 function pageContentStyle(
@@ -1626,7 +1710,7 @@ function pageContentStyle(
 ): CSSProperties {
   if (layout === "continuous") {
     return {
-      padding: "24px clamp(24px, 8vw, 96px)",
+      padding: "24px clamp(12px, 4cqw, 72px)",
     };
   }
   return {
@@ -1753,6 +1837,45 @@ function selectionOffsets(root: HTMLElement | undefined): { start: number; end:
   };
 }
 
+const TRAILING_BREAK_ATTR = "data-og-trailing-break";
+
+function isDocumentImeComposing(
+  event: ReactKeyboardEvent<HTMLElement>,
+  composing: boolean,
+): boolean {
+  const native = event.nativeEvent;
+  return composing || native.isComposing === true || native.keyCode === 229;
+}
+
+function syncTrailingBreak(root: HTMLElement): void {
+  const existing = root.querySelector(`br[${TRAILING_BREAK_ATTR}]`);
+  const needsBreak = (root.textContent ?? "").endsWith("\n");
+  if (needsBreak && !existing) {
+    const br = globalThis.document.createElement("br");
+    br.setAttribute(TRAILING_BREAK_ATTR, "");
+    br.setAttribute("aria-hidden", "true");
+    root.appendChild(br);
+  } else if (!needsBreak && existing) {
+    existing.remove();
+  }
+}
+
+function stabilizeCaretAfterTrailingNewline(root: HTMLElement): void {
+  const text = root.textContent ?? "";
+  if (!text.endsWith("\n")) return;
+  const selection = globalThis.getSelection?.();
+  if (!selection || selection.rangeCount === 0 || !selection.isCollapsed) return;
+  const offsets = selectionOffsets(root);
+  if (!offsets || offsets.start !== text.length) return;
+  const br = root.querySelector(`br[${TRAILING_BREAK_ATTR}]`);
+  if (!br) return;
+  const range = globalThis.document.createRange();
+  range.setStartBefore(br);
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
 function insertPlainText(root: HTMLElement, text: string): void {
   const selection = globalThis.getSelection?.();
   if (!selection || selection.rangeCount === 0) return;
@@ -1761,10 +1884,12 @@ function insertPlainText(root: HTMLElement, text: string): void {
   range.deleteContents();
   const node = globalThis.document.createTextNode(text);
   range.insertNode(node);
+  syncTrailingBreak(root);
   range.setStartAfter(node);
   range.collapse(true);
   selection.removeAllRanges();
   selection.addRange(range);
+  stabilizeCaretAfterTrailingNewline(root);
 }
 
 function restoreSelection(

package/src/components/artifacts/editable-artifact-ui.tsx

@@ -60,10 +60,12 @@ export function EditableArtifactMessage({
   title,
   detail,
   retry,
+  retryLabel = "Retry",
 }: {
   title: string;
   detail: string;
   retry?: (() => void) | undefined;
+  retryLabel?: string | undefined;
 }) {
   return (
     <div className="grid h-full min-h-56 place-items-center bg-og-bg p-6 text-center">
@@ -74,9 +76,9 @@ export function EditableArtifactMessage({
           <button
             type="button"
             onClick={retry}
-            className="mt-3 rounded-og-sm bg-og-accent-deep px-3 py-1.5 text-og-sm font-medium text-og-accent-fg outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent"
+            className="mt-3 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-1.5 text-og-sm font-medium hover:bg-og-primary-hover outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent"
           >
-            Retry
+            {retryLabel}
           </button>
         ) : null}
       </div>