@athenaintel/react 0.19.0 → 0.21.0

package/dist/chat-ui/composer/tiptap-composer.d.ts

@@ -9,15 +9,30 @@
  * - useMentionSuggestions (full Olympus categories + async data)
  *
  * Auth credentials for GraphQL are provided via MentionAuthCtx, and the host
- * app (Chrome side panel, Office task pane) supplies any host-only mention
- * items — browser tabs, for instance — through `webpages`.
+ * app (Chrome side panel, Office task pane, the SDK's AthenaChat) supplies any
+ * host-only mention items — browser tabs through `webpages`, its own Tools /
+ * Toolkits list through `tools`.
+ *
+ * The draft serializes to Markdown through `tiptap-markdown` — the serializer
+ * the Olympus chat composer sends with — so pasted hyperlinks keep their URL,
+ * formatting marks survive, paragraphs stay separated, and a mention is the
+ * `[@Name](url)` link the message renderer parses back into a chip.
  */
-import { type JSONContent } from "@tiptap/core";
+import { type Editor } from "@tiptap/core";
 import { type MentionRootCategory } from "../mentions/suggestions/data/use-mention-suggestions";
-import type { WebpageMention } from "../mentions/suggestions/data/types";
+import type { MentionTool, WebpageMention } from "../mentions/suggestions/data/types";
 import { type UploadedChatAsset } from "@athenaintel/agent-runtime";
-/** Convert recovered runtime text without letting Tiptap parse it as HTML. */
-export declare function plainTextToTiptapContent(text: string): JSONContent;
+/** The draft as it is sent: Markdown, mentions as `[@Name](url)` links. */
+export declare function serializeDraft(editor: Editor): string;
+/**
+ * A host's own intake for the files pasted into or dropped on the composer
+ * (AthenaChat uploads them into its attachment pills). Without `onDrop` the
+ * composer leaves drops untouched so an enclosing drop zone receives them.
+ */
+export interface ComposerFileIntake {
+    onPaste: (files: readonly File[]) => void;
+    onDrop?: (files: readonly File[]) => void;
+}
 export interface TiptapComposerHandle {
     submit: () => Promise<void>;
     addAttachment: (file: File) => Promise<void>;
@@ -29,10 +44,32 @@ export interface TiptapComposerProps {
     disabled?: boolean;
     /** Host-provided browser-tab mentions; empty in hosts without tab access. */
     webpages?: readonly WebpageMention[];
+    /**
+     * Host-provided Tools / Toolkits mention candidates. When set they replace
+     * the server tool catalog for those categories (see `useMentionSuggestions`).
+     */
+    tools?: readonly MentionTool[];
     rootCategories?: readonly MentionRootCategory[];
     onDraftStateChange?: (hasDraft: boolean) => void;
+    /** Show local image thumbnails while mention-backed uploads are in the draft. */
+    showImagePreviews?: boolean;
+    /** Surface paste/drop attachment failures in host UI as well as diagnostics. */
+    onAttachmentError?: (message: string) => void;
+    /**
+     * Host-owned intake for pasted and dropped files. Without it the composer
+     * attaches them itself through `aui.composer.addAttachment`.
+     */
+    fileIntake?: ComposerFileIntake;
+    /**
+     * Awaited before every submit (Enter and the imperative handle), after the
+     * composer's own pending uploads have settled: a host whose uploads live
+     * outside the composer (AthenaChat's attachment pills) resolves once they
+     * land, so a send never leaves without its attachment.
+     */
+    waitForHostUploads?: () => Promise<void> | void;
     /**
-     * Optional submit interception: called with the serialized draft before the
+     * Optional submit interception: called with the serialized draft — possibly
+     * empty, for a host composing its own extras into the send — before the
      * composer-runtime send. Return `true` when the host consumed the draft
      * through another lane (e.g. a live voice session) — the editor clears and
      * the normal send is skipped. Return `false` to fall through unchanged.

package/dist/chat-ui/composer/tiptap-composer.js

@@ -0,0 +1,549 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { athenaDiagnostics } from "../../diagnostics/athena-diagnostics.js";
+import { extractPastedImages, clipboardHasMeaningfulText } from "../../composer/clipboard.js";
+import { forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Extension } from "@tiptap/core";
+import { useAui, unstable_useComposerInput } from "@assistant-ui/react";
+import { LoaderCircleIcon, XIcon } from "lucide-react";
+import { CHAT_TEXT_CLASS, createChatTextExtensions } from "../rich-text/chat-text-schema.js";
+import { MentionSuggestionsExtension } from "../mentions/suggestions/mention-suggestions.extension.js";
+import { MentionSuggestionPopup } from "../mentions/suggestions/components/mention-suggestion-popup.js";
+import { MentionSuggestionList } from "../mentions/suggestions/components/mention-suggestion-list.js";
+import { useMentionSuggestions } from "../mentions/suggestions/data/use-mention-suggestions.js";
+import { registerChatAssetMentionHandler } from "../../packages/agent-runtime/src/asset-attachment.js";
+import "../../packages/agent-runtime/src/generated/runconfig-contract.js";
+import "@assistant-ui/tap";
+import "statewire";
+import "../../packages/agent-runtime/src/statewire-suspended.js";
+import "@tanstack/react-query";
+import "../../packages/agent-runtime/src/statewire-state.js";
+import "../../packages/agent-runtime/src/messages.js";
+import "@assistant-ui/react-statewire";
+import "@assistant-ui/store";
+import "../../packages/agent-runtime/src/quota-safe-local-storage-session.js";
+import "../../packages/agent-runtime/src/statewire-attach-observer.js";
+import "../../packages/agent-runtime/src/thread-status.js";
+import "@assistant-ui/core";
+import "../../packages/agent-runtime/src/thread-handoff.js";
+import { PendingAttachmentUploads } from "./pending-attachment-uploads.js";
+import { cn } from "cnfast";
+const SubmitKeybind = Extension.create({
+  name: "submitKeybind",
+  priority: 1e3,
+  addOptions() {
+    return { onSubmit: () => {
+    }, isMentionOpen: () => false };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => {
+        if (this.options.isMentionOpen()) return false;
+        if (["listItem", "taskItem", "codeBlock", "table", "blockquote"].some(
+          (node) => this.editor.isActive(node)
+        )) return false;
+        this.options.onSubmit();
+        return true;
+      },
+      "Shift-Enter": () => {
+        return this.editor.commands.newlineInCode() || this.editor.commands.setHardBreak();
+      }
+    };
+  }
+});
+const MENTION_STYLES = `
+  .image-preview-composer .mention-chip[data-display-as-preview="true"] {
+    display: none;
+  }
+  /* Scoped to this editor: hosts render other ProseMirror instances on the
+     same page (AthenaChat's message renderer), which must keep their own
+     height and placeholder rules. */
+  .athena-chat-composer .ProseMirror {
+    outline: none;
+    min-height: 36px;
+    max-height: 120px;
+    overflow-y: auto;
+  }
+  .athena-chat-composer .ProseMirror p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: #9ca3af;
+    pointer-events: none;
+    height: 0;
+  }
+`;
+function serializeDraft(editor) {
+  return editor.storage.markdown.getMarkdown();
+}
+const NO_WEBPAGES = [];
+function revokeImagePreview(src) {
+  if (typeof URL.revokeObjectURL === "function") URL.revokeObjectURL(src);
+}
+function ImagePreviewStrip({
+  previews,
+  onRemove
+}) {
+  if (previews.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex w-full gap-2 overflow-x-auto px-1.5 pb-1 pt-1.5",
+      role: "list",
+      "aria-label": "Image attachments",
+      children: previews.map((preview) => {
+        const uploading = preview.assetId === void 0;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "group relative h-16 w-[clamp(76px,30vw,112px)] shrink-0 overflow-hidden rounded-lg border border-neutral-200 bg-neutral-100 shadow-sm",
+            role: "listitem",
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: preview.src,
+                  alt: preview.name,
+                  className: "size-full object-cover"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 truncate bg-gradient-to-t from-black/75 to-transparent px-1.5 pb-1 pt-4 text-[10px] font-medium text-white", children: preview.name }),
+              uploading ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "absolute left-1 top-1 inline-flex size-5 items-center justify-center rounded-full bg-black/65 text-white",
+                  title: "Uploading image",
+                  children: /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" })
+                }
+              ) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onRemove(preview),
+                  className: "absolute right-1 top-1 inline-flex size-5 items-center justify-center rounded-full bg-black/65 text-white opacity-80 transition-opacity hover:bg-black/80 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white",
+                  "aria-label": `Remove ${preview.name}`,
+                  title: "Remove image",
+                  children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+                }
+              )
+            ]
+          },
+          preview.key
+        );
+      })
+    }
+  );
+}
+const TiptapComposer = forwardRef(
+  ({
+    placeholder = "Message Athena... (type @ to mention)",
+    threadId,
+    disabled = false,
+    webpages = NO_WEBPAGES,
+    tools,
+    rootCategories,
+    onDraftStateChange,
+    showImagePreviews = false,
+    onAttachmentError,
+    fileIntake,
+    waitForHostUploads,
+    interceptSubmit
+  }, outerRef) => {
+    const aui = useAui();
+    const composerInput = unstable_useComposerInput();
+    const applyingRuntimeTextRef = useRef(false);
+    const lastEmittedMarkdownRef = useRef(null);
+    const listRef = useRef(null);
+    const pendingUploadsRef = useRef(new PendingAttachmentUploads());
+    const submitInFlightRef = useRef(false);
+    const imagePreviewsRef = useRef([]);
+    const [imagePreviews, setImagePreviews] = useState([]);
+    const replaceImagePreviews = useCallback((next) => {
+      imagePreviewsRef.current = next;
+      setImagePreviews(next);
+    }, []);
+    const removeImagePreviews = useCallback(
+      (shouldRemove) => {
+        const kept = [];
+        let removed = false;
+        for (const preview of imagePreviewsRef.current) {
+          if (shouldRemove(preview)) {
+            revokeImagePreview(preview.src);
+            removed = true;
+          } else kept.push(preview);
+        }
+        if (removed) replaceImagePreviews(kept);
+      },
+      [replaceImagePreviews]
+    );
+    const clearImagePreviews = useCallback(() => {
+      removeImagePreviews(() => true);
+    }, [removeImagePreviews]);
+    useEffect(() => clearImagePreviews(), [clearImagePreviews, threadId]);
+    useEffect(
+      () => () => {
+        for (const preview of imagePreviewsRef.current) {
+          revokeImagePreview(preview.src);
+        }
+        imagePreviewsRef.current = [];
+      },
+      []
+    );
+    const { store } = useMentionSuggestions({ webpages, tools, rootCategories });
+    const [popupOpen, setPopupOpen] = useState(false);
+    const popupOpenRef = useRef(false);
+    const [popupProps, setPopupProps] = useState(null);
+    const callbacksRef = useRef({
+      onStart: (props) => {
+        setPopupOpen(true);
+        popupOpenRef.current = true;
+        setPopupProps(props);
+      },
+      onUpdate: (props) => {
+        setPopupProps(props);
+      },
+      onKeyDown: (event) => {
+        var _a;
+        return ((_a = listRef.current) == null ? void 0 : _a.onKeyDown(event)) ?? false;
+      },
+      onExit: () => {
+        setPopupOpen(false);
+        popupOpenRef.current = false;
+        setPopupProps(null);
+      }
+    });
+    const editorRef = useRef(null);
+    const handleSubmit = useCallback(async () => {
+      var _a;
+      if (disabled) return;
+      if (submitInFlightRef.current) return;
+      submitInFlightRef.current = true;
+      try {
+        await pendingUploadsRef.current.waitForIdle();
+        await (waitForHostUploads == null ? void 0 : waitForHostUploads());
+        const ed = editorRef.current;
+        if (!ed) return;
+        const text = serializeDraft(ed).trim();
+        if (interceptSubmit) {
+          const hasAttachments = (((_a = aui.composer.getState().attachments) == null ? void 0 : _a.length) ?? 0) > 0;
+          if (!hasAttachments && await interceptSubmit(text)) {
+            ed.commands.clearContent();
+            clearImagePreviews();
+            onDraftStateChange == null ? void 0 : onDraftStateChange(false);
+            return;
+          }
+        }
+        if (!text) return;
+        if (!composerInput.canSend) return;
+        composerInput.setText(text);
+        composerInput.send({ steer: false });
+        ed.commands.clearContent();
+        clearImagePreviews();
+        onDraftStateChange == null ? void 0 : onDraftStateChange(false);
+      } finally {
+        submitInFlightRef.current = false;
+      }
+    }, [
+      clearImagePreviews,
+      composerInput,
+      disabled,
+      interceptSubmit,
+      onDraftStateChange,
+      waitForHostUploads
+    ]);
+    const handleSubmitRef = useRef(handleSubmit);
+    handleSubmitRef.current = handleSubmit;
+    const addAttachment = useCallback(
+      (file) => {
+        let previewKey;
+        if (showImagePreviews && file.type.startsWith("image/") && typeof URL.createObjectURL === "function") {
+          previewKey = crypto.randomUUID();
+          replaceImagePreviews([
+            ...imagePreviewsRef.current,
+            {
+              key: previewKey,
+              file,
+              name: file.name || "Pasted image",
+              src: URL.createObjectURL(file)
+            }
+          ]);
+        }
+        return pendingUploadsRef.current.track(aui.composer.addAttachment(file)).catch((error) => {
+          if (previewKey) {
+            removeImagePreviews((preview) => preview.key === previewKey);
+          }
+          throw error;
+        });
+      },
+      [aui, removeImagePreviews, replaceImagePreviews, showImagePreviews]
+    );
+    const handlePaste = useCallback(
+      (_view, event) => {
+        const clipboardData = event.clipboardData;
+        if (!clipboardData) return false;
+        const images = extractPastedImages({ clipboardData });
+        if (images.length === 0) return false;
+        if (clipboardHasMeaningfulText({
+          clipboardData,
+          pastedFileNames: images.map((image) => image.originalName)
+        })) {
+          return false;
+        }
+        event.preventDefault();
+        const files = images.map((image) => image.file);
+        if (fileIntake) {
+          fileIntake.onPaste(files);
+          return true;
+        }
+        for (const file of files) {
+          void addAttachment(file).catch((error) => {
+            onAttachmentError == null ? void 0 : onAttachmentError("Couldn’t paste that image.");
+            athenaDiagnostics.error(
+              "composer.attachment.error",
+              error,
+              { code: "attachment_failed", message: "Pasted image upload failed" },
+              { source: "paste", type: file.type }
+            );
+          });
+        }
+        return true;
+      },
+      [addAttachment, fileIntake, onAttachmentError]
+    );
+    const addDroppedImages = useCallback(
+      (files) => {
+        const images = Array.from(files).filter(
+          (file) => file.type.startsWith("image/")
+        );
+        if (images.length === 0) return false;
+        if (fileIntake) {
+          if (!fileIntake.onDrop) return false;
+          fileIntake.onDrop(images);
+          return true;
+        }
+        for (const file of images) {
+          void addAttachment(file).catch((error) => {
+            onAttachmentError == null ? void 0 : onAttachmentError("Couldn’t attach that dropped image.");
+            athenaDiagnostics.error(
+              "composer.attachment.error",
+              error,
+              { code: "attachment_failed", message: "Dropped image upload failed" },
+              { source: "drop", type: file.type }
+            );
+          });
+        }
+        return true;
+      },
+      [addAttachment, fileIntake, onAttachmentError]
+    );
+    const handleDrop = useCallback(
+      (_view, event) => {
+        var _a;
+        const files = (_a = event.dataTransfer) == null ? void 0 : _a.files;
+        if (!(files == null ? void 0 : files.length)) return false;
+        const handled = addDroppedImages(files);
+        if (handled) event.preventDefault();
+        return handled;
+      },
+      [addDroppedImages]
+    );
+    const handleComposerDrop = useCallback(
+      (event) => {
+        if (event.defaultPrevented) return;
+        if (addDroppedImages(event.dataTransfer.files)) event.preventDefault();
+      },
+      [addDroppedImages]
+    );
+    const editor = useEditor({
+      editable: !disabled,
+      extensions: [
+        ...createChatTextExtensions(),
+        Placeholder.configure({ placeholder }),
+        MentionSuggestionsExtension.configure({
+          store,
+          callbacks: callbacksRef.current
+        }),
+        SubmitKeybind.configure({
+          onSubmit: () => void handleSubmitRef.current(),
+          isMentionOpen: () => popupOpenRef.current
+        })
+      ],
+      editorProps: {
+        attributes: {
+          class: cn(CHAT_TEXT_CLASS, "w-full resize-none bg-transparent px-1.5 py-2 outline-none"),
+          "data-testid": "athena-chat-composer"
+        },
+        handlePaste,
+        handleDrop
+      },
+      onUpdate: ({ editor: updatedEditor }) => {
+        const nextText = serializeDraft(updatedEditor);
+        lastEmittedMarkdownRef.current = nextText;
+        if (!applyingRuntimeTextRef.current) {
+          composerInput.setText(nextText);
+        }
+        onDraftStateChange == null ? void 0 : onDraftStateChange(nextText.trim().length > 0);
+        if (showImagePreviews) {
+          const mentionedAssetIds = /* @__PURE__ */ new Set();
+          updatedEditor.state.doc.descendants((node) => {
+            if (node.type.name === "mention" && node.attrs.type === "asset" && typeof node.attrs.id === "string") {
+              mentionedAssetIds.add(node.attrs.id);
+            }
+          });
+          removeImagePreviews(
+            (preview) => preview.assetId !== void 0 && !mentionedAssetIds.has(preview.assetId)
+          );
+        }
+      },
+      immediatelyRender: false
+    });
+    editorRef.current = editor;
+    useEffect(() => {
+      editor == null ? void 0 : editor.setEditable(!disabled);
+    }, [disabled, editor]);
+    useEffect(() => {
+      if (!editor) return;
+      const value = composerInput.value;
+      if (value === lastEmittedMarkdownRef.current) return;
+      const currentMarkdown = serializeDraft(editor);
+      lastEmittedMarkdownRef.current = currentMarkdown;
+      if (value === currentMarkdown) return;
+      let cancelled = false;
+      queueMicrotask(() => {
+        if (cancelled || editor.isDestroyed) return;
+        applyingRuntimeTextRef.current = true;
+        try {
+          editor.commands.setContent(value);
+          lastEmittedMarkdownRef.current = serializeDraft(editor);
+        } finally {
+          applyingRuntimeTextRef.current = false;
+        }
+        onDraftStateChange == null ? void 0 : onDraftStateChange(value.trim().length > 0);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }, [composerInput.value, editor, onDraftStateChange]);
+    const insertAssetMention = useCallback(
+      (asset, sourceFile) => {
+        const currentEditor = editorRef.current;
+        if (!currentEditor) throw new Error("The chat composer is not ready.");
+        currentEditor.chain().focus().insertContent({
+          type: "mention",
+          attrs: {
+            type: "asset",
+            name: asset.title,
+            id: asset.id,
+            assetType: asset.assetType,
+            displayAsPreview: showImagePreviews && (sourceFile == null ? void 0 : sourceFile.type.startsWith("image/"))
+          }
+        }).insertContent({ type: "text", text: " " }).run();
+        if (showImagePreviews && (sourceFile == null ? void 0 : sourceFile.type.startsWith("image/")) && typeof URL.createObjectURL === "function") {
+          const existing = imagePreviewsRef.current.find(
+            (preview) => preview.file === sourceFile
+          );
+          if (existing) {
+            replaceImagePreviews(
+              imagePreviewsRef.current.map(
+                (preview) => preview.key === existing.key ? { ...preview, assetId: asset.id, name: asset.title } : preview
+              )
+            );
+          } else {
+            replaceImagePreviews([
+              ...imagePreviewsRef.current,
+              {
+                key: crypto.randomUUID(),
+                file: sourceFile,
+                name: asset.title,
+                src: URL.createObjectURL(sourceFile),
+                assetId: asset.id
+              }
+            ]);
+          }
+        }
+      },
+      [replaceImagePreviews, showImagePreviews]
+    );
+    const removeImagePreview = useCallback(
+      (preview) => {
+        if (!preview.assetId) return;
+        const currentEditor = editorRef.current;
+        if (!currentEditor) return;
+        const positions = [];
+        currentEditor.state.doc.descendants((node, position) => {
+          if (node.type.name === "mention" && node.attrs.type === "asset" && node.attrs.id === preview.assetId) {
+            positions.push({ from: position, to: position + node.nodeSize });
+          }
+        });
+        let transaction = currentEditor.state.tr;
+        for (const position of positions.reverse()) {
+          transaction = transaction.delete(position.from, position.to);
+        }
+        if (transaction.docChanged) currentEditor.view.dispatch(transaction);
+        removeImagePreviews((candidate) => candidate.key === preview.key);
+        currentEditor.commands.focus();
+      },
+      [removeImagePreviews]
+    );
+    useEffect(
+      () => registerChatAssetMentionHandler(threadId, insertAssetMention),
+      [insertAssetMention, threadId]
+    );
+    useImperativeHandle(
+      outerRef,
+      () => ({ submit: handleSubmit, addAttachment, insertAssetMention }),
+      [addAttachment, handleSubmit, insertAssetMention]
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: MENTION_STYLES }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "athena-chat-composer flex-1 min-w-0",
+            showImagePreviews && "image-preview-composer"
+          ),
+          "aria-label": "Message composer",
+          "aria-disabled": disabled,
+          onDragOver: (event) => {
+            if (Array.from(event.dataTransfer.types).includes("Files")) {
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "copy";
+            }
+          },
+          onDrop: handleComposerDrop,
+          children: [
+            /* @__PURE__ */ jsx(
+              ImagePreviewStrip,
+              {
+                previews: imagePreviews,
+                onRemove: removeImagePreview
+              }
+            ),
+            /* @__PURE__ */ jsx(EditorContent, { editor })
+          ]
+        }
+      ),
+      popupOpen && popupProps && editor && /* @__PURE__ */ jsx(MentionSuggestionPopup, { clientRect: popupProps.clientRect, children: /* @__PURE__ */ jsx(
+        MentionSuggestionList,
+        {
+          ref: listRef,
+          store,
+          editor,
+          query: popupProps.query,
+          command: (item) => popupProps.command(item),
+          closeMenu: () => {
+            setPopupOpen(false);
+            editor.commands.focus();
+          }
+        }
+      ) })
+    ] });
+  }
+);
+TiptapComposer.displayName = "TiptapComposer";
+export {
+  TiptapComposer,
+  serializeDraft
+};
+//# sourceMappingURL=tiptap-composer.js.map