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,33 @@
+import { useContext } from "react";
+import Link from "@moduletrace/twui/layout/Link";
+import Span from "@moduletrace/twui/layout/Span";
+import WorkspaceAvatar from "@/src/components/general/workspace-avatar";
+import { CrewWorkspacesContext } from "../(data)/crew-workspaces-context";
+
+type Props = {
+    workspace_id: number;
+};
+
+/**
+ * A workspace named in a message (`workspaceRef`): a link to its
+ * dashboard. One the user isn't in is shown by name only.
+ */
+export default function WorkspaceRefChip({ workspace_id }: Props) {
+    const workspaces = useContext(CrewWorkspacesContext);
+    const workspace = workspaces.find((w) => w.id == workspace_id);
+
+    if (!workspace) {
+        return <Span className="font-bold">{`workspace ${workspace_id}`}</Span>;
+    }
+
+    return (
+        <Link
+            href={`/admin/workspaces/${workspace.id}`}
+            title={`Open ${workspace.name}`}
+            className="inline-flex h-6 gap-1.5 items-center px-1.5 align-middle rounded-default-xs border-0 bg-sunken text-[13px] font-bold leading-4 text-ink whitespace-nowrap hover:opacity-80"
+        >
+            <WorkspaceAvatar image_media_id={workspace.image_media_id} size="xs" />
+            {workspace.name}
+        </Link>
+    );
+}