gloomberb 0.9.7 → 0.9.8

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

@@ -1,7 +1,7 @@
 import { Box, Text, useUiCapabilities } from "../../../../ui";
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { type ScrollBoxRenderable, type TextareaRenderable } from "../../../../ui";
-import { useAppDispatch } from "../../../../state/app/context";
+import { useAppDispatch, useAppSelector } from "../../../../state/app/context";
 import { useInlineTickers } from "../../../../state/hooks/inline-tickers";
 import { blendHex, colors } from "../../../../theme/colors";
 import { chatController } from "../controller";
@@ -32,10 +32,18 @@ import { buildChatUserByUsername } from "./user-map";
 import { useChatComposerRuntime } from "./composer-runtime";
 import { useChatMessageSelection } from "./selection-runtime";
 import type { ChatMessage } from "../../../../api-client";
+import { NewDmDialog } from "./new-dm-dialog";
 import {
   CHAT_MESSAGE_EDIT_WINDOW_MS,
   findLatestEditableChatMessage,
 } from "../edit-window";
+import {
+  applyMentionSuggestion,
+  buildRecentMentionSuggestions,
+  detectChatMentionTrigger,
+  filterMentionSuggestions,
+} from "./mentions";
+import { getComposerCursorOffset } from "./composer-cursor";
 
 interface ChatContentProps {
   width: number;
@@ -57,6 +65,7 @@ export function ChatContent({
   controller = chatController,
 }: ChatContentProps) {
   const dispatch = useAppDispatch();
+  const commandBarOpen = useAppSelector((state) => state.commandBarOpen);
   const channelId = normalizeChannelId(rawChannelId);
   const channelIdRef = useRef(channelId);
   channelIdRef.current = channelId;
@@ -67,6 +76,7 @@ export function ChatContent({
   const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
   const [editingMessage, setEditingMessage] = useState<ChatMessage | null>(null);
   const [followMessages, setFollowMessages] = useState(true);
+  const [newDmOpen, setNewDmOpen] = useState(false);
   const inputRef = useRef<TextareaRenderable>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const messageElementsRef = useRef(new Map<string, unknown>());
@@ -82,6 +92,18 @@ export function ChatContent({
   });
   const composerTextWidthRef = useRef(initialWidthMetrics.composerTextWidth);
   const inputValueRef = useRef(initialSnapshot.draft);
+  const [composerDraft, setComposerDraft] = useState(initialSnapshot.draft);
+  const [composerCursorOffset, setComposerCursorOffset] = useState(initialSnapshot.draft.length);
+  const [mentionSelectedIndex, setMentionSelectedIndex] = useState(0);
+  const [dismissedMentionKey, setDismissedMentionKey] = useState<string | null>(null);
+  const syncComposerState = useCallback((draft: string, cursorOffset = getComposerCursorOffset(inputRef.current, draft)) => {
+    setComposerDraft((current) => (current === draft ? current : draft));
+    setComposerCursorOffset((current) => (current === cursorOffset ? current : cursorOffset));
+  }, []);
+  const syncComposerCursor = useCallback(() => {
+    const draft = inputRef.current?.editBuffer.getText() ?? inputValueRef.current;
+    syncComposerState(draft, getComposerCursorOffset(inputRef.current, draft));
+  }, [syncComposerState]);
   const [composerRows, setComposerRows] = useState(() => estimateComposerHeight(initialSnapshot.draft, initialWidthMetrics.composerTextWidth));
   const updateComposerRows = useCallback((draft: string) => {
     const nextRows = estimateComposerHeight(draft, composerTextWidthRef.current);
@@ -107,6 +129,7 @@ export function ChatContent({
     initialSnapshot,
     inputRef,
     inputValueRef,
+    onComposerStateChange: syncComposerState,
     prependAnchorRef,
     setFollowMessages,
     setSelectedIdx,
@@ -155,6 +178,41 @@ export function ChatContent({
   const latestEditableMessageId = useMemo(() => {
     return findLatestEditableChatMessage(messages, user?.id, editWindowNowMs)?.id ?? null;
   }, [editWindowNowMs, messages, user?.id]);
+  useEffect(() => {
+    updateComposerRows(inputValueRef.current);
+  }, [updateComposerRows]);
+
+  const messageContents = useMemo(() => messages.map((message) => message.content), [messages]);
+  const { catalog, openTicker } = useInlineTickers(messageContents);
+  const userByUsername = useMemo(() => buildChatUserByUsername(channels, messages), [channels, messages]);
+  const activeChannel = useMemo(() => channels.find((channel) => channel.id === channelId), [channelId, channels]);
+  const activeChannelTitle = useMemo(() => formatChatPaneTitle(activeChannel, channelId), [activeChannel, channelId]);
+  const recentMentionSuggestions = useMemo(() => buildRecentMentionSuggestions({
+    activeChannel,
+    currentUserId: user?.id,
+    messages,
+  }), [activeChannel, messages, user?.id]);
+  const mentionDisabled = activeChannel?.kind === "direct" || (!activeChannel && channelId.startsWith("dm:"));
+  const mentionTrigger = useMemo(() => (
+    mentionDisabled ? null : detectChatMentionTrigger(composerDraft, composerCursorOffset)
+  ), [
+    mentionDisabled,
+    composerCursorOffset,
+    composerDraft,
+  ]);
+  const mentionTriggerKey = mentionTrigger
+    ? `${channelId}:${mentionTrigger.start}:${mentionTrigger.end}:${mentionTrigger.query}`
+    : null;
+  const mentionSuggestions = useMemo(() => {
+    if (!mentionTrigger || mentionTriggerKey === dismissedMentionKey) return [];
+    return filterMentionSuggestions(recentMentionSuggestions, mentionTrigger.query);
+  }, [dismissedMentionKey, mentionTrigger, mentionTriggerKey, recentMentionSuggestions]);
+  const mentionSelectedIndexSafe = mentionSuggestions.length > 0
+    ? Math.min(mentionSelectedIndex, mentionSuggestions.length - 1)
+    : 0;
+  useEffect(() => {
+    setMentionSelectedIndex(0);
+  }, [mentionTriggerKey]);
   const {
     composerHeight,
     messageAreaHeight,
@@ -163,19 +221,10 @@ export function ChatContent({
     composerRows,
     editingMessage,
     height,
+    mentionSuggestionCount: mentionSuggestions.length,
     nativePaneChrome,
     replyTo,
   });
-
-  useEffect(() => {
-    updateComposerRows(inputValueRef.current);
-  }, [updateComposerRows]);
-
-  const messageContents = useMemo(() => messages.map((message) => message.content), [messages]);
-  const { catalog, openTicker } = useInlineTickers(messageContents);
-  const userByUsername = useMemo(() => buildChatUserByUsername(channels, messages), [channels, messages]);
-  const activeChannel = useMemo(() => channels.find((channel) => channel.id === channelId), [channelId, channels]);
-  const activeChannelTitle = useMemo(() => formatChatPaneTitle(activeChannel, channelId), [activeChannel, channelId]);
   const {
     cancelProfilePopoverClose,
     closeProfilePopover,
@@ -217,7 +266,6 @@ export function ChatContent({
     focusChannelSidebar,
     focusChatContent,
     moveSidebarChannelSelection,
-    openDirectMessage,
     selectSidebarChannel,
     setDirectExpanded,
     setSidebarFocused,
@@ -230,8 +278,6 @@ export function ChatContent({
     channelIdRef,
     channels,
     channelsLoading,
-    closeProfilePopover,
-    controller,
     focused,
     inputFocused,
     onChannelChange,
@@ -240,12 +286,43 @@ export function ChatContent({
   });
 
   const focusInput = useCallback(() => {
+    setNewDmOpen(false);
     setSidebarFocused(false);
     setInputFocused(true);
     dispatch({ type: "SET_INPUT_CAPTURED", captured: true });
     inputRef.current?.focus?.();
   }, [dispatch, setSidebarFocused]);
 
+  const closeNewDmDialog = useCallback(() => {
+    setNewDmOpen(false);
+    dispatch({ type: "SET_INPUT_CAPTURED", captured: false });
+  }, [dispatch]);
+
+  const openNewDmDialog = useCallback(() => {
+    blurInput();
+    closeProfilePopover();
+    setSidebarFocused(false);
+    setNewDmOpen(true);
+    dispatch({ type: "SET_INPUT_CAPTURED", captured: true });
+  }, [blurInput, closeProfilePopover, dispatch, setSidebarFocused]);
+
+  const openConversationFromDialog = useCallback(async (usernames: string[]) => {
+    const channel = usernames.length === 1
+      ? await controller.openDirectChannel({ username: usernames[0] })
+      : await controller.openGroupChannel({ usernames });
+    setDirectExpanded(true);
+    channelIdRef.current = channel.id;
+    selectSidebarChannel(channel.id);
+    setSidebarFocused(false);
+    closeNewDmDialog();
+  }, [channelIdRef, closeNewDmDialog, controller, selectSidebarChannel, setDirectExpanded, setSidebarFocused]);
+
+  useEffect(() => {
+    if (!focused && newDmOpen) {
+      closeNewDmDialog();
+    }
+  }, [closeNewDmDialog, focused, newDmOpen]);
+
   const {
     beginEditLatestMessage,
     beginEditMessage,
@@ -257,6 +334,7 @@ export function ChatContent({
     focusComposer,
     inputPlaceholder,
     replyPreview,
+    replaceComposerDraft,
     returnToComposer,
     sendMessage,
   } = useChatComposerRuntime({
@@ -273,6 +351,7 @@ export function ChatContent({
     inputRef,
     inputValueRef,
     messages,
+    onComposerStateChange: syncComposerState,
     onChannelChange,
     editingMessage,
     latestEditableMessageId,
@@ -286,6 +365,44 @@ export function ChatContent({
     useDefaultControllerChannel,
   });
 
+  const moveMentionSelection = useCallback((direction: "up" | "down") => {
+    if (mentionSuggestions.length === 0) return false;
+    setMentionSelectedIndex((current) => {
+      const safeCurrent = Math.max(0, Math.min(current, mentionSuggestions.length - 1));
+      if (direction === "up") {
+        return safeCurrent <= 0 ? mentionSuggestions.length - 1 : safeCurrent - 1;
+      }
+      return safeCurrent >= mentionSuggestions.length - 1 ? 0 : safeCurrent + 1;
+    });
+    return true;
+  }, [mentionSuggestions.length]);
+
+  const dismissMentionSuggestions = useCallback(() => {
+    if (!mentionTriggerKey || mentionSuggestions.length === 0) return false;
+    setDismissedMentionKey(mentionTriggerKey);
+    return true;
+  }, [mentionSuggestions.length, mentionTriggerKey]);
+
+  const commitMentionSelection = useCallback((index = mentionSelectedIndexSafe) => {
+    if (!mentionTrigger || mentionSuggestions.length === 0) return false;
+    const suggestion = mentionSuggestions[index] ?? mentionSuggestions[0];
+    if (!suggestion) return false;
+    const replacement = applyMentionSuggestion(composerDraft, mentionTrigger, suggestion);
+    replaceComposerDraft(replacement.draft, replacement.cursorOffset);
+    setMentionSelectedIndex(0);
+    setDismissedMentionKey(mentionTriggerKey);
+    queueMicrotask(() => focusInput());
+    return true;
+  }, [
+    composerDraft,
+    focusInput,
+    mentionSelectedIndexSafe,
+    mentionSuggestions,
+    mentionTrigger,
+    mentionTriggerKey,
+    replaceComposerDraft,
+  ]);
+
   const {
     handleTranscriptScrollActivity,
     jumpToMessage,
@@ -322,17 +439,22 @@ export function ChatContent({
     blurInput,
     canSend,
     cancelEditMessage,
+    commandBarOpen,
     clearReplyTarget,
     cycleChannel,
     focusChannelSidebar,
     focusChatContent,
     focusComposer,
-    focused,
+    focused: focused && !newDmOpen,
     hasOlderMessages,
     inputFocused,
     inputValueRef,
     loadingOlderMessages,
     messages,
+    mentionMenuOpen: mentionSuggestions.length > 0,
+    moveMentionSelection,
+    dismissMentionSuggestions,
+    commitMentionSelection,
     moveMessageSelection,
     moveSidebarChannelSelection,
     nativePaneChrome,
@@ -376,9 +498,11 @@ export function ChatContent({
           keyboardFocused={sidebarFocused}
           loading={channelsLoading}
           canManageNotifications={!!user?.emailVerified}
+          canCreateConversation={!!user?.emailVerified}
           directExpanded={directExpanded}
           onSelect={selectSidebarChannel}
           onFocusRequest={() => setSidebarFocused(true)}
+          onCreateConversation={openNewDmDialog}
           onToggleNotifications={(nextChannelId, enabled) => {
             controller.setChannelNotificationsEnabled(nextChannelId, enabled);
           }}
@@ -420,7 +544,6 @@ export function ChatContent({
         messages={messages}
         nativePaneChrome={nativePaneChrome}
         latestEditableMessageId={latestEditableMessageId}
-        openDirectMessage={openDirectMessage}
         openTicker={openTicker}
         profilePopoverUser={profilePopoverUser}
         registerMessageElement={registerMessageElement}
@@ -434,6 +557,17 @@ export function ChatContent({
         userByUsername={userByUsername}
       />
 
+      {newDmOpen ? (
+        <NewDmDialog
+          width={chatWidth}
+          height={height}
+          userByUsername={userByUsername}
+          currentUserId={user?.id}
+          onCancel={closeNewDmDialog}
+          onSubmit={openConversationFromDialog}
+        />
+      ) : null}
+
       {!nativePaneChrome && !canSend && (
         <Box height={1} width={contentWidth}>
           <Text fg={colors.border}>{"-".repeat(contentWidth)}</Text>
@@ -461,6 +595,10 @@ export function ChatContent({
         replyPreview={replyPreview}
         replyTo={replyTo}
         sendMessage={sendMessage}
+        mentionSuggestions={mentionSuggestions}
+        mentionSelectedIndex={mentionSelectedIndexSafe}
+        onMentionCursorChange={syncComposerCursor}
+        onMentionSelect={commitMentionSelection}
         user={user}
       />
       </Box>

package/src/plugins/builtin/chat/content/layout-metrics.ts

@@ -44,6 +44,7 @@ export function resolveChatContentHeightMetrics({
   composerRows,
   editingMessage,
   height,
+  mentionSuggestionCount,
   nativePaneChrome,
   replyTo,
 }: {
@@ -51,6 +52,7 @@ export function resolveChatContentHeightMetrics({
   composerRows: number;
   editingMessage: ChatMessage | null;
   height: number;
+  mentionSuggestionCount?: number;
   nativePaneChrome: boolean | undefined;
   replyTo: ChatMessage | null;
 }) {
@@ -59,7 +61,14 @@ export function resolveChatContentHeightMetrics({
       ? Math.min(CHAT_COMPOSER_MAX_ROWS + 1, Math.max(2, composerRows + 1))
       : composerRows
     : 0;
-  const inputAreaHeight = getChatComposerAreaHeight({ canSend, composerHeight, editingMessage, nativePaneChrome, replyTo });
+  const inputAreaHeight = getChatComposerAreaHeight({
+    canSend,
+    composerHeight,
+    editingMessage,
+    mentionSuggestionCount,
+    nativePaneChrome,
+    replyTo,
+  });
   const topSeparatorHeight = nativePaneChrome ? 0 : 1;
   const footerSeparatorHeight = !nativePaneChrome && !canSend ? 1 : 0;
   const messageAreaHeight = Math.max(1, height - topSeparatorHeight - footerSeparatorHeight - inputAreaHeight);

package/src/plugins/builtin/chat/content/mentions.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, test } from "bun:test";
+import type { ChatChannel, ChatMessage } from "../../../../api-client";
+import {
+  applyMentionSuggestion,
+  buildRecentMentionSuggestions,
+  detectChatMentionTrigger,
+  filterMentionSuggestions,
+} from "./mentions";
+
+const message = (id: string, username: string): ChatMessage => ({
+  id,
+  channelId: "everyone",
+  content: id,
+  replyToId: null,
+  createdAt: `2026-06-30T00:00:0${id}.000Z`,
+  user: { id: `u-${username}`, username, displayName: username },
+});
+
+describe("chat mention suggestions", () => {
+  test("detects an active mention trigger at the caret", () => {
+    expect(detectChatMentionTrigger("watch @al", "watch @al".length)).toEqual({
+      start: 6,
+      end: 9,
+      query: "al",
+    });
+    expect(detectChatMentionTrigger("email a@b", "email a@b".length)).toBeNull();
+    expect(detectChatMentionTrigger("done @al now", "done @al now".length)).toBeNull();
+  });
+
+  test("orders visible users by recent messages, filters by prefix, and skips direct channels", () => {
+    const activeChannel: ChatChannel = {
+      id: "everyone",
+      name: "everyone",
+      kind: "public",
+      created_at: "2026-06-30T00:00:00.000Z",
+    };
+    const suggestions = buildRecentMentionSuggestions({
+      activeChannel,
+      currentUserId: "u-me",
+      messages: [
+        message("1", "alpha"),
+        message("2", "bravo"),
+        { ...message("3", "me"), user: { id: "u-me", username: "me", displayName: "me" } },
+        message("4", "alpha"),
+        message("5", "charlie"),
+      ],
+    });
+
+    expect(suggestions.map((suggestion) => suggestion.username)).toEqual(["charlie", "alpha", "bravo"]);
+    expect(filterMentionSuggestions(suggestions, "a").map((suggestion) => suggestion.username)).toEqual(["alpha"]);
+    expect(buildRecentMentionSuggestions({
+      activeChannel: {
+        id: "dm:alpha",
+        name: "alpha",
+        kind: "direct",
+        created_at: "2026-06-30T00:00:00.000Z",
+      },
+      currentUserId: "u-me",
+      messages: [message("1", "alpha")],
+    })).toEqual([]);
+  });
+
+  test("replaces only the active mention fragment", () => {
+    const trigger = detectChatMentionTrigger("check @al", "check @al".length);
+    expect(trigger).not.toBeNull();
+
+    expect(applyMentionSuggestion("check @al", trigger!, {
+      username: "alpha",
+    })).toEqual({
+      draft: "check @alpha ",
+      cursorOffset: "check @alpha ".length,
+    });
+  });
+});

package/src/plugins/builtin/chat/content/mentions.ts

@@ -0,0 +1,88 @@
+import type { ChatChannel, ChatMessage } from "../../../../api-client";
+
+export interface ChatMentionSuggestion {
+  username: string;
+}
+
+interface ChatMentionTrigger {
+  start: number;
+  end: number;
+  query: string;
+}
+
+const MENTION_TRIGGER_RE = /(^|[\s([{<,.;:!?])@([A-Za-z0-9_]{0,30})$/;
+const MAX_MENTION_SUGGESTIONS = 5;
+
+function normalizeUsername(username: string | null | undefined): string | null {
+  const normalized = username?.trim().replace(/^@+/, "");
+  return normalized ? normalized : null;
+}
+
+export function detectChatMentionTrigger(
+  draft: string,
+  cursorOffset: number,
+): ChatMentionTrigger | null {
+  const cursor = Math.max(0, Math.min(cursorOffset, draft.length));
+  const beforeCursor = draft.slice(0, cursor);
+  const match = beforeCursor.match(MENTION_TRIGGER_RE);
+  if (!match) return null;
+  const query = match[2] ?? "";
+  const start = beforeCursor.length - query.length - 1;
+  return { start, end: cursor, query };
+}
+
+export function buildRecentMentionSuggestions({
+  activeChannel,
+  currentUserId,
+  messages,
+  limit = MAX_MENTION_SUGGESTIONS,
+}: {
+  activeChannel: ChatChannel | undefined;
+  currentUserId: string | null | undefined;
+  messages: ChatMessage[];
+  limit?: number;
+}): ChatMentionSuggestion[] {
+  if (activeChannel?.kind === "direct") return [];
+  const seen = new Set<string>();
+  const suggestions: ChatMentionSuggestion[] = [];
+
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const user = messages[index]?.user;
+    const username = normalizeUsername(user?.username);
+    if (!user || !username || user.id === currentUserId) continue;
+    const key = username.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    suggestions.push({ username });
+    if (suggestions.length >= limit) break;
+  }
+
+  return suggestions;
+}
+
+export function filterMentionSuggestions(
+  suggestions: ChatMentionSuggestion[],
+  query: string,
+  limit = MAX_MENTION_SUGGESTIONS,
+): ChatMentionSuggestion[] {
+  const normalizedQuery = normalizeUsername(query)?.toLowerCase() ?? "";
+  return suggestions
+    .filter((suggestion) => !normalizedQuery || suggestion.username.toLowerCase().startsWith(normalizedQuery))
+    .slice(0, limit);
+}
+
+export function applyMentionSuggestion(
+  draft: string,
+  trigger: ChatMentionTrigger,
+  suggestion: ChatMentionSuggestion,
+): { draft: string; cursorOffset: number } {
+  const before = draft.slice(0, trigger.start);
+  const after = draft.slice(trigger.end);
+  const mention = `@${suggestion.username}`;
+  const suffix = after.length === 0 || !/^\s/.test(after) ? " " : "";
+  const nextDraft = `${before}${mention}${suffix}${after}`;
+  return {
+    draft: nextDraft,
+    cursorOffset: before.length + mention.length + suffix.length,
+  };
+}