Implement feature to auto convert long text to attachments on paste

charlesvien · charlesvien · commit df59bd84e63a · 2026-01-16T09:16:46.000-08:00
diff --git a/apps/array/src/renderer/features/message-editor/stores/textAttachmentStore.ts b/apps/array/src/renderer/features/message-editor/stores/textAttachmentStore.ts
@@ -0,0 +1,31 @@
+import { create } from "zustand";
+
+interface TextAttachmentStore {
+  attachments: Map<string, string>;
+  addAttachment: (id: string, content: string) => void;
+  getAttachment: (id: string) => string | undefined;
+  removeAttachment: (id: string) => void;
+  clearAttachments: () => void;
+}
+
+export const useTextAttachmentStore = create<TextAttachmentStore>(
+  (set, get) => ({
+    attachments: new Map(),
+    addAttachment: (id, content) =>
+      set((state) => {
+        const newAttachments = new Map(state.attachments);
+        newAttachments.set(id, content);
+        return { attachments: newAttachments };
+      }),
+    getAttachment: (id) => get().attachments.get(id),
+    removeAttachment: (id) =>
+      set((state) => {
+        const newAttachments = new Map(state.attachments);
+        newAttachments.delete(id);
+        return { attachments: newAttachments };
+      }),
+    clearAttachments: () => set({ attachments: new Map() }),
+  }),
+);
+
+export const TEXT_ATTACHMENT_THRESHOLD = 5000;
diff --git a/apps/array/src/renderer/features/message-editor/tiptap/MentionChipNode.ts b/apps/array/src/renderer/features/message-editor/tiptap/MentionChipNode.ts
@@ -6,7 +6,8 @@ export type ChipType =
   | "error"
   | "experiment"
   | "insight"
-  | "feature_flag";
+  | "feature_flag"
+  | "text_attachment";
 
 export interface MentionChipAttrs {
   type: ChipType;
@@ -44,7 +45,8 @@ export const MentionChipNode = Node.create({
   renderHTML({ node, HTMLAttributes }) {
     const { type, label } = node.attrs as MentionChipAttrs;
     const isCommand = type === "command";
-    const prefix = isCommand ? "/" : "@";
+    const isTextAttachment = type === "text_attachment";
+    const prefix = isCommand ? "/" : isTextAttachment ? "📄 " : "@";
 
     return [
       "span",
diff --git a/apps/array/src/renderer/features/message-editor/tiptap/useTiptapEditor.ts b/apps/array/src/renderer/features/message-editor/tiptap/useTiptapEditor.ts
@@ -1,7 +1,12 @@
+import { useSettingsStore } from "@features/settings/stores/settingsStore";
 import { toast } from "@renderer/utils/toast";
 import { useEditor } from "@tiptap/react";
 import { useCallback, useRef, useState } from "react";
 import { usePromptHistoryStore } from "../stores/promptHistoryStore";
+import {
+  TEXT_ATTACHMENT_THRESHOLD,
+  useTextAttachmentStore,
+} from "../stores/textAttachmentStore";
 import type { MentionChip } from "../utils/content";
 import { contentToXml } from "../utils/content";
 import { getEditorExtensions } from "./extensions";
@@ -194,6 +199,50 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
             return true;
           }
 
+          return false;
+        },
+        handlePaste: (view, event) => {
+          const autoConvertLongText =
+            useSettingsStore.getState().autoConvertLongText;
+          const clipboardText = event.clipboardData?.getData("text/plain");
+
+          if (
+            autoConvertLongText &&
+            clipboardText &&
+            clipboardText.length > TEXT_ATTACHMENT_THRESHOLD
+          ) {
+            event.preventDefault();
+
+            // Generate unique ID for attachment
+            const attachmentId = `text-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+
+            // Format size for label
+            const sizeKB = (clipboardText.length / 1024).toFixed(1);
+            const label = `Pasted text (${sizeKB} KB)`;
+
+            // Store the text content
+            useTextAttachmentStore
+              .getState()
+              .addAttachment(attachmentId, clipboardText);
+
+            // Insert chip at current position
+            const chipNode = view.state.schema.nodes.mentionChip?.create({
+              type: "text_attachment",
+              id: attachmentId,
+              label,
+            });
+
+            if (chipNode) {
+              const { tr } = view.state;
+              const pos = view.state.selection.from;
+              tr.insert(pos, chipNode);
+              tr.insertText(" ", pos + chipNode.nodeSize);
+              view.dispatch(tr);
+            }
+
+            return true;
+          }
+
           return false;
         },
       },
@@ -247,12 +296,14 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
       if (command) callbackRefs.current.onBashCommand?.(command);
     } else {
       const content = draft.getContent();
-      callbackRefs.current.onSubmit?.(contentToXml(content));
+      const textAttachments = useTextAttachmentStore.getState().attachments;
+      callbackRefs.current.onSubmit?.(contentToXml(content, textAttachments));
     }
 
     editor.commands.clearContent();
     prevBashModeRef.current = false;
     draft.clearDraft();
+    useTextAttachmentStore.getState().clearAttachments();
   }, [editor, disabled, isLoading, isCloud, draft]);
 
   submitRef.current = submit;
diff --git a/apps/array/src/renderer/features/message-editor/utils/content.ts b/apps/array/src/renderer/features/message-editor/utils/content.ts
@@ -5,7 +5,8 @@ export interface MentionChip {
     | "error"
     | "experiment"
     | "insight"
-    | "feature_flag";
+    | "feature_flag"
+    | "text_attachment";
   id: string;
   label: string;
 }
@@ -28,7 +29,10 @@ export function contentToPlainText(content: EditorContent): string {
     .join("");
 }
 
-export function contentToXml(content: EditorContent): string {
+export function contentToXml(
+  content: EditorContent,
+  textAttachments?: Map<string, string>,
+): string {
   return content.segments
     .map((seg) => {
       if (seg.type === "text") return seg.text;
@@ -46,6 +50,10 @@ export function contentToXml(content: EditorContent): string {
           return `<insight id="${chip.id}" />`;
         case "feature_flag":
           return `<feature_flag id="${chip.id}" />`;
+        case "text_attachment": {
+          const attachmentContent = textAttachments?.get(chip.id) ?? "";
+          return `<text-attachment name="${chip.label}">\n${attachmentContent}\n</text-attachment>`;
+        }
         default:
           return `@${chip.label}`;
       }
diff --git a/apps/array/src/renderer/features/settings/components/SettingsView.tsx b/apps/array/src/renderer/features/settings/components/SettingsView.tsx
@@ -56,10 +56,12 @@ export function SettingsView() {
     createPR,
     cursorGlow,
     desktopNotifications,
+    autoConvertLongText,
     setAutoRunTasks,
     setCreatePR,
     setCursorGlow,
     setDesktopNotifications,
+    setAutoConvertLongText,
   } = useSettingsStore();
   const terminalLayoutMode = useTerminalLayoutStore(
     (state) => state.terminalLayoutMode,
@@ -160,6 +162,18 @@ export function SettingsView() {
     [terminalLayoutMode, setTerminalLayout],
   );
 
+  const handleAutoConvertLongTextChange = useCallback(
+    (checked: boolean) => {
+      track(ANALYTICS_EVENTS.SETTING_CHANGED, {
+        setting_name: "auto_convert_long_text",
+        new_value: checked,
+        old_value: autoConvertLongText,
+      });
+      setAutoConvertLongText(checked);
+    },
+    [autoConvertLongText, setAutoConvertLongText],
+  );
+
   const handleWorktreeLocationChange = async (newLocation: string) => {
     setLocalWorktreeLocation(newLocation);
     try {
@@ -341,20 +355,40 @@ export function SettingsView() {
           <Flex direction="column" gap="3">
             <Heading size="3">Chat</Heading>
             <Card>
-              <Flex align="center" justify="between">
-                <Flex direction="column" gap="1">
-                  <Text size="1" weight="medium">
-                    Desktop notifications
-                  </Text>
-                  <Text size="1" color="gray">
-                    Show notifications when the agent finishes working on a task
-                  </Text>
+              <Flex direction="column" gap="4">
+                <Flex align="center" justify="between">
+                  <Flex direction="column" gap="1">
+                    <Text size="1" weight="medium">
+                      Desktop notifications
+                    </Text>
+                    <Text size="1" color="gray">
+                      Show notifications when the agent finishes working on a
+                      task
+                    </Text>
+                  </Flex>
+                  <Switch
+                    checked={desktopNotifications}
+                    onCheckedChange={setDesktopNotifications}
+                    size="1"
+                  />
+                </Flex>
+
+                <Flex align="center" justify="between">
+                  <Flex direction="column" gap="1">
+                    <Text size="1" weight="medium">
+                      Auto-convert long text
+                    </Text>
+                    <Text size="1" color="gray">
+                      Convert pasted text over 5000 characters into text
+                      attachments
+                    </Text>
+                  </Flex>
+                  <Switch
+                    checked={autoConvertLongText}
+                    onCheckedChange={handleAutoConvertLongTextChange}
+                    size="1"
+                  />
                 </Flex>
-                <Switch
-                  checked={desktopNotifications}
-                  onCheckedChange={setDesktopNotifications}
-                  size="1"
-                />
               </Flex>
             </Card>
           </Flex>
diff --git a/apps/array/src/renderer/features/settings/stores/settingsStore.ts b/apps/array/src/renderer/features/settings/stores/settingsStore.ts
@@ -16,6 +16,7 @@ interface SettingsStore {
   defaultModel: string;
   desktopNotifications: boolean;
   cursorGlow: boolean;
+  autoConvertLongText: boolean;
 
   setAutoRunTasks: (autoRun: boolean) => void;
   setDefaultRunMode: (mode: DefaultRunMode) => void;
@@ -26,6 +27,7 @@ interface SettingsStore {
   setDefaultModel: (model: string) => void;
   setDesktopNotifications: (enabled: boolean) => void;
   setCursorGlow: (enabled: boolean) => void;
+  setAutoConvertLongText: (enabled: boolean) => void;
 }
 
 export const useSettingsStore = create<SettingsStore>()(
@@ -40,6 +42,7 @@ export const useSettingsStore = create<SettingsStore>()(
       defaultModel: DEFAULT_MODEL,
       desktopNotifications: true,
       cursorGlow: false,
+      autoConvertLongText: true,
 
       setAutoRunTasks: (autoRun) => set({ autoRunTasks: autoRun }),
       setDefaultRunMode: (mode) => set({ defaultRunMode: mode }),
@@ -52,6 +55,8 @@ export const useSettingsStore = create<SettingsStore>()(
       setDesktopNotifications: (enabled) =>
         set({ desktopNotifications: enabled }),
       setCursorGlow: (enabled) => set({ cursorGlow: enabled }),
+      setAutoConvertLongText: (enabled) =>
+        set({ autoConvertLongText: enabled }),
     }),
     {
       name: "settings-storage",
diff --git a/apps/array/src/renderer/features/task-detail/hooks/useTaskCreation.ts b/apps/array/src/renderer/features/task-detail/hooks/useTaskCreation.ts
@@ -1,5 +1,6 @@
 import { useAuthStore } from "@features/auth/stores/authStore";
 import type { MessageEditorHandle } from "@features/message-editor/components/MessageEditor";
+import { useTextAttachmentStore } from "@features/message-editor/stores/textAttachmentStore";
 import type { EditorContent } from "@features/message-editor/utils/content";
 import { useSettingsStore } from "@features/settings/stores/settingsStore";
 import { useCreateTask } from "@features/tasks/hooks/useTasks";
@@ -35,7 +36,10 @@ interface UseTaskCreationReturn {
   handleSubmit: () => void;
 }
 
-function contentToXml(content: EditorContent): string {
+function contentToXml(
+  content: EditorContent,
+  textAttachments?: Map<string, string>,
+): string {
   return content.segments
     .map((seg) => {
       if (seg.type === "text") return seg.text;
@@ -53,6 +57,10 @@ function contentToXml(content: EditorContent): string {
           return `<insight id="${chip.id}" />`;
         case "feature_flag":
           return `<feature_flag id="${chip.id}" />`;
+        case "text_attachment": {
+          const attachmentContent = textAttachments?.get(chip.id) ?? "";
+          return `<text-attachment name="${chip.label}">\n${attachmentContent}\n</text-attachment>`;
+        }
         default:
           return `@${chip.label}`;
       }
@@ -74,6 +82,7 @@ function extractFileMentionsFromContent(content: EditorContent): string[] {
 
 function prepareTaskInput(
   content: EditorContent,
+  textAttachments: Map<string, string>,
   options: {
     selectedDirectory: string;
     selectedRepository?: string | null;
@@ -85,7 +94,7 @@ function prepareTaskInput(
   },
 ): TaskCreationInput {
   return {
-    content: contentToXml(content).trim(),
+    content: contentToXml(content, textAttachments).trim(),
     filePaths: extractFileMentionsFromContent(content),
     repoPath: options.selectedDirectory,
     repository: options.selectedRepository,
@@ -143,7 +152,8 @@ export function useTaskCreation({
 
     try {
       const content = editor.getContent();
-      const input = prepareTaskInput(content, {
+      const textAttachments = useTextAttachmentStore.getState().attachments;
+      const input = prepareTaskInput(content, textAttachments, {
         selectedDirectory,
         selectedRepository,
         githubIntegrationId,
@@ -165,8 +175,9 @@ export function useTaskCreation({
         // Navigate to the new task
         navigateToTask(task);
 
-        // Clear editor
+        // Clear editor and text attachments
         editor.clear();
+        useTextAttachmentStore.getState().clearAttachments();
 
         log.info("Task created successfully", { taskId: task.id });
       } else {
