gloomberb 0.17.2 → 0.17.3

package/src/plugins/builtin/chat/layout.ts

@@ -1,7 +1,7 @@
 import type { ScrollBoxRenderable } from "../../../ui";
 import type { ChatMessage } from "../../../api-client";
 import { splitLongTextSegmentByDisplayWidth, truncateWithEllipsis } from "../../../utils/text-wrap";
-import { tokenizeInlineContent, type InlineContentToken } from "../../../utils/inline-content-tokenizer";
+import { parseMarkdownLines } from "../../../utils/markdown";
 import { displayWidth } from "../../../utils/format";
 import {
   getTickerBadgeText,
@@ -12,6 +12,7 @@ import type { InlineTickerCatalogEntry } from "../../../state/hooks/inline-ticke
 import { STICKY_BOTTOM_THRESHOLD_PX } from "../../../ui/sticky-scroll";
 import { terminalReactionRows } from "./reactions";
 import { chatMessagePaneLinks } from "./pane-links/model";
+import { chatInlineTokens, type ChatInlineToken, type ChatTextStyle } from "./markdown";
 
 const MESSAGE_GROUP_THRESHOLD_MS = 5 * 60 * 1000;
 const MESSAGE_SELECTION_BOTTOM_INSET = 1;
@@ -38,9 +39,8 @@ export function formatInlinePreview(text: string, width: number) {
   return truncateWithEllipsis(normalizeInlinePreview(text), width);
 }
 
-type ChatBodyInlineToken = InlineContentToken;
-
-export type ChatBodyLine = ChatBodyInlineToken[];
+/** One row of a message in the terminal: its tokens, already wrapped to the body's width. */
+export type ChatBodyLine = ChatInlineToken[];
 
 function wrapTextLines(text: string, width: number) {
   const safeWidth = Math.max(width, 1);
@@ -97,7 +97,7 @@ export function chatBadgeTextWidth(symbol: string, entry: InlineTickerCatalogEnt
 }
 
 function inlineTokenWidth(
-  token: InlineContentToken,
+  token: ChatInlineToken,
   catalog: Record<string, InlineTickerCatalogEntry>,
 ): number {
   if (token.kind !== "ticker") return displayWidth(token.value);
@@ -110,11 +110,8 @@ function inlineTokenWidth(
   return chatBadgeTextWidth(token.symbol, entry) + TICKER_BADGE_CHROME_WIDTH;
 }
 
-function tokenWithValue(token: InlineContentToken, value: string): InlineContentToken {
-  if (token.kind === "link") return { ...token, value };
-  if (token.kind === "username") return { ...token, value };
-  if (token.kind === "ticker") return { ...token, value };
-  return { kind: "text", value };
+function tokenWithValue(token: ChatInlineToken, value: string): ChatInlineToken {
+  return { ...token, value };
 }
 
 function firstDisplayWidthChunk(value: string, width: number): string {
@@ -136,8 +133,27 @@ function trimLineEnd(line: ChatBodyLine): ChatBodyLine {
   return next;
 }
 
-function wrapInlineContentLine(
-  text: string,
+function sameStyle(a: ChatTextStyle | undefined, b: ChatTextStyle | undefined): boolean {
+  return !!a?.bold === !!b?.bold && !!a?.italic === !!b?.italic && !!a?.strike === !!b?.strike
+    && !!a?.code === !!b?.code && !!a?.muted === !!b?.muted;
+}
+
+/** Neighbouring words of one style draw as one run. */
+function joinTextTokens(line: ChatBodyLine): ChatBodyLine {
+  const joined: ChatBodyLine = [];
+  for (const token of line) {
+    const previous = joined[joined.length - 1];
+    if (token.kind === "text" && previous?.kind === "text" && sameStyle(previous.style, token.style)) {
+      joined[joined.length - 1] = { ...previous, value: previous.value + token.value };
+    } else {
+      joined.push(token);
+    }
+  }
+  return joined;
+}
+
+function wrapInlineTokens(
+  tokens: readonly ChatInlineToken[],
   width: number,
   catalog: Record<string, InlineTickerCatalogEntry>,
 ): ChatBodyLine[] {
@@ -147,12 +163,12 @@ function wrapInlineContentLine(
   let currentWidth = 0;
 
   const finishLine = () => {
-    lines.push(trimLineEnd(current));
+    lines.push(joinTextTokens(trimLineEnd(current)));
     current = [];
     currentWidth = 0;
   };
 
-  const appendSegment = (token: InlineContentToken, rawValue: string, trimStartOnWrap: boolean) => {
+  const appendSegment = (token: ChatInlineToken, rawValue: string, trimStartOnWrap: boolean) => {
     let value = currentWidth === 0 && trimStartOnWrap ? rawValue.trimStart() : rawValue;
     if (!value) return;
 
@@ -202,53 +218,99 @@ function wrapInlineContentLine(
     }
   };
 
-  const appendTextPart = (rawPart: string) => {
+  const appendTextPart = (token: ChatInlineToken, rawPart: string) => {
     let part = rawPart;
     const partWidth = displayWidth(part);
     if (currentWidth > 0 && partWidth > safeWidth - currentWidth && partWidth <= safeWidth) {
       finishLine();
       part = part.trimStart();
     }
-    appendSegment({ kind: "text", value: part }, part, true);
+    appendSegment(token, part, true);
   };
 
-  const appendText = (value: string) => {
-    const parts = value.match(/\S+\s*|\s+/g) ?? [value];
+  const appendText = (token: ChatInlineToken) => {
+    const parts = token.value.match(/\S+\s*|\s+/g) ?? [token.value];
     for (const part of parts) {
-      appendTextPart(part);
+      appendTextPart(token, part);
     }
   };
 
-  const appendInlineToken = (token: InlineContentToken) => {
+  const appendInlineToken = (token: ChatInlineToken) => {
     const tokenWidth = inlineTokenWidth(token, catalog);
     if (currentWidth > 0 && currentWidth + tokenWidth > safeWidth) finishLine();
     appendSegment(token, token.value, false);
   };
 
-  for (const token of tokenizeInlineContent(text)) {
+  for (const token of tokens) {
     if (token.kind === "text") {
-      appendText(token.value);
+      appendText(token);
       continue;
     }
     appendInlineToken(token);
   }
 
-  if (current.length > 0 || lines.length === 0) lines.push(trimLineEnd(current));
+  if (current.length > 0 || lines.length === 0) finishLine();
   return lines;
 }
 
+const QUOTE_BAR: ChatInlineToken = { kind: "text", value: "\u2502 ", style: { muted: true } };
+
+/** Each wrapped row starts with `first` or, after the first, `rest`: a list item's marker and the hang under it, a quote's bar. */
+function withPrefix(lines: ChatBodyLine[], first: ChatInlineToken, rest: ChatInlineToken): ChatBodyLine[] {
+  return lines.map((line, index) => [index === 0 ? first : rest, ...line]);
+}
+
+/** A line of a code block, as written, broken where the row ends. */
+function codeRows(text: string, width: number): ChatBodyLine[] {
+  const value = text.replace(/\t/g, "  ");
+  if (!value) return [[]];
+  return splitLongTextSegmentByDisplayWidth(value, Math.max(width, 1))
+    .map((chunk): ChatBodyLine => [{ kind: "text", value: chunk, style: { code: true } }]);
+}
+
+/**
+ * A message's rows in the terminal: its markdown read line by line (a heading
+ * bold, a list item's later rows hung under its text, a quote barred on every
+ * row, a code block as written) and wrapped to `width`.
+ */
 export function getMessageBodyTokenLines(
   text: string,
   width: number,
   catalog: Record<string, InlineTickerCatalogEntry>,
 ): ChatBodyLine[] {
   const lines: ChatBodyLine[] = [];
-  for (const paragraph of text.split("\n")) {
-    if (!paragraph) {
-      lines.push([]);
-      continue;
+  for (const line of parseMarkdownLines(text)) {
+    switch (line.kind) {
+      case "blank":
+        lines.push([]);
+        break;
+      case "code":
+        lines.push(...codeRows(line.text, width));
+        break;
+      case "heading":
+        lines.push(...wrapInlineTokens(
+          chatInlineTokens(line.text).map((token) => ({ ...token, style: { ...token.style, bold: true } })),
+          width,
+          catalog,
+        ));
+        break;
+      case "quote":
+        lines.push(...withPrefix(wrapInlineTokens(chatInlineTokens(line.text), width - 2, catalog), QUOTE_BAR, QUOTE_BAR));
+        break;
+      case "list": {
+        const marker = `${" ".repeat(line.indent)}${/^\d/.test(line.marker) ? line.marker : "\u2022"} `;
+        const markerWidth = displayWidth(marker);
+        lines.push(...withPrefix(
+          wrapInlineTokens(chatInlineTokens(line.text), width - markerWidth, catalog),
+          { kind: "text", value: marker, style: { muted: true } },
+          { kind: "text", value: " ".repeat(markerWidth) },
+        ));
+        break;
+      }
+      case "text":
+        lines.push(...wrapInlineTokens(chatInlineTokens(line.text), width, catalog));
+        break;
     }
-    lines.push(...wrapInlineContentLine(paragraph, width, catalog));
   }
   return lines.length > 0 ? lines : [[]];
 }
@@ -267,9 +329,7 @@ export function estimateMessageHeight(
   // The terminal draws a row per image and one for a review note; an image-only message has no text row.
   const bodyLineCount = content.length === 0 && (imageCount > 0 || links.length > 0)
     ? 0
-    : catalog
-      ? getMessageBodyTokenLines(content, contentLineWidth, catalog).length
-      : wrapTextLines(content, contentLineWidth).length;
+    : getMessageBodyTokenLines(content, contentLineWidth, catalog ?? {}).length;
   const reviewNoteHeight = message.attachmentReview ? 1 : 0;
   const reactionRows = message.reactions?.length ? terminalReactionRows(message.reactions, contentLineWidth).length : 0;
   return headerHeight + (message.replyTo ? 1 : 0) + bodyLineCount + links.length + imageCount + reviewNoteHeight + reactionRows;

package/src/plugins/builtin/chat/markdown.ts

@@ -0,0 +1,94 @@
+import { markdownPlainText, parseInlineMarkdown, parseMarkdownLines, type MarkdownSegment } from "../../../utils/markdown";
+import { safeExternalUrl } from "../../../utils/external-url";
+import { tokenizeInlineContent, type InlineContentToken } from "../../../utils/inline-content-tokenizer";
+
+/** How a run of message text is drawn. `muted` is the dim of a list marker, a quote's bar or a link's host. */
+export interface ChatTextStyle {
+  bold?: boolean;
+  italic?: boolean;
+  strike?: boolean;
+  code?: boolean;
+  muted?: boolean;
+}
+
+/** Message text, a link, a $TICKER or an @mention, with the marks around it. */
+export type ChatInlineToken = InlineContentToken & { style?: ChatTextStyle };
+
+/** A message link opens in the browser, so only a web address is read as one. */
+function isChatLinkHref(href: string): boolean {
+  return safeExternalUrl(href) !== null;
+}
+
+/** A message as one plain line's worth of text: no marks, a link as its label. */
+export function chatPlainText(text: string): string {
+  return markdownPlainText(text, { links: isChatLinkHref });
+}
+
+function segmentStyle(segment: MarkdownSegment): ChatTextStyle | undefined {
+  const style: ChatTextStyle = {};
+  if (segment.bold) style.bold = true;
+  if (segment.italic) style.italic = true;
+  if (segment.strike) style.strike = true;
+  if (segment.code) style.code = true;
+  return Object.keys(style).length > 0 ? style : undefined;
+}
+
+function withStyle<T extends InlineContentToken>(token: T, style: ChatTextStyle | undefined): T & { style?: ChatTextStyle } {
+  return style ? { ...token, style } : token;
+}
+
+function linkHost(url: string): string {
+  try {
+    return new URL(url).hostname.toLowerCase().replace(/^www\./, "");
+  } catch {
+    return "";
+  }
+}
+
+/** Whether a link's label names the host it goes to, as a whole name: "x.com" does not name x.co. */
+function labelNamesHost(label: string, host: string): boolean {
+  const text = label.toLowerCase().replace(/\bwww\./g, "");
+  for (let at = text.indexOf(host); at >= 0; at = text.indexOf(host, at + 1)) {
+    const before = text[at - 1] ?? "";
+    const after = text.slice(at + host.length);
+    if (!/[a-z0-9.-]/.test(before) && !/^(?:[a-z0-9-]|\.[a-z0-9])/.test(after)) return true;
+  }
+  return false;
+}
+
+/**
+ * One line of a message as tokens. A written link (`[label](url)`) shows its
+ * label, followed by the host it goes to unless the label already names it,
+ * so a label never hides where a link leads. Code is text as written: no
+ * links, mentions or tickers in it.
+ */
+export function chatInlineTokens(text: string): ChatInlineToken[] {
+  const segments = parseInlineMarkdown(text, { links: isChatLinkHref });
+  const tokens: ChatInlineToken[] = [];
+  let label = "";
+  segments.forEach((segment, index) => {
+    const style = segmentStyle(segment);
+    if (segment.link !== undefined) {
+      const url = safeExternalUrl(segment.link) ?? segment.link;
+      tokens.push(withStyle({ kind: "link", value: segment.text, url }, style));
+      label += segment.text;
+      // A label with marks in it is several segments of one link.
+      if (segments[index + 1]?.link === segment.link) return;
+      const host = linkHost(url);
+      if (host && !labelNamesHost(label, host)) tokens.push({ kind: "text", value: ` (${host})`, style: { muted: true } });
+      label = "";
+      return;
+    }
+    if (segment.code) {
+      tokens.push(withStyle({ kind: "text", value: segment.text }, style));
+      return;
+    }
+    for (const token of tokenizeInlineContent(segment.text)) tokens.push(withStyle(token, style));
+  });
+  return tokens;
+}
+
+/** Every token a message draws outside its code blocks, in reading order. */
+export function chatMessageTokens(text: string): ChatInlineToken[] {
+  return parseMarkdownLines(text).flatMap((line) => line.kind === "blank" || line.kind === "code" ? [] : chatInlineTokens(line.text));
+}

package/src/plugins/builtin/chat/message/desktop.tsx

@@ -12,7 +12,7 @@ import { ChatMessageActions, ChatMessageHeader, chatHeaderFitsEveryIcon } from "
 import { MESSAGE_ACTION_WIDTH } from "../layout";
 import { canReactToMessage } from "../reactions";
 import { DesktopChatReactions, DesktopReactionAction } from "./reactions";
-import { ResponsiveTickerBadgeText } from "./inline-tokens";
+import { DesktopChatMessageText } from "./inline-tokens";
 import { DesktopChatPaneChip } from "./pane-chip";
 import { chatMessagePaneLinks } from "../pane-links/model";
 import { useSlowPendingSend } from "./pending-send";
@@ -192,10 +192,11 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
           style={{ minWidth: 0, alignItems: "flex-start" }}
         >
           <Box flexGrow={1} data-gloom-role="chat-message-body" data-gloom-selectable="true" style={{ minWidth: 0 }}>
-            <ResponsiveTickerBadgeText
+            <DesktopChatMessageText
               text={content}
               catalog={catalog}
               textColor={state.bodyColor}
+              mutedColor={state.bodyMutedColor}
               openTicker={openTicker}
               userByUsername={userByUsername}
               onUserHover={onUserHover}