@assistant-ui/react 0.15.26 → 0.15.27

package/src/primitives/composer/ComposerAttachmentDropzone.tsx

@@ -12,7 +12,7 @@ import {
 import { composeEventHandlers } from "radix-ui/internal";
 import { Slot } from "radix-ui";
 import type React from "react";
-import { useAui } from "@assistant-ui/store";
+import { useAui, useAuiState } from "@assistant-ui/store";
 import { renderSlot } from "../../utils/Primitive";
 
 export namespace ComposerPrimitiveAttachmentDropzone {
@@ -30,13 +30,15 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
 >(({ disabled, asChild = false, render, children, ...rest }, ref) => {
   const [isDragging, setIsDragging] = useState(false);
   const aui = useAui();
+  const disabledByThread = useAuiState((s) => s.thread.isDisabled);
+  const isDisabled = disabled || disabledByThread;
 
   useEffect(() => {
-    if (!disabled) return;
+    if (!isDisabled) return;
     // Disabled handlers cannot clear the latch, so reset it when the enabled period ends.
     // eslint-disable-next-line react-hooks/set-state-in-effect
     setIsDragging(false);
-  }, [disabled]);
+  }, [isDisabled]);
 
   // An unprevented file drop navigates the tab to the file, so file drags are
   // claimed via preventDefault even when the runtime does not support attachments.
@@ -44,31 +46,31 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
     (e: React.DragEvent) => {
       if (!e.dataTransfer.types.includes("Files")) return;
       e.preventDefault();
-      if (disabled || !aui.thread.getState().capabilities.attachments) {
+      if (isDisabled || !aui.thread.getState().capabilities.attachments) {
         e.dataTransfer.dropEffect = "none";
         return;
       }
       setIsDragging(true);
     },
-    [disabled, aui],
+    [isDisabled, aui],
   );
 
   const handleDragOverCapture = useCallback(
     (e: React.DragEvent) => {
       if (!e.dataTransfer.types.includes("Files")) return;
       e.preventDefault();
-      if (disabled || !aui.thread.getState().capabilities.attachments) {
+      if (isDisabled || !aui.thread.getState().capabilities.attachments) {
         e.dataTransfer.dropEffect = "none";
         return;
       }
       if (!isDragging) setIsDragging(true);
     },
-    [disabled, isDragging, aui],
+    [isDisabled, isDragging, aui],
   );
 
   const handleDragLeaveCapture = useCallback(
     (e: React.DragEvent) => {
-      if (disabled) return;
+      if (isDisabled) return;
       e.preventDefault();
       const next = e.relatedTarget as Node | null;
       if (next && e.currentTarget.contains(next)) {
@@ -76,7 +78,7 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
       }
       setIsDragging(false);
     },
-    [disabled],
+    [isDisabled],
   );
 
   const handleDrop = useCallback(
@@ -84,7 +86,7 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
       setIsDragging(false);
       if (!e.dataTransfer.types.includes("Files")) return;
       e.preventDefault();
-      if (disabled) return;
+      if (isDisabled) return;
       const files = Array.from(e.dataTransfer.files);
       if (!aui.thread.getState().capabilities.attachments || files.length === 0)
         return;
@@ -99,11 +101,11 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
         }),
       );
     },
-    [disabled, aui],
+    [isDisabled, aui],
   );
 
   const mergedProps = {
-    ...(isDragging && !disabled ? { "data-dragging": "true" } : null),
+    ...(isDragging && !isDisabled ? { "data-dragging": "true" } : null),
     ...rest,
     onDragEnterCapture: composeEventHandlers(
       rest.onDragEnterCapture,

package/src/primitives/composer/ComposerDisabledThread.test.tsx

@@ -0,0 +1,121 @@
+/** @vitest-environment jsdom */
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import type { AttachmentAdapter, ThreadMessage } from "@assistant-ui/core";
+import { ComposerPrimitiveAddAttachment } from "./ComposerAddAttachment";
+import { ComposerPrimitiveInput } from "./ComposerInput";
+import { ComposerPrimitiveRoot } from "./ComposerRoot";
+import { ComposerPrimitiveSend } from "./ComposerSend";
+import { ThreadPrimitiveViewportProvider } from "../../context/providers/ThreadViewportProvider";
+
+const makeAttachmentAdapter = () => {
+  const add = vi.fn(async ({ file }: { file: File }) => ({
+    id: file.name,
+    type: "file" as const,
+    name: file.name,
+    contentType: file.type,
+    file,
+    status: {
+      type: "requires-action" as const,
+      reason: "composer-send" as const,
+    },
+  }));
+  const adapter: AttachmentAdapter = {
+    accept: "*",
+    add,
+    remove: async () => {},
+    send: async (attachment) => ({
+      ...attachment,
+      status: { type: "complete" },
+      content: [{ type: "text", text: "file body" }],
+    }),
+  };
+  return { adapter, add };
+};
+
+const App = ({
+  isDisabled,
+  onNew,
+  attachments,
+}: {
+  isDisabled: boolean;
+  onNew: () => Promise<void>;
+  attachments: AttachmentAdapter;
+}) => {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: [],
+    isDisabled,
+    onNew,
+    adapters: { attachments },
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ThreadPrimitiveViewportProvider>
+        <ComposerPrimitiveRoot>
+          <ComposerPrimitiveInput aria-label="input" />
+          <ComposerPrimitiveAddAttachment>
+            attach
+          </ComposerPrimitiveAddAttachment>
+          <ComposerPrimitiveSend>send</ComposerPrimitiveSend>
+        </ComposerPrimitiveRoot>
+      </ThreadPrimitiveViewportProvider>
+    </AssistantRuntimeProvider>
+  );
+};
+
+const button = (name: string) =>
+  screen.getByRole("button", { name }) as HTMLButtonElement;
+
+const settle = () =>
+  act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
+afterEach(() => {
+  cleanup();
+  document.body.querySelectorAll('input[type="file"]').forEach((input) => {
+    input.remove();
+  });
+});
+
+describe("composer on a disabled thread", () => {
+  it("blocks sending a draft that was entered before the thread was disabled", async () => {
+    const onNew = vi.fn(async () => {});
+    const { adapter } = makeAttachmentAdapter();
+    const view = render(
+      <App isDisabled={false} onNew={onNew} attachments={adapter} />,
+    );
+    fireEvent.change(screen.getByRole("textbox", { name: "input" }), {
+      target: { value: "hello" },
+    });
+
+    view.rerender(<App isDisabled onNew={onNew} attachments={adapter} />);
+    await settle();
+
+    expect(button("send").disabled).toBe(true);
+    fireEvent.click(button("send"));
+    await settle();
+    expect(onNew).not.toHaveBeenCalled();
+  });
+
+  it("disables attachment selection", () => {
+    const onNew = vi.fn(async () => {});
+    const { adapter, add } = makeAttachmentAdapter();
+    render(<App isDisabled onNew={onNew} attachments={adapter} />);
+
+    expect(button("attach").disabled).toBe(true);
+    fireEvent.click(button("attach"));
+    expect(document.body.querySelector('input[type="file"]')).toBeNull();
+    expect(add).not.toHaveBeenCalled();
+  });
+});

package/src/unstable/useComposerInput.ts

@@ -68,6 +68,8 @@ export type Unstable_ComposerInput = {
  *   disabled={isDisabled}
  *   onChange={(e) => setText(e.target.value)}
  *   onKeyDown={(e) => {
+ *     if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+ *
  *     if (e.key === "Enter" && !e.shiftKey && canSend) {
  *       e.preventDefault();
  *       send();