Add replies and emoji reactions to chat messages

Every message has a row under it to reply or react. Replying quotes the
message above the composer, and the sent message stores
reply_to_message_id (a plain id, not a foreign key, so deleting the
quoted message only drops the quote). send-message accepts a quote from
any session of the same conversation, so a rollover or a thread that
moved on still sends; the conversation drops a picked quote when its
session changes. The bot reads the quote as "[Replying to ...]" before
the user's turn, file-only replies included, and relayed messages carry
it too.

Reactions are a fixed set (BotMessageReactions) in
bot_message_reactions, one per message, emoji and user or bot. Users
toggle their own through api/admin/bots/react-message, and every bot
gets react_to_message for the session it answers (the user's latest
message by default). Both push the fresh list as server:bot-reaction,
with mine worked out for the session's user.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/pages/admin/bots/[bot_id]/(partials)/bot-message-line.tsx

@@ -1,17 +1,22 @@
+import { useContext } from "react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import Row from "@moduletrace/twui/layout/Row";
 import Stack from "@moduletrace/twui/layout/Stack";
+import type { BotMessageWithAttachments } from "@/src/types";
 import linkComputerRefs from "@/src/utils/link-computer-refs";
+import { BotMessageActionsContext } from "../(data)/message-actions-context";
 import { MessageMarkdownComponents } from "../(data)/message-markdown-components";
 import GroupTimestamp from "./group-timestamp";
+import MessageActions from "./message-actions";
+import MessageReactions from "./message-reactions";
+import MessageReplyQuote from "./message-reply-quote";
 import NeedsYouChip from "./needs-you-chip";
 import SpeakMessageButton from "./speak-message-button";
 
 type Props = {
-    message_id?: number | null;
-    text: string;
-    needs_you?: boolean;
+    message: BotMessageWithAttachments;
+    bot_name: string;
     /**
      * The group's time, on the last message only: shown beside its play
      * button.
@@ -22,32 +27,40 @@ type Props = {
 /**
  * One bot message, rendered from markdown (GFM; raw HTML is never
  * rendered). Computers it names (`computerRef`) show as buttons that
- * switch the bot to them. A play button under it reads it aloud,
- * disabled while the bot has no speech model, with the group's time
- * before it on the last message.
+ * switch the bot to them. A quoted reply sits above it, its reactions
+ * below, and a row under it replies, reacts, reads it aloud and shows
+ * why it needs you.
  */
-export default function BotMessageLine({ message_id, text, needs_you, at }: Props) {
-    const can_speak = Boolean(message_id && text.trim());
+export default function BotMessageLine({ message, bot_name, at }: Props) {
+    const { onReact } = useContext(BotMessageActionsContext);
+    const can_speak = Boolean(message.id && message.text?.trim());
 
     return (
-        <Stack className="gap-1.5! items-start max-w-full">
+        <Stack className="w-full min-w-0 gap-1.5! items-start max-w-full">
+            {message.reply_to ? (
+                <MessageReplyQuote reply_to={message.reply_to} bot_name={bot_name} />
+            ) : null}
             <Stack className="w-full gap-2.5! items-start break-words">
                 <Markdown
                     remarkPlugins={[remarkGfm]}
                     components={MessageMarkdownComponents}
                 >
-                    {linkComputerRefs({ text })}
+                    {linkComputerRefs({ text: message.text || "" })}
                 </Markdown>
             </Stack>
-            {needs_you || can_speak || at ? (
-                <Row className="gap-2! items-center">
-                    {needs_you ? <NeedsYouChip /> : null}
-                    {at ? <GroupTimestamp at={at} /> : null}
-                    {can_speak ? (
-                        <SpeakMessageButton message_id={message_id!} />
-                    ) : null}
-                </Row>
+            {message.id ? (
+                <MessageReactions
+                    message_id={message.id}
+                    reactions={message.reactions}
+                    onReact={onReact}
+                />
             ) : null}
+            <Row className="gap-2! items-center">
+                {message.needs_you ? <NeedsYouChip /> : null}
+                {at ? <GroupTimestamp at={at} /> : null}
+                {can_speak ? <SpeakMessageButton message_id={Number(message.id)} /> : null}
+                <MessageActions message={message} />
+            </Row>
         </Stack>
     );
 }