gloomberb 0.16.4 → 0.16.6

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

@@ -1,17 +1,20 @@
 import { memo } from "react";
 import { Box, Text } from "../../../../ui";
-import { hoverBg } from "../../../../theme/colors";
 import { useThemeColors } from "../../../../theme/theme-context";
 import { t } from "../../../../i18n";
 import { useAppLanguage } from "../../../../i18n/react";
 import { normalizeInlinePreview } from "../layout";
 import { DesktopChatMessageImages } from "../attachments/desktop";
 import { chatReplyQuoteText } from "../attachments/model";
-import { chatAuthorName } from "../ghost-user";
+import { chatAuthorName, isQuotedAuthorManagedBot } from "../ghost-user";
+import { ChatAiBadge } from "./ai-badge";
 import { ChatMessageActions, ChatMessageHeader } from "./header";
+import { MESSAGE_ACTION_WIDTH } from "../layout";
+import { canReactToMessage } from "../reactions";
+import { DesktopChatReactions, DesktopReactionAction } from "./reactions";
 import { ResponsiveTickerBadgeText } from "./inline-tokens";
 import { useSlowPendingSend } from "./pending-send";
-import { getChatMessageRenderState } from "./render-state";
+import { chatHighlightBg, getChatMessageRenderState } from "./render-state";
 import type { ChatMessageBaseProps } from "./types";
 
 const DESKTOP_MESSAGE_RIGHT_PADDING = 2;
@@ -22,6 +25,7 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
   messages,
   selectedIdx,
   hoveredIdx,
+  highlighted,
   canSend,
   catalog,
   userByUsername,
@@ -37,24 +41,48 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
   retryMessage,
   onImageLoadError,
   registerMessageElement,
+  reactionsEnabled = false,
+  currentUserId = null,
+  toggleReaction,
+  openReactionPicker,
+  reactionPickerMessageId = null,
+  closeReactionPicker,
 }: ChatMessageBaseProps & {
   registerMessageElement: (messageId: string, node: unknown | null) => void;
 }) {
   useAppLanguage();
   const themeColors = useThemeColors();
   const slowSend = useSlowPendingSend(msg);
+  const canReact = reactionsEnabled && canReactToMessage(msg) && !!toggleReaction;
   const state = getChatMessageRenderState({
     msg,
     index,
     messages,
     selectedIdx,
     hoveredIdx,
+    highlighted,
     canSend,
     canEdit: msg.id === latestEditableMessageId,
+    canReact,
     slowSend,
     host: "desktop",
   });
-  const actionProps = { state, index, beginReplyTo, beginEditMessage, retryMessage };
+  const reactionPickerOpen = canReact && reactionPickerMessageId === msg.id;
+  const reactAction = canReact && toggleReaction ? (
+    <DesktopReactionAction
+      msg={msg}
+      currentUserId={currentUserId}
+      open={reactionPickerOpen}
+      width={MESSAGE_ACTION_WIDTH}
+      variant={state.isSelected ? "primary" : "secondary"}
+      onOpenChange={(open) => {
+        if (open) openReactionPicker?.(index);
+        else closeReactionPicker?.();
+      }}
+      onToggle={toggleReaction}
+    />
+  ) : null;
+  const actionProps = { state, index, beginReplyTo, beginEditMessage, retryMessage, reactAction, reactionPickerOpen };
   const attachments = msg.attachments ?? [];
   // An image-only message has no text row; its images start where the text would.
   const showBody = msg.content.length > 0 || attachments.length === 0;
@@ -77,7 +105,9 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
       data-gloom-role="chat-message"
       data-gloom-chat-message-id={msg.id}
       data-selected={state.isSelected ? "true" : "false"}
-      style={{ "--chat-hover-bg": hoverBg(themeColors), minWidth: 0 }}
+      data-hovered={state.isHovered ? "true" : "false"}
+      data-highlighted={state.isHighlighted ? "true" : "false"}
+      style={{ "--chat-highlight-bg": chatHighlightBg(themeColors), minWidth: 0 }}
     >
       {msg.replyTo && (
         <Box
@@ -92,7 +122,16 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
         >
           {/* One line: the quoted text ends in an ellipsis, the whole message is a click away. */}
           <Text fg={state.replyMetaColor} style={{ flexShrink: 0, whiteSpace: "pre" }}>{`${t("reply")} `}</Text>
-          <Text fg={state.replyAuthorColor} style={{ flexShrink: 0, whiteSpace: "pre" }}>{`${msg.replyTo.user.username}: `}</Text>
+          {isQuotedAuthorManagedBot(msg.replyTo, userByUsername) ? (
+            // The badge stands where the colon would.
+            <>
+              <Text fg={state.replyAuthorColor} style={{ flexShrink: 0, whiteSpace: "pre" }}>{msg.replyTo.user.username}</Text>
+              <ChatAiBadge selectedColor={state.isSelected ? state.selectedTextColor : undefined} />
+              <Text fg={state.replyAuthorColor} style={{ flexShrink: 0, whiteSpace: "pre" }}>{" "}</Text>
+            </>
+          ) : (
+            <Text fg={state.replyAuthorColor} style={{ flexShrink: 0, whiteSpace: "pre" }}>{`${msg.replyTo.user.username}: `}</Text>
+          )}
           <Text
             fg={state.replyMetaColor}
             style={{
@@ -162,6 +201,16 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
           {state.grouped && !showBody && <ChatMessageActions floating {...actionProps} />}
         </Box>
       )}
+      {(msg.reactions?.length ?? 0) > 0 && (
+        <Box {...rowProps} paddingLeft={3} flexDirection="row" style={{ minWidth: 0 }}>
+          <DesktopChatReactions
+            msg={msg}
+            currentUserId={currentUserId}
+            canReact={canReact}
+            onToggle={toggleReaction ?? (() => {})}
+          />
+        </Box>
+      )}
     </Box>
   );
 });

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

@@ -1,18 +1,23 @@
-import { useRef } from "react";
+import { useRef, type ReactNode } from "react";
 import { Box, Text, useUiCapabilities, type BoxRenderable } from "../../../../ui";
 import { t } from "../../../../i18n";
 import { displayWidth } from "../../../../utils/format";
-import { chatAuthorName, isDiscordGhost } from "../ghost-user";
+import { chatAuthorName, isDiscordGhost, isManagedBot } from "../ghost-user";
 import { Button } from "../../../../components/ui";
 import { MESSAGE_ACTION_WIDTH } from "../layout";
+import { ChatAiBadge } from "./ai-badge";
 import type { ChatMessageRenderState } from "./render-state";
 import type { ChatMessageBaseProps } from "./types";
 
 type ChatMessageActionProps = Pick<ChatMessageBaseProps, "index" | "beginReplyTo" | "beginEditMessage" | "retryMessage"> & {
   state: ChatMessageRenderState;
+  /** The React action, one action wide, where the message takes reactions. */
+  reactAction?: ReactNode;
+  /** The reaction picker is open from this message: its actions stay shown. */
+  reactionPickerOpen?: boolean;
 };
 
-/** Reply and Edit for one message, or Retry for a failed send: after the header, or floated over the first body line of a grouped message. */
+/** Reply, React and Edit for one message, or Retry for a failed send: after the header, or floated over the first body line of a grouped message. */
 export function ChatMessageActions({
   state,
   index,
@@ -20,6 +25,8 @@ export function ChatMessageActions({
   beginReplyTo,
   beginEditMessage,
   retryMessage,
+  reactAction,
+  reactionPickerOpen = false,
 }: ChatMessageActionProps & { floating?: boolean }) {
   const variant = state.isSelected ? "primary" : "secondary";
   if (state.showRetryAction && retryMessage) {
@@ -41,13 +48,16 @@ export function ChatMessageActions({
     );
   }
   if (!state.showReplyAction) return null;
+  const showReact = state.showReactAction && !!reactAction;
+  const actionCount = 1 + (showReact ? 1 : 0) + (state.showEditAction ? 1 : 0);
   return (
     <Box
       {...(floating ? { position: "absolute", top: 0, right: 0 } : {})}
-      width={MESSAGE_ACTION_WIDTH * (state.showEditAction ? 2 : 1)}
+      width={MESSAGE_ACTION_WIDTH * actionCount}
       height={1}
       flexDirection="row"
       data-gloom-role="chat-message-reply-action"
+      data-picker-open={reactionPickerOpen ? "true" : undefined}
     >
       <Button stopPropagation
         label={t("Reply")}
@@ -55,6 +65,7 @@ export function ChatMessageActions({
         variant={variant}
         onPress={() => beginReplyTo(index)}
       />
+      {showReact && reactAction}
       {state.showEditAction && (
         <Button stopPropagation
           label={t("Edit")}
@@ -118,6 +129,7 @@ export function ChatMessageHeader({
           {authorLabel}
         </Text>
       </Box>
+      {isManagedBot(msg.user) && <ChatAiBadge selectedColor={state.isSelected ? state.selectedTextColor : undefined} />}
       {msg.origin === "discord" && <Text fg={state.originTagColor}> Discord</Text>}
       <Text fg={state.headerStatusColor}> {state.headerStatus}</Text>
       {(state.showReplyAction || (state.showRetryAction && actionProps.retryMessage)) && <Text fg={state.headerStatusColor}> </Text>}

package/src/plugins/builtin/chat/message/profile-popover.tsx

@@ -5,7 +5,8 @@ import { colors } from "../../../../theme/colors";
 import type { ChatUserSummary, PublicPortfolioAnalytics } from "../../../../api-client";
 import { displayWidth, formatNumber, truncateToDisplayWidth } from "../../../../utils/format";
 import { truncateWithEllipsis } from "../../../../utils/text-wrap";
-import { isDiscordGhost } from "../ghost-user";
+import { t } from "../../../../i18n";
+import { isDiscordGhost, isManagedBot } from "../ghost-user";
 import type { ChatUserAnchor } from "./types";
 
 /**
@@ -25,6 +26,8 @@ function hasPortfolioAnalytics(analytics: PublicPortfolioAnalytics | null | unde
 }
 
 export function hasPublicChatProfileInfo(user: ChatUserSummary): boolean {
+  // Gloom runs a managed assistant and says so on its card, whatever the profile switch holds.
+  if (isManagedBot(user)) return true;
   if (user.profilePublic === false || isDiscordGhost(user)) return false;
   return Boolean(user.bio?.trim() || user.title?.trim() || user.company?.trim() || hasPortfolioAnalytics(user.portfolioAnalytics));
 }
@@ -246,6 +249,7 @@ export function UserProfilePopover({
         ) : null}
         <Box flexGrow={1} />
       </Box>
+      {isManagedBot(user) ? <Text fg={colors.textDim}>{truncateWithEllipsis(t("AI bot run by Gloom"), headerWidth)}</Text> : null}
       {meta ? <Text fg={colors.textDim}>{truncateWithEllipsis(meta, headerWidth)}</Text> : null}
       {bio ? (
         <Text fg={colors.text} wrapText width={headerWidth}>

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

@@ -0,0 +1,210 @@
+import { useState } from "react";
+import type { ChatMessage, ChatReaction } from "../../../../api-client";
+import { Button, MenuPopover, type MenuItem } from "../../../../components/ui";
+import { colors } from "../../../../theme/colors";
+import { t } from "../../../../i18n";
+import { Box, Text } from "../../../../ui";
+import { displayWidth, truncateToDisplayWidth } from "../../../../utils/format";
+import {
+  isCustomReactionEmoji,
+  reactedByText,
+  reactionChipText,
+  reactionPickerChoices,
+  terminalReactionChipWidth,
+  terminalReactionGlyph,
+  terminalReactionRows,
+} from "../reactions";
+
+interface ChatReactionChipsProps {
+  msg: ChatMessage;
+  currentUserId: string | null;
+  /** Signed in, and the server takes reactions: a chip toggles your reaction. */
+  canReact: boolean;
+  onToggle: (messageId: string, emoji: string) => void;
+}
+
+function chipLabel(reaction: ChatReaction, currentUserId: string | null): string {
+  const who = reactedByText(reaction, currentUserId);
+  return who ? `${reaction.emoji} ${reaction.count}: ${who}` : `${reaction.emoji} ${reaction.count}`;
+}
+
+function chipPress(
+  props: ChatReactionChipsProps,
+  reaction: ChatReaction,
+): (() => void) | undefined {
+  // A custom Discord emoji is added and taken back on Discord only.
+  if (!props.canReact || isCustomReactionEmoji(reaction.emoji)) return undefined;
+  return () => props.onToggle(props.msg.id, reaction.emoji);
+}
+
+/**
+ * The reactions under a terminal message: a row of chips (wrapping when the
+ * body is narrow), yours filled. Hovering a chip names who reacted in a
+ * one-line tip just above it, over the message's own last line (drawn before
+ * the chips, so the tip stays on top).
+ */
+export function TerminalChatReactions({
+  rowProps,
+  width,
+  ...props
+}: ChatReactionChipsProps & {
+  /** Host row props: width, background and hover or selection hooks. */
+  rowProps: Record<string, unknown>;
+  /** Cells the body has. */
+  width: number;
+}) {
+  const [hovered, setHovered] = useState<string | null>(null);
+  const reactions = props.msg.reactions ?? [];
+  if (reactions.length === 0) return null;
+  const rows = terminalReactionRows(reactions, width);
+  return (
+    <>
+      {rows.map((row, rowIndex) => {
+        let offset = 0;
+        const offsets = row.map((reaction, index) => {
+          const at = offset + (index > 0 ? 1 : 0);
+          offset = at + terminalReactionChipWidth(reaction);
+          return at;
+        });
+        const hoveredIndex = row.findIndex((reaction) => reaction.emoji === hovered);
+        const hoveredReaction = hoveredIndex >= 0 ? row[hoveredIndex]! : null;
+        const who = hoveredReaction ? reactedByText(hoveredReaction, props.currentUserId) : "";
+        const glyph = hoveredReaction ? terminalReactionGlyph(hoveredReaction.emoji) : null;
+        const tipText = glyph && who ? truncateToDisplayWidth(who, Math.max(1, width - glyph.width - 3)) : "";
+        const tipWidth = glyph && tipText ? glyph.width + displayWidth(tipText) + 3 : 0;
+        const tipLeft = hoveredIndex >= 0 ? Math.max(0, Math.min(offsets[hoveredIndex]!, width - tipWidth)) : 0;
+        return (
+          <Box
+            key={`${props.msg.id}:reactions:${rowIndex}`}
+            {...rowProps}
+            paddingLeft={3}
+            height={1}
+            flexDirection="row"
+            position="relative"
+            data-gloom-role="chat-message-reactions"
+          >
+            {row.map((reaction, index) => (
+              <Box
+                key={reaction.emoji}
+                flexDirection="row"
+                height={1}
+                onMouseOver={() => setHovered(reaction.emoji)}
+                onMouseOut={() => setHovered((current) => (current === reaction.emoji ? null : current))}
+              >
+                {index > 0 && <Text> </Text>}
+                <Button
+                  label={chipLabel(reaction, props.currentUserId)}
+                  displayLabel={reactionChipText(reaction, "terminal")}
+                  variant={reaction.me ? "primary" : "secondary"}
+                  stopPropagation
+                  onPress={chipPress(props, reaction)}
+                />
+              </Box>
+            ))}
+            {tipWidth > 0 && glyph && (
+              <Box
+                position="absolute"
+                top={-1}
+                left={3 + tipLeft}
+                width={tipWidth}
+                height={1}
+                flexDirection="row"
+                // Inverted, so the tip reads as one over the chips and text it covers.
+                backgroundColor={colors.text}
+                style={{ zIndex: 5 }}
+              >
+                <Text fg={colors.bg}>{" "}</Text>
+                <Text fg={colors.bg}>{glyph.text}</Text>
+                <Text fg={colors.bg}>{` ${tipText} `}</Text>
+              </Box>
+            )}
+          </Box>
+        );
+      })}
+    </>
+  );
+}
+
+/** The reactions under a desktop message, wrapping with the width; each chip's tooltip names who reacted. */
+export function DesktopChatReactions(props: ChatReactionChipsProps) {
+  const reactions = props.msg.reactions ?? [];
+  if (reactions.length === 0) return null;
+  return (
+    <Box
+      flexDirection="row"
+      data-gloom-role="chat-message-reactions"
+      style={{ flexWrap: "wrap", gap: 4, minWidth: 0, paddingTop: 2, paddingBottom: 4 }}
+    >
+      {reactions.map((reaction) => (
+        <Button
+          key={reaction.emoji}
+          label={chipLabel(reaction, props.currentUserId)}
+          displayLabel={reactionChipText(reaction, "desktop")}
+          title={reactedByText(reaction, props.currentUserId) || undefined}
+          // Yours carries the focus outline, which reads on a selected row too.
+          active={reaction.me}
+          stopPropagation
+          onPress={chipPress(props, reaction)}
+        />
+      ))}
+    </Box>
+  );
+}
+
+/** The picker's entries: each emoji, ticked when you reacted, with its count and who reacted. */
+function reactionMenuItems(msg: ChatMessage, currentUserId: string | null): MenuItem[] {
+  return reactionPickerChoices(msg).map((reaction) => ({
+    id: reaction.emoji,
+    label: reaction.emoji,
+    checked: reaction.me,
+    ...(reaction.count > 0
+      ? { hint: String(reaction.count), description: reactedByText(reaction, currentUserId) }
+      : {}),
+  }));
+}
+
+/**
+ * The React action on the desktop: a button in the message's actions that
+ * opens the picker beside it (also from the keyboard, on the selected message).
+ */
+export function DesktopReactionAction({
+  msg,
+  currentUserId,
+  open,
+  width,
+  variant,
+  onOpenChange,
+  onToggle,
+}: {
+  msg: ChatMessage;
+  currentUserId: string | null;
+  open: boolean;
+  width: number;
+  variant: "primary" | "secondary";
+  onOpenChange: (open: boolean) => void;
+  onToggle: (messageId: string, emoji: string) => void;
+}) {
+  const trigger = (
+    <Button
+      stopPropagation
+      label={t("React")}
+      width={width}
+      variant={variant}
+      expanded={open}
+      onPress={() => onOpenChange(!open)}
+    />
+  );
+  if (!open) return trigger;
+  return (
+    <MenuPopover
+      open
+      onOpenChange={onOpenChange}
+      trigger={trigger}
+      placement="bottom-end"
+      minWidth={150}
+      label={t("React")}
+      items={reactionMenuItems(msg, currentUserId)}
+      onSelect={(emoji) => onToggle(msg.id, emoji)}
+    />
+  );
+}

package/src/plugins/builtin/chat/message/render-state.ts

@@ -1,14 +1,22 @@
 import { TextAttributes } from "../../../../ui";
-import { colors, hoverBg } from "../../../../theme/colors";
+import { blendHex, colors, hoverBg } from "../../../../theme/colors";
 import type { ChatMessage } from "../../../../api-client";
 import { formatTimeAgo } from "../../../../utils/datetime-format";
 import { isGroupedWithPrevious } from "../layout";
 
+/** The band on a message the reader was sent to: the accent at low strength, between the hover and the selection. */
+export function chatHighlightBg(palette = colors): string {
+  return blendHex(palette.bg, palette.borderFocused, 0.22);
+}
+
 export interface ChatMessageRenderState {
   isSelected: boolean;
   isHovered: boolean;
+  isHighlighted: boolean;
   grouped: boolean;
   showReplyAction: boolean;
+  /** Reactions are on offer here: the server takes them and the message can have them. */
+  showReactAction: boolean;
   showEditAction: boolean;
   /** A failed send of yours offers Retry in place of Reply and Edit. */
   showRetryAction: boolean;
@@ -33,8 +41,10 @@ export function getChatMessageRenderState({
   messages,
   selectedIdx,
   hoveredIdx,
+  highlighted = false,
   canSend,
   canEdit,
+  canReact = false,
   slowSend,
   host,
 }: {
@@ -43,8 +53,11 @@ export function getChatMessageRenderState({
   messages: ChatMessage[];
   selectedIdx: number;
   hoveredIdx: number | null;
+  highlighted?: boolean;
   canSend: boolean;
   canEdit: boolean;
+  /** The message takes a reaction from you. */
+  canReact?: boolean;
   /** A pending send that has waited past the threshold; a fresh one is drawn like a sent message. */
   slowSend: boolean;
   /** The desktop reveals actions on hover with CSS, so it renders them on every row. */
@@ -52,6 +65,7 @@ export function getChatMessageRenderState({
 }): ChatMessageRenderState {
   const isSelected = index === selectedIdx;
   const isHovered = index === hoveredIdx && !isSelected;
+  const isHighlighted = highlighted && !isSelected;
   const grouped = isGroupedWithPrevious(messages, index);
   const isSending = msg.clientStatus === "sending" && slowSend;
   const hasFailed = msg.clientStatus === "failed";
@@ -67,12 +81,14 @@ export function getChatMessageRenderState({
   return {
     isSelected,
     isHovered,
+    isHighlighted,
     grouped,
     showReplyAction,
+    showReactAction: showReplyAction && canReact,
     showEditAction: showReplyAction && canEdit,
     showRetryAction: showActions && hasFailed,
     isSending,
-    bgColor: isSelected ? colors.selected : isHovered ? hoverBg() : undefined,
+    bgColor: isSelected ? colors.selected : isHighlighted ? chatHighlightBg() : isHovered ? hoverBg() : undefined,
     selectedTextColor,
     replyMetaColor: isSelected ? selectedTextColor : colors.textMuted,
     replyAuthorColor: isSelected ? selectedTextColor : colors.textDim,

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

@@ -1,9 +1,14 @@
 import { Box, Text, TextAttributes, useRendererHost } from "../../../../ui";
 import { colors } from "../../../../theme/colors";
 import { t } from "../../../../i18n";
-import { formatInlinePreview, getMessageBodyTokenLines } from "../layout";
+import { formatInlinePreview, getMessageBodyTokenLines, MESSAGE_ACTION_WIDTH } from "../layout";
 import { chatImageLabel, chatImageReviewNote, chatReplyQuoteText } from "../attachments/model";
+import { isQuotedAuthorManagedBot } from "../ghost-user";
+import { CHAT_AI_BADGE_WIDTH, ChatAiBadge } from "./ai-badge";
 import { ChatMessageActions, ChatMessageHeader } from "./header";
+import { Button } from "../../../../components/ui";
+import { canReactToMessage } from "../reactions";
+import { TerminalChatReactions } from "./reactions";
 import { ResponsiveTickerBadgeText } from "./inline-tokens";
 import { useSlowPendingSend } from "./pending-send";
 import { getChatMessageRenderState } from "./render-state";
@@ -21,6 +26,7 @@ export function TerminalChatMessage({
   messages,
   selectedIdx,
   hoveredIdx,
+  highlighted,
   canSend,
   contentWidth,
   messageBodyWidth,
@@ -37,21 +43,36 @@ export function TerminalChatMessage({
   latestEditableMessageId,
   retryMessage,
   setHoveredIdx,
+  reactionsEnabled = false,
+  currentUserId = null,
+  toggleReaction,
+  openReactionPicker,
 }: TerminalChatMessageProps) {
   const rendererHost = useRendererHost();
   const slowSend = useSlowPendingSend(msg);
+  const canReact = reactionsEnabled && canReactToMessage(msg);
   const state = getChatMessageRenderState({
     msg,
     index,
     messages,
     selectedIdx,
     hoveredIdx,
+    highlighted,
     canSend,
     canEdit: msg.id === latestEditableMessageId,
+    canReact: canReact && !!openReactionPicker,
     slowSend,
     host: "terminal",
   });
-  const actionProps = { state, index, beginReplyTo, beginEditMessage, retryMessage };
+  const reactAction = openReactionPicker ? (
+    <Button stopPropagation
+      label={t("React")}
+      width={MESSAGE_ACTION_WIDTH}
+      variant={state.isSelected ? "primary" : "secondary"}
+      onPress={() => openReactionPicker(index)}
+    />
+  ) : null;
+  const actionProps = { state, index, beginReplyTo, beginEditMessage, retryMessage, reactAction };
   const attachments = msg.attachments ?? [];
   // An image-only message has no text row; its image rows start where the text would.
   const bodyLines = msg.content.length > 0 || attachments.length === 0
@@ -59,6 +80,7 @@ export function TerminalChatMessage({
     : [];
   const reviewNote = chatImageReviewNote(msg);
   const imageColor = state.isSelected ? state.selectedTextColor : colors.textDim;
+  const quotedAuthorIsBot = !!msg.replyTo && isQuotedAuthorManagedBot(msg.replyTo, userByUsername);
   const setHovered = () => setHoveredIdx((current) => (current === index ? current : index));
   const clearHovered = () => setHoveredIdx((current) => (current === index ? null : current));
   const messageRowProps = {
@@ -81,11 +103,20 @@ export function TerminalChatMessage({
           }}
         >
           <Text fg={state.replyMetaColor}>{`${t("reply")} `}</Text>
-          <Text fg={state.replyAuthorColor}>{msg.replyTo.user.username}: </Text>
+          {quotedAuthorIsBot ? (
+            // The badge stands where the colon would.
+            <>
+              <Text fg={state.replyAuthorColor}>{msg.replyTo.user.username}</Text>
+              <ChatAiBadge selectedColor={state.isSelected ? state.selectedTextColor : undefined} />
+              <Text fg={state.replyAuthorColor}> </Text>
+            </>
+          ) : (
+            <Text fg={state.replyAuthorColor}>{msg.replyTo.user.username}: </Text>
+          )}
           <Text fg={state.replyMetaColor}>
             {formatInlinePreview(
               chatReplyQuoteText(msg.replyTo),
-              Math.max(messageBodyWidth - `reply ${msg.replyTo.user.username}: `.length, 0),
+              Math.max(messageBodyWidth - `reply ${msg.replyTo.user.username}`.length - (quotedAuthorIsBot ? CHAT_AI_BADGE_WIDTH + 1 : 2), 0),
             )}
           </Text>
         </Box>
@@ -159,6 +190,14 @@ export function TerminalChatMessage({
           </Text>
         </Box>
       )}
+      <TerminalChatReactions
+        msg={msg}
+        currentUserId={currentUserId}
+        canReact={canReact && !!toggleReaction}
+        onToggle={toggleReaction ?? (() => {})}
+        rowProps={messageRowProps}
+        width={messageBodyWidth}
+      />
     </Box>
   );
 }

package/src/plugins/builtin/chat/message/types.ts

@@ -17,6 +17,8 @@ export interface ChatMessageBaseProps {
   messages: ChatMessage[];
   selectedIdx: number;
   hoveredIdx: number | null;
+  /** A message the reader was sent to, marked for a moment. */
+  highlighted?: boolean;
   canSend: boolean;
   catalog: Record<string, InlineTickerCatalogEntry>;
   userByUsername: Map<string, ChatUserSummary>;
@@ -34,4 +36,14 @@ export interface ChatMessageBaseProps {
   retryMessage?: (index: number) => void;
   /** An image did not load, perhaps because its signed link expired. */
   onImageLoadError?: (attachment: ChatAttachment) => void;
+  /** The server takes reactions and you can send: chips toggle and React is on offer. */
+  reactionsEnabled?: boolean;
+  currentUserId?: string | null;
+  /** Adds or takes back your reaction with one emoji. */
+  toggleReaction?: (messageId: string, emoji: string) => void;
+  /** Opens the reaction picker for a message. */
+  openReactionPicker?: (index: number) => void;
+  /** The message whose picker is open on the desktop. */
+  reactionPickerMessageId?: string | null;
+  closeReactionPicker?: () => void;
 }