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,33 @@
+import Button from "@moduletrace/twui/layout/Button";
+import Span from "@moduletrace/twui/layout/Span";
+import type { BotMessageReaction } from "@/src/types";
+
+type Props = BotMessageReaction & {
+    onToggle: () => void;
+};
+
+/**
+ * One emoji reaction under a message: its count, highlighted when the
+ * user gave it. Clicking takes it back or adds it.
+ */
+export default function MessageReactionChip({ emoji, count, mine, onToggle }: Props) {
+    return (
+        <Button
+            title={mine ? "Remove your reaction" : "Add this reaction"}
+            aria-label={mine ? "Remove your reaction" : "Add this reaction"}
+            aria-pressed={mine}
+            type="button"
+            variant="ghost"
+            color="text"
+            onClick={onToggle}
+            className={`shrink-0 gap-1! px-2! py-0.5! rounded-default-lg border border-solid text-xs leading-4 ${
+                mine
+                    ? "border-hairline-strong bg-sunken text-ink"
+                    : "border-hairline bg-surface text-ink-secondary hover:text-ink"
+            } focus-visible:ring-2 focus-visible:ring-ink`}
+        >
+            <Span className="text-sm leading-4">{emoji}</Span>
+            {count > 1 ? <Span className="tabular-nums">{count}</Span> : null}
+        </Button>
+    );
+}