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,43 @@
+import { useContext } from "react";
+import { NodeViewWrapper, type ReactNodeViewProps } from "@tiptap/react";
+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 { CrewBotsContext } from "../(data)/crew-bots-context";
+import { CrewWorkspacesContext } from "../(data)/crew-workspaces-context";
+
+/**
+ * A bot or workspace mentioned in the composer, shown like the chips in
+ * the thread (`BotRefChip`, `WorkspaceRefChip`) but not a link. One the
+ * user can't see any more keeps its ref's words.
+ */
+export default function ComposerMentionChip({ node, selected }: ReactNodeViewProps) {
+    const bots = useContext(CrewBotsContext);
+    const workspaces = useContext(CrewWorkspacesContext);
+    const id = Number(node.attrs.id);
+    const is_workspace = node.attrs.mentionSuggestionChar == "#";
+    const bot = is_workspace ? undefined : bots.find((b) => b.id == id);
+    const workspace = is_workspace ? workspaces.find((w) => w.id == id) : undefined;
+    const name = bot?.name || workspace?.name || node.attrs.label || `${is_workspace ? "workspace" : "bot"} ${id}`;
+
+    return (
+        <NodeViewWrapper
+            as="span"
+            data-mention=""
+            className={`inline-flex h-6 gap-1.5 items-center px-1.5 mx-px align-middle rounded-default-xs bg-sunken text-[13px] font-bold leading-4 text-ink whitespace-nowrap ${selected ? "ring-2 ring-ink" : ""}`}
+        >
+            {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={18}
+                />
+            ) : null}
+            {workspace ? <WorkspaceAvatar image_media_id={workspace.image_media_id} size="xs" /> : null}
+            <Span>{name}</Span>
+        </NodeViewWrapper>
+    );
+}