gloomberb 0.16.5 → 0.17.0

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

@@ -5,7 +5,18 @@ 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 {
+  CHAT_PERSON_ICON_WIDTH,
+  chatAuthorNameColor,
+  chatPersonFacts,
+  chatPersonIcons,
+  fitChatPersonIcons,
+  type ChatPersonFacts,
+} from "../people";
+import { ChatPersonIcons } from "./person-icons";
+import { localUtcOffsetMinutes } from "../../../../utils/local-utc-offset";
 import type { ChatUserAnchor } from "./types";
 
 /**
@@ -25,6 +36,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));
 }
@@ -144,21 +157,73 @@ function nameCardRow(user: ChatUserSummary): { handle: string; name: string | nu
 
 function nameCardNaturalWidth(user: ChatUserSummary): number {
   const { handle, name } = nameCardRow(user);
-  return displayWidth(handle) + (name ? 1 + displayWidth(name) : 0);
+  return displayWidth(handle) + chatPersonIcons(user).length * CHAT_PERSON_ICON_WIDTH + (name ? 1 + displayWidth(name) : 0);
+}
+
+/**
+ * The handle in the name's colour, then the person's icons, Team and Pro
+ * included without a pointer on anything: the line below says what each one
+ * is. A handle too long for them keeps its room and the icons go first.
+ */
+function CardHandle({ user, handle, width }: { user: ChatUserSummary; handle: string; width: number }) {
+  const icons = fitChatPersonIcons(chatPersonIcons(user), width - displayWidth(handle));
+  return (
+    <>
+      <Text fg={chatAuthorNameColor(user)} attributes={TextAttributes.BOLD}>
+        {truncateToDisplayWidth(handle, Math.max(1, width - icons.length * CHAT_PERSON_ICON_WIDTH))}
+      </Text>
+      <ChatPersonIcons icons={icons} />
+    </>
+  );
 }
 
 function NameCardRow({ user, width }: { user: ChatUserSummary; width: number }) {
   const { handle, name } = nameCardRow(user);
-  const handleText = truncateToDisplayWidth(handle, width);
-  const nameWidth = width - displayWidth(handleText) - 1;
+  const handleWidth = Math.min(width, displayWidth(handle) + chatPersonIcons(user).length * CHAT_PERSON_ICON_WIDTH);
+  const nameWidth = width - handleWidth - 1;
   return (
     <Box height={1} width={width} flexDirection="row">
-      <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{handleText}</Text>
+      <CardHandle user={user} handle={handle} width={handleWidth} />
       {name && nameWidth >= 4 ? <Text fg={colors.textDim}>{` ${truncateToDisplayWidth(name, nameWidth)}`}</Text> : null}
     </Box>
   );
 }
 
+/**
+ * The card's lines about who someone is beyond their profile: their role and
+ * Pro, their local time and what they trade. Each is one short line, or
+ * nothing. The keyboard reaches them too: `p` on a message opens this card.
+ */
+function personFactRows(facts: ChatPersonFacts): Array<{ id: string; label: string | null; value: string }> {
+  return [
+    ...(facts.roles.length > 0 ? [{ id: "role", label: null, value: facts.roles.map((role) => t(role)).join(" · ") }] : []),
+    ...(facts.localTime ? [{ id: "local-time", label: t("Local time"), value: facts.localTime }] : []),
+    ...(facts.trades.length > 0 ? [{ id: "trades", label: t("Trades"), value: facts.trades.map((desk) => t(desk)).join(", ") }] : []),
+  ];
+}
+
+function personFactRowWidth(row: { label: string | null; value: string }): number {
+  return (row.label ? displayWidth(row.label) + 1 : 0) + displayWidth(row.value);
+}
+
+function PersonFactRows({ rows, width }: { rows: ReturnType<typeof personFactRows>; width: number }) {
+  return (
+    <>
+      {rows.map((row) => {
+        const labelText = row.label ? truncateToDisplayWidth(row.label, Math.max(1, width - 2)) : "";
+        const valueWidth = Math.max(1, width - (labelText ? displayWidth(labelText) + 1 : 0));
+        // A long list of desks wraps under itself rather than losing its end.
+        return (
+          <Box key={row.id} width={width} flexDirection="row" data-gloom-role={`chat-profile-${row.id}`}>
+            {labelText ? <Text fg={colors.textDim}>{`${labelText} `}</Text> : null}
+            <Text fg={row.label ? colors.text : colors.textDim} wrapText width={valueWidth}>{row.value}</Text>
+          </Box>
+        );
+      })}
+    </>
+  );
+}
+
 export function UserProfilePopover({
   user,
   anchor = null,
@@ -202,11 +267,13 @@ export function UserProfilePopover({
   const maxPopoverWidth = Math.max(24, Math.min(38, width - 4));
   // Anyone without a public profile still gets a card: the name and a way to write to them.
   const nameOnly = !isOwnProfile && !hasPublicChatProfileInfo(user);
+  const factRows = personFactRows(chatPersonFacts(user, Date.now(), localUtcOffsetMinutes()));
   const popoverWidth = nameOnly
     ? Math.min(maxPopoverWidth, Math.max(
       NAME_CARD_MIN_WIDTH,
       nameCardNaturalWidth(user),
       messageRefusal ? displayWidth(messageRefusal) : 0,
+      ...factRows.map(personFactRowWidth),
     ) + chromeWidth)
     : maxPopoverWidth;
   const meta = [user.title, user.company].filter(Boolean).join(" · ");
@@ -224,6 +291,7 @@ export function UserProfilePopover({
   const content = nameOnly ? (
     <>
       <NameCardRow user={user} width={headerWidth} />
+      <PersonFactRows rows={factRows} width={headerWidth} />
       {messageAction ? (
         <Button label={messageAction.label} width={headerWidth} variant="ghost" compact stopPropagation onPress={messageAction.onPress} />
       ) : messageRefusal ? (
@@ -233,10 +301,8 @@ export function UserProfilePopover({
   ) : (
     <>
       <Box height={1} width={headerWidth} flexDirection="row">
-        <Box width={usernameWidth}>
-          <Text fg={colors.positive} attributes={TextAttributes.BOLD}>
-            {truncateWithEllipsis(user.username ? `@${user.username}` : user.displayName, usernameWidth)}
-          </Text>
+        <Box width={usernameWidth} flexDirection="row">
+          <CardHandle user={user} handle={user.username ? `@${user.username}` : user.displayName} width={usernameWidth} />
         </Box>
         {statsWidth > 0 ? (
           <>
@@ -246,7 +312,9 @@ export function UserProfilePopover({
         ) : null}
         <Box flexGrow={1} />
       </Box>
+      <PersonFactRows rows={factRows.filter((row) => row.id === "role")} width={headerWidth} />
       {meta ? <Text fg={colors.textDim}>{truncateWithEllipsis(meta, headerWidth)}</Text> : null}
+      <PersonFactRows rows={factRows.filter((row) => row.id !== "role")} width={headerWidth} />
       {bio ? (
         <Text fg={colors.text} wrapText width={headerWidth}>
           {bio}

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,17 +1,36 @@
 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";
+import { isGroupedWithPrevious, MESSAGE_ACTION_WIDTH } from "../layout";
+import { chatAuthorNameColor } from "../people";
+
+/** 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;
+  /**
+   * Cells the header's actions take whenever they show, hovered or not, so a
+   * narrow row fits its icons once instead of again on every hover.
+   */
+  actionsWidth: number;
+  /**
+   * The Team and Pro icons show: the row is under the pointer or selected.
+   * A bot's icon shows always.
+   */
+  showPersonIcons: boolean;
   /** Still pending past the slow threshold: drawn dim. */
   isSending: boolean;
   bgColor: string | undefined;
@@ -33,8 +52,10 @@ export function getChatMessageRenderState({
   messages,
   selectedIdx,
   hoveredIdx,
+  highlighted = false,
   canSend,
   canEdit,
+  canReact = false,
   slowSend,
   host,
 }: {
@@ -43,8 +64,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 +76,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 +92,16 @@ export function getChatMessageRenderState({
   return {
     isSelected,
     isHovered,
+    isHighlighted,
     grouped,
     showReplyAction,
+    showReactAction: showReplyAction && canReact,
     showEditAction: showReplyAction && canEdit,
     showRetryAction: showActions && hasFailed,
+    actionsWidth: !canSend ? 0 : 1 + MESSAGE_ACTION_WIDTH * (hasFailed ? 1 : 1 + (canReact ? 1 : 0) + (canEdit ? 1 : 0)),
+    showPersonIcons: isSelected || hoveredIdx === index,
     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,
@@ -85,7 +114,7 @@ export function getChatMessageRenderState({
           ? colors.negative
           : colors.textMuted,
     originTagColor: isSelected ? selectedTextColor : colors.textDim,
-    authorColor: isSelected ? selectedTextColor : hasFailed ? colors.negative : colors.positive,
+    authorColor: isSelected ? selectedTextColor : hasFailed ? colors.negative : chatAuthorNameColor(msg.user),
     authorAttributes: (isSending ? TextAttributes.DIM : 0) | TextAttributes.BOLD,
     bodyColor: isSelected ? selectedTextColor : hasFailed ? colors.negative : isSending ? colors.textDim : colors.text,
   };

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

@@ -1,10 +1,18 @@
 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 { ChatBotIcon } from "./person-icons";
+import { CHAT_PERSON_ICON_WIDTH } from "../people";
 import { ChatMessageActions, ChatMessageHeader } from "./header";
+import { Button } from "../../../../components/ui";
+import { canReactToMessage } from "../reactions";
+import { TerminalChatReactions } from "./reactions";
 import { ResponsiveTickerBadgeText } from "./inline-tokens";
+import { TerminalChatPaneChip } from "./pane-chip";
+import { chatMessagePaneLinks } from "../pane-links/model";
 import { useSlowPendingSend } from "./pending-send";
 import { getChatMessageRenderState } from "./render-state";
 import type { ChatMessageBaseProps } from "./types";
@@ -21,6 +29,7 @@ export function TerminalChatMessage({
   messages,
   selectedIdx,
   hoveredIdx,
+  highlighted,
   canSend,
   contentWidth,
   messageBodyWidth,
@@ -37,28 +46,47 @@ export function TerminalChatMessage({
   latestEditableMessageId,
   retryMessage,
   setHoveredIdx,
+  reactionsEnabled = false,
+  currentUserId = null,
+  toggleReaction,
+  openReactionPicker,
+  openPaneLink,
 }: 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 ?? [];
+  // A share link is its chip's row; a message that was only one has no text row.
+  const { links: paneLinks, content } = chatMessagePaneLinks(msg);
   // 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
-    ? getMessageBodyTokenLines(msg.content, messageBodyWidth, catalog)
+  const bodyLines = content.length > 0 || (attachments.length === 0 && paneLinks.length === 0)
+    ? getMessageBodyTokenLines(content, messageBodyWidth, catalog)
     : [];
   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 +109,20 @@ export function TerminalChatMessage({
           }}
         >
           <Text fg={state.replyMetaColor}>{`${t("reply")} `}</Text>
-          <Text fg={state.replyAuthorColor}>{msg.replyTo.user.username}: </Text>
+          {quotedAuthorIsBot ? (
+            // The bot's icon stands where the colon would.
+            <>
+              <Text fg={state.replyAuthorColor}>{msg.replyTo.user.username}</Text>
+              <ChatBotIcon 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_PERSON_ICON_WIDTH + 1 : 2), 0),
             )}
           </Text>
         </Box>
@@ -128,6 +165,25 @@ export function TerminalChatMessage({
           {lineIndex === 0 && state.grouped && <ChatMessageActions floating {...actionProps} />}
         </Box>
       ))}
+      {paneLinks.map((link, linkIndex) => (
+        <Box
+          key={`${msg.id}:pane:${link.kind === "share" ? link.id : link.link.kind}`}
+          {...messageRowProps}
+          paddingLeft={3}
+          height={1}
+          flexDirection="row"
+          position={state.grouped && bodyLines.length === 0 && linkIndex === 0 ? "relative" : undefined}
+        >
+          <TerminalChatPaneChip
+            link={link}
+            width={messageBodyWidth}
+            selected={state.isSelected}
+            selectedTextColor={state.selectedTextColor}
+            onOpen={openPaneLink}
+          />
+          {state.grouped && bodyLines.length === 0 && linkIndex === 0 && <ChatMessageActions floating {...actionProps} />}
+        </Box>
+      ))}
       {attachments.map((attachment, imageIndex) => (
         <Box
           key={`${msg.id}:image:${attachment.id}`}
@@ -135,7 +191,7 @@ export function TerminalChatMessage({
           paddingLeft={3}
           height={1}
           flexDirection="row"
-          position={state.grouped && bodyLines.length === 0 && imageIndex === 0 ? "relative" : undefined}
+          position={state.grouped && bodyLines.length === 0 && paneLinks.length === 0 && imageIndex === 0 ? "relative" : undefined}
         >
           <Box
             height={1}
@@ -149,7 +205,7 @@ export function TerminalChatMessage({
               {formatInlinePreview(`[${chatImageLabel(attachment)}]`, messageBodyWidth)}
             </Text>
           </Box>
-          {state.grouped && bodyLines.length === 0 && imageIndex === 0 && <ChatMessageActions floating {...actionProps} />}
+          {state.grouped && bodyLines.length === 0 && paneLinks.length === 0 && imageIndex === 0 && <ChatMessageActions floating {...actionProps} />}
         </Box>
       ))}
       {reviewNote && (
@@ -159,6 +215,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

@@ -1,6 +1,7 @@
 import type { InlineTickerCatalogEntry } from "../../../../state/hooks/inline-tickers";
 import type { ChatAttachment, ChatMessage, ChatUserSummary } from "../../../../api-client";
 import type { BoxRenderable } from "../../../../ui";
+import type { ChatMessagePaneLink } from "../pane-links/model";
 
 /** The name or @mention a user's card opens beside, where the renderer places cards next to it. */
 export type ChatUserAnchor = BoxRenderable | null;
@@ -17,6 +18,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 +37,16 @@ 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;
+  /** Opens what a chip under the message stands for: a shared pane, a Wire post's story or calendar. */
+  openPaneLink: (link: ChatMessagePaneLink) => void;
 }