stream-chat-react 14.12.0 → 15.0.0-rc.1

package/dist/es/components/MessageComposer/SendToChannelCheckbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SendToChannelCheckbox.mjs","names":[],"sources":["../../../../src/components/MessageComposer/SendToChannelCheckbox.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport { useMessageComposerController } from './hooks';\nimport type { MessageComposerState } from 'stream-chat';\nimport { useStateStore } from '../../store';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nconst stateSelector = (state: MessageComposerState) => ({\n  showReplyInChannel: state.showReplyInChannel,\n});\n\nexport const SendToChannelCheckbox = () => {\n  const { IconCheckmark } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  const messageComposer = useMessageComposerController();\n  const { showReplyInChannel } = useStateStore(messageComposer.state, stateSelector);\n\n  if (messageComposer.editedMessage || !messageComposer.threadId) return null;\n\n  const labelText =\n    Object.keys(messageComposer.channel.state.members).length === 2\n      ? t('Also send as a direct message')\n      : t('Also send in channel');\n\n  return (\n    <div\n      className={clsx('str-chat__send-to-channel-checkbox__container', {\n        'str-chat__send-to-channel-checkbox__container--checked': showReplyInChannel,\n      })}\n      data-testid='send-to-channel-checkbox'\n    >\n      <label\n        className='str-chat__send-to-channel-checkbox__field'\n        htmlFor='send-to-channel-checkbox'\n      >\n        <input\n          aria-checked={showReplyInChannel}\n          checked={showReplyInChannel}\n          className='str-chat__send-to-channel-checkbox__input'\n          id='send-to-channel-checkbox'\n          onChange={() => messageComposer.toggleShowReplyInChannel()}\n          type='checkbox'\n        />\n        <span aria-hidden className='str-chat__send-to-channel-checkbox__visual'>\n          <span className='str-chat__send-to-channel-checkbox__checkmark'>\n            <IconCheckmark />\n          </span>\n        </span>\n        <span className='str-chat__send-to-channel-checkbox__label'>{labelText}</span>\n      </label>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,IAAM,iBAAiB,WAAiC,EACtD,oBAAoB,MAAM,mBAC5B;AAEA,IAAa,8BAA8B;CACzC,MAAM,EAAE,kBAAkB,yBAAyB;CAEnD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,uBAAuB,cAAc,gBAAgB,OAAO,aAAa;CAEjF,IAAI,gBAAgB,iBAAiB,CAAC,gBAAgB,UAAU,OAAO;CAEvE,MAAM,YACJ,OAAO,KAAK,gBAAgB,QAAQ,MAAM,OAAO,CAAC,CAAC,WAAW,IAC1D,EAAE,+BAA+B,IACjC,EAAE,sBAAsB;CAE9B,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,iDAAiD,EAC/D,0DAA0D,mBAC5D,CAAC;EACD,eAAY;YAEZ,qBAAC,SAAD;GACE,WAAU;GACV,SAAQ;aAFV;IAIE,oBAAC,SAAD;KACE,gBAAc;KACd,SAAS;KACT,WAAU;KACV,IAAG;KACH,gBAAgB,gBAAgB,yBAAyB;KACzD,MAAK;IACN,CAAA;IACD,oBAAC,QAAD;KAAM,eAAA;KAAY,WAAU;eAC1B,oBAAC,QAAD;MAAM,WAAU;gBACd,oBAAC,eAAD,CAAgB,CAAA;KACZ,CAAA;IACF,CAAA;IACN,oBAAC,QAAD;KAAM,WAAU;eAA6C;IAAgB,CAAA;GACxE;;CACJ,CAAA;AAET"}
+{"version":3,"file":"SendToChannelCheckbox.mjs","names":[],"sources":["../../../../src/components/MessageComposer/SendToChannelCheckbox.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport { useMessageComposerController } from './hooks';\nimport type { MessageComposerState } from 'stream-chat';\nimport { useStateStore } from '../../store';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nconst stateSelector = (state: MessageComposerState) => ({\n  showReplyInChannel: state.showReplyInChannel,\n});\n\nexport const SendToChannelCheckbox = () => {\n  const { IconCheckmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const messageComposer = useMessageComposerController();\n  const { showReplyInChannel } = useStateStore(messageComposer.state, stateSelector);\n\n  if (messageComposer.editedMessage || !messageComposer.threadId) return null;\n\n  const labelText =\n    Object.keys(messageComposer.channel.state.members).length === 2\n      ? t(\n          'messageComposer.sendChannelCheckbox.alsoSendDirectMessage.label',\n          'Also send as a direct message',\n        )\n      : t(\n          'messageComposer.sendChannelCheckbox.alsoSendChannel.label',\n          'Also send in channel',\n        );\n\n  return (\n    <div\n      className={clsx('str-chat__send-to-channel-checkbox__container', {\n        'str-chat__send-to-channel-checkbox__container--checked': showReplyInChannel,\n      })}\n      data-testid='send-to-channel-checkbox'\n    >\n      <label\n        className='str-chat__send-to-channel-checkbox__field'\n        htmlFor='send-to-channel-checkbox'\n      >\n        <input\n          aria-checked={showReplyInChannel}\n          checked={showReplyInChannel}\n          className='str-chat__send-to-channel-checkbox__input'\n          id='send-to-channel-checkbox'\n          onChange={() => messageComposer.toggleShowReplyInChannel()}\n          type='checkbox'\n        />\n        <span aria-hidden className='str-chat__send-to-channel-checkbox__visual'>\n          <span className='str-chat__send-to-channel-checkbox__checkmark'>\n            <IconCheckmark />\n          </span>\n        </span>\n        <span className='str-chat__send-to-channel-checkbox__label'>{labelText}</span>\n      </label>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,IAAM,iBAAiB,WAAiC,EACtD,oBAAoB,MAAM,mBAC5B;AAEA,IAAa,8BAA8B;CACzC,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,uBAAuB,cAAc,gBAAgB,OAAO,aAAa;CAEjF,IAAI,gBAAgB,iBAAiB,CAAC,gBAAgB,UAAU,OAAO;CAEvE,MAAM,YACJ,OAAO,KAAK,gBAAgB,QAAQ,MAAM,OAAO,CAAC,CAAC,WAAW,IAC1D,EACE,mEACA,+BACF,IACA,EACE,6DACA,sBACF;CAEN,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,iDAAiD,EAC/D,0DAA0D,mBAC5D,CAAC;EACD,eAAY;YAEZ,qBAAC,SAAD;GACE,WAAU;GACV,SAAQ;aAFV;IAIE,oBAAC,SAAD;KACE,gBAAc;KACd,SAAS;KACT,WAAU;KACV,IAAG;KACH,gBAAgB,gBAAgB,yBAAyB;KACzD,MAAK;IACN,CAAA;IACD,oBAAC,QAAD;KAAM,eAAA;KAAY,WAAU;eAC1B,oBAAC,QAAD;MAAM,WAAU;gBACd,oBAAC,eAAD,CAAgB,CAAA;KACZ,CAAA;IACF,CAAA;IACN,oBAAC,QAAD;KAAM,WAAU;eAA6C;IAAgB,CAAA;GACxE;;CACJ,CAAA;AAET"}

package/dist/es/components/MessageComposer/StopAIGenerationButton.mjs

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 var StopAIGenerationButton = ({ onClick, ...restProps }) => {
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsx("button", {
-		"aria-label": t("aria/Stop AI Generation"),
+		"aria-label": t("messageComposer.stopAiGeneration.stopAiGeneration.ariaLabel", "Stop AI Generation"),
 		className: "str-chat__stop-ai-generation-button",
 		"data-testid": "stop-ai-generation-button",
 		onClick,

package/dist/es/components/MessageComposer/StopAIGenerationButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StopAIGenerationButton.mjs","names":[],"sources":["../../../../src/components/MessageComposer/StopAIGenerationButton.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslationContext } from '../../context';\n\nexport type StopAIGenerationButtonProps = React.ComponentProps<'button'>;\n\nexport const StopAIGenerationButton = ({\n  onClick,\n  ...restProps\n}: StopAIGenerationButtonProps) => {\n  const { t } = useTranslationContext();\n  return (\n    <button\n      aria-label={t('aria/Stop AI Generation')}\n      className='str-chat__stop-ai-generation-button'\n      data-testid='stop-ai-generation-button'\n      onClick={onClick}\n      {...restProps}\n    />\n  );\n};\n"],"mappings":";;;;AAKA,IAAa,0BAA0B,EACrC,SACA,GAAG,gBAC8B;CACjC,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,UAAD;EACE,cAAY,EAAE,yBAAyB;EACvC,WAAU;EACV,eAAY;EACH;EACT,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"StopAIGenerationButton.mjs","names":[],"sources":["../../../../src/components/MessageComposer/StopAIGenerationButton.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslationContext } from '../../context';\n\nexport type StopAIGenerationButtonProps = React.ComponentProps<'button'>;\n\nexport const StopAIGenerationButton = ({\n  onClick,\n  ...restProps\n}: StopAIGenerationButtonProps) => {\n  const { t } = useTranslationContext();\n  return (\n    <button\n      aria-label={t(\n        'messageComposer.stopAiGeneration.stopAiGeneration.ariaLabel',\n        'Stop AI Generation',\n      )}\n      className='str-chat__stop-ai-generation-button'\n      data-testid='stop-ai-generation-button'\n      onClick={onClick}\n      {...restProps}\n    />\n  );\n};\n"],"mappings":";;;;AAKA,IAAa,0BAA0B,EACrC,SACA,GAAG,gBAC8B;CACjC,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,UAAD;EACE,cAAY,EACV,+DACA,oBACF;EACA,WAAU;EACV,eAAY;EACH;EACT,GAAI;CACL,CAAA;AAEL"}

package/dist/es/components/MessageComposer/WithDragAndDropUpload.mjs

@@ -1,10 +1,10 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
-import { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
 import { useAttachmentManagerState } from "./hooks/useAttachmentManagerState.mjs";
+import { useIsWithinMessageComposerContext } from "../../context/MessageComposerContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useIsCooldownActive } from "./hooks/useIsCooldownActive.mjs";
-import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
 import React, { useCallback, useContext, useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -36,26 +36,22 @@ var attachmentManagerConfigStateSelector = (state) => ({
 * ```tsx
 * <Channel>
 *  <WithDragAndDropUpload component="section" className="message-list-dnd-wrapper">
-*    <Window>
-*      <MessageList />
-*      <MessageComposer />
-*    </Window>
+*    <MessageList />
+*    <MessageComposer />
 *  </WithDragAndDropUpload>
-*  <Thread />
 * <Channel>
 * ```
 */
 var WithDragAndDropUpload = ({ children, className, component: Component = "div", style }) => {
 	const dropHandlersRef = useRef(/* @__PURE__ */ new Set());
-	const messageComposerContext = useMessageComposerContext();
 	const dragAndDropUploadContext = useDragAndDropUploadContext();
 	const messageComposer = useMessageComposerController();
 	const { isUploadEnabled } = useAttachmentManagerState();
 	const { acceptedFiles, multipleUploads } = useStateStore(messageComposer.configState, attachmentManagerConfigStateSelector);
 	const isCooldownActive = useIsCooldownActive();
-	const isWithinMessageComposerContext = Object.keys(messageComposerContext).length > 0;
+	const isWithinMessageComposerContext = useIsWithinMessageComposerContext();
 	const accept = useMemo(() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
-		mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
+		mediaTypeMap[mediaType] ??= [];
 		return mediaTypeMap;
 	}, {}), [acceptedFiles]);
 	const subscribeToDrop = useCallback((fn) => {
@@ -96,11 +92,11 @@ var WithDragAndDropUpload = ({ children, className, component: Component = "div"
 	});
 };
 var FileDragAndDropContent = ({ isDragRejected }) => {
-	const { t } = useTranslationContext();
 	const { IconUpload } = useComponentContextIcons();
+	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsx("div", {
 		className: "str-chat__dropzone-container__content",
-		children: isDragRejected ? /* @__PURE__ */ jsx("p", { children: t("Some of the files will not be accepted") }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconUpload, {}), /* @__PURE__ */ jsx("p", { children: t("Drag your files here") })] })
+		children: isDragRejected ? /* @__PURE__ */ jsx("p", { children: t("messageComposer.dragDropUpload.someFilesNotAccepted.text", "Some of the files will not be accepted") }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconUpload, {}), /* @__PURE__ */ jsx("p", { children: t("messageComposer.dragDropUpload.dragFiles.text", "Drag your files here") })] })
 	});
 };
 //#endregion

package/dist/es/components/MessageComposer/WithDragAndDropUpload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"WithDragAndDropUpload.mjs","names":[],"sources":["../../../../src/components/MessageComposer/WithDragAndDropUpload.tsx"],"sourcesContent":["import type { CSSProperties, ElementType, PropsWithChildren } from 'react';\nimport React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport clsx from 'clsx';\nimport type { MessageComposerConfig } from 'stream-chat';\n\nimport {\n  useComponentContextIcons,\n  useMessageComposerContext,\n  useTranslationContext,\n} from '../../context';\nimport { useAttachmentManagerState, useMessageComposerController } from './hooks';\nimport { useStateStore } from '../../store';\nimport { useIsCooldownActive } from './hooks/useIsCooldownActive';\n\nconst DragAndDropUploadContext = React.createContext<{\n  subscribeToDrop: ((fn: (files: File[]) => void) => () => void) | null;\n}>({\n  subscribeToDrop: null,\n});\n\nexport const useDragAndDropUploadContext = () => useContext(DragAndDropUploadContext);\n\n/**\n * @private This hook should be used only once directly in the `MessageComposerProvider` to\n * register `uploadNewFiles` functions of the rendered message composers. Each `MessageComposer`\n * will then be notified when the drop event occurs from within the `WithDragAndDropUpload`\n * component.\n */\nexport const useRegisterDropHandlers = () => {\n  const { subscribeToDrop } = useDragAndDropUploadContext();\n\n  const messageComposer = useMessageComposerController();\n\n  useEffect(() => {\n    const unsubscribe = subscribeToDrop?.(messageComposer.attachmentManager.uploadFiles);\n\n    return unsubscribe;\n  }, [subscribeToDrop, messageComposer]);\n};\n\nconst attachmentManagerConfigStateSelector = (state: MessageComposerConfig) => ({\n  acceptedFiles: state.attachments.acceptedFiles,\n  multipleUploads: state.attachments.maxNumberOfFilesPerMessage > 1,\n});\n\n/**\n * Wrapper to replace now deprecated `Channel.dragAndDropWindow` option.\n *\n * @example\n * ```tsx\n * <Channel>\n *  <WithDragAndDropUpload component=\"section\" className=\"message-list-dnd-wrapper\">\n *    <Window>\n *      <MessageList />\n *      <MessageComposer />\n *    </Window>\n *  </WithDragAndDropUpload>\n *  <Thread />\n * <Channel>\n * ```\n */\nexport const WithDragAndDropUpload = ({\n  children,\n  className,\n  component: Component = 'div',\n  style,\n}: PropsWithChildren<{\n  acceptedFiles?: string[];\n  /**\n   * @description An element to render as a wrapper onto which drag & drop functionality will be applied.\n   * @default 'div'\n   */\n  component?: ElementType;\n  className?: string;\n  style?: CSSProperties;\n}>) => {\n  const dropHandlersRef = useRef<Set<(f: File[]) => void>>(new Set());\n  const messageComposerContext = useMessageComposerContext();\n  const dragAndDropUploadContext = useDragAndDropUploadContext();\n  const messageComposer = useMessageComposerController();\n  const { isUploadEnabled } = useAttachmentManagerState();\n  const { acceptedFiles, multipleUploads } = useStateStore(\n    messageComposer.configState,\n    attachmentManagerConfigStateSelector,\n  );\n\n  const isCooldownActive = useIsCooldownActive();\n  // if message composer context is available, there's no need to use the queue\n  const isWithinMessageComposerContext = Object.keys(messageComposerContext).length > 0;\n\n  const accept = useMemo(\n    () =>\n      acceptedFiles.reduce<Record<string, Array<string>>>((mediaTypeMap, mediaType) => {\n        mediaTypeMap[mediaType] ??= [];\n        return mediaTypeMap;\n      }, {}),\n    [acceptedFiles],\n  );\n\n  const subscribeToDrop = useCallback((fn: (files: File[]) => void) => {\n    dropHandlersRef.current.add(fn);\n\n    return () => {\n      dropHandlersRef.current.delete(fn);\n    };\n  }, []);\n\n  const handleDrop = useCallback((files: File[]) => {\n    dropHandlersRef.current.forEach((fn) => fn(files));\n  }, []);\n\n  const {\n    getRootProps,\n    isDragActive,\n    isDragReject: isDragRejected,\n  } = useDropzone({\n    accept,\n    // apply `disabled` rules if available, otherwise allow anything and\n    // let the `uploadNewFiles` handle the limitations internally\n    disabled: isWithinMessageComposerContext\n      ? !isUploadEnabled || isCooldownActive\n      : false,\n    multiple: multipleUploads,\n    noClick: true,\n    noKeyboard: true,\n    onDrop: isWithinMessageComposerContext\n      ? messageComposer.attachmentManager.uploadFiles\n      : handleDrop,\n  });\n\n  // nested WithDragAndDropUpload components render wrappers without functionality\n  // (MessageComposerUI has a default WithDragAndDropUpload)\n  if (dragAndDropUploadContext.subscribeToDrop !== null) {\n    return <Component className={className}>{children}</Component>;\n  }\n\n  const rootClassName = clsx('str-chat__dropzone-root', className);\n\n  return (\n    <DragAndDropUploadContext.Provider value={{ subscribeToDrop }}>\n      <Component {...getRootProps({ className: rootClassName, style })}>\n        {isDragActive && (\n          <div\n            className={clsx('str-chat__dropzone-container', {\n              'str-chat__dropzone-container--not-accepted': isDragRejected,\n            })}\n            role='presentation'\n          >\n            <FileDragAndDropContent isDragRejected={isDragRejected} />\n          </div>\n        )}\n        {children}\n      </Component>\n    </DragAndDropUploadContext.Provider>\n  );\n};\n\nexport type FileDragAndDropContentProps = {\n  isDragRejected: boolean;\n};\n\nexport const FileDragAndDropContent = ({\n  isDragRejected,\n}: FileDragAndDropContentProps) => {\n  const { t } = useTranslationContext();\n  const { IconUpload } = useComponentContextIcons();\n  return (\n    <div className='str-chat__dropzone-container__content'>\n      {isDragRejected ? (\n        <p>{t('Some of the files will not be accepted')}</p>\n      ) : (\n        <>\n          <IconUpload />\n          <p>{t('Drag your files here')}</p>\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,2BAA2B,MAAM,cAEpC,EACD,iBAAiB,KACnB,CAAC;AAED,IAAa,oCAAoC,WAAW,wBAAwB;;;;;;;AAQpF,IAAa,gCAAgC;CAC3C,MAAM,EAAE,oBAAoB,4BAA4B;CAExD,MAAM,kBAAkB,6BAA6B;CAErD,gBAAgB;EAGd,OAFoB,kBAAkB,gBAAgB,kBAAkB,WAAW;CAGrF,GAAG,CAAC,iBAAiB,eAAe,CAAC;AACvC;AAEA,IAAM,wCAAwC,WAAkC;CAC9E,eAAe,MAAM,YAAY;CACjC,iBAAiB,MAAM,YAAY,6BAA6B;AAClE;;;;;;;;;;;;;;;;;AAkBA,IAAa,yBAAyB,EACpC,UACA,WACA,WAAW,YAAY,OACvB,YAUK;CACL,MAAM,kBAAkB,uBAAiC,IAAI,IAAI,CAAC;CAClE,MAAM,yBAAyB,0BAA0B;CACzD,MAAM,2BAA2B,4BAA4B;CAC7D,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,oBAAoB,0BAA0B;CACtD,MAAM,EAAE,eAAe,oBAAoB,cACzC,gBAAgB,aAChB,oCACF;CAEA,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,iCAAiC,OAAO,KAAK,sBAAsB,CAAC,CAAC,SAAS;CAEpF,MAAM,SAAS,cAEX,cAAc,QAAuC,cAAc,cAAc;EAC/E,aAAa,eAAb,aAAa,aAAe,CAAC;EAC7B,OAAO;CACT,GAAG,CAAC,CAAC,GACP,CAAC,aAAa,CAChB;CAEA,MAAM,kBAAkB,aAAa,OAAgC;EACnE,gBAAgB,QAAQ,IAAI,EAAE;EAE9B,aAAa;GACX,gBAAgB,QAAQ,OAAO,EAAE;EACnC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,aAAa,UAAkB;EAChD,gBAAgB,QAAQ,SAAS,OAAO,GAAG,KAAK,CAAC;CACnD,GAAG,CAAC,CAAC;CAEL,MAAM,EACJ,cACA,cACA,cAAc,mBACZ,YAAY;EACd;EAGA,UAAU,iCACN,CAAC,mBAAmB,mBACpB;EACJ,UAAU;EACV,SAAS;EACT,YAAY;EACZ,QAAQ,iCACJ,gBAAgB,kBAAkB,cAClC;CACN,CAAC;CAID,IAAI,yBAAyB,oBAAoB,MAC/C,OAAO,oBAAC,WAAD;EAAsB;EAAY;CAAoB,CAAA;CAG/D,MAAM,gBAAgB,KAAK,2BAA2B,SAAS;CAE/D,OACE,oBAAC,yBAAyB,UAA1B;EAAmC,OAAO,EAAE,gBAAgB;YAC1D,qBAAC,WAAD;GAAW,GAAI,aAAa;IAAE,WAAW;IAAe;GAAM,CAAC;aAA/D,CACG,gBACC,oBAAC,OAAD;IACE,WAAW,KAAK,gCAAgC,EAC9C,8CAA8C,eAChD,CAAC;IACD,MAAK;cAEL,oBAAC,wBAAD,EAAwC,eAAiB,CAAA;GACtD,CAAA,GAEN,QACQ;;CACsB,CAAA;AAEvC;AAMA,IAAa,0BAA0B,EACrC,qBACiC;CACjC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,eAAe,yBAAyB;CAChD,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,iBACC,oBAAC,KAAD,EAAA,UAAI,EAAE,wCAAwC,EAAK,CAAA,IAEnD,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,YAAD,CAAa,CAAA,GACb,oBAAC,KAAD,EAAA,UAAI,EAAE,sBAAsB,EAAK,CAAA,CACjC,EAAA,CAAA;CAED,CAAA;AAET"}
+{"version":3,"file":"WithDragAndDropUpload.mjs","names":[],"sources":["../../../../src/components/MessageComposer/WithDragAndDropUpload.tsx"],"sourcesContent":["import type { CSSProperties, ElementType, PropsWithChildren } from 'react';\nimport React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport clsx from 'clsx';\nimport type { MessageComposerConfig } from 'stream-chat';\n\nimport {\n  useComponentContextIcons,\n  useIsWithinMessageComposerContext,\n  useTranslationContext,\n} from '../../context';\nimport { useAttachmentManagerState, useMessageComposerController } from './hooks';\nimport { useStateStore } from '../../store';\nimport { useIsCooldownActive } from './hooks/useIsCooldownActive';\n\nconst DragAndDropUploadContext = React.createContext<{\n  subscribeToDrop: ((fn: (files: File[]) => void) => () => void) | null;\n}>({\n  subscribeToDrop: null,\n});\n\nexport const useDragAndDropUploadContext = () => useContext(DragAndDropUploadContext);\n\n/**\n * @private This hook should be used only once directly in the `MessageComposerProvider` to\n * register `uploadNewFiles` functions of the rendered message composers. Each `MessageComposer`\n * will then be notified when the drop event occurs from within the `WithDragAndDropUpload`\n * component.\n */\nexport const useRegisterDropHandlers = () => {\n  const { subscribeToDrop } = useDragAndDropUploadContext();\n\n  const messageComposer = useMessageComposerController();\n\n  useEffect(() => {\n    const unsubscribe = subscribeToDrop?.(messageComposer.attachmentManager.uploadFiles);\n\n    return unsubscribe;\n  }, [subscribeToDrop, messageComposer]);\n};\n\nconst attachmentManagerConfigStateSelector = (state: MessageComposerConfig) => ({\n  acceptedFiles: state.attachments.acceptedFiles,\n  multipleUploads: state.attachments.maxNumberOfFilesPerMessage > 1,\n});\n\n/**\n * Wrapper to replace now deprecated `Channel.dragAndDropWindow` option.\n *\n * @example\n * ```tsx\n * <Channel>\n *  <WithDragAndDropUpload component=\"section\" className=\"message-list-dnd-wrapper\">\n *    <MessageList />\n *    <MessageComposer />\n *  </WithDragAndDropUpload>\n * <Channel>\n * ```\n */\nexport const WithDragAndDropUpload = ({\n  children,\n  className,\n  component: Component = 'div',\n  style,\n}: PropsWithChildren<{\n  acceptedFiles?: string[];\n  /**\n   * @description An element to render as a wrapper onto which drag & drop functionality will be applied.\n   * @default 'div'\n   */\n  component?: ElementType;\n  className?: string;\n  style?: CSSProperties;\n}>) => {\n  const dropHandlersRef = useRef<Set<(f: File[]) => void>>(new Set());\n  const dragAndDropUploadContext = useDragAndDropUploadContext();\n  const messageComposer = useMessageComposerController();\n  const { isUploadEnabled } = useAttachmentManagerState();\n  const { acceptedFiles, multipleUploads } = useStateStore(\n    messageComposer.configState,\n    attachmentManagerConfigStateSelector,\n  );\n\n  const isCooldownActive = useIsCooldownActive();\n  // if message composer context is available, there's no need to use the queue\n  const isWithinMessageComposerContext = useIsWithinMessageComposerContext();\n\n  const accept = useMemo(\n    () =>\n      acceptedFiles.reduce<Record<string, Array<string>>>((mediaTypeMap, mediaType) => {\n        mediaTypeMap[mediaType] ??= [];\n        return mediaTypeMap;\n      }, {}),\n    [acceptedFiles],\n  );\n\n  const subscribeToDrop = useCallback((fn: (files: File[]) => void) => {\n    dropHandlersRef.current.add(fn);\n\n    return () => {\n      dropHandlersRef.current.delete(fn);\n    };\n  }, []);\n\n  const handleDrop = useCallback((files: File[]) => {\n    dropHandlersRef.current.forEach((fn) => fn(files));\n  }, []);\n\n  const {\n    getRootProps,\n    isDragActive,\n    isDragReject: isDragRejected,\n  } = useDropzone({\n    accept,\n    // apply `disabled` rules if available, otherwise allow anything and\n    // let the `uploadNewFiles` handle the limitations internally\n    disabled: isWithinMessageComposerContext\n      ? !isUploadEnabled || isCooldownActive\n      : false,\n    multiple: multipleUploads,\n    noClick: true,\n    noKeyboard: true,\n    onDrop: isWithinMessageComposerContext\n      ? messageComposer.attachmentManager.uploadFiles\n      : handleDrop,\n  });\n\n  // nested WithDragAndDropUpload components render wrappers without functionality\n  // (MessageComposerUI has a default WithDragAndDropUpload)\n  if (dragAndDropUploadContext.subscribeToDrop !== null) {\n    return <Component className={className}>{children}</Component>;\n  }\n\n  const rootClassName = clsx('str-chat__dropzone-root', className);\n\n  return (\n    <DragAndDropUploadContext.Provider value={{ subscribeToDrop }}>\n      <Component {...getRootProps({ className: rootClassName, style })}>\n        {isDragActive && (\n          <div\n            className={clsx('str-chat__dropzone-container', {\n              'str-chat__dropzone-container--not-accepted': isDragRejected,\n            })}\n            role='presentation'\n          >\n            <FileDragAndDropContent isDragRejected={isDragRejected} />\n          </div>\n        )}\n        {children}\n      </Component>\n    </DragAndDropUploadContext.Provider>\n  );\n};\n\nexport type FileDragAndDropContentProps = {\n  isDragRejected: boolean;\n};\n\nexport const FileDragAndDropContent = ({\n  isDragRejected,\n}: FileDragAndDropContentProps) => {\n  const { IconUpload } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  return (\n    <div className='str-chat__dropzone-container__content'>\n      {isDragRejected ? (\n        <p>\n          {t(\n            'messageComposer.dragDropUpload.someFilesNotAccepted.text',\n            'Some of the files will not be accepted',\n          )}\n        </p>\n      ) : (\n        <>\n          <IconUpload />\n          <p>\n            {t('messageComposer.dragDropUpload.dragFiles.text', 'Drag your files here')}\n          </p>\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,2BAA2B,MAAM,cAEpC,EACD,iBAAiB,KACnB,CAAC;AAED,IAAa,oCAAoC,WAAW,wBAAwB;;;;;;;AAQpF,IAAa,gCAAgC;CAC3C,MAAM,EAAE,oBAAoB,4BAA4B;CAExD,MAAM,kBAAkB,6BAA6B;CAErD,gBAAgB;EAGd,OAFoB,kBAAkB,gBAAgB,kBAAkB,WAAW;CAGrF,GAAG,CAAC,iBAAiB,eAAe,CAAC;AACvC;AAEA,IAAM,wCAAwC,WAAkC;CAC9E,eAAe,MAAM,YAAY;CACjC,iBAAiB,MAAM,YAAY,6BAA6B;AAClE;;;;;;;;;;;;;;AAeA,IAAa,yBAAyB,EACpC,UACA,WACA,WAAW,YAAY,OACvB,YAUK;CACL,MAAM,kBAAkB,uBAAiC,IAAI,IAAI,CAAC;CAClE,MAAM,2BAA2B,4BAA4B;CAC7D,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,oBAAoB,0BAA0B;CACtD,MAAM,EAAE,eAAe,oBAAoB,cACzC,gBAAgB,aAChB,oCACF;CAEA,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,iCAAiC,kCAAkC;CAEzE,MAAM,SAAS,cAEX,cAAc,QAAuC,cAAc,cAAc;EAC/E,aAAa,eAAe,CAAC;EAC7B,OAAO;CACT,GAAG,CAAC,CAAC,GACP,CAAC,aAAa,CAChB;CAEA,MAAM,kBAAkB,aAAa,OAAgC;EACnE,gBAAgB,QAAQ,IAAI,EAAE;EAE9B,aAAa;GACX,gBAAgB,QAAQ,OAAO,EAAE;EACnC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,aAAa,UAAkB;EAChD,gBAAgB,QAAQ,SAAS,OAAO,GAAG,KAAK,CAAC;CACnD,GAAG,CAAC,CAAC;CAEL,MAAM,EACJ,cACA,cACA,cAAc,mBACZ,YAAY;EACd;EAGA,UAAU,iCACN,CAAC,mBAAmB,mBACpB;EACJ,UAAU;EACV,SAAS;EACT,YAAY;EACZ,QAAQ,iCACJ,gBAAgB,kBAAkB,cAClC;CACN,CAAC;CAID,IAAI,yBAAyB,oBAAoB,MAC/C,OAAO,oBAAC,WAAD;EAAsB;EAAY;CAAoB,CAAA;CAG/D,MAAM,gBAAgB,KAAK,2BAA2B,SAAS;CAE/D,OACE,oBAAC,yBAAyB,UAA1B;EAAmC,OAAO,EAAE,gBAAgB;YAC1D,qBAAC,WAAD;GAAW,GAAI,aAAa;IAAE,WAAW;IAAe;GAAM,CAAC;aAA/D,CACG,gBACC,oBAAC,OAAD;IACE,WAAW,KAAK,gCAAgC,EAC9C,8CAA8C,eAChD,CAAC;IACD,MAAK;cAEL,oBAAC,wBAAD,EAAwC,eAAiB,CAAA;GACtD,CAAA,GAEN,QACQ;;CACsB,CAAA;AAEvC;AAMA,IAAa,0BAA0B,EACrC,qBACiC;CACjC,MAAM,EAAE,eAAe,yBAAyB;CAChD,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,iBACC,oBAAC,KAAD,EAAA,UACG,EACC,4DACA,wCACF,EACC,CAAA,IAEH,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,YAAD,CAAa,CAAA,GACb,oBAAC,KAAD,EAAA,UACG,EAAE,iDAAiD,sBAAsB,EACzE,CAAA,CACH,EAAA,CAAA;CAED,CAAA;AAET"}

package/dist/es/components/MessageComposer/hooks/useAttachmentManagerState.mjs

@@ -2,18 +2,31 @@ import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { useMessageComposerController } from "./useMessageComposerController.mjs";
 //#region src/components/MessageComposer/hooks/useAttachmentManagerState.ts
 var stateSelector = (state) => ({ attachments: state.attachments });
+var composerConfigSelector = ({ attachments, location, polls }) => ({
+	attachmentsEnabled: attachments.enabled,
+	customCdn: attachments.customCdn,
+	locationEnabled: location.enabled,
+	maxNumberOfFilesPerMessage: attachments.maxNumberOfFilesPerMessage,
+	pollsEnabled: polls.enabled
+});
 var useAttachmentManagerState = () => {
-	const { attachmentManager } = useMessageComposerController();
+	const messageComposer = useMessageComposerController();
+	const { attachmentManager } = messageComposer;
 	const { attachments } = useStateStore(attachmentManager.state, stateSelector);
+	const { attachmentsEnabled, customCdn, locationEnabled, pollsEnabled } = useStateStore(messageComposer.configState, composerConfigSelector);
 	return {
 		attachments,
+		attachmentsEnabled,
 		availableUploadSlots: attachmentManager.availableUploadSlots,
 		blockedUploadsCount: attachmentManager.blockedUploadsCount,
+		customCdn,
 		failedUploadsCount: attachmentManager.failedUploadsCount,
 		hasAvailableUploadSlots: attachmentManager.hasAvailableUploadSlots,
-		hasCustomDoUploadRequest: attachmentManager.hasCustomDoUploadRequest,
 		isUploadEnabled: attachmentManager.isUploadEnabled,
+		locationEnabled,
+		maxNumberOfFilesPerMessage: attachmentManager.maxNumberOfFilesPerMessage,
 		pendingUploadsCount: attachmentManager.pendingUploadsCount,
+		pollsEnabled,
 		successfulUploadsCount: attachmentManager.successfulUploadsCount,
 		uploadsInProgressCount: attachmentManager.uploadsInProgressCount
 	};

package/dist/es/components/MessageComposer/hooks/useAttachmentManagerState.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useAttachmentManagerState.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useAttachmentManagerState.ts"],"sourcesContent":["import { useMessageComposerController } from './useMessageComposerController';\nimport { useStateStore } from '../../../store';\nimport type { AttachmentManagerState } from 'stream-chat';\n\nconst stateSelector = (state: AttachmentManagerState) => ({\n  attachments: state.attachments,\n});\n\nexport const useAttachmentManagerState = () => {\n  const { attachmentManager } = useMessageComposerController();\n  const { attachments } = useStateStore(attachmentManager.state, stateSelector);\n  return {\n    attachments,\n    availableUploadSlots: attachmentManager.availableUploadSlots,\n    blockedUploadsCount: attachmentManager.blockedUploadsCount,\n    failedUploadsCount: attachmentManager.failedUploadsCount,\n    hasAvailableUploadSlots: attachmentManager.hasAvailableUploadSlots,\n    hasCustomDoUploadRequest: attachmentManager.hasCustomDoUploadRequest,\n    isUploadEnabled: attachmentManager.isUploadEnabled,\n    pendingUploadsCount: attachmentManager.pendingUploadsCount,\n    successfulUploadsCount: attachmentManager.successfulUploadsCount,\n    uploadsInProgressCount: attachmentManager.uploadsInProgressCount,\n  };\n};\n"],"mappings":";;;AAIA,IAAM,iBAAiB,WAAmC,EACxD,aAAa,MAAM,YACrB;AAEA,IAAa,kCAAkC;CAC7C,MAAM,EAAE,sBAAsB,6BAA6B;CAC3D,MAAM,EAAE,gBAAgB,cAAc,kBAAkB,OAAO,aAAa;CAC5E,OAAO;EACL;EACA,sBAAsB,kBAAkB;EACxC,qBAAqB,kBAAkB;EACvC,oBAAoB,kBAAkB;EACtC,yBAAyB,kBAAkB;EAC3C,0BAA0B,kBAAkB;EAC5C,iBAAiB,kBAAkB;EACnC,qBAAqB,kBAAkB;EACvC,wBAAwB,kBAAkB;EAC1C,wBAAwB,kBAAkB;CAC5C;AACF"}
+{"version":3,"file":"useAttachmentManagerState.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useAttachmentManagerState.ts"],"sourcesContent":["import { useMessageComposerController } from './useMessageComposerController';\nimport { useStateStore } from '../../../store';\nimport type { AttachmentManagerState, MessageComposerConfig } from 'stream-chat';\n\nconst stateSelector = (state: AttachmentManagerState) => ({\n  attachments: state.attachments,\n});\n\nconst composerConfigSelector = ({\n  attachments,\n  location,\n  polls,\n}: MessageComposerConfig) => ({\n  attachmentsEnabled: attachments.enabled,\n  customCdn: attachments.customCdn,\n  locationEnabled: location.enabled,\n  maxNumberOfFilesPerMessage: attachments.maxNumberOfFilesPerMessage,\n  pollsEnabled: polls.enabled,\n});\n\nexport const useAttachmentManagerState = () => {\n  const messageComposer = useMessageComposerController();\n  const { attachmentManager } = messageComposer;\n  const { attachments } = useStateStore(attachmentManager.state, stateSelector);\n  const { attachmentsEnabled, customCdn, locationEnabled, pollsEnabled } = useStateStore(\n    messageComposer.configState,\n    composerConfigSelector,\n  );\n\n  return {\n    attachments,\n    attachmentsEnabled,\n    availableUploadSlots: attachmentManager.availableUploadSlots,\n    blockedUploadsCount: attachmentManager.blockedUploadsCount,\n    customCdn,\n    failedUploadsCount: attachmentManager.failedUploadsCount,\n    hasAvailableUploadSlots: attachmentManager.hasAvailableUploadSlots,\n    isUploadEnabled: attachmentManager.isUploadEnabled,\n    locationEnabled,\n    maxNumberOfFilesPerMessage: attachmentManager.maxNumberOfFilesPerMessage,\n    pendingUploadsCount: attachmentManager.pendingUploadsCount,\n    pollsEnabled,\n    successfulUploadsCount: attachmentManager.successfulUploadsCount,\n    uploadsInProgressCount: attachmentManager.uploadsInProgressCount,\n  };\n};\n"],"mappings":";;;AAIA,IAAM,iBAAiB,WAAmC,EACxD,aAAa,MAAM,YACrB;AAEA,IAAM,0BAA0B,EAC9B,aACA,UACA,aAC4B;CAC5B,oBAAoB,YAAY;CAChC,WAAW,YAAY;CACvB,iBAAiB,SAAS;CAC1B,4BAA4B,YAAY;CACxC,cAAc,MAAM;AACtB;AAEA,IAAa,kCAAkC;CAC7C,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,sBAAsB;CAC9B,MAAM,EAAE,gBAAgB,cAAc,kBAAkB,OAAO,aAAa;CAC5E,MAAM,EAAE,oBAAoB,WAAW,iBAAiB,iBAAiB,cACvE,gBAAgB,aAChB,sBACF;CAEA,OAAO;EACL;EACA;EACA,sBAAsB,kBAAkB;EACxC,qBAAqB,kBAAkB;EACvC;EACA,oBAAoB,kBAAkB;EACtC,yBAAyB,kBAAkB;EAC3C,iBAAiB,kBAAkB;EACnC;EACA,4BAA4B,kBAAkB;EAC9C,qBAAqB,kBAAkB;EACvC;EACA,wBAAwB,kBAAkB;EAC1C,wBAAwB,kBAAkB;CAC5C;AACF"}

package/dist/es/components/MessageComposer/hooks/useCooldownRemaining.mjs

@@ -1,5 +1,5 @@
-import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
 import "stream-chat";
 //#region src/components/MessageComposer/hooks/useCooldownRemaining.tsx
 var cooldownTimerStateSelector = (state) => ({ cooldownRemaining: state.cooldownRemaining });
@@ -10,8 +10,7 @@ var cooldownTimerStateSelector = (state) => ({ cooldownRemaining: state.cooldown
 * the initial value is now 70s from which the countdown will continue using useTimer() hook.
 */
 var useCooldownRemaining = () => {
-	const { channel } = useChannelStateContext();
-	return useStateStore(channel.cooldownTimer.state, cooldownTimerStateSelector).cooldownRemaining ?? 0;
+	return useStateStore(useChannel().cooldownTimer.state, cooldownTimerStateSelector).cooldownRemaining ?? 0;
 };
 //#endregion
 export { useCooldownRemaining };

package/dist/es/components/MessageComposer/hooks/useCooldownRemaining.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCooldownRemaining.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useCooldownRemaining.tsx"],"sourcesContent":["import { type CooldownTimerState } from 'stream-chat';\n\nimport { useChannelStateContext } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nconst cooldownTimerStateSelector = (state: CooldownTimerState) => ({\n  cooldownRemaining: state.cooldownRemaining,\n});\n\n/**\n * Provides and initial value of cooldown, from which the countdown should start, e.g.:\n *\n * The value of channel.data.cooldown is 100s but 30s has already elapsed, user reloads the page,\n * the initial value is now 70s from which the countdown will continue using useTimer() hook.\n */\nexport const useCooldownRemaining = (): number => {\n  const { channel } = useChannelStateContext();\n  return (\n    useStateStore(channel.cooldownTimer.state, cooldownTimerStateSelector)\n      .cooldownRemaining ?? 0\n  );\n};\n"],"mappings":";;;;AAKA,IAAM,8BAA8B,WAA+B,EACjE,mBAAmB,MAAM,kBAC3B;;;;;;;AAQA,IAAa,6BAAqC;CAChD,MAAM,EAAE,YAAY,uBAAuB;CAC3C,OACE,cAAc,QAAQ,cAAc,OAAO,0BAA0B,CAAC,CACnE,qBAAqB;AAE5B"}
+{"version":3,"file":"useCooldownRemaining.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useCooldownRemaining.tsx"],"sourcesContent":["import { type CooldownTimerState } from 'stream-chat';\n\nimport { useChannel } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nconst cooldownTimerStateSelector = (state: CooldownTimerState) => ({\n  cooldownRemaining: state.cooldownRemaining,\n});\n\n/**\n * Provides and initial value of cooldown, from which the countdown should start, e.g.:\n *\n * The value of channel.data.cooldown is 100s but 30s has already elapsed, user reloads the page,\n * the initial value is now 70s from which the countdown will continue using useTimer() hook.\n */\nexport const useCooldownRemaining = (): number => {\n  const channel = useChannel();\n  return (\n    useStateStore(channel.cooldownTimer.state, cooldownTimerStateSelector)\n      .cooldownRemaining ?? 0\n  );\n};\n"],"mappings":";;;;AAKA,IAAM,8BAA8B,WAA+B,EACjE,mBAAmB,MAAM,kBAC3B;;;;;;;AAQA,IAAa,6BAAqC;CAEhD,OACE,cAFc,WAEA,CAAA,CAAQ,cAAc,OAAO,0BAA0B,CAAC,CACnE,qBAAqB;AAE5B"}

package/dist/es/components/MessageComposer/hooks/useCreateMessageComposerContext.mjs

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 //#region src/components/MessageComposer/hooks/useCreateMessageComposerContext.ts
 var useCreateMessageComposerContext = (value) => {
-	const { additionalTextareaProps, asyncMessagesMultiSendEnabled, audioRecordingEnabled, emojiSearchIndex, focus, handleSubmit, hideSendButton, maxRows, minRows, onPaste, parent, recordingController, shouldSubmit, textareaRef } = value;
+	const { additionalTextareaProps, asyncMessagesMultiSendEnabled, audioRecordingEnabled, emojiSearchIndex, focus, hideSendButton, maxRows, minRows, onPaste, parent, recordingController, shouldSubmit, textareaRef } = value;
 	const parentId = parent?.id;
 	return useMemo(() => ({
 		additionalTextareaProps,
@@ -9,7 +9,6 @@ var useCreateMessageComposerContext = (value) => {
 		audioRecordingEnabled,
 		emojiSearchIndex,
 		focus,
-		handleSubmit,
 		hideSendButton,
 		maxRows,
 		minRows,
@@ -22,7 +21,6 @@ var useCreateMessageComposerContext = (value) => {
 		asyncMessagesMultiSendEnabled,
 		audioRecordingEnabled,
 		emojiSearchIndex,
-		handleSubmit,
 		hideSendButton,
 		minRows,
 		parentId,

package/dist/es/components/MessageComposer/hooks/useCreateMessageComposerContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateMessageComposerContext.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useCreateMessageComposerContext.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { MessageComposerContextValue } from '../../../context/MessageComposerContext';\n\nexport const useCreateMessageComposerContext = (value: MessageComposerContextValue) => {\n  const {\n    additionalTextareaProps,\n    asyncMessagesMultiSendEnabled,\n    audioRecordingEnabled,\n    emojiSearchIndex,\n    focus,\n    handleSubmit,\n    hideSendButton,\n    maxRows,\n    minRows,\n    onPaste,\n    parent,\n    recordingController,\n    shouldSubmit,\n    textareaRef,\n  } = value;\n\n  const parentId = parent?.id;\n\n  const messageComposerContext: MessageComposerContextValue = useMemo(\n    () => ({\n      additionalTextareaProps,\n      asyncMessagesMultiSendEnabled,\n      audioRecordingEnabled,\n      emojiSearchIndex,\n      focus,\n      handleSubmit,\n      hideSendButton,\n      maxRows,\n      minRows,\n      onPaste,\n      parent,\n      recordingController,\n      shouldSubmit,\n      textareaRef,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      asyncMessagesMultiSendEnabled,\n      audioRecordingEnabled,\n      emojiSearchIndex,\n      handleSubmit,\n      hideSendButton,\n      minRows,\n      parentId,\n      recordingController,\n    ],\n  );\n\n  return messageComposerContext;\n};\n"],"mappings":";;AAIA,IAAa,mCAAmC,UAAuC;CACrF,MAAM,EACJ,yBACA,+BACA,uBACA,kBACA,OACA,cACA,gBACA,SACA,SACA,SACA,QACA,qBACA,cACA,gBACE;CAEJ,MAAM,WAAW,QAAQ;CAgCzB,OA9B4D,eACnD;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAGK;AACT"}
+{"version":3,"file":"useCreateMessageComposerContext.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useCreateMessageComposerContext.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { MessageComposerContextValue } from '../../../context/MessageComposerContext';\n\nexport const useCreateMessageComposerContext = (value: MessageComposerContextValue) => {\n  const {\n    additionalTextareaProps,\n    asyncMessagesMultiSendEnabled,\n    audioRecordingEnabled,\n    emojiSearchIndex,\n    focus,\n    hideSendButton,\n    maxRows,\n    minRows,\n    onPaste,\n    parent,\n    recordingController,\n    shouldSubmit,\n    textareaRef,\n  } = value;\n\n  const parentId = parent?.id;\n\n  const messageComposerContext: MessageComposerContextValue = useMemo(\n    () => ({\n      additionalTextareaProps,\n      asyncMessagesMultiSendEnabled,\n      audioRecordingEnabled,\n      emojiSearchIndex,\n      focus,\n      hideSendButton,\n      maxRows,\n      minRows,\n      onPaste,\n      parent,\n      recordingController,\n      shouldSubmit,\n      textareaRef,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      asyncMessagesMultiSendEnabled,\n      audioRecordingEnabled,\n      emojiSearchIndex,\n      hideSendButton,\n      minRows,\n      parentId,\n      recordingController,\n    ],\n  );\n\n  return messageComposerContext;\n};\n"],"mappings":";;AAIA,IAAa,mCAAmC,UAAuC;CACrF,MAAM,EACJ,yBACA,+BACA,uBACA,kBACA,OACA,gBACA,SACA,SACA,SACA,QACA,qBACA,cACA,gBACE;CAEJ,MAAM,WAAW,QAAQ;CA8BzB,OA5B4D,eACnD;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAGK;AACT"}

package/dist/es/components/MessageComposer/hooks/useIsCooldownActive.mjs

@@ -1,10 +1,9 @@
-import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
 //#region src/components/MessageComposer/hooks/useIsCooldownActive.ts
 var cooldownTimerStateSelector = (state) => ({ isCooldownActive: !!state.cooldownRemaining });
 var useIsCooldownActive = () => {
-	const { channel } = useChannelStateContext();
-	return useStateStore(channel.cooldownTimer.state, cooldownTimerStateSelector).isCooldownActive;
+	return useStateStore(useChannel().cooldownTimer.state, cooldownTimerStateSelector).isCooldownActive;
 };
 //#endregion
 export { useIsCooldownActive };

package/dist/es/components/MessageComposer/hooks/useIsCooldownActive.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIsCooldownActive.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useIsCooldownActive.ts"],"sourcesContent":["import { useChannelStateContext } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport type { CooldownTimerState } from 'stream-chat';\n\nconst cooldownTimerStateSelector = (state: CooldownTimerState) => ({\n  isCooldownActive: !!state.cooldownRemaining,\n});\n\nexport const useIsCooldownActive = () => {\n  const { channel } = useChannelStateContext();\n  return useStateStore(channel.cooldownTimer.state, cooldownTimerStateSelector)\n    .isCooldownActive;\n};\n"],"mappings":";;;AAIA,IAAM,8BAA8B,WAA+B,EACjE,kBAAkB,CAAC,CAAC,MAAM,kBAC5B;AAEA,IAAa,4BAA4B;CACvC,MAAM,EAAE,YAAY,uBAAuB;CAC3C,OAAO,cAAc,QAAQ,cAAc,OAAO,0BAA0B,CAAC,CAC1E;AACL"}
+{"version":3,"file":"useIsCooldownActive.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useIsCooldownActive.ts"],"sourcesContent":["import { useChannel } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport type { CooldownTimerState } from 'stream-chat';\n\nconst cooldownTimerStateSelector = (state: CooldownTimerState) => ({\n  isCooldownActive: !!state.cooldownRemaining,\n});\n\nexport const useIsCooldownActive = () => {\n  const channel = useChannel();\n  return useStateStore(channel.cooldownTimer.state, cooldownTimerStateSelector)\n    .isCooldownActive;\n};\n"],"mappings":";;;AAIA,IAAM,8BAA8B,WAA+B,EACjE,kBAAkB,CAAC,CAAC,MAAM,kBAC5B;AAEA,IAAa,4BAA4B;CAEvC,OAAO,cADS,WACK,CAAA,CAAQ,cAAc,OAAO,0BAA0B,CAAC,CAC1E;AACL"}

package/dist/es/components/MessageComposer/hooks/useMessageComposerBindings.mjs

@@ -1,21 +1,17 @@
 import { useTextareaRef } from "./useTextareaRef.mjs";
-import { useSubmitHandler } from "./useSubmitHandler.mjs";
 import { usePasteHandler } from "./usePasteHandler.mjs";
 import { useMediaRecorder } from "../../MediaRecorder/hooks/useMediaRecorder.mjs";
 //#region src/components/MessageComposer/hooks/useMessageComposerBindings.ts
 var useMessageComposerBindings = (props) => {
 	const { asyncMessagesMultiSendEnabled, audioRecordingConfig, audioRecordingEnabled } = props;
 	const { textareaRef } = useTextareaRef(props);
-	const { handleSubmit } = useSubmitHandler(props);
 	const recordingController = useMediaRecorder({
 		asyncMessagesMultiSendEnabled,
 		enabled: !!audioRecordingEnabled,
-		handleSubmit,
 		recordingConfig: audioRecordingConfig
 	});
 	const { onPaste } = usePasteHandler();
 	return {
-		handleSubmit,
 		onPaste,
 		recordingController,
 		textareaRef

package/dist/es/components/MessageComposer/hooks/useMessageComposerBindings.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMessageComposerBindings.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerBindings.ts"],"sourcesContent":["import type React from 'react';\nimport { useTextareaRef } from './useTextareaRef';\nimport { useSubmitHandler } from './useSubmitHandler';\nimport { usePasteHandler } from './usePasteHandler';\nimport type { RecordingController } from '../../MediaRecorder/hooks/useMediaRecorder';\nimport { useMediaRecorder } from '../../MediaRecorder/hooks/useMediaRecorder';\nimport type { MessageComposerProps } from '../MessageComposer';\n\nexport type UseMessageComposerBindingsParams = {\n  handleSubmit: (event?: React.BaseSyntheticEvent) => void;\n  onPaste: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;\n  recordingController: RecordingController;\n  textareaRef: React.RefObject<HTMLTextAreaElement | null | undefined>;\n};\n\nexport const useMessageComposerBindings = (\n  props: MessageComposerProps,\n): UseMessageComposerBindingsParams => {\n  const { asyncMessagesMultiSendEnabled, audioRecordingConfig, audioRecordingEnabled } =\n    props;\n\n  const { textareaRef } = useTextareaRef(props);\n\n  const { handleSubmit } = useSubmitHandler(props);\n\n  const recordingController = useMediaRecorder({\n    asyncMessagesMultiSendEnabled,\n    enabled: !!audioRecordingEnabled,\n    handleSubmit,\n    recordingConfig: audioRecordingConfig,\n  });\n\n  const { onPaste } = usePasteHandler();\n\n  return {\n    handleSubmit,\n    onPaste,\n    recordingController,\n    textareaRef,\n  };\n};\n"],"mappings":";;;;;AAeA,IAAa,8BACX,UACqC;CACrC,MAAM,EAAE,+BAA+B,sBAAsB,0BAC3D;CAEF,MAAM,EAAE,gBAAgB,eAAe,KAAK;CAE5C,MAAM,EAAE,iBAAiB,iBAAiB,KAAK;CAE/C,MAAM,sBAAsB,iBAAiB;EAC3C;EACA,SAAS,CAAC,CAAC;EACX;EACA,iBAAiB;CACnB,CAAC;CAED,MAAM,EAAE,YAAY,gBAAgB;CAEpC,OAAO;EACL;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"useMessageComposerBindings.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerBindings.ts"],"sourcesContent":["import type React from 'react';\nimport { useTextareaRef } from './useTextareaRef';\nimport { usePasteHandler } from './usePasteHandler';\nimport type { RecordingController } from '../../MediaRecorder/hooks/useMediaRecorder';\nimport { useMediaRecorder } from '../../MediaRecorder/hooks/useMediaRecorder';\nimport type { MessageComposerProps } from '../MessageComposer';\n\nexport type UseMessageComposerBindingsParams = {\n  onPaste: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;\n  recordingController: RecordingController;\n  textareaRef: React.RefObject<HTMLTextAreaElement | null | undefined>;\n};\n\nexport const useMessageComposerBindings = (\n  props: MessageComposerProps,\n): UseMessageComposerBindingsParams => {\n  const { asyncMessagesMultiSendEnabled, audioRecordingConfig, audioRecordingEnabled } =\n    props;\n\n  const { textareaRef } = useTextareaRef(props);\n\n  const recordingController = useMediaRecorder({\n    asyncMessagesMultiSendEnabled,\n    enabled: !!audioRecordingEnabled,\n    recordingConfig: audioRecordingConfig,\n  });\n\n  const { onPaste } = usePasteHandler();\n\n  return {\n    onPaste,\n    recordingController,\n    textareaRef,\n  };\n};\n"],"mappings":";;;;AAaA,IAAa,8BACX,UACqC;CACrC,MAAM,EAAE,+BAA+B,sBAAsB,0BAC3D;CAEF,MAAM,EAAE,gBAAgB,eAAe,KAAK;CAE5C,MAAM,sBAAsB,iBAAiB;EAC3C;EACA,SAAS,CAAC,CAAC;EACX,iBAAiB;CACnB,CAAC;CAED,MAAM,EAAE,YAAY,gBAAgB;CAEpC,OAAO;EACL;EACA;EACA;CACF;AACF"}

package/dist/es/components/MessageComposer/hooks/useMessageComposerCommands.mjs

@@ -1,5 +1,4 @@
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
-import { getChannelConfig } from "../../../utils/getChannelConfig.mjs";
 import { useMessageComposerController } from "./useMessageComposerController.mjs";
 import { useMemo } from "react";
 //#region src/components/MessageComposer/hooks/useMessageComposerCommands.ts
@@ -7,15 +6,16 @@ var messageComposerStateSelector = ({ editedMessage, quotedMessage }) => ({
 	editedMessage,
 	quotedMessage
 });
+var channelConfigStateSelector = ({ availableCommands }) => ({ availableCommands });
 var useMessageComposerCommands = () => {
 	const messageComposer = useMessageComposerController();
-	const channelConfig = getChannelConfig(messageComposer.channel);
+	const { availableCommands } = useStateStore(messageComposer.channel.configState, channelConfigStateSelector);
 	const { editedMessage, quotedMessage } = useStateStore(messageComposer.state, messageComposerStateSelector);
-	return useMemo(() => (channelConfig?.commands ?? []).filter((command) => !!command.name).map((command) => ({
+	return useMemo(() => (availableCommands ?? []).filter((command) => !!command.name).map((command) => ({
 		command,
 		enabled: !messageComposer.isCommandDisabled(command)
 	})), [
-		channelConfig,
+		availableCommands,
 		editedMessage,
 		messageComposer,
 		quotedMessage

package/dist/es/components/MessageComposer/hooks/useMessageComposerCommands.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMessageComposerCommands.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerCommands.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { CommandResponse, MessageComposerState } from 'stream-chat';\n\nimport { useStateStore } from '../../../store';\nimport { getChannelConfig } from '../../../utils/getChannelConfig';\nimport { useMessageComposerController } from './useMessageComposerController';\n\nconst messageComposerStateSelector = ({\n  editedMessage,\n  quotedMessage,\n}: MessageComposerState) => ({\n  editedMessage,\n  quotedMessage,\n});\n\nexport type MessageComposerCommand = {\n  command: CommandResponse & { name: string };\n  enabled: boolean;\n};\n\nexport const useMessageComposerCommands = () => {\n  const messageComposer = useMessageComposerController();\n  const channelConfig = getChannelConfig(messageComposer.channel);\n  const { editedMessage, quotedMessage } = useStateStore(\n    messageComposer.state,\n    messageComposerStateSelector,\n  );\n\n  return useMemo<MessageComposerCommand[]>(\n    () =>\n      (channelConfig?.commands ?? [])\n        .filter(\n          (command): command is CommandResponse & { name: string } => !!command.name,\n        )\n        .map((command) => ({\n          command,\n          enabled: !messageComposer.isCommandDisabled(command),\n        })),\n    // editedMessage and quotedMessage are necessary in deps for reactivity\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [channelConfig, editedMessage, messageComposer, quotedMessage],\n  );\n};\n"],"mappings":";;;;;AAOA,IAAM,gCAAgC,EACpC,eACA,qBAC2B;CAC3B;CACA;AACF;AAOA,IAAa,mCAAmC;CAC9C,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,gBAAgB,iBAAiB,gBAAgB,OAAO;CAC9D,MAAM,EAAE,eAAe,kBAAkB,cACvC,gBAAgB,OAChB,4BACF;CAEA,OAAO,eAEF,eAAe,YAAY,CAAC,EAAA,CAC1B,QACE,YAA2D,CAAC,CAAC,QAAQ,IACxE,CAAC,CACA,KAAK,aAAa;EACjB;EACA,SAAS,CAAC,gBAAgB,kBAAkB,OAAO;CACrD,EAAE,GAGN;EAAC;EAAe;EAAe;EAAiB;CAAa,CAC/D;AACF"}
+{"version":3,"file":"useMessageComposerCommands.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerCommands.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { ChannelConfig, Command, MessageComposerState } from 'stream-chat';\n\nimport { useStateStore } from '../../../store';\nimport { useMessageComposerController } from './useMessageComposerController';\n\nconst messageComposerStateSelector = ({\n  editedMessage,\n  quotedMessage,\n}: MessageComposerState) => ({\n  editedMessage,\n  quotedMessage,\n});\n\nconst channelConfigStateSelector = ({ availableCommands }: ChannelConfig) => ({\n  availableCommands,\n});\n\nexport type MessageComposerCommand = {\n  command: Command & { name: string };\n  enabled: boolean;\n};\n\nexport const useMessageComposerCommands = () => {\n  const messageComposer = useMessageComposerController();\n  const { availableCommands } = useStateStore(\n    messageComposer.channel.configState,\n    channelConfigStateSelector,\n  );\n  const { editedMessage, quotedMessage } = useStateStore(\n    messageComposer.state,\n    messageComposerStateSelector,\n  );\n\n  return useMemo<MessageComposerCommand[]>(\n    () =>\n      (availableCommands ?? [])\n        .filter((command): command is Command & { name: string } => !!command.name)\n        .map((command) => ({\n          command,\n          enabled: !messageComposer.isCommandDisabled(command),\n        })),\n    // editedMessage and quotedMessage are necessary in deps for reactivity\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [availableCommands, editedMessage, messageComposer, quotedMessage],\n  );\n};\n"],"mappings":";;;;AAMA,IAAM,gCAAgC,EACpC,eACA,qBAC2B;CAC3B;CACA;AACF;AAEA,IAAM,8BAA8B,EAAE,yBAAwC,EAC5E,kBACF;AAOA,IAAa,mCAAmC;CAC9C,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,sBAAsB,cAC5B,gBAAgB,QAAQ,aACxB,0BACF;CACA,MAAM,EAAE,eAAe,kBAAkB,cACvC,gBAAgB,OAChB,4BACF;CAEA,OAAO,eAEF,qBAAqB,CAAC,EAAA,CACpB,QAAQ,YAAmD,CAAC,CAAC,QAAQ,IAAI,CAAC,CAC1E,KAAK,aAAa;EACjB;EACA,SAAS,CAAC,gBAAgB,kBAAkB,OAAO;CACrD,EAAE,GAGN;EAAC;EAAmB;EAAe;EAAiB;CAAa,CACnE;AACF"}

package/dist/es/components/MessageComposer/hooks/useMessageComposerController.mjs

@@ -1,47 +1,21 @@
-import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
 import { useChatContext } from "../../../context/ChatContext.mjs";
-import { useLegacyThreadContext } from "../../Thread/LegacyThreadContext.mjs";
-import { useMessageComposerControllerContext } from "../MessageComposer.mjs";
 import { useThreadContext } from "../../Threads/ThreadContext.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
+import { useMessageComposerControllerContext } from "../../../context/MessageComposerControllerContext.mjs";
 import { useEffect, useMemo } from "react";
-import { MessageComposer } from "stream-chat";
 //#region src/components/MessageComposer/hooks/useMessageComposerController.ts
 var useMessageComposerController = () => {
 	const { client } = useChatContext();
 	const { messageComposerCache: queueCache } = client;
-	const { channel } = useChannelStateContext();
-	const { legacyThread: parentMessage } = useLegacyThreadContext();
+	const channel = useChannel();
 	const threadInstance = useThreadContext();
-	const composerFromOverrideContext = useMessageComposerControllerContext();
-	const cachedParentMessage = useMemo(() => {
-		if (!parentMessage) return void 0;
-		return parentMessage;
-	}, [parentMessage?.id]);
-	const messageComposer = useMemo(() => {
-		if (composerFromOverrideContext) return composerFromOverrideContext;
-		if (threadInstance) return threadInstance.messageComposer;
-		else if (cachedParentMessage) {
-			const compositionContext = {
-				...cachedParentMessage,
-				legacyThreadId: cachedParentMessage.id
-			};
-			const tag = MessageComposer.constructTag(compositionContext);
-			const cachedComposer = queueCache.get(tag);
-			if (cachedComposer) return cachedComposer;
-			return new MessageComposer({
-				client,
-				compositionContext
-			});
-		} else return channel.messageComposer;
-	}, [
-		cachedParentMessage,
-		channel.messageComposer,
-		client,
-		composerFromOverrideContext,
-		queueCache,
+	const suppliedComposer = useMessageComposerControllerContext();
+	const messageComposer = useMemo(() => suppliedComposer ?? threadInstance?.messageComposer ?? channel.messageComposer, [
+		channel,
+		suppliedComposer,
 		threadInstance
 	]);
-	if (["legacy_thread", "message"].includes(messageComposer.contextType) && !queueCache.peek(messageComposer.tag)) queueCache.add(messageComposer.tag, messageComposer);
+	if (["message"].includes(messageComposer.contextType) && !queueCache.peek(messageComposer.tag)) queueCache.add(messageComposer.tag, messageComposer);
 	useEffect(() => {
 		const unsubscribe = messageComposer.registerSubscriptions();
 		return () => {

package/dist/es/components/MessageComposer/hooks/useMessageComposerController.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMessageComposerController.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerController.ts"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { MessageComposer as MessageComposerController } from 'stream-chat';\nimport { useThreadContext } from '../../Threads';\nimport { useChannelStateContext, useChatContext } from '../../../context';\nimport { useLegacyThreadContext } from '../../Thread';\nimport { useMessageComposerControllerContext } from '../MessageComposer';\n\nexport const useMessageComposerController = () => {\n  const { client } = useChatContext();\n  const { messageComposerCache: queueCache } = client;\n  const { channel } = useChannelStateContext();\n  const { legacyThread: parentMessage } = useLegacyThreadContext();\n  const threadInstance = useThreadContext();\n  // custom supplied composer overriding default composer retrieval behavior\n  const composerFromOverrideContext = useMessageComposerControllerContext();\n\n  const cachedParentMessage = useMemo(() => {\n    if (!parentMessage) return undefined;\n\n    return parentMessage;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parentMessage?.id]);\n\n  // composer hierarchy\n  // edited message (always new) -> thread instance (own) -> thread message (always new) -> channel (own)\n  // editedMessage ?? thread ?? parentMessage ?? channel;\n  const messageComposer = useMemo(() => {\n    if (composerFromOverrideContext) return composerFromOverrideContext;\n\n    if (threadInstance) {\n      return threadInstance.messageComposer;\n    } else if (cachedParentMessage) {\n      const compositionContext = {\n        ...cachedParentMessage,\n        legacyThreadId: cachedParentMessage.id,\n      };\n\n      const tag = MessageComposerController.constructTag(compositionContext);\n\n      const cachedComposer = queueCache.get(tag);\n      if (cachedComposer) return cachedComposer;\n\n      return new MessageComposerController({\n        client,\n        compositionContext,\n      });\n    } else {\n      return channel.messageComposer;\n    }\n  }, [\n    cachedParentMessage,\n    channel.messageComposer,\n    client,\n    composerFromOverrideContext,\n    queueCache,\n    threadInstance,\n  ]);\n\n  if (\n    (['legacy_thread', 'message'] as MessageComposerController['contextType'][]).includes(\n      messageComposer.contextType,\n    ) &&\n    !queueCache.peek(messageComposer.tag)\n  ) {\n    queueCache.add(messageComposer.tag, messageComposer);\n  }\n\n  useEffect(() => {\n    const unsubscribe = messageComposer.registerSubscriptions();\n    return () => {\n      unsubscribe();\n    };\n  }, [messageComposer]);\n\n  return messageComposer;\n};\n"],"mappings":";;;;;;;;AAOA,IAAa,qCAAqC;CAChD,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,sBAAsB,eAAe;CAC7C,MAAM,EAAE,YAAY,uBAAuB;CAC3C,MAAM,EAAE,cAAc,kBAAkB,uBAAuB;CAC/D,MAAM,iBAAiB,iBAAiB;CAExC,MAAM,8BAA8B,oCAAoC;CAExE,MAAM,sBAAsB,cAAc;EACxC,IAAI,CAAC,eAAe,OAAO,KAAA;EAE3B,OAAO;CAET,GAAG,CAAC,eAAe,EAAE,CAAC;CAKtB,MAAM,kBAAkB,cAAc;EACpC,IAAI,6BAA6B,OAAO;EAExC,IAAI,gBACF,OAAO,eAAe;OACjB,IAAI,qBAAqB;GAC9B,MAAM,qBAAqB;IACzB,GAAG;IACH,gBAAgB,oBAAoB;GACtC;GAEA,MAAM,MAAM,gBAA0B,aAAa,kBAAkB;GAErE,MAAM,iBAAiB,WAAW,IAAI,GAAG;GACzC,IAAI,gBAAgB,OAAO;GAE3B,OAAO,IAAI,gBAA0B;IACnC;IACA;GACF,CAAC;EACH,OACE,OAAO,QAAQ;CAEnB,GAAG;EACD;EACA,QAAQ;EACR;EACA;EACA;EACA;CACF,CAAC;CAED,IACG,CAAC,iBAAiB,SAAS,CAAC,CAAgD,SAC3E,gBAAgB,WAClB,KACA,CAAC,WAAW,KAAK,gBAAgB,GAAG,GAEpC,WAAW,IAAI,gBAAgB,KAAK,eAAe;CAGrD,gBAAgB;EACd,MAAM,cAAc,gBAAgB,sBAAsB;EAC1D,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,eAAe,CAAC;CAEpB,OAAO;AACT"}
+{"version":3,"file":"useMessageComposerController.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerController.ts"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport type { MessageComposer as MessageComposerController } from 'stream-chat';\nimport { useThreadContext } from '../../Threads';\nimport {\n  useChannel,\n  useChatContext,\n  useMessageComposerControllerContext,\n} from '../../../context';\n\nexport const useMessageComposerController = () => {\n  const { client } = useChatContext();\n  const { messageComposerCache: queueCache } = client;\n  const channel = useChannel();\n  const threadInstance = useThreadContext();\n  const suppliedComposer = useMessageComposerControllerContext();\n\n  // composer hierarchy: supplied by the integrator -> thread instance (own) -> channel (own)\n  const messageComposer = useMemo(\n    () => suppliedComposer ?? threadInstance?.messageComposer ?? channel.messageComposer,\n    [channel, suppliedComposer, threadInstance],\n  );\n\n  // Only a supplied composer can carry a message context (an edit); the thread's and channel's own\n  // never do.\n  if (\n    (['message'] as MessageComposerController['contextType'][]).includes(\n      messageComposer.contextType,\n    ) &&\n    !queueCache.peek(messageComposer.tag)\n  ) {\n    queueCache.add(messageComposer.tag, messageComposer);\n  }\n\n  useEffect(() => {\n    const unsubscribe = messageComposer.registerSubscriptions();\n    return () => {\n      unsubscribe();\n    };\n  }, [messageComposer]);\n\n  return messageComposer;\n};\n"],"mappings":";;;;;;AASA,IAAa,qCAAqC;CAChD,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,sBAAsB,eAAe;CAC7C,MAAM,UAAU,WAAW;CAC3B,MAAM,iBAAiB,iBAAiB;CACxC,MAAM,mBAAmB,oCAAoC;CAG7D,MAAM,kBAAkB,cAChB,oBAAoB,gBAAgB,mBAAmB,QAAQ,iBACrE;EAAC;EAAS;EAAkB;CAAc,CAC5C;CAIA,IACG,CAAC,SAAS,CAAC,CAAgD,SAC1D,gBAAgB,WAClB,KACA,CAAC,WAAW,KAAK,gBAAgB,GAAG,GAEpC,WAAW,IAAI,gBAAgB,KAAK,eAAe;CAGrD,gBAAgB;EACd,MAAM,cAAc,gBAAgB,sBAAsB;EAC1D,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,eAAe,CAAC;CAEpB,OAAO;AACT"}

package/dist/es/components/MessageComposer/hooks/useMessageComposerHasSendableData.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMessageComposerHasSendableData.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerHasSendableData.ts"],"sourcesContent":["import { useMessageComposerController } from './useMessageComposerController';\nimport { useStateStore } from '../../../store';\nimport type { EditingAuditState } from 'stream-chat';\n\nconst editingAuditStateStateSelector = (state: EditingAuditState) => state;\n\nexport const useMessageComposerHasSendableData = () => {\n  const messageComposer = useMessageComposerController();\n  useStateStore(messageComposer.editingAuditState, editingAuditStateStateSelector);\n  // `hasSendableData` accounts for uploads in flight on its own: it relaxes while a composition\n  // middleware declaring `allowsPendingUploads` is installed - see\n  // `MessageComposer.allowsPendingUploads` in `stream-chat`.\n  return messageComposer.hasSendableData;\n};\n"],"mappings":";;;AAIA,IAAM,kCAAkC,UAA6B;AAErE,IAAa,0CAA0C;CACrD,MAAM,kBAAkB,6BAA6B;CACrD,cAAc,gBAAgB,mBAAmB,8BAA8B;CAI/E,OAAO,gBAAgB;AACzB"}
+{"version":3,"file":"useMessageComposerHasSendableData.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerHasSendableData.ts"],"sourcesContent":["import { useMessageComposerController } from './useMessageComposerController';\nimport { useStateStore } from '../../../store';\nimport type { EditingAuditState } from 'stream-chat';\n\nconst editingAuditStateStateSelector = (state: EditingAuditState) => state;\n\nexport const useMessageComposerHasSendableData = () => {\n  const messageComposer = useMessageComposerController();\n  useStateStore(messageComposer.editingAuditState, editingAuditStateStateSelector);\n  return messageComposer.hasSendableData;\n};\n"],"mappings":";;;AAIA,IAAM,kCAAkC,UAA6B;AAErE,IAAa,0CAA0C;CACrD,MAAM,kBAAkB,6BAA6B;CACrD,cAAc,gBAAgB,mBAAmB,8BAA8B;CAC/E,OAAO,gBAAgB;AACzB"}

package/dist/es/components/MessageComposer/hooks/useMessageComposerSubmitFn.mjs

@@ -0,0 +1,16 @@
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+import { useCallback } from "react";
+//#region src/components/MessageComposer/hooks/useMessageComposerSubmitFn.ts
+/**
+* Submits what the composer holds: saves the edit while a message is being edited, sends a new
+* message otherwise. Checked when submitting rather than when rendering, and shared by every submit
+* control, so the send button and the Enter key cannot disagree about it.
+*/
+var useMessageComposerSubmitFn = () => {
+	const messageComposer = useMessageComposerController();
+	return useCallback(() => messageComposer.editedMessage ? messageComposer.update() : messageComposer.send(), [messageComposer]);
+};
+//#endregion
+export { useMessageComposerSubmitFn };
+
+//# sourceMappingURL=useMessageComposerSubmitFn.mjs.map

package/dist/es/components/MessageComposer/hooks/useMessageComposerSubmitFn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageComposerSubmitFn.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageComposerSubmitFn.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { useMessageComposerController } from './useMessageComposerController';\n\n/**\n * Submits what the composer holds: saves the edit while a message is being edited, sends a new\n * message otherwise. Checked when submitting rather than when rendering, and shared by every submit\n * control, so the send button and the Enter key cannot disagree about it.\n */\nexport const useMessageComposerSubmitFn = () => {\n  const messageComposer = useMessageComposerController();\n\n  return useCallback(\n    () =>\n      messageComposer.editedMessage ? messageComposer.update() : messageComposer.send(),\n    [messageComposer],\n  );\n};\n"],"mappings":";;;;;;;;AASA,IAAa,mCAAmC;CAC9C,MAAM,kBAAkB,6BAA6B;CAErD,OAAO,kBAEH,gBAAgB,gBAAgB,gBAAgB,OAAO,IAAI,gBAAgB,KAAK,GAClF,CAAC,eAAe,CAClB;AACF"}

package/dist/es/components/MessageComposer/hooks/usePasteHandler.mjs

@@ -1,5 +1,5 @@
-import { dataTransferItemsToFiles } from "../../ReactFileUtilities/utils.mjs";
 import { useMessageComposerController } from "./useMessageComposerController.mjs";
+import { dataTransferItemsToFiles } from "../../ReactFileUtilities/utils.mjs";
 import { useCallback } from "react";
 //#region src/components/MessageComposer/hooks/usePasteHandler.ts
 var usePasteHandler = () => {

package/dist/es/components/MessageComposer/hooks/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/utils.ts"],"sourcesContent":["export function prettifyFileSize(bytes: number, precision = 3) {\n  const units = ['B', 'kB', 'MB', 'GB'];\n  const exponent =\n    bytes === 0\n      ? 0\n      : Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);\n  const mantissa = bytes / 1024 ** exponent;\n  // `toPrecision` switches to exponential notation as soon as the value needs more integer digits\n  // than the requested significant digits, so any size just below the next unit boundary came out\n  // as `1.00e+3 B` (1000-1023 B, and the same range in kB/MB/GB). Such a mantissa has no fraction\n  // worth showing at this precision, so round it to an integer instead.\n  const formattedMantissa =\n    precision === 0 || mantissa >= 10 ** precision\n      ? Math.round(mantissa).toString()\n      : mantissa.toPrecision(precision);\n  return `${formattedMantissa} ${units[exponent]}`;\n}\n"],"mappings":";AAAA,SAAgB,iBAAiB,OAAe,YAAY,GAAG;CAC7D,MAAM,QAAQ;EAAC;EAAK;EAAM;EAAM;CAAI;CACpC,MAAM,WACJ,UAAU,IACN,IACA,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC,GAAG,MAAM,SAAS,CAAC;CAC7E,MAAM,WAAW,QAAQ,QAAQ;CASjC,OAAO,GAHL,cAAc,KAAK,YAAY,MAAM,YACjC,KAAK,MAAM,QAAQ,CAAC,CAAC,SAAS,IAC9B,SAAS,YAAY,SAAS,EACR,GAAG,MAAM;AACvC"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/utils.ts"],"sourcesContent":["export function prettifyFileSize(bytes: number, precision = 3) {\n  const units = ['B', 'kB', 'MB', 'GB'];\n  const exponent =\n    bytes === 0\n      ? 0\n      : Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);\n  const mantissa = bytes / 1024 ** exponent;\n  const formattedMantissa =\n    // `toPrecision` switches to exponential notation as soon as the value needs more integer\n    // digits than the requested significant digits, so any size just below the next unit boundary\n    // came out as `1.00e+3 B` (1000-1023 B, and the same range in kB/MB/GB). Such a mantissa has\n    // no fraction worth showing at this precision, so round it to an integer instead.\n    precision === 0 || mantissa >= 10 ** precision\n      ? Math.round(mantissa).toString()\n      : mantissa.toPrecision(precision);\n  return `${formattedMantissa} ${units[exponent]}`;\n}\n"],"mappings":";AAAA,SAAgB,iBAAiB,OAAe,YAAY,GAAG;CAC7D,MAAM,QAAQ;EAAC;EAAK;EAAM;EAAM;CAAI;CACpC,MAAM,WACJ,UAAU,IACN,IACA,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC,GAAG,MAAM,SAAS,CAAC;CAC7E,MAAM,WAAW,QAAQ,QAAQ;CASjC,OAAO,GAHL,cAAc,KAAK,YAAY,MAAM,YACjC,KAAK,MAAM,QAAQ,CAAC,CAAC,SAAS,IAC9B,SAAS,YAAY,SAAS,EACR,GAAG,MAAM;AACvC"}

package/dist/es/components/MessageComposer/icons.mjs

@@ -2,7 +2,7 @@ import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/MessageComposer/icons.tsx
 var UploadIcon = () => {
-	const { t } = useTranslationContext("UploadIcon");
+	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsxs("svg", {
 		"data-testid": "attach-icon",
 		fill: "none",
@@ -11,7 +11,7 @@ var UploadIcon = () => {
 		width: "24",
 		xmlns: "http://www.w3.org/2000/svg",
 		children: [
-			/* @__PURE__ */ jsx("title", { children: t("Attach files") }),
+			/* @__PURE__ */ jsx("title", { children: t("messageComposer.icons.attachFiles.text", "Attach files") }),
 			/* @__PURE__ */ jsx("g", {
 				clipPath: "url(#clip0_10878_5)",
 				children: /* @__PURE__ */ jsx("path", {

package/dist/es/components/MessageComposer/icons.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"icons.mjs","names":[],"sources":["../../../../src/components/MessageComposer/icons.tsx"],"sourcesContent":["import { useTranslationContext } from '../../context/TranslationContext';\n\nexport const UploadIcon = () => {\n  const { t } = useTranslationContext('UploadIcon');\n  return (\n    <svg\n      data-testid='attach-icon'\n      fill='none'\n      height='24'\n      viewBox='0 0 24 24'\n      width='24'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <title>{t('Attach files')}</title>\n      <g clipPath='url(#clip0_10878_5)'>\n        <path\n          d='M12.9997 6.99993L10.9997 6.99993L10.9997 10.9999L6.99972 10.9999L6.99972 12.9999L10.9997 12.9999L10.9997 16.9999L12.9997 16.9999L12.9997 12.9999L16.9997 12.9999L16.9997 10.9999L12.9997 10.9999L12.9997 6.99993ZM11.9997 1.99992C6.47972 1.99992 1.99972 6.47993 1.99972 11.9999C1.99972 17.5199 6.47972 21.9999 11.9997 21.9999C17.5197 21.9999 21.9997 17.5199 21.9997 11.9999C21.9997 6.47993 17.5197 1.99992 11.9997 1.99992ZM11.9997 19.9999C7.58972 19.9999 3.99972 16.4099 3.99972 11.9999C3.99972 7.58993 7.58972 3.99993 11.9997 3.99993C16.4097 3.99993 19.9997 7.58993 19.9997 11.9999C19.9997 16.4099 16.4097 19.9999 11.9997 19.9999Z'\n          fill='black'\n        />\n      </g>\n      <defs>\n        <clipPath id='clip0_10878_5'>\n          <rect fill='white' height='24' width='24' />\n        </clipPath>\n      </defs>\n    </svg>\n  );\n};\n\nexport const BinIcon = () => (\n  <svg fill='currentColor' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>\n    <path d='M8.00033 25.3333C8.00033 26.8 9.20033 28 10.667 28H21.3337C22.8003 28 24.0003 26.8 24.0003 25.3333V12C24.0003 10.5333 22.8003 9.33333 21.3337 9.33333H10.667C9.20033 9.33333 8.00033 10.5333 8.00033 12V25.3333ZM24.0003 5.33333H20.667L19.7203 4.38667C19.4803 4.14667 19.1337 4 18.787 4H13.2137C12.867 4 12.5203 4.14667 12.2803 4.38667L11.3337 5.33333H8.00033C7.26699 5.33333 6.66699 5.93333 6.66699 6.66667C6.66699 7.4 7.26699 8 8.00033 8H24.0003C24.7337 8 25.3337 7.4 25.3337 6.66667C25.3337 5.93333 24.7337 5.33333 24.0003 5.33333Z' />\n  </svg>\n);\n\nexport const PauseIcon = () => (\n  <svg\n    data-testid='str-chat__pause-icon'\n    fill='currentColor'\n    viewBox='0 0 16 20'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <path d='M0 19.3333H5.33333V0.666626H0V19.3333ZM10.6667 0.666626V19.3333H16V0.666626H10.6667Z' />\n  </svg>\n);\n\nexport const PlayIcon = () => (\n  <svg\n    data-testid='str-chat__play-icon'\n    fill='currentColor'\n    viewBox='0 0 14 18'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <path d='M0.236328 2.09338V15.9067C0.236328 16.9601 1.39633 17.6001 2.28966 17.0267L13.143 10.1201C13.9697 9.60005 13.9697 8.40005 13.143 7.86672L2.28966 0.973385C1.39633 0.400051 0.236328 1.04005 0.236328 2.09338Z' />\n  </svg>\n);\n\nexport const CheckSignIcon = () => (\n  <svg fill='currentColor' viewBox='0 0 18 14' xmlns='http://www.w3.org/2000/svg'>\n    <path d='M5.79457 10.875L2.32457 7.40502C1.93457 7.01502 1.30457 7.01502 0.91457 7.40502C0.52457 7.79502 0.52457 8.42502 0.91457 8.81502L5.09457 12.995C5.48457 13.385 6.11457 13.385 6.50457 12.995L17.0846 2.41502C17.4746 2.02502 17.4746 1.39502 17.0846 1.00502C16.6946 0.615024 16.0646 0.615024 15.6746 1.00502L5.79457 10.875Z' />\n  </svg>\n);\n"],"mappings":";;;AAEA,IAAa,mBAAmB;CAC9B,MAAM,EAAE,MAAM,sBAAsB,YAAY;CAChD,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,MAAK;EACL,QAAO;EACP,SAAQ;EACR,OAAM;EACN,OAAM;YANR;GAQE,oBAAC,SAAD,EAAA,UAAQ,EAAE,cAAc,EAAS,CAAA;GACjC,oBAAC,KAAD;IAAG,UAAS;cACV,oBAAC,QAAD;KACE,GAAE;KACF,MAAK;IACN,CAAA;GACA,CAAA;GACH,oBAAC,QAAD,EAAA,UACE,oBAAC,YAAD;IAAU,IAAG;cACX,oBAAC,QAAD;KAAM,MAAK;KAAQ,QAAO;KAAK,OAAM;IAAM,CAAA;GACnC,CAAA,EACN,CAAA;EACH;;AAET;AAEA,IAAa,gBACX,oBAAC,OAAD;CAAK,MAAK;CAAe,SAAQ;CAAY,OAAM;WACjD,oBAAC,QAAD,EAAM,GAAE,qhBAAshB,CAAA;AAC3hB,CAAA;AAGP,IAAa,kBACX,oBAAC,OAAD;CACE,eAAY;CACZ,MAAK;CACL,SAAQ;CACR,OAAM;WAEN,oBAAC,QAAD,EAAM,GAAE,uFAAwF,CAAA;AAC7F,CAAA;AAGP,IAAa,iBACX,oBAAC,OAAD;CACE,eAAY;CACZ,MAAK;CACL,SAAQ;CACR,OAAM;WAEN,oBAAC,QAAD,EAAM,GAAE,gNAAiN,CAAA;AACtN,CAAA;AAGP,IAAa,sBACX,oBAAC,OAAD;CAAK,MAAK;CAAe,SAAQ;CAAY,OAAM;WACjD,oBAAC,QAAD,EAAM,GAAE,gUAAiU,CAAA;AACtU,CAAA"}
+{"version":3,"file":"icons.mjs","names":[],"sources":["../../../../src/components/MessageComposer/icons.tsx"],"sourcesContent":["import { useTranslationContext } from '../../context/TranslationContext';\n\nexport const UploadIcon = () => {\n  const { t } = useTranslationContext();\n  return (\n    <svg\n      data-testid='attach-icon'\n      fill='none'\n      height='24'\n      viewBox='0 0 24 24'\n      width='24'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <title>{t('messageComposer.icons.attachFiles.text', 'Attach files')}</title>\n      <g clipPath='url(#clip0_10878_5)'>\n        <path\n          d='M12.9997 6.99993L10.9997 6.99993L10.9997 10.9999L6.99972 10.9999L6.99972 12.9999L10.9997 12.9999L10.9997 16.9999L12.9997 16.9999L12.9997 12.9999L16.9997 12.9999L16.9997 10.9999L12.9997 10.9999L12.9997 6.99993ZM11.9997 1.99992C6.47972 1.99992 1.99972 6.47993 1.99972 11.9999C1.99972 17.5199 6.47972 21.9999 11.9997 21.9999C17.5197 21.9999 21.9997 17.5199 21.9997 11.9999C21.9997 6.47993 17.5197 1.99992 11.9997 1.99992ZM11.9997 19.9999C7.58972 19.9999 3.99972 16.4099 3.99972 11.9999C3.99972 7.58993 7.58972 3.99993 11.9997 3.99993C16.4097 3.99993 19.9997 7.58993 19.9997 11.9999C19.9997 16.4099 16.4097 19.9999 11.9997 19.9999Z'\n          fill='black'\n        />\n      </g>\n      <defs>\n        <clipPath id='clip0_10878_5'>\n          <rect fill='white' height='24' width='24' />\n        </clipPath>\n      </defs>\n    </svg>\n  );\n};\n\nexport const BinIcon = () => (\n  <svg fill='currentColor' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>\n    <path d='M8.00033 25.3333C8.00033 26.8 9.20033 28 10.667 28H21.3337C22.8003 28 24.0003 26.8 24.0003 25.3333V12C24.0003 10.5333 22.8003 9.33333 21.3337 9.33333H10.667C9.20033 9.33333 8.00033 10.5333 8.00033 12V25.3333ZM24.0003 5.33333H20.667L19.7203 4.38667C19.4803 4.14667 19.1337 4 18.787 4H13.2137C12.867 4 12.5203 4.14667 12.2803 4.38667L11.3337 5.33333H8.00033C7.26699 5.33333 6.66699 5.93333 6.66699 6.66667C6.66699 7.4 7.26699 8 8.00033 8H24.0003C24.7337 8 25.3337 7.4 25.3337 6.66667C25.3337 5.93333 24.7337 5.33333 24.0003 5.33333Z' />\n  </svg>\n);\n\nexport const PauseIcon = () => (\n  <svg\n    data-testid='str-chat__pause-icon'\n    fill='currentColor'\n    viewBox='0 0 16 20'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <path d='M0 19.3333H5.33333V0.666626H0V19.3333ZM10.6667 0.666626V19.3333H16V0.666626H10.6667Z' />\n  </svg>\n);\n\nexport const PlayIcon = () => (\n  <svg\n    data-testid='str-chat__play-icon'\n    fill='currentColor'\n    viewBox='0 0 14 18'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <path d='M0.236328 2.09338V15.9067C0.236328 16.9601 1.39633 17.6001 2.28966 17.0267L13.143 10.1201C13.9697 9.60005 13.9697 8.40005 13.143 7.86672L2.28966 0.973385C1.39633 0.400051 0.236328 1.04005 0.236328 2.09338Z' />\n  </svg>\n);\n\nexport const CheckSignIcon = () => (\n  <svg fill='currentColor' viewBox='0 0 18 14' xmlns='http://www.w3.org/2000/svg'>\n    <path d='M5.79457 10.875L2.32457 7.40502C1.93457 7.01502 1.30457 7.01502 0.91457 7.40502C0.52457 7.79502 0.52457 8.42502 0.91457 8.81502L5.09457 12.995C5.48457 13.385 6.11457 13.385 6.50457 12.995L17.0846 2.41502C17.4746 2.02502 17.4746 1.39502 17.0846 1.00502C16.6946 0.615024 16.0646 0.615024 15.6746 1.00502L5.79457 10.875Z' />\n  </svg>\n);\n"],"mappings":";;;AAEA,IAAa,mBAAmB;CAC9B,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,MAAK;EACL,QAAO;EACP,SAAQ;EACR,OAAM;EACN,OAAM;YANR;GAQE,oBAAC,SAAD,EAAA,UAAQ,EAAE,0CAA0C,cAAc,EAAS,CAAA;GAC3E,oBAAC,KAAD;IAAG,UAAS;cACV,oBAAC,QAAD;KACE,GAAE;KACF,MAAK;IACN,CAAA;GACA,CAAA;GACH,oBAAC,QAAD,EAAA,UACE,oBAAC,YAAD;IAAU,IAAG;cACX,oBAAC,QAAD;KAAM,MAAK;KAAQ,QAAO;KAAK,OAAM;IAAM,CAAA;GACnC,CAAA,EACN,CAAA;EACH;;AAET;AAEA,IAAa,gBACX,oBAAC,OAAD;CAAK,MAAK;CAAe,SAAQ;CAAY,OAAM;WACjD,oBAAC,QAAD,EAAM,GAAE,qhBAAshB,CAAA;AAC3hB,CAAA;AAGP,IAAa,kBACX,oBAAC,OAAD;CACE,eAAY;CACZ,MAAK;CACL,SAAQ;CACR,OAAM;WAEN,oBAAC,QAAD,EAAM,GAAE,uFAAwF,CAAA;AAC7F,CAAA;AAGP,IAAa,iBACX,oBAAC,OAAD;CACE,eAAY;CACZ,MAAK;CACL,SAAQ;CACR,OAAM;WAEN,oBAAC,QAAD,EAAM,GAAE,gNAAiN,CAAA;AACtN,CAAA;AAGP,IAAa,sBACX,oBAAC,OAAD;CAAK,MAAK;CAAe,SAAQ;CAAY,OAAM;WACjD,oBAAC,QAAD,EAAM,GAAE,gUAAiU,CAAA;AACtU,CAAA"}

package/dist/es/components/MessageComposer/preEditSnapshot.mjs

@@ -33,13 +33,7 @@ var restorePreEditSnapshot = (messageComposer) => {
 	if (restore) restore();
 	else messageComposer.clear();
 };
-/**
-* Discards the snapshot without restoring (e.g. after a successful edit save).
-*/
-var discardPreEditSnapshot = (messageComposer) => {
-	snapshots.delete(messageComposer);
-};
 //#endregion
-export { discardPreEditSnapshot, restorePreEditSnapshot, savePreEditSnapshot };
+export { restorePreEditSnapshot, savePreEditSnapshot };
 
 //# sourceMappingURL=preEditSnapshot.mjs.map

package/dist/es/components/MessageComposer/preEditSnapshot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"preEditSnapshot.mjs","names":[],"sources":["../../../../src/components/MessageComposer/preEditSnapshot.ts"],"sourcesContent":["import type { MessageComposer } from 'stream-chat';\n\ntype RestoreFunction = () => void;\n\nconst snapshots = new WeakMap<MessageComposer, RestoreFunction>();\n\n/**\n * Captures a full state snapshot of the composer before entering edit mode.\n * Does nothing if a snapshot already exists (e.g. switching between edits).\n */\nexport const savePreEditSnapshot = (messageComposer: MessageComposer) => {\n  if (snapshots.has(messageComposer)) return;\n\n  const composerState = messageComposer.state.getLatestValue();\n  const textState = messageComposer.textComposer.state.getLatestValue();\n  const attachmentState = messageComposer.attachmentManager.state.getLatestValue();\n  const linkPreviewState = messageComposer.linkPreviewsManager.state.getLatestValue();\n  const locationState = messageComposer.locationComposer.state.getLatestValue();\n  const pollState = messageComposer.pollComposer.state.getLatestValue();\n  const customDataState = messageComposer.customDataManager.state.getLatestValue();\n\n  snapshots.set(messageComposer, () => {\n    messageComposer.state.next(composerState);\n    messageComposer.textComposer.state.next(textState);\n    messageComposer.attachmentManager.state.next(attachmentState);\n    messageComposer.linkPreviewsManager.state.next(linkPreviewState);\n    messageComposer.locationComposer.state.next(locationState);\n    messageComposer.pollComposer.state.next(pollState);\n    messageComposer.customDataManager.state.next(customDataState);\n  });\n};\n\n/**\n * Restores the composer to the state captured before editing began.\n * Falls back to `clear()` if no snapshot exists.\n */\nexport const restorePreEditSnapshot = (messageComposer: MessageComposer) => {\n  const restore = snapshots.get(messageComposer);\n  snapshots.delete(messageComposer);\n  if (restore) {\n    restore();\n  } else {\n    messageComposer.clear();\n  }\n};\n\n/**\n * Discards the snapshot without restoring (e.g. after a successful edit save).\n */\nexport const discardPreEditSnapshot = (messageComposer: MessageComposer) => {\n  snapshots.delete(messageComposer);\n};\n"],"mappings":";AAIA,IAAM,4BAAY,IAAI,QAA0C;;;;;AAMhE,IAAa,uBAAuB,oBAAqC;CACvE,IAAI,UAAU,IAAI,eAAe,GAAG;CAEpC,MAAM,gBAAgB,gBAAgB,MAAM,eAAe;CAC3D,MAAM,YAAY,gBAAgB,aAAa,MAAM,eAAe;CACpE,MAAM,kBAAkB,gBAAgB,kBAAkB,MAAM,eAAe;CAC/E,MAAM,mBAAmB,gBAAgB,oBAAoB,MAAM,eAAe;CAClF,MAAM,gBAAgB,gBAAgB,iBAAiB,MAAM,eAAe;CAC5E,MAAM,YAAY,gBAAgB,aAAa,MAAM,eAAe;CACpE,MAAM,kBAAkB,gBAAgB,kBAAkB,MAAM,eAAe;CAE/E,UAAU,IAAI,uBAAuB;EACnC,gBAAgB,MAAM,KAAK,aAAa;EACxC,gBAAgB,aAAa,MAAM,KAAK,SAAS;EACjD,gBAAgB,kBAAkB,MAAM,KAAK,eAAe;EAC5D,gBAAgB,oBAAoB,MAAM,KAAK,gBAAgB;EAC/D,gBAAgB,iBAAiB,MAAM,KAAK,aAAa;EACzD,gBAAgB,aAAa,MAAM,KAAK,SAAS;EACjD,gBAAgB,kBAAkB,MAAM,KAAK,eAAe;CAC9D,CAAC;AACH;;;;;AAMA,IAAa,0BAA0B,oBAAqC;CAC1E,MAAM,UAAU,UAAU,IAAI,eAAe;CAC7C,UAAU,OAAO,eAAe;CAChC,IAAI,SACF,QAAQ;MAER,gBAAgB,MAAM;AAE1B;;;;AAKA,IAAa,0BAA0B,oBAAqC;CAC1E,UAAU,OAAO,eAAe;AAClC"}
+{"version":3,"file":"preEditSnapshot.mjs","names":[],"sources":["../../../../src/components/MessageComposer/preEditSnapshot.ts"],"sourcesContent":["import type { MessageComposer } from 'stream-chat';\n\ntype RestoreFunction = () => void;\n\nconst snapshots = new WeakMap<MessageComposer, RestoreFunction>();\n\n/**\n * Captures a full state snapshot of the composer before entering edit mode.\n * Does nothing if a snapshot already exists (e.g. switching between edits).\n */\nexport const savePreEditSnapshot = (messageComposer: MessageComposer) => {\n  if (snapshots.has(messageComposer)) return;\n\n  const composerState = messageComposer.state.getLatestValue();\n  const textState = messageComposer.textComposer.state.getLatestValue();\n  const attachmentState = messageComposer.attachmentManager.state.getLatestValue();\n  const linkPreviewState = messageComposer.linkPreviewsManager.state.getLatestValue();\n  const locationState = messageComposer.locationComposer.state.getLatestValue();\n  const pollState = messageComposer.pollComposer.state.getLatestValue();\n  const customDataState = messageComposer.customDataManager.state.getLatestValue();\n\n  snapshots.set(messageComposer, () => {\n    messageComposer.state.next(composerState);\n    messageComposer.textComposer.state.next(textState);\n    messageComposer.attachmentManager.state.next(attachmentState);\n    messageComposer.linkPreviewsManager.state.next(linkPreviewState);\n    messageComposer.locationComposer.state.next(locationState);\n    messageComposer.pollComposer.state.next(pollState);\n    messageComposer.customDataManager.state.next(customDataState);\n  });\n};\n\n/**\n * Restores the composer to the state captured before editing began.\n * Falls back to `clear()` if no snapshot exists.\n */\nexport const restorePreEditSnapshot = (messageComposer: MessageComposer) => {\n  const restore = snapshots.get(messageComposer);\n  snapshots.delete(messageComposer);\n  if (restore) {\n    restore();\n  } else {\n    messageComposer.clear();\n  }\n};\n\n/**\n * Discards the snapshot without restoring (e.g. after a successful edit save).\n */\nexport const discardPreEditSnapshot = (messageComposer: MessageComposer) => {\n  snapshots.delete(messageComposer);\n};\n"],"mappings":";AAIA,IAAM,4BAAY,IAAI,QAA0C;;;;;AAMhE,IAAa,uBAAuB,oBAAqC;CACvE,IAAI,UAAU,IAAI,eAAe,GAAG;CAEpC,MAAM,gBAAgB,gBAAgB,MAAM,eAAe;CAC3D,MAAM,YAAY,gBAAgB,aAAa,MAAM,eAAe;CACpE,MAAM,kBAAkB,gBAAgB,kBAAkB,MAAM,eAAe;CAC/E,MAAM,mBAAmB,gBAAgB,oBAAoB,MAAM,eAAe;CAClF,MAAM,gBAAgB,gBAAgB,iBAAiB,MAAM,eAAe;CAC5E,MAAM,YAAY,gBAAgB,aAAa,MAAM,eAAe;CACpE,MAAM,kBAAkB,gBAAgB,kBAAkB,MAAM,eAAe;CAE/E,UAAU,IAAI,uBAAuB;EACnC,gBAAgB,MAAM,KAAK,aAAa;EACxC,gBAAgB,aAAa,MAAM,KAAK,SAAS;EACjD,gBAAgB,kBAAkB,MAAM,KAAK,eAAe;EAC5D,gBAAgB,oBAAoB,MAAM,KAAK,gBAAgB;EAC/D,gBAAgB,iBAAiB,MAAM,KAAK,aAAa;EACzD,gBAAgB,aAAa,MAAM,KAAK,SAAS;EACjD,gBAAgB,kBAAkB,MAAM,KAAK,eAAe;CAC9D,CAAC;AACH;;;;;AAMA,IAAa,0BAA0B,oBAAqC;CAC1E,MAAM,UAAU,UAAU,IAAI,eAAe;CAC7C,UAAU,OAAO,eAAe;CAChC,IAAI,SACF,QAAQ;MAER,gBAAgB,MAAM;AAE1B"}

package/dist/es/components/MessageList/FloatingDateSeparator.mjs

@@ -1,6 +1,6 @@
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { DateSeparator } from "../DateSeparator/DateSeparator.mjs";
 import { useFloatingDateSeparatorMessageList } from "./hooks/MessageList/useFloatingDateSeparatorMessageList.mjs";
+import { DateSeparator } from "../DateSeparator/DateSeparator.mjs";
 import { useFloatingDateSeparator } from "./hooks/VirtualizedMessageList/useFloatingDateSeparator.mjs";
 import { useLayoutEffect } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -11,18 +11,18 @@ import { jsx } from "react/jsx-runtime";
 * Use itemsRenderedRef for Virtuoso, listElement for non-virtualized MessageList.
 */
 var FloatingDateSeparator = (props) => {
-	const { DateSeparator: DateSeparator$1 = DateSeparator } = useComponentContext("FloatingDateSeparator");
-	const { disableDateSeparator, processedMessages } = props;
+	const { DateSeparator: DateSeparator$1 = DateSeparator } = useComponentContext();
+	const { processedMessages, withDateSeparator } = props;
 	const listElement = "listElement" in props ? props.listElement : null;
 	const useDomMode = listElement != null;
 	const virtuosoResult = useFloatingDateSeparator({
-		disableDateSeparator,
-		processedMessages
+		processedMessages,
+		withDateSeparator
 	});
 	const domResult = useFloatingDateSeparatorMessageList({
-		disableDateSeparator,
 		listElement,
-		processedMessages
+		processedMessages,
+		withDateSeparator
 	});
 	const floatingDate = useDomMode ? domResult.floatingDate : virtuosoResult.floatingDate;
 	const showFloatingDate = useDomMode ? domResult.showFloatingDate : virtuosoResult.showFloatingDate;