split files, add small readme

Author: jonathanlab

apps/array/src/renderer/features/message-editor/README.md

@@ -0,0 +1,37 @@
+# Message Editor
+
+Tiptap-based editor with mention support for files (`@`) and commands (`/`).
+
+## Structure
+
+```
+message-editor/
+├── components/
+│   ├── MessageEditor.tsx    # Main editor component
+│   └── EditorToolbar.tsx    # Attachment buttons
+├── tiptap/
+│   ├── useTiptapEditor.ts   # Hook that creates the editor
+│   ├── useDraftSync.ts      # Persists drafts to store
+│   ├── extensions.ts        # Configures Tiptap extensions
+│   ├── CommandMention.ts    # / command suggestions
+│   ├── FileMention.ts       # @ file suggestions
+│   ├── MentionChipNode.ts   # Renders chips in editor
+│   └── SuggestionList.tsx   # Dropdown UI for suggestions
+├── suggestions/
+│   └── getSuggestions.ts    # Fetches suggestions via tRPC
+├── stores/
+│   └── draftStore.ts        # Zustand store for drafts
+├── utils/
+│   └── content.ts           # EditorContent type + serialization
+└── types.ts                 # Suggestion item types
+```
+
+## How it works
+
+1. `MessageEditor` calls `useTiptapEditor` with session config
+2. `useTiptapEditor` creates a Tiptap editor with extensions from `extensions.ts`
+3. Extensions include `CommandMention` and `FileMention` which show suggestions on `/` and `@`
+4. Suggestions are fetched via `getSuggestions.ts` (commands from session store, files via tRPC)
+5. Selected suggestions become `MentionChipNode` elements in the editor
+6. `useDraftSync` saves editor content to `draftStore` on every change
+7. On submit, content is serialized to XML via `contentToXml()` and sent to the session

apps/array/src/renderer/features/message-editor/components/EditorToolbar.tsx

@@ -2,7 +2,7 @@ import { ModelSelector } from "@features/sessions/components/ModelSelector";
 import { Paperclip } from "@phosphor-icons/react";
 import { Flex, IconButton, Tooltip } from "@radix-ui/themes";
 import { useRef } from "react";
-import type { MentionChip } from "../core/content";
+import type { MentionChip } from "../utils/content";
 
 interface EditorToolbarProps {
   disabled?: boolean;

apps/array/src/renderer/features/message-editor/components/MessageEditor.tsx

@@ -3,10 +3,10 @@ import { ArrowUp, Stop } from "@phosphor-icons/react";
 import { Flex, IconButton, Text, Tooltip } from "@radix-ui/themes";
 import { EditorContent } from "@tiptap/react";
 import { forwardRef, useImperativeHandle } from "react";
-import type { EditorContent as EditorContentType } from "../core/content";
 import { useDraftStore } from "../stores/draftStore";
 import { useTiptapEditor } from "../tiptap/useTiptapEditor";
 import type { EditorHandle } from "../types";
+import type { EditorContent as EditorContentType } from "../utils/content";
 import { EditorToolbar } from "./EditorToolbar";
 
 export type { EditorHandle as MessageEditorHandle };
@@ -58,15 +58,14 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
       insertChip,
     } = useTiptapEditor({
       sessionId,
-      taskId,
       placeholder,
-      repoPath,
       disabled,
       isCloud,
+      autoFocus,
+      context: { taskId, repoPath },
       onSubmit,
       onBashCommand,
       onBashModeChange,
-      autoFocus,
     });
 
     useImperativeHandle(

apps/array/src/renderer/features/message-editor/stores/draftStore.ts

@@ -2,7 +2,7 @@ import type { AvailableCommand } from "@agentclientprotocol/sdk";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import type { EditorContent } from "../core/content";
+import type { EditorContent } from "../utils/content";
 
 type SessionId = string;
 

apps/array/src/renderer/features/message-editor/tiptap/extensions.ts

@@ -0,0 +1,59 @@
+import Placeholder from "@tiptap/extension-placeholder";
+import StarterKit from "@tiptap/starter-kit";
+import { createCommandMention } from "./CommandMention";
+import { createFileMention } from "./FileMention";
+import { MentionChipNode } from "./MentionChipNode";
+
+export interface EditorExtensionsOptions {
+  sessionId: string;
+  placeholder?: string;
+  fileMentions?: boolean;
+  commands?: boolean;
+  onCommandSubmit?: (text: string) => void;
+  onClearDraft?: () => void;
+}
+
+export function getEditorExtensions(options: EditorExtensionsOptions) {
+  const {
+    sessionId,
+    placeholder = "",
+    fileMentions = true,
+    commands = true,
+    onCommandSubmit,
+    onClearDraft,
+  } = options;
+
+  const extensions = [
+    StarterKit.configure({
+      heading: false,
+      blockquote: false,
+      codeBlock: false,
+      bulletList: false,
+      orderedList: false,
+      listItem: false,
+      horizontalRule: false,
+      bold: false,
+      italic: false,
+      strike: false,
+      code: false,
+    }),
+    Placeholder.configure({ placeholder }),
+    MentionChipNode,
+  ];
+
+  if (fileMentions) {
+    extensions.push(createFileMention(sessionId));
+  }
+
+  if (commands) {
+    extensions.push(
+      createCommandMention({
+        sessionId,
+        onSubmit: onCommandSubmit,
+        onClearDraft,
+      }),
+    );
+  }
+
+  return extensions;
+}

apps/array/src/renderer/features/message-editor/tiptap/useDraftSync.ts

@@ -0,0 +1,121 @@
+import type { Editor, JSONContent } from "@tiptap/core";
+import { useCallback, useLayoutEffect, useRef } from "react";
+import { useDraftStore } from "../stores/draftStore";
+import { type EditorContent, isContentEmpty } from "../utils/content";
+
+function tiptapJsonToEditorContent(json: JSONContent): EditorContent {
+  const segments: EditorContent["segments"] = [];
+
+  const traverse = (node: JSONContent) => {
+    if (node.type === "text" && node.text) {
+      segments.push({ type: "text", text: node.text });
+    } else if (node.type === "mentionChip" && node.attrs) {
+      segments.push({
+        type: "chip",
+        chip: {
+          type: node.attrs.type,
+          id: node.attrs.id,
+          label: node.attrs.label,
+        },
+      });
+    } else if (node.content) {
+      for (const child of node.content) {
+        traverse(child);
+      }
+    }
+  };
+
+  traverse(json);
+  return { segments };
+}
+
+function editorContentToTiptapJson(content: EditorContent): JSONContent {
+  const paragraphContent: JSONContent[] = [];
+
+  for (const seg of content.segments) {
+    if (seg.type === "text") {
+      paragraphContent.push({ type: "text", text: seg.text });
+    } else {
+      paragraphContent.push({
+        type: "mentionChip",
+        attrs: {
+          type: seg.chip.type,
+          id: seg.chip.id,
+          label: seg.chip.label,
+        },
+      });
+    }
+  }
+
+  return {
+    type: "doc",
+    content: [{ type: "paragraph", content: paragraphContent }],
+  };
+}
+
+export interface DraftContext {
+  taskId?: string;
+  repoPath?: string | null;
+}
+
+export function useDraftSync(
+  editor: Editor | null,
+  sessionId: string,
+  context?: DraftContext,
+) {
+  const hasRestoredRef = useRef(false);
+  const editorRef = useRef(editor);
+  editorRef.current = editor;
+
+  const draftActions = useDraftStore((s) => s.actions);
+  const draft = useDraftStore((s) => s.drafts[sessionId] ?? null);
+  const hasHydrated = useDraftStore((s) => s._hasHydrated);
+
+  // Set context for this session
+  useLayoutEffect(() => {
+    draftActions.setContext(sessionId, {
+      taskId: context?.taskId,
+      repoPath: context?.repoPath,
+    });
+    return () => {
+      draftActions.removeContext(sessionId);
+    };
+  }, [sessionId, context?.taskId, context?.repoPath, draftActions]);
+
+  // Restore draft on mount
+  useLayoutEffect(() => {
+    if (!hasHydrated || !editor || hasRestoredRef.current) return;
+    if (!draft || isContentEmpty(draft)) return;
+
+    hasRestoredRef.current = true;
+
+    if (typeof draft === "string") {
+      editor.commands.setContent(draft);
+    } else {
+      editor.commands.setContent(editorContentToTiptapJson(draft));
+    }
+  }, [hasHydrated, draft, editor]);
+
+  const saveDraft = useCallback(
+    (e: Editor) => {
+      const json = e.getJSON();
+      const content = tiptapJsonToEditorContent(json);
+      draftActions.setDraft(
+        sessionId,
+        isContentEmpty(content) ? null : content,
+      );
+    },
+    [sessionId, draftActions],
+  );
+
+  const clearDraft = useCallback(() => {
+    draftActions.setDraft(sessionId, null);
+  }, [sessionId, draftActions]);
+
+  const getContent = useCallback((): EditorContent => {
+    if (!editorRef.current) return { segments: [] };
+    return tiptapJsonToEditorContent(editorRef.current.getJSON());
+  }, []);
+
+  return { saveDraft, clearDraft, getContent };
+}