gloomberb 0.7.5 → 0.8.0

package/src/plugins/builtin/chat/index.tsx

@@ -0,0 +1,4 @@
+import { ChatContent } from "./content";
+import { ChatStatusWidget } from "./status-widget";
+
+export { ChatContent, ChatStatusWidget };

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

@@ -0,0 +1,330 @@
+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 { displayWidth } from "../../../utils/format";
+import { getTickerBadgeCellWidth } from "../../../components/ticker/badge/format";
+import type { InlineTickerCatalogEntry } from "../../../state/hooks/inline-tickers";
+
+const MESSAGE_GROUP_THRESHOLD_MS = 5 * 60 * 1000;
+const MESSAGE_SELECTION_BOTTOM_INSET = 1;
+const SCROLL_BOTTOM_THRESHOLD_PX = 2;
+
+export const CHAT_COMPOSER_MAX_ROWS = 5;
+export const MESSAGE_ACTION_WIDTH = 9;
+export const COMPOSER_ACTION_WIDTH = 10;
+
+export function isGroupedWithPrevious(messages: ChatMessage[], index: number) {
+  if (index === 0) return false;
+  const prev = messages[index - 1]!;
+  const curr = messages[index]!;
+  if (prev.user.id !== curr.user.id) return false;
+  return new Date(curr.createdAt).getTime() - new Date(prev.createdAt).getTime() < MESSAGE_GROUP_THRESHOLD_MS;
+}
+
+export function normalizeInlinePreview(text: string) {
+  return text.replace(/\s+/g, " ").trim();
+}
+
+export function formatInlinePreview(text: string, width: number) {
+  return truncateWithEllipsis(normalizeInlinePreview(text), width);
+}
+
+function wrapTextLines(text: string, width: number) {
+  const safeWidth = Math.max(width, 1);
+  const lines: string[] = [];
+
+  for (const paragraph of text.split("\n")) {
+    let remaining = paragraph;
+    if (remaining.length === 0) {
+      lines.push("");
+      continue;
+    }
+
+    while (remaining.length > safeWidth) {
+      const candidate = remaining.slice(0, safeWidth + 1);
+      const breakAt = candidate.lastIndexOf(" ");
+      const lineEnd = breakAt > 0 ? breakAt : safeWidth;
+      lines.push(remaining.slice(0, lineEnd).trimEnd());
+      remaining = remaining.slice(lineEnd).trimStart();
+    }
+
+    lines.push(remaining);
+  }
+
+  return lines.length > 0 ? lines : [""];
+}
+
+function inlineTokenWidth(
+  token: InlineContentToken,
+  catalog: Record<string, InlineTickerCatalogEntry>,
+): number {
+  if (token.kind !== "ticker") return displayWidth(token.value);
+
+  const entry = catalog[token.symbol];
+  if (!entry || entry.status === "missing") return displayWidth(token.value);
+
+  const baseWidth = getTickerBadgeCellWidth({
+    symbol: token.symbol,
+    status: entry.status,
+    quote: entry.quote,
+  });
+  const hoverWidth = getTickerBadgeCellWidth({
+    symbol: token.symbol,
+    status: entry.status,
+    quote: entry.quote,
+    hovered: true,
+  });
+  return Math.max(baseWidth, hoverWidth);
+}
+
+function wrapInlineContentLine(
+  text: string,
+  width: number,
+  catalog: Record<string, InlineTickerCatalogEntry>,
+): string[] {
+  const safeWidth = Math.max(width, 1);
+  const lines: string[] = [];
+  let current = "";
+  let currentWidth = 0;
+
+  const finishLine = () => {
+    lines.push(current.trimEnd());
+    current = "";
+    currentWidth = 0;
+  };
+
+  const appendTextPart = (rawPart: string) => {
+    let part = currentWidth === 0 ? rawPart.trimStart() : rawPart;
+    if (!part) return;
+
+    while (part) {
+      const partWidth = displayWidth(part);
+      if (currentWidth > 0 && currentWidth + partWidth > safeWidth) {
+        finishLine();
+        part = part.trimStart();
+        if (!part) return;
+        continue;
+      }
+
+      if (partWidth <= safeWidth - currentWidth) {
+        current += part;
+        currentWidth += partWidth;
+        return;
+      }
+
+      const available = Math.max(safeWidth - currentWidth, 1);
+      const [chunk = "", ...rest] = splitLongTextSegmentByDisplayWidth(part, available);
+      if (chunk) {
+        current += chunk;
+        currentWidth += displayWidth(chunk);
+      }
+      finishLine();
+      part = rest.join("").trimStart();
+    }
+  };
+
+  const appendText = (value: string) => {
+    const parts = value.match(/\S+\s*|\s+/g) ?? [value];
+    for (const part of parts) {
+      appendTextPart(part);
+    }
+  };
+
+  const appendInlineToken = (token: InlineContentToken) => {
+    const tokenWidth = inlineTokenWidth(token, catalog);
+    if (currentWidth > 0 && currentWidth + tokenWidth > safeWidth) finishLine();
+    current += token.value;
+    currentWidth += tokenWidth;
+  };
+
+  for (const token of tokenizeInlineContent(text)) {
+    if (token.kind === "text") {
+      appendText(token.value);
+      continue;
+    }
+    appendInlineToken(token);
+  }
+
+  if (current || lines.length === 0) lines.push(current.trimEnd());
+  return lines;
+}
+
+function wrapInlineContentLines(
+  text: string,
+  width: number,
+  catalog: Record<string, InlineTickerCatalogEntry>,
+): string[] {
+  const lines: string[] = [];
+  for (const paragraph of text.split("\n")) {
+    if (!paragraph) {
+      lines.push("");
+      continue;
+    }
+    lines.push(...wrapInlineContentLine(paragraph, width, catalog));
+  }
+  return lines.length > 0 ? lines : [""];
+}
+
+export function getMessageBodyLines(
+  message: ChatMessage,
+  width: number,
+  catalog?: Record<string, InlineTickerCatalogEntry>,
+) {
+  const contentLineWidth = Math.max(width - 4, 1);
+  if (catalog) return wrapInlineContentLines(message.content, contentLineWidth, catalog);
+  return wrapTextLines(message.content, contentLineWidth);
+}
+
+export function estimateMessageHeight(
+  message: ChatMessage,
+  width: number,
+  grouped = false,
+  catalog?: Record<string, InlineTickerCatalogEntry>,
+) {
+  const headerHeight = grouped ? 0 : 1;
+  return headerHeight + (message.replyTo ? 1 : 0) + getMessageBodyLines(message, width, catalog).length;
+}
+
+export function estimateComposerHeight(text: string, width: number) {
+  return Math.max(1, Math.min(CHAT_COMPOSER_MAX_ROWS, wrapTextLines(text, width).length));
+}
+
+export function getMessageTopOffset(
+  messages: ChatMessage[],
+  index: number,
+  width: number,
+  catalog?: Record<string, InlineTickerCatalogEntry>,
+) {
+  let offset = 0;
+  for (let i = 0; i < index; i += 1) {
+    offset += estimateMessageHeight(messages[i]!, width, isGroupedWithPrevious(messages, i), catalog);
+  }
+  return offset;
+}
+
+export function hasPixelScrollMetrics(scrollBox: ScrollBoxRenderable | null) {
+  return !!scrollBox?.scrollToPixels && typeof scrollBox.scrollHeightPx === "number" && !!scrollBox.viewportPx;
+}
+
+export function getScrollTop(scrollBox: ScrollBoxRenderable, preferPixels: boolean) {
+  return preferPixels && typeof scrollBox.scrollTopPx === "number" ? scrollBox.scrollTopPx : scrollBox.scrollTop;
+}
+
+export function getScrollHeight(scrollBox: ScrollBoxRenderable, preferPixels: boolean) {
+  return preferPixels && typeof scrollBox.scrollHeightPx === "number" ? scrollBox.scrollHeightPx : scrollBox.scrollHeight;
+}
+
+function getViewportHeight(scrollBox: ScrollBoxRenderable, preferPixels: boolean) {
+  return preferPixels && scrollBox.viewportPx ? scrollBox.viewportPx.height : scrollBox.viewport?.height ?? 0;
+}
+
+export function scrollToPosition(scrollBox: ScrollBoxRenderable, target: number, preferPixels: boolean) {
+  if (preferPixels && scrollBox.scrollToPixels) {
+    scrollBox.scrollToPixels(target);
+    return;
+  }
+  scrollBox.scrollTo(target);
+}
+
+export function scrollToBottom(scrollBox: ScrollBoxRenderable | null, preferPixels = false) {
+  if (!scrollBox) return;
+  const exactPixels = preferPixels && hasPixelScrollMetrics(scrollBox);
+  scrollToPosition(
+    scrollBox,
+    Math.max(0, getScrollHeight(scrollBox, exactPixels) - getViewportHeight(scrollBox, exactPixels)),
+    exactPixels,
+  );
+}
+
+export function isScrolledToBottom(scrollBox: ScrollBoxRenderable | null, preferPixels = false) {
+  if (!scrollBox) return true;
+  const exactPixels = preferPixels && hasPixelScrollMetrics(scrollBox);
+  const scrollTop = getScrollTop(scrollBox, exactPixels);
+  const maxScrollTop = Math.max(0, getScrollHeight(scrollBox, exactPixels) - getViewportHeight(scrollBox, exactPixels));
+  const threshold = exactPixels ? SCROLL_BOTTOM_THRESHOLD_PX : 0;
+  return maxScrollTop - scrollTop <= threshold;
+}
+
+export function runAfterLayout(callback: () => void) {
+  if (typeof requestAnimationFrame === "function") {
+    requestAnimationFrame(callback);
+    return;
+  }
+  queueMicrotask(callback);
+}
+
+function getScrollTopForElementIntoView({
+  scrollTop,
+  viewportHeight,
+  elementTop,
+  elementHeight,
+  bottomInset = 0,
+}: {
+  scrollTop: number;
+  viewportHeight: number;
+  elementTop: number;
+  elementHeight: number;
+  bottomInset?: number;
+}) {
+  const visibleHeight = Math.max(viewportHeight - bottomInset, 1);
+  const elementBottom = elementTop + elementHeight;
+  if (elementTop < scrollTop || elementHeight >= visibleHeight) return elementTop;
+  if (elementBottom > scrollTop + visibleHeight) return elementBottom - visibleHeight;
+  return scrollTop;
+}
+
+export function scrollElementIntoScrollBoxView(scrollBox: ScrollBoxRenderable | null, node: unknown) {
+  const nodeRect = (node as { getBoundingClientRect?: () => { x?: number; y?: number; top?: number; width?: number; height?: number } } | null)
+    ?.getBoundingClientRect?.();
+  const scrollRect = scrollBox?.getBoundingClientRect?.() as { x?: number; y?: number; top?: number; width?: number; height?: number } | undefined;
+  if (
+    scrollBox &&
+    nodeRect &&
+    scrollRect &&
+    scrollBox.scrollToPixels &&
+    typeof scrollBox.scrollTopPx === "number" &&
+    scrollBox.viewportPx
+  ) {
+    const nodeY = nodeRect.y ?? nodeRect.top ?? 0;
+    const scrollY = scrollRect.y ?? scrollRect.top ?? 0;
+    const elementTop = scrollBox.scrollTopPx + nodeY - scrollY;
+    const nextScrollTop = getScrollTopForElementIntoView({
+      scrollTop: scrollBox.scrollTopPx,
+      viewportHeight: scrollBox.viewportPx.height,
+      elementTop,
+      elementHeight: Math.max(nodeRect.height ?? 0, 1),
+    });
+    if (nextScrollTop !== scrollBox.scrollTopPx) {
+      scrollBox.scrollToPixels(nextScrollTop);
+    }
+    return true;
+  }
+
+  const scrollIntoView = (node as { scrollIntoView?: (options?: unknown) => void } | null)?.scrollIntoView;
+  if (typeof scrollIntoView !== "function") return false;
+  scrollIntoView.call(node, { block: "nearest", inline: "nearest" });
+  return true;
+}
+
+export function getSelectedMessageScrollTop({
+  scrollTop,
+  viewportHeight,
+  top,
+  rowHeight,
+  bottomInset = MESSAGE_SELECTION_BOTTOM_INSET,
+}: {
+  scrollTop: number;
+  viewportHeight: number;
+  top: number;
+  rowHeight: number;
+  bottomInset?: number;
+}) {
+  const safeViewportHeight = Math.max(viewportHeight, 1);
+  const visibleMessageRows = Math.max(safeViewportHeight - bottomInset, 1);
+  if (top < scrollTop) return top;
+  if (top + rowHeight > scrollTop + visibleMessageRows) {
+    return Math.max(top + rowHeight - visibleMessageRows, 0);
+  }
+  return scrollTop;
+}

package/src/plugins/builtin/chat/message/action-chip.tsx

@@ -0,0 +1,38 @@
+import { Box, Text } from "../../../../ui";
+import { TextAttributes } from "../../../../ui";
+import { colors } from "../../../../theme/colors";
+
+export function ChatActionChip({
+  label,
+  width,
+  emphasized = false,
+  onPress,
+}: {
+  label: string;
+  width: number;
+  emphasized?: boolean;
+  onPress: () => void;
+}) {
+  const handlePress = (event: any) => {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    onPress();
+  };
+
+  return (
+    <Box
+      width={width}
+      height={1}
+      backgroundColor={emphasized ? colors.borderFocused : colors.panel}
+      onMouseDown={handlePress}
+    >
+      <Text
+        fg={emphasized ? colors.bg : colors.text}
+        attributes={emphasized ? TextAttributes.BOLD : 0}
+        onMouseDown={handlePress}
+      >
+        {` ${label} `}
+      </Text>
+    </Box>
+  );
+}

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

@@ -0,0 +1,158 @@
+import { memo } from "react";
+import { Box, Span, Text } from "../../../../ui";
+import { hoverBg } from "../../../../theme/colors";
+import { MESSAGE_ACTION_WIDTH, normalizeInlinePreview } from "../layout";
+import { ChatActionChip } from "./action-chip";
+import { ResponsiveTickerBadgeText } from "./inline-tokens";
+import { getChatMessageRenderState } from "./render-state";
+import type { ChatMessageBaseProps } from "./types";
+
+const DESKTOP_MESSAGE_RIGHT_PADDING = 2;
+
+export const DesktopChatMessage = memo(function DesktopChatMessage({
+  msg,
+  index,
+  messages,
+  selectedIdx,
+  hoveredIdx,
+  canSend,
+  catalog,
+  userByUsername,
+  openTicker,
+  onUserHover,
+  onUserHoverEnd,
+  beginReplyTo,
+  jumpToMessage,
+  registerMessageElement,
+}: ChatMessageBaseProps & {
+  registerMessageElement: (messageId: string, node: unknown | null) => void;
+}) {
+  const state = getChatMessageRenderState({ msg, index, messages, selectedIdx, hoveredIdx, canSend });
+  const showInlineReplyAction = !state.grouped && canSend;
+  const showGroupedReplyAction = state.grouped && canSend;
+  const rowProps = {
+    width: "100%",
+    paddingRight: DESKTOP_MESSAGE_RIGHT_PADDING,
+    backgroundColor: state.bgColor,
+    "data-gloom-role": "chat-message-row",
+    "data-selected": state.isSelected ? "true" : "false",
+    style: { minWidth: 0 },
+  };
+
+  return (
+    <Box
+      key={msg.id}
+      ref={(node: unknown | null) => registerMessageElement(msg.id, node)}
+      width="100%"
+      flexDirection="column"
+      data-gloom-role="chat-message"
+      data-gloom-chat-message-id={msg.id}
+      data-selected={state.isSelected ? "true" : "false"}
+      style={{ "--chat-hover-bg": hoverBg(), minWidth: 0 }}
+    >
+      {msg.replyTo && (
+        <Box
+          {...rowProps}
+          flexDirection="row"
+          paddingLeft={2}
+          onMouseDown={() => {
+            if (msg.replyToId) jumpToMessage(msg.replyToId);
+          }}
+          style={{ minWidth: 0, alignItems: "flex-start", cursor: "pointer" }}
+        >
+          <Text
+            fg={state.replyMetaColor}
+            wrapText
+            style={{
+              minWidth: 0,
+              width: "100%",
+              display: "-webkit-box",
+              WebkitBoxOrient: "vertical",
+              WebkitLineClamp: 2,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "normal",
+              overflowWrap: "anywhere",
+            }}
+          >
+            <Span fg={state.replyMetaColor}>reply </Span>
+            <Span fg={state.replyAuthorColor}>{msg.replyTo.user.username}: </Span>
+            <Span fg={state.replyMetaColor}>{normalizeInlinePreview(msg.replyTo.content)}</Span>
+          </Text>
+        </Box>
+      )}
+      {!state.grouped && (
+        <Box
+          {...rowProps}
+          flexDirection="row"
+          height={1}
+          paddingLeft={1}
+        >
+          <Text
+            fg={state.authorColor}
+            attributes={state.authorAttributes}
+            onMouseMove={() => onUserHover(msg.user)}
+            onMouseOut={onUserHoverEnd}
+            style={{ cursor: "default" }}
+          >
+            {msg.user.username ?? "anon"}
+          </Text>
+          <Text fg={state.headerStatusColor}> {state.headerStatus}</Text>
+          {showInlineReplyAction && (
+            <>
+              <Text fg={state.headerStatusColor}> </Text>
+              <Box
+                width={MESSAGE_ACTION_WIDTH}
+                height={1}
+                data-gloom-role="chat-message-reply-action"
+              >
+                <ChatActionChip
+                  label="Reply"
+                  width={MESSAGE_ACTION_WIDTH}
+                  emphasized={state.isSelected}
+                  onPress={() => beginReplyTo(index)}
+                />
+              </Box>
+            </>
+          )}
+        </Box>
+      )}
+      <Box
+        {...rowProps}
+        paddingLeft={3}
+        flexDirection="row"
+        position={state.grouped ? "relative" : undefined}
+        style={{ minWidth: 0, alignItems: "flex-start" }}
+      >
+        <Box flexGrow={1} style={{ minWidth: 0 }}>
+          <ResponsiveTickerBadgeText
+            text={msg.content}
+            catalog={catalog}
+            textColor={state.bodyColor}
+            openTicker={openTicker}
+            userByUsername={userByUsername}
+            onUserHover={onUserHover}
+            onUserHoverEnd={onUserHoverEnd}
+          />
+        </Box>
+        {showGroupedReplyAction && (
+          <Box
+            position="absolute"
+            top={0}
+            right={0}
+            width={MESSAGE_ACTION_WIDTH}
+            height={1}
+            data-gloom-role="chat-message-reply-action"
+          >
+            <ChatActionChip
+              label="Reply"
+              width={MESSAGE_ACTION_WIDTH}
+              emphasized={state.isSelected}
+              onPress={() => beginReplyTo(index)}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+});

package/src/plugins/builtin/chat/message/inline-tokens.tsx

@@ -0,0 +1,118 @@
+import { useMemo, useState } from "react";
+import { Box, Text } from "../../../../ui";
+import { TextAttributes } from "../../../../ui";
+import { ExternalLinkText } from "../../../../components/ui";
+import { TickerBadge } from "../../../../components/ticker/badge";
+import type { InlineTickerCatalogEntry } from "../../../../state/hooks/inline-tickers";
+import { blendHex, colors } from "../../../../theme/colors";
+import type { ChatUserSummary } from "../../../../api-client";
+import { tokenizeInlineContent } from "../../../../utils/inline-content-tokenizer";
+
+export function ResponsiveTickerBadgeText({
+  text,
+  catalog,
+  textColor,
+  openTicker,
+  userByUsername,
+  onUserHover,
+  onUserHoverEnd,
+}: {
+  text: string;
+  catalog: Record<string, InlineTickerCatalogEntry>;
+  textColor: string;
+  openTicker: (symbol: string) => void;
+  userByUsername?: Map<string, ChatUserSummary>;
+  onUserHover?: (user: ChatUserSummary) => void;
+  onUserHoverEnd?: () => void;
+}) {
+  const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
+  const tokens = useMemo(() => tokenizeInlineContent(text), [text]);
+  const renderTextToken = (value: string, tokenIndex: number) => {
+    if (!value) return null;
+    return (
+      <Text
+        key={`text:${tokenIndex}`}
+        fg={textColor}
+        wrapText
+        style={{
+          minWidth: 0,
+          whiteSpace: "pre-wrap",
+          overflowWrap: "anywhere",
+        }}
+      >
+        {value}
+      </Text>
+    );
+  };
+  const renderUsernameToken = (username: string, value: string, tokenIndex: number) => {
+    const user = userByUsername?.get(username.toLowerCase()) ?? null;
+    return (
+      <Box
+        key={`mention:${tokenIndex}:${username}`}
+        height={1}
+        flexDirection="row"
+        backgroundColor={blendHex(colors.panel, colors.positive, 0.24)}
+        onMouseMove={() => {
+          if (user) onUserHover?.(user);
+        }}
+        onMouseOut={() => {
+          if (user) onUserHoverEnd?.();
+        }}
+      >
+        <Text fg={colors.positive} attributes={TextAttributes.BOLD}>
+          {value}
+        </Text>
+      </Box>
+    );
+  };
+
+  return (
+    <Box
+      flexDirection="row"
+      flexWrap="wrap"
+      flexGrow={1}
+      style={{ minWidth: 0, width: "100%" }}
+    >
+      {tokens.map((token, index) => {
+        if (token.kind === "text") {
+          return renderTextToken(token.value, index);
+        }
+
+        if (token.kind === "link") {
+          return (
+            <ExternalLinkText
+              key={`link:${index}`}
+              url={token.url}
+              label={token.value}
+              color={textColor}
+            />
+          );
+        }
+
+        if (token.kind === "username") {
+          return renderUsernameToken(token.username, token.value, index);
+        }
+
+        const entry = catalog[token.symbol];
+        if (!entry || entry.status === "missing") {
+          return <Text key={`raw:${index}`} fg={textColor}>{token.value}</Text>;
+        }
+
+        return (
+          <TickerBadge
+            key={`badge:${index}:${token.symbol}`}
+            symbol={token.symbol}
+            status={entry.status}
+            quote={entry.quote}
+            hovered={hoveredSymbol === token.symbol}
+            onHoverStart={() => setHoveredSymbol(token.symbol)}
+            onHoverEnd={() => {
+              setHoveredSymbol((current) => (current === token.symbol ? null : current));
+            }}
+            onOpen={openTicker}
+          />
+        );
+      })}
+    </Box>
+  );
+}