@sentry/junior-dashboard 0.268.0 → 0.270.0

package/src/client/conversations/transcriptBottomPinning.ts

@@ -13,10 +13,25 @@ import type { ConversationReportEvent } from "@sentry/junior/api/schema";
 
 import type { ConversationTranscript } from "../types";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
+import {
+  captureScrollAnchor,
+  scrollAnchorShift,
+  type ScrollAnchor,
+} from "./transcriptScrollAnchor";
 
 const BOTTOM_PROXIMITY_PX = 96;
 const PREVIOUS_PAGE_PROXIMITY_PX = 600;
 const USER_SCROLL_DELTA_PX = 2;
+const PIN_START_ATTRIBUTE = "data-transcript-pin-start";
+const PIN_START_MARGIN_PX = 16;
+
+/**
+ * Mark a tall block whose start the reader must see first, such as a Review
+ * item card. The value is a stable id, so each block moves the view only once.
+ */
+export function transcriptPinStartProps(id: string) {
+  return { [PIN_START_ATTRIBUTE]: id };
+}
 
 type ScrollRoot = HTMLElement | Window;
 type PositionMeasureSource = "measure" | "scroll";
@@ -34,17 +49,9 @@ type BottomPinResult = {
   contentRef: RefCallback<HTMLDivElement>;
   hasPendingUpdate: boolean;
   jumpToBottom: () => void;
-  preserveViewportForPrepend: () => void;
   showJumpToLatest: boolean;
 };
 
-type PrependSnapshot = {
-  historyVersion: string;
-  root: ScrollRoot;
-  scrollHeight: number;
-  scrollTop: number;
-};
-
 const useBrowserLayoutEffect =
   typeof window === "undefined" ? useEffect : useLayoutEffect;
 
@@ -300,26 +307,12 @@ export function programmaticSettleScrollAction(input: {
   return "ignore";
 }
 
-/** Decide when a requested history prepend can restore or discard its viewport snapshot. */
-export function prependViewportIntent(input: {
-  currentHistoryVersion: string;
-  loadingPreviousPage: boolean;
-  snapshotHistoryVersion: string;
-}): "discard" | "restore" | "wait" {
-  if (input.loadingPreviousPage) return "wait";
-  if (input.currentHistoryVersion !== input.snapshotHistoryVersion) {
-    return "restore";
-  }
-  return "discard";
-}
-
 /** Keep live transcript updates visually pinned only while the reader intends to follow them. */
 export function usePinnedTranscriptBottom(input: {
   conversationId?: string;
   enabled: boolean;
   historyVersion: string;
   juniorMessageVersion: string;
-  loadingPreviousPage: boolean;
   pinRequestVersion?: number;
   view: TranscriptViewMode;
   versions: Record<TranscriptViewMode, string>;
@@ -331,13 +324,17 @@ export function usePinnedTranscriptBottom(input: {
   const initializedRef = useRef(false);
   const initializedConversationRef = useRef<string | null>(null);
   const previousScrollTopRef = useRef<number | null>(null);
-  const prependSnapshotRef = useRef<PrependSnapshot | null>(null);
+  // The scroll position that the last restore set. Its scroll event is not
+  // a reader scroll, so it must not change follow intent.
+  const restoredScrollTopRef = useRef<number | null>(null);
+  const scrollAnchorRef = useRef<ScrollAnchor | null>(null);
   const pinRequestVersionRef = useRef(input.pinRequestVersion ?? 0);
   const juniorMessageVersionRef = useRef(input.juniorMessageVersion);
   const terminalEnabledRef = useRef(input.enabled);
   const terminalPinPendingRef = useRef(false);
   const versionsRef = useRef(input.versions);
   const programmaticScrollGenerationRef = useRef(0);
+  const seenPinStartsRef = useRef(new Set<string>());
   const [following, setFollowing] = useState(false);
   const [hasPendingUpdate, setHasPendingUpdate] = useState(false);
   const [contentElement, setContentElement] = useState<HTMLDivElement | null>(
@@ -359,15 +356,64 @@ export function usePinnedTranscriptBottom(input: {
     setFollowing(value);
   }, []);
 
+  const rememberPlace = useCallback(() => {
+    const content = contentElementRef.current;
+    const root = scrollRootFor(content);
+    if (!content || !root) return;
+    scrollAnchorRef.current = captureScrollAnchor(
+      content,
+      viewportBounds(root),
+    );
+  }, []);
+
+  // Move by the distance the anchor row moved, so content that grows or
+  // shrinks above the reader does not move what they are reading.
+  const restorePlace = useCallback(() => {
+    const content = contentElementRef.current;
+    const root = scrollRootFor(content);
+    const anchor = scrollAnchorRef.current;
+    if (!content || !root) return;
+    const shift = anchor
+      ? scrollAnchorShift(content, viewportBounds(root), anchor)
+      : null;
+    if (shift !== null && Math.abs(shift) >= 1) {
+      const scrollTop = scrollSnapshot(root).scrollTop + shift;
+      setScrollTop(root, scrollTop);
+      const restored = scrollSnapshot(root).scrollTop;
+      previousScrollTopRef.current = restored;
+      restoredScrollTopRef.current = restored;
+    }
+    rememberPlace();
+  }, [rememberPlace]);
+
+  const leaveBottom = useCallback(() => {
+    if (!followingRef.current) return;
+    const root = scrollRootFor(contentElementRef.current);
+    // Content that fits the viewport has nothing above to read.
+    if (!root || scrollSnapshot(root).scrollTop <= 0) return;
+    programmaticScrollGenerationRef.current = 0;
+    setFollowingIntent(false);
+  }, [setFollowingIntent]);
+
   const measurePosition = useCallback(
     (source: PositionMeasureSource) => {
       const root = scrollRootFor(contentElementRef.current);
       if (!root) return;
 
+      if (source === "scroll") rememberPlace();
       const snapshot = scrollSnapshot(root);
       const previousScrollTop = previousScrollTopRef.current;
       previousScrollTopRef.current = snapshot.scrollTop;
 
+      if (source === "scroll") {
+        const restored = restoredScrollTopRef.current;
+        restoredScrollTopRef.current = null;
+        // A restore near the bottom must not turn follow mode back on.
+        if (restored !== null && Math.abs(snapshot.scrollTop - restored) < 1) {
+          return;
+        }
+      }
+
       const intent = transcriptFollowIntent({
         previousScrollTop,
         snapshot,
@@ -394,7 +440,7 @@ export function usePinnedTranscriptBottom(input: {
         setFollowingIntent(false);
       }
     },
-    [setFollowingIntent],
+    [rememberPlace, setFollowingIntent],
   );
 
   const scrollToBottom = useCallback(
@@ -402,13 +448,26 @@ export function usePinnedTranscriptBottom(input: {
       const root = scrollRootFor(contentElementRef.current);
       if (!root) return;
 
+      // A new block that does not fit shows its start, not its end. Stop
+      // following, so later layout does not move the start out of view.
+      const startTop = newPinStartScrollTop(
+        root,
+        contentElementRef.current,
+        seenPinStartsRef.current,
+      );
+      if (startTop !== null) setFollowingIntent(false);
+
       // Only suppress pin-settle noise while still following. After the reader
       // leaves the bottom, do not open a window that can ignore their scroll.
-      const suppressSettleNoise = followingRef.current;
+      const suppressSettleNoise = startTop !== null || followingRef.current;
       const generation = suppressSettleNoise
         ? ++programmaticScrollGenerationRef.current
         : 0;
-      setScrollTop(root, scrollSnapshot(root).scrollHeight, behavior);
+      setScrollTop(
+        root,
+        startTop ?? scrollSnapshot(root).scrollHeight,
+        behavior,
+      );
 
       const settleProgrammaticScroll = () => {
         if (
@@ -443,18 +502,6 @@ export function usePinnedTranscriptBottom(input: {
     [setFollowingIntent],
   );
 
-  const preserveViewportForPrepend = useCallback(() => {
-    const root = scrollRootFor(contentElementRef.current);
-    if (!root) return;
-    const snapshot = scrollSnapshot(root);
-    prependSnapshotRef.current = {
-      historyVersion: input.historyVersion,
-      root,
-      scrollHeight: snapshot.scrollHeight,
-      scrollTop: snapshot.scrollTop,
-    };
-  }, [input.historyVersion]);
-
   useBrowserLayoutEffect(() => {
     if (!contentElement || !input.conversationId) return;
     if (initializedConversationRef.current === input.conversationId) return;
@@ -472,36 +519,21 @@ export function usePinnedTranscriptBottom(input: {
     setHasPendingUpdate(false);
   }, [contentElement, input.conversationId, setFollowingIntent]);
 
-  useBrowserLayoutEffect(() => {
-    const previous = prependSnapshotRef.current;
-    if (!previous) return;
-
-    const intent = prependViewportIntent({
-      currentHistoryVersion: input.historyVersion,
-      loadingPreviousPage: input.loadingPreviousPage,
-      snapshotHistoryVersion: previous.historyVersion,
-    });
-    if (intent === "restore") {
-      const current = scrollSnapshot(previous.root);
-      setScrollTop(
-        previous.root,
-        scrollTopAfterPrepend(previous, current.scrollHeight),
-      );
-      prependSnapshotRef.current = null;
-      return;
-    }
-
-    if (intent === "discard") prependSnapshotRef.current = null;
-  }, [input.historyVersion, input.loadingPreviousPage]);
-
   const syncAfterLayoutChange = useCallback(() => {
     if (followingRef.current) {
       scrollToBottom("auto");
       return;
     }
 
+    restorePlace();
     measurePosition("measure");
-  }, [measurePosition, scrollToBottom]);
+  }, [measurePosition, restorePlace, scrollToBottom]);
+
+  // An earlier page renders above the reader. Hold their place before paint;
+  // a reader at the bottom stays at the latest message.
+  useBrowserLayoutEffect(() => {
+    syncAfterLayoutChange();
+  }, [input.historyVersion, syncAfterLayoutChange]);
 
   useBrowserLayoutEffect(() => {
     // Compare the same view across snapshots, not one view's tail to another.
@@ -554,22 +586,58 @@ export function usePinnedTranscriptBottom(input: {
   ]);
 
   useEffect(() => {
-    if (typeof window === "undefined") return;
+    if (typeof window === "undefined" || !contentElement) return;
 
     const root = scrollRootFor(contentElement);
     if (!root) return;
 
-    const target: HTMLElement | Window = root === window ? window : root;
+    // Both a scrolling element and the window send these events.
+    const target: GlobalEventHandlers = root;
     const onScroll = () => measurePosition("scroll");
+    // Wheel and touch show intent before the scroll event. A live update in
+    // that gap must not pull a reader who starts to scroll up back down.
+    const onWheel = (event: WheelEvent) => {
+      if (event.deltaY < 0) leaveBottom();
+    };
+    // Compare with the highest finger point in this drag, so small steps
+    // still add up to a drag down.
+    let touchTopY: number | null = null;
+    const onTouchStart = (event: TouchEvent) => {
+      touchTopY = event.touches[0]?.clientY ?? null;
+    };
+    const onTouchMove = (event: TouchEvent) => {
+      const y = event.touches[0]?.clientY;
+      if (y === undefined || touchTopY === null) return;
+      if (y > touchTopY + USER_SCROLL_DELTA_PX) leaveBottom();
+      touchTopY = Math.min(touchTopY, y);
+    };
 
     measurePosition("measure");
+    rememberPlace();
+    // Listen on the scroll root, so gestures outside transcript rows count.
     target.addEventListener("scroll", onScroll, { passive: true });
+    target.addEventListener("wheel", onWheel, { passive: true });
+    target.addEventListener("touchstart", onTouchStart, {
+      passive: true,
+    });
+    target.addEventListener("touchmove", onTouchMove, {
+      passive: true,
+    });
     window.addEventListener("resize", syncAfterLayoutChange);
     return () => {
       target.removeEventListener("scroll", onScroll);
+      target.removeEventListener("wheel", onWheel);
+      target.removeEventListener("touchstart", onTouchStart);
+      target.removeEventListener("touchmove", onTouchMove);
       window.removeEventListener("resize", syncAfterLayoutChange);
     };
-  }, [contentElement, measurePosition, syncAfterLayoutChange]);
+  }, [
+    contentElement,
+    leaveBottom,
+    measurePosition,
+    rememberPlace,
+    syncAfterLayoutChange,
+  ]);
 
   useEffect(() => {
     if (typeof ResizeObserver === "undefined") return;
@@ -633,21 +701,13 @@ export function usePinnedTranscriptBottom(input: {
       contentRef,
       hasPendingUpdate,
       jumpToBottom,
-      preserveViewportForPrepend,
       showJumpToLatest: shouldShowJumpToLatest({
         enabled: input.enabled,
         following,
         hasPendingUpdate,
       }),
     }),
-    [
-      contentRef,
-      following,
-      hasPendingUpdate,
-      input.enabled,
-      jumpToBottom,
-      preserveViewportForPrepend,
-    ],
+    [contentRef, following, hasPendingUpdate, input.enabled, jumpToBottom],
   );
 }
 
@@ -684,14 +744,6 @@ export function useAutoLoadPreviousPage(input: {
   return setSentinel;
 }
 
-/** Keep the previously visible content at the same viewport offset after a prepend. */
-export function scrollTopAfterPrepend(
-  previous: Pick<ScrollSnapshot, "scrollHeight" | "scrollTop">,
-  scrollHeight: number,
-): number {
-  return previous.scrollTop + scrollHeight - previous.scrollHeight;
-}
-
 function scrollRootFor(element: HTMLElement | null): ScrollRoot | null {
   if (typeof window === "undefined") return null;
   if (!element) return window;
@@ -706,6 +758,38 @@ function scrollRootFor(element: HTMLElement | null): ScrollRoot | null {
   return window;
 }
 
+/**
+ * Return the scroll position that shows the start of the last pin-start block,
+ * when a bottom pin would cut off its start. Each block counts once.
+ */
+function newPinStartScrollTop(
+  root: ScrollRoot,
+  content: HTMLElement | null,
+  seen: Set<string>,
+): number | null {
+  const block = content
+    ? Array.from(
+        content.querySelectorAll<HTMLElement>(`[${PIN_START_ATTRIBUTE}]`),
+      ).at(-1)
+    : undefined;
+  const id = block?.getAttribute(PIN_START_ATTRIBUTE);
+  if (!block || !id || seen.has(id)) return null;
+  const rect = block.getBoundingClientRect();
+  // The block has no size until its data loads. Check it again then.
+  if (rect.height === 0) return null;
+  seen.add(id);
+
+  const snapshot = scrollSnapshot(root);
+  const offset =
+    snapshot.scrollTop -
+    (isWindowRoot(root) ? 0 : root.getBoundingClientRect().top);
+  const startTop = rect.top + offset - PIN_START_MARGIN_PX;
+  const bottomTop = snapshot.scrollHeight - snapshot.clientHeight;
+  // Keep the bottom pin when it shows the start, or when the block is above it.
+  if (startTop >= bottomTop || rect.bottom + offset <= bottomTop) return null;
+  return Math.max(0, startTop);
+}
+
 function scrollSnapshot(root: ScrollRoot): ScrollSnapshot {
   if (isWindowRoot(root)) {
     const element = document.scrollingElement ?? document.documentElement;
@@ -735,6 +819,12 @@ function setScrollTop(
   root.scrollTo({ behavior, top: scrollTop });
 }
 
+function viewportBounds(root: ScrollRoot): { bottom: number; top: number } {
+  if (isWindowRoot(root)) return { bottom: window.innerHeight, top: 0 };
+  const top = root.getBoundingClientRect().top;
+  return { bottom: top + root.clientHeight, top };
+}
+
 function isWindowRoot(root: ScrollRoot): root is Window {
   return root === window;
 }

package/src/client/conversations/transcriptScrollAnchor.ts

@@ -0,0 +1,101 @@
+/**
+ * Keep the reader's place while transcript layout changes.
+ *
+ * Rows mark themselves with `data-scroll-anchor`. The anchor is the first row
+ * that starts inside the viewport. When no row starts there, it is the row that
+ * covers the viewport top. After a layout change, the scroll owner moves the
+ * scroll position by the distance that the anchor moved. This covers earlier
+ * pages, late images, and deferred rendering above the reader.
+ *
+ * Transcript content turns off browser scroll anchoring. Safari does not
+ * support it, so one rule keeps every browser the same.
+ */
+
+const SCROLL_ANCHOR_ATTRIBUTE = "data-scroll-anchor";
+
+/** A row and its offset from the viewport top when the reader last moved. */
+export type ScrollAnchor = {
+  element: HTMLElement;
+  key: string;
+  offset: number;
+};
+
+type VerticalBounds = { bottom: number; top: number };
+
+/**
+ * Find the anchor row in rows that are in document order.
+ *
+ * Rows do not overlap, so a binary search finds the first row below the
+ * viewport top with a few layout reads.
+ */
+export function scrollAnchorIndex(
+  count: number,
+  rowAt: (index: number) => VerticalBounds,
+  viewport: VerticalBounds,
+): number | null {
+  let low = 0;
+  let high = count;
+  while (low < high) {
+    const middle = (low + high) >> 1;
+    if (rowAt(middle).bottom <= viewport.top) low = middle + 1;
+    else high = middle;
+  }
+  if (low >= count) return null;
+  if (rowAt(low).top >= viewport.top) return low;
+  if (low + 1 < count && rowAt(low + 1).top < viewport.bottom) return low + 1;
+  return low;
+}
+
+/** Record which row holds the reader's place inside `viewport`. */
+export function captureScrollAnchor(
+  content: HTMLElement,
+  viewport: VerticalBounds,
+): ScrollAnchor | null {
+  const rows = content.querySelectorAll<HTMLElement>(
+    `[${SCROLL_ANCHOR_ATTRIBUTE}]`,
+  );
+  const bounds = new Map<number, DOMRect>();
+  const rowAt = (index: number) => {
+    let rect = bounds.get(index);
+    if (!rect) {
+      rect = rows[index]!.getBoundingClientRect();
+      bounds.set(index, rect);
+    }
+    return rect;
+  };
+  const index = scrollAnchorIndex(rows.length, rowAt, viewport);
+  if (index === null) return null;
+  const element = rows[index]!;
+  return {
+    element,
+    key: element.getAttribute(SCROLL_ANCHOR_ATTRIBUTE) ?? "",
+    offset: rowAt(index).top - viewport.top,
+  };
+}
+
+/**
+ * Measure how far the anchor moved since it was recorded.
+ *
+ * Returns `null` when the anchor row is gone, for example after a search
+ * filter or view change. The caller then records a new anchor.
+ */
+export function scrollAnchorShift(
+  content: HTMLElement,
+  viewport: VerticalBounds,
+  anchor: ScrollAnchor,
+): number | null {
+  const element = anchor.element.isConnected
+    ? anchor.element
+    : findAnchorRow(content, anchor.key);
+  if (!element) return null;
+  return element.getBoundingClientRect().top - viewport.top - anchor.offset;
+}
+
+function findAnchorRow(content: HTMLElement, key: string): HTMLElement | null {
+  for (const row of content.querySelectorAll<HTMLElement>(
+    `[${SCROLL_ANCHOR_ATTRIBUTE}]`,
+  )) {
+    if (row.getAttribute(SCROLL_ANCHOR_ATTRIBUTE) === key) return row;
+  }
+  return null;
+}

package/src/client/conversations/useCollapsedConversationSections.ts

@@ -0,0 +1,48 @@
+import { useCallback, useState } from "react";
+
+const STORAGE_KEY = "junior:conversation-collapsed-sections";
+
+type CollapsedConversationSections = {
+  collapsedKeys: ReadonlySet<string>;
+  toggle(key: string): void;
+};
+
+/** Keep the collapsed conversation sections of this browser. */
+export function useCollapsedConversationSections(): CollapsedConversationSections {
+  const [collapsedKeys, setCollapsedKeys] = useState(readCollapsedKeys);
+  const toggle = useCallback((key: string) => {
+    setCollapsedKeys((current) => {
+      const next = new Set(current);
+      if (!next.delete(key)) next.add(key);
+      writeCollapsedKeys(next);
+      return next;
+    });
+  }, []);
+  return { collapsedKeys, toggle };
+}
+
+function readCollapsedKeys(): ReadonlySet<string> {
+  if (typeof window === "undefined") return new Set();
+
+  try {
+    const value: unknown = JSON.parse(
+      window.localStorage.getItem(STORAGE_KEY) ?? "[]",
+    );
+    if (!Array.isArray(value)) return new Set();
+    return new Set(
+      value.filter((key): key is string => typeof key === "string"),
+    );
+  } catch {
+    return new Set();
+  }
+}
+
+function writeCollapsedKeys(keys: ReadonlySet<string>): void {
+  if (typeof window === "undefined") return;
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify([...keys]));
+  } catch {
+    // Keep in-memory collapse state usable when storage is unavailable.
+  }
+}

package/src/client/display-text/DisplayText.tsx

@@ -0,0 +1,68 @@
+import { memo } from "react";
+import type { ActorIdentity } from "@sentry/junior/api/schema";
+
+import { HighlightedCode } from "../code";
+import { parseMarkdownBlocks } from "../format";
+import { MarkdownText } from "./markdown";
+import { MentionPeopleProvider } from "./mentions";
+
+const NO_MENTIONS: readonly ActorIdentity[] = [];
+
+/**
+ * Render display text from the API, such as a message, summary, or preview.
+ *
+ * Every dashboard surface that shows this text uses this component, so
+ * Markdown, Slack mentions, Slack links, Slack emoji codes, and search
+ * highlights render the same way everywhere. Block mode renders full
+ * Markdown and highlights fenced code. Inline mode keeps only inline
+ * formatting, for one-line previews, headings, and text inside buttons.
+ */
+export const DisplayText = memo(function DisplayText(props: {
+  /** Use the larger chat type of user and assistant messages. */
+  chat?: boolean;
+  inline?: boolean;
+  /**
+   * Link people to their page. Set false inside a button, which cannot hold
+   * a link. Inline mode never links other URLs.
+   */
+  links?: boolean;
+  /** People that the API resolved for this text. */
+  mentions?: readonly ActorIdentity[];
+  text: string;
+}) {
+  return (
+    <MentionPeopleProvider
+      links={props.links ?? true}
+      mentions={props.mentions ?? NO_MENTIONS}
+    >
+      {props.inline ? (
+        <MarkdownText inline text={props.text} />
+      ) : (
+        <DisplayTextBlocks chat={props.chat} text={props.text} />
+      )}
+    </MentionPeopleProvider>
+  );
+});
+
+function DisplayTextBlocks(props: { chat?: boolean; text: string }) {
+  return (
+    <div className="grid min-w-0 gap-2">
+      {parseMarkdownBlocks(props.text).map((block, index) => {
+        if (block.language === "markdown" && !block.fenced) {
+          return (
+            <MarkdownText chat={props.chat} key={index} text={block.code} />
+          );
+        }
+
+        return (
+          <div
+            className="min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5"
+            key={index}
+          >
+            <HighlightedCode code={block.code} language={block.language} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/client/display-text/emoji.ts

@@ -0,0 +1,54 @@
+// Slack names its emoji with the iamcal dataset, so `:thinking_face:` and
+// `:man-shrugging:` resolve the same way that Slack shows them.
+import iamcalShortcodes from "emojibase-data/en/shortcodes/iamcal.json";
+
+const SHORTCODES: Readonly<Record<string, string | readonly string[]>> =
+  iamcalShortcodes;
+
+// `:name:` with an optional Slack skin tone, such as `:wave::skin-tone-3:`.
+const SLACK_EMOJI_RE = /:([a-z0-9_+-]+):(?::(skin-tone-[2-6]):)?/g;
+
+const VARIATION_SELECTOR = 0xfe0f;
+
+function codePoints(hexcode: string): number[] {
+  return hexcode.split("-").map((hex) => Number.parseInt(hex, 16));
+}
+
+const EMOJI_BY_NAME = new Map<string, number[]>();
+for (const [hexcode, names] of Object.entries(SHORTCODES)) {
+  const points = codePoints(hexcode);
+  for (const name of typeof names === "string" ? [names] : names) {
+    EMOJI_BY_NAME.set(name, points);
+  }
+}
+
+function emojiText(name: string, skinTone: string | undefined): string {
+  const points = EMOJI_BY_NAME.get(name);
+  if (!points) return "";
+  const [base, ...rest] = points;
+  const tone = skinTone ? EMOJI_BY_NAME.get(skinTone)?.[0] : undefined;
+  if (tone !== undefined) {
+    // The tone follows the base code point and replaces its text/emoji
+    // selector, as in `👋🏼` and `🤷🏼‍♂️`.
+    const tail = rest[0] === VARIATION_SELECTOR ? rest.slice(1) : rest;
+    return String.fromCodePoint(base!, tone, ...tail);
+  }
+  // A lone symbol such as `❤` shows as text unless it asks for emoji style.
+  if (rest.length === 0 && base! < 0x1f000) {
+    return String.fromCodePoint(base!, VARIATION_SELECTOR);
+  }
+  return String.fromCodePoint(...points);
+}
+
+/**
+ * Replace Slack `:name:` emoji codes with the emoji. Unknown names, such as
+ * custom workspace emoji, stay as text.
+ */
+export function replaceSlackEmoji(text: string): string {
+  if (!text.includes(":")) return text;
+  return text.replace(
+    SLACK_EMOJI_RE,
+    (match, name: string, skinTone: string | undefined) =>
+      emojiText(name, skinTone) || match,
+  );
+}