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

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

@@ -0,0 +1,17 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { QuotedMessagePreviewUI } from "./QuotedMessagePreview.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageComposer/EditedMessagePreview.tsx
+var EditedMessagePreview = ({ message, onCancel }) => {
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsx(QuotedMessagePreviewUI, {
+		authorLabel: t("common.editMessage.text", "Edit Message"),
+		onRemove: onCancel,
+		quotedMessage: message
+	});
+};
+//#endregion
+export { EditedMessagePreview };
+
+//# sourceMappingURL=EditedMessagePreview.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditedMessagePreview.mjs","names":[],"sources":["../../../../src/components/MessageComposer/EditedMessagePreview.tsx"],"sourcesContent":["import React from 'react';\nimport { QuotedMessagePreviewUI } from './QuotedMessagePreview';\nimport type { LocalMessage } from 'stream-chat';\nimport { useTranslationContext } from '../../context';\n\nexport type EditedMessagePreviewProps = {\n  message: LocalMessage;\n  onCancel: () => void;\n};\n\nexport const EditedMessagePreview = ({\n  message,\n  onCancel,\n}: EditedMessagePreviewProps) => {\n  const { t } = useTranslationContext();\n\n  return (\n    <QuotedMessagePreviewUI\n      authorLabel={t('common.editMessage.text', 'Edit Message')}\n      onRemove={onCancel}\n      quotedMessage={message}\n    />\n  );\n};\n"],"mappings":";;;;;AAUA,IAAa,wBAAwB,EACnC,SACA,eAC+B;CAC/B,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,oBAAC,wBAAD;EACE,aAAa,EAAE,2BAA2B,cAAc;EACxD,UAAU;EACV,eAAe;CAChB,CAAA;AAEL"}

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

@@ -0,0 +1,78 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
+import { PopperTooltip } from "../Tooltip/Tooltip.mjs";
+import { useEnterLeaveHandlers } from "../Tooltip/hooks/useEnterLeaveHandlers.mjs";
+import { BaseImage } from "../BaseImage/BaseImage.mjs";
+import { RemoveAttachmentPreviewButton } from "./RemoveAttachmentPreviewButton.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useState } from "react";
+import { LinkPreviewsManager } from "stream-chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageComposer/LinkPreviewList.tsx
+var linkPreviewsManagerStateSelector = (state) => ({ linkPreviews: Array.from(state.previews.values()).filter((preview) => LinkPreviewsManager.previewIsLoaded(preview) || LinkPreviewsManager.previewIsLoading(preview)) });
+var LinkPreviewList = ({ displayLinkCount = 1 }) => {
+	const { linkPreviewsManager } = useMessageComposerController();
+	const { linkPreviews } = useStateStore(linkPreviewsManager.state, linkPreviewsManagerStateSelector);
+	if (linkPreviews.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__link-preview-list",
+		children: linkPreviews.slice(0, displayLinkCount).map((linkPreview) => /* @__PURE__ */ jsx(LinkPreviewCard, { linkPreview }, linkPreview.og_scrape_url))
+	});
+};
+var LinkPreviewCard = ({ linkPreview }) => {
+	const { IconLink } = useComponentContextIcons();
+	const { linkPreviewsManager } = useMessageComposerController();
+	const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
+	const [referenceElement, setReferenceElement] = useState(null);
+	const { image_url, thumb_url, title, title_link } = linkPreview;
+	if (!LinkPreviewsManager.previewIsLoaded(linkPreview) && !LinkPreviewsManager.previewIsLoading(linkPreview)) return null;
+	const previewImageSrc = title_link || image_url || thumb_url;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__link-preview-card", { "str-chat__link-preview-card--loading": LinkPreviewsManager.previewIsLoading(linkPreview) }),
+		"data-testid": "link-preview-card",
+		onMouseEnter: handleEnter,
+		onMouseLeave: handleLeave,
+		ref: setReferenceElement,
+		children: [
+			/* @__PURE__ */ jsx(PopperTooltip, {
+				offset: [0, 5],
+				referenceElement,
+				visible: tooltipVisible,
+				children: linkPreview.og_scrape_url
+			}),
+			previewImageSrc && /* @__PURE__ */ jsx(BaseImage, {
+				alt: title,
+				className: "str-chat__attachment-preview__thumbnail",
+				src: previewImageSrc,
+				title
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__link-preview-card__content",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "str-chat__link-preview-card__content-title",
+						children: linkPreview.title
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "str-chat__link-preview-card__content-description",
+						children: linkPreview.text
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "str-chat__link-preview-card__content__url",
+						children: [/* @__PURE__ */ jsx(IconLink, {}), /* @__PURE__ */ jsx("span", { children: linkPreview.og_scrape_url })]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(RemoveAttachmentPreviewButton, {
+				className: "str-chat__link-preview-card__dismiss-button",
+				"data-testid": "link-preview-card-dismiss-btn",
+				onClick: () => linkPreviewsManager.dismissPreview(linkPreview.og_scrape_url)
+			})
+		]
+	});
+};
+//#endregion
+export { LinkPreviewCard, LinkPreviewList };
+
+//# sourceMappingURL=LinkPreviewList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkPreviewList.mjs","names":[],"sources":["../../../../src/components/MessageComposer/LinkPreviewList.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useState } from 'react';\nimport type { LinkPreview, LinkPreviewsManagerState } from 'stream-chat';\nimport { LinkPreviewsManager } from 'stream-chat';\nimport { useStateStore } from '../../store';\nimport { PopperTooltip } from '../Tooltip';\nimport { useEnterLeaveHandlers } from '../Tooltip/hooks';\nimport { useMessageComposerController } from './hooks';\nimport { BaseImage } from '../BaseImage';\nimport { RemoveAttachmentPreviewButton } from './RemoveAttachmentPreviewButton';\nimport { useComponentContextIcons } from '../../context';\n\nexport type LinkPreviewListProps = {\n  displayLinkCount?: number;\n};\n\nconst linkPreviewsManagerStateSelector = (state: LinkPreviewsManagerState) => ({\n  linkPreviews: Array.from(state.previews.values()).filter(\n    (preview) =>\n      LinkPreviewsManager.previewIsLoaded(preview) ||\n      LinkPreviewsManager.previewIsLoading(preview),\n  ),\n});\n\nexport const LinkPreviewList = ({ displayLinkCount = 1 }: LinkPreviewListProps) => {\n  const messageComposer = useMessageComposerController();\n  const { linkPreviewsManager } = messageComposer;\n  const { linkPreviews } = useStateStore(\n    linkPreviewsManager.state,\n    linkPreviewsManagerStateSelector,\n  );\n\n  if (linkPreviews.length === 0) return null;\n\n  return (\n    <div className='str-chat__link-preview-list'>\n      {linkPreviews.slice(0, displayLinkCount).map((linkPreview) => (\n        <LinkPreviewCard key={linkPreview.og_scrape_url} linkPreview={linkPreview} />\n      ))}\n    </div>\n  );\n};\n\ntype LinkPreviewProps = {\n  linkPreview: LinkPreview;\n};\n\nexport const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {\n  const { IconLink } = useComponentContextIcons();\n  const { linkPreviewsManager } = useMessageComposerController();\n  const { handleEnter, handleLeave, tooltipVisible } =\n    useEnterLeaveHandlers<HTMLDivElement>();\n  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);\n  const { image_url, thumb_url, title, title_link } = linkPreview;\n\n  if (\n    !LinkPreviewsManager.previewIsLoaded(linkPreview) &&\n    !LinkPreviewsManager.previewIsLoading(linkPreview)\n  )\n    return null;\n\n  const previewImageSrc = title_link || image_url || thumb_url;\n  return (\n    <div\n      className={clsx('str-chat__link-preview-card', {\n        'str-chat__link-preview-card--loading':\n          LinkPreviewsManager.previewIsLoading(linkPreview),\n      })}\n      data-testid='link-preview-card'\n      onMouseEnter={handleEnter}\n      onMouseLeave={handleLeave}\n      ref={setReferenceElement}\n    >\n      <PopperTooltip\n        offset={[0, 5]}\n        referenceElement={referenceElement}\n        visible={tooltipVisible}\n      >\n        {linkPreview.og_scrape_url}\n      </PopperTooltip>\n\n      {previewImageSrc && (\n        <BaseImage\n          alt={title}\n          className='str-chat__attachment-preview__thumbnail'\n          src={previewImageSrc}\n          title={title}\n        />\n      )}\n      <div className='str-chat__link-preview-card__content'>\n        <div className='str-chat__link-preview-card__content-title'>\n          {linkPreview.title}\n        </div>\n        <div className='str-chat__link-preview-card__content-description'>\n          {linkPreview.text}\n        </div>\n        <div className='str-chat__link-preview-card__content__url'>\n          <IconLink />\n          <span>{linkPreview.og_scrape_url}</span>\n        </div>\n      </div>\n\n      <RemoveAttachmentPreviewButton\n        className='str-chat__link-preview-card__dismiss-button'\n        data-testid='link-preview-card-dismiss-btn'\n        onClick={() => linkPreviewsManager.dismissPreview(linkPreview.og_scrape_url)}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAM,oCAAoC,WAAqC,EAC7E,cAAc,MAAM,KAAK,MAAM,SAAS,OAAO,CAAC,CAAC,CAAC,QAC/C,YACC,oBAAoB,gBAAgB,OAAO,KAC3C,oBAAoB,iBAAiB,OAAO,CAChD,EACF;AAEA,IAAa,mBAAmB,EAAE,mBAAmB,QAA8B;CAEjF,MAAM,EAAE,wBADgB,6BACQ;CAChC,MAAM,EAAE,iBAAiB,cACvB,oBAAoB,OACpB,gCACF;CAEA,IAAI,aAAa,WAAW,GAAG,OAAO;CAEtC,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,aAAa,MAAM,GAAG,gBAAgB,CAAC,CAAC,KAAK,gBAC5C,oBAAC,iBAAD,EAA8D,YAAc,GAAtD,YAAY,aAA0C,CAC7E;CACE,CAAA;AAET;AAMA,IAAa,mBAAmB,EAAE,kBAAoC;CACpE,MAAM,EAAE,aAAa,yBAAyB;CAC9C,MAAM,EAAE,wBAAwB,6BAA6B;CAC7D,MAAM,EAAE,aAAa,aAAa,mBAChC,sBAAsC;CACxC,MAAM,CAAC,kBAAkB,uBAAuB,SAAgC,IAAI;CACpF,MAAM,EAAE,WAAW,WAAW,OAAO,eAAe;CAEpD,IACE,CAAC,oBAAoB,gBAAgB,WAAW,KAChD,CAAC,oBAAoB,iBAAiB,WAAW,GAEjD,OAAO;CAET,MAAM,kBAAkB,cAAc,aAAa;CACnD,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,+BAA+B,EAC7C,wCACE,oBAAoB,iBAAiB,WAAW,EACpD,CAAC;EACD,eAAY;EACZ,cAAc;EACd,cAAc;EACd,KAAK;YARP;GAUE,oBAAC,eAAD;IACE,QAAQ,CAAC,GAAG,CAAC;IACK;IAClB,SAAS;cAER,YAAY;GACA,CAAA;GAEd,mBACC,oBAAC,WAAD;IACE,KAAK;IACL,WAAU;IACV,KAAK;IACE;GACR,CAAA;GAEH,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD;MAAK,WAAU;gBACZ,YAAY;KACV,CAAA;KACL,oBAAC,OAAD;MAAK,WAAU;gBACZ,YAAY;KACV,CAAA;KACL,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,UAAD,CAAW,CAAA,GACX,oBAAC,QAAD,EAAA,UAAO,YAAY,cAAoB,CAAA,CACpC;;IACF;;GAEL,oBAAC,+BAAD;IACE,WAAU;IACV,eAAY;IACZ,eAAe,oBAAoB,eAAe,YAAY,aAAa;GAC5E,CAAA;EACE;;AAET"}

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

@@ -0,0 +1,61 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { DialogManagerProvider } from "../../context/DialogManagerContext.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
+import { useMessageComposerBindings } from "./hooks/useMessageComposerBindings.mjs";
+import { MessageComposerContextProvider } from "../../context/MessageComposerContext.mjs";
+import { useMessageComposerControllerContext } from "../../context/MessageComposerControllerContext.mjs";
+import { useRegisterDropHandlers } from "./WithDragAndDropUpload.mjs";
+import { MessageComposerUI } from "./MessageComposerUI.mjs";
+import { useCreateMessageComposerContext } from "./hooks/useCreateMessageComposerContext.mjs";
+import React, { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageComposer/MessageComposer.tsx
+var MessageComposerProvider = (props) => {
+	const messageComposerBindings = useMessageComposerBindings(props);
+	const { emojiSearchIndex } = useComponentContext();
+	const messageComposerContextValue = useCreateMessageComposerContext({
+		...messageComposerBindings,
+		...props,
+		emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex
+	});
+	const messageComposer = useMessageComposerController();
+	const suppliedComposer = useMessageComposerControllerContext();
+	useEffect(() => () => {
+		const draftSaved = messageComposer.createDraft().catch(console.error);
+		if (messageComposer === suppliedComposer) return;
+		draftSaved.finally(() => messageComposer.clear());
+	}, [messageComposer, suppliedComposer]);
+	useEffect(() => {
+		const threadId = messageComposer.threadId;
+		if (!threadId || !messageComposer.channel || !messageComposer.contentIsEmpty || !messageComposer.config.drafts.enabled) return;
+		messageComposer.channel.getDraft({ parent_id: threadId }).then(({ draft }) => {
+			if (draft) messageComposer.initState({ composition: draft });
+		}).catch(console.error);
+	}, [messageComposer]);
+	useRegisterDropHandlers();
+	return /* @__PURE__ */ jsx(MessageComposerContextProvider, {
+		value: messageComposerContextValue,
+		children: props.children
+	});
+};
+var UnMemoizedMessageComposer = (props) => {
+	const { MessageComposerUI: MessageComposerUI$1 = MessageComposerUI } = useComponentContext();
+	const messageComposer = useMessageComposerController();
+	const id = useStableId();
+	return /* @__PURE__ */ jsx(DialogManagerProvider, {
+		id: messageComposer.threadId ? `message-input-dialog-manager-thread-${id}` : `message-input-dialog-manager-${id}`,
+		children: /* @__PURE__ */ jsx(MessageComposerProvider, {
+			...props,
+			children: /* @__PURE__ */ jsx(MessageComposerUI$1, {})
+		})
+	});
+};
+/**
+* A high level component that has provides all functionality to the Input it renders.
+*/
+var MessageComposer = React.memo(UnMemoizedMessageComposer);
+//#endregion
+export { MessageComposer };
+
+//# sourceMappingURL=MessageComposer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageComposer.mjs","names":[],"sources":["../../../../src/components/MessageComposer/MessageComposer.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React, { useEffect } from 'react';\n\nimport { MessageComposerUI as DefaultMessageComposerUI } from './MessageComposerUI';\nimport { useMessageComposerController } from './hooks';\nimport { useCreateMessageComposerContext } from './hooks/useCreateMessageComposerContext';\nimport { useMessageComposerBindings } from './hooks/useMessageComposerBindings';\nimport type { ComponentContextValue } from '../../context/ComponentContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { MessageComposerContextProvider } from '../../context/MessageComposerContext';\nimport {\n  DialogManagerProvider,\n  useMessageComposerControllerContext,\n} from '../../context';\nimport { useStableId } from '../UtilityComponents/useStableId';\n\nimport type { LocalMessage } from 'stream-chat';\n\nimport type { CustomAudioRecordingConfig } from '../MediaRecorder';\nimport { useRegisterDropHandlers } from './WithDragAndDropUpload';\n\nexport type EmojiSearchIndexResult = {\n  id: string;\n  name: string;\n  skins: Array<{ native: string }>;\n  emoticons?: Array<string>;\n  native?: string;\n};\n\nexport interface EmojiSearchIndex {\n  search: (\n    query: string,\n  ) => PromiseLike<Array<EmojiSearchIndexResult>> | Array<EmojiSearchIndexResult> | null;\n}\n\nexport type MessageComposerProps = {\n  /**\n   * Additional props to be passed to the underlying `AutoCompleteTextarea` component.\n   * Default value is handled via MessageComposer.\n   * [Available props](https://www.npmjs.com/package/react-textarea-autosize)\n   */\n  additionalTextareaProps?: Omit<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    'defaultValue' | 'style' | 'disabled' | 'value'\n  >;\n  /**\n   * When enabled, recorded messages won’t be sent immediately.\n   * Instead, they will “stack up” with other attachments in the message composer allowing the user to send multiple attachments as part of the same message.\n   */\n  asyncMessagesMultiSendEnabled?: boolean;\n  /** Allows to configure the audio recording parameters for voice messages. */\n  audioRecordingConfig?: CustomAudioRecordingConfig;\n  /** Controls whether the users will be provided with the UI to record voice messages. */\n  audioRecordingEnabled?: boolean;\n  /** Mechanism to be used with autocomplete and text replace features of the `MessageComposer` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */\n  emojiSearchIndex?: ComponentContextValue['emojiSearchIndex'];\n  /** If true, focuses the text input on component mount */\n  focus?: boolean;\n  // todo: what sense does hideSendButton prop make, when we have message composer actions (recording, send msg). Can we remove it?\n  // /** Allows to hide MessageComposer's send button. */\n  hideSendButton?: boolean;\n  /** Max number of rows the underlying `textarea` component is allowed to grow */\n  maxRows?: number;\n  /** Min number of rows the underlying `textarea` will start with. The `grow` on MessageComposer prop has to be enabled for `minRows` to take effect. */\n  minRows?: number;\n  /** When replying in a thread, the parent message object */\n  parent?: LocalMessage;\n  /**\n   * Currently, `Enter` is the default submission key and  `Shift`+`Enter` is the default combination for the new line.\n   * If specified, this function overrides the default behavior specified previously.\n   *\n   * Example of default behavior:\n   * ```tsx\n   * const defaultShouldSubmit = (event) => event.key === \"Enter\" && !event.shiftKey;\n   * ```\n   */\n  shouldSubmit?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;\n};\n\nconst MessageComposerProvider = (props: PropsWithChildren<MessageComposerProps>) => {\n  const messageComposerBindings = useMessageComposerBindings(props);\n  const { emojiSearchIndex } = useComponentContext();\n\n  const messageComposerContextValue = useCreateMessageComposerContext({\n    ...messageComposerBindings,\n    ...props,\n    emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex,\n  });\n\n  const messageComposer = useMessageComposerController();\n  const suppliedComposer = useMessageComposerControllerContext();\n\n  useEffect(\n    () => () => {\n      // `createDraft` already skips edits and composers with drafts disabled.\n      const draftSaved = messageComposer.createDraft().catch(console.error);\n      // Only the thread's or channel's own composer is emptied here. One supplied through\n      // `MessageComposerControllerProvider` belongs to whoever supplied it, and so does deciding\n      // when to clear it - clearing it on unmount would discard an edit the owner still holds (visible in Strict Mode).\n      if (messageComposer === suppliedComposer) return;\n      draftSaved.finally(() => messageComposer.clear());\n    },\n    [messageComposer, suppliedComposer],\n  );\n\n  useEffect(() => {\n    const threadId = messageComposer.threadId;\n    if (\n      !threadId ||\n      !messageComposer.channel ||\n      !messageComposer.contentIsEmpty ||\n      !messageComposer.config.drafts.enabled\n    )\n      return;\n    // get draft data for legacy thead composer\n    messageComposer.channel\n      .getDraft({ parent_id: threadId })\n      .then(({ draft }) => {\n        if (draft) {\n          messageComposer.initState({ composition: draft });\n        }\n      })\n      .catch(console.error);\n  }, [messageComposer]);\n\n  useRegisterDropHandlers();\n\n  return (\n    <MessageComposerContextProvider value={messageComposerContextValue}>\n      {props.children}\n    </MessageComposerContextProvider>\n  );\n};\n\nconst UnMemoizedMessageComposer = (props: MessageComposerProps) => {\n  const { MessageComposerUI = DefaultMessageComposerUI } = useComponentContext();\n  const messageComposer = useMessageComposerController();\n  const id = useStableId();\n\n  const dialogManagerId = messageComposer.threadId\n    ? `message-input-dialog-manager-thread-${id}`\n    : `message-input-dialog-manager-${id}`;\n\n  return (\n    <DialogManagerProvider id={dialogManagerId}>\n      <MessageComposerProvider {...props}>\n        <MessageComposerUI />\n      </MessageComposerProvider>\n    </DialogManagerProvider>\n  );\n};\n\n/**\n * A high level component that has provides all functionality to the Input it renders.\n */\nexport const MessageComposer = React.memo(\n  UnMemoizedMessageComposer,\n) as typeof UnMemoizedMessageComposer;\n"],"mappings":";;;;;;;;;;;;;AA+EA,IAAM,2BAA2B,UAAmD;CAClF,MAAM,0BAA0B,2BAA2B,KAAK;CAChE,MAAM,EAAE,qBAAqB,oBAAoB;CAEjD,MAAM,8BAA8B,gCAAgC;EAClE,GAAG;EACH,GAAG;EACH,kBAAkB,MAAM,oBAAoB;CAC9C,CAAC;CAED,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,mBAAmB,oCAAoC;CAE7D,sBACc;EAEV,MAAM,aAAa,gBAAgB,YAAY,CAAC,CAAC,MAAM,QAAQ,KAAK;EAIpE,IAAI,oBAAoB,kBAAkB;EAC1C,WAAW,cAAc,gBAAgB,MAAM,CAAC;CAClD,GACA,CAAC,iBAAiB,gBAAgB,CACpC;CAEA,gBAAgB;EACd,MAAM,WAAW,gBAAgB;EACjC,IACE,CAAC,YACD,CAAC,gBAAgB,WACjB,CAAC,gBAAgB,kBACjB,CAAC,gBAAgB,OAAO,OAAO,SAE/B;EAEF,gBAAgB,QACb,SAAS,EAAE,WAAW,SAAS,CAAC,CAAC,CACjC,MAAM,EAAE,YAAY;GACnB,IAAI,OACF,gBAAgB,UAAU,EAAE,aAAa,MAAM,CAAC;EAEpD,CAAC,CAAC,CACD,MAAM,QAAQ,KAAK;CACxB,GAAG,CAAC,eAAe,CAAC;CAEpB,wBAAwB;CAExB,OACE,oBAAC,gCAAD;EAAgC,OAAO;YACpC,MAAM;CACuB,CAAA;AAEpC;AAEA,IAAM,6BAA6B,UAAgC;CACjE,MAAM,EAAE,mBAAA,sBAAoB,sBAA6B,oBAAoB;CAC7E,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,KAAK,YAAY;CAMvB,OACE,oBAAC,uBAAD;EAAuB,IALD,gBAAgB,WACpC,uCAAuC,OACvC,gCAAgC;YAIhC,oBAAC,yBAAD;GAAyB,GAAI;aAC3B,oBAAC,qBAAD,CAAoB,CAAA;EACG,CAAA;CACJ,CAAA;AAE3B;;;;AAKA,IAAa,kBAAkB,MAAM,KACnC,yBACF"}

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

@@ -0,0 +1,75 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useAIState } from "../AIStateIndicator/hooks/useAIState.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useInertWhenHidden } from "../Accessibility/hooks/useInertWhenHidden.mjs";
+import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
+import { useMessageComposerSubmitFn } from "./hooks/useMessageComposerSubmitFn.mjs";
+import { useMessageContentIsEmpty } from "./hooks/useMessageContentIsEmpty.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { AudioRecordingButtonWithNotification } from "../MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.mjs";
+import { useIsCooldownActive } from "./hooks/useIsCooldownActive.mjs";
+import { CooldownTimer } from "./CooldownTimer.mjs";
+import { StopAIGenerationButton } from "./StopAIGenerationButton.mjs";
+import { SendButton } from "./SendButton.mjs";
+import { useCallback } from "react";
+import { AIStates } from "stream-chat";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageComposer/MessageComposerActions.tsx
+var STOPPABLE_AI_STATES = [AIStates.Thinking, AIStates.Generating];
+var messageComposerStateSelector = ({ editedMessage }) => ({ editedMessage });
+var textComposerStateSelector = ({ command, text }) => ({
+	command,
+	text
+});
+var MessageComposerActions = () => {
+	const { IconCheckmark, IconSend } = useComponentContextIcons();
+	const channel = useChannel();
+	const { hideSendButton } = useMessageComposerContext();
+	const messageComposer = useMessageComposerController();
+	const { CooldownTimer: CooldownTimer$1 = CooldownTimer, SendButton: SendButton$1, StopAIGenerationButton: StopAIGenerationButtonOverride } = useComponentContext();
+	const { editedMessage } = useStateStore(messageComposer.state, messageComposerStateSelector);
+	const { command } = useStateStore(messageComposer.textComposer.state, textComposerStateSelector);
+	const contentIsEmpty = useMessageContentIsEmpty();
+	/**
+	* This bit here is needed to make sure that we can get rid of the default behaviour
+	* if need be. Essentially, this allows us to pass StopAIGenerationButton={null} and
+	* completely circumvent the default logic if it's not what we want. We need it as a
+	* prop because there is no other trivial way to override the SendMessage button otherwise.
+	*/
+	const StopAIGenerationButton$1 = StopAIGenerationButtonOverride === void 0 ? StopAIGenerationButton : StopAIGenerationButtonOverride;
+	const { recordingController } = useMessageComposerContext();
+	const submitMessageFn = useMessageComposerSubmitFn();
+	const isCooldownActive = useIsCooldownActive();
+	const { aiState } = useAIState(channel);
+	const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
+	const shouldDisplayStopAIGeneration = STOPPABLE_AI_STATES.includes(aiState) && !!StopAIGenerationButton$1;
+	const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices);
+	let content = SendButton$1 ? /* @__PURE__ */ jsx(SendButton$1, { sendMessage: submitMessageFn }) : /* @__PURE__ */ jsx(SendButton, {
+		sendMessage: submitMessageFn,
+		children: editedMessage || command ? /* @__PURE__ */ jsx(IconCheckmark, {}) : /* @__PURE__ */ jsx(IconSend, {})
+	});
+	if (shouldDisplayStopAIGeneration) content = /* @__PURE__ */ jsx(StopAIGenerationButton$1, { onClick: stopGenerating });
+	else if (hideSendButton) return null;
+	if (isCooldownActive) content = /* @__PURE__ */ jsx(CooldownTimer$1, {});
+	else if (contentIsEmpty && !editedMessage && !command && recordingEnabled) content = /* @__PURE__ */ jsx(AudioRecordingButtonWithNotification, {});
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__message-composer__actions",
+		children: content
+	});
+};
+var AdditionalMessageComposerActions = () => {
+	const { EmojiPicker } = useComponentContext();
+	const isCooldownActive = useIsCooldownActive();
+	const { command } = useStateStore(useMessageComposerController().textComposer.state, textComposerStateSelector);
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__message-composer__additional-actions",
+		...useInertWhenHidden(!!command, { setHiddenAttribute: false }),
+		children: !isCooldownActive && EmojiPicker ? /* @__PURE__ */ jsx(EmojiPicker, {}) : null
+	});
+};
+//#endregion
+export { AdditionalMessageComposerActions, MessageComposerActions };
+
+//# sourceMappingURL=MessageComposerActions.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageComposerActions.mjs","names":[],"sources":["../../../../src/components/MessageComposer/MessageComposerActions.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { StopAIGenerationButton as DefaultStopAIGenerationButton } from './StopAIGenerationButton';\nimport { CooldownTimer as DefaultCooldownTimer } from './CooldownTimer';\nimport { SendButton as DefaultSendButton } from './SendButton';\nimport {\n  useChannel,\n  useComponentContext,\n  useComponentContextIcons,\n  useMessageComposerContext,\n} from '../../context';\nimport { useAIState } from '../AIStateIndicator';\nimport {\n  useMessageComposerController,\n  useMessageComposerSubmitFn,\n  useMessageContentIsEmpty,\n} from './hooks';\nimport { AudioRecordingButtonWithNotification } from '../MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification';\nimport { useIsCooldownActive } from './hooks/useIsCooldownActive';\nimport { AIStates } from 'stream-chat';\nimport type { AIState, MessageComposerState, TextComposerState } from 'stream-chat';\nimport { useStateStore } from '../../store';\nimport { useInertWhenHidden } from '../Accessibility';\n\n// `AIStates` is imported from its owner rather than through the `../AIStateIndicator` barrel: that\n// barrel participates in an import cycle, which would leave the re-exported binding uninitialized\n// while this module-scope const evaluates.\n// Widened to `AIState` deliberately: `AIStates` is a literal-typed const, so an inferred array of\n// its members would reject the wide `AIState` that `useAIState` returns.\nconst STOPPABLE_AI_STATES: readonly AIState[] = [AIStates.Thinking, AIStates.Generating];\n\nconst messageComposerStateSelector = ({ editedMessage }: MessageComposerState) => ({\n  editedMessage,\n});\n\nconst textComposerStateSelector = ({ command, text }: TextComposerState) => ({\n  command,\n  text,\n});\n\nexport const MessageComposerActions = () => {\n  const { IconCheckmark, IconSend } = useComponentContextIcons();\n  const channel = useChannel();\n  const { hideSendButton } = useMessageComposerContext();\n  const messageComposer = useMessageComposerController();\n  const {\n    CooldownTimer = DefaultCooldownTimer,\n    SendButton,\n    StopAIGenerationButton: StopAIGenerationButtonOverride,\n  } = useComponentContext();\n\n  const { editedMessage } = useStateStore(\n    messageComposer.state,\n    messageComposerStateSelector,\n  );\n\n  const { command } = useStateStore(\n    messageComposer.textComposer.state,\n    textComposerStateSelector,\n  );\n\n  const contentIsEmpty = useMessageContentIsEmpty();\n  /**\n   * This bit here is needed to make sure that we can get rid of the default behaviour\n   * if need be. Essentially, this allows us to pass StopAIGenerationButton={null} and\n   * completely circumvent the default logic if it's not what we want. We need it as a\n   * prop because there is no other trivial way to override the SendMessage button otherwise.\n   */\n  const StopAIGenerationButton =\n    StopAIGenerationButtonOverride === undefined\n      ? DefaultStopAIGenerationButton\n      : StopAIGenerationButtonOverride;\n\n  const { recordingController } = useMessageComposerContext();\n  const submitMessageFn = useMessageComposerSubmitFn();\n  const isCooldownActive = useIsCooldownActive();\n\n  const { aiState } = useAIState(channel);\n  const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);\n  const shouldDisplayStopAIGeneration =\n    STOPPABLE_AI_STATES.includes(aiState) && !!StopAIGenerationButton;\n\n  const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices); // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303\n\n  let content = SendButton ? (\n    <SendButton sendMessage={submitMessageFn} />\n  ) : (\n    <DefaultSendButton sendMessage={submitMessageFn}>\n      {editedMessage || command ? <IconCheckmark /> : <IconSend />}\n    </DefaultSendButton>\n  );\n\n  if (shouldDisplayStopAIGeneration) {\n    content = <StopAIGenerationButton onClick={stopGenerating} />;\n  } else if (hideSendButton) return null;\n\n  if (isCooldownActive) {\n    content = <CooldownTimer />;\n  } else if (contentIsEmpty && !editedMessage && !command && recordingEnabled) {\n    content = <AudioRecordingButtonWithNotification />;\n  }\n\n  return <div className='str-chat__message-composer__actions'>{content}</div>;\n};\n\nexport const AdditionalMessageComposerActions = () => {\n  const { EmojiPicker } = useComponentContext();\n  const isCooldownActive = useIsCooldownActive();\n  const messageComposer = useMessageComposerController();\n  const { command } = useStateStore(\n    messageComposer.textComposer.state,\n    textComposerStateSelector,\n  );\n  // The additional actions are visually hidden via a CSS transition while a\n  // command is active; keep them removed from the a11y tree and tab order\n  // without setting `display: none` (which would kill the transition).\n  const inertProps = useInertWhenHidden(!!command, { setHiddenAttribute: false });\n\n  return (\n    <div className='str-chat__message-composer__additional-actions' {...inertProps}>\n      {!isCooldownActive && EmojiPicker ? <EmojiPicker /> : null}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BA,IAAM,sBAA0C,CAAC,SAAS,UAAU,SAAS,UAAU;AAEvF,IAAM,gCAAgC,EAAE,qBAA2C,EACjF,cACF;AAEA,IAAM,6BAA6B,EAAE,SAAS,YAA+B;CAC3E;CACA;AACF;AAEA,IAAa,+BAA+B;CAC1C,MAAM,EAAE,eAAe,aAAa,yBAAyB;CAC7D,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,mBAAmB,0BAA0B;CACrD,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EACJ,eAAA,kBAAgB,eAChB,YAAA,cACA,wBAAwB,mCACtB,oBAAoB;CAExB,MAAM,EAAE,kBAAkB,cACxB,gBAAgB,OAChB,4BACF;CAEA,MAAM,EAAE,YAAY,cAClB,gBAAgB,aAAa,OAC7B,yBACF;CAEA,MAAM,iBAAiB,yBAAyB;;;;;;;CAOhD,MAAM,2BACJ,mCAAmC,KAAA,IAC/B,yBACA;CAEN,MAAM,EAAE,wBAAwB,0BAA0B;CAC1D,MAAM,kBAAkB,2BAA2B;CACnD,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,EAAE,YAAY,WAAW,OAAO;CACtC,MAAM,iBAAiB,kBAAkB,SAAS,eAAe,GAAG,CAAC,OAAO,CAAC;CAC7E,MAAM,gCACJ,oBAAoB,SAAS,OAAO,KAAK,CAAC,CAAC;CAE7C,MAAM,mBAAmB,CAAC,EAAE,oBAAoB,YAAY,UAAU;CAEtE,IAAI,UAAU,eACZ,oBAAC,cAAD,EAAY,aAAa,gBAAkB,CAAA,IAE3C,oBAAC,YAAD;EAAmB,aAAa;YAC7B,iBAAiB,UAAU,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CAC1C,CAAA;CAGrB,IAAI,+BACF,UAAU,oBAAC,0BAAD,EAAwB,SAAS,eAAiB,CAAA;MACvD,IAAI,gBAAgB,OAAO;CAElC,IAAI,kBACF,UAAU,oBAAC,iBAAD,CAAgB,CAAA;MACrB,IAAI,kBAAkB,CAAC,iBAAiB,CAAC,WAAW,kBACzD,UAAU,oBAAC,sCAAD,CAAuC,CAAA;CAGnD,OAAO,oBAAC,OAAD;EAAK,WAAU;YAAuC;CAAa,CAAA;AAC5E;AAEA,IAAa,yCAAyC;CACpD,MAAM,EAAE,gBAAgB,oBAAoB;CAC5C,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,EAAE,YAAY,cADI,6BAEtB,CAAA,CAAgB,aAAa,OAC7B,yBACF;CAMA,OACE,oBAAC,OAAD;EAAK,WAAU;EAAiD,GAH/C,mBAAmB,CAAC,CAAC,SAAS,EAAE,oBAAoB,MAAM,CAGP;YACjE,CAAC,oBAAoB,cAAc,oBAAC,aAAD,CAAc,CAAA,IAAI;CACnD,CAAA;AAET"}

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

@@ -0,0 +1,100 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { MessageContext } from "../../context/MessageContext.mjs";
+import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
+import { restorePreEditSnapshot } from "./preEditSnapshot.mjs";
+import { QuotedMessagePreview } from "./QuotedMessagePreview.mjs";
+import { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
+import { AudioRecorder } from "../MediaRecorder/AudioRecorder/AudioRecorder.mjs";
+import { AttachmentSelector, SimpleAttachmentSelector } from "./AttachmentSelector/AttachmentSelector.mjs";
+import { AttachmentPreviewList } from "./AttachmentPreviewList/AttachmentPreviewList.mjs";
+import { VoiceRecordingPreviewSlot } from "./AttachmentPreviewList/VoiceRecordingPreviewSlot.mjs";
+import { CommandChip } from "./CommandChip.mjs";
+import { LinkPreviewList } from "./LinkPreviewList.mjs";
+import { EditedMessagePreview } from "./EditedMessagePreview.mjs";
+import { SendToChannelCheckbox } from "./SendToChannelCheckbox.mjs";
+import { TextareaComposer } from "../TextareaComposer/TextareaComposer.mjs";
+import { WithDragAndDropUpload } from "./WithDragAndDropUpload.mjs";
+import { AdditionalMessageComposerActions, MessageComposerActions } from "./MessageComposerActions.mjs";
+import { GeolocationPreview } from "./AttachmentPreviewList/GeolocationPreview.mjs";
+import { useContext } from "react";
+import { LinkPreviewsManager } from "stream-chat";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageComposer/MessageComposerUI.tsx
+var messageComposerStateSelector = ({ editedMessage, quotedMessage }) => ({
+	editedMessage,
+	quotedMessage
+});
+var attachmentManagerStateSelector = (state) => ({ attachments: state.attachments });
+var linkPreviewsManagerStateSelector = (state) => ({ linkPreviews: Array.from(state.previews.values()).filter((preview) => LinkPreviewsManager.previewIsLoaded(preview) || LinkPreviewsManager.previewIsLoading(preview)) });
+var locationComposerStateSelector = (state) => ({ location: state.location });
+var textComposerCommandSelector = ({ command }) => ({ command });
+var MessageComposerPreviews = () => {
+	const { AttachmentPreviewList: AttachmentPreviewList$1 = AttachmentPreviewList, EditedMessagePreview: EditedMessagePreview$1 = EditedMessagePreview, LinkPreviewList: LinkPreviewList$1 = LinkPreviewList, QuotedMessagePreview: QuotedMessagePreview$1 = QuotedMessagePreview, VoiceRecordingPreviewSlot: VoiceRecordingPreviewSlot$1 = VoiceRecordingPreviewSlot } = useComponentContext();
+	const messageComposer = useMessageComposerController();
+	const { editedMessage, quotedMessage } = useStateStore(messageComposer.state, messageComposerStateSelector);
+	const { attachments } = useStateStore(messageComposer.attachmentManager.state, attachmentManagerStateSelector);
+	const { location } = useStateStore(messageComposer.locationComposer.state, locationComposerStateSelector);
+	const { linkPreviewsManager } = messageComposer;
+	const { linkPreviews } = useStateStore(linkPreviewsManager.state, linkPreviewsManagerStateSelector);
+	if (!quotedMessage && attachments.length === 0 && linkPreviews.length === 0 && !location && !editedMessage) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__message-composer-previews",
+		children: [
+			editedMessage ? /* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-composer-previews",
+				children: /* @__PURE__ */ jsx(EditedMessagePreview$1, {
+					message: editedMessage,
+					onCancel: () => {
+						restorePreEditSnapshot(messageComposer);
+					}
+				})
+			}) : /* @__PURE__ */ jsx(QuotedMessagePreview$1, {}),
+			/* @__PURE__ */ jsx(VoiceRecordingPreviewSlot$1, {}),
+			/* @__PURE__ */ jsx(AttachmentPreviewList$1, {}),
+			/* @__PURE__ */ jsx(LinkPreviewList$1, {}),
+			location && /* @__PURE__ */ jsx(GeolocationPreview, {
+				location,
+				remove: messageComposer.editedMessage ? void 0 : messageComposer.locationComposer.initState
+			})
+		]
+	});
+};
+var MessageComposerUI = () => {
+	const { message } = useContext(MessageContext) ?? {};
+	const { recordingController } = useMessageComposerContext();
+	const { command } = useStateStore(useMessageComposerController().textComposer.state, textComposerCommandSelector);
+	const { AdditionalMessageComposerActions: AdditionalMessageComposerActions$1 = AdditionalMessageComposerActions, AttachmentSelector: AttachmentSelector$1 = message ? SimpleAttachmentSelector : AttachmentSelector, AudioRecorder: AudioRecorder$1 = AudioRecorder, CommandChip: CommandChip$1 = CommandChip, SendToChannelCheckbox: SendToChannelCheckbox$1 = SendToChannelCheckbox, TextareaComposer: TextareaComposer$1 = TextareaComposer } = useComponentContext();
+	return /* @__PURE__ */ jsx(WithDragAndDropUpload, {
+		className: "str-chat__message-composer-container",
+		component: "div",
+		children: /* @__PURE__ */ jsx("div", {
+			className: clsx("str-chat__message-composer", { "str-chat__message-composer--command-active": !!command }),
+			children: recordingController.recordingState ? /* @__PURE__ */ jsx(AudioRecorder$1, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AttachmentSelector$1, {}), /* @__PURE__ */ jsxs("div", {
+				className: "str-chat__message-composer-compose-area",
+				children: [/* @__PURE__ */ jsx(MessageComposerPreviews, {}), /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__message-composer-controls",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "str-chat__message-composer-controls__text-composition-controls",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "str-chat__message-composer-controls__text-composition-controls__text",
+								children: [command && /* @__PURE__ */ jsx("div", {
+									className: "str-chat__message-composer-controls__text-composition-controls__command-chip-container",
+									children: /* @__PURE__ */ jsx(CommandChip$1, { command })
+								}), /* @__PURE__ */ jsx(TextareaComposer$1, {})]
+							}), /* @__PURE__ */ jsx(SendToChannelCheckbox$1, {})]
+						}),
+						/* @__PURE__ */ jsx(AdditionalMessageComposerActions$1, {}),
+						/* @__PURE__ */ jsx(MessageComposerActions, {})
+					]
+				})]
+			})] })
+		})
+	});
+};
+//#endregion
+export { MessageComposerUI };
+
+//# sourceMappingURL=MessageComposerUI.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageComposerUI.mjs","names":[],"sources":["../../../../src/components/MessageComposer/MessageComposerUI.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport clsx from 'clsx';\n\nimport {\n  AttachmentSelector as DefaultAttachmentSelector,\n  SimpleAttachmentSelector,\n} from './AttachmentSelector/AttachmentSelector';\nimport {\n  AttachmentPreviewList as DefaultAttachmentPreviewList,\n  VoiceRecordingPreviewSlot as DefaultVoiceRecordingPreviewSlot,\n} from './AttachmentPreviewList';\nimport { AudioRecorder as DefaultAudioRecorder } from '../MediaRecorder';\nimport { EditedMessagePreview as DefaultEditedMessagePreview } from './EditedMessagePreview';\nimport { QuotedMessagePreview as DefaultQuotedMessagePreview } from './QuotedMessagePreview';\nimport { LinkPreviewList as DefaultLinkPreviewList } from './LinkPreviewList';\nimport { SendToChannelCheckbox as DefaultSendToChannelCheckbox } from './SendToChannelCheckbox';\nimport { TextareaComposer as DefaultTextareaComposer } from '../TextareaComposer';\nimport { useMessageComposerContext as useMessageComposerContext } from '../../context/MessageComposerContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { MessageContext } from '../../context';\nimport { restorePreEditSnapshot } from './preEditSnapshot';\nimport { WithDragAndDropUpload } from './WithDragAndDropUpload';\nimport {\n  AdditionalMessageComposerActions as DefaultAdditionalMessageComposerActions,\n  MessageComposerActions,\n} from './MessageComposerActions';\nimport { useMessageComposerController } from './hooks';\nimport { useStateStore } from '../../store';\nimport {\n  type AttachmentManagerState,\n  LinkPreviewsManager,\n  type LinkPreviewsManagerState,\n  type LocationComposerState,\n  type MessageComposerState,\n  type TextComposerState,\n} from 'stream-chat';\nimport { CommandChip as DefaultCommandChip } from './CommandChip';\nimport { GeolocationPreview } from './AttachmentPreviewList/GeolocationPreview';\n\nconst messageComposerStateSelector = ({\n  editedMessage,\n  quotedMessage,\n}: MessageComposerState) => ({\n  editedMessage,\n  quotedMessage,\n});\n\nconst attachmentManagerStateSelector = (state: AttachmentManagerState) => ({\n  attachments: state.attachments,\n});\n\nconst linkPreviewsManagerStateSelector = (state: LinkPreviewsManagerState) => ({\n  linkPreviews: Array.from(state.previews.values()).filter(\n    (preview) =>\n      LinkPreviewsManager.previewIsLoaded(preview) ||\n      LinkPreviewsManager.previewIsLoading(preview),\n  ),\n});\n\nconst locationComposerStateSelector = (state: LocationComposerState) => ({\n  location: state.location,\n});\n\nconst textComposerCommandSelector = ({ command }: TextComposerState) => ({ command });\n\nconst MessageComposerPreviews = () => {\n  const {\n    AttachmentPreviewList = DefaultAttachmentPreviewList,\n    EditedMessagePreview = DefaultEditedMessagePreview,\n    LinkPreviewList = DefaultLinkPreviewList,\n    QuotedMessagePreview = DefaultQuotedMessagePreview,\n    VoiceRecordingPreviewSlot = DefaultVoiceRecordingPreviewSlot,\n  } = useComponentContext();\n\n  const messageComposer = useMessageComposerController();\n  const { editedMessage, quotedMessage } = useStateStore(\n    messageComposer.state,\n    messageComposerStateSelector,\n  );\n\n  const { attachments } = useStateStore(\n    messageComposer.attachmentManager.state,\n    attachmentManagerStateSelector,\n  );\n\n  const { location } = useStateStore(\n    messageComposer.locationComposer.state,\n    locationComposerStateSelector,\n  );\n\n  const { linkPreviewsManager } = messageComposer;\n  const { linkPreviews } = useStateStore(\n    linkPreviewsManager.state,\n    linkPreviewsManagerStateSelector,\n  );\n\n  if (\n    !quotedMessage &&\n    attachments.length === 0 &&\n    linkPreviews.length === 0 &&\n    !location &&\n    !editedMessage\n  )\n    return null;\n\n  // todo: pass the entity arrays from here so that the preview lists do not have to subscribe to the composer state changes too?\n  return (\n    <div className='str-chat__message-composer-previews'>\n      {editedMessage ? (\n        <div className='str-chat__message-composer-previews'>\n          <EditedMessagePreview\n            message={editedMessage}\n            onCancel={() => {\n              restorePreEditSnapshot(messageComposer);\n            }}\n          />\n        </div>\n      ) : (\n        <QuotedMessagePreview />\n      )}\n      <VoiceRecordingPreviewSlot />\n      <AttachmentPreviewList />\n      <LinkPreviewList />\n      {location && (\n        <GeolocationPreview\n          location={location}\n          // It is not possible to nullify shared_location field so we do not show a preview when editing\n          // to prevent a user from wanting to remove the location\n          remove={\n            messageComposer.editedMessage\n              ? undefined\n              : messageComposer.locationComposer.initState\n          }\n        />\n      )}\n    </div>\n  );\n};\n\nexport const MessageComposerUI = () => {\n  // a message is present only while editing\n  const { message } = useContext(MessageContext) ?? {};\n  const { recordingController } = useMessageComposerContext();\n  const messageComposerController = useMessageComposerController();\n  const { command } = useStateStore(\n    messageComposerController.textComposer.state,\n    textComposerCommandSelector,\n  );\n\n  const {\n    AdditionalMessageComposerActions = DefaultAdditionalMessageComposerActions,\n    AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector,\n    AudioRecorder = DefaultAudioRecorder,\n    CommandChip = DefaultCommandChip,\n    SendToChannelCheckbox = DefaultSendToChannelCheckbox,\n    TextareaComposer = DefaultTextareaComposer,\n  } = useComponentContext();\n\n  return (\n    <WithDragAndDropUpload\n      className='str-chat__message-composer-container'\n      component='div'\n    >\n      <div\n        className={clsx('str-chat__message-composer', {\n          'str-chat__message-composer--command-active': !!command,\n        })}\n      >\n        {recordingController.recordingState ? (\n          <AudioRecorder />\n        ) : (\n          <>\n            <AttachmentSelector />\n            <div className='str-chat__message-composer-compose-area'>\n              <MessageComposerPreviews />\n              <div className='str-chat__message-composer-controls'>\n                <div className='str-chat__message-composer-controls__text-composition-controls'>\n                  <div className='str-chat__message-composer-controls__text-composition-controls__text'>\n                    {command && (\n                      <div className='str-chat__message-composer-controls__text-composition-controls__command-chip-container'>\n                        <CommandChip command={command} />\n                      </div>\n                    )}\n                    <TextareaComposer />\n                  </div>\n                  <SendToChannelCheckbox />\n                </div>\n                <AdditionalMessageComposerActions />\n                <MessageComposerActions />\n              </div>\n            </div>\n          </>\n        )}\n      </div>\n    </WithDragAndDropUpload>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageComposer/QuotedMessageIndicator.tsx
+var QuotedMessageIndicator = ({ isOwnMessage }) => /* @__PURE__ */ jsx("div", { className: clsx("str-chat__quoted-message-indicator", { "str-chat__quoted-message-indicator--own-message": isOwnMessage }) });
+//#endregion
+export { QuotedMessageIndicator };
+
+//# sourceMappingURL=QuotedMessageIndicator.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuotedMessageIndicator.mjs","names":[],"sources":["../../../../src/components/MessageComposer/QuotedMessageIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nexport const QuotedMessageIndicator = ({ isOwnMessage }: { isOwnMessage?: boolean }) => (\n  <div\n    className={clsx('str-chat__quoted-message-indicator', {\n      'str-chat__quoted-message-indicator--own-message': isOwnMessage,\n    })}\n  />\n);\n"],"mappings":";;;;AAGA,IAAa,0BAA0B,EAAE,mBACvC,oBAAC,OAAD,EACE,WAAW,KAAK,sCAAsC,EACpD,mDAAmD,aACrD,CAAC,EACF,CAAA"}