@saadnvd1/agent-os 0.3.672 → 0.3.678

package/components/Chat/Messages.tsx

@@ -18,6 +18,7 @@ import { splitProse, splitUserText } from "@/lib/chat/user-text";
 import { inAppSessionId } from "@/lib/session-url";
 import { CodeBlock } from "./Code";
 import { CopyButton } from "./CopyButton";
+import { FileChip } from "./FileChip";
 import { ImageThumb } from "./ImageThumb";
 import { Markdown } from "./Markdown";
 import { openSessionLink } from "./session-link";
@@ -178,6 +179,13 @@ export function UserMessage({
           ))}
         </div>
       ) : null}
+      {item.files?.length ? (
+        <div data-copy-skip className="flex flex-wrap justify-end gap-1.5">
+          {item.files.map((f) => (
+            <FileChip key={f.path} file={f} />
+          ))}
+        </div>
+      ) : null}
       {item.text && (
         <div
           className={cn(

package/components/Chat/Queue.tsx

@@ -90,6 +90,12 @@ export function Queue({
                     · {m.imageCount} image{m.imageCount > 1 ? "s" : ""}
                   </span>
                 ) : null}
+                {m.fileCount ? (
+                  <span className="text-muted-foreground text-xs">
+                    {" "}
+                    · {m.fileCount} file{m.fileCount > 1 ? "s" : ""}
+                  </span>
+                ) : null}
               </button>
             )}
             <div className="flex shrink-0 items-center">

package/components/Chat/composer/Attachments.tsx

@@ -2,6 +2,8 @@
 
 import { FileText, X } from "lucide-react";
 import type { ChatImage } from "@/lib/chat/events";
+import { FileChip } from "../FileChip";
+import type { Upload } from "./useAttachFiles";
 import { byteLength, type TextAttachment } from "@/lib/chat/paste";
 
 const size = (text: string) => {
@@ -24,19 +26,23 @@ function Remove({ label, onClick }: { label: string; onClick: () => void }) {
   );
 }
 
-// Images and long pastes waiting to go with the message.
+// Images, files and long pastes waiting to go with the message.
 export function Attachments({
   images,
   files,
+  uploads,
   onRemoveImage,
   onRemoveFile,
+  onRemoveUpload,
 }: {
   images: ChatImage[];
   files: TextAttachment[];
+  uploads: Upload[];
   onRemoveImage: (index: number) => void;
   onRemoveFile: (index: number) => void;
+  onRemoveUpload: (key: string) => void;
 }) {
-  if (!images.length && !files.length) return null;
+  if (!images.length && !files.length && !uploads.length) return null;
   return (
     <div className="flex flex-wrap gap-2 px-1 pb-2">
       {images.map((img, i) => (
@@ -50,6 +56,14 @@ export function Attachments({
           <Remove label="Remove image" onClick={() => onRemoveImage(i)} />
         </div>
       ))}
+      {uploads.map((u) => (
+        <FileChip
+          key={u.key}
+          file={u.file}
+          uploading={u.uploading}
+          onRemove={() => onRemoveUpload(u.key)}
+        />
+      ))}
       {files.map((file, i) => (
         <div
           key={`file-${i}`}

package/components/Chat/composer/ComposerBody.tsx

@@ -6,6 +6,7 @@ import { CornerDownRight, File, Folder } from "lucide-react";
 import type {
   ChatAccess,
   ChatCommand,
+  ChatFile,
   ChatImage,
   ChatModel,
   FileSuggestion,
@@ -28,7 +29,7 @@ import { useCoarsePointer } from "./useCoarsePointer";
 import { useMentions } from "./useMentions";
 import { Attachments } from "./Attachments";
 import { Toolbar } from "./Toolbar";
-import { useImageDrop } from "./useImageDrop";
+import { useAttachFiles } from "./useAttachFiles";
 import type { MenuKey } from "./keys";
 import { useComposerEditor, type ComposerHandlers } from "./useComposerEditor";
 import { useFocusOnShow } from "./autofocus";
@@ -44,7 +45,9 @@ export interface ComposerProps {
   running: boolean;
   disabled?: boolean;
   placeholder: string;
-  onSend: (text: string, images: ChatImage[]) => void;
+  onSend: (text: string, images: ChatImage[], files: ChatFile[]) => void;
+  // Where attached files are kept: the session's id, or "draft" before one exists.
+  attachScope: string;
   onStop: () => void;
   commands?: ChatCommand[];
   // Reloads the commands past the cache (a skill just added), from the menu.
@@ -99,6 +102,7 @@ export function ComposerBody({
   accessory,
   prefill,
   draftKey,
+  attachScope,
   suggestion = null,
   onDismissSuggestion,
   history = [],
@@ -132,7 +136,19 @@ export function ComposerBody({
     if (text && suggestion) onDismissSuggestion?.(suggestion);
   }, [text, suggestion, onDismissSuggestion]);
 
-  const draft = useMemo(() => ({ text, images, files }), [text, images, files]);
+  const attach = useAttachFiles({
+    scope: attachScope,
+    imageCount: images.length,
+    onImages: (read) => setImages((prev) => [...prev, ...read]),
+  });
+  const attached = useMemo(
+    () => attach.uploads.filter((u) => !u.uploading).map((u) => u.file),
+    [attach.uploads]
+  );
+  const draft = useMemo(
+    () => ({ text, images, files, uploads: attached }),
+    [text, images, files, attached]
+  );
   useSaveDraft(draftKey, draft);
 
   // Restored once the editor exists (the server render has no access to this
@@ -145,7 +161,8 @@ export function ComposerBody({
     setText(saved?.text ?? "");
     setImages(saved?.images ?? []);
     setFiles(saved?.files ?? []);
-  }, [draftKey, editor, setText]);
+    attach.restore(saved?.uploads ?? []);
+  }, [draftKey, editor, setText]); // eslint-disable-line react-hooks/exhaustive-deps
   useFocusOnShow(editor, focusKey, phone, disabled);
 
   const prefilled = useRef<number | null>(null);
@@ -228,16 +245,16 @@ export function ComposerBody({
     if (offered) setText(offered, true);
   };
 
-  const { dragging, dropProps, addFiles } = useImageDrop((read) =>
-    setImages((prev) => [...prev, ...read])
-  );
+  const { dragging, dropProps, addFiles } = attach;
 
-  const empty = !text.trim() && !images.length && !files.length;
+  const empty =
+    !text.trim() && !images.length && !files.length && !attach.uploads.length;
   const submit = () => {
-    if (empty || disabled) return;
-    onSend(composeMessage(text, files), images);
+    if (empty || disabled || attach.uploading) return;
+    onSend(composeMessage(text, files), images, attached);
     setImages([]);
     setFiles([]);
+    attach.clear();
     setText("");
     setHistoryIndex(-1);
   };
@@ -261,7 +278,8 @@ export function ComposerBody({
       suggestion: ghost !== null,
       onAcceptSuggestion: acceptSuggestion,
       onHistory: (dir, at) => {
-        if (images.length || files.length) return false;
+        if (images.length || files.length || attach.uploads.length)
+          return false;
         const step = historyStep(
           { history, index: historyIndex, text, ...at },
           dir
@@ -271,7 +289,7 @@ export function ComposerBody({
         setText(step.text, true);
         return true;
       },
-      onImages: (picked) => void addFiles(picked),
+      onFiles: (picked) => void addFiles(picked),
       onLongPaste: (pasted, language) => {
         const next = nextAttachment(files, lastPaste.current);
         lastPaste.current = next.number;
@@ -320,6 +338,8 @@ export function ComposerBody({
         <Attachments
           images={images}
           files={files}
+          uploads={attach.uploads}
+          onRemoveUpload={attach.remove}
           onRemoveImage={(i) => setImages(images.filter((_, j) => j !== i))}
           onRemoveFile={(i) => setFiles(files.filter((_, j) => j !== i))}
         />
@@ -329,7 +349,8 @@ export function ComposerBody({
         <Toolbar
           plain={plain}
           onTogglePlain={() => setPlain(!plain)}
-          onAddImages={(picked) => void addFiles(picked)}
+          onAddFiles={(picked) => void addFiles(picked)}
+          accept={attach.accept}
           plan={plan}
           onTogglePlan={onTogglePlan}
           accessory={accessory}
@@ -343,7 +364,7 @@ export function ComposerBody({
           onModelOpenChange={setModelOpen}
           stop={running && empty}
           onStop={onStop}
-          canSend={!disabled && !empty}
+          canSend={!disabled && !empty && !attach.uploading}
           onSend={submit}
         />
       </div>

package/components/Chat/composer/Toolbar.tsx

@@ -3,7 +3,7 @@
 import { useRef, useState } from "react";
 import {
   ArrowUp,
-  ImagePlus,
+  Paperclip,
   ListChecks,
   MonitorUp,
   Square,
@@ -23,7 +23,8 @@ import { ModelPicker } from "../ModelPicker";
 export function Toolbar({
   plain,
   onTogglePlain,
-  onAddImages,
+  onAddFiles,
+  accept,
   plan,
   onTogglePlan,
   accessory,
@@ -42,7 +43,9 @@ export function Toolbar({
 }: {
   plain: boolean;
   onTogglePlain: () => void;
-  onAddImages: (files: Iterable<File>) => void;
+  onAddFiles: (files: Iterable<File>) => void;
+  // The types the server takes, for the picker.
+  accept: string;
   // Plan mode, when the session can use it.
   plan?: boolean | null;
   onTogglePlan?: () => void;
@@ -68,7 +71,7 @@ export function Toolbar({
   const capture = async () => {
     try {
       const file = await captureScreenFrame();
-      if (file) onAddImages([file]);
+      if (file) onAddFiles([file]);
     } catch (error) {
       toast.error(
         `Couldn't capture the screen: ${error instanceof Error ? error.message : String(error)}`
@@ -81,20 +84,20 @@ export function Toolbar({
         type="button"
         variant="ghost"
         size="icon"
-        aria-label="Attach image"
+        aria-label="Attach files"
         className="h-10 w-10 shrink-0"
         onClick={() => fileRef.current?.click()}
       >
-        <ImagePlus className="h-4 w-4" />
+        <Paperclip className="h-4 w-4" />
       </Button>
       <input
         ref={fileRef}
         type="file"
-        accept="image/*"
+        accept={accept}
         multiple
         hidden
         onChange={(e) => {
-          if (e.target.files) onAddImages(e.target.files);
+          if (e.target.files) onAddFiles(e.target.files);
           e.target.value = "";
         }}
       />

package/components/Chat/composer/editor.test.ts

@@ -168,7 +168,7 @@ function paste(
   return handlePaste(editor.view, event, {
     plain: false,
     asText: false,
-    onImages: () => {},
+    onFiles: () => {},
     onLongPaste: () => {},
     ...h,
   });

package/components/Chat/composer/paste.ts

@@ -8,7 +8,8 @@ export interface PasteHandlers {
   plain: boolean;
   // Cmd/Ctrl+Shift+V was pressed just before this paste.
   asText: boolean;
-  onImages: (files: File[]) => void;
+  // Files pasted: images, documents, anything the composer may attach.
+  onFiles: (files: File[]) => void;
   onLongPaste: (text: string, language?: string) => void;
 }
 
@@ -58,9 +59,9 @@ export function handlePaste(
 ): boolean {
   const data = event.clipboardData;
   if (!data) return false;
-  const images = [...data.files].filter(isImage);
-  if (images.length) {
-    h.onImages(images);
+  const files = [...data.files];
+  if (files.length) {
+    h.onFiles(files);
     return true;
   }
   const text = data.getData("text/plain").replace(/\r\n?/g, "\n");

package/components/Chat/composer/useAttachFiles.ts

@@ -0,0 +1,142 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import {
+  clientConfigQuery,
+  useClientConfig,
+} from "@/data/client-config/queries";
+import {
+  acceptAttr,
+  tooBigMessage,
+  typeFor,
+  unsupportedMessage,
+} from "@/lib/attachments/policy";
+import type { ChatFile, ChatImage } from "@/lib/chat/events";
+import { uploadFile } from "@/lib/file-upload";
+import { isImage } from "./paste";
+
+export interface Upload {
+  key: string;
+  file: ChatFile;
+  uploading?: boolean;
+}
+
+function readImage(file: File): Promise<ChatImage> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const [meta, data] = String(reader.result).split(",");
+      resolve({ mediaType: meta.slice(5, meta.indexOf(";")), data });
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+const carriesFiles = (e: React.DragEvent) =>
+  [...e.dataTransfer.types].includes("Files");
+
+let seq = 0;
+
+// Files picked, pasted or dropped onto the composer, and the outline shown
+// while something is dragged over it. Images are read in and sent with the
+// message; any other file is uploaded to the session's attachments folder
+// at once, so a wrong type or a too-big file fails here, not at send. The
+// types and sizes come from the server (/api/client-config).
+export function useAttachFiles({
+  scope,
+  imageCount,
+  onImages,
+}: {
+  // The session's id, or "draft" for a chat that hasn't started.
+  scope: string;
+  imageCount: number;
+  onImages: (images: ChatImage[]) => void;
+}) {
+  const queryClient = useQueryClient();
+  const types = useClientConfig().data?.attachments.types;
+  const [dragging, setDragging] = useState(false);
+  const [uploads, setUploads] = useState<Upload[]>([]);
+  const held = useRef(0);
+  held.current = imageCount + uploads.length;
+
+  const addFiles = async (picked: Iterable<File>) => {
+    // Copied first: a file input's live list is emptied right after the pick.
+    const list = [...picked];
+    let limits;
+    try {
+      limits = (await queryClient.fetchQuery(clientConfigQuery)).attachments;
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Couldn't attach");
+      return;
+    }
+    const images: File[] = [];
+    const others: File[] = [];
+    for (const f of list) {
+      let error: string | null = null;
+      if (held.current + images.length + others.length >= limits.max)
+        error = `You can attach up to ${limits.max} files to one message.`;
+      else if (isImage(f)) {
+        if (f.size > limits.maxImageBytes)
+          error = tooBigMessage(f.name, f.size, limits.maxImageBytes);
+        else images.push(f);
+      } else if (!typeFor(f.name, limits.types))
+        error = unsupportedMessage(f.name);
+      else if (f.size > limits.maxBytes)
+        error = tooBigMessage(f.name, f.size, limits.maxBytes);
+      else others.push(f);
+      if (error) toast.error(error);
+    }
+    if (images.length) onImages(await Promise.all(images.map(readImage)));
+    for (const f of others) {
+      const key = `up-${++seq}`;
+      const file = { path: "", name: f.name, size: f.size, mediaType: f.type };
+      setUploads((prev) => [...prev, { key, file, uploading: true }]);
+      const done = await uploadFile(f, scope);
+      if (done.ok)
+        setUploads((prev) =>
+          prev.map((u) => (u.key === key ? { key, file: done.file } : u))
+        );
+      else {
+        setUploads((prev) => prev.filter((u) => u.key !== key));
+        toast.error(done.error);
+      }
+    }
+  };
+
+  const dropProps = {
+    onDragOver: (e: React.DragEvent) => {
+      if (!carriesFiles(e)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      setDragging(true);
+    },
+    onDragLeave: (e: React.DragEvent) => {
+      if (!e.currentTarget.contains(e.relatedTarget as Node | null))
+        setDragging(false);
+    },
+    onDrop: (e: React.DragEvent) => {
+      if (!carriesFiles(e)) return;
+      e.preventDefault();
+      setDragging(false);
+      void addFiles(e.dataTransfer.files);
+    },
+  };
+
+  return {
+    dragging,
+    dropProps,
+    addFiles,
+    uploads,
+    // Until the limits are read, the picker offers images only.
+    accept: types ? `image/*,${acceptAttr(types)}` : "image/*",
+    uploading: uploads.some((u) => u.uploading),
+    remove: (key: string) =>
+      setUploads((prev) => prev.filter((u) => u.key !== key)),
+    clear: () => setUploads([]),
+    restore: (files: ChatFile[]) =>
+      setUploads(files.map((file) => ({ key: `up-${++seq}`, file }))),
+  };
+}

package/components/Chat/composer/useComposerEditor.ts

@@ -13,7 +13,7 @@ import { docToMarkdown } from "@/lib/chat/markdown/serialize";
 import { plainExtensions, richExtensions } from "./extensions";
 import { loadMarkdown } from "./load";
 import { handleKeyDown, type KeyHandlers } from "./keys";
-import { handlePaste, isImage, type PasteHandlers } from "./paste";
+import { handlePaste, type PasteHandlers } from "./paste";
 import { usePlainMode } from "./usePlainMode";
 
 export type ComposerHandlers = Omit<
@@ -120,9 +120,9 @@ export function useComposerEditor({
             asText,
           });
         },
-        // Dropped images are the composer's to take, not the document's.
+        // Dropped files are the composer's to take, not the document's.
         handleDrop: (view, event) =>
-          [...(event.dataTransfer?.files ?? [])].some(isImage),
+          (event.dataTransfer?.files.length ?? 0) > 0,
       },
       // Only edits change the text: not loading a draft, not setEditable.
       onUpdate: ({ editor: ed, transaction }) => {

package/components/Chat/useDraft.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import type { ChatImage } from "@/lib/chat/events";
+import type { ChatFile, ChatImage } from "@/lib/chat/events";
 import type { TextAttachment } from "@/lib/chat/paste";
 
 // `text` is the composer's markdown, so a reload restores its formatting.
@@ -9,6 +9,8 @@ interface Draft {
   text: string;
   images: ChatImage[];
   files?: TextAttachment[];
+  // Attached files, saved on the server: references only.
+  uploads?: ChatFile[];
 }
 
 const keyFor = (id: string) => `agentos:draft:${id}`;
@@ -39,7 +41,12 @@ export function useSaveDraft(id: string | undefined, draft: Draft): void {
     clearTimeout(timer.current);
     timer.current = setTimeout(() => {
       const key = keyFor(id);
-      if (!draft.text.trim() && !draft.images.length && !draft.files?.length) {
+      if (
+        !draft.text.trim() &&
+        !draft.images.length &&
+        !draft.files?.length &&
+        !draft.uploads?.length
+      ) {
         localStorage.removeItem(key);
         return;
       }

package/components/Chat/useGoToItem.ts

@@ -17,6 +17,16 @@ interface Deps {
   foldEvents: boolean;
 }
 
+// The message arrived at is marked for a moment (app/globals.css fades it).
+function flash(block: string) {
+  const el = document.querySelector(`[data-block="${CSS.escape(block)}"]`);
+  if (!el) return;
+  el.removeAttribute("data-flash");
+  void (el as HTMLElement).offsetWidth;
+  el.setAttribute("data-flash", "");
+  setTimeout(() => el.removeAttribute("data-flash"), 2000);
+}
+
 // Takes the reader to a message by a rule over the loaded items (the strip's
 // "the message where the question was asked"): older pages load until it is
 // found, then its folded rows open and it scrolls into view.
@@ -54,6 +64,7 @@ export function useGoToItem(d: Deps) {
           )
           ?.scrollIntoView({ block: "center" })
       )
+      .then(() => flash(where.block))
       .catch(() => {});
   }, [
     find,