@anvia/react-ui 0.7.1 → 1.0.0-rc.10

package/dist/{chunk-FABSIZZ7.js → chunk-HWJIMLHC.js}

@@ -1,10 +1,11 @@
 import {
-  Message,
+  MessagePrimitive,
+  isComposerEntityData,
   shiftComposerEntityRanges
-} from "./chunk-JWZDNM5D.js";
+} from "./chunk-CRXNFZRW.js";
 import {
-  Attachment
-} from "./chunk-SBYUKODG.js";
+  AttachmentPrimitive
+} from "./chunk-MISX4WUT.js";
 import {
   composeRefs,
   renderPrimitive
@@ -17,7 +18,7 @@ import {
   useChatContext,
   useComposer,
   useThread
-} from "./chunk-43U2XQP2.js";
+} from "./chunk-SOG2GVE4.js";
 
 // src/chat/composer.tsx
 import { mergeAttributes } from "@tiptap/core";
@@ -89,8 +90,9 @@ var ComposerRoot = forwardRef(function ComposerRoot2({
   const entitiesControlled = entitiesProp !== void 0;
   const quoteControlled = quoteProp !== 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 active = chat.status === "submitted" || chat.status === "streaming";
+  const canSubmit = hasMessageContent && !active;
+  const canStop = active;
   const setInput = useCallback(
     (nextInput) => {
       if (!inputControlled) {
@@ -160,9 +162,10 @@ var ComposerRoot = forwardRef(function ComposerRoot2({
   }, [clearQuote, setAttachments, setEntities, setInput]);
   const submit = useCallback(async () => {
     const prompt = input;
-    if (prompt.trim().length === 0 && attachments.length === 0 && entities.length === 0 && quote === void 0 || chat.status === "streaming") {
+    if (prompt.trim().length === 0 && attachments.length === 0 && entities.length === 0 && quote === void 0 || chat.status === "submitted" || chat.status === "streaming") {
       return;
     }
+    assertComposerEntitiesData(entities);
     if (submitMessage !== void 0) {
       await submitMessage({
         input: prompt,
@@ -188,7 +191,7 @@ var ComposerRoot = forwardRef(function ComposerRoot2({
     const metadata = composerSubmitMetadata(submittedQuote, submittedEntities);
     let payload;
     if (submittedAttachments.length === 0) {
-      payload = metadata === void 0 ? prompt : { text: submittedText, metadata };
+      payload = metadata === void 0 ? { text: submittedText } : { text: submittedText, metadata };
     } else {
       const attachmentPayload = {
         text: submittedText,
@@ -271,7 +274,6 @@ var ComposerRoot = forwardRef(function ComposerRoot2({
     {
       ...props,
       onSubmit: handleSubmit,
-      "data-anvia-composer": "",
       "data-state": chat.status
     },
     ref
@@ -289,9 +291,7 @@ var ComposerQuotePreview = forwardRef(
       "blockquote",
       {
         ...props,
-        children: renderedChildren,
-        "data-anvia-composer-quote": "",
-        "data-message-id": quote.messageId
+        children: renderedChildren
       },
       ref
     );
@@ -319,7 +319,6 @@ var ComposerClearQuote = forwardRef(
         disabled,
         onClick: handleClick,
         type: props.type ?? "button",
-        "data-anvia-clear-quote": "",
         "data-state": disabled ? "disabled" : "enabled"
       },
       ref
@@ -356,12 +355,11 @@ var ComposerInput = forwardRef(function ComposerInput2({
     {
       extensions,
       content: plainTextToComposerContent(composer.input),
-      editable: composer.status !== "streaming",
+      editable: composer.status !== "submitted" && composer.status !== "streaming",
       editorProps: {
         attributes: {
           "aria-label": props["aria-label"] ?? "Message",
           "aria-multiline": "true",
-          "data-anvia-composer-editor": "",
           role: "textbox"
         },
         handleKeyDown: (_view, event) => submitComposerFromEditorKeyDown(event, composerRef)
@@ -383,7 +381,7 @@ var ComposerInput = forwardRef(function ComposerInput2({
     [extensions]
   );
   const ariaDisabled = props["aria-disabled"] === true || props["aria-disabled"] === "true";
-  const composerDisabled = disabled === true || ariaDisabled || composer.status === "streaming";
+  const composerDisabled = disabled === true || ariaDisabled || composer.status === "submitted" || composer.status === "streaming";
   const inputStyle = useMemo(() => {
     if (!autoResize) {
       return style;
@@ -445,9 +443,8 @@ var ComposerInput = forwardRef(function ComposerInput2({
       ...props,
       children: /* @__PURE__ */ jsx(EditorContent, { editor }),
       "aria-disabled": composerDisabled ? true : props["aria-disabled"],
-      "data-anvia-composer-input": "",
+      "data-role": "editor",
       "data-state": composerDisabled ? "disabled" : "enabled",
-      "data-auto-resize": autoResize ? "" : void 0,
       onKeyDown: handleKeyDown,
       style: inputStyle
     },
@@ -510,13 +507,11 @@ var ComposerTextareaInput = forwardRef(
       {
         ...props,
         "aria-label": props["aria-label"] ?? "Message",
-        disabled: props.disabled ?? composer.status === "streaming",
+        disabled: props.disabled ?? (composer.status === "submitted" || composer.status === "streaming"),
         onChange: handleChange,
         onKeyDown: handleKeyDown,
         rows: autoResize ? minRows : rows,
-        value: composer.input,
-        "data-anvia-composer-input": "",
-        "data-anvia-composer-textarea-input": ""
+        value: composer.input
       },
       composedInputRef
     );
@@ -556,9 +551,15 @@ var ComposerEntityExtension = Mention.extend({
         renderHTML: (attributes) => attributes.text === void 0 || attributes.text === null ? {} : { "data-text": String(attributes.text) }
       },
       data: {
-        default: null,
+        default: void 0,
         parseHTML: (element) => dataFromAttribute(element.getAttribute("data-entity-data")),
-        renderHTML: (attributes) => attributes.data === void 0 || attributes.data === null ? {} : { "data-entity-data": JSON.stringify(attributes.data) }
+        renderHTML: (attributes) => {
+          if (attributes.data === void 0) return {};
+          if (!isComposerEntityData(attributes.data)) {
+            throw new TypeError("Composer entity data must be a JSON value.");
+          }
+          return { "data-entity-data": JSON.stringify(attributes.data) };
+        }
       }
     };
   }
@@ -575,16 +576,12 @@ function composerInputExtensions({
     HardBreak,
     Placeholder.configure(placeholder === void 0 ? {} : { placeholder }),
     ComposerEntityExtension.configure({
-      HTMLAttributes: {
-        "data-anvia-composer-entity": ""
-      },
+      HTMLAttributes: {},
       deleteTriggerWithBackspace: true,
       renderText: ({ node }) => composerEntityText(node.attrs),
       renderHTML: ({ node, options }) => [
         "span",
-        mergeAttributes(options.HTMLAttributes, {
-          "data-anvia-composer-entity": ""
-        }),
+        mergeAttributes(options.HTMLAttributes, {}),
         composerEntityText(node.attrs)
       ],
       suggestions: triggers.map((trigger) => composerSuggestion(trigger, composerRef))
@@ -729,6 +726,9 @@ function handleComposerTriggerKeyDown(trigger, { event }, composerRef) {
   return false;
 }
 function triggerItemToEntityAttrs(trigger, item) {
+  if (item.data !== void 0 && !isComposerEntityData(item.data)) {
+    throw new TypeError("Composer trigger item data must be a JSON value.");
+  }
   return {
     id: item.id,
     label: item.label,
@@ -829,7 +829,7 @@ function composerEntityFromAttrs(attrs, from, previousEntities, triggers) {
   const previous = previousEntities.find(
     (entity2) => entity2.id === id && entity2.triggerId === triggerId && entity2.trigger === trigger
   );
-  const data = attrs?.data ?? previous?.data;
+  const data = attrs?.data === void 0 ? previous?.data : attrs.data;
   const entity = {
     id,
     triggerId,
@@ -857,12 +857,13 @@ function stringAttr(value) {
 }
 function dataFromAttribute(value) {
   if (value === null) {
-    return null;
+    return void 0;
   }
   try {
-    return JSON.parse(value);
+    const parsed = JSON.parse(value);
+    return isComposerEntityData(parsed) ? parsed : void 0;
   } catch {
-    return null;
+    return void 0;
   }
 }
 function resizeComposerInput(input, { maxRows, minRows }) {
@@ -930,7 +931,30 @@ function composerSubmitMetadata(quote, entities) {
   }
   const metadata = {};
   if (quote !== void 0) metadata.quote = quote;
-  if (entities.length > 0) metadata.composer = { entities };
+  if (entities.length > 0) {
+    metadata.composer = { entities: entities.map(composerEntityMetadata) };
+  }
+  return metadata;
+}
+function assertComposerEntitiesData(entities) {
+  for (const entity of entities) {
+    if (entity.data !== void 0 && !isComposerEntityData(entity.data)) {
+      throw new TypeError("Composer entity data must be a JSON value.");
+    }
+  }
+}
+function composerEntityMetadata(entity) {
+  const metadata = {
+    id: entity.id,
+    triggerId: entity.triggerId,
+    trigger: entity.trigger,
+    label: entity.label,
+    text: entity.text,
+    range: { from: entity.range.from, to: entity.range.to }
+  };
+  if (entity.data !== void 0) {
+    metadata.data = entity.data;
+  }
   return metadata;
 }
 var ComposerSubmit = forwardRef(
@@ -944,7 +968,6 @@ var ComposerSubmit = forwardRef(
         children: props.children ?? "Send",
         disabled,
         type: props.type ?? "submit",
-        "data-anvia-submit": "",
         "data-state": disabled ? "disabled" : "enabled"
       },
       ref
@@ -972,7 +995,6 @@ var ComposerStop = forwardRef(function ComposerStop2({ onClick, ...props }, ref)
       disabled,
       onClick: handleClick,
       type: props.type ?? "button",
-      "data-anvia-stop": "",
       "data-state": disabled ? "disabled" : "enabled"
     },
     ref
@@ -1000,11 +1022,7 @@ var ComposerTriggerMenu = forwardRef(
         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
+        "data-state": activeTrigger === void 0 ? "closed" : activeTrigger.loading ? "loading" : empty ? "empty" : "open"
       },
       ref
     );
@@ -1045,12 +1063,7 @@ var ComposerTriggerItem = forwardRef(
         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
+        "data-state": disabled ? "disabled" : selected ? "selected" : "idle"
       },
       ref
     );
@@ -1076,12 +1089,12 @@ var ComposerAttachments = forwardRef(
                 composer.removeAttachment(attachment.id);
               }
             },
-            children: typeof children === "function" ? children(attachment) : children ?? /* @__PURE__ */ jsx(Attachment.Root, {})
+            children: typeof children === "function" ? children(attachment) : children ?? /* @__PURE__ */ jsx(AttachmentPrimitive.Root, {})
           },
           attachment.id
         )),
-        "data-anvia-composer-attachments": "",
-        "data-empty": empty ? "" : void 0
+        "data-role": "attachments",
+        "data-state": empty ? "empty" : "populated"
       },
       ref
     );
@@ -1090,7 +1103,7 @@ var ComposerAttachments = forwardRef(
 var ComposerAttachmentInput = forwardRef(
   function ComposerAttachmentInput2({ onChange, ...props }, ref) {
     const composer = useComposer();
-    const disabled = props.disabled ?? composer.status === "streaming";
+    const disabled = props.disabled ?? (composer.status === "submitted" || composer.status === "streaming");
     const handleChange = useCallback(
       async (event) => {
         onChange?.(event);
@@ -1114,7 +1127,6 @@ var ComposerAttachmentInput = forwardRef(
           void handleChange(event);
         },
         type: "file",
-        "data-anvia-attachment-input": "",
         "data-state": disabled ? "disabled" : "enabled"
       },
       ref
@@ -1125,7 +1137,7 @@ var ComposerAddAttachment = forwardRef(
   function ComposerAddAttachment2({ accept, multiple = false, onClick, ...props }, ref) {
     const composer = useComposer();
     const inputRef = useRef(null);
-    const disabled = props.disabled ?? composer.status === "streaming";
+    const disabled = props.disabled ?? (composer.status === "submitted" || composer.status === "streaming");
     const handleClick = useCallback(
       (event) => {
         onClick?.(event);
@@ -1145,7 +1157,6 @@ var ComposerAddAttachment = forwardRef(
           disabled,
           onClick: handleClick,
           type: props.type ?? "button",
-          "data-anvia-add-attachment": "",
           "data-state": disabled ? "disabled" : "enabled"
         },
         ref
@@ -1168,7 +1179,7 @@ var ComposerAttachmentDropzone = forwardRef(
   function ComposerAttachmentDropzone2({ disabled: disabledProp = false, onDragLeave, onDragOver, onDrop, ...props }, ref) {
     const composer = useComposer();
     const [dragging, setDragging] = useState(false);
-    const disabled = disabledProp || composer.status === "streaming";
+    const disabled = disabledProp || composer.status === "submitted" || composer.status === "streaming";
     const handleDragOver = useCallback(
       (event) => {
         onDragOver?.(event);
@@ -1209,9 +1220,7 @@ var ComposerAttachmentDropzone = forwardRef(
         onDragLeave: handleDragLeave,
         onDragOver: handleDragOver,
         onDrop: handleDrop,
-        "data-anvia-attachment-dropzone": "",
-        "data-dragging": dragging ? "" : void 0,
-        "data-state": disabled ? "disabled" : "enabled"
+        "data-state": disabled ? "disabled" : dragging ? "dragging" : "enabled"
       },
       ref
     );
@@ -1257,7 +1266,7 @@ function createAttachmentId() {
   nextAttachmentId += 1;
   return `attachment_${nextAttachmentId.toString(36)}`;
 }
-var Composer = {
+var ComposerPrimitive = {
   Root: ComposerRoot,
   Quote: ComposerQuotePreview,
   ClearQuote: ComposerClearQuote,
@@ -1288,6 +1297,7 @@ var ThreadRoot = forwardRef2(
   function ThreadRoot2(props, ref) {
     const chat = useChatContext();
     const viewportRef = useRef2(null);
+    const messagesRef = useRef2(null);
     const [atBottom, setAtBottom] = useState2(true);
     const scrollToBottom = useCallback2((behavior = "smooth") => {
       const viewport = viewportRef.current;
@@ -1297,14 +1307,13 @@ var ThreadRoot = forwardRef2(
       viewport.scrollTo({ top: viewport.scrollHeight, behavior });
     }, []);
     const thread = useMemo2(
-      () => ({ viewportRef, atBottom, setAtBottom, scrollToBottom }),
+      () => ({ viewportRef, messagesRef, atBottom, setAtBottom, scrollToBottom }),
       [atBottom, scrollToBottom]
     );
     return /* @__PURE__ */ jsx2(InternalThreadProvider, { value: thread, children: renderPrimitive(
       "div",
       {
         ...props,
-        "data-anvia-thread": "",
         "data-state": chat.status
       },
       ref
@@ -1332,7 +1341,7 @@ var ThreadViewport = forwardRef2(function ThreadViewport2({ autoScroll = true, o
     if (viewport === null || !autoScroll || typeof ResizeObserver !== "function") {
       return;
     }
-    const content = viewport.querySelector("[data-anvia-thread-messages]");
+    const content = thread.messagesRef.current;
     if (content === null) {
       return;
     }
@@ -1359,7 +1368,6 @@ var ThreadViewport = forwardRef2(function ThreadViewport2({ autoScroll = true, o
     {
       ...props,
       onScroll: handleScroll,
-      "data-anvia-thread-viewport": "",
       "data-state": thread.atBottom ? "bottom" : "away"
     },
     composedRef
@@ -1370,8 +1378,7 @@ var ThreadViewportFooter = forwardRef2(
     return renderPrimitive(
       "div",
       {
-        ...props,
-        "data-anvia-thread-viewport-footer": ""
+        ...props
       },
       ref
     );
@@ -1386,8 +1393,7 @@ var ThreadEmpty = forwardRef2(
     return renderPrimitive(
       "div",
       {
-        ...props,
-        "data-anvia-thread-empty": ""
+        ...props
       },
       ref
     );
@@ -1401,7 +1407,6 @@ var ThreadStatus = forwardRef2(function ThreadStatus2({ children, ...props }, re
     {
       ...props,
       children: renderedChildren ?? chat.status,
-      "data-anvia-thread-status": "",
       "data-state": chat.status
     },
     ref
@@ -1410,15 +1415,14 @@ var ThreadStatus = forwardRef2(function ThreadStatus2({ children, ...props }, re
 var ThreadLoading = forwardRef2(
   function ThreadLoading2(props, ref) {
     const chat = useChatContext();
-    if (chat.status !== "streaming") {
+    if (chat.status !== "submitted" && chat.status !== "streaming") {
       return null;
     }
     return renderPrimitive(
       "div",
       {
         ...props,
-        children: props.children ?? "Loading",
-        "data-anvia-thread-loading": ""
+        children: props.children ?? "Loading"
       },
       ref
     );
@@ -1435,7 +1439,6 @@ var ThreadError = forwardRef2(function ThreadError2({ children, ...props }, ref)
     {
       ...props,
       children: renderedChildren ?? errorMessage(chat.error),
-      "data-anvia-thread-error": "",
       role: props.role ?? "alert"
     },
     ref
@@ -1443,6 +1446,13 @@ var ThreadError = forwardRef2(function ThreadError2({ children, ...props }, ref)
 });
 var ThreadMessages = forwardRef2(function ThreadMessages2({ children, keepMounted = true, ...props }, ref) {
   const chat = useChatContext();
+  const thread = useThread();
+  const composedRef = useMemo2(
+    () => composeRefs(ref, (node) => {
+      thread.messagesRef.current = node;
+    }),
+    [ref, thread.messagesRef]
+  );
   const empty = chat.messages.length === 0;
   if (empty && !keepMounted) {
     return null;
@@ -1452,10 +1462,9 @@ var ThreadMessages = forwardRef2(function ThreadMessages2({ children, keepMounte
     {
       ...props,
       children: chat.messages.map((message) => /* @__PURE__ */ jsx2(InternalMessageProvider, { message, children: typeof children === "function" ? children(message) : children ?? defaultMessage() }, message.id)),
-      "data-anvia-thread-messages": "",
-      "data-empty": empty ? "" : void 0
+      "data-state": empty ? "empty" : "populated"
     },
-    ref
+    composedRef
   );
 });
 var ThreadSuggestions = forwardRef2(
@@ -1473,8 +1482,8 @@ var ThreadSuggestions = forwardRef2(
         children: suggestions.map(
           (suggestion) => typeof children === "function" ? /* @__PURE__ */ jsx2(Fragment2, { children: children(suggestion) }, suggestion.id) : /* @__PURE__ */ jsx2(ThreadSuggestion, { suggestion, children }, suggestion.id)
         ),
-        "data-anvia-thread-suggestions": "",
-        "data-empty": empty ? "" : void 0
+        "data-role": "suggestions",
+        "data-state": empty ? "empty" : "populated"
       },
       ref
     );
@@ -1484,14 +1493,14 @@ var ThreadSuggestion = forwardRef2(
   function ThreadSuggestion2({ onClick, prompt, suggestion, ...props }, ref) {
     const chat = useChatContext();
     const suggestionPrompt = prompt ?? suggestion?.prompt ?? "";
-    const disabled = props.disabled ?? (suggestionPrompt.length === 0 || chat.status === "streaming");
+    const disabled = props.disabled ?? (suggestionPrompt.length === 0 || chat.status === "submitted" || chat.status === "streaming");
     const handleClick = useCallback2(
       (event) => {
         onClick?.(event);
         if (event.defaultPrevented || disabled) {
           return;
         }
-        void chat.sendMessage(suggestionPrompt);
+        void chat.sendMessage({ text: suggestionPrompt });
       },
       [chat, disabled, onClick, suggestionPrompt]
     );
@@ -1503,7 +1512,6 @@ var ThreadSuggestion = forwardRef2(
         disabled,
         onClick: handleClick,
         type: props.type ?? "button",
-        "data-anvia-thread-suggestion": "",
         "data-state": disabled ? "disabled" : "enabled"
       },
       ref
@@ -1532,7 +1540,6 @@ var ThreadScrollToBottom = forwardRef2(
         disabled,
         onClick: handleClick,
         type: props.type ?? "button",
-        "data-anvia-scroll-to-bottom": "",
         "data-state": thread.atBottom ? "bottom" : "away"
       },
       ref
@@ -1540,9 +1547,9 @@ var ThreadScrollToBottom = forwardRef2(
   }
 );
 function defaultMessage() {
-  return /* @__PURE__ */ jsxs2(Message.Root, { children: [
-    /* @__PURE__ */ jsx2(Message.Content, { children: /* @__PURE__ */ jsx2(Message.Parts, {}) }),
-    /* @__PURE__ */ jsx2(Message.Actions, {})
+  return /* @__PURE__ */ jsxs2(MessagePrimitive.Root, { children: [
+    /* @__PURE__ */ jsx2(MessagePrimitive.Content, { children: /* @__PURE__ */ jsx2(MessagePrimitive.Parts, {}) }),
+    /* @__PURE__ */ jsx2(MessagePrimitive.Actions, {})
   ] });
 }
 function errorMessage(error) {
@@ -1554,7 +1561,7 @@ function errorMessage(error) {
   }
   return "Something went wrong.";
 }
-var Thread = {
+var ThreadPrimitive = {
   Root: ThreadRoot,
   Viewport: ThreadViewport,
   ViewportFooter: ThreadViewportFooter,
@@ -1569,7 +1576,7 @@ var Thread = {
 };
 
 export {
-  Composer,
-  Thread
+  ComposerPrimitive,
+  ThreadPrimitive
 };
-//# sourceMappingURL=chunk-FABSIZZ7.js.map
+//# sourceMappingURL=chunk-HWJIMLHC.js.map