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

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

@@ -1 +1 @@
-{"version":3,"file":"MessageComposer.mjs","names":[],"sources":["../../../../src/components/MessageComposer/MessageComposer.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React, { useContext, 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 { DialogManagerProvider } from '../../context';\nimport { useStableId } from '../UtilityComponents/useStableId';\n\nimport type {\n  LocalMessage,\n  Message,\n  MessageComposer as MessageComposerController,\n  SendMessageOptions,\n} from 'stream-chat';\n\nimport type { CustomAudioRecordingConfig } from '../MediaRecorder';\nimport { useRegisterDropHandlers } from './WithDragAndDropUpload';\n\nconst MessageComposerControllerContext = React.createContext<\n  MessageComposerController | undefined\n>(undefined);\n\nexport const MessageComposerControllerProvider = ({\n  children,\n  messageComposerController,\n}: PropsWithChildren<{\n  messageComposerController?: MessageComposerController;\n}>) => (\n  <MessageComposerControllerContext.Provider value={messageComposerController}>\n    {children}\n  </MessageComposerControllerContext.Provider>\n);\n\nexport const useMessageComposerControllerContext = () =>\n  useContext(MessageComposerControllerContext);\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  /** Function to override the default message sending process. Not message updating process. */\n  overrideSubmitHandler?: (params: {\n    cid: string;\n    localMessage: LocalMessage;\n    message: Message;\n    sendOptions: SendMessageOptions;\n  }) => Promise<void> | void;\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   * When set to `true` disables clearing established state of the MessageComposerController upon component unmount.\n   */\n  preventClearingOnUnmount?: boolean;\n};\n\nconst MessageComposerProvider = (props: PropsWithChildren<MessageComposerProps>) => {\n  const messageComposerBindings = useMessageComposerBindings(props);\n  const { emojiSearchIndex } = useComponentContext('MessageComposer');\n\n  const messageComposerContextValue = useCreateMessageComposerContext({\n    ...messageComposerBindings,\n    ...props,\n    emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex,\n  });\n\n  const messageComposer = useMessageComposerController();\n\n  useEffect(\n    () => () => {\n      // both createDraft() and clear() reach channel.getConfig(), which throws\n      // for a disconnected channel\n      if (messageComposer.channel.disconnected) return;\n\n      const promise = messageComposer.config.drafts.enabled\n        ? messageComposer.createDraft().catch(console.error)\n        : Promise.resolve();\n\n      if (props.preventClearingOnUnmount) return;\n\n      promise.finally(() => messageComposer.clear());\n    },\n    [messageComposer, props.preventClearingOnUnmount],\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 } =\n    useComponentContext('MessageComposer');\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":";;;;;;;;;;;;AAuBA,IAAM,mCAAmC,MAAM,cAE7C,KAAA,CAAS;AAEX,IAAa,qCAAqC,EAChD,UACA,gCAIA,oBAAC,iCAAiC,UAAlC;CAA2C,OAAO;CAC/C;AACwC,CAAA;AAG7C,IAAa,4CACX,WAAW,gCAAgC;AAuE7C,IAAM,2BAA2B,UAAmD;CAClF,MAAM,0BAA0B,2BAA2B,KAAK;CAChE,MAAM,EAAE,qBAAqB,oBAAoB,iBAAiB;CAElE,MAAM,8BAA8B,gCAAgC;EAClE,GAAG;EACH,GAAG;EACH,kBAAkB,MAAM,oBAAoB;CAC9C,CAAC;CAED,MAAM,kBAAkB,6BAA6B;CAErD,sBACc;EAGV,IAAI,gBAAgB,QAAQ,cAAc;EAE1C,MAAM,UAAU,gBAAgB,OAAO,OAAO,UAC1C,gBAAgB,YAAY,CAAC,CAAC,MAAM,QAAQ,KAAK,IACjD,QAAQ,QAAQ;EAEpB,IAAI,MAAM,0BAA0B;EAEpC,QAAQ,cAAc,gBAAgB,MAAM,CAAC;CAC/C,GACA,CAAC,iBAAiB,MAAM,wBAAwB,CAClD;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,sBAC1B,oBAAoB,iBAAiB;CACvC,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"}
+{"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

@@ -1,20 +1,23 @@
-import { AIStates, useAIState } from "../AIStateIndicator/hooks/useAIState.mjs";
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
-import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
-import { useMessageComposerContext } from "../../context/MessageComposerContext.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 { AudioRecordingButtonWithNotification } from "../MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.mjs";
 import { StopAIGenerationButton } from "./StopAIGenerationButton.mjs";
 import { SendButton } from "./SendButton.mjs";
-import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
-import { useInertWhenHidden } from "../Accessibility/hooks/useInertWhenHidden.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,
@@ -22,7 +25,7 @@ var textComposerStateSelector = ({ command, text }) => ({
 });
 var MessageComposerActions = () => {
 	const { IconCheckmark, IconSend } = useComponentContextIcons();
-	const { channel } = useChannelStateContext();
+	const channel = useChannel();
 	const { hideSendButton } = useMessageComposerContext();
 	const messageComposer = useMessageComposerController();
 	const { CooldownTimer: CooldownTimer$1 = CooldownTimer, SendButton: SendButton$1, StopAIGenerationButton: StopAIGenerationButtonOverride } = useComponentContext();
@@ -36,14 +39,15 @@ var MessageComposerActions = () => {
 	* prop because there is no other trivial way to override the SendMessage button otherwise.
 	*/
 	const StopAIGenerationButton$1 = StopAIGenerationButtonOverride === void 0 ? StopAIGenerationButton : StopAIGenerationButtonOverride;
-	const { handleSubmit, recordingController } = useMessageComposerContext();
+	const { recordingController } = useMessageComposerContext();
+	const submitMessageFn = useMessageComposerSubmitFn();
 	const isCooldownActive = useIsCooldownActive();
 	const { aiState } = useAIState(channel);
 	const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
-	const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopAIGenerationButton$1;
+	const shouldDisplayStopAIGeneration = STOPPABLE_AI_STATES.includes(aiState) && !!StopAIGenerationButton$1;
 	const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices);
-	let content = SendButton$1 ? /* @__PURE__ */ jsx(SendButton$1, { sendMessage: handleSubmit }) : /* @__PURE__ */ jsx(SendButton, {
-		sendMessage: handleSubmit,
+	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 });

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

@@ -1 +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  useChannelStateContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useMessageComposerContext,\n} from '../../context';\nimport { AIStates, useAIState } from '../AIStateIndicator';\nimport { useMessageComposerController, useMessageContentIsEmpty } from './hooks';\nimport { AudioRecordingButtonWithNotification } from '../MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification';\nimport { useIsCooldownActive } from './hooks/useIsCooldownActive';\nimport type { MessageComposerState, TextComposerState } from 'stream-chat';\nimport { useStateStore } from '../../store';\nimport { useInertWhenHidden } from '../Accessibility';\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\n  const { channel } = useChannelStateContext();\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 { handleSubmit, recordingController } = useMessageComposerContext();\n  const isCooldownActive = useIsCooldownActive();\n\n  const { aiState } = useAIState(channel);\n  const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);\n  const shouldDisplayStopAIGeneration =\n    [AIStates.Thinking, AIStates.Generating].includes(aiState) &&\n    !!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={handleSubmit} />\n  ) : (\n    <DefaultSendButton sendMessage={handleSubmit}>\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":";;;;;;;;;;;;;;;;;AAkBA,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;CAE7D,MAAM,EAAE,YAAY,uBAAuB;CAC3C,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,cAAc,wBAAwB,0BAA0B;CACxE,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,EAAE,YAAY,WAAW,OAAO;CACtC,MAAM,iBAAiB,kBAAkB,SAAS,eAAe,GAAG,CAAC,OAAO,CAAC;CAC7E,MAAM,gCACJ,CAAC,SAAS,UAAU,SAAS,UAAU,CAAC,CAAC,SAAS,OAAO,KACzD,CAAC,CAAC;CAEJ,MAAM,mBAAmB,CAAC,EAAE,oBAAoB,YAAY,UAAU;CAEtE,IAAI,UAAU,eACZ,oBAAC,cAAD,EAAY,aAAa,aAAe,CAAA,IAExC,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"}
+{"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

@@ -1,26 +1,26 @@
-import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
-import { useMessageContext } from "../../context/MessageContext.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 { useMessageComposerContext } from "../../context/MessageComposerContext.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 { AudioRecorder } from "../MediaRecorder/AudioRecorder/AudioRecorder.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 { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
-import "react";
+import { useContext } from "react";
+import { LinkPreviewsManager } from "stream-chat";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { LinkPreviewsManager } from "stream-chat";
 //#region src/components/MessageComposer/MessageComposerUI.tsx
 var messageComposerStateSelector = ({ editedMessage, quotedMessage }) => ({
 	editedMessage,
@@ -62,7 +62,7 @@ var MessageComposerPreviews = () => {
 	});
 };
 var MessageComposerUI = () => {
-	const { message } = useMessageContext();
+	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();

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

@@ -1 +1 @@
-{"version":3,"file":"MessageComposerUI.mjs","names":[],"sources":["../../../../src/components/MessageComposer/MessageComposerUI.tsx"],"sourcesContent":["import React 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 { useMessageContext } 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  const { message } = useMessageContext();\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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"}
+{"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/QuotedMessagePreview.mjs

@@ -1,19 +1,20 @@
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
-import { useChatContext } from "../../context/ChatContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useAttachmentContext } from "../../context/AttachmentContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
 import { getRenderTextMentionEntities } from "../Message/renderText/rehypePlugins/mentionsMarkdownPlugin.mjs";
+import { isDeletedMessage } from "../MessageList/utils.mjs";
 import { FileIcon } from "../FileIcon/FileIcon.mjs";
 import { SUPPORTED_VIDEO_FORMATS, displayDuration } from "../Attachment/utils.mjs";
 import { BaseImage } from "../BaseImage/BaseImage.mjs";
 import { RemoveAttachmentPreviewButton } from "./RemoveAttachmentPreviewButton.mjs";
 import { QuotedMessageIndicator } from "./QuotedMessageIndicator.mjs";
-import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useMemo } from "react";
+import { isAudioAttachment, isFileAttachment, isGiphyAttachment, isImageAttachment, isScrapedContent, isVideoAttachment, isVoiceRecordingAttachment } from "stream-chat";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { isAudioAttachment, isFileAttachment, isGiphyAttachment, isImageAttachment, isScrapedContent, isVideoAttachment, isVoiceRecordingAttachment } from "stream-chat";
 //#region src/components/MessageComposer/QuotedMessagePreview.tsx
 var messageComposerStateStoreSelector = (state) => ({ quotedMessage: state.quotedMessage });
 var NullAttachmentIcon = () => null;
@@ -82,7 +83,8 @@ var getGroupedAttachments = (quotedMessage) => {
 	}
 	return result;
 };
-var getAttachmentIconWithType = (quotedMessage, giphyVersionName, { IconCamera, IconFile, IconLink, IconLocation, IconPlayFill, IconPoll, IconVideo, IconVoice }) => {
+var getAttachmentIconWithType = (quotedMessage, giphyVersionName, icons) => {
+	const { IconCamera, IconFile, IconLink, IconLocation, IconNoSign, IconPlayFill, IconPoll, IconVideo, IconVoice } = icons;
 	const groupedAttachments = getGroupedAttachments(quotedMessage);
 	const result = {
 		groupedAttachments,
@@ -90,7 +92,11 @@ var getAttachmentIconWithType = (quotedMessage, giphyVersionName, { IconCamera,
 		PreviewImage: null,
 		previewType: null
 	};
-	if (!groupedAttachments.total) return result;
+	if (isDeletedMessage(quotedMessage)) return {
+		...result,
+		Icon: IconNoSign
+	};
+	if (!groupedAttachments.total || isDeletedMessage(quotedMessage)) return result;
 	if (groupedAttachments.polls.length > 0) return {
 		...result,
 		Icon: IconPoll,
@@ -123,7 +129,7 @@ var getAttachmentIconWithType = (quotedMessage, giphyVersionName, { IconCamera,
 			Icon: IconFile,
 			PreviewImage: /* @__PURE__ */ jsx(FileIcon, {
 				fileName: fileAttachment.title,
-				mimeType: fileAttachment.mime_type
+				mimeType: fileAttachment.custom?.mime_type
 			}),
 			previewType: "file"
 		};
@@ -200,27 +206,8 @@ var QuotedMessagePreview = ({ getQuotedMessageAuthor, renderText }) => {
 var QuotedMessagePreviewUI = ({ authorLabel, className, getQuotedMessageAuthor, onClick, onRemove, quotedMessage, renderText }) => {
 	const { client } = useChatContext();
 	const { t, userLanguage } = useTranslationContext();
-	const { giphyVersion: giphyVersionName = "fixed_height" } = useChannelStateContext("QuotedMessagePreview");
-	const { IconCamera, IconFile, IconLink, IconLocation, IconPlayFill, IconPoll, IconVideo, IconVoice } = useComponentContextIcons();
-	const iconSet = useMemo(() => ({
-		IconCamera,
-		IconFile,
-		IconLink,
-		IconLocation,
-		IconPlayFill,
-		IconPoll,
-		IconVideo,
-		IconVoice
-	}), [
-		IconCamera,
-		IconFile,
-		IconLink,
-		IconLocation,
-		IconPlayFill,
-		IconPoll,
-		IconVideo,
-		IconVoice
-	]);
+	const { giphyVersion: giphyVersionName = "fixed_height" } = useAttachmentContext();
+	const icons = useComponentContextIcons();
 	const quotedMessageText = useMemo(() => quotedMessage?.i18n?.[`${userLanguage}_text`] || quotedMessage?.text, [
 		quotedMessage?.i18n,
 		quotedMessage?.text,
@@ -244,20 +231,33 @@ var QuotedMessagePreviewUI = ({ authorLabel, className, getQuotedMessageAuthor,
 			AttachmentIcon: NullAttachmentIcon,
 			renderedText: null
 		};
-		const { groupedAttachments, Icon: AttachmentIcon, PreviewImage, previewType } = getAttachmentIconWithType(quotedMessage, giphyVersionName, iconSet);
+		const { groupedAttachments, Icon: AttachmentIcon, PreviewImage, previewType } = getAttachmentIconWithType(quotedMessage, giphyVersionName, icons);
 		let renderedText;
-		if (!quotedMessageText) {
+		if (isDeletedMessage(quotedMessage)) renderedText = t("common.messageDeleted.text", "Message deleted");
+		else if (!quotedMessageText) {
 			if (previewType === "poll") renderedText = quotedMessage.poll.name;
-			else if (previewType === "location") renderedText = t("Live location");
+			else if (previewType === "location") renderedText = t("common.liveLocation.text", "Live location");
 			else if (previewType === "voice") {
 				const voiceRecording = groupedAttachments.voiceRecordings[0];
-				renderedText = t("Voice message {{ duration }}", { duration: displayDuration(voiceRecording.duration) });
+				renderedText = t("messageComposer.quotedMessagePreview.voiceMessage.label", "Voice message {{ duration }}", { duration: displayDuration(voiceRecording?.custom?.duration) });
 			} else if (previewType === "giphy") renderedText = QUOTED_GIPHY_PREVIEW_LABEL;
 			else if (previewType === "link") renderedText = groupedAttachments.links[0].title;
-			else if (previewType === "mixed") renderedText = t("{{ count }} files", { count: groupedAttachments.total });
-			else if (previewType === "video") renderedText = groupedAttachments.videos.length === 1 ? t("Video") : t("{{ count }} videos", { count: groupedAttachments.videos.length });
+			else if (previewType === "mixed") renderedText = t("messageComposer.quotedMessagePreview.files.label", {
+				count: groupedAttachments.total,
+				defaultValue_one: "{{ count }} file",
+				defaultValue_other: "{{ count }} files"
+			});
+			else if (previewType === "video") renderedText = groupedAttachments.videos.length === 1 ? t("messageComposer.quotedMessagePreview.video.label", "Video") : t("messageComposer.quotedMessagePreview.videos.label", {
+				count: groupedAttachments.videos.length,
+				defaultValue_one: "{{ count }} video",
+				defaultValue_other: "{{ count }} videos"
+			});
 			else if (previewType === "file") renderedText = groupedAttachments.documents[0].title;
-			else if (previewType === "image") renderedText = groupedAttachments.images.length === 1 ? t("Photo") : t("{{ count }} photos", { count: groupedAttachments.images.length });
+			else if (previewType === "image") renderedText = groupedAttachments.images.length === 1 ? t("messageComposer.quotedMessagePreview.photo.label", "Photo") : t("messageComposer.quotedMessagePreview.photos.label", {
+				count: groupedAttachments.images.length,
+				defaultValue_one: "{{ count }} photo",
+				defaultValue_other: "{{ count }} photos"
+			});
 		} else if (renderText) renderedText = renderText(quotedMessageText, quotedMessage?.mentioned_users, { messageMentionEntities: quotedMessageMentionEntities });
 		else renderedText = quotedMessageText;
 		return {
@@ -267,7 +267,7 @@ var QuotedMessagePreviewUI = ({ authorLabel, className, getQuotedMessageAuthor,
 		};
 	}, [
 		giphyVersionName,
-		iconSet,
+		icons,
 		quotedMessage,
 		quotedMessageMentionEntities,
 		quotedMessageText,
@@ -284,7 +284,7 @@ var QuotedMessagePreviewUI = ({ authorLabel, className, getQuotedMessageAuthor,
 	if (!renderedText && !AttachmentIcon && !PreviewImage) return null;
 	const authorName = getQuotedMessageAuthor?.(quotedMessage) ?? quotedMessage.user?.name;
 	return /* @__PURE__ */ jsxs("div", {
-		"aria-label": isInteractive ? t("aria/Jump to quoted message") : void 0,
+		"aria-label": isInteractive ? t("messageComposer.quotedMessagePreview.jumpQuotedMessage.ariaLabel", "Jump to quoted message") : void 0,
 		className: clsx("str-chat__quoted-message-preview", className, { "str-chat__quoted-message-preview--own": isOwnMessage }),
 		"data-testid": "quoted-message-preview",
 		onClick,
@@ -297,7 +297,7 @@ var QuotedMessagePreviewUI = ({ authorLabel, className, getQuotedMessageAuthor,
 				className: "str-chat__quoted-message-preview__content",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "str-chat__quoted-message-preview__author",
-					children: authorLabel ?? (isOwnMessage ? t("You") : authorName ? t("Reply to {{ authorName }}", { authorName }) : t("Reply"))
+					children: authorLabel ?? (isOwnMessage ? t("common.you.label", "You") : authorName ? t("messageComposer.quotedMessagePreview.reply.withAuthorName.text", "Reply to {{ authorName }}", { authorName }) : t("messageComposer.quotedMessagePreview.reply.text", "Reply"))
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "str-chat__quoted-message-preview__message",
 					"data-testid": "quoted-message-text",
@@ -312,7 +312,7 @@ var QuotedMessagePreviewUI = ({ authorLabel, className, getQuotedMessageAuthor,
 				children: PreviewImage
 			}),
 			onRemove && /* @__PURE__ */ jsx(RemoveAttachmentPreviewButton, {
-				"aria-label": t("aria/Cancel Reply"),
+				"aria-label": t("messageComposer.quotedMessagePreview.cancelReply.ariaLabel", "Cancel Reply"),
 				"data-testid": "quoted-message-preview-dismiss-btn",
 				onClick: onRemove
 			})

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

@@ -1 +1 @@
-{"version":3,"file":"QuotedMessagePreview.mjs","names":[],"sources":["../../../../src/components/MessageComposer/QuotedMessagePreview.tsx"],"sourcesContent":["import React, {\n  type ComponentType,\n  type KeyboardEvent,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\n\nimport { displayDuration, SUPPORTED_VIDEO_FORMATS } from '../Attachment';\n\nimport { useChatContext } from '../../context/ChatContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nimport { useStateStore } from '../../store';\nimport { useMessageComposerController } from './hooks';\nimport {\n  type Attachment,\n  type GiphyVersions,\n  isAudioAttachment,\n  isFileAttachment,\n  isGiphyAttachment,\n  isImageAttachment,\n  isScrapedContent,\n  isVideoAttachment,\n  isVoiceRecordingAttachment,\n  type LocalMessage,\n  type LocalMessageBase,\n  type MessageComposerState,\n  type PollResponse,\n  type SharedLocationResponse,\n  type TranslationLanguages,\n} from 'stream-chat';\nimport { useChannelStateContext } from '../../context/ChannelStateContext';\nimport type { MessageContextValue } from '../../context';\nimport { RemoveAttachmentPreviewButton } from './RemoveAttachmentPreviewButton';\nimport { useComponentContextIcons } from '../../context';\nimport clsx from 'clsx';\nimport { BaseImage } from '../BaseImage';\nimport { FileIcon } from '../FileIcon';\nimport { QuotedMessageIndicator } from './QuotedMessageIndicator';\nimport { getRenderTextMentionEntities } from '../Message/renderText/rehypePlugins';\n\nconst messageComposerStateStoreSelector = (state: MessageComposerState) => ({\n  quotedMessage: state.quotedMessage,\n});\n\nexport type QuotedMessagePreviewProps = {\n  getQuotedMessageAuthor?: (message: LocalMessage) => string;\n  renderText?: MessageContextValue['renderText'];\n};\n\nconst NullAttachmentIcon = () => null;\n\nconst QUOTED_GIPHY_PREVIEW_LABEL = 'Giphy';\n\ntype AttachmentType = 'documents' | 'images' | 'links' | 'videos' | 'voiceRecordings';\n\n/** Giphy GIFs: only native type (e.g. /giphy command) is recognized as Giphy. */\nconst isQuotedGiphyAttachment = (attachment: Attachment) => isGiphyAttachment(attachment);\n\nconst getAttachmentType = (attachment: Attachment) => {\n  if (isQuotedGiphyAttachment(attachment)) {\n    return 'giphy';\n  }\n  if (isScrapedContent(attachment)) {\n    return 'link';\n  } else if (isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) {\n    return 'video';\n  } else if (isImageAttachment(attachment)) {\n    return 'image';\n  } else if (isAudioAttachment(attachment)) {\n    return 'audio';\n  } else if (isVoiceRecordingAttachment(attachment)) {\n    return 'voiceRecording';\n  } else if (isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) {\n    return 'file';\n  }\n\n  return 'unsupported';\n};\n\ntype GroupedAttachments = Record<AttachmentType, Attachment[]> & {\n  giphies: Attachment[];\n  locations: SharedLocationResponse[];\n  polls: PollResponse[];\n  total: number;\n};\n\nconst getGroupedAttachments = (quotedMessage: LocalMessage | null) => {\n  const groupedAttachments = {\n    documents: [],\n    giphies: [],\n    images: [],\n    links: [],\n    locations: [],\n    polls: [],\n    total: 0,\n    videos: [],\n    voiceRecordings: [],\n  };\n\n  if (!quotedMessage || !quotedMessage.attachments) return groupedAttachments;\n\n  const result = quotedMessage.attachments.reduce<GroupedAttachments>(\n    (count, attachment) => {\n      switch (getAttachmentType(attachment)) {\n        case 'giphy':\n          count.giphies.push(attachment);\n          count.total += 1;\n          break;\n        case 'link':\n          count.links.push(attachment);\n          count.total += 1;\n          break;\n        case 'video':\n          count.videos.push(attachment);\n          count.total += 1;\n          break;\n        case 'voiceRecording':\n          count.voiceRecordings.push(attachment);\n          count.total += 1;\n          break;\n        case 'audio':\n        case 'file':\n          count.documents.push(attachment);\n          count.total += 1;\n          break;\n        default:\n          if (isImageAttachment(attachment)) {\n            count.images.push(attachment);\n            count.total += 1;\n          }\n      }\n\n      return count;\n    },\n    groupedAttachments,\n  );\n  if (quotedMessage.shared_location) {\n    result.locations.push(quotedMessage.shared_location);\n    result.total += 1;\n  } else if (quotedMessage.poll) {\n    result.polls.push(quotedMessage.poll);\n    result.total += 1;\n  }\n\n  return result;\n};\n\ntype PreviewType =\n  | 'voice'\n  | 'file'\n  | 'image'\n  | 'giphy'\n  | 'link'\n  | 'location'\n  | 'poll'\n  | 'video'\n  | 'mixed';\n\ntype IconSet = Record<\n  | 'IconCamera'\n  | 'IconFile'\n  | 'IconLink'\n  | 'IconLocation'\n  | 'IconPlayFill'\n  | 'IconPoll'\n  | 'IconVideo'\n  | 'IconVoice',\n  ComponentType\n>;\n\nconst getAttachmentIconWithType = (\n  quotedMessage: LocalMessage | null,\n  giphyVersionName: GiphyVersions,\n  {\n    IconCamera,\n    IconFile,\n    IconLink,\n    IconLocation,\n    IconPlayFill,\n    IconPoll,\n    IconVideo,\n    IconVoice,\n  }: IconSet,\n): {\n  groupedAttachments: GroupedAttachments;\n  Icon: ComponentType;\n  PreviewImage: ReactElement | null;\n  previewType: PreviewType | null;\n} => {\n  const groupedAttachments = getGroupedAttachments(quotedMessage);\n  const result = {\n    groupedAttachments,\n    Icon: NullAttachmentIcon,\n    PreviewImage: null,\n    previewType: null,\n  };\n  if (!groupedAttachments.total) return result;\n  if (groupedAttachments.polls.length > 0)\n    return { ...result, Icon: IconPoll, previewType: 'poll' };\n  if (groupedAttachments.locations.length > 0)\n    // todo: we do not generate the location preview image\n    return { ...result, Icon: IconLocation, previewType: 'location' };\n  if (\n    groupedAttachments.giphies.length > 0 &&\n    groupedAttachments.giphies.length === groupedAttachments.total\n  ) {\n    const giphyAttachment = groupedAttachments.giphies[0] as Attachment & {\n      giphy?: Record<string, { url?: string } | undefined>;\n    };\n    const giphyVersion =\n      giphyAttachment.giphy?.[giphyVersionName as keyof NonNullable<Attachment['giphy']>];\n    const src =\n      giphyVersion?.url || giphyAttachment.thumb_url || giphyAttachment.image_url || '';\n    return {\n      ...result,\n      Icon: IconFile,\n      PreviewImage: (\n        <BaseImage\n          alt={QUOTED_GIPHY_PREVIEW_LABEL}\n          className='str-chat__attachment-preview__thumbnail'\n          src={src}\n          title={QUOTED_GIPHY_PREVIEW_LABEL}\n        />\n      ),\n      previewType: 'giphy',\n    };\n  }\n  if (\n    groupedAttachments.documents.length === groupedAttachments.total &&\n    groupedAttachments.documents.length === 1\n  ) {\n    const fileAttachment = groupedAttachments.documents[0] as Attachment;\n    return {\n      ...result,\n      Icon: IconFile,\n      PreviewImage: (\n        <FileIcon fileName={fileAttachment.title} mimeType={fileAttachment.mime_type} />\n      ),\n      previewType: 'file',\n    };\n  }\n  if (groupedAttachments.links.length === groupedAttachments.total) {\n    const linkAttachment = groupedAttachments.links[0];\n    return {\n      ...result,\n      Icon: IconLink,\n      PreviewImage: (\n        <BaseImage\n          alt={linkAttachment.title}\n          className='str-chat__attachment-preview__thumbnail'\n          src={linkAttachment.thumb_url || linkAttachment.image_url}\n          title={linkAttachment.title}\n        />\n      ),\n      previewType: 'link',\n    };\n  }\n  if (groupedAttachments.videos.length === groupedAttachments.total) {\n    const videoAttachment = groupedAttachments.videos[0];\n    return {\n      ...result,\n      Icon: IconVideo,\n      PreviewImage: (\n        <>\n          <BaseImage\n            alt={videoAttachment.asset_url}\n            className='str-chat__attachment-preview__thumbnail'\n            src={videoAttachment.thumb_url}\n            title={videoAttachment.title}\n          />\n          <div className='str-chat__attachment-preview__thumbnail__play-indicator'>\n            <IconPlayFill />\n          </div>\n        </>\n      ),\n      previewType: 'video',\n    };\n  }\n  if (groupedAttachments.images.length === groupedAttachments.total) {\n    const imageAttachment = groupedAttachments.images[0];\n    return {\n      ...result,\n      Icon: IconCamera,\n      PreviewImage: (\n        <BaseImage\n          alt={imageAttachment.fallback}\n          className='str-chat__attachment-preview__thumbnail'\n          src={imageAttachment.image_url}\n          title={imageAttachment.title}\n        />\n      ),\n      previewType: 'image',\n    };\n  }\n  if (groupedAttachments.voiceRecordings.length === groupedAttachments.total)\n    return { ...result, Icon: IconVoice, previewType: 'voice' };\n\n  return { ...result, Icon: IconFile, previewType: 'mixed' };\n};\n\nexport const QuotedMessagePreview = ({\n  getQuotedMessageAuthor,\n  renderText,\n}: QuotedMessagePreviewProps) => {\n  const messageComposer = useMessageComposerController();\n  const { quotedMessage } = useStateStore(\n    messageComposer.state,\n    messageComposerStateStoreSelector,\n  );\n\n  return quotedMessage ? (\n    <div className='str-chat__message-composer__quoted-message-preview-slot'>\n      <QuotedMessagePreviewUI\n        getQuotedMessageAuthor={getQuotedMessageAuthor}\n        onRemove={() => messageComposer.setQuotedMessage(null)}\n        quotedMessage={quotedMessage}\n        renderText={renderText}\n      />\n    </div>\n  ) : null;\n};\n\ntype QuotedMessagePreviewUIProps = QuotedMessagePreviewProps & {\n  quotedMessage: LocalMessageBase;\n  authorLabel?: ReactNode;\n  className?: string;\n  onClick?: MouseEventHandler<HTMLDivElement>;\n  onRemove?: () => void;\n};\n\nexport const QuotedMessagePreviewUI = ({\n  authorLabel,\n  className,\n  getQuotedMessageAuthor,\n  onClick,\n  onRemove,\n  quotedMessage,\n  renderText,\n}: QuotedMessagePreviewUIProps) => {\n  const { client } = useChatContext();\n  const { t, userLanguage } = useTranslationContext();\n  const { giphyVersion: giphyVersionName = 'fixed_height' } =\n    useChannelStateContext('QuotedMessagePreview');\n  const {\n    IconCamera,\n    IconFile,\n    IconLink,\n    IconLocation,\n    IconPlayFill,\n    IconPoll,\n    IconVideo,\n    IconVoice,\n  } = useComponentContextIcons();\n\n  const iconSet = useMemo(\n    () => ({\n      IconCamera,\n      IconFile,\n      IconLink,\n      IconLocation,\n      IconPlayFill,\n      IconPoll,\n      IconVideo,\n      IconVoice,\n    }),\n    [\n      IconCamera,\n      IconFile,\n      IconLink,\n      IconLocation,\n      IconPlayFill,\n      IconPoll,\n      IconVideo,\n      IconVoice,\n    ],\n  );\n\n  const quotedMessageText = useMemo(\n    () =>\n      quotedMessage?.i18n?.[`${userLanguage}_text` as `${TranslationLanguages}_text`] ||\n      quotedMessage?.text,\n    [quotedMessage?.i18n, quotedMessage?.text, userLanguage],\n  );\n  const quotedMessageMentionEntities = useMemo(\n    () =>\n      getRenderTextMentionEntities({\n        mentioned_channel: quotedMessage?.mentioned_channel,\n        mentioned_groups: quotedMessage?.mentioned_groups,\n        mentioned_here: quotedMessage?.mentioned_here,\n        mentioned_roles: quotedMessage?.mentioned_roles,\n        mentioned_users: quotedMessage?.mentioned_users,\n      }),\n    [\n      quotedMessage?.mentioned_channel,\n      quotedMessage?.mentioned_groups,\n      quotedMessage?.mentioned_here,\n      quotedMessage?.mentioned_roles,\n      quotedMessage?.mentioned_users,\n    ],\n  );\n\n  const { AttachmentIcon, PreviewImage, renderedText } = useMemo(() => {\n    if (!quotedMessage) return { AttachmentIcon: NullAttachmentIcon, renderedText: null };\n\n    const {\n      groupedAttachments,\n      Icon: AttachmentIcon,\n      PreviewImage,\n      previewType,\n    } = getAttachmentIconWithType(quotedMessage, giphyVersionName, iconSet);\n\n    let renderedText: ReactNode | undefined;\n\n    if (!quotedMessageText) {\n      if (previewType === 'poll') {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        renderedText = quotedMessage.poll!.name;\n      } else if (previewType === 'location') {\n        renderedText = t('Live location');\n      } else if (previewType === 'voice') {\n        {\n          const voiceRecording = groupedAttachments.voiceRecordings[0];\n          renderedText = t('Voice message {{ duration }}', {\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            duration: displayDuration(voiceRecording!.duration),\n          });\n        }\n      } else if (previewType === 'giphy') {\n        renderedText = QUOTED_GIPHY_PREVIEW_LABEL;\n      } else if (previewType === 'link') {\n        renderedText = groupedAttachments.links[0].title;\n      } else if (previewType === 'mixed') {\n        renderedText = t('{{ count }} files', { count: groupedAttachments.total });\n      } else if (previewType === 'video') {\n        renderedText =\n          groupedAttachments.videos.length === 1\n            ? t('Video')\n            : t('{{ count }} videos', {\n                count: groupedAttachments.videos.length,\n              });\n      } else if (previewType === 'file') {\n        renderedText = groupedAttachments.documents[0].title;\n      } else if (previewType === 'image') {\n        renderedText =\n          groupedAttachments.images.length === 1\n            ? t('Photo')\n            : t('{{ count }} photos', {\n                count: groupedAttachments.images.length,\n              });\n      }\n    } else if (renderText) {\n      renderedText = renderText(quotedMessageText, quotedMessage?.mentioned_users, {\n        messageMentionEntities: quotedMessageMentionEntities,\n      });\n    } else {\n      renderedText = quotedMessageText;\n    }\n\n    return {\n      AttachmentIcon,\n      PreviewImage,\n      renderedText,\n    };\n  }, [\n    giphyVersionName,\n    iconSet,\n    quotedMessage,\n    quotedMessageMentionEntities,\n    quotedMessageText,\n    renderText,\n    t,\n  ]);\n\n  const isOwnMessage = client.user?.id === quotedMessage?.user?.id;\n  const isInteractive = !!onClick;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!onClick || (event.key !== 'Enter' && event.key !== ' ')) return;\n\n    event.preventDefault();\n    onClick(event as unknown as Parameters<NonNullable<typeof onClick>>[0]);\n  };\n\n  if (!renderedText && !AttachmentIcon && !PreviewImage) return null;\n\n  const authorName = getQuotedMessageAuthor?.(quotedMessage) ?? quotedMessage.user?.name;\n  return (\n    <div\n      aria-label={isInteractive ? t('aria/Jump to quoted message') : undefined}\n      className={clsx('str-chat__quoted-message-preview', className, {\n        'str-chat__quoted-message-preview--own': isOwnMessage,\n      })}\n      data-testid='quoted-message-preview'\n      onClick={onClick}\n      onKeyDown={isInteractive ? handleKeyDown : undefined}\n      role={isInteractive ? 'button' : undefined}\n      tabIndex={isInteractive ? 0 : undefined}\n    >\n      <QuotedMessageIndicator isOwnMessage={isOwnMessage} />\n      <div className='str-chat__quoted-message-preview__content'>\n        <div className='str-chat__quoted-message-preview__author'>\n          {authorLabel ??\n            (isOwnMessage\n              ? t('You')\n              : authorName\n                ? t('Reply to {{ authorName }}', { authorName })\n                : t('Reply'))}\n        </div>\n\n        <div\n          className='str-chat__quoted-message-preview__message'\n          data-testid='quoted-message-text'\n        >\n          <AttachmentIcon />\n          <div className='str-chat__quoted-message-preview__message-text'>\n            {renderedText}\n          </div>\n        </div>\n      </div>\n      {PreviewImage && (\n        <div className='str-chat__quoted-message-preview__image'>{PreviewImage}</div>\n      )}\n\n      {onRemove && (\n        <RemoveAttachmentPreviewButton\n          aria-label={t('aria/Cancel Reply')}\n          data-testid='quoted-message-preview-dismiss-btn'\n          onClick={onRemove}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"QuotedMessagePreview.mjs","names":[],"sources":["../../../../src/components/MessageComposer/QuotedMessagePreview.tsx"],"sourcesContent":["import React, {\n  type ComponentType,\n  type KeyboardEvent,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\n\nimport { displayDuration, SUPPORTED_VIDEO_FORMATS } from '../Attachment';\n\nimport { useChatContext } from '../../context/ChatContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nimport { useStateStore } from '../../store';\nimport { useMessageComposerController } from './hooks';\nimport {\n  type Attachment,\n  type GiphyVersions,\n  isAudioAttachment,\n  isFileAttachment,\n  isGiphyAttachment,\n  isImageAttachment,\n  isScrapedContent,\n  isVideoAttachment,\n  isVoiceRecordingAttachment,\n  type LocalMessage,\n  type MessageComposerState,\n  type MessageResponse,\n  type PollResponseData,\n  type SharedLocationResponseData,\n  type TranslationLanguage,\n  type VoiceRecordingAttachment,\n} from 'stream-chat';\nimport { useAttachmentContext } from '../../context/AttachmentContext';\nimport type { MessageContextValue } from '../../context';\nimport { RemoveAttachmentPreviewButton } from './RemoveAttachmentPreviewButton';\nimport clsx from 'clsx';\nimport { BaseImage } from '../BaseImage';\nimport { FileIcon } from '../FileIcon';\nimport { QuotedMessageIndicator } from './QuotedMessageIndicator';\nimport { getRenderTextMentionEntities } from '../Message/renderText/rehypePlugins';\nimport { isDeletedMessage } from '../MessageList';\nimport { useComponentContextIcons } from '../../context';\nimport type { IconSlots } from '../Icons/slots';\n\nconst messageComposerStateStoreSelector = (state: MessageComposerState) => ({\n  quotedMessage: state.quotedMessage,\n});\n\nexport type QuotedMessagePreviewProps = {\n  getQuotedMessageAuthor?: (message: LocalMessage | MessageResponse) => string;\n  renderText?: MessageContextValue['renderText'];\n};\n\nconst NullAttachmentIcon = () => null;\n\nconst QUOTED_GIPHY_PREVIEW_LABEL = 'Giphy';\n\ntype AttachmentType = 'documents' | 'images' | 'links' | 'videos' | 'voiceRecordings';\n\n/** Giphy GIFs: only native type (e.g. /giphy command) is recognized as Giphy. */\nconst isQuotedGiphyAttachment = (attachment: Attachment) => isGiphyAttachment(attachment);\n\nconst getAttachmentType = (attachment: Attachment) => {\n  if (isQuotedGiphyAttachment(attachment)) {\n    return 'giphy';\n  }\n  if (isScrapedContent(attachment)) {\n    return 'link';\n  } else if (isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) {\n    return 'video';\n  } else if (isImageAttachment(attachment)) {\n    return 'image';\n  } else if (isAudioAttachment(attachment)) {\n    return 'audio';\n  } else if (isVoiceRecordingAttachment(attachment)) {\n    return 'voiceRecording';\n  } else if (isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) {\n    return 'file';\n  }\n\n  return 'unsupported';\n};\n\ntype GroupedAttachments = Record<AttachmentType, Attachment[]> & {\n  giphies: Attachment[];\n  locations: SharedLocationResponseData[];\n  polls: PollResponseData[];\n  total: number;\n};\n\nconst getGroupedAttachments = (quotedMessage: LocalMessage | MessageResponse | null) => {\n  const groupedAttachments = {\n    documents: [],\n    giphies: [],\n    images: [],\n    links: [],\n    locations: [],\n    polls: [],\n    total: 0,\n    videos: [],\n    voiceRecordings: [],\n  };\n\n  if (!quotedMessage || !quotedMessage.attachments) return groupedAttachments;\n\n  const result = quotedMessage.attachments.reduce<GroupedAttachments>(\n    (count, attachment) => {\n      switch (getAttachmentType(attachment)) {\n        case 'giphy':\n          count.giphies.push(attachment);\n          count.total += 1;\n          break;\n        case 'link':\n          count.links.push(attachment);\n          count.total += 1;\n          break;\n        case 'video':\n          count.videos.push(attachment);\n          count.total += 1;\n          break;\n        case 'voiceRecording':\n          count.voiceRecordings.push(attachment);\n          count.total += 1;\n          break;\n        case 'audio':\n        case 'file':\n          count.documents.push(attachment);\n          count.total += 1;\n          break;\n        default:\n          if (isImageAttachment(attachment)) {\n            count.images.push(attachment);\n            count.total += 1;\n          }\n      }\n\n      return count;\n    },\n    groupedAttachments,\n  );\n  if (quotedMessage.shared_location) {\n    result.locations.push(quotedMessage.shared_location);\n    result.total += 1;\n  } else if (quotedMessage.poll) {\n    result.polls.push(quotedMessage.poll);\n    result.total += 1;\n  }\n\n  return result;\n};\n\ntype PreviewType =\n  | 'voice'\n  | 'file'\n  | 'image'\n  | 'giphy'\n  | 'link'\n  | 'location'\n  | 'poll'\n  | 'video'\n  | 'mixed';\n\nconst getAttachmentIconWithType = (\n  quotedMessage: LocalMessage | MessageResponse | null,\n  giphyVersionName: GiphyVersions,\n  // Icons arrive as an argument rather than from the hook: this is a plain helper, called from a\n  // `useMemo` inside the component, so it is not a place a hook may run.\n  icons: Required<IconSlots>,\n): {\n  groupedAttachments: GroupedAttachments;\n  Icon: ComponentType;\n  PreviewImage: ReactElement | null;\n  previewType: PreviewType | null;\n} => {\n  const {\n    IconCamera,\n    IconFile,\n    IconLink,\n    IconLocation,\n    IconNoSign,\n    IconPlayFill,\n    IconPoll,\n    IconVideo,\n    IconVoice,\n  } = icons;\n  const groupedAttachments = getGroupedAttachments(quotedMessage);\n  const result = {\n    groupedAttachments,\n    Icon: NullAttachmentIcon,\n    PreviewImage: null,\n    previewType: null,\n  };\n  if (isDeletedMessage(quotedMessage)) {\n    return { ...result, Icon: IconNoSign };\n  }\n  if (!groupedAttachments.total || isDeletedMessage(quotedMessage)) return result;\n  if (groupedAttachments.polls.length > 0)\n    return { ...result, Icon: IconPoll, previewType: 'poll' };\n  if (groupedAttachments.locations.length > 0)\n    // todo: we do not generate the location preview image\n    return { ...result, Icon: IconLocation, previewType: 'location' };\n  if (\n    groupedAttachments.giphies.length > 0 &&\n    groupedAttachments.giphies.length === groupedAttachments.total\n  ) {\n    const giphyAttachment = groupedAttachments.giphies[0] as Attachment & {\n      giphy?: Record<string, { url?: string } | undefined>;\n    };\n    const giphyVersion =\n      giphyAttachment.giphy?.[giphyVersionName as keyof NonNullable<Attachment['giphy']>];\n    const src =\n      giphyVersion?.url || giphyAttachment.thumb_url || giphyAttachment.image_url || '';\n    return {\n      ...result,\n      Icon: IconFile,\n      PreviewImage: (\n        <BaseImage\n          alt={QUOTED_GIPHY_PREVIEW_LABEL}\n          className='str-chat__attachment-preview__thumbnail'\n          src={src}\n          title={QUOTED_GIPHY_PREVIEW_LABEL}\n        />\n      ),\n      previewType: 'giphy',\n    };\n  }\n  if (\n    groupedAttachments.documents.length === groupedAttachments.total &&\n    groupedAttachments.documents.length === 1\n  ) {\n    const fileAttachment = groupedAttachments.documents[0] as Attachment;\n    return {\n      ...result,\n      Icon: IconFile,\n      PreviewImage: (\n        <FileIcon\n          fileName={fileAttachment.title}\n          mimeType={fileAttachment.custom?.mime_type}\n        />\n      ),\n      previewType: 'file',\n    };\n  }\n  if (groupedAttachments.links.length === groupedAttachments.total) {\n    const linkAttachment = groupedAttachments.links[0];\n    return {\n      ...result,\n      Icon: IconLink,\n      PreviewImage: (\n        <BaseImage\n          alt={linkAttachment.title}\n          className='str-chat__attachment-preview__thumbnail'\n          src={linkAttachment.thumb_url || linkAttachment.image_url}\n          title={linkAttachment.title}\n        />\n      ),\n      previewType: 'link',\n    };\n  }\n  if (groupedAttachments.videos.length === groupedAttachments.total) {\n    const videoAttachment = groupedAttachments.videos[0];\n    return {\n      ...result,\n      Icon: IconVideo,\n      PreviewImage: (\n        <>\n          <BaseImage\n            alt={videoAttachment.asset_url}\n            className='str-chat__attachment-preview__thumbnail'\n            src={videoAttachment.thumb_url}\n            title={videoAttachment.title}\n          />\n          <div className='str-chat__attachment-preview__thumbnail__play-indicator'>\n            <IconPlayFill />\n          </div>\n        </>\n      ),\n      previewType: 'video',\n    };\n  }\n  if (groupedAttachments.images.length === groupedAttachments.total) {\n    const imageAttachment = groupedAttachments.images[0];\n    return {\n      ...result,\n      Icon: IconCamera,\n      PreviewImage: (\n        <BaseImage\n          alt={imageAttachment.fallback}\n          className='str-chat__attachment-preview__thumbnail'\n          src={imageAttachment.image_url}\n          title={imageAttachment.title}\n        />\n      ),\n      previewType: 'image',\n    };\n  }\n  if (groupedAttachments.voiceRecordings.length === groupedAttachments.total)\n    return { ...result, Icon: IconVoice, previewType: 'voice' };\n\n  return { ...result, Icon: IconFile, previewType: 'mixed' };\n};\n\nexport const QuotedMessagePreview = ({\n  getQuotedMessageAuthor,\n  renderText,\n}: QuotedMessagePreviewProps) => {\n  const messageComposer = useMessageComposerController();\n  const { quotedMessage } = useStateStore(\n    messageComposer.state,\n    messageComposerStateStoreSelector,\n  );\n\n  return quotedMessage ? (\n    <div className='str-chat__message-composer__quoted-message-preview-slot'>\n      <QuotedMessagePreviewUI\n        getQuotedMessageAuthor={getQuotedMessageAuthor}\n        onRemove={() => messageComposer.setQuotedMessage(null)}\n        quotedMessage={quotedMessage}\n        renderText={renderText}\n      />\n    </div>\n  ) : null;\n};\n\ntype QuotedMessagePreviewUIProps = QuotedMessagePreviewProps & {\n  quotedMessage: LocalMessage | MessageResponse;\n  authorLabel?: ReactNode;\n  className?: string;\n  onClick?: MouseEventHandler<HTMLDivElement>;\n  onRemove?: () => void;\n};\n\nexport const QuotedMessagePreviewUI = ({\n  authorLabel,\n  className,\n  getQuotedMessageAuthor,\n  onClick,\n  onRemove,\n  quotedMessage,\n  renderText,\n}: QuotedMessagePreviewUIProps) => {\n  const { client } = useChatContext();\n  const { t, userLanguage } = useTranslationContext();\n  // MERGE-RECONCILE: `giphyVersion` was read from the deleted ChannelStateContext;\n  // migrated to the PR's source (useAttachmentContext().giphyVersion — same as Giphy.tsx).\n  const { giphyVersion: giphyVersionName = 'fixed_height' } = useAttachmentContext();\n  const icons = useComponentContextIcons();\n\n  const quotedMessageText = useMemo(\n    () =>\n      quotedMessage?.i18n?.[`${userLanguage}_text` as `${TranslationLanguage}_text`] ||\n      quotedMessage?.text,\n    [quotedMessage?.i18n, quotedMessage?.text, userLanguage],\n  );\n  const quotedMessageMentionEntities = useMemo(\n    () =>\n      getRenderTextMentionEntities({\n        mentioned_channel: quotedMessage?.mentioned_channel,\n        mentioned_groups: quotedMessage?.mentioned_groups,\n        mentioned_here: quotedMessage?.mentioned_here,\n        mentioned_roles: quotedMessage?.mentioned_roles,\n        mentioned_users: quotedMessage?.mentioned_users,\n      }),\n    [\n      quotedMessage?.mentioned_channel,\n      quotedMessage?.mentioned_groups,\n      quotedMessage?.mentioned_here,\n      quotedMessage?.mentioned_roles,\n      quotedMessage?.mentioned_users,\n    ],\n  );\n\n  const { AttachmentIcon, PreviewImage, renderedText } = useMemo(() => {\n    if (!quotedMessage) return { AttachmentIcon: NullAttachmentIcon, renderedText: null };\n\n    const {\n      groupedAttachments,\n      Icon: AttachmentIcon,\n      PreviewImage,\n      previewType,\n    } = getAttachmentIconWithType(quotedMessage, giphyVersionName, icons);\n\n    let renderedText: ReactNode | undefined;\n\n    if (isDeletedMessage(quotedMessage)) {\n      renderedText = t('common.messageDeleted.text', 'Message deleted');\n    } else if (!quotedMessageText) {\n      if (previewType === 'poll') {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        renderedText = quotedMessage.poll!.name;\n      } else if (previewType === 'location') {\n        renderedText = t('common.liveLocation.text', 'Live location');\n      } else if (previewType === 'voice') {\n        {\n          const voiceRecording = groupedAttachments\n            .voiceRecordings[0] as VoiceRecordingAttachment;\n          renderedText = t(\n            'messageComposer.quotedMessagePreview.voiceMessage.label',\n            'Voice message {{ duration }}',\n            {\n              duration: displayDuration(voiceRecording?.custom?.duration),\n            },\n          );\n        }\n      } else if (previewType === 'giphy') {\n        renderedText = QUOTED_GIPHY_PREVIEW_LABEL;\n      } else if (previewType === 'link') {\n        renderedText = groupedAttachments.links[0].title;\n      } else if (previewType === 'mixed') {\n        renderedText = t('messageComposer.quotedMessagePreview.files.label', {\n          count: groupedAttachments.total,\n          defaultValue_one: '{{ count }} file',\n          defaultValue_other: '{{ count }} files',\n        });\n      } else if (previewType === 'video') {\n        renderedText =\n          groupedAttachments.videos.length === 1\n            ? t('messageComposer.quotedMessagePreview.video.label', 'Video')\n            : t('messageComposer.quotedMessagePreview.videos.label', {\n                count: groupedAttachments.videos.length,\n                defaultValue_one: '{{ count }} video',\n                defaultValue_other: '{{ count }} videos',\n              });\n      } else if (previewType === 'file') {\n        renderedText = groupedAttachments.documents[0].title;\n      } else if (previewType === 'image') {\n        renderedText =\n          groupedAttachments.images.length === 1\n            ? t('messageComposer.quotedMessagePreview.photo.label', 'Photo')\n            : t('messageComposer.quotedMessagePreview.photos.label', {\n                count: groupedAttachments.images.length,\n                defaultValue_one: '{{ count }} photo',\n                defaultValue_other: '{{ count }} photos',\n              });\n      }\n    } else if (renderText) {\n      renderedText = renderText(quotedMessageText, quotedMessage?.mentioned_users, {\n        messageMentionEntities: quotedMessageMentionEntities,\n      });\n    } else {\n      renderedText = quotedMessageText;\n    }\n\n    return {\n      AttachmentIcon,\n      PreviewImage,\n      renderedText,\n    };\n  }, [\n    giphyVersionName,\n    icons,\n    quotedMessage,\n    quotedMessageMentionEntities,\n    quotedMessageText,\n    renderText,\n    t,\n  ]);\n\n  const isOwnMessage = client.user?.id === quotedMessage?.user?.id;\n  const isInteractive = !!onClick;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!onClick || (event.key !== 'Enter' && event.key !== ' ')) return;\n\n    event.preventDefault();\n    onClick(event as unknown as Parameters<NonNullable<typeof onClick>>[0]);\n  };\n\n  if (!renderedText && !AttachmentIcon && !PreviewImage) return null;\n\n  const authorName = getQuotedMessageAuthor?.(quotedMessage) ?? quotedMessage.user?.name;\n  return (\n    <div\n      aria-label={\n        isInteractive\n          ? t(\n              'messageComposer.quotedMessagePreview.jumpQuotedMessage.ariaLabel',\n              'Jump to quoted message',\n            )\n          : undefined\n      }\n      className={clsx('str-chat__quoted-message-preview', className, {\n        'str-chat__quoted-message-preview--own': isOwnMessage,\n      })}\n      data-testid='quoted-message-preview'\n      onClick={onClick}\n      onKeyDown={isInteractive ? handleKeyDown : undefined}\n      role={isInteractive ? 'button' : undefined}\n      tabIndex={isInteractive ? 0 : undefined}\n    >\n      <QuotedMessageIndicator isOwnMessage={isOwnMessage} />\n      <div className='str-chat__quoted-message-preview__content'>\n        <div className='str-chat__quoted-message-preview__author'>\n          {authorLabel ??\n            (isOwnMessage\n              ? t('common.you.label', 'You')\n              : authorName\n                ? t(\n                    'messageComposer.quotedMessagePreview.reply.withAuthorName.text',\n                    'Reply to {{ authorName }}',\n                    { authorName },\n                  )\n                : t('messageComposer.quotedMessagePreview.reply.text', 'Reply'))}\n        </div>\n\n        <div\n          className='str-chat__quoted-message-preview__message'\n          data-testid='quoted-message-text'\n        >\n          <AttachmentIcon />\n          <div className='str-chat__quoted-message-preview__message-text'>\n            {renderedText}\n          </div>\n        </div>\n      </div>\n      {PreviewImage && (\n        <div className='str-chat__quoted-message-preview__image'>{PreviewImage}</div>\n      )}\n\n      {onRemove && (\n        <RemoveAttachmentPreviewButton\n          aria-label={t(\n            'messageComposer.quotedMessagePreview.cancelReply.ariaLabel',\n            'Cancel Reply',\n          )}\n          data-testid='quoted-message-preview-dismiss-btn'\n          onClick={onRemove}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -11,7 +11,7 @@ var RemoveAttachmentPreviewButton = ({ className, uploadState, ...props }) => {
 	const { IconXmarkSmall } = useComponentContextIcons();
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsx(Button, {
-		"aria-label": !!uploadState && IN_FLIGHT_UPLOAD_STATES.includes(uploadState) ? t("aria/Cancel upload") : t("aria/Remove attachment"),
+		"aria-label": !!uploadState && IN_FLIGHT_UPLOAD_STATES.includes(uploadState) ? t("messageComposer.removeAttachmentPreviewButton.cancelUpload.ariaLabel", "Cancel upload") : t("messageComposer.removeAttachmentPreview.removeAttachment.ariaLabel", "Remove attachment"),
 		circular: true,
 		className: clsx("str-chat__attachment-preview__remove-button", className),
 		"data-testid": "preview-item-delete-button",

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

@@ -1 +1 @@
-{"version":3,"file":"RemoveAttachmentPreviewButton.mjs","names":[],"sources":["../../../../src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Button } from '../Button';\nimport React, { type ComponentProps } from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport type { AttachmentLoadingState } from 'stream-chat';\n\n/** Upload states in which the request is still running, so removing also cancels it. */\nconst IN_FLIGHT_UPLOAD_STATES: AttachmentLoadingState[] = ['pending', 'uploading'];\n\nexport const RemoveAttachmentPreviewButton = ({\n  className,\n  uploadState,\n  ...props\n}: ComponentProps<'button'> & {\n  uploadState?: AttachmentLoadingState;\n}) => {\n  const { IconXmarkSmall } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  // Deliberately still actionable mid-upload: `removeAttachments` forwards to\n  // `UploadManager.deleteUploadRecord`, which aborts the request through its `AbortController`,\n  // and the `uploadState: 'failed'` update that lands afterwards is a no-op because\n  // `updateAttachment` ignores an id that is no longer in state.\n  //\n  // The button was disabled in this state from 2024 (#2339) until abortable uploads existed;\n  // no comment ever recorded the original reason.\n  const isInFlight = !!uploadState && IN_FLIGHT_UPLOAD_STATES.includes(uploadState);\n\n  return (\n    <Button\n      aria-label={isInFlight ? t('aria/Cancel upload') : t('aria/Remove attachment')}\n      circular\n      className={clsx('str-chat__attachment-preview__remove-button', className)}\n      data-testid='preview-item-delete-button'\n      {...props}\n    >\n      <IconXmarkSmall />\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,IAAM,0BAAoD,CAAC,WAAW,WAAW;AAEjF,IAAa,iCAAiC,EAC5C,WACA,aACA,GAAG,YAGC;CACJ,MAAM,EAAE,mBAAmB,yBAAyB;CAEpD,MAAM,EAAE,MAAM,sBAAsB;CAUpC,OACE,oBAAC,QAAD;EACE,cAJe,CAAC,CAAC,eAAe,wBAAwB,SAAS,WAAW,IAInD,EAAE,oBAAoB,IAAI,EAAE,wBAAwB;EAC7E,UAAA;EACA,WAAW,KAAK,+CAA+C,SAAS;EACxE,eAAY;EACZ,GAAI;YAEJ,oBAAC,gBAAD,CAAiB,CAAA;CACX,CAAA;AAEZ"}
+{"version":3,"file":"RemoveAttachmentPreviewButton.mjs","names":[],"sources":["../../../../src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Button } from '../Button';\nimport React, { type ComponentProps } from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport type { AttachmentLoadingState } from 'stream-chat';\n\n/** Upload states in which the request is still running, so removing also cancels it. */\nconst IN_FLIGHT_UPLOAD_STATES: AttachmentLoadingState[] = ['pending', 'uploading'];\n\nexport const RemoveAttachmentPreviewButton = ({\n  className,\n  uploadState,\n  ...props\n}: ComponentProps<'button'> & {\n  uploadState?: AttachmentLoadingState;\n}) => {\n  const { IconXmarkSmall } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  // Deliberately still actionable mid-upload: `removeAttachments` forwards to\n  // `UploadManager.deleteUploadRecord`, which aborts the request through its `AbortController`,\n  // and the `uploadState: 'failed'` update that lands afterwards is a no-op because\n  // `updateAttachment` ignores an id that is no longer in state.\n  //\n  // The button was disabled in this state from 2024 (#2339) until abortable uploads existed;\n  // no comment ever recorded the original reason.\n  const isInFlight = !!uploadState && IN_FLIGHT_UPLOAD_STATES.includes(uploadState);\n\n  return (\n    <Button\n      aria-label={\n        isInFlight\n          ? t(\n              'messageComposer.removeAttachmentPreviewButton.cancelUpload.ariaLabel',\n              'Cancel upload',\n            )\n          : t(\n              'messageComposer.removeAttachmentPreview.removeAttachment.ariaLabel',\n              'Remove attachment',\n            )\n      }\n      circular\n      className={clsx('str-chat__attachment-preview__remove-button', className)}\n      data-testid='preview-item-delete-button'\n      {...props}\n    >\n      <IconXmarkSmall />\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,IAAM,0BAAoD,CAAC,WAAW,WAAW;AAEjF,IAAa,iCAAiC,EAC5C,WACA,aACA,GAAG,YAGC;CACJ,MAAM,EAAE,mBAAmB,yBAAyB;CACpD,MAAM,EAAE,MAAM,sBAAsB;CAWpC,OACE,oBAAC,QAAD;EACE,cAJe,CAAC,CAAC,eAAe,wBAAwB,SAAS,WAAW,IAMtE,EACE,wEACA,eACF,IACA,EACE,sEACA,mBACF;EAEN,UAAA;EACA,WAAW,KAAK,+CAA+C,SAAS;EACxE,eAAY;EACZ,GAAI;YAEJ,oBAAC,gBAAD,CAAiB,CAAA;CACX,CAAA;AAEZ"}

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

@@ -1,7 +1,7 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { Button } from "../Button/Button.mjs";
 import { useMessageComposerHasSendableData } from "./hooks/useMessageComposerHasSendableData.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/MessageComposer/SendButton.tsx
@@ -11,7 +11,7 @@ var SendButton = ({ children, sendMessage, ...rest }) => {
 	const hasSendableData = useMessageComposerHasSendableData();
 	return /* @__PURE__ */ jsx(Button, {
 		appearance: "solid",
-		"aria-label": t("aria/Send"),
+		"aria-label": t("messageComposer.sendButton.send.ariaLabel", "Send"),
 		circular: true,
 		className: "str-chat__send-button",
 		"data-testid": "send-button",

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

@@ -1 +1 @@
-{"version":3,"file":"SendButton.mjs","names":[],"sources":["../../../../src/components/MessageComposer/SendButton.tsx"],"sourcesContent":["import React from 'react';\nimport { useMessageComposerHasSendableData } from './hooks';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport { Button } from '../Button';\n\nexport type SendButtonProps = {\n  sendMessage: (event: React.BaseSyntheticEvent) => void;\n} & React.ComponentProps<'button'>;\n\nexport const SendButton = ({ children, sendMessage, ...rest }: SendButtonProps) => {\n  const { IconSend } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  const hasSendableData = useMessageComposerHasSendableData();\n  return (\n    <Button\n      appearance='solid'\n      aria-label={t('aria/Send')}\n      circular\n      className='str-chat__send-button'\n      data-testid='send-button'\n      disabled={!hasSendableData}\n      onClick={sendMessage}\n      size='sm'\n      variant='primary'\n      {...rest}\n    >\n      {children ?? <IconSend />}\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;AASA,IAAa,cAAc,EAAE,UAAU,aAAa,GAAG,WAA4B;CACjF,MAAM,EAAE,aAAa,yBAAyB;CAE9C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,kBAAkB,kCAAkC;CAC1D,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EAAE,WAAW;EACzB,UAAA;EACA,WAAU;EACV,eAAY;EACZ,UAAU,CAAC;EACX,SAAS;EACT,MAAK;EACL,SAAQ;EACR,GAAI;YAEH,YAAY,oBAAC,UAAD,CAAW,CAAA;CAClB,CAAA;AAEZ"}
+{"version":3,"file":"SendButton.mjs","names":[],"sources":["../../../../src/components/MessageComposer/SendButton.tsx"],"sourcesContent":["import React from 'react';\nimport { useMessageComposerHasSendableData } from './hooks';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport { Button } from '../Button';\n\nexport type SendButtonProps = {\n  sendMessage: (event: React.BaseSyntheticEvent) => void;\n} & React.ComponentProps<'button'>;\n\nexport const SendButton = ({ children, sendMessage, ...rest }: SendButtonProps) => {\n  const { IconSend } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const hasSendableData = useMessageComposerHasSendableData();\n  return (\n    <Button\n      appearance='solid'\n      aria-label={t('messageComposer.sendButton.send.ariaLabel', 'Send')}\n      circular\n      className='str-chat__send-button'\n      data-testid='send-button'\n      disabled={!hasSendableData}\n      onClick={sendMessage}\n      size='sm'\n      variant='primary'\n      {...rest}\n    >\n      {children ?? <IconSend />}\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;AASA,IAAa,cAAc,EAAE,UAAU,aAAa,GAAG,WAA4B;CACjF,MAAM,EAAE,aAAa,yBAAyB;CAC9C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,kBAAkB,kCAAkC;CAC1D,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EAAE,6CAA6C,MAAM;EACjE,UAAA;EACA,WAAU;EACV,eAAY;EACZ,UAAU,CAAC;EACX,SAAS;EACT,MAAK;EACL,SAAQ;EACR,GAAI;YAEH,YAAY,oBAAC,UAAD,CAAW,CAAA;CAClB,CAAA;AAEZ"}

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

@@ -1,7 +1,7 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -13,7 +13,7 @@ var SendToChannelCheckbox = () => {
 	const messageComposer = useMessageComposerController();
 	const { showReplyInChannel } = useStateStore(messageComposer.state, stateSelector);
 	if (messageComposer.editedMessage || !messageComposer.threadId) return null;
-	const labelText = Object.keys(messageComposer.channel.state.members).length === 2 ? t("Also send as a direct message") : t("Also send in channel");
+	const labelText = Object.keys(messageComposer.channel.state.members).length === 2 ? t("messageComposer.sendChannelCheckbox.alsoSendDirectMessage.label", "Also send as a direct message") : t("messageComposer.sendChannelCheckbox.alsoSendChannel.label", "Also send in channel");
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("str-chat__send-to-channel-checkbox__container", { "str-chat__send-to-channel-checkbox__container--checked": showReplyInChannel }),
 		"data-testid": "send-to-channel-checkbox",