stream-chat-react 14.11.1 → 14.12.0

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

@@ -0,0 +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"}

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

@@ -0,0 +1,24 @@
+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 useAttachmentManagerState = () => {
+	const { attachmentManager } = useMessageComposerController();
+	const { attachments } = useStateStore(attachmentManager.state, stateSelector);
+	return {
+		attachments,
+		availableUploadSlots: attachmentManager.availableUploadSlots,
+		blockedUploadsCount: attachmentManager.blockedUploadsCount,
+		failedUploadsCount: attachmentManager.failedUploadsCount,
+		hasAvailableUploadSlots: attachmentManager.hasAvailableUploadSlots,
+		hasCustomDoUploadRequest: attachmentManager.hasCustomDoUploadRequest,
+		isUploadEnabled: attachmentManager.isUploadEnabled,
+		pendingUploadsCount: attachmentManager.pendingUploadsCount,
+		successfulUploadsCount: attachmentManager.successfulUploadsCount,
+		uploadsInProgressCount: attachmentManager.uploadsInProgressCount
+	};
+};
+//#endregion
+export { useAttachmentManagerState };
+
+//# sourceMappingURL=useAttachmentManagerState.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,21 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+//#region src/components/MessageComposer/hooks/useAttachmentsForPreview.ts
+var attachmentManagerStateSelector = (state) => ({ attachments: state.attachments });
+var pollComposerStateSelector = (state) => ({ poll: state.data });
+var locationComposerStateSelector = (state) => ({ location: state.location });
+var useAttachmentsForPreview = () => {
+	const { attachmentManager, locationComposer, pollComposer } = useMessageComposerController();
+	const { attachments } = useStateStore(attachmentManager.state, attachmentManagerStateSelector);
+	const { poll } = useStateStore(pollComposer.state, pollComposerStateSelector);
+	const { location } = useStateStore(locationComposer.state, locationComposerStateSelector);
+	return {
+		attachments,
+		location,
+		poll
+	};
+};
+//#endregion
+export { useAttachmentsForPreview };
+
+//# sourceMappingURL=useAttachmentsForPreview.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAttachmentsForPreview.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useAttachmentsForPreview.ts"],"sourcesContent":["import { useMessageComposerController } from './useMessageComposerController';\nimport { useStateStore } from '../../../store';\nimport type {\n  AttachmentManagerState,\n  LocationComposerState,\n  PollComposerState,\n} from 'stream-chat';\n\nconst attachmentManagerStateSelector = (state: AttachmentManagerState) => ({\n  attachments: state.attachments,\n});\nconst pollComposerStateSelector = (state: PollComposerState) => ({\n  poll: state.data,\n});\nconst locationComposerStateSelector = (state: LocationComposerState) => ({\n  location: state.location,\n});\n\nexport const useAttachmentsForPreview = () => {\n  const { attachmentManager, locationComposer, pollComposer } =\n    useMessageComposerController();\n  const { attachments } = useStateStore(\n    attachmentManager.state,\n    attachmentManagerStateSelector,\n  );\n  const { poll } = useStateStore(pollComposer.state, pollComposerStateSelector);\n  const { location } = useStateStore(\n    locationComposer.state,\n    locationComposerStateSelector,\n  );\n\n  return {\n    attachments,\n    location,\n    poll,\n  };\n};\n"],"mappings":";;;AAQA,IAAM,kCAAkC,WAAmC,EACzE,aAAa,MAAM,YACrB;AACA,IAAM,6BAA6B,WAA8B,EAC/D,MAAM,MAAM,KACd;AACA,IAAM,iCAAiC,WAAkC,EACvE,UAAU,MAAM,SAClB;AAEA,IAAa,iCAAiC;CAC5C,MAAM,EAAE,mBAAmB,kBAAkB,iBAC3C,6BAA6B;CAC/B,MAAM,EAAE,gBAAgB,cACtB,kBAAkB,OAClB,8BACF;CACA,MAAM,EAAE,SAAS,cAAc,aAAa,OAAO,yBAAyB;CAC5E,MAAM,EAAE,aAAa,cACnB,iBAAiB,OACjB,6BACF;CAEA,OAAO;EACL;EACA;EACA;CACF;AACF"}

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

@@ -0,0 +1,15 @@
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+import { useEffect, useState } from "react";
+//#region src/components/MessageComposer/hooks/useCanCreatePoll.ts
+var useCanCreatePoll = () => {
+	const { pollComposer } = useMessageComposerController();
+	const [canCreatePoll, setCanCreatePoll] = useState(pollComposer.canCreatePoll);
+	useEffect(() => pollComposer.state.subscribe(() => {
+		setCanCreatePoll(pollComposer.canCreatePoll);
+	}), [pollComposer]);
+	return canCreatePoll;
+};
+//#endregion
+export { useCanCreatePoll };
+
+//# sourceMappingURL=useCanCreatePoll.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCanCreatePoll.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useCanCreatePoll.ts"],"sourcesContent":["import { useMessageComposerController } from './useMessageComposerController';\nimport { useEffect, useState } from 'react';\n\nexport const useCanCreatePoll = () => {\n  const { pollComposer } = useMessageComposerController();\n  const [canCreatePoll, setCanCreatePoll] = useState(pollComposer.canCreatePoll);\n  useEffect(\n    () =>\n      pollComposer.state.subscribe(() => {\n        setCanCreatePoll(pollComposer.canCreatePoll);\n      }),\n    [pollComposer],\n  );\n  return canCreatePoll;\n};\n"],"mappings":";;;AAGA,IAAa,yBAAyB;CACpC,MAAM,EAAE,iBAAiB,6BAA6B;CACtD,MAAM,CAAC,eAAe,oBAAoB,SAAS,aAAa,aAAa;CAC7E,gBAEI,aAAa,MAAM,gBAAgB;EACjC,iBAAiB,aAAa,aAAa;CAC7C,CAAC,GACH,CAAC,YAAY,CACf;CACA,OAAO;AACT"}

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

@@ -0,0 +1,19 @@
+import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import "stream-chat";
+//#region src/components/MessageComposer/hooks/useCooldownRemaining.tsx
+var cooldownTimerStateSelector = (state) => ({ cooldownRemaining: state.cooldownRemaining });
+/**
+* Provides and initial value of cooldown, from which the countdown should start, e.g.:
+*
+* The value of channel.data.cooldown is 100s but 30s has already elapsed, user reloads the page,
+* 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;
+};
+//#endregion
+export { useCooldownRemaining };
+
+//# sourceMappingURL=useCooldownRemaining.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,35 @@
+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 parentId = parent?.id;
+	return useMemo(() => ({
+		additionalTextareaProps,
+		asyncMessagesMultiSendEnabled,
+		audioRecordingEnabled,
+		emojiSearchIndex,
+		focus,
+		handleSubmit,
+		hideSendButton,
+		maxRows,
+		minRows,
+		onPaste,
+		parent,
+		recordingController,
+		shouldSubmit,
+		textareaRef
+	}), [
+		asyncMessagesMultiSendEnabled,
+		audioRecordingEnabled,
+		emojiSearchIndex,
+		handleSubmit,
+		hideSendButton,
+		minRows,
+		parentId,
+		recordingController
+	]);
+};
+//#endregion
+export { useCreateMessageComposerContext };
+
+//# sourceMappingURL=useCreateMessageComposerContext.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,12 @@
+import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.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;
+};
+//#endregion
+export { useIsCooldownActive };
+
+//# sourceMappingURL=useIsCooldownActive.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,27 @@
+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
+	};
+};
+//#endregion
+export { useMessageComposerBindings };
+
+//# sourceMappingURL=useMessageComposerBindings.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,27 @@
+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
+var messageComposerStateSelector = ({ editedMessage, quotedMessage }) => ({
+	editedMessage,
+	quotedMessage
+});
+var useMessageComposerCommands = () => {
+	const messageComposer = useMessageComposerController();
+	const channelConfig = getChannelConfig(messageComposer.channel);
+	const { editedMessage, quotedMessage } = useStateStore(messageComposer.state, messageComposerStateSelector);
+	return useMemo(() => (channelConfig?.commands ?? []).filter((command) => !!command.name).map((command) => ({
+		command,
+		enabled: !messageComposer.isCommandDisabled(command)
+	})), [
+		channelConfig,
+		editedMessage,
+		messageComposer,
+		quotedMessage
+	]);
+};
+//#endregion
+export { useMessageComposerCommands };
+
+//# sourceMappingURL=useMessageComposerCommands.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,56 @@
+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 { 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 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,
+		threadInstance
+	]);
+	if (["legacy_thread", "message"].includes(messageComposer.contextType) && !queueCache.peek(messageComposer.tag)) queueCache.add(messageComposer.tag, messageComposer);
+	useEffect(() => {
+		const unsubscribe = messageComposer.registerSubscriptions();
+		return () => {
+			unsubscribe();
+		};
+	}, [messageComposer]);
+	return messageComposer;
+};
+//#endregion
+export { useMessageComposerController };
+
+//# sourceMappingURL=useMessageComposerController.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,13 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+//#region src/components/MessageComposer/hooks/useMessageComposerHasSendableData.ts
+var editingAuditStateStateSelector = (state) => state;
+var useMessageComposerHasSendableData = () => {
+	const messageComposer = useMessageComposerController();
+	useStateStore(messageComposer.editingAuditState, editingAuditStateStateSelector);
+	return messageComposer.hasSendableData;
+};
+//#endregion
+export { useMessageComposerHasSendableData };
+
+//# sourceMappingURL=useMessageComposerHasSendableData.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,13 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+//#region src/components/MessageComposer/hooks/useMessageContentIsEmpty.ts
+var editingAuditStateStateSelector = (state) => state;
+var useMessageContentIsEmpty = () => {
+	const messageComposer = useMessageComposerController();
+	useStateStore(messageComposer.editingAuditState, editingAuditStateStateSelector);
+	return messageComposer.contentIsEmpty;
+};
+//#endregion
+export { useMessageContentIsEmpty };
+
+//# sourceMappingURL=useMessageContentIsEmpty.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageContentIsEmpty.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useMessageContentIsEmpty.ts"],"sourcesContent":["import type { EditingAuditState } from 'stream-chat';\nimport { useMessageComposerController } from './useMessageComposerController';\nimport { useStateStore } from '../../../store';\n\nconst editingAuditStateStateSelector = (state: EditingAuditState) => state;\n\nexport const useMessageContentIsEmpty = () => {\n  const messageComposer = useMessageComposerController();\n  useStateStore(messageComposer.editingAuditState, editingAuditStateStateSelector);\n  return messageComposer.contentIsEmpty;\n};\n"],"mappings":";;;AAIA,IAAM,kCAAkC,UAA6B;AAErE,IAAa,iCAAiC;CAC5C,MAAM,kBAAkB,6BAA6B;CACrD,cAAc,gBAAgB,mBAAmB,8BAA8B;CAC/E,OAAO,gBAAgB;AACzB"}

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

@@ -0,0 +1,34 @@
+import { dataTransferItemsToFiles } from "../../ReactFileUtilities/utils.mjs";
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+import { useCallback } from "react";
+//#region src/components/MessageComposer/hooks/usePasteHandler.ts
+var usePasteHandler = () => {
+	const { attachmentManager, textComposer } = useMessageComposerController();
+	return { onPaste: useCallback((clipboardEvent) => {
+		(async (event) => {
+			const { items } = event.clipboardData;
+			event.preventDefault();
+			let plainTextPromise = void 0;
+			for (let i = 0; i < items.length; i++) {
+				const item = items[i];
+				if (item.kind === "string" && item.type === "text/plain") {
+					plainTextPromise = new Promise((resolve) => {
+						item.getAsString((string) => {
+							resolve(string);
+						});
+					});
+					break;
+				}
+			}
+			const fileLikes = await dataTransferItemsToFiles(Array.from(items));
+			if (plainTextPromise) {
+				const pastedText = await plainTextPromise;
+				textComposer.insertText({ text: pastedText });
+			} else attachmentManager.uploadFiles(fileLikes);
+		})(clipboardEvent);
+	}, [attachmentManager, textComposer]) };
+};
+//#endregion
+export { usePasteHandler };
+
+//# sourceMappingURL=usePasteHandler.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePasteHandler.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/usePasteHandler.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useMessageComposerController } from './useMessageComposerController';\nimport { dataTransferItemsToFiles } from '../../ReactFileUtilities';\n\nexport const usePasteHandler = () => {\n  const { attachmentManager, textComposer } = useMessageComposerController();\n  const onPaste = useCallback(\n    (clipboardEvent: React.ClipboardEvent<HTMLTextAreaElement>) => {\n      (async (event) => {\n        const { items } = event.clipboardData;\n        event.preventDefault();\n        // Get a promise for the plain text in case no files are\n        // found. This needs to be done here because chrome cleans\n        // up the DataTransferItems after resolving of a promise.\n        let plainTextPromise: Promise<string> | undefined = undefined;\n        for (let i = 0; i < items.length; i++) {\n          const item = items[i];\n          if (item.kind === 'string' && item.type === 'text/plain') {\n            plainTextPromise = new Promise((resolve) => {\n              item.getAsString((string) => {\n                resolve(string);\n              });\n            });\n            break;\n          }\n        }\n\n        const fileLikes = await dataTransferItemsToFiles(Array.from(items));\n\n        if (plainTextPromise) {\n          const pastedText = await plainTextPromise;\n          textComposer.insertText({ text: pastedText });\n        } else {\n          attachmentManager.uploadFiles(fileLikes);\n        }\n      })(clipboardEvent);\n    },\n    [attachmentManager, textComposer],\n  );\n\n  return { onPaste };\n};\n"],"mappings":";;;;AAIA,IAAa,wBAAwB;CACnC,MAAM,EAAE,mBAAmB,iBAAiB,6BAA6B;CAmCzE,OAAO,EAAE,SAlCO,aACb,mBAA8D;EAC7D,CAAC,OAAO,UAAU;GAChB,MAAM,EAAE,UAAU,MAAM;GACxB,MAAM,eAAe;GAIrB,IAAI,mBAAgD,KAAA;GACpD,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;IACrC,MAAM,OAAO,MAAM;IACnB,IAAI,KAAK,SAAS,YAAY,KAAK,SAAS,cAAc;KACxD,mBAAmB,IAAI,SAAS,YAAY;MAC1C,KAAK,aAAa,WAAW;OAC3B,QAAQ,MAAM;MAChB,CAAC;KACH,CAAC;KACD;IACF;GACF;GAEA,MAAM,YAAY,MAAM,yBAAyB,MAAM,KAAK,KAAK,CAAC;GAElE,IAAI,kBAAkB;IACpB,MAAM,aAAa,MAAM;IACzB,aAAa,WAAW,EAAE,MAAM,WAAW,CAAC;GAC9C,OACE,kBAAkB,YAAY,SAAS;EAE3C,EAAA,CAAG,cAAc;CACnB,GACA,CAAC,mBAAmB,YAAY,CAGzB,EAAQ;AACnB"}

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

@@ -0,0 +1,98 @@
+import { useChannelActionContext } from "../../../context/ChannelActionContext.mjs";
+import { discardPreEditSnapshot } from "../preEditSnapshot.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useMessageComposerController } from "./useMessageComposerController.mjs";
+import { useNotificationApi } from "../../Notifications/hooks/useNotificationApi.mjs";
+import { useCallback } from "react";
+import { MessageComposer } from "stream-chat";
+//#region src/components/MessageComposer/hooks/useSubmitHandler.ts
+var takeStateSnapshot = (messageComposer) => {
+	const textComposerState = messageComposer.textComposer.state.getLatestValue();
+	const attachmentManagerState = messageComposer.attachmentManager.state.getLatestValue();
+	const linkPreviewsManagerState = messageComposer.linkPreviewsManager.state.getLatestValue();
+	const pollComposerState = messageComposer.pollComposer.state.getLatestValue();
+	const customDataManagerState = messageComposer.customDataManager.state.getLatestValue();
+	const state = messageComposer.state.getLatestValue();
+	return () => {
+		messageComposer.state.next(state);
+		messageComposer.textComposer.state.next(textComposerState);
+		messageComposer.attachmentManager.state.next(attachmentManagerState);
+		messageComposer.linkPreviewsManager.state.next(linkPreviewsManagerState);
+		messageComposer.pollComposer.state.next(pollComposerState);
+		messageComposer.customDataManager.state.next(customDataManagerState);
+	};
+};
+var useSubmitHandler = (props) => {
+	const { overrideSubmitHandler } = props;
+	const { addNotification } = useNotificationApi();
+	const { editMessage, sendMessage } = useChannelActionContext("useSubmitHandler");
+	const { t } = useTranslationContext("useSubmitHandler");
+	const messageComposer = useMessageComposerController();
+	return { handleSubmit: useCallback(async (event) => {
+		event?.preventDefault();
+		const composition = await messageComposer.compose();
+		if (!composition || !composition.message) return;
+		const { localMessage, message, sendOptions } = composition;
+		if (messageComposer.editedMessage && localMessage.type !== "error") try {
+			await editMessage(localMessage, sendOptions);
+			discardPreEditSnapshot(messageComposer);
+			messageComposer.clear();
+		} catch (err) {
+			addNotification({
+				emitter: "MessageComposer",
+				incident: {
+					domain: "api",
+					entity: "message",
+					operation: "edit"
+				},
+				message: t("Edit message request failed"),
+				severity: "error"
+			});
+		}
+		else {
+			const restoreComposerStateSnapshot = takeStateSnapshot(messageComposer);
+			try {
+				if (!!message.poll_id) messageComposer.state.partialNext({
+					id: MessageComposer.generateId(),
+					pollId: null
+				});
+				else messageComposer.clear();
+				if (messageComposer.config.text.publishTypingEvents) messageComposer.channel.stopTyping().catch(() => void 0);
+				if (overrideSubmitHandler) await overrideSubmitHandler({
+					cid: messageComposer.channel.cid,
+					localMessage,
+					message,
+					sendOptions
+				});
+				else await sendMessage({
+					localMessage,
+					message,
+					options: sendOptions
+				});
+			} catch (err) {
+				restoreComposerStateSnapshot();
+				addNotification({
+					emitter: "MessageComposer",
+					incident: {
+						domain: "api",
+						entity: "message",
+						operation: "send"
+					},
+					message: t("Send message request failed"),
+					severity: "error"
+				});
+			}
+		}
+	}, [
+		addNotification,
+		editMessage,
+		messageComposer,
+		overrideSubmitHandler,
+		sendMessage,
+		t
+	]) };
+};
+//#endregion
+export { useSubmitHandler };
+
+//# sourceMappingURL=useSubmitHandler.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSubmitHandler.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useSubmitHandler.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { MessageComposer } from 'stream-chat';\nimport { useMessageComposerController } from './useMessageComposerController';\nimport { useChannelActionContext } from '../../../context/ChannelActionContext';\nimport { useTranslationContext } from '../../../context/TranslationContext';\nimport { useNotificationApi } from '../../Notifications';\nimport { discardPreEditSnapshot } from '../preEditSnapshot';\n\nimport type { MessageComposerProps } from '../MessageComposer';\n\nconst takeStateSnapshot = (messageComposer: MessageComposer) => {\n  const textComposerState = messageComposer.textComposer.state.getLatestValue();\n  const attachmentManagerState = messageComposer.attachmentManager.state.getLatestValue();\n  const linkPreviewsManagerState =\n    messageComposer.linkPreviewsManager.state.getLatestValue();\n  const pollComposerState = messageComposer.pollComposer.state.getLatestValue();\n  const customDataManagerState = messageComposer.customDataManager.state.getLatestValue();\n  const state = messageComposer.state.getLatestValue();\n\n  return () => {\n    messageComposer.state.next(state);\n    messageComposer.textComposer.state.next(textComposerState);\n    messageComposer.attachmentManager.state.next(attachmentManagerState);\n    messageComposer.linkPreviewsManager.state.next(linkPreviewsManagerState);\n    messageComposer.pollComposer.state.next(pollComposerState);\n    messageComposer.customDataManager.state.next(customDataManagerState);\n  };\n};\n\nexport const useSubmitHandler = (props: MessageComposerProps) => {\n  const { overrideSubmitHandler } = props;\n\n  const { addNotification } = useNotificationApi();\n  const { editMessage, sendMessage } = useChannelActionContext('useSubmitHandler');\n  const { t } = useTranslationContext('useSubmitHandler');\n  const messageComposer = useMessageComposerController();\n\n  const handleSubmit = useCallback(\n    async (event?: React.BaseSyntheticEvent) => {\n      event?.preventDefault();\n      const composition = await messageComposer.compose();\n      if (!composition || !composition.message) return;\n\n      const { localMessage, message, sendOptions } = composition;\n\n      if (messageComposer.editedMessage && localMessage.type !== 'error') {\n        try {\n          await editMessage(localMessage, sendOptions);\n          discardPreEditSnapshot(messageComposer);\n          messageComposer.clear();\n        } catch (err) {\n          addNotification({\n            emitter: 'MessageComposer',\n            incident: {\n              domain: 'api',\n              entity: 'message',\n              operation: 'edit',\n            },\n            message: t('Edit message request failed'),\n            severity: 'error',\n          });\n        }\n      } else {\n        const restoreComposerStateSnapshot = takeStateSnapshot(messageComposer);\n        try {\n          // FIXME: once MessageComposer has sendMessage method, then the following condition should be encapsulated by it\n          // keep attachments, text, quoted message (treat them as draft) ... if sending a poll\n          const sentPollMessage = !!message.poll_id;\n          if (sentPollMessage) {\n            messageComposer.state.partialNext({\n              id: MessageComposer.generateId(),\n              pollId: null,\n            });\n          } else {\n            messageComposer.clear();\n          }\n          // Before the send, and not awaited. The composer is already cleared, so as far as the\n          // user is concerned they have stopped typing — and when composing with pending uploads\n          // the send lasts as long as the upload, which would leave everyone else watching a\n          // typing indicator for the whole transfer. Not awaited\n          // because publishing `typing.stop` is best-effort: it must neither delay the message by\n          // a round trip nor abort the send if it fails.\n          if (messageComposer.config.text.publishTypingEvents) {\n            messageComposer.channel.stopTyping().catch(() => undefined);\n          }\n          // todo: get rid of overrideSubmitHandler once MessageComposer supports submission flow\n          if (overrideSubmitHandler) {\n            await overrideSubmitHandler({\n              cid: messageComposer.channel.cid,\n              localMessage,\n              message,\n              sendOptions,\n            });\n          } else {\n            await sendMessage({ localMessage, message, options: sendOptions });\n          }\n        } catch (err) {\n          restoreComposerStateSnapshot();\n          addNotification({\n            emitter: 'MessageComposer',\n            incident: {\n              domain: 'api',\n              entity: 'message',\n              operation: 'send',\n            },\n            message: t('Send message request failed'),\n            severity: 'error',\n          });\n        }\n      }\n    },\n    [\n      addNotification,\n      editMessage,\n      messageComposer,\n      overrideSubmitHandler,\n      sendMessage,\n      t,\n    ],\n  );\n\n  return { handleSubmit };\n};\n"],"mappings":";;;;;;;;AAUA,IAAM,qBAAqB,oBAAqC;CAC9D,MAAM,oBAAoB,gBAAgB,aAAa,MAAM,eAAe;CAC5E,MAAM,yBAAyB,gBAAgB,kBAAkB,MAAM,eAAe;CACtF,MAAM,2BACJ,gBAAgB,oBAAoB,MAAM,eAAe;CAC3D,MAAM,oBAAoB,gBAAgB,aAAa,MAAM,eAAe;CAC5E,MAAM,yBAAyB,gBAAgB,kBAAkB,MAAM,eAAe;CACtF,MAAM,QAAQ,gBAAgB,MAAM,eAAe;CAEnD,aAAa;EACX,gBAAgB,MAAM,KAAK,KAAK;EAChC,gBAAgB,aAAa,MAAM,KAAK,iBAAiB;EACzD,gBAAgB,kBAAkB,MAAM,KAAK,sBAAsB;EACnE,gBAAgB,oBAAoB,MAAM,KAAK,wBAAwB;EACvE,gBAAgB,aAAa,MAAM,KAAK,iBAAiB;EACzD,gBAAgB,kBAAkB,MAAM,KAAK,sBAAsB;CACrE;AACF;AAEA,IAAa,oBAAoB,UAAgC;CAC/D,MAAM,EAAE,0BAA0B;CAElC,MAAM,EAAE,oBAAoB,mBAAmB;CAC/C,MAAM,EAAE,aAAa,gBAAgB,wBAAwB,kBAAkB;CAC/E,MAAM,EAAE,MAAM,sBAAsB,kBAAkB;CACtD,MAAM,kBAAkB,6BAA6B;CAsFrD,OAAO,EAAE,cApFY,YACnB,OAAO,UAAqC;EAC1C,OAAO,eAAe;EACtB,MAAM,cAAc,MAAM,gBAAgB,QAAQ;EAClD,IAAI,CAAC,eAAe,CAAC,YAAY,SAAS;EAE1C,MAAM,EAAE,cAAc,SAAS,gBAAgB;EAE/C,IAAI,gBAAgB,iBAAiB,aAAa,SAAS,SACzD,IAAI;GACF,MAAM,YAAY,cAAc,WAAW;GAC3C,uBAAuB,eAAe;GACtC,gBAAgB,MAAM;EACxB,SAAS,KAAK;GACZ,gBAAgB;IACd,SAAS;IACT,UAAU;KACR,QAAQ;KACR,QAAQ;KACR,WAAW;IACb;IACA,SAAS,EAAE,6BAA6B;IACxC,UAAU;GACZ,CAAC;EACH;OACK;GACL,MAAM,+BAA+B,kBAAkB,eAAe;GACtE,IAAI;IAIF,IAAI,CADqB,CAAC,QAAQ,SAEhC,gBAAgB,MAAM,YAAY;KAChC,IAAI,gBAAgB,WAAW;KAC/B,QAAQ;IACV,CAAC;SAED,gBAAgB,MAAM;IAQxB,IAAI,gBAAgB,OAAO,KAAK,qBAC9B,gBAAgB,QAAQ,WAAW,CAAC,CAAC,YAAY,KAAA,CAAS;IAG5D,IAAI,uBACF,MAAM,sBAAsB;KAC1B,KAAK,gBAAgB,QAAQ;KAC7B;KACA;KACA;IACF,CAAC;SAED,MAAM,YAAY;KAAE;KAAc;KAAS,SAAS;IAAY,CAAC;GAErE,SAAS,KAAK;IACZ,6BAA6B;IAC7B,gBAAgB;KACd,SAAS;KACT,UAAU;MACR,QAAQ;MACR,QAAQ;MACR,WAAW;KACb;KACA,SAAS,EAAE,6BAA6B;KACxC,UAAU;IACZ,CAAC;GACH;EACF;CACF,GACA;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CAGO,EAAa;AACxB"}

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

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from "react";
+//#region src/components/MessageComposer/hooks/useTextareaRef.ts
+var useTextareaRef = (props) => {
+	const { focus } = props;
+	const textareaRef = useRef(void 0);
+	useEffect(() => {
+		if (focus && textareaRef.current) textareaRef.current.focus();
+	}, [focus]);
+	return { textareaRef };
+};
+//#endregion
+export { useTextareaRef };
+
+//# sourceMappingURL=useTextareaRef.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTextareaRef.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/hooks/useTextareaRef.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { MessageComposerProps } from '../MessageComposer';\n\nexport const useTextareaRef = (props: MessageComposerProps) => {\n  const { focus } = props;\n  const textareaRef = useRef<HTMLTextAreaElement>(undefined);\n  // Focus\n  useEffect(() => {\n    if (focus && textareaRef.current) {\n      textareaRef.current.focus();\n    }\n  }, [focus]);\n\n  return {\n    textareaRef,\n  };\n};\n"],"mappings":";;AAGA,IAAa,kBAAkB,UAAgC;CAC7D,MAAM,EAAE,UAAU;CAClB,MAAM,cAAc,OAA4B,KAAA,CAAS;CAEzD,gBAAgB;EACd,IAAI,SAAS,YAAY,SACvB,YAAY,QAAQ,MAAM;CAE9B,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO,EACL,YACF;AACF"}

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

@@ -0,0 +1,16 @@
+//#region src/components/MessageComposer/hooks/utils.ts
+function prettifyFileSize(bytes, precision = 3) {
+	const units = [
+		"B",
+		"kB",
+		"MB",
+		"GB"
+	];
+	const exponent = bytes === 0 ? 0 : Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+	const mantissa = bytes / 1024 ** exponent;
+	return `${precision === 0 || mantissa >= 10 ** precision ? Math.round(mantissa).toString() : mantissa.toPrecision(precision)} ${units[exponent]}`;
+}
+//#endregion
+export { prettifyFileSize };
+
+//# sourceMappingURL=utils.mjs.map

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

@@ -0,0 +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"}