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]>
2026-10-19 21:56:31 +01:00
parent bc499a7466
commit d1b5b6d68a
44 changed files with 1289 additions and 58 deletions
@@ -0,0 +1,52 @@
+import { useState } from "react";
+import Dropdown from "@moduletrace/twui/elements/Dropdown";
+import Row from "@moduletrace/twui/layout/Row";
+import { SmilePlus } from "lucide-react";
+import { BotMessageReactions, type BotMessageReactionEmoji } from "@/src/dict/bot-dict";
+import MessageActionButton from "./message-action-button";
+import MessageReactionOption from "./message-reaction-option";
+
+type Props = {
+    message_id: number;
+    onReact: (params: { message_id: number; emoji: BotMessageReactionEmoji }) => void;
+};
+
+/**
+ * Opens the fixed set of reactions and adds one to the message. The
+ * picker closes as soon as one is picked.
+ */
+export default function MessageReactionPicker({ message_id, onReact }: Props) {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Dropdown
+            position="top-left"
+            externalOpen={open}
+            externalSetOpen={setOpen}
+            contentWrapperProps={{ className: "pb-1" }}
+            target={
+                <MessageActionButton
+                    title="Add a reaction"
+                    aria_label="Add a reaction"
+                    onClick={() => {}}
+                >
+                    <SmilePlus size={14} aria-hidden />
+                </MessageActionButton>
+            }
+        >
+            <Row className="gap-0! flex-nowrap items-center rounded-default-lg border border-solid border-hairline bg-surface p-1 shadow-popover">
+                {BotMessageReactions.map((reaction) => (
+                    <MessageReactionOption
+                        key={reaction.value}
+                        title={reaction.title}
+                        value={reaction.value}
+                        onPick={() => {
+                            setOpen(false);
+                            onReact({ message_id, emoji: reaction.value });
+                        }}
+                    />
+                ))}
+            </Row>
+        </Dropdown>
+    );
+}