@anvia/react-ui 0.3.0 → 0.4.0

package/dist/{chunk-LRAQW3ZK.js → chunk-KO36TK2O.js}

@@ -1,9 +1,9 @@
 import {
   Message
-} from "./chunk-5Z2IWZ5O.js";
+} from "./chunk-FZANAMWH.js";
 import {
   Attachment
-} from "./chunk-QHP4GSRG.js";
+} from "./chunk-32QFNRXR.js";
 import {
   composeRefs,
   renderPrimitive
@@ -16,9 +16,18 @@ import {
   useChatContext,
   useComposer,
   useThread
-} from "./chunk-5IHC7D4U.js";
+} from "./chunk-BCCU3VT5.js";
 
 // src/chat/composer.tsx
+import { mergeAttributes } from "@tiptap/core";
+import Document from "@tiptap/extension-document";
+import HardBreak from "@tiptap/extension-hard-break";
+import Mention from "@tiptap/extension-mention";
+import Paragraph from "@tiptap/extension-paragraph";
+import Placeholder from "@tiptap/extension-placeholder";
+import Text from "@tiptap/extension-text";
+import { PluginKey } from "@tiptap/pm/state";
+import { EditorContent, useEditor } from "@tiptap/react";
 import {
   forwardRef,
   useCallback,
@@ -31,14 +40,18 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ComposerRoot = forwardRef(function ComposerRoot2({
   attachments: attachmentsProp,
   defaultAttachments,
+  defaultEntities,
   defaultInput = "",
   defaultQuote,
+  entities: entitiesProp,
   input: inputProp,
   onAttachmentsChange,
+  onEntitiesChange,
   onInputChange,
   onQuoteChange,
   quote: quoteProp,
   submitMessage,
+  triggers: triggersProp,
   onSubmit,
   ...props
 }, ref) {
@@ -47,11 +60,17 @@ var ComposerRoot = forwardRef(function ComposerRoot2({
   const [uncontrolledAttachments, setUncontrolledAttachments] = useState(() => [
     ...defaultAttachments ?? []
   ]);
+  const [uncontrolledEntities, setUncontrolledEntities] = useState(() => [
+    ...defaultEntities ?? []
+  ]);
   const [uncontrolledQuote, setUncontrolledQuote] = useState(
     defaultQuote
   );
+  const [activeTrigger, setActiveTriggerState] = useState();
   const input = inputProp ?? uncontrolledInput;
   const attachments = attachmentsProp ?? uncontrolledAttachments;
+  const entities = entitiesProp ?? uncontrolledEntities;
+  const triggers = triggersProp ?? EMPTY_COMPOSER_TRIGGERS;
   const rawQuote = quoteProp ?? uncontrolledQuote;
   const rawQuoteMessageId = rawQuote?.messageId;
   const rawQuoteText = rawQuote?.text;
@@ -61,10 +80,13 @@ var ComposerRoot = forwardRef(function ComposerRoot2({
   );
   const attachmentsRef = useRef(attachments);
   attachmentsRef.current = attachments;
+  const entitiesRef = useRef(entities);
+  entitiesRef.current = entities;
   const inputControlled = inputProp !== void 0;
   const attachmentsControlled = attachmentsProp !== void 0;
+  const entitiesControlled = entitiesProp !== void 0;
   const quoteControlled = quoteProp !== void 0;
-  const hasMessageContent = input.trim().length > 0 || attachments.length > 0 || quote !== void 0;
+  const hasMessageContent = input.trim().length > 0 || attachments.length > 0 || entities.length > 0 || quote !== void 0;
   const canSubmit = hasMessageContent && chat.status !== "streaming";
   const canStop = chat.status === "streaming";
   const setInput = useCallback(
@@ -87,6 +109,17 @@ var ComposerRoot = forwardRef(function ComposerRoot2({
     },
     [attachmentsControlled, onAttachmentsChange]
   );
+  const setEntities = useCallback(
+    (update) => {
+      const nextEntities = typeof update === "function" ? update(entitiesRef.current) : update;
+      entitiesRef.current = nextEntities;
+      if (!entitiesControlled) {
+        setUncontrolledEntities(nextEntities);
+      }
+      onEntitiesChange?.(nextEntities);
+    },
+    [entitiesControlled, onEntitiesChange]
+  );
   const setQuote = useCallback(
     (nextQuote) => {
       const normalizedQuote = normalizeQuote(nextQuote);
@@ -119,17 +152,20 @@ var ComposerRoot = forwardRef(function ComposerRoot2({
   const clear = useCallback(() => {
     setInput("");
     setAttachments([]);
+    setEntities([]);
+    setActiveTriggerState(void 0);
     clearQuote();
-  }, [clearQuote, setAttachments, setInput]);
+  }, [clearQuote, setAttachments, setEntities, setInput]);
   const submit = useCallback(async () => {
     const prompt = input;
-    if (prompt.trim().length === 0 && attachments.length === 0 && quote === void 0 || chat.status === "streaming") {
+    if (prompt.trim().length === 0 && attachments.length === 0 && entities.length === 0 && quote === void 0 || chat.status === "streaming") {
       return;
     }
     if (submitMessage !== void 0) {
       await submitMessage({
         input: prompt,
         attachments,
+        entities,
         chat,
         quote,
         clear
@@ -137,24 +173,28 @@ var ComposerRoot = forwardRef(function ComposerRoot2({
       return;
     }
     const submittedText = quote === void 0 ? prompt : promptWithQuote(prompt, quote);
+    const metadata = composerSubmitMetadata(quote, entities);
     if (attachments.length === 0) {
-      if (quote === void 0) {
+      if (metadata === void 0) {
         await chat.sendMessage(prompt);
       } else {
         await chat.sendMessage({
           text: submittedText,
-          metadata: { quote }
+          metadata
         });
       }
     } else {
       await chat.sendMessage({
         text: submittedText,
         attachments,
-        ...quote === void 0 ? {} : { metadata: { quote } }
+        ...metadata === void 0 ? {} : { metadata }
       });
     }
     clear();
-  }, [attachments, chat, clear, input, quote, submitMessage]);
+  }, [attachments, chat, clear, entities, input, quote, submitMessage]);
+  const setActiveTrigger = useCallback((update) => {
+    setActiveTriggerState(update);
+  }, []);
   const value = useMemo(
     () => ({
       input,
@@ -164,9 +204,14 @@ var ComposerRoot = forwardRef(function ComposerRoot2({
       addAttachment,
       removeAttachment,
       clearAttachments,
+      entities,
+      setEntities,
       quote,
       setQuote,
       clearQuote,
+      triggers,
+      activeTrigger,
+      setActiveTrigger,
       submit,
       stop: chat.stop,
       status: chat.status,
@@ -176,19 +221,24 @@ var ComposerRoot = forwardRef(function ComposerRoot2({
     [
       addAttachment,
       attachments,
+      activeTrigger,
       canStop,
       canSubmit,
       chat.status,
       chat.stop,
       clearAttachments,
       clearQuote,
+      entities,
       input,
       quote,
       removeAttachment,
       setAttachments,
+      setActiveTrigger,
+      setEntities,
       setInput,
       setQuote,
-      submit
+      submit,
+      triggers
     ]
   );
   const handleSubmit = useCallback(
@@ -264,42 +314,71 @@ var ComposerClearQuote = forwardRef(
 );
 var ComposerInput = forwardRef(function ComposerInput2({
   autoResize = true,
+  disabled,
   maxRows: maxRowsProp,
   minRows: minRowsProp,
-  onChange,
   onKeyDown,
-  rows,
+  placeholder,
+  style,
   ...props
 }, ref) {
   const composer = useComposer();
-  const inputRef = useRef(null);
-  const wasAutoResizeRef = useRef(autoResize);
-  const composedInputRef = useMemo(() => composeRefs(inputRef, ref), [ref]);
-  const minRows = normalizeRows(minRowsProp ?? rows ?? 1, 1);
+  const composerRef = useRef(composer);
+  composerRef.current = composer;
+  const editorReadyRef = useRef(false);
+  const syncingFromEditorRef = useRef(false);
+  const triggers = composer.triggers;
+  const minRows = normalizeRows(minRowsProp ?? 1, 1);
   const maxRows = normalizeRows(maxRowsProp ?? 6, minRows);
-  useEffect(() => {
-    const wasAutoResize = wasAutoResizeRef.current;
-    wasAutoResizeRef.current = autoResize;
-    if (!autoResize) {
-      if (wasAutoResize) {
-        resetComposerInputSize(inputRef.current);
-      }
-      return;
-    }
-    resizeComposerInput(inputRef.current, { maxRows, minRows });
-  });
-  const handleChange = useCallback(
-    (event) => {
-      onChange?.(event);
-      if (!event.defaultPrevented) {
-        composer.setInput(event.currentTarget.value);
-        if (autoResize) {
-          resizeComposerInput(event.currentTarget, { maxRows, minRows });
+  const extensions = useMemo(
+    () => composerInputExtensions({
+      composerRef,
+      placeholder,
+      triggers
+    }),
+    [placeholder, triggers]
+  );
+  const editor = useEditor(
+    {
+      extensions,
+      content: plainTextToComposerContent(composer.input),
+      editable: composer.status !== "streaming",
+      editorProps: {
+        attributes: {
+          "aria-label": props["aria-label"] ?? "Message",
+          "aria-multiline": "true",
+          "data-anvia-composer-editor": "",
+          role: "textbox"
+        }
+      },
+      onUpdate: ({ editor: updatedEditor }) => {
+        if (!editorReadyRef.current) {
+          return;
         }
+        const snapshot = composerSnapshotFromEditor(
+          updatedEditor,
+          composerRef.current.entities,
+          composerRef.current.triggers
+        );
+        syncingFromEditorRef.current = true;
+        composerRef.current.setInput(snapshot.input);
+        composerRef.current.setEntities(snapshot.entities);
       }
     },
-    [autoResize, composer, maxRows, minRows, onChange]
+    [extensions]
   );
+  const ariaDisabled = props["aria-disabled"] === true || props["aria-disabled"] === "true";
+  const composerDisabled = disabled === true || ariaDisabled || composer.status === "streaming";
+  const inputStyle = useMemo(() => {
+    if (!autoResize) {
+      return style;
+    }
+    const rowsStyle = {
+      ["--anvia-composer-min-rows"]: minRows,
+      ["--anvia-composer-max-rows"]: maxRows
+    };
+    return style === void 0 ? rowsStyle : { ...rowsStyle, ...style };
+  }, [autoResize, maxRows, minRows, style]);
   const handleKeyDown = useCallback(
     (event) => {
       onKeyDown?.(event);
@@ -307,25 +386,474 @@ var ComposerInput = forwardRef(function ComposerInput2({
         return;
       }
       event.preventDefault();
-      void composer.submit();
+      void composerRef.current.submit();
     },
-    [composer, onKeyDown]
+    [onKeyDown]
   );
+  useEffect(() => {
+    if (editor === null) {
+      return;
+    }
+    editor.setEditable(!composerDisabled, false);
+  }, [composerDisabled, editor]);
+  useEffect(() => {
+    if (editor === null) {
+      return;
+    }
+    const handleKeyDown2 = (event) => {
+      if (submitComposerFromEditorKeyDown(event, composerRef)) {
+        event.stopPropagation();
+      }
+    };
+    editor.view.dom.addEventListener("keydown", handleKeyDown2, true);
+    return () => {
+      editor.view.dom.removeEventListener("keydown", handleKeyDown2, true);
+    };
+  }, [editor]);
+  useEffect(() => {
+    if (editor === null) {
+      return;
+    }
+    editor.commands.setContent(plainTextToComposerContent(composerRef.current.input), {
+      emitUpdate: false
+    });
+    editorReadyRef.current = true;
+    return () => {
+      editorReadyRef.current = false;
+    };
+  }, [editor]);
+  useEffect(() => {
+    if (editor === null || !editorReadyRef.current) {
+      return;
+    }
+    if (syncingFromEditorRef.current) {
+      syncingFromEditorRef.current = false;
+      return;
+    }
+    const snapshot = composerSnapshotFromEditor(editor, composer.entities, composer.triggers);
+    if (snapshot.input === composer.input) {
+      return;
+    }
+    editor.commands.setContent(plainTextToComposerContent(composer.input), {
+      emitUpdate: false
+    });
+  }, [composer, editor]);
   return renderPrimitive(
-    "textarea",
+    "div",
     {
       ...props,
-      "aria-label": props["aria-label"] ?? "Message",
-      disabled: props.disabled ?? composer.status === "streaming",
-      onChange: handleChange,
+      children: /* @__PURE__ */ jsx(EditorContent, { editor }),
+      "aria-disabled": composerDisabled ? true : props["aria-disabled"],
+      "data-anvia-composer-input": "",
+      "data-state": composerDisabled ? "disabled" : "enabled",
+      "data-auto-resize": autoResize ? "" : void 0,
       onKeyDown: handleKeyDown,
-      rows: autoResize ? minRows : rows,
-      value: composer.input,
-      "data-anvia-composer-input": ""
+      style: inputStyle
     },
-    composedInputRef
+    ref
   );
 });
+var ComposerTextareaInput = forwardRef(
+  function ComposerTextareaInput2({
+    autoResize = true,
+    maxRows: maxRowsProp,
+    minRows: minRowsProp,
+    onChange,
+    onKeyDown,
+    rows,
+    ...props
+  }, ref) {
+    const composer = useComposer();
+    const inputRef = useRef(null);
+    const wasAutoResizeRef = useRef(autoResize);
+    const composedInputRef = useMemo(() => composeRefs(inputRef, ref), [ref]);
+    const minRows = normalizeRows(minRowsProp ?? rows ?? 1, 1);
+    const maxRows = normalizeRows(maxRowsProp ?? 6, minRows);
+    useEffect(() => {
+      const wasAutoResize = wasAutoResizeRef.current;
+      wasAutoResizeRef.current = autoResize;
+      if (!autoResize) {
+        if (wasAutoResize) {
+          resetComposerInputSize(inputRef.current);
+        }
+        return;
+      }
+      resizeComposerInput(inputRef.current, { maxRows, minRows });
+    });
+    const handleChange = useCallback(
+      (event) => {
+        onChange?.(event);
+        if (!event.defaultPrevented) {
+          composer.setInput(event.currentTarget.value);
+          composer.setEntities([]);
+          if (autoResize) {
+            resizeComposerInput(event.currentTarget, { maxRows, minRows });
+          }
+        }
+      },
+      [autoResize, composer, maxRows, minRows, onChange]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) {
+          return;
+        }
+        event.preventDefault();
+        void composer.submit();
+      },
+      [composer, onKeyDown]
+    );
+    return renderPrimitive(
+      "textarea",
+      {
+        ...props,
+        "aria-label": props["aria-label"] ?? "Message",
+        disabled: props.disabled ?? composer.status === "streaming",
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        rows: autoResize ? minRows : rows,
+        value: composer.input,
+        "data-anvia-composer-input": "",
+        "data-anvia-composer-textarea-input": ""
+      },
+      composedInputRef
+    );
+  }
+);
+var COMPOSER_ENTITY_NODE = "composerEntity";
+var EMPTY_COMPOSER_TRIGGERS = [];
+var ComposerEntityExtension = Mention.extend({
+  name: COMPOSER_ENTITY_NODE,
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-id"),
+        renderHTML: (attributes) => attributes.id === void 0 || attributes.id === null ? {} : { "data-id": String(attributes.id) }
+      },
+      label: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-label"),
+        renderHTML: (attributes) => attributes.label === void 0 || attributes.label === null ? {} : { "data-label": String(attributes.label) }
+      },
+      mentionSuggestionChar: {
+        default: "@",
+        parseHTML: (element) => element.getAttribute("data-mention-suggestion-char"),
+        renderHTML: (attributes) => ({
+          "data-mention-suggestion-char": attributes.mentionSuggestionChar
+        })
+      },
+      triggerId: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-trigger-id"),
+        renderHTML: (attributes) => attributes.triggerId === void 0 || attributes.triggerId === null ? {} : { "data-trigger-id": String(attributes.triggerId) }
+      },
+      text: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-text"),
+        renderHTML: (attributes) => attributes.text === void 0 || attributes.text === null ? {} : { "data-text": String(attributes.text) }
+      },
+      data: {
+        default: null,
+        parseHTML: (element) => dataFromAttribute(element.getAttribute("data-entity-data")),
+        renderHTML: (attributes) => attributes.data === void 0 || attributes.data === null ? {} : { "data-entity-data": JSON.stringify(attributes.data) }
+      }
+    };
+  }
+});
+function composerInputExtensions({
+  composerRef,
+  placeholder,
+  triggers
+}) {
+  return [
+    Document,
+    Paragraph,
+    Text,
+    HardBreak,
+    Placeholder.configure(placeholder === void 0 ? {} : { placeholder }),
+    ComposerEntityExtension.configure({
+      HTMLAttributes: {
+        "data-anvia-composer-entity": ""
+      },
+      deleteTriggerWithBackspace: true,
+      renderText: ({ node }) => composerEntityText(node.attrs),
+      renderHTML: ({ node, options }) => [
+        "span",
+        mergeAttributes(options.HTMLAttributes, {
+          "data-anvia-composer-entity": ""
+        }),
+        composerEntityText(node.attrs)
+      ],
+      suggestions: triggers.map((trigger) => composerSuggestion(trigger, composerRef))
+    })
+  ];
+}
+function submitComposerFromEditorKeyDown(event, composerRef) {
+  if (event.defaultPrevented || event.key !== "Enter" || event.shiftKey || event.isComposing || composerRef.current.activeTrigger !== void 0) {
+    return false;
+  }
+  event.preventDefault();
+  void composerRef.current.submit();
+  return true;
+}
+function composerSuggestion(trigger, composerRef) {
+  const pluginKey = new PluginKey(`anvia-composer-trigger-${trigger.id}`);
+  return {
+    pluginKey,
+    char: trigger.char,
+    ...trigger.allowSpaces === void 0 ? {} : { allowSpaces: trigger.allowSpaces },
+    ...trigger.allowedPrefixes === void 0 ? {} : { allowedPrefixes: trigger.allowedPrefixes },
+    ...trigger.startOfLine === void 0 ? {} : { startOfLine: trigger.startOfLine },
+    ...trigger.minQueryLength === void 0 ? {} : { minQueryLength: trigger.minQueryLength },
+    items: ({ query, signal }) => resolveTriggerItems(trigger, query, composerRef.current, signal),
+    command: ({
+      editor,
+      range,
+      props
+    }) => {
+      const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+      const overrideSpace = nodeAfter?.text?.startsWith(" ");
+      const insertRange = {
+        from: range.from,
+        to: overrideSpace ? range.to + 1 : range.to
+      };
+      editor.chain().focus().insertContentAt(insertRange, [
+        {
+          type: COMPOSER_ENTITY_NODE,
+          attrs: props
+        },
+        {
+          type: "text",
+          text: " "
+        }
+      ]).run();
+      editor.view.dom.ownerDocument.defaultView?.getSelection()?.collapseToEnd();
+      composerRef.current.setActiveTrigger(void 0);
+    },
+    render: () => ({
+      onStart: (props) => {
+        updateComposerTriggerState(trigger, props, composerRef);
+      },
+      onUpdate: (props) => {
+        updateComposerTriggerState(trigger, props, composerRef);
+      },
+      onExit: () => {
+        composerRef.current.setActiveTrigger(
+          (current) => current?.trigger.id === trigger.id ? void 0 : current
+        );
+      },
+      onKeyDown: (props) => handleComposerTriggerKeyDown(trigger, props, composerRef)
+    })
+  };
+}
+function resolveTriggerItems(trigger, query, composer, signal) {
+  if (Array.isArray(trigger.items)) {
+    const normalizedQuery = query.toLowerCase();
+    return trigger.items.filter((item) => item.label.toLowerCase().includes(normalizedQuery));
+  }
+  return trigger.items({
+    trigger,
+    query,
+    input: composer.input,
+    entities: composer.entities,
+    signal
+  });
+}
+function updateComposerTriggerState(trigger, props, composerRef) {
+  const current = composerRef.current.activeTrigger;
+  const selectedIndex = current?.trigger.id === trigger.id ? clampIndex(current.selectedIndex, props.items.length) : 0;
+  const rect = rectFromSuggestion(props);
+  composerRef.current.setActiveTrigger({
+    trigger,
+    query: props.query,
+    items: props.items,
+    loading: props.loading,
+    selectedIndex,
+    ...rect === void 0 ? {} : { rect },
+    selectItem: (item) => {
+      if (item.disabled) {
+        return;
+      }
+      props.command(triggerItemToEntityAttrs(trigger, item));
+    },
+    setSelectedIndex: (index) => {
+      composerRef.current.setActiveTrigger(
+        (active) => active?.trigger.id === trigger.id ? { ...active, selectedIndex: clampIndex(index, active.items.length) } : active
+      );
+    }
+  });
+}
+function handleComposerTriggerKeyDown(trigger, { event }, composerRef) {
+  const activeTrigger = composerRef.current.activeTrigger;
+  if (activeTrigger?.trigger.id !== trigger.id) {
+    return false;
+  }
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    activeTrigger.setSelectedIndex(activeTrigger.selectedIndex + 1);
+    return true;
+  }
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    activeTrigger.setSelectedIndex(activeTrigger.selectedIndex - 1);
+    return true;
+  }
+  if (event.key === "Enter" || event.key === "Tab") {
+    event.preventDefault();
+    const item = activeTrigger.items[activeTrigger.selectedIndex];
+    if (item !== void 0) {
+      activeTrigger.selectItem(item);
+    }
+    return true;
+  }
+  if (event.key === "Escape") {
+    composerRef.current.setActiveTrigger(void 0);
+    return false;
+  }
+  return false;
+}
+function triggerItemToEntityAttrs(trigger, item) {
+  return {
+    id: item.id,
+    label: item.label,
+    mentionSuggestionChar: trigger.char,
+    triggerId: trigger.id,
+    text: triggerItemText(trigger, item),
+    data: item.data
+  };
+}
+function triggerItemText(trigger, item) {
+  return item.text ?? `${trigger.char}${item.label}`;
+}
+function rectFromSuggestion(props) {
+  const rect = props.clientRect?.();
+  if (rect === void 0 || rect === null) {
+    return void 0;
+  }
+  return {
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function clampIndex(index, length) {
+  if (length <= 0) {
+    return 0;
+  }
+  return (index + length) % length;
+}
+function plainTextToComposerContent(input) {
+  const lines = input.length === 0 ? [""] : input.split(/\r?\n/);
+  return {
+    type: "doc",
+    content: lines.map((line) => ({
+      type: "paragraph",
+      ...line.length === 0 ? {} : {
+        content: [
+          {
+            type: "text",
+            text: line
+          }
+        ]
+      }
+    }))
+  };
+}
+function composerSnapshotFromEditor(editor, previousEntities, triggers) {
+  return composerSnapshotFromContent(editor.getJSON(), previousEntities, triggers);
+}
+function composerSnapshotFromContent(content, previousEntities, triggers) {
+  const entities = [];
+  let input = "";
+  let blockIndex = 0;
+  const appendNode = (node) => {
+    if (node.type === "doc") {
+      for (const child of node.content ?? []) {
+        appendNode(child);
+      }
+      return;
+    }
+    if (node.type === "paragraph") {
+      if (blockIndex > 0) {
+        input += "\n";
+      }
+      blockIndex += 1;
+      for (const child of node.content ?? []) {
+        appendNode(child);
+      }
+      return;
+    }
+    if (node.type === "text") {
+      input += node.text ?? "";
+      return;
+    }
+    if (node.type === "hardBreak") {
+      input += "\n";
+      return;
+    }
+    if (node.type === COMPOSER_ENTITY_NODE) {
+      const attrs = node.attrs;
+      const entity = composerEntityFromAttrs(attrs, input.length, previousEntities, triggers);
+      input += entity.text;
+      entities.push(entity);
+      return;
+    }
+    for (const child of node.content ?? []) {
+      appendNode(child);
+    }
+  };
+  appendNode(content);
+  return { input, entities };
+}
+function composerEntityFromAttrs(attrs, from, previousEntities, triggers) {
+  const id = stringAttr(attrs?.id) ?? "";
+  const trigger = stringAttr(attrs?.mentionSuggestionChar) ?? "@";
+  const triggerId = stringAttr(attrs?.triggerId) ?? triggers.find((candidate) => candidate.char === trigger)?.id ?? trigger;
+  const label = stringAttr(attrs?.label) ?? id;
+  const text = composerEntityText(attrs);
+  const previous = previousEntities.find(
+    (entity) => entity.id === id && entity.triggerId === triggerId && entity.trigger === trigger
+  );
+  const data = attrs?.data ?? previous?.data;
+  return {
+    id,
+    triggerId,
+    trigger,
+    label,
+    text,
+    range: {
+      from,
+      to: from + text.length
+    },
+    ...data === void 0 ? {} : { data }
+  };
+}
+function composerEntityText(attrs) {
+  const text = stringAttr(attrs?.text);
+  if (text !== void 0) {
+    return text;
+  }
+  const trigger = stringAttr(attrs?.mentionSuggestionChar) ?? "@";
+  return `${trigger}${stringAttr(attrs?.label) ?? stringAttr(attrs?.id) ?? ""}`;
+}
+function stringAttr(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function dataFromAttribute(value) {
+  if (value === null) {
+    return null;
+  }
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
 function resizeComposerInput(input, { maxRows, minRows }) {
   if (input === null) {
     return;
@@ -384,6 +912,19 @@ function normalizeQuote(quote) {
     messageId: quote.messageId
   };
 }
+function composerSubmitMetadata(quote, entities) {
+  if (quote === void 0 && entities.length === 0) {
+    return void 0;
+  }
+  return {
+    ...quote === void 0 ? {} : { quote },
+    ...entities.length === 0 ? {} : {
+      composer: {
+        entities
+      }
+    }
+  };
+}
 var ComposerSubmit = forwardRef(
   function ComposerSubmit2(props, ref) {
     const composer = useComposer();
@@ -429,6 +970,84 @@ var ComposerStop = forwardRef(function ComposerStop2({ onClick, ...props }, ref)
     ref
   );
 });
+var ComposerTriggerMenu = forwardRef(
+  function ComposerTriggerMenu2({ children, keepMounted = false, style, ...props }, ref) {
+    const composer = useComposer();
+    const activeTrigger = composer.activeTrigger;
+    const empty = activeTrigger === void 0;
+    if (empty && !keepMounted) {
+      return null;
+    }
+    const menuStyle = activeTrigger?.rect === void 0 ? style : {
+      position: "fixed",
+      top: activeTrigger.rect.bottom,
+      left: activeTrigger.rect.left,
+      ...style
+    };
+    const renderedChildren = activeTrigger === void 0 ? typeof children === "function" ? null : children : typeof children === "function" ? children(activeTrigger) : children ?? activeTrigger.items.map((item, index) => /* @__PURE__ */ jsx(ComposerTriggerItem, { index }, `${item.id}:${index.toString()}`));
+    return renderPrimitive(
+      "div",
+      {
+        ...props,
+        children: renderedChildren,
+        role: props.role ?? "listbox",
+        style: menuStyle,
+        "data-anvia-composer-trigger-menu": "",
+        "data-empty": empty ? "" : void 0,
+        "data-loading": activeTrigger?.loading ? "" : void 0,
+        "data-trigger": activeTrigger?.trigger.char,
+        "data-trigger-id": activeTrigger?.trigger.id
+      },
+      ref
+    );
+  }
+);
+var ComposerTriggerItem = forwardRef(
+  function ComposerTriggerItem2({ children, index, item: itemProp, onClick, onMouseEnter, ...props }, ref) {
+    const composer = useComposer();
+    const activeTrigger = composer.activeTrigger;
+    const itemIndex = index ?? 0;
+    const item = itemProp ?? activeTrigger?.items[itemIndex];
+    if (activeTrigger === void 0 || item === void 0) {
+      return null;
+    }
+    const selected = activeTrigger.selectedIndex === itemIndex;
+    const disabled = props.disabled ?? item.disabled ?? false;
+    const renderedChildren = typeof children === "function" ? children(item, activeTrigger) : children ?? item.label;
+    const handleMouseEnter = (event) => {
+      onMouseEnter?.(event);
+      if (!event.defaultPrevented && !disabled) {
+        activeTrigger.setSelectedIndex(itemIndex);
+      }
+    };
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented && !disabled) {
+        activeTrigger.selectItem(item);
+      }
+    };
+    return renderPrimitive(
+      "button",
+      {
+        ...props,
+        children: renderedChildren,
+        disabled,
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        role: props.role ?? "option",
+        type: props.type ?? "button",
+        "aria-selected": selected,
+        "data-anvia-composer-trigger-item": "",
+        "data-disabled": disabled ? "" : void 0,
+        "data-item-id": item.id,
+        "data-selected": selected ? "" : void 0,
+        "data-trigger": activeTrigger.trigger.char,
+        "data-trigger-id": activeTrigger.trigger.id
+      },
+      ref
+    );
+  }
+);
 var ComposerAttachments = forwardRef(
   function ComposerAttachments2({ children, keepMounted = false, ...props }, ref) {
     const composer = useComposer();
@@ -635,6 +1254,9 @@ var Composer = {
   Quote: ComposerQuotePreview,
   ClearQuote: ComposerClearQuote,
   Input: ComposerInput,
+  TextareaInput: ComposerTextareaInput,
+  TriggerMenu: ComposerTriggerMenu,
+  TriggerItem: ComposerTriggerItem,
   Attachments: ComposerAttachments,
   AddAttachment: ComposerAddAttachment,
   AttachmentInput: ComposerAttachmentInput,
@@ -924,4 +1546,4 @@ export {
   Composer,
   Thread
 };
-//# sourceMappingURL=chunk-LRAQW3ZK.js.map
+//# sourceMappingURL=chunk-KO36TK2O.js.map