fix(web): handle pasted folders as workspace references

apps/web/src/components/chat/ChatComposer.tsx

@@ -63,6 +63,7 @@ import {
 } from "@t3tools/client-runtime/text-paste";
 import { serializeComposerFileLink } from "@t3tools/shared/composerTrigger";
 import { folderDropTarget, resolveDroppedFolderPath } from "./folderDrop";
+import { splitTransferredFiles } from "./workspaceFileDrop";
 import { createModelSelection, normalizeModelSlug } from "@t3tools/shared/model";
 import { USAGE_LIMITS_COMMAND } from "@t3tools/shared/usageLimits";
 import {
@@ -5711,32 +5712,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     return true;
   };
 
-  const onComposerPaste = (event: React.ClipboardEvent<HTMLElement>) => {
-    const files = Array.from(event.clipboardData.files);
-    const plainText = event.clipboardData.getData("text/plain");
-    const bypassAutoAttachment = consumePasteAsTextShortcut(pasteAsTextShortcutUntilRef);
-    if (
-      files.length > 0 &&
-      activeThreadId &&
-      shouldHandleComposerAttachmentPaste({ files, plainText })
-    ) {
-      event.preventDefault();
-      event.stopPropagation();
-      void addComposerAttachments(files, { skipImageInlineChip: bypassAutoAttachment });
-      return;
-    }
-
-    if ((readPastedComposerContext(event.clipboardData)?.records.length ?? 0) > 0) return;
-    if (!foldPastedText(plainText, bypassAutoAttachment)) {
-      return;
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-  };
-  // The editor is memoized; fresh closures here re-render it on every parent
-  // render, which during a stream is every delta.
-  const onComposerPasteStable = useStableCallback(onComposerPaste);
   const onComposerCommandKeyStable = useStableCallback(onComposerCommandKey);
   const isPathQueryActiveStable = useStableCallback(
     () => resolveActiveComposerTrigger().trigger?.kind === "path",
@@ -5801,6 +5776,67 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   };
   const insertComposerTextAtEndStable = useStableCallback(insertComposerTextAtEnd);
 
+  const addComposerFolders = (folders: File[]) => {
+    const target = folderDropTarget({
+      localEnvironmentDisabled: isLocalEnvironmentDisabled(),
+      environmentId,
+      primaryEnvironmentId,
+    });
+    if (target === "remote") {
+      toastManager.add({
+        type: "error",
+        title: "Folders can only be referenced in the local desktop environment",
+      });
+      return;
+    }
+    for (const folder of folders) {
+      const path = resolveDroppedFolderPath(folder, window.desktopBridge?.getPathForFile);
+      if (path === null) {
+        toastManager.add({
+          type: "error",
+          title: `Couldn't get the path of "${folder.name}"`,
+          description: "Type the folder path with @ instead.",
+        });
+        continue;
+      }
+      insertComposerTextAtEndStable(`${serializeComposerFileLink(path)} `, {
+        ensureLeadingBoundary: true,
+      });
+    }
+    focusComposer();
+  };
+  const addComposerFoldersStable = useStableCallback(addComposerFolders);
+
+  const onComposerPaste = (event: React.ClipboardEvent<HTMLElement>) => {
+    const { files, folders } = splitTransferredFiles(event.clipboardData);
+    const plainText = event.clipboardData.getData("text/plain");
+    const bypassAutoAttachment = consumePasteAsTextShortcut(pasteAsTextShortcutUntilRef);
+    if (
+      folders.length > 0 ||
+      (activeThreadId &&
+        files.length > 0 &&
+        shouldHandleComposerAttachmentPaste({ files, plainText }))
+    ) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (folders.length > 0) addComposerFoldersStable(folders);
+      if (files.length > 0) {
+        void addComposerAttachments(files, { skipImageInlineChip: bypassAutoAttachment });
+      }
+      return;
+    }
+
+    if ((readPastedComposerContext(event.clipboardData)?.records.length ?? 0) > 0) return;
+    if (!foldPastedText(plainText, bypassAutoAttachment)) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  // The editor is memoized; fresh closures here re-render it on every parent
+  // render, which during a stream is every delta.
+  const onComposerPasteStable = useStableCallback(onComposerPaste);
   const insertContextReferencesAtCaret = (
     references: ReadonlyArray<ComposerContextReference>,
   ): boolean =>
@@ -6073,35 +6109,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
           if (!inserted) focusComposer();
         });
       },
-      addDroppedFolders: (folders: File[]) => {
-        const target = folderDropTarget({
-          localEnvironmentDisabled: isLocalEnvironmentDisabled(),
-          environmentId,
-          primaryEnvironmentId,
-        });
-        if (target === "remote") {
-          toastManager.add({
-            type: "error",
-            title: "Folders can't be dropped into remote environments",
-          });
-          return;
-        }
-        for (const folder of folders) {
-          const path = resolveDroppedFolderPath(folder, window.desktopBridge?.getPathForFile);
-          if (path === null) {
-            toastManager.add({
-              type: "error",
-              title: `Couldn't get the path of "${folder.name}"`,
-              description: "Type the folder path with @ instead.",
-            });
-            continue;
-          }
-          insertComposerTextAtEndStable(`${serializeComposerFileLink(path)} `, {
-            ensureLeadingBoundary: true,
-          });
-        }
-        focusComposer();
-      },
+      addDroppedFolders: addComposerFoldersStable,
       hasPendingAttachments: () =>
         (pendingImageCompressionsRef.current.get(attachmentTargetKey) ?? 0) > 0 ||
         pendingDraftWork.has(attachmentTargetKey),
@@ -6303,6 +6311,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     [
       activeThread,
       addComposerAttachments,
+      addComposerFoldersStable,
       foldPastedText,
       composerDraftTarget,
       composerModelOptions,

apps/web/src/components/chat/workspaceFileDrop.test.ts

@@ -1,10 +1,62 @@
 import { describe, expect, it, vi } from "@effect/vitest";
 import {
   makeWorkspaceFileDropHandlers,
+  splitTransferredFiles,
   type WorkspaceFileDragEvent,
   type WorkspaceFileDropHost,
 } from "./workspaceFileDrop";
 
+describe("splitTransferredFiles", () => {
+  it("separates copied folders from files before attachment validation", () => {
+    const folder = new File([], "photos.png");
+    const emptyFile = new File([], "empty.txt");
+    const image = new File(["image"], "photo.png", { type: "image/png" });
+
+    expect(
+      splitTransferredFiles({
+        files: [folder, emptyFile, image],
+        items: [
+          {
+            kind: "string",
+            getAsFile: () => null,
+            webkitGetAsEntry: () => null,
+          },
+          {
+            kind: "file",
+            getAsFile: () => folder,
+            webkitGetAsEntry: () => ({ isDirectory: true }),
+          },
+          {
+            kind: "file",
+            getAsFile: () => emptyFile,
+            webkitGetAsEntry: () => ({ isDirectory: false }),
+          },
+          {
+            kind: "file",
+            getAsFile: () => image,
+            webkitGetAsEntry: () => null,
+          },
+        ],
+      }),
+    ).toEqual({ files: [emptyFile, image], folders: [folder] });
+  });
+
+  it("ignores clipboard file items that cannot provide a file", () => {
+    expect(
+      splitTransferredFiles({
+        files: [],
+        items: [
+          {
+            kind: "file",
+            getAsFile: () => null,
+            webkitGetAsEntry: () => ({ isDirectory: true }),
+          },
+        ],
+      }),
+    ).toEqual({ files: [], folders: [] });
+  });
+});
+
 function makeDragEvent(options?: {
   types?: string[];
   files?: File[];

apps/web/src/components/chat/workspaceFileDrop.ts

@@ -30,7 +30,9 @@ function movedWithinDropTarget(event: WorkspaceFileDragEvent): boolean {
   return event.relatedTarget !== null && event.currentTarget.contains(event.relatedTarget as Node);
 }
 
-function splitDroppedItems(dataTransfer: WorkspaceFileDragEvent["dataTransfer"]): {
+export function splitTransferredFiles(
+  dataTransfer: Pick<WorkspaceFileDragEvent["dataTransfer"], "files" | "items">,
+): {
   files: File[];
   folders: File[];
 } {
@@ -76,7 +78,7 @@ export function makeWorkspaceFileDropHandlers(host: WorkspaceFileDropHost) {
       if (!isFileDrag(event)) return;
       event.preventDefault();
       host.setDragActive(false);
-      const { files, folders } = splitDroppedItems(event.dataTransfer);
+      const { files, folders } = splitTransferredFiles(event.dataTransfer);
       if (files.length > 0) host.addFiles(files);
       if (folders.length > 0) host.addFolders(folders);
     },

apps/web/src/components/contextChipParts.tsx

@@ -201,9 +201,11 @@ export function ImageChipButton({
       ) : (
         <ImageIcon />
       )}
-      <ContextChipLabel className="max-w-72">{middleTruncateAttachmentName(name)}</ContextChipLabel>
-      <span className="shrink-0 text-3xs text-current">{size}</span>
-      {suffix ? <span className="text-3xs text-current">{suffix}</span> : null}
+      <ContextChipLabel className="flex items-baseline gap-[0.33em]">
+        <span className="max-w-72 truncate">{middleTruncateAttachmentName(name)}</span>
+        <span className="shrink-0 text-3xs text-current">{size}</span>
+        {suffix ? <span className="text-3xs text-current">{suffix}</span> : null}
+      </ContextChipLabel>
     </ContextChip>
   );
 }
@@ -275,11 +277,11 @@ function FileChipContent(props: {
       ) : (
         <PierreEntryIcon pathValue={props.name} kind="file" theme={props.theme} />
       )}
-      <ContextChipLabel className="max-w-72">
-        {middleTruncateAttachmentName(props.name)}
+      <ContextChipLabel className="flex items-baseline gap-[0.33em]">
+        <span className="max-w-72 truncate">{middleTruncateAttachmentName(props.name)}</span>
+        <span className="shrink-0 text-3xs text-current">{props.size}</span>
+        {props.suffix ? <span className="text-3xs text-current">{props.suffix}</span> : null}
       </ContextChipLabel>
-      <span className="shrink-0 text-3xs text-current">{props.size}</span>
-      {props.suffix ? <span className="text-3xs text-current">{props.suffix}</span> : null}
     </>
   );
 }