Replace the composer textarea with a Tiptap markdown editor

The composer now writes markdown with bold, italic, strike, code, links, quotes and lists, from shortcuts, markdown typing or a bubble over the selection. @ mentions a bot and # a workspace, shown as chips and saved as [bot:ID] / [workspace:ID]. Text selected in a message can be quoted into the composer. User messages render as markdown, and replies tell the bot who and what the user mentioned. Adds an ESM stand-in for use-sync-external-store, since bunext keeps React external in page bundles and the CommonJS original requires it. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-20 05:48:23 +01:00
parent e2093b0df6
commit 1208eac6b7
51 changed files with 1618 additions and 126 deletions
@@ -0,0 +1,51 @@
+import Button from "@moduletrace/twui/layout/Button";
+import Span from "@moduletrace/twui/layout/Span";
+import BotAvatar from "@/src/components/general/bot-avatar";
+import WorkspaceAvatar from "@/src/components/general/workspace-avatar";
+import type { BotFace, BotHue } from "@/src/dict/bot-dict";
+import type { ComposerMentionItem } from "../(utils)/search-mention-items";
+
+type Props = {
+    item: ComposerMentionItem;
+    active: boolean;
+    onPick: (item: ComposerMentionItem) => void;
+};
+
+/**
+ * One bot or workspace in the mention menu, with its role or description.
+ */
+export default function ComposerMentionOption({ item, active, onPick }: Props) {
+    const { bot, workspace } = item;
+    const detail = bot?.role || workspace?.description || "";
+
+    return (
+        <Button
+            type="button"
+            variant="ghost"
+            color="text"
+            role="option"
+            aria-selected={active}
+            title={item.label}
+            onMouseDown={(e) => {
+                e.preventDefault();
+                onPick(item);
+            }}
+            className={`w-full justify-start! gap-2.5! px-2! py-1.5! rounded-default-sm text-left text-ink ${active ? "bg-sunken" : "hover:bg-sunken"}`}
+        >
+            {bot ? (
+                <BotAvatar
+                    image_media_id={bot.image_media_id}
+                    hue={(bot.hue || null) as BotHue | null}
+                    face={(bot.face || "idle") as BotFace}
+                    label={bot.name || ""}
+                    size={22}
+                />
+            ) : null}
+            {workspace ? <WorkspaceAvatar image_media_id={workspace.image_media_id} size="xs" /> : null}
+            <Span className="shrink-0 text-sm font-bold leading-5">{item.label}</Span>
+            {detail ? (
+                <Span className="min-w-0 truncate text-xs leading-4 text-ink-secondary">{detail}</Span>
+            ) : null}
+        </Button>
+    );
+}