@liveblocks/react-ui 2.24.1 → 2.25.0-aiprivatebeta1

package/dist/primitives/Chat/Composer/index.js

@@ -0,0 +1,315 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { nanoid, kInternal, HttpError } from '@liveblocks/core';
+import { useClient } from '@liveblocks/react';
+import { useLayoutEffect } from '@liveblocks/react/_private';
+import { createContext, forwardRef, useRef, useState, useCallback, useImperativeHandle, useContext, useEffect, useMemo } from 'react';
+import { createEditor, Transforms, Editor as Editor$1 } from 'slate';
+import { withHistory } from 'slate-history';
+import { withReact, ReactEditor, Slate, Editable } from 'slate-react';
+import { withNormalize } from '../../../slate/plugins/normalize.js';
+import { isEmpty } from '../../../slate/utils/is-empty.js';
+import { AttachmentTooLargeError } from '../../Composer/utils.js';
+
+const ComposerContext = createContext(null);
+const MAX_ATTACHMENTS = 10;
+const MAX_ATTACHMENT_SIZE = 1024 * 1024 * 1024;
+const Form = forwardRef(
+  ({ onComposerSubmit, onSubmit, disabled, chatId, ...props }, forwardedRef) => {
+    const formRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const editorRef = useRef(
+      null
+    );
+    if (editorRef.current === null) {
+      editorRef.current = withNormalize(withHistory(withReact(createEditor())));
+    }
+    const editor = editorRef.current;
+    const [isEditorEmpty, setIsEditorEmpty] = useState(true);
+    const [attachments, setAttachments] = useState([]);
+    const handleSubmit = useCallback(
+      (event) => {
+        if (disabled || isEmpty(editor, editor.children))
+          return;
+        onSubmit?.(event);
+        if (onComposerSubmit === void 0 || event.isDefaultPrevented()) {
+          event.preventDefault();
+          return;
+        }
+        const content = editor.children.map((block) => {
+          if ("type" in block && block.type === "paragraph") {
+            return block.children.map((child) => {
+              if ("text" in child) {
+                return child.text;
+              }
+              return "";
+            }).join("");
+          }
+          return "";
+        }).join("\n");
+        onComposerSubmit({ text: content }, event);
+        if (event.isDefaultPrevented()) {
+          return;
+        }
+        event.preventDefault();
+        Transforms.delete(editor, {
+          at: {
+            anchor: Editor$1.start(editor, []),
+            focus: Editor$1.end(editor, [])
+          }
+        });
+      },
+      [disabled, editor, onSubmit, onComposerSubmit]
+    );
+    useLayoutEffect(() => {
+      setIsEditorEmpty(isEmpty(editor, editor.children));
+    }, [editor]);
+    const handleEditorValueChange = useCallback(() => {
+      setIsEditorEmpty(isEmpty(editor, editor.children));
+    }, [editor]);
+    const requestFormSubmit = useCallback(() => {
+      if (isEmpty(editor, editor.children))
+        return;
+      if (attachments.some((attachment) => attachment.status === "uploading")) {
+        return;
+      }
+      requestAnimationFrame(() => {
+        if (formRef.current === null)
+          return;
+        if (typeof formRef.current.requestSubmit === "function") {
+          return formRef.current.requestSubmit();
+        }
+        const submitter = document.createElement("input");
+        submitter.type = "submit";
+        submitter.hidden = true;
+        formRef.current.appendChild(submitter);
+        submitter.click();
+        formRef.current.removeChild(submitter);
+      });
+    }, [editor, attachments]);
+    const handleAttachFiles = useCallback(() => {
+      if (disabled)
+        return;
+      fileInputRef.current?.click();
+    }, [disabled]);
+    const handleRemoveAttachment = useCallback((id) => {
+      setAttachments(
+        (attachments2) => attachments2.filter((attachment) => attachment.id !== id)
+      );
+    }, []);
+    useImperativeHandle(
+      forwardedRef,
+      () => formRef.current,
+      []
+    );
+    const client = useClient();
+    return /* @__PURE__ */ jsxs(ComposerContext.Provider, {
+      value: {
+        chatId,
+        editor,
+        onEditorValueChange: handleEditorValueChange,
+        isEditorEmpty,
+        requestFormSubmit,
+        disabled: disabled || false,
+        attachments,
+        onAttachFiles: handleAttachFiles,
+        onRemoveAttachment: handleRemoveAttachment,
+        numOfAttachments: attachments.length
+      },
+      children: [
+        /* @__PURE__ */ jsx("form", {
+          onSubmit: handleSubmit,
+          ...props,
+          ref: formRef
+        }),
+        /* @__PURE__ */ jsx("input", {
+          type: "file",
+          multiple: true,
+          accept: "image/png, image/jpeg",
+          ref: fileInputRef,
+          onClick: (event) => {
+            event.stopPropagation();
+          },
+          onChange: function(event) {
+            if (disabled)
+              return;
+            if (event.target.files === null)
+              return;
+            if (event.target.files.length === 0)
+              return;
+            for (const file of Array.from(event.target.files).slice(
+              0,
+              MAX_ATTACHMENTS - attachments.length
+            )) {
+              const id = `at_${nanoid()}`;
+              if (file.size > MAX_ATTACHMENT_SIZE) {
+                setAttachments((attachments2) => [
+                  ...attachments2,
+                  {
+                    id,
+                    file,
+                    status: "error",
+                    error: new AttachmentTooLargeError("File is too large.")
+                  }
+                ]);
+                continue;
+              }
+              setAttachments((attachments2) => [
+                ...attachments2,
+                {
+                  id,
+                  file,
+                  status: "uploading"
+                }
+              ]);
+              client[kInternal].httpClient.uploadChatAttachment({
+                chatId,
+                attachment: {
+                  id,
+                  file
+                }
+              }).then(() => {
+                setAttachments(
+                  (attachments2) => attachments2.map(
+                    (attachment) => attachment.id === id ? { ...attachment, status: "uploaded" } : attachment
+                  )
+                );
+              }).catch((error) => {
+                if (error instanceof Error) {
+                  setAttachments(
+                    (attachments2) => attachments2.map(
+                      (attachment) => attachment.id === id ? {
+                        ...attachment,
+                        status: "error",
+                        error: error instanceof HttpError && error.status === 413 ? new AttachmentTooLargeError(
+                          "File is too large"
+                        ) : error
+                      } : attachment
+                    )
+                  );
+                }
+              });
+            }
+            event.target.value = "";
+          },
+          tabIndex: -1,
+          style: { display: "none" }
+        })
+      ]
+    });
+  }
+);
+const Editor = forwardRef(
+  ({ defaultValue = "", onKeyDown, disabled, autoFocus, ...props }, forwardedRef) => {
+    const context = useContext(ComposerContext);
+    if (context === null) {
+      throw new Error("Editor must be a descendant of Form.");
+    }
+    const {
+      editor,
+      onEditorValueChange,
+      requestFormSubmit,
+      disabled: isFormDisabled
+    } = context;
+    const handleKeyDown = useCallback(
+      (event) => {
+        onKeyDown?.(event);
+        if (event.isDefaultPrevented())
+          return;
+        if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          requestFormSubmit();
+        } else if (event.key === "Enter" && event.shiftKey) {
+          event.preventDefault();
+          editor.insertBreak();
+        }
+      },
+      [editor, onKeyDown, requestFormSubmit]
+    );
+    useImperativeHandle(
+      forwardedRef,
+      () => ReactEditor.toDOMNode(editor, editor),
+      [editor]
+    );
+    useEffect(() => {
+      if (!autoFocus)
+        return;
+      try {
+        if (!ReactEditor.isFocused(editor)) {
+          Transforms.select(editor, Editor$1.end(editor, []));
+          ReactEditor.focus(editor);
+        }
+      } catch {
+      }
+    }, [editor, autoFocus]);
+    const initialValue = useMemo(() => {
+      return defaultValue.split("\n").map((text) => ({ type: "paragraph", children: [{ text }] }));
+    }, [defaultValue]);
+    return /* @__PURE__ */ jsx(Slate, {
+      editor,
+      initialValue,
+      onValueChange: onEditorValueChange,
+      children: /* @__PURE__ */ jsx(Editable, {
+        enterKeyHint: "send",
+        autoCapitalize: "sentences",
+        onKeyDown: handleKeyDown,
+        "data-disabled": disabled || isFormDisabled || void 0,
+        ...props,
+        readOnly: disabled || isFormDisabled,
+        disabled: disabled || isFormDisabled,
+        renderPlaceholder: function({ attributes, children }) {
+          const { opacity: _opacity, ...style } = attributes.style;
+          return /* @__PURE__ */ jsx("span", {
+            ...attributes,
+            style,
+            "data-placeholder": "",
+            children
+          });
+        }
+      })
+    });
+  }
+);
+const Submit = forwardRef(
+  ({ disabled, ...props }, forwardedRef) => {
+    const context = useContext(ComposerContext);
+    if (context === null) {
+      throw new Error("Submit must be a descendant of Form.");
+    }
+    const { disabled: isFormDisabled, isEditorEmpty, attachments } = context;
+    return /* @__PURE__ */ jsx("button", {
+      type: "submit",
+      ...props,
+      ref: forwardedRef,
+      disabled: disabled || isFormDisabled || isEditorEmpty || attachments.some((attachment) => attachment.status === "uploading")
+    });
+  }
+);
+const AttachFiles = forwardRef(
+  ({ onClick, disabled, ...props }, forwardedRef) => {
+    const context = useContext(ComposerContext);
+    if (context === null) {
+      throw new Error("AttachFiles must be a descendant of Form.");
+    }
+    const {
+      disabled: isFormDisabled,
+      onAttachFiles,
+      numOfAttachments
+    } = context;
+    return /* @__PURE__ */ jsx("button", {
+      type: "button",
+      ...props,
+      onClick: function(event) {
+        onClick?.(event);
+        if (event.isDefaultPrevented())
+          return;
+        onAttachFiles();
+      },
+      onPointerDown: (event) => event.preventDefault(),
+      ref: forwardedRef,
+      disabled: isFormDisabled || disabled || numOfAttachments >= MAX_ATTACHMENTS
+    });
+  }
+);
+
+export { AttachFiles, ComposerContext, Editor, Form, MAX_ATTACHMENTS, MAX_ATTACHMENT_SIZE, Submit };
+//# sourceMappingURL=index.js.map

package/dist/primitives/Chat/Composer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/primitives/Chat/Composer/index.tsx"],"sourcesContent":["import { HttpError, kInternal, nanoid } from \"@liveblocks/core\";\nimport { useClient } from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport type {\n  ButtonHTMLAttributes,\n  FormEvent,\n  FormHTMLAttributes,\n  HTMLAttributes,\n  KeyboardEvent,\n} from \"react\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { BaseEditor, Descendant } from \"slate\";\nimport { createEditor, Editor as SlateEditor, Transforms } from \"slate\";\nimport type { HistoryEditor } from \"slate-history\";\nimport { withHistory } from \"slate-history\";\nimport { Editable, ReactEditor, Slate, withReact } from \"slate-react\";\n\nimport { withNormalize } from \"../../../slate/plugins/normalize\";\nimport { isEmpty } from \"../../../slate/utils/is-empty\";\nimport { AttachmentTooLargeError } from \"../../Composer/utils\";\n\n/* -------------------------------------------------------------------------------------------------\n * Form\n * -----------------------------------------------------------------------------------------------*/\nexport const ComposerContext = createContext<{\n  chatId: string;\n\n  editor: SlateEditor;\n  onEditorValueChange: (value: Descendant[]) => void;\n  isEditorEmpty: boolean;\n\n  attachments: ({\n    id: string;\n    file: File;\n  } & (\n    | {\n        status: \"uploading\" | \"uploaded\";\n      }\n    | {\n        status: \"error\";\n        error: Error;\n      }\n  ))[];\n  onAttachFiles: () => void;\n  onRemoveAttachment: (id: string) => void;\n  numOfAttachments: number;\n\n  requestFormSubmit: () => void;\n  disabled: boolean;\n} | null>(null);\n\nexport const MAX_ATTACHMENTS = 10;\nexport const MAX_ATTACHMENT_SIZE = 1024 * 1024 * 1024; // 1 GB\n\nexport type FormProps = FormHTMLAttributes<HTMLFormElement> & {\n  /**\n   * The event handler called when a chat message is submitted.\n   */\n  onComposerSubmit?: (\n    message: {\n      /**\n       * The submitted message text.\n       */\n      text: string;\n    },\n    event: FormEvent<HTMLFormElement>\n  ) => void;\n  /**\n   * Whether the composer is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The id of the chat the composer belongs to.\n   */\n  chatId: string;\n};\n\n/**\n * Surrounds the chat composer's content and handles submissions.\n *\n * @example\n * <Form onComposerSubmit={({ text }) => {}}>\n *\t <Editor />\n *   <Submit />\n * </Form>\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(\n  (\n    { onComposerSubmit, onSubmit, disabled, chatId, ...props },\n    forwardedRef\n  ) => {\n    const formRef = useRef<HTMLFormElement | null>(null);\n    const fileInputRef = useRef<HTMLInputElement | null>(null);\n\n    const editorRef = useRef<(BaseEditor & ReactEditor & HistoryEditor) | null>(\n      null\n    );\n    if (editorRef.current === null) {\n      editorRef.current = withNormalize(withHistory(withReact(createEditor())));\n    }\n    const editor = editorRef.current;\n\n    const [isEditorEmpty, setIsEditorEmpty] = useState(true);\n\n    const [attachments, setAttachments] = useState<\n      ({\n        id: string;\n        file: File;\n      } & (\n        | {\n            status: \"uploading\" | \"uploaded\";\n          }\n        | {\n            status: \"error\";\n            error: Error;\n          }\n      ))[]\n    >([]);\n\n    const handleSubmit = useCallback(\n      (event: FormEvent<HTMLFormElement>) => {\n        if (disabled || isEmpty(editor, editor.children)) return;\n\n        onSubmit?.(event);\n\n        if (onComposerSubmit === undefined || event.isDefaultPrevented()) {\n          event.preventDefault();\n          return;\n        }\n\n        // Extract the text content from the editor.\n        const content = editor.children\n          .map((block) => {\n            if (\"type\" in block && block.type === \"paragraph\") {\n              return block.children\n                .map((child) => {\n                  if (\"text\" in child) {\n                    return child.text;\n                  }\n                  return \"\";\n                })\n                .join(\"\");\n            }\n            return \"\";\n          })\n          .join(\"\\n\");\n\n        onComposerSubmit({ text: content }, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        event.preventDefault();\n\n        // Clear the editor after dispatching the message.\n        Transforms.delete(editor, {\n          at: {\n            anchor: SlateEditor.start(editor, []),\n            focus: SlateEditor.end(editor, []),\n          },\n        });\n      },\n      [disabled, editor, onSubmit, onComposerSubmit]\n    );\n\n    useLayoutEffect(() => {\n      setIsEditorEmpty(isEmpty(editor, editor.children));\n    }, [editor]);\n\n    const handleEditorValueChange = useCallback(() => {\n      setIsEditorEmpty(isEmpty(editor, editor.children));\n    }, [editor]);\n\n    const requestFormSubmit = useCallback(() => {\n      if (isEmpty(editor, editor.children)) return;\n\n      if (attachments.some((attachment) => attachment.status === \"uploading\")) {\n        return;\n      }\n\n      // We need to wait for the next frame in some cases like when composing diacritics,\n      // we want any native handling to be done first while still being handled on `keydown`.\n      requestAnimationFrame(() => {\n        if (formRef.current === null) return;\n        if (typeof formRef.current.requestSubmit === \"function\") {\n          return formRef.current.requestSubmit();\n        }\n        const submitter = document.createElement(\"input\");\n        submitter.type = \"submit\";\n        submitter.hidden = true;\n        formRef.current.appendChild(submitter);\n        submitter.click();\n        formRef.current.removeChild(submitter);\n      });\n    }, [editor, attachments]);\n\n    const handleAttachFiles = useCallback(() => {\n      if (disabled) return;\n      fileInputRef.current?.click();\n    }, [disabled]);\n\n    const handleRemoveAttachment = useCallback((id: string) => {\n      setAttachments((attachments) =>\n        attachments.filter((attachment) => attachment.id !== id)\n      );\n    }, []);\n\n    useImperativeHandle<HTMLFormElement | null, HTMLFormElement | null>(\n      forwardedRef,\n      () => formRef.current,\n      []\n    );\n\n    const client = useClient();\n\n    return (\n      <ComposerContext.Provider\n        value={{\n          chatId,\n          editor,\n          onEditorValueChange: handleEditorValueChange,\n          isEditorEmpty,\n          requestFormSubmit,\n          disabled: disabled || false,\n          attachments,\n          onAttachFiles: handleAttachFiles,\n          onRemoveAttachment: handleRemoveAttachment,\n          numOfAttachments: attachments.length,\n        }}\n      >\n        <form onSubmit={handleSubmit} {...props} ref={formRef} />\n        <input\n          type=\"file\"\n          multiple\n          accept=\"image/png, image/jpeg\"\n          ref={fileInputRef}\n          onClick={(event) => {\n            event.stopPropagation();\n          }}\n          onChange={function (event) {\n            if (disabled) return;\n\n            if (event.target.files === null) return;\n            if (event.target.files.length === 0) return;\n\n            for (const file of Array.from(event.target.files).slice(\n              0,\n              MAX_ATTACHMENTS - attachments.length\n            )) {\n              const id = `at_${nanoid()}`;\n              if (file.size > MAX_ATTACHMENT_SIZE) {\n                setAttachments((attachments) => [\n                  ...attachments,\n                  {\n                    id,\n                    file,\n                    status: \"error\",\n                    error: new AttachmentTooLargeError(\"File is too large.\"),\n                  },\n                ]);\n                continue;\n              }\n\n              setAttachments((attachments) => [\n                ...attachments,\n                {\n                  id,\n                  file,\n                  status: \"uploading\",\n                },\n              ]);\n\n              client[kInternal].httpClient\n                .uploadChatAttachment({\n                  chatId,\n                  attachment: {\n                    id,\n                    file,\n                  },\n                })\n                .then(() => {\n                  setAttachments((attachments) =>\n                    attachments.map((attachment) =>\n                      attachment.id === id\n                        ? { ...attachment, status: \"uploaded\" }\n                        : attachment\n                    )\n                  );\n                })\n                .catch((error) => {\n                  if (error instanceof Error) {\n                    setAttachments((attachments) =>\n                      attachments.map((attachment) =>\n                        attachment.id === id\n                          ? {\n                              ...attachment,\n                              status: \"error\",\n                              error:\n                                error instanceof HttpError &&\n                                error.status === 413\n                                  ? new AttachmentTooLargeError(\n                                      \"File is too large\"\n                                    )\n                                  : error,\n                            }\n                          : attachment\n                      )\n                    );\n                  }\n                });\n            }\n\n            event.target.value = \"\";\n          }}\n          tabIndex={-1}\n          style={{ display: \"none\" }}\n        />\n      </ComposerContext.Provider>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Editor\n * -----------------------------------------------------------------------------------------------*/\nexport type EditorProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"defaultValue\"\n> & {\n  /**\n   * The editor's initial value.\n   */\n  defaultValue?: string;\n  /**\n   * The text to display when the editor is empty.\n   */\n  placeholder?: string;\n  /**\n   * Whether the editor is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether to focus the editor on mount.\n   */\n  autoFocus?: boolean;\n};\n\n/**\n * Displays the chat composer's editor.\n *\n * @example\n * <Editor placeholder=\"Write a message…\" />\n */\nexport const Editor = forwardRef<HTMLDivElement, EditorProps>(\n  (\n    { defaultValue = \"\", onKeyDown, disabled, autoFocus, ...props },\n    forwardedRef\n  ) => {\n    const context = useContext(ComposerContext);\n    if (context === null) {\n      throw new Error(\"Editor must be a descendant of Form.\");\n    }\n\n    const {\n      editor,\n      onEditorValueChange,\n      requestFormSubmit,\n      disabled: isFormDisabled,\n    } = context;\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLDivElement>) => {\n        onKeyDown?.(event);\n        if (event.isDefaultPrevented()) return;\n\n        if (event.key === \"Enter\" && !event.shiftKey) {\n          event.preventDefault();\n          requestFormSubmit();\n        } else if (event.key === \"Enter\" && event.shiftKey) {\n          event.preventDefault();\n          editor.insertBreak();\n        }\n      },\n      [editor, onKeyDown, requestFormSubmit]\n    );\n\n    useImperativeHandle(\n      forwardedRef,\n      () => ReactEditor.toDOMNode(editor, editor) as HTMLDivElement,\n      [editor]\n    );\n\n    useEffect(() => {\n      if (!autoFocus) return;\n\n      try {\n        if (!ReactEditor.isFocused(editor)) {\n          Transforms.select(editor, SlateEditor.end(editor, []));\n          ReactEditor.focus(editor);\n        }\n      } catch {\n        // Slate's DOM-specific methods will throw if the editor's DOM  node no longer exists. This action doesn't make sense on an unmounted editor so we can safely ignore it.\n      }\n    }, [editor, autoFocus]);\n\n    const initialValue: { type: \"paragraph\"; children: { text: string }[] }[] =\n      useMemo(() => {\n        return defaultValue\n          .split(\"\\n\")\n          .map((text) => ({ type: \"paragraph\", children: [{ text }] }));\n      }, [defaultValue]);\n\n    return (\n      <Slate\n        editor={editor}\n        initialValue={initialValue}\n        onValueChange={onEditorValueChange}\n      >\n        <Editable\n          enterKeyHint=\"send\"\n          autoCapitalize=\"sentences\"\n          onKeyDown={handleKeyDown}\n          data-disabled={disabled || isFormDisabled || undefined}\n          {...props}\n          readOnly={disabled || isFormDisabled}\n          disabled={disabled || isFormDisabled}\n          renderPlaceholder={function ({ attributes, children }) {\n            const { opacity: _opacity, ...style } = attributes.style;\n            return (\n              <span {...attributes} style={style} data-placeholder=\"\">\n                {children}\n              </span>\n            );\n          }}\n        />\n      </Slate>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Submit\n * -----------------------------------------------------------------------------------------------*/\nexport type SubmitProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * A button to submit a chat message.\n *\n * @example\n * <ChatComposer.Submit>Send</ChatComposer.Submit>\n */\nexport const Submit = forwardRef<HTMLButtonElement, SubmitProps>(\n  ({ disabled, ...props }, forwardedRef) => {\n    const context = useContext(ComposerContext);\n    if (context === null) {\n      throw new Error(\"Submit must be a descendant of Form.\");\n    }\n\n    const { disabled: isFormDisabled, isEditorEmpty, attachments } = context;\n\n    return (\n      <button\n        type=\"submit\"\n        {...props}\n        ref={forwardedRef}\n        disabled={\n          disabled ||\n          isFormDisabled ||\n          isEditorEmpty ||\n          attachments.some((attachment) => attachment.status === \"uploading\")\n        }\n      />\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * AttachFiles\n * -----------------------------------------------------------------------------------------------*/\nexport type AttachFilesProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * A button which opens a file picker to create attachments.\n *\n * @example\n * <Composer.AttachFiles>Attach files</Composer.AttachFiles>\n */\nexport const AttachFiles = forwardRef<HTMLButtonElement, AttachFilesProps>(\n  ({ onClick, disabled, ...props }, forwardedRef) => {\n    const context = useContext(ComposerContext);\n    if (context === null) {\n      throw new Error(\"AttachFiles must be a descendant of Form.\");\n    }\n\n    const {\n      disabled: isFormDisabled,\n      onAttachFiles,\n      numOfAttachments,\n    } = context;\n\n    return (\n      <button\n        type=\"button\"\n        {...props}\n        onClick={function (event) {\n          onClick?.(event);\n          if (event.isDefaultPrevented()) return;\n          onAttachFiles();\n        }}\n        onPointerDown={(event) => event.preventDefault()}\n        ref={forwardedRef}\n        disabled={\n          isFormDisabled || disabled || numOfAttachments >= MAX_ATTACHMENTS\n        }\n      />\n    );\n  }\n);\n"],"names":["SlateEditor","attachments"],"mappings":"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"}

package/dist/primitives/index.cjs

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./Comment/index.cjs');
-var index$1 = require('./Composer/index.cjs');
+var index = require('./Chat/Composer/index.cjs');
+var index$1 = require('./Comment/index.cjs');
+var index$2 = require('./Composer/index.cjs');
 var contexts = require('./Composer/contexts.cjs');
 var utils = require('./Composer/utils.cjs');
 var FileSize = require('./FileSize.cjs');
@@ -9,8 +10,12 @@ var Timestamp = require('./Timestamp.cjs');
 
 
 
-exports.Comment = index;
-exports.Composer = index$1;
+exports.ChatComposerAttachFiles = index.AttachFiles;
+exports.ChatComposerEditor = index.Editor;
+exports.ChatComposerForm = index.Form;
+exports.ChatComposerSubmit = index.Submit;
+exports.Comment = index$1;
+exports.Composer = index$2;
 exports.useComposer = contexts.useComposer;
 exports.AttachmentTooLargeError = utils.AttachmentTooLargeError;
 exports.FileSize = FileSize.FileSize;

package/dist/primitives/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/primitives/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentType, FormEvent } from 'react';
+import { ElementType, ComponentPropsWithoutRef, FormHTMLAttributes, FormEvent, HTMLAttributes, ButtonHTMLAttributes, ReactNode, ComponentType } from 'react';
 import { CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment } from '@liveblocks/core';
 
 type Direction = "ltr" | "rtl";
@@ -22,6 +22,112 @@ type ComposerBodyMarks = {
     [K in ComposerBodyMark]: boolean;
 };
 
+type FormProps = FormHTMLAttributes<HTMLFormElement> & {
+    /**
+     * The event handler called when a chat message is submitted.
+     */
+    onComposerSubmit?: (message: {
+        /**
+         * The submitted message text.
+         */
+        text: string;
+    }, event: FormEvent<HTMLFormElement>) => void;
+    /**
+     * Whether the composer is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of the chat the composer belongs to.
+     */
+    chatId: string;
+};
+/**
+ * Surrounds the chat composer's content and handles submissions.
+ *
+ * @example
+ * <Form onComposerSubmit={({ text }) => {}}>
+ *	 <Editor />
+ *   <Submit />
+ * </Form>
+ */
+declare const Form: react.ForwardRefExoticComponent<FormHTMLAttributes<HTMLFormElement> & {
+    /**
+     * The event handler called when a chat message is submitted.
+     */
+    onComposerSubmit?: (message: {
+        /**
+         * The submitted message text.
+         */
+        text: string;
+    }, event: FormEvent<HTMLFormElement>) => void;
+    /**
+     * Whether the composer is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of the chat the composer belongs to.
+     */
+    chatId: string;
+} & react.RefAttributes<HTMLFormElement>>;
+type EditorProps = Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> & {
+    /**
+     * The editor's initial value.
+     */
+    defaultValue?: string;
+    /**
+     * The text to display when the editor is empty.
+     */
+    placeholder?: string;
+    /**
+     * Whether the editor is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to focus the editor on mount.
+     */
+    autoFocus?: boolean;
+};
+/**
+ * Displays the chat composer's editor.
+ *
+ * @example
+ * <Editor placeholder="Write a message…" />
+ */
+declare const Editor: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> & {
+    /**
+     * The editor's initial value.
+     */
+    defaultValue?: string;
+    /**
+     * The text to display when the editor is empty.
+     */
+    placeholder?: string;
+    /**
+     * Whether the editor is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to focus the editor on mount.
+     */
+    autoFocus?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+type SubmitProps = ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * A button to submit a chat message.
+ *
+ * @example
+ * <ChatComposer.Submit>Send</ChatComposer.Submit>
+ */
+declare const Submit: react.ForwardRefExoticComponent<SubmitProps & react.RefAttributes<HTMLButtonElement>>;
+type AttachFilesProps = ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * A button which opens a file picker to create attachments.
+ *
+ * @example
+ * <Composer.AttachFiles>Attach files</Composer.AttachFiles>
+ */
+declare const AttachFiles: react.ForwardRefExoticComponent<AttachFilesProps & react.RefAttributes<HTMLButtonElement>>;
+
 type CommentMentionProps = ComponentPropsWithSlot<"span">;
 type CommentBodyMentionProps = {
     /**
@@ -494,4 +600,4 @@ interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children"
  */
 declare const Timestamp: react.ForwardRefExoticComponent<TimestampProps & react.RefAttributes<HTMLTimeElement>>;
 
-export { AttachmentTooLargeError, index$1 as Comment, CommentBodyComponents, CommentBodyLinkProps, CommentBodyMentionProps, CommentBodyProps, CommentLinkProps, CommentMentionProps, index as Composer, ComposerAttachFilesProps, ComposerAttachmentsDropAreaProps, ComposerBodyMark, ComposerBodyMarks, ComposerContext, ComposerEditorComponents, ComposerEditorFloatingToolbarProps, ComposerEditorLinkProps, ComposerEditorMentionProps, ComposerEditorMentionSuggestionsProps, ComposerEditorProps, ComposerFloatingToolbarProps, ComposerFormProps, ComposerLinkProps, ComposerMarkToggleProps, ComposerMentionProps, ComposerSubmitComment, ComposerSubmitProps, ComposerSuggestionsListItemProps, ComposerSuggestionsListProps, FileSize, FileSizeProps, Timestamp, TimestampProps, useComposer };
+export { AttachmentTooLargeError, AttachFiles as ChatComposerAttachFiles, AttachFilesProps as ChatComposerAttachFilesProps, Editor as ChatComposerEditor, EditorProps as ChatComposerEditorProps, Form as ChatComposerForm, FormProps as ChatComposerFormProps, Submit as ChatComposerSubmit, SubmitProps as ChatComposerSubmitProps, index$1 as Comment, CommentBodyComponents, CommentBodyLinkProps, CommentBodyMentionProps, CommentBodyProps, CommentLinkProps, CommentMentionProps, index as Composer, ComposerAttachFilesProps, ComposerAttachmentsDropAreaProps, ComposerBodyMark, ComposerBodyMarks, ComposerContext, ComposerEditorComponents, ComposerEditorFloatingToolbarProps, ComposerEditorLinkProps, ComposerEditorMentionProps, ComposerEditorMentionSuggestionsProps, ComposerEditorProps, ComposerFloatingToolbarProps, ComposerFormProps, ComposerLinkProps, ComposerMarkToggleProps, ComposerMentionProps, ComposerSubmitComment, ComposerSubmitProps, ComposerSuggestionsListItemProps, ComposerSuggestionsListProps, FileSize, FileSizeProps, Timestamp, TimestampProps, useComposer };

package/dist/primitives/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentType, FormEvent } from 'react';
+import { ElementType, ComponentPropsWithoutRef, FormHTMLAttributes, FormEvent, HTMLAttributes, ButtonHTMLAttributes, ReactNode, ComponentType } from 'react';
 import { CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment } from '@liveblocks/core';
 
 type Direction = "ltr" | "rtl";
@@ -22,6 +22,112 @@ type ComposerBodyMarks = {
     [K in ComposerBodyMark]: boolean;
 };
 
+type FormProps = FormHTMLAttributes<HTMLFormElement> & {
+    /**
+     * The event handler called when a chat message is submitted.
+     */
+    onComposerSubmit?: (message: {
+        /**
+         * The submitted message text.
+         */
+        text: string;
+    }, event: FormEvent<HTMLFormElement>) => void;
+    /**
+     * Whether the composer is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of the chat the composer belongs to.
+     */
+    chatId: string;
+};
+/**
+ * Surrounds the chat composer's content and handles submissions.
+ *
+ * @example
+ * <Form onComposerSubmit={({ text }) => {}}>
+ *	 <Editor />
+ *   <Submit />
+ * </Form>
+ */
+declare const Form: react.ForwardRefExoticComponent<FormHTMLAttributes<HTMLFormElement> & {
+    /**
+     * The event handler called when a chat message is submitted.
+     */
+    onComposerSubmit?: (message: {
+        /**
+         * The submitted message text.
+         */
+        text: string;
+    }, event: FormEvent<HTMLFormElement>) => void;
+    /**
+     * Whether the composer is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of the chat the composer belongs to.
+     */
+    chatId: string;
+} & react.RefAttributes<HTMLFormElement>>;
+type EditorProps = Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> & {
+    /**
+     * The editor's initial value.
+     */
+    defaultValue?: string;
+    /**
+     * The text to display when the editor is empty.
+     */
+    placeholder?: string;
+    /**
+     * Whether the editor is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to focus the editor on mount.
+     */
+    autoFocus?: boolean;
+};
+/**
+ * Displays the chat composer's editor.
+ *
+ * @example
+ * <Editor placeholder="Write a message…" />
+ */
+declare const Editor: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> & {
+    /**
+     * The editor's initial value.
+     */
+    defaultValue?: string;
+    /**
+     * The text to display when the editor is empty.
+     */
+    placeholder?: string;
+    /**
+     * Whether the editor is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to focus the editor on mount.
+     */
+    autoFocus?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+type SubmitProps = ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * A button to submit a chat message.
+ *
+ * @example
+ * <ChatComposer.Submit>Send</ChatComposer.Submit>
+ */
+declare const Submit: react.ForwardRefExoticComponent<SubmitProps & react.RefAttributes<HTMLButtonElement>>;
+type AttachFilesProps = ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * A button which opens a file picker to create attachments.
+ *
+ * @example
+ * <Composer.AttachFiles>Attach files</Composer.AttachFiles>
+ */
+declare const AttachFiles: react.ForwardRefExoticComponent<AttachFilesProps & react.RefAttributes<HTMLButtonElement>>;
+
 type CommentMentionProps = ComponentPropsWithSlot<"span">;
 type CommentBodyMentionProps = {
     /**
@@ -494,4 +600,4 @@ interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children"
  */
 declare const Timestamp: react.ForwardRefExoticComponent<TimestampProps & react.RefAttributes<HTMLTimeElement>>;
 
-export { AttachmentTooLargeError, index$1 as Comment, CommentBodyComponents, CommentBodyLinkProps, CommentBodyMentionProps, CommentBodyProps, CommentLinkProps, CommentMentionProps, index as Composer, ComposerAttachFilesProps, ComposerAttachmentsDropAreaProps, ComposerBodyMark, ComposerBodyMarks, ComposerContext, ComposerEditorComponents, ComposerEditorFloatingToolbarProps, ComposerEditorLinkProps, ComposerEditorMentionProps, ComposerEditorMentionSuggestionsProps, ComposerEditorProps, ComposerFloatingToolbarProps, ComposerFormProps, ComposerLinkProps, ComposerMarkToggleProps, ComposerMentionProps, ComposerSubmitComment, ComposerSubmitProps, ComposerSuggestionsListItemProps, ComposerSuggestionsListProps, FileSize, FileSizeProps, Timestamp, TimestampProps, useComposer };
+export { AttachmentTooLargeError, AttachFiles as ChatComposerAttachFiles, AttachFilesProps as ChatComposerAttachFilesProps, Editor as ChatComposerEditor, EditorProps as ChatComposerEditorProps, Form as ChatComposerForm, FormProps as ChatComposerFormProps, Submit as ChatComposerSubmit, SubmitProps as ChatComposerSubmitProps, index$1 as Comment, CommentBodyComponents, CommentBodyLinkProps, CommentBodyMentionProps, CommentBodyProps, CommentLinkProps, CommentMentionProps, index as Composer, ComposerAttachFilesProps, ComposerAttachmentsDropAreaProps, ComposerBodyMark, ComposerBodyMarks, ComposerContext, ComposerEditorComponents, ComposerEditorFloatingToolbarProps, ComposerEditorLinkProps, ComposerEditorMentionProps, ComposerEditorMentionSuggestionsProps, ComposerEditorProps, ComposerFloatingToolbarProps, ComposerFormProps, ComposerLinkProps, ComposerMarkToggleProps, ComposerMentionProps, ComposerSubmitComment, ComposerSubmitProps, ComposerSuggestionsListItemProps, ComposerSuggestionsListProps, FileSize, FileSizeProps, Timestamp, TimestampProps, useComposer };

package/dist/primitives/index.js

@@ -1,3 +1,4 @@
+export { AttachFiles as ChatComposerAttachFiles, Editor as ChatComposerEditor, Form as ChatComposerForm, Submit as ChatComposerSubmit } from './Chat/Composer/index.js';
 import * as index from './Comment/index.js';
 export { index as Comment };
 import * as index$1 from './Composer/index.js';

package/dist/primitives/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}