stream-chat-react 13.0.0-rc.2 → 13.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/components/Channel/Channel.d.ts +1 -1
  2. package/dist/components/Channel/Channel.js +2 -0
  3. package/dist/components/Chat/hooks/useChat.js +1 -1
  4. package/dist/components/MessageInput/EditMessageForm.js +1 -1
  5. package/dist/components/MessageInput/MessageInput.d.ts +1 -3
  6. package/dist/components/MessageInput/MessageInputFlat.js +2 -2
  7. package/dist/components/MessageInput/hooks/useCreateMessageInputContext.js +1 -3
  8. package/dist/components/MessageInput/hooks/useMessageInputControls.d.ts +0 -1
  9. package/dist/components/MessageInput/hooks/useMessageInputControls.js +3 -4
  10. package/dist/components/MessageInput/hooks/usePasteHandler.d.ts +1 -1
  11. package/dist/components/MessageInput/hooks/usePasteHandler.js +4 -4
  12. package/dist/components/MessageInput/hooks/{useMessageInputText.d.ts → useTextareaRef.d.ts} +1 -2
  13. package/dist/components/MessageInput/hooks/useTextareaRef.js +14 -0
  14. package/dist/components/TextareaComposer/TextareaComposer.d.ts +3 -5
  15. package/dist/components/TextareaComposer/TextareaComposer.js +13 -8
  16. package/dist/context/ComponentContext.d.ts +3 -3
  17. package/dist/experimental/index.browser.cjs.map +2 -2
  18. package/dist/experimental/index.node.cjs.map +2 -2
  19. package/dist/index.browser.cjs +264 -282
  20. package/dist/index.browser.cjs.map +4 -4
  21. package/dist/index.node.cjs +264 -282
  22. package/dist/index.node.cjs.map +4 -4
  23. package/dist/plugins/Emojis/EmojiPicker.js +9 -4
  24. package/dist/plugins/Emojis/index.browser.cjs +208 -96
  25. package/dist/plugins/Emojis/index.browser.cjs.map +4 -4
  26. package/dist/plugins/Emojis/index.node.cjs +208 -96
  27. package/dist/plugins/Emojis/index.node.cjs.map +4 -4
  28. package/dist/plugins/Emojis/middleware/textComposerEmojiMiddleware.d.ts +4 -48
  29. package/dist/plugins/Emojis/middleware/textComposerEmojiMiddleware.js +52 -58
  30. package/package.json +3 -3
  31. package/dist/components/MessageInput/hooks/useMessageInputText.js +0 -44
@@ -20473,11 +20473,11 @@ __export(src_exports, {
20473
20473
  module.exports = __toCommonJS(src_exports);
20474
20474
 
20475
20475
  // src/components/Attachment/Attachment.tsx
20476
- var import_react253 = __toESM(require("react"));
20476
+ var import_react254 = __toESM(require("react"));
20477
20477
  var import_stream_chat10 = require("stream-chat");
20478
20478
 
20479
20479
  // src/components/Attachment/AttachmentContainer.tsx
20480
- var import_react252 = __toESM(require("react"));
20480
+ var import_react253 = __toESM(require("react"));
20481
20481
  var import_react_player2 = __toESM(require("react-player"));
20482
20482
  var import_clsx65 = __toESM(require("clsx"));
20483
20483
  var linkify = __toESM(require("linkifyjs"));
@@ -21722,7 +21722,7 @@ var UnMemoizedAudio = (props) => {
21722
21722
  var Audio = import_react29.default.memo(UnMemoizedAudio);
21723
21723
 
21724
21724
  // src/components/Attachment/VoiceRecording.tsx
21725
- var import_react248 = __toESM(require("react"));
21725
+ var import_react249 = __toESM(require("react"));
21726
21726
 
21727
21727
  // src/components/ReactFileUtilities/FileIcon/FileIcon.tsx
21728
21728
  var import_react31 = __toESM(require("react"));
@@ -22685,7 +22685,7 @@ var FileIcon = (props) => {
22685
22685
  // src/components/ReactFileUtilities/UploadButton.tsx
22686
22686
  var import_clsx63 = __toESM(require("clsx"));
22687
22687
  var import_nanoid5 = require("nanoid");
22688
- var import_react247 = __toESM(require("react"));
22688
+ var import_react248 = __toESM(require("react"));
22689
22689
 
22690
22690
  // src/components/ReactFileUtilities/utils.ts
22691
22691
  var import_react32 = require("react");
@@ -52473,49 +52473,17 @@ var useCooldownTimer = () => {
52473
52473
  };
52474
52474
  };
52475
52475
 
52476
- // src/components/MessageInput/hooks/useMessageInputText.ts
52476
+ // src/components/MessageInput/hooks/useTextareaRef.ts
52477
52477
  var import_react223 = require("react");
52478
- var messageComposerStateSelector = (state) => ({
52479
- text: state.text
52480
- });
52481
- var useMessageInputText = (props) => {
52478
+ var useTextareaRef = (props) => {
52482
52479
  const { focus } = props;
52483
- const messageComposer = useMessageComposer();
52484
52480
  const textareaRef = (0, import_react223.useRef)(void 0);
52485
- const { text: text7 } = useStateStore(
52486
- messageComposer.textComposer.state,
52487
- messageComposerStateSelector
52488
- );
52489
52481
  (0, import_react223.useEffect)(() => {
52490
52482
  if (focus && textareaRef.current) {
52491
52483
  textareaRef.current.focus();
52492
52484
  }
52493
52485
  }, [focus]);
52494
- const newCursorPosition = (0, import_react223.useRef)(void 0);
52495
- const insertText = (0, import_react223.useCallback)(
52496
- (textToInsert) => {
52497
- const selection = textareaRef?.current && {
52498
- end: textareaRef.current.selectionEnd,
52499
- start: textareaRef.current.selectionStart
52500
- };
52501
- messageComposer.textComposer.insertText({
52502
- selection,
52503
- text: textToInsert
52504
- });
52505
- if (selection) newCursorPosition.current = selection.start + textToInsert.length;
52506
- },
52507
- [messageComposer, newCursorPosition, textareaRef]
52508
- );
52509
- (0, import_react223.useEffect)(() => {
52510
- const textareaElement = textareaRef.current;
52511
- if (textareaElement && newCursorPosition.current !== void 0) {
52512
- textareaElement.selectionStart = newCursorPosition.current;
52513
- textareaElement.selectionEnd = newCursorPosition.current;
52514
- newCursorPosition.current = void 0;
52515
- }
52516
- }, [text7, newCursorPosition]);
52517
52486
  return {
52518
- insertText,
52519
52487
  textareaRef
52520
52488
  };
52521
52489
  };
@@ -52575,8 +52543,8 @@ var useSubmitHandler = (props) => {
52575
52543
 
52576
52544
  // src/components/MessageInput/hooks/usePasteHandler.ts
52577
52545
  var import_react225 = require("react");
52578
- var usePasteHandler = (insertText) => {
52579
- const { attachmentManager } = useMessageComposer();
52546
+ var usePasteHandler = () => {
52547
+ const { attachmentManager, textComposer } = useMessageComposer();
52580
52548
  const onPaste = (0, import_react225.useCallback)(
52581
52549
  (clipboardEvent) => {
52582
52550
  (async (event) => {
@@ -52597,13 +52565,13 @@ var usePasteHandler = (insertText) => {
52597
52565
  const fileLikes = await dataTransferItemsToFiles(Array.from(items));
52598
52566
  if (plainTextPromise) {
52599
52567
  const pastedText = await plainTextPromise;
52600
- insertText(pastedText);
52568
+ textComposer.insertText({ text: pastedText });
52601
52569
  } else {
52602
52570
  attachmentManager.uploadFiles(fileLikes);
52603
52571
  }
52604
52572
  })(clipboardEvent);
52605
52573
  },
52606
- [attachmentManager, insertText]
52574
+ [attachmentManager, textComposer]
52607
52575
  );
52608
52576
  return { onPaste };
52609
52577
  };
@@ -52672,7 +52640,7 @@ var useMediaRecorder = ({
52672
52640
  // src/components/MessageInput/hooks/useMessageInputControls.ts
52673
52641
  var useMessageInputControls = (props) => {
52674
52642
  const { asyncMessagesMultiSendEnabled, audioRecordingConfig, audioRecordingEnabled } = props;
52675
- const { insertText, textareaRef } = useMessageInputText(props);
52643
+ const { textareaRef } = useTextareaRef(props);
52676
52644
  const { handleSubmit } = useSubmitHandler(props);
52677
52645
  const recordingController = useMediaRecorder({
52678
52646
  asyncMessagesMultiSendEnabled,
@@ -52680,10 +52648,9 @@ var useMessageInputControls = (props) => {
52680
52648
  handleSubmit,
52681
52649
  recordingConfig: audioRecordingConfig
52682
52650
  });
52683
- const { onPaste } = usePasteHandler(insertText);
52651
+ const { onPaste } = usePasteHandler();
52684
52652
  return {
52685
52653
  handleSubmit,
52686
- insertText,
52687
52654
  onPaste,
52688
52655
  recordingController,
52689
52656
  textareaRef
@@ -52815,13 +52782,13 @@ var CooldownTimer = ({ cooldownInterval }) => {
52815
52782
  };
52816
52783
 
52817
52784
  // src/components/MessageInput/EditMessageForm.tsx
52818
- var import_react246 = __toESM(require("react"));
52785
+ var import_react247 = __toESM(require("react"));
52819
52786
 
52820
52787
  // src/components/MessageInput/MessageInput.tsx
52821
- var import_react245 = __toESM(require("react"));
52788
+ var import_react246 = __toESM(require("react"));
52822
52789
 
52823
52790
  // src/components/MessageInput/MessageInputFlat.tsx
52824
- var import_react243 = __toESM(require("react"));
52791
+ var import_react244 = __toESM(require("react"));
52825
52792
 
52826
52793
  // src/components/MessageInput/SendButton.tsx
52827
52794
  var import_react230 = __toESM(require("react"));
@@ -52944,7 +52911,7 @@ var linkPreviewsManagerStateSelector = (state) => ({
52944
52911
  (preview) => import_stream_chat9.LinkPreviewsManager.previewIsLoaded(preview) || import_stream_chat9.LinkPreviewsManager.previewIsLoading(preview)
52945
52912
  )
52946
52913
  });
52947
- var messageComposerStateSelector2 = (state) => ({
52914
+ var messageComposerStateSelector = (state) => ({
52948
52915
  quotedMessage: state.quotedMessage
52949
52916
  });
52950
52917
  var LinkPreviewList = () => {
@@ -52952,7 +52919,7 @@ var LinkPreviewList = () => {
52952
52919
  const { linkPreviewsManager } = messageComposer;
52953
52920
  const { quotedMessage } = useStateStore(
52954
52921
  messageComposer.state,
52955
- messageComposerStateSelector2
52922
+ messageComposerStateSelector
52956
52923
  );
52957
52924
  const { linkPreviews } = useStateStore(
52958
52925
  linkPreviewsManager.state,
@@ -53178,8 +53145,10 @@ var SuggestionList = ({
53178
53145
  };
53179
53146
 
53180
53147
  // src/components/TextareaComposer/TextareaComposer.tsx
53148
+ var import_lodash19 = __toESM(require("lodash.debounce"));
53181
53149
  var import_clsx61 = __toESM(require("clsx"));
53182
- var import_react239 = __toESM(require("react"));
53150
+ var import_react239 = require("react");
53151
+ var import_react240 = __toESM(require("react"));
53183
53152
  var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
53184
53153
  var textComposerStateSelector2 = (state) => ({
53185
53154
  selection: state.selection,
@@ -53198,33 +53167,32 @@ var TextareaComposer = ({
53198
53167
  className,
53199
53168
  closeSuggestionsOnClickOutside,
53200
53169
  containerClassName,
53201
- // dropdownClassName, // todo: X find a different way to prevent prop drilling
53202
- grow: growProp,
53203
- // itemClassName, // todo: X find a different way to prevent prop drilling
53204
53170
  listClassName,
53205
53171
  maxRows: maxRowsProp = 1,
53172
+ minRows: minRowsProp,
53206
53173
  onBlur,
53207
53174
  onChange,
53208
53175
  onKeyDown,
53209
53176
  onScroll,
53177
+ onSelect,
53210
53178
  placeholder: placeholderProp,
53211
53179
  shouldSubmit: shouldSubmitProp,
53212
- ...restProps
53180
+ ...restTextareaProps
53213
53181
  }) => {
53214
53182
  const { t } = useTranslationContext();
53215
53183
  const { AutocompleteSuggestionList = SuggestionList } = useComponentContext();
53216
53184
  const {
53217
53185
  additionalTextareaProps,
53218
53186
  cooldownRemaining,
53219
- grow: growContext,
53220
53187
  handleSubmit,
53221
53188
  maxRows: maxRowsContext,
53189
+ minRows: minRowsContext,
53222
53190
  onPaste,
53223
53191
  shouldSubmit: shouldSubmitContext,
53224
53192
  textareaRef
53225
53193
  } = useMessageInputContext();
53226
- const grow = growProp ?? growContext;
53227
53194
  const maxRows = maxRowsProp ?? maxRowsContext;
53195
+ const minRows = minRowsProp ?? minRowsContext;
53228
53196
  const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
53229
53197
  const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
53230
53198
  const messageComposer = useMessageComposer();
@@ -53235,10 +53203,10 @@ var TextareaComposer = ({
53235
53203
  );
53236
53204
  const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
53237
53205
  const { isLoadingItems } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector2) ?? {};
53238
- const containerRef = (0, import_react239.useRef)(null);
53239
- const [focusedItemIndex, setFocusedItemIndex] = (0, import_react239.useState)(0);
53240
- const [isComposing, setIsComposing] = (0, import_react239.useState)(false);
53241
- const changeHandler = (0, import_react239.useCallback)(
53206
+ const containerRef = (0, import_react240.useRef)(null);
53207
+ const [focusedItemIndex, setFocusedItemIndex] = (0, import_react240.useState)(0);
53208
+ const [isComposing, setIsComposing] = (0, import_react240.useState)(false);
53209
+ const changeHandler = (0, import_react240.useCallback)(
53242
53210
  (e) => {
53243
53211
  if (onChange) {
53244
53212
  onChange(e);
@@ -53255,13 +53223,13 @@ var TextareaComposer = ({
53255
53223
  },
53256
53224
  [onChange, textComposer, textareaRef]
53257
53225
  );
53258
- const onCompositionEnd = (0, import_react239.useCallback)(() => {
53226
+ const onCompositionEnd = (0, import_react240.useCallback)(() => {
53259
53227
  setIsComposing(false);
53260
53228
  }, []);
53261
- const onCompositionStart = (0, import_react239.useCallback)(() => {
53229
+ const onCompositionStart = (0, import_react240.useCallback)(() => {
53262
53230
  setIsComposing(true);
53263
53231
  }, []);
53264
- const keyDownHandler = (0, import_react239.useCallback)(
53232
+ const keyDownHandler = (0, import_react240.useCallback)(
53265
53233
  (event) => {
53266
53234
  if (onKeyDown) {
53267
53235
  onKeyDown(event);
@@ -53315,7 +53283,7 @@ var TextareaComposer = ({
53315
53283
  textareaRef
53316
53284
  ]
53317
53285
  );
53318
- const scrollHandler = (0, import_react239.useCallback)(
53286
+ const scrollHandler = (0, import_react240.useCallback)(
53319
53287
  (event) => {
53320
53288
  if (onScroll) {
53321
53289
  onScroll(event);
@@ -53325,18 +53293,32 @@ var TextareaComposer = ({
53325
53293
  },
53326
53294
  [onScroll, textComposer]
53327
53295
  );
53328
- (0, import_react239.useEffect)(() => {
53296
+ const setSelectionDebounced = (0, import_react239.useMemo)(
53297
+ () => (0, import_lodash19.default)(
53298
+ (e) => {
53299
+ onSelect?.(e);
53300
+ textComposer.setSelection({
53301
+ end: e.target.selectionEnd,
53302
+ start: e.target.selectionStart
53303
+ });
53304
+ },
53305
+ 100,
53306
+ { leading: false, trailing: true }
53307
+ ),
53308
+ [onSelect, textComposer]
53309
+ );
53310
+ (0, import_react240.useEffect)(() => {
53329
53311
  if (textareaRef.current && !isComposing) {
53330
53312
  textareaRef.current.selectionStart = selection.start;
53331
53313
  textareaRef.current.selectionEnd = selection.end;
53332
53314
  }
53333
53315
  }, [text7, textareaRef, selection.start, selection.end, isComposing]);
53334
- (0, import_react239.useEffect)(() => {
53316
+ (0, import_react240.useEffect)(() => {
53335
53317
  if (textComposer.suggestions) {
53336
53318
  setFocusedItemIndex(0);
53337
53319
  }
53338
53320
  }, [textComposer.suggestions]);
53339
- return /* @__PURE__ */ import_react239.default.createElement(
53321
+ return /* @__PURE__ */ import_react240.default.createElement(
53340
53322
  "div",
53341
53323
  {
53342
53324
  className: (0, import_clsx61.default)(
@@ -53349,10 +53331,10 @@ var TextareaComposer = ({
53349
53331
  ),
53350
53332
  ref: containerRef
53351
53333
  },
53352
- /* @__PURE__ */ import_react239.default.createElement(
53334
+ /* @__PURE__ */ import_react240.default.createElement(
53353
53335
  import_react_textarea_autosize.default,
53354
53336
  {
53355
- ...restProps,
53337
+ ...{ ...additionalTextareaProps, ...restTextareaProps },
53356
53338
  "aria-label": cooldownRemaining ? t("Slow Mode ON") : placeholder,
53357
53339
  className: (0, import_clsx61.default)(
53358
53340
  "rta__textarea",
@@ -53361,7 +53343,8 @@ var TextareaComposer = ({
53361
53343
  ),
53362
53344
  "data-testid": "message-input",
53363
53345
  disabled: !enabled || !!cooldownRemaining,
53364
- maxRows: grow ? maxRows : 1,
53346
+ maxRows,
53347
+ minRows,
53365
53348
  onBlur,
53366
53349
  onChange: changeHandler,
53367
53350
  onCompositionEnd,
@@ -53369,6 +53352,7 @@ var TextareaComposer = ({
53369
53352
  onKeyDown: keyDownHandler,
53370
53353
  onPaste,
53371
53354
  onScroll: scrollHandler,
53355
+ onSelect: setSelectionDebounced,
53372
53356
  placeholder: placeholder || t("Type your message"),
53373
53357
  ref: (ref) => {
53374
53358
  textareaRef.current = ref;
@@ -53376,7 +53360,7 @@ var TextareaComposer = ({
53376
53360
  value: text7
53377
53361
  }
53378
53362
  ),
53379
- !isComposing && /* @__PURE__ */ import_react239.default.createElement(
53363
+ !isComposing && /* @__PURE__ */ import_react240.default.createElement(
53380
53364
  AutocompleteSuggestionList,
53381
53365
  {
53382
53366
  className: listClassName,
@@ -53389,10 +53373,10 @@ var TextareaComposer = ({
53389
53373
  };
53390
53374
 
53391
53375
  // src/components/AIStateIndicator/AIStateIndicator.tsx
53392
- var import_react241 = __toESM(require("react"));
53376
+ var import_react242 = __toESM(require("react"));
53393
53377
 
53394
53378
  // src/components/AIStateIndicator/hooks/useAIState.ts
53395
- var import_react240 = require("react");
53379
+ var import_react241 = require("react");
53396
53380
  var AIStates = {
53397
53381
  Error: "AI_STATE_ERROR",
53398
53382
  ExternalSources: "AI_STATE_EXTERNAL_SOURCES",
@@ -53401,8 +53385,8 @@ var AIStates = {
53401
53385
  Thinking: "AI_STATE_THINKING"
53402
53386
  };
53403
53387
  var useAIState = (channel) => {
53404
- const [aiState, setAiState] = (0, import_react240.useState)(AIStates.Idle);
53405
- (0, import_react240.useEffect)(() => {
53388
+ const [aiState, setAiState] = (0, import_react241.useState)(AIStates.Idle);
53389
+ (0, import_react241.useEffect)(() => {
53406
53390
  if (!channel) {
53407
53391
  return;
53408
53392
  }
@@ -53439,21 +53423,21 @@ var AIStateIndicator = ({
53439
53423
  [AIStates.Thinking]: t("Thinking..."),
53440
53424
  [AIStates.Generating]: t("Generating...")
53441
53425
  };
53442
- return aiState in allowedStates ? /* @__PURE__ */ import_react241.default.createElement("div", { className: "str-chat__ai-state-indicator-container" }, /* @__PURE__ */ import_react241.default.createElement("p", { className: "str-chat__ai-state-indicator-text" }, allowedStates[aiState])) : null;
53426
+ return aiState in allowedStates ? /* @__PURE__ */ import_react242.default.createElement("div", { className: "str-chat__ai-state-indicator-container" }, /* @__PURE__ */ import_react242.default.createElement("p", { className: "str-chat__ai-state-indicator-text" }, allowedStates[aiState])) : null;
53443
53427
  };
53444
53428
 
53445
53429
  // src/components/MessageInput/WithDragAndDropUpload.tsx
53446
- var import_react242 = __toESM(require("react"));
53430
+ var import_react243 = __toESM(require("react"));
53447
53431
  var import_react_dropzone = require("react-dropzone");
53448
53432
  var import_clsx62 = __toESM(require("clsx"));
53449
- var DragAndDropUploadContext = import_react242.default.createContext({
53433
+ var DragAndDropUploadContext = import_react243.default.createContext({
53450
53434
  subscribeToDrop: null
53451
53435
  });
53452
- var useDragAndDropUploadContext = () => (0, import_react242.useContext)(DragAndDropUploadContext);
53436
+ var useDragAndDropUploadContext = () => (0, import_react243.useContext)(DragAndDropUploadContext);
53453
53437
  var useRegisterDropHandlers = () => {
53454
53438
  const { subscribeToDrop } = useDragAndDropUploadContext();
53455
53439
  const messageComposer = useMessageComposer();
53456
- (0, import_react242.useEffect)(() => {
53440
+ (0, import_react243.useEffect)(() => {
53457
53441
  const unsubscribe = subscribeToDrop?.(messageComposer.attachmentManager.uploadFiles);
53458
53442
  return unsubscribe;
53459
53443
  }, [subscribeToDrop, messageComposer]);
@@ -53468,7 +53452,7 @@ var WithDragAndDropUpload = ({
53468
53452
  component: Component2 = "div",
53469
53453
  style
53470
53454
  }) => {
53471
- const dropHandlersRef = (0, import_react242.useRef)(/* @__PURE__ */ new Set());
53455
+ const dropHandlersRef = (0, import_react243.useRef)(/* @__PURE__ */ new Set());
53472
53456
  const { t } = useTranslationContext();
53473
53457
  const messageInputContext = useMessageInputContext();
53474
53458
  const dragAndDropUploadContext = useDragAndDropUploadContext();
@@ -53479,20 +53463,20 @@ var WithDragAndDropUpload = ({
53479
53463
  attachmentManagerConfigStateSelector
53480
53464
  );
53481
53465
  const isWithinMessageInputContext = Object.keys(messageInputContext).length > 0;
53482
- const accept = (0, import_react242.useMemo)(
53466
+ const accept = (0, import_react243.useMemo)(
53483
53467
  () => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
53484
53468
  mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
53485
53469
  return mediaTypeMap;
53486
53470
  }, {}),
53487
53471
  [acceptedFiles]
53488
53472
  );
53489
- const subscribeToDrop = (0, import_react242.useCallback)((fn) => {
53473
+ const subscribeToDrop = (0, import_react243.useCallback)((fn) => {
53490
53474
  dropHandlersRef.current.add(fn);
53491
53475
  return () => {
53492
53476
  dropHandlersRef.current.delete(fn);
53493
53477
  };
53494
53478
  }, []);
53495
- const handleDrop = (0, import_react242.useCallback)((files) => {
53479
+ const handleDrop = (0, import_react243.useCallback)((files) => {
53496
53480
  dropHandlersRef.current.forEach((fn) => fn(files));
53497
53481
  }, []);
53498
53482
  const { getRootProps, isDragActive, isDragReject } = (0, import_react_dropzone.useDropzone)({
@@ -53505,24 +53489,24 @@ var WithDragAndDropUpload = ({
53505
53489
  onDrop: isWithinMessageInputContext ? messageComposer.attachmentManager.uploadFiles : handleDrop
53506
53490
  });
53507
53491
  if (dragAndDropUploadContext.subscribeToDrop !== null) {
53508
- return /* @__PURE__ */ import_react242.default.createElement(Component2, { className }, children);
53492
+ return /* @__PURE__ */ import_react243.default.createElement(Component2, { className }, children);
53509
53493
  }
53510
- return /* @__PURE__ */ import_react242.default.createElement(
53494
+ return /* @__PURE__ */ import_react243.default.createElement(
53511
53495
  DragAndDropUploadContext.Provider,
53512
53496
  {
53513
53497
  value: {
53514
53498
  subscribeToDrop
53515
53499
  }
53516
53500
  },
53517
- /* @__PURE__ */ import_react242.default.createElement(Component2, { ...getRootProps({ className, style }) }, isDragActive && /* @__PURE__ */ import_react242.default.createElement(
53501
+ /* @__PURE__ */ import_react243.default.createElement(Component2, { ...getRootProps({ className, style }) }, isDragActive && /* @__PURE__ */ import_react243.default.createElement(
53518
53502
  "div",
53519
53503
  {
53520
53504
  className: (0, import_clsx62.default)("str-chat__dropzone-container", {
53521
53505
  "str-chat__dropzone-container--not-accepted": isDragReject
53522
53506
  })
53523
53507
  },
53524
- !isDragReject && /* @__PURE__ */ import_react242.default.createElement("p", null, t("Drag your files here")),
53525
- isDragReject && /* @__PURE__ */ import_react242.default.createElement("p", null, t("Some of the files will not be accepted"))
53508
+ !isDragReject && /* @__PURE__ */ import_react243.default.createElement("p", null, t("Drag your files here")),
53509
+ isDragReject && /* @__PURE__ */ import_react243.default.createElement("p", null, t("Some of the files will not be accepted"))
53526
53510
  ), children)
53527
53511
  );
53528
53512
  };
@@ -53549,37 +53533,38 @@ var MessageInputFlat = () => {
53549
53533
  RecordingPermissionDeniedNotification: RecordingPermissionDeniedNotification2 = RecordingPermissionDeniedNotification,
53550
53534
  SendButton: SendButton2 = SendButton,
53551
53535
  StartRecordingAudioButton: StartRecordingAudioButton2 = StartRecordingAudioButton,
53552
- StopAIGenerationButton: StopAIGenerationButtonOverride
53553
- } = useComponentContext("MessageInputFlat");
53536
+ StopAIGenerationButton: StopAIGenerationButtonOverride,
53537
+ TextareaComposer: TextareaComposer2 = TextareaComposer
53538
+ } = useComponentContext();
53554
53539
  const { channel } = useChatContext("MessageInputFlat");
53555
53540
  const { aiState } = useAIState(channel);
53556
- const stopGenerating = (0, import_react243.useCallback)(() => channel?.stopAIResponse(), [channel]);
53541
+ const stopGenerating = (0, import_react244.useCallback)(() => channel?.stopAIResponse(), [channel]);
53557
53542
  const [
53558
53543
  showRecordingPermissionDeniedNotification,
53559
53544
  setShowRecordingPermissionDeniedNotification
53560
- ] = (0, import_react243.useState)(false);
53561
- const closePermissionDeniedNotification = (0, import_react243.useCallback)(() => {
53545
+ ] = (0, import_react244.useState)(false);
53546
+ const closePermissionDeniedNotification = (0, import_react244.useCallback)(() => {
53562
53547
  setShowRecordingPermissionDeniedNotification(false);
53563
53548
  }, []);
53564
53549
  const { attachments } = useAttachmentManagerState();
53565
- if (recordingController.recordingState) return /* @__PURE__ */ import_react243.default.createElement(AudioRecorder2, null);
53550
+ if (recordingController.recordingState) return /* @__PURE__ */ import_react244.default.createElement(AudioRecorder2, null);
53566
53551
  const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices);
53567
53552
  const isRecording = !!recordingController.recordingState;
53568
53553
  const StopAIGenerationButton2 = StopAIGenerationButtonOverride === void 0 ? StopAIGenerationButton : StopAIGenerationButtonOverride;
53569
53554
  const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopAIGenerationButton2;
53570
- return /* @__PURE__ */ import_react243.default.createElement(WithDragAndDropUpload, { className: "str-chat__message-input", component: "div" }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react243.default.createElement(
53555
+ return /* @__PURE__ */ import_react244.default.createElement(WithDragAndDropUpload, { className: "str-chat__message-input", component: "div" }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react244.default.createElement(
53571
53556
  RecordingPermissionDeniedNotification2,
53572
53557
  {
53573
53558
  onClose: closePermissionDeniedNotification,
53574
53559
  permissionName: "microphone" /* MIC */
53575
53560
  }
53576
- ), /* @__PURE__ */ import_react243.default.createElement(LinkPreviewList2, null), /* @__PURE__ */ import_react243.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react243.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__message-textarea-container" }, /* @__PURE__ */ import_react243.default.createElement(QuotedMessagePreview2, null), /* @__PURE__ */ import_react243.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react243.default.createElement(TextareaComposer, null), EmojiPicker && /* @__PURE__ */ import_react243.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react243.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react243.default.createElement(import_react243.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react243.default.createElement(
53561
+ ), /* @__PURE__ */ import_react244.default.createElement(LinkPreviewList2, null), /* @__PURE__ */ import_react244.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react244.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message-textarea-container" }, /* @__PURE__ */ import_react244.default.createElement(QuotedMessagePreview2, null), /* @__PURE__ */ import_react244.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react244.default.createElement(TextareaComposer2, null), EmojiPicker && /* @__PURE__ */ import_react244.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react244.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react244.default.createElement(import_react244.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react244.default.createElement(
53577
53562
  CooldownTimer2,
53578
53563
  {
53579
53564
  cooldownInterval: cooldownRemaining,
53580
53565
  setCooldownRemaining
53581
53566
  }
53582
- ) : /* @__PURE__ */ import_react243.default.createElement(import_react243.default.Fragment, null, /* @__PURE__ */ import_react243.default.createElement(SendButton2, { sendMessage: handleSubmit }), recordingEnabled && /* @__PURE__ */ import_react243.default.createElement(
53567
+ ) : /* @__PURE__ */ import_react244.default.createElement(import_react244.default.Fragment, null, /* @__PURE__ */ import_react244.default.createElement(SendButton2, { sendMessage: handleSubmit }), recordingEnabled && /* @__PURE__ */ import_react244.default.createElement(
53583
53568
  StartRecordingAudioButton2,
53584
53569
  {
53585
53570
  disabled: isRecording || !asyncMessagesMultiSendEnabled && attachments.some(
@@ -53594,7 +53579,7 @@ var MessageInputFlat = () => {
53594
53579
  };
53595
53580
 
53596
53581
  // src/components/MessageInput/hooks/useCreateMessageInputContext.ts
53597
- var import_react244 = require("react");
53582
+ var import_react245 = require("react");
53598
53583
  var useCreateMessageInputContext = (value) => {
53599
53584
  const {
53600
53585
  additionalTextareaProps,
@@ -53605,10 +53590,8 @@ var useCreateMessageInputContext = (value) => {
53605
53590
  cooldownRemaining,
53606
53591
  emojiSearchIndex,
53607
53592
  focus,
53608
- grow,
53609
53593
  handleSubmit,
53610
53594
  hideSendButton,
53611
- insertText,
53612
53595
  isThreadInput,
53613
53596
  maxRows,
53614
53597
  minRows,
@@ -53620,7 +53603,7 @@ var useCreateMessageInputContext = (value) => {
53620
53603
  textareaRef
53621
53604
  } = value;
53622
53605
  const parentId = parent?.id;
53623
- const messageInputContext = (0, import_react244.useMemo)(
53606
+ const messageInputContext = (0, import_react245.useMemo)(
53624
53607
  () => ({
53625
53608
  additionalTextareaProps,
53626
53609
  asyncMessagesMultiSendEnabled,
@@ -53630,10 +53613,8 @@ var useCreateMessageInputContext = (value) => {
53630
53613
  cooldownRemaining,
53631
53614
  emojiSearchIndex,
53632
53615
  focus,
53633
- grow,
53634
53616
  handleSubmit,
53635
53617
  hideSendButton,
53636
- insertText,
53637
53618
  isThreadInput,
53638
53619
  maxRows,
53639
53620
  minRows,
@@ -53674,13 +53655,13 @@ var MessageInputProvider = (props) => {
53674
53655
  emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex
53675
53656
  });
53676
53657
  const messageComposer = useMessageComposer();
53677
- (0, import_react245.useEffect)(
53658
+ (0, import_react246.useEffect)(
53678
53659
  () => () => {
53679
53660
  messageComposer.createDraft();
53680
53661
  },
53681
53662
  [messageComposer]
53682
53663
  );
53683
- (0, import_react245.useEffect)(() => {
53664
+ (0, import_react246.useEffect)(() => {
53684
53665
  const threadId = messageComposer.threadId;
53685
53666
  if (!threadId || !messageComposer.channel || !messageComposer.compositionIsEmpty)
53686
53667
  return;
@@ -53691,16 +53672,16 @@ var MessageInputProvider = (props) => {
53691
53672
  });
53692
53673
  }, [messageComposer]);
53693
53674
  useRegisterDropHandlers();
53694
- return /* @__PURE__ */ import_react245.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
53675
+ return /* @__PURE__ */ import_react246.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
53695
53676
  };
53696
53677
  var UnMemoizedMessageInput = (props) => {
53697
53678
  const { Input: PropInput } = props;
53698
53679
  const { Input: ContextInput } = useComponentContext("MessageInput");
53699
53680
  const Input = PropInput || ContextInput || MessageInputFlat;
53700
53681
  const dialogManagerId = props.isThreadInput ? "message-input-dialog-manager-thread" : "message-input-dialog-manager";
53701
- return /* @__PURE__ */ import_react245.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react245.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react245.default.createElement(Input, null)));
53682
+ return /* @__PURE__ */ import_react246.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react246.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react246.default.createElement(Input, null)));
53702
53683
  };
53703
- var MessageInput = import_react245.default.memo(
53684
+ var MessageInput = import_react246.default.memo(
53704
53685
  UnMemoizedMessageInput
53705
53686
  );
53706
53687
 
@@ -53708,7 +53689,7 @@ var MessageInput = import_react245.default.memo(
53708
53689
  var EditMessageFormSendButton = () => {
53709
53690
  const { t } = useTranslationContext();
53710
53691
  const hasSendableData = useMessageComposerHasSendableData();
53711
- return /* @__PURE__ */ import_react246.default.createElement(
53692
+ return /* @__PURE__ */ import_react247.default.createElement(
53712
53693
  "button",
53713
53694
  {
53714
53695
  className: "str-chat__edit-message-send",
@@ -53723,26 +53704,26 @@ var EditMessageForm = () => {
53723
53704
  const { t } = useTranslationContext("EditMessageForm");
53724
53705
  const messageComposer = useMessageComposer();
53725
53706
  const { clearEditingState, handleSubmit } = useMessageInputContext("EditMessageForm");
53726
- const cancel = (0, import_react246.useCallback)(() => {
53707
+ const cancel = (0, import_react247.useCallback)(() => {
53727
53708
  clearEditingState?.();
53728
53709
  messageComposer.restore();
53729
53710
  }, [clearEditingState, messageComposer]);
53730
- (0, import_react246.useEffect)(() => {
53711
+ (0, import_react247.useEffect)(() => {
53731
53712
  const onKeyDown = (event) => {
53732
53713
  if (event.key === "Escape") cancel();
53733
53714
  };
53734
53715
  document.addEventListener("keydown", onKeyDown);
53735
53716
  return () => document.removeEventListener("keydown", onKeyDown);
53736
53717
  }, [cancel]);
53737
- return /* @__PURE__ */ import_react246.default.createElement(
53718
+ return /* @__PURE__ */ import_react247.default.createElement(
53738
53719
  "form",
53739
53720
  {
53740
53721
  autoComplete: "off",
53741
53722
  className: "str-chat__edit-message-form",
53742
53723
  onSubmit: handleSubmit
53743
53724
  },
53744
- /* @__PURE__ */ import_react246.default.createElement(MessageInputFlat, null),
53745
- /* @__PURE__ */ import_react246.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react246.default.createElement(
53725
+ /* @__PURE__ */ import_react247.default.createElement(MessageInputFlat, null),
53726
+ /* @__PURE__ */ import_react247.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react247.default.createElement(
53746
53727
  "button",
53747
53728
  {
53748
53729
  className: "str-chat__edit-message-cancel",
@@ -53750,7 +53731,7 @@ var EditMessageForm = () => {
53750
53731
  onClick: cancel
53751
53732
  },
53752
53733
  t("Cancel")
53753
- ), /* @__PURE__ */ import_react246.default.createElement(EditMessageFormSendButton, null))
53734
+ ), /* @__PURE__ */ import_react247.default.createElement(EditMessageFormSendButton, null))
53754
53735
  );
53755
53736
  };
53756
53737
  var EditMessageModal = ({
@@ -53759,22 +53740,21 @@ var EditMessageModal = ({
53759
53740
  const { EditMessageInput = EditMessageForm } = useComponentContext();
53760
53741
  const { clearEditingState } = useMessageContext();
53761
53742
  const messageComposer = useMessageComposer();
53762
- const onEditModalClose = (0, import_react246.useCallback)(() => {
53743
+ const onEditModalClose = (0, import_react247.useCallback)(() => {
53763
53744
  clearEditingState();
53764
53745
  messageComposer.restore();
53765
53746
  }, [clearEditingState, messageComposer]);
53766
- return /* @__PURE__ */ import_react246.default.createElement(
53747
+ return /* @__PURE__ */ import_react247.default.createElement(
53767
53748
  Modal,
53768
53749
  {
53769
53750
  className: "str-chat__edit-message-modal",
53770
53751
  onClose: onEditModalClose,
53771
53752
  open: true
53772
53753
  },
53773
- /* @__PURE__ */ import_react246.default.createElement(
53754
+ /* @__PURE__ */ import_react247.default.createElement(
53774
53755
  MessageInput,
53775
53756
  {
53776
53757
  clearEditingState,
53777
- grow: true,
53778
53758
  hideSendButton: true,
53779
53759
  Input: EditMessageInput,
53780
53760
  ...additionalMessageInputProps
@@ -53788,12 +53768,12 @@ var attachmentManagerConfigStateSelector2 = (state) => ({
53788
53768
  acceptedFiles: state.attachments.acceptedFiles,
53789
53769
  maxNumberOfFilesPerMessage: state.attachments.maxNumberOfFilesPerMessage
53790
53770
  });
53791
- var UploadButton = (0, import_react247.forwardRef)(function UploadButton2({ onFileChange, resetOnChange = true, ...rest }, ref) {
53771
+ var UploadButton = (0, import_react248.forwardRef)(function UploadButton2({ onFileChange, resetOnChange = true, ...rest }, ref) {
53792
53772
  const handleInputChange = useHandleFileChangeWrapper(resetOnChange, onFileChange);
53793
- return /* @__PURE__ */ import_react247.default.createElement("input", { onChange: handleInputChange, ref, type: "file", ...rest });
53773
+ return /* @__PURE__ */ import_react248.default.createElement("input", { onChange: handleInputChange, ref, type: "file", ...rest });
53794
53774
  });
53795
53775
  var FileInput = UploadButton;
53796
- var UploadFileInput = (0, import_react247.forwardRef)(function UploadFileInput2({
53776
+ var UploadFileInput = (0, import_react248.forwardRef)(function UploadFileInput2({
53797
53777
  className,
53798
53778
  onFileChange: onFileChangeCustom,
53799
53779
  ...props
@@ -53807,15 +53787,15 @@ var UploadFileInput = (0, import_react247.forwardRef)(function UploadFileInput2(
53807
53787
  messageComposer.configState,
53808
53788
  attachmentManagerConfigStateSelector2
53809
53789
  );
53810
- const id = (0, import_react247.useMemo)(() => (0, import_nanoid5.nanoid)(), []);
53811
- const onFileChange = (0, import_react247.useCallback)(
53790
+ const id = (0, import_react248.useMemo)(() => (0, import_nanoid5.nanoid)(), []);
53791
+ const onFileChange = (0, import_react248.useCallback)(
53812
53792
  (files) => {
53813
53793
  attachmentManager.uploadFiles(files);
53814
53794
  onFileChangeCustom?.(files);
53815
53795
  },
53816
53796
  [onFileChangeCustom, attachmentManager]
53817
53797
  );
53818
- return /* @__PURE__ */ import_react247.default.createElement(
53798
+ return /* @__PURE__ */ import_react248.default.createElement(
53819
53799
  FileInput,
53820
53800
  {
53821
53801
  accept: acceptedFiles?.join(","),
@@ -53862,7 +53842,7 @@ var VoiceRecordingPlayer = ({
53862
53842
  });
53863
53843
  if (!asset_url) return null;
53864
53844
  const displayedDuration = secondsElapsed || duration;
53865
- return /* @__PURE__ */ import_react248.default.createElement("div", { className: rootClassName, "data-testid": "voice-recording-widget" }, /* @__PURE__ */ import_react248.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react248.default.createElement("source", { "data-testid": "audio-source", src: asset_url, type: mime_type })), /* @__PURE__ */ import_react248.default.createElement(PlayButton, { isPlaying, onClick: togglePlay }), /* @__PURE__ */ import_react248.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata" }, /* @__PURE__ */ import_react248.default.createElement(
53845
+ return /* @__PURE__ */ import_react249.default.createElement("div", { className: rootClassName, "data-testid": "voice-recording-widget" }, /* @__PURE__ */ import_react249.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react249.default.createElement("source", { "data-testid": "audio-source", src: asset_url, type: mime_type })), /* @__PURE__ */ import_react249.default.createElement(PlayButton, { isPlaying, onClick: togglePlay }), /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata" }, /* @__PURE__ */ import_react249.default.createElement(
53866
53846
  "div",
53867
53847
  {
53868
53848
  className: "str-chat__message-attachment__voice-recording-widget__title",
@@ -53870,25 +53850,25 @@ var VoiceRecordingPlayer = ({
53870
53850
  title
53871
53851
  },
53872
53852
  title
53873
- ), /* @__PURE__ */ import_react248.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state" }, /* @__PURE__ */ import_react248.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__timer" }, attachment.duration ? displayDuration(displayedDuration) : /* @__PURE__ */ import_react248.default.createElement(
53853
+ ), /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state" }, /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__timer" }, attachment.duration ? displayDuration(displayedDuration) : /* @__PURE__ */ import_react249.default.createElement(
53874
53854
  FileSizeIndicator,
53875
53855
  {
53876
53856
  fileSize: attachment.file_size,
53877
53857
  maximumFractionDigits: 0
53878
53858
  }
53879
- )), /* @__PURE__ */ import_react248.default.createElement(
53859
+ )), /* @__PURE__ */ import_react249.default.createElement(
53880
53860
  WaveProgressBar,
53881
53861
  {
53882
53862
  progress,
53883
53863
  seek,
53884
53864
  waveformData: waveform_data || []
53885
53865
  }
53886
- ))), /* @__PURE__ */ import_react248.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__right-section" }, isPlaying ? /* @__PURE__ */ import_react248.default.createElement(PlaybackRateButton, { disabled: !audioRef.current, onClick: increasePlaybackRate }, playbackRate.toFixed(1), "x") : /* @__PURE__ */ import_react248.default.createElement(FileIcon, { big: true, mimeType: mime_type, size: 40 })));
53866
+ ))), /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__right-section" }, isPlaying ? /* @__PURE__ */ import_react249.default.createElement(PlaybackRateButton, { disabled: !audioRef.current, onClick: increasePlaybackRate }, playbackRate.toFixed(1), "x") : /* @__PURE__ */ import_react249.default.createElement(FileIcon, { big: true, mimeType: mime_type, size: 40 })));
53887
53867
  };
53888
53868
  var QuotedVoiceRecording = ({ attachment }) => {
53889
53869
  const { t } = useTranslationContext();
53890
53870
  const title = attachment.title || t("Voice message");
53891
- return /* @__PURE__ */ import_react248.default.createElement("div", { className: rootClassName, "data-testid": "quoted-voice-recording-widget" }, /* @__PURE__ */ import_react248.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata" }, title && /* @__PURE__ */ import_react248.default.createElement(
53871
+ return /* @__PURE__ */ import_react249.default.createElement("div", { className: rootClassName, "data-testid": "quoted-voice-recording-widget" }, /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata" }, title && /* @__PURE__ */ import_react249.default.createElement(
53892
53872
  "div",
53893
53873
  {
53894
53874
  className: "str-chat__message-attachment__voice-recording-widget__title",
@@ -53896,18 +53876,18 @@ var QuotedVoiceRecording = ({ attachment }) => {
53896
53876
  title
53897
53877
  },
53898
53878
  title
53899
- ), /* @__PURE__ */ import_react248.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state" }, /* @__PURE__ */ import_react248.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__timer" }, attachment.duration ? displayDuration(attachment.duration) : /* @__PURE__ */ import_react248.default.createElement(
53879
+ ), /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state" }, /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__timer" }, attachment.duration ? displayDuration(attachment.duration) : /* @__PURE__ */ import_react249.default.createElement(
53900
53880
  FileSizeIndicator,
53901
53881
  {
53902
53882
  fileSize: attachment.file_size,
53903
53883
  maximumFractionDigits: 0
53904
53884
  }
53905
- )))), /* @__PURE__ */ import_react248.default.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 34 }));
53885
+ )))), /* @__PURE__ */ import_react249.default.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 34 }));
53906
53886
  };
53907
- var VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? /* @__PURE__ */ import_react248.default.createElement(QuotedVoiceRecording, { attachment }) : /* @__PURE__ */ import_react248.default.createElement(VoiceRecordingPlayer, { attachment });
53887
+ var VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? /* @__PURE__ */ import_react249.default.createElement(QuotedVoiceRecording, { attachment }) : /* @__PURE__ */ import_react249.default.createElement(VoiceRecordingPlayer, { attachment });
53908
53888
 
53909
53889
  // src/components/Attachment/Card.tsx
53910
- var import_react249 = __toESM(require("react"));
53890
+ var import_react250 = __toESM(require("react"));
53911
53891
  var import_clsx64 = __toESM(require("clsx"));
53912
53892
  var import_react_player = __toESM(require("react-player"));
53913
53893
  var getHostFromURL = (url) => {
@@ -53919,26 +53899,26 @@ var getHostFromURL = (url) => {
53919
53899
  };
53920
53900
  var UnableToRenderCard = ({ type }) => {
53921
53901
  const { t } = useTranslationContext("Card");
53922
- return /* @__PURE__ */ import_react249.default.createElement(
53902
+ return /* @__PURE__ */ import_react250.default.createElement(
53923
53903
  "div",
53924
53904
  {
53925
53905
  className: (0, import_clsx64.default)("str-chat__message-attachment-card", {
53926
53906
  [`str-chat__message-attachment-card--${type}`]: type
53927
53907
  })
53928
53908
  },
53929
- /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment-card--content" }, /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment-card--text" }, t("this content could not be displayed")))
53909
+ /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--content" }, /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--text" }, t("this content could not be displayed")))
53930
53910
  );
53931
53911
  };
53932
53912
  var SourceLink = ({
53933
53913
  author_name,
53934
53914
  url
53935
- }) => /* @__PURE__ */ import_react249.default.createElement(
53915
+ }) => /* @__PURE__ */ import_react250.default.createElement(
53936
53916
  "div",
53937
53917
  {
53938
53918
  className: "str-chat__message-attachment-card--source-link",
53939
53919
  "data-testid": "card-source-link"
53940
53920
  },
53941
- /* @__PURE__ */ import_react249.default.createElement(
53921
+ /* @__PURE__ */ import_react250.default.createElement(
53942
53922
  SafeAnchor,
53943
53923
  {
53944
53924
  className: "str-chat__message-attachment-card--url",
@@ -53953,7 +53933,7 @@ var CardHeader = (props) => {
53953
53933
  const { asset_url, dimensions, image: image3, image_url, thumb_url, title, type } = props;
53954
53934
  let visual = null;
53955
53935
  if (asset_url && type === "video") {
53956
- visual = /* @__PURE__ */ import_react249.default.createElement(
53936
+ visual = /* @__PURE__ */ import_react250.default.createElement(
53957
53937
  import_react_player.default,
53958
53938
  {
53959
53939
  className: "react-player",
@@ -53964,7 +53944,7 @@ var CardHeader = (props) => {
53964
53944
  }
53965
53945
  );
53966
53946
  } else if (image3) {
53967
- visual = /* @__PURE__ */ import_react249.default.createElement(
53947
+ visual = /* @__PURE__ */ import_react250.default.createElement(
53968
53948
  ImageComponent,
53969
53949
  {
53970
53950
  dimensions,
@@ -53974,7 +53954,7 @@ var CardHeader = (props) => {
53974
53954
  }
53975
53955
  );
53976
53956
  }
53977
- return visual ? /* @__PURE__ */ import_react249.default.createElement(
53957
+ return visual ? /* @__PURE__ */ import_react250.default.createElement(
53978
53958
  "div",
53979
53959
  {
53980
53960
  className: "str-chat__message-attachment-card--header str-chat__message-attachment-card-react--header",
@@ -53986,7 +53966,7 @@ var CardHeader = (props) => {
53986
53966
  var CardContent = (props) => {
53987
53967
  const { author_name, og_scrape_url, text: text7, title, title_link, type } = props;
53988
53968
  const url = title_link || og_scrape_url;
53989
- return /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment-card--content" }, type === "audio" ? /* @__PURE__ */ import_react249.default.createElement(CardAudio, { og: props }) : /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment-card--flex" }, url && /* @__PURE__ */ import_react249.default.createElement(SourceLink, { author_name, url }), title && /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment-card--title" }, title), text7 && /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment-card--text" }, text7)));
53969
+ return /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--content" }, type === "audio" ? /* @__PURE__ */ import_react250.default.createElement(CardAudio, { og: props }) : /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--flex" }, url && /* @__PURE__ */ import_react250.default.createElement(SourceLink, { author_name, url }), title && /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--title" }, title), text7 && /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--text" }, text7)));
53990
53970
  };
53991
53971
  var CardAudio = ({
53992
53972
  og: { asset_url, author_name, mime_type, og_scrape_url, text: text7, title, title_link }
@@ -53997,7 +53977,7 @@ var CardAudio = ({
53997
53977
  const url = title_link || og_scrape_url;
53998
53978
  const dataTestId = "card-audio-widget";
53999
53979
  const rootClassName2 = "str-chat__message-attachment-card-audio-widget";
54000
- return /* @__PURE__ */ import_react249.default.createElement("div", { className: rootClassName2, "data-testid": dataTestId }, asset_url && /* @__PURE__ */ import_react249.default.createElement(import_react249.default.Fragment, null, /* @__PURE__ */ import_react249.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react249.default.createElement("source", { "data-testid": "audio-source", src: asset_url, type: "audio/mp3" })), /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment-card-audio-widget--first-row" }, /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--play-controls" }, /* @__PURE__ */ import_react249.default.createElement(PlayButton, { isPlaying, onClick: togglePlay })), /* @__PURE__ */ import_react249.default.createElement(ProgressBar, { onClick: seek, progress }))), /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--second-row" }, url && /* @__PURE__ */ import_react249.default.createElement(SourceLink, { author_name, url }), title && /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--title" }, title), text7 && /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--description" }, text7)));
53980
+ return /* @__PURE__ */ import_react250.default.createElement("div", { className: rootClassName2, "data-testid": dataTestId }, asset_url && /* @__PURE__ */ import_react250.default.createElement(import_react250.default.Fragment, null, /* @__PURE__ */ import_react250.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react250.default.createElement("source", { "data-testid": "audio-source", src: asset_url, type: "audio/mp3" })), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card-audio-widget--first-row" }, /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--play-controls" }, /* @__PURE__ */ import_react250.default.createElement(PlayButton, { isPlaying, onClick: togglePlay })), /* @__PURE__ */ import_react250.default.createElement(ProgressBar, { onClick: seek, progress }))), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--second-row" }, url && /* @__PURE__ */ import_react250.default.createElement(SourceLink, { author_name, url }), title && /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--title" }, title), text7 && /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--description" }, text7)));
54001
53981
  };
54002
53982
  var UnMemoizedCard = (props) => {
54003
53983
  const { asset_url, giphy, image_url, thumb_url, title, title_link, type } = props;
@@ -54011,45 +53991,45 @@ var UnMemoizedCard = (props) => {
54011
53991
  dimensions.width = giphyVersion.width;
54012
53992
  }
54013
53993
  if (!title && !title_link && !asset_url && !image3) {
54014
- return /* @__PURE__ */ import_react249.default.createElement(UnableToRenderCard, null);
53994
+ return /* @__PURE__ */ import_react250.default.createElement(UnableToRenderCard, null);
54015
53995
  }
54016
- return /* @__PURE__ */ import_react249.default.createElement(
53996
+ return /* @__PURE__ */ import_react250.default.createElement(
54017
53997
  "div",
54018
53998
  {
54019
53999
  className: `str-chat__message-attachment-card str-chat__message-attachment-card--${type}`
54020
54000
  },
54021
- /* @__PURE__ */ import_react249.default.createElement(CardHeader, { ...props, dimensions, image: image3 }),
54022
- /* @__PURE__ */ import_react249.default.createElement(CardContent, { ...props })
54001
+ /* @__PURE__ */ import_react250.default.createElement(CardHeader, { ...props, dimensions, image: image3 }),
54002
+ /* @__PURE__ */ import_react250.default.createElement(CardContent, { ...props })
54023
54003
  );
54024
54004
  };
54025
- var Card = import_react249.default.memo(UnMemoizedCard);
54005
+ var Card = import_react250.default.memo(UnMemoizedCard);
54026
54006
 
54027
54007
  // src/components/Attachment/FileAttachment.tsx
54028
- var import_react250 = __toESM(require("react"));
54029
- var UnMemoizedFileAttachment = ({ attachment }) => /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-file--item", "data-testid": "attachment-file" }, /* @__PURE__ */ import_react250.default.createElement(FileIcon, { className: "str-chat__file-icon", mimeType: attachment.mime_type }), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-file--item-text" }, /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-file--item-first-row" }, /* @__PURE__ */ import_react250.default.createElement(
54008
+ var import_react251 = __toESM(require("react"));
54009
+ var UnMemoizedFileAttachment = ({ attachment }) => /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-file--item", "data-testid": "attachment-file" }, /* @__PURE__ */ import_react251.default.createElement(FileIcon, { className: "str-chat__file-icon", mimeType: attachment.mime_type }), /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-file--item-text" }, /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-file--item-first-row" }, /* @__PURE__ */ import_react251.default.createElement(
54030
54010
  "div",
54031
54011
  {
54032
54012
  className: "str-chat__message-attachment-file--item-name",
54033
54013
  "data-testid": "file-title"
54034
54014
  },
54035
54015
  attachment.title
54036
- ), /* @__PURE__ */ import_react250.default.createElement(DownloadButton, { assetUrl: attachment.asset_url })), /* @__PURE__ */ import_react250.default.createElement(FileSizeIndicator, { fileSize: attachment.file_size })));
54037
- var FileAttachment = import_react250.default.memo(
54016
+ ), /* @__PURE__ */ import_react251.default.createElement(DownloadButton, { assetUrl: attachment.asset_url })), /* @__PURE__ */ import_react251.default.createElement(FileSizeIndicator, { fileSize: attachment.file_size })));
54017
+ var FileAttachment = import_react251.default.memo(
54038
54018
  UnMemoizedFileAttachment
54039
54019
  );
54040
54020
 
54041
54021
  // src/components/Attachment/UnsupportedAttachment.tsx
54042
- var import_react251 = __toESM(require("react"));
54022
+ var import_react252 = __toESM(require("react"));
54043
54023
  var UnsupportedAttachment = ({ attachment }) => {
54044
54024
  const { t } = useTranslationContext("UnsupportedAttachment");
54045
- return /* @__PURE__ */ import_react251.default.createElement(
54025
+ return /* @__PURE__ */ import_react252.default.createElement(
54046
54026
  "div",
54047
54027
  {
54048
54028
  className: "str-chat__message-attachment-unsupported",
54049
54029
  "data-testid": "attachment-unsupported"
54050
54030
  },
54051
- /* @__PURE__ */ import_react251.default.createElement(FileIcon, { className: "str-chat__file-icon" }),
54052
- /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-unsupported__metadata" }, /* @__PURE__ */ import_react251.default.createElement(
54031
+ /* @__PURE__ */ import_react252.default.createElement(FileIcon, { className: "str-chat__file-icon" }),
54032
+ /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__message-attachment-unsupported__metadata" }, /* @__PURE__ */ import_react252.default.createElement(
54053
54033
  "div",
54054
54034
  {
54055
54035
  className: "str-chat__message-attachment-unsupported__title",
@@ -54081,7 +54061,7 @@ var AttachmentWithinContainer = ({
54081
54061
  "str-chat__message-attachment-with-actions": extra === "actions"
54082
54062
  }
54083
54063
  );
54084
- return /* @__PURE__ */ import_react252.default.createElement("div", { className: classNames }, children);
54064
+ return /* @__PURE__ */ import_react253.default.createElement("div", { className: classNames }, children);
54085
54065
  };
54086
54066
  var AttachmentActionsContainer = ({
54087
54067
  actionHandler,
@@ -54089,7 +54069,7 @@ var AttachmentActionsContainer = ({
54089
54069
  AttachmentActions: AttachmentActions2 = AttachmentActions
54090
54070
  }) => {
54091
54071
  if (!attachment.actions?.length) return null;
54092
- return /* @__PURE__ */ import_react252.default.createElement(
54072
+ return /* @__PURE__ */ import_react253.default.createElement(
54093
54073
  AttachmentActions2,
54094
54074
  {
54095
54075
  ...attachment,
@@ -54120,10 +54100,10 @@ var GalleryContainer = ({
54120
54100
  attachment,
54121
54101
  Gallery: Gallery2 = Gallery
54122
54102
  }) => {
54123
- const imageElements = (0, import_react252.useRef)([]);
54103
+ const imageElements = (0, import_react253.useRef)([]);
54124
54104
  const { imageAttachmentSizeHandler } = useChannelStateContext();
54125
- const [attachmentConfigurations, setAttachmentConfigurations] = (0, import_react252.useState)([]);
54126
- (0, import_react252.useLayoutEffect)(() => {
54105
+ const [attachmentConfigurations, setAttachmentConfigurations] = (0, import_react253.useState)([]);
54106
+ (0, import_react253.useLayoutEffect)(() => {
54127
54107
  if (imageElements.current && imageElements.current.every((element3) => !!element3) && imageAttachmentSizeHandler) {
54128
54108
  const newConfigurations = [];
54129
54109
  imageElements.current.forEach((element3, i) => {
@@ -54140,15 +54120,15 @@ var GalleryContainer = ({
54140
54120
  attachment.images[i]?.image_url || attachment.images[i]?.thumb_url || ""
54141
54121
  )
54142
54122
  }));
54143
- return /* @__PURE__ */ import_react252.default.createElement(AttachmentWithinContainer, { attachment, componentType: "gallery" }, /* @__PURE__ */ import_react252.default.createElement(Gallery2, { images: images || [], innerRefs: imageElements, key: "gallery" }));
54123
+ return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType: "gallery" }, /* @__PURE__ */ import_react253.default.createElement(Gallery2, { images: images || [], innerRefs: imageElements, key: "gallery" }));
54144
54124
  };
54145
54125
  var ImageContainer = (props) => {
54146
54126
  const { attachment, Image: Image2 = ImageComponent } = props;
54147
54127
  const componentType = "image";
54148
- const imageElement = (0, import_react252.useRef)(null);
54128
+ const imageElement = (0, import_react253.useRef)(null);
54149
54129
  const { imageAttachmentSizeHandler } = useChannelStateContext();
54150
- const [attachmentConfiguration, setAttachmentConfiguration] = (0, import_react252.useState)(void 0);
54151
- (0, import_react252.useLayoutEffect)(() => {
54130
+ const [attachmentConfiguration, setAttachmentConfiguration] = (0, import_react253.useState)(void 0);
54131
+ (0, import_react253.useLayoutEffect)(() => {
54152
54132
  if (imageElement.current && imageAttachmentSizeHandler) {
54153
54133
  const config = imageAttachmentSizeHandler(attachment, imageElement.current);
54154
54134
  setAttachmentConfiguration(config);
@@ -54160,41 +54140,41 @@ var ImageContainer = (props) => {
54160
54140
  style: getCssDimensionsVariables(attachment.image_url || attachment.thumb_url || "")
54161
54141
  };
54162
54142
  if (attachment.actions && attachment.actions.length) {
54163
- return /* @__PURE__ */ import_react252.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react252.default.createElement(Image2, { ...imageConfig, innerRef: imageElement }), /* @__PURE__ */ import_react252.default.createElement(AttachmentActionsContainer, { ...props })));
54143
+ return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react253.default.createElement(Image2, { ...imageConfig, innerRef: imageElement }), /* @__PURE__ */ import_react253.default.createElement(AttachmentActionsContainer, { ...props })));
54164
54144
  }
54165
- return /* @__PURE__ */ import_react252.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react252.default.createElement(Image2, { ...imageConfig, innerRef: imageElement }));
54145
+ return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement(Image2, { ...imageConfig, innerRef: imageElement }));
54166
54146
  };
54167
54147
  var CardContainer = (props) => {
54168
54148
  const { attachment, Card: Card2 = Card } = props;
54169
54149
  const componentType = "card";
54170
54150
  if (attachment.actions && attachment.actions.length) {
54171
- return /* @__PURE__ */ import_react252.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react252.default.createElement(Card2, { ...attachment }), /* @__PURE__ */ import_react252.default.createElement(AttachmentActionsContainer, { ...props })));
54151
+ return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react253.default.createElement(Card2, { ...attachment }), /* @__PURE__ */ import_react253.default.createElement(AttachmentActionsContainer, { ...props })));
54172
54152
  }
54173
- return /* @__PURE__ */ import_react252.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react252.default.createElement(Card2, { ...attachment }));
54153
+ return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement(Card2, { ...attachment }));
54174
54154
  };
54175
54155
  var FileContainer = ({
54176
54156
  attachment,
54177
54157
  File: File2 = FileAttachment
54178
54158
  }) => {
54179
54159
  if (!attachment.asset_url) return null;
54180
- return /* @__PURE__ */ import_react252.default.createElement(AttachmentWithinContainer, { attachment, componentType: "file" }, /* @__PURE__ */ import_react252.default.createElement(File2, { attachment }));
54160
+ return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType: "file" }, /* @__PURE__ */ import_react253.default.createElement(File2, { attachment }));
54181
54161
  };
54182
54162
  var AudioContainer = ({
54183
54163
  attachment,
54184
54164
  Audio: Audio2 = Audio
54185
- }) => /* @__PURE__ */ import_react252.default.createElement(AttachmentWithinContainer, { attachment, componentType: "audio" }, /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react252.default.createElement(Audio2, { og: attachment })));
54165
+ }) => /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType: "audio" }, /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react253.default.createElement(Audio2, { og: attachment })));
54186
54166
  var VoiceRecordingContainer = ({
54187
54167
  attachment,
54188
54168
  isQuoted,
54189
54169
  VoiceRecording: VoiceRecording2 = VoiceRecording
54190
- }) => /* @__PURE__ */ import_react252.default.createElement(AttachmentWithinContainer, { attachment, componentType: "voiceRecording" }, /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react252.default.createElement(VoiceRecording2, { attachment, isQuoted })));
54170
+ }) => /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType: "voiceRecording" }, /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react253.default.createElement(VoiceRecording2, { attachment, isQuoted })));
54191
54171
  var MediaContainer = (props) => {
54192
54172
  const { attachment, Media = import_react_player2.default } = props;
54193
54173
  const componentType = "media";
54194
54174
  const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } = useChannelStateContext();
54195
- const videoElement = (0, import_react252.useRef)(null);
54196
- const [attachmentConfiguration, setAttachmentConfiguration] = (0, import_react252.useState)();
54197
- (0, import_react252.useLayoutEffect)(() => {
54175
+ const videoElement = (0, import_react253.useRef)(null);
54176
+ const [attachmentConfiguration, setAttachmentConfiguration] = (0, import_react253.useState)();
54177
+ (0, import_react253.useLayoutEffect)(() => {
54198
54178
  if (videoElement.current && videoAttachmentSizeHandler) {
54199
54179
  const config = videoAttachmentSizeHandler(
54200
54180
  attachment,
@@ -54204,7 +54184,7 @@ var MediaContainer = (props) => {
54204
54184
  setAttachmentConfiguration(config);
54205
54185
  }
54206
54186
  }, [videoElement, videoAttachmentSizeHandler, attachment]);
54207
- const content3 = /* @__PURE__ */ import_react252.default.createElement(
54187
+ const content3 = /* @__PURE__ */ import_react253.default.createElement(
54208
54188
  "div",
54209
54189
  {
54210
54190
  className: "str-chat__player-wrapper",
@@ -54212,7 +54192,7 @@ var MediaContainer = (props) => {
54212
54192
  ref: videoElement,
54213
54193
  style: getCssDimensionsVariables(attachment.thumb_url || "")
54214
54194
  },
54215
- /* @__PURE__ */ import_react252.default.createElement(
54195
+ /* @__PURE__ */ import_react253.default.createElement(
54216
54196
  Media,
54217
54197
  {
54218
54198
  className: "react-player",
@@ -54224,12 +54204,12 @@ var MediaContainer = (props) => {
54224
54204
  }
54225
54205
  )
54226
54206
  );
54227
- return attachment.actions?.length ? /* @__PURE__ */ import_react252.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__attachment" }, content3, /* @__PURE__ */ import_react252.default.createElement(AttachmentActionsContainer, { ...props }))) : /* @__PURE__ */ import_react252.default.createElement(AttachmentWithinContainer, { attachment, componentType }, content3);
54207
+ return attachment.actions?.length ? /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment" }, content3, /* @__PURE__ */ import_react253.default.createElement(AttachmentActionsContainer, { ...props }))) : /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, content3);
54228
54208
  };
54229
54209
  var UnsupportedAttachmentContainer = ({
54230
54210
  attachment,
54231
54211
  UnsupportedAttachment: UnsupportedAttachment2 = UnsupportedAttachment
54232
- }) => /* @__PURE__ */ import_react252.default.createElement(import_react252.default.Fragment, null, /* @__PURE__ */ import_react252.default.createElement(UnsupportedAttachment2, { attachment }));
54212
+ }) => /* @__PURE__ */ import_react253.default.createElement(import_react253.default.Fragment, null, /* @__PURE__ */ import_react253.default.createElement(UnsupportedAttachment2, { attachment }));
54233
54213
 
54234
54214
  // src/components/Attachment/Attachment.tsx
54235
54215
  var CONTAINER_MAP = {
@@ -54252,12 +54232,12 @@ var ATTACHMENT_GROUPS_ORDER = [
54252
54232
  ];
54253
54233
  var Attachment = (props) => {
54254
54234
  const { attachments } = props;
54255
- const groupedAttachments = (0, import_react253.useMemo)(
54235
+ const groupedAttachments = (0, import_react254.useMemo)(
54256
54236
  () => renderGroupedAttachments(props),
54257
54237
  // eslint-disable-next-line react-hooks/exhaustive-deps
54258
54238
  [attachments]
54259
54239
  );
54260
- return /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment-list" }, ATTACHMENT_GROUPS_ORDER.reduce(
54240
+ return /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment-list" }, ATTACHMENT_GROUPS_ORDER.reduce(
54261
54241
  (acc, groupName) => [...acc, ...groupedAttachments[groupName]],
54262
54242
  []
54263
54243
  ));
@@ -54274,7 +54254,7 @@ var renderGroupedAttachments = ({
54274
54254
  const attachmentType = getAttachmentType(attachment);
54275
54255
  const Container = CONTAINER_MAP[attachmentType];
54276
54256
  typeMap[attachmentType].push(
54277
- /* @__PURE__ */ import_react253.default.createElement(
54257
+ /* @__PURE__ */ import_react254.default.createElement(
54278
54258
  Container,
54279
54259
  {
54280
54260
  key: `${attachmentType}-${typeMap[attachmentType].length}`,
@@ -54301,7 +54281,7 @@ var renderGroupedAttachments = ({
54301
54281
  );
54302
54282
  if (uploadedImages.length > 1) {
54303
54283
  containers["gallery"] = [
54304
- /* @__PURE__ */ import_react253.default.createElement(
54284
+ /* @__PURE__ */ import_react254.default.createElement(
54305
54285
  GalleryContainer,
54306
54286
  {
54307
54287
  key: "gallery-container",
@@ -54315,7 +54295,7 @@ var renderGroupedAttachments = ({
54315
54295
  ];
54316
54296
  } else if (uploadedImages.length === 1) {
54317
54297
  containers["image"] = [
54318
- /* @__PURE__ */ import_react253.default.createElement(ImageContainer, { key: "image-container", ...rest, attachment: uploadedImages[0] })
54298
+ /* @__PURE__ */ import_react254.default.createElement(ImageContainer, { key: "image-container", ...rest, attachment: uploadedImages[0] })
54319
54299
  ];
54320
54300
  }
54321
54301
  return containers;
@@ -54336,11 +54316,11 @@ var getAttachmentType = (attachment) => {
54336
54316
  };
54337
54317
 
54338
54318
  // src/components/Channel/Channel.tsx
54339
- var import_react259 = __toESM(require("react"));
54319
+ var import_react260 = __toESM(require("react"));
54340
54320
  var import_clsx66 = __toESM(require("clsx"));
54341
- var import_lodash19 = __toESM(require("lodash.debounce"));
54342
- var import_lodash20 = __toESM(require("lodash.defaultsdeep"));
54343
- var import_lodash21 = __toESM(require("lodash.throttle"));
54321
+ var import_lodash20 = __toESM(require("lodash.debounce"));
54322
+ var import_lodash21 = __toESM(require("lodash.defaultsdeep"));
54323
+ var import_lodash22 = __toESM(require("lodash.throttle"));
54344
54324
  var import_stream_chat11 = require("stream-chat");
54345
54325
 
54346
54326
  // src/components/Channel/channelState.ts
@@ -54517,7 +54497,7 @@ var initialState = {
54517
54497
  };
54518
54498
 
54519
54499
  // src/components/Channel/hooks/useCreateChannelStateContext.ts
54520
- var import_react254 = require("react");
54500
+ var import_react255 = require("react");
54521
54501
  var useCreateChannelStateContext = (value) => {
54522
54502
  const {
54523
54503
  channel,
@@ -54576,7 +54556,7 @@ var useCreateChannelStateContext = (value) => {
54576
54556
  const memoizedThreadMessageData = threadMessages.map(
54577
54557
  ({ deleted_at, latest_reactions, pinned, status, updated_at, user }) => `${deleted_at}${latest_reactions ? latest_reactions.map(({ type }) => type).join() : ""}${pinned}${status}${updated_at && (isDayOrMoment(updated_at) || isDate(updated_at)) ? updated_at.toISOString() : updated_at || ""}${user?.updated_at}`
54578
54558
  ).join();
54579
- const channelStateContext = (0, import_react254.useMemo)(
54559
+ const channelStateContext = (0, import_react255.useMemo)(
54580
54560
  () => ({
54581
54561
  channel,
54582
54562
  channelCapabilities,
@@ -54640,11 +54620,11 @@ var useCreateChannelStateContext = (value) => {
54640
54620
  };
54641
54621
 
54642
54622
  // src/components/Channel/hooks/useCreateTypingContext.ts
54643
- var import_react255 = require("react");
54623
+ var import_react256 = require("react");
54644
54624
  var useCreateTypingContext = (value) => {
54645
54625
  const { typing } = value;
54646
54626
  const typingValue = Object.keys(typing || {}).join();
54647
- const typingContext = (0, import_react255.useMemo)(
54627
+ const typingContext = (0, import_react256.useMemo)(
54648
54628
  () => ({
54649
54629
  typing
54650
54630
  }),
@@ -54668,10 +54648,10 @@ var useEditMessageHandler = (doUpdateMessageRequest) => {
54668
54648
  };
54669
54649
 
54670
54650
  // src/components/Channel/hooks/useIsMounted.ts
54671
- var import_react256 = require("react");
54651
+ var import_react257 = require("react");
54672
54652
  var useIsMounted = () => {
54673
- const isMounted = (0, import_react256.useRef)(false);
54674
- (0, import_react256.useEffect)(() => {
54653
+ const isMounted = (0, import_react257.useRef)(false);
54654
+ (0, import_react257.useEffect)(() => {
54675
54655
  isMounted.current = true;
54676
54656
  return () => {
54677
54657
  isMounted.current = false;
@@ -54681,8 +54661,8 @@ var useIsMounted = () => {
54681
54661
  };
54682
54662
 
54683
54663
  // src/components/Channel/hooks/useMentionsHandlers.ts
54684
- var import_react257 = require("react");
54685
- var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0, import_react257.useCallback)(
54664
+ var import_react258 = require("react");
54665
+ var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0, import_react258.useCallback)(
54686
54666
  (event, mentioned_users) => {
54687
54667
  if (!onMentionsHover && !onMentionsClick || !(event.target instanceof HTMLElement)) {
54688
54668
  return;
@@ -54706,11 +54686,11 @@ var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0, import_react
54706
54686
  );
54707
54687
 
54708
54688
  // src/components/Channel/LoadingChannel.tsx
54709
- var import_react258 = __toESM(require("react"));
54710
- var LoadingMessage = () => /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-message" }, /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-message-avatar" }), /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-message-end" }, /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-message-sender" }), /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-message-last-row" }, /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-message-text" }), /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-message-date" }))));
54711
- var LoadingMessageInput = () => /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-message-input-row" }, /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-message-input" }), /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-message-send" }));
54712
- var LoadingChannelHeader = () => /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-header" }, /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-header-avatar" }), /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-header-end" }, /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-header-name" }), /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-header-info" })));
54713
- var LoadingChannel = () => /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel" }, /* @__PURE__ */ import_react258.default.createElement(LoadingChannelHeader, null), /* @__PURE__ */ import_react258.default.createElement("div", { className: "str-chat__loading-channel-message-list" }, Array.from(Array(3)).map((_, i) => /* @__PURE__ */ import_react258.default.createElement(LoadingMessage, { key: `loading-message-${i}` }))), /* @__PURE__ */ import_react258.default.createElement(LoadingMessageInput, null));
54689
+ var import_react259 = __toESM(require("react"));
54690
+ var LoadingMessage = () => /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message" }, /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-avatar" }), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-end" }, /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-sender" }), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-last-row" }, /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-text" }), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-date" }))));
54691
+ var LoadingMessageInput = () => /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-input-row" }, /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-input" }), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-send" }));
54692
+ var LoadingChannelHeader = () => /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-header" }, /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-header-avatar" }), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-header-end" }, /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-header-name" }), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-header-info" })));
54693
+ var LoadingChannel = () => /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel" }, /* @__PURE__ */ import_react259.default.createElement(LoadingChannelHeader, null), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-list" }, Array.from(Array(3)).map((_, i) => /* @__PURE__ */ import_react259.default.createElement(LoadingMessage, { key: `loading-message-${i}` }))), /* @__PURE__ */ import_react259.default.createElement(LoadingMessageInput, null));
54714
54694
 
54715
54695
  // src/components/Channel/hooks/useChannelContainerClasses.ts
54716
54696
  var useImageFlagEmojisOnWindowsClass = () => {
@@ -54897,7 +54877,7 @@ var ChannelContainer = ({
54897
54877
  customClasses
54898
54878
  });
54899
54879
  const className = (0, import_clsx66.default)(chatClass, theme, channelClass, additionalClassName);
54900
- return /* @__PURE__ */ import_react259.default.createElement("div", { id: CHANNEL_CONTAINER_ID, ...props, className }, children);
54880
+ return /* @__PURE__ */ import_react260.default.createElement("div", { id: CHANNEL_CONTAINER_ID, ...props, className }, children);
54901
54881
  };
54902
54882
  var UnMemoizedChannel = (props) => {
54903
54883
  const {
@@ -54909,15 +54889,15 @@ var UnMemoizedChannel = (props) => {
54909
54889
  const { channel: contextChannel, channelsQueryState } = useChatContext("Channel");
54910
54890
  const channel = propsChannel || contextChannel;
54911
54891
  if (channelsQueryState.queryInProgress === "reload" && LoadingIndicator2) {
54912
- return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react259.default.createElement(LoadingIndicator2, null));
54892
+ return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement(LoadingIndicator2, null));
54913
54893
  }
54914
54894
  if (channelsQueryState.error && LoadingErrorIndicator2) {
54915
- return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react259.default.createElement(LoadingErrorIndicator2, { error: channelsQueryState.error }));
54895
+ return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement(LoadingErrorIndicator2, { error: channelsQueryState.error }));
54916
54896
  }
54917
54897
  if (!channel?.cid) {
54918
- return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, null, EmptyPlaceholder2);
54898
+ return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, EmptyPlaceholder2);
54919
54899
  }
54920
- return /* @__PURE__ */ import_react259.default.createElement(ChannelInner, { ...props, channel, key: channel.cid });
54900
+ return /* @__PURE__ */ import_react260.default.createElement(ChannelInner, { ...props, channel, key: channel.cid });
54921
54901
  };
54922
54902
  var ChannelInner = (props) => {
54923
54903
  const {
@@ -54937,8 +54917,8 @@ var ChannelInner = (props) => {
54937
54917
  onMentionsHover,
54938
54918
  skipMessageDataMemoization
54939
54919
  } = props;
54940
- const channelQueryOptions = (0, import_react259.useMemo)(
54941
- () => (0, import_lodash20.default)(propChannelQueryOptions, {
54920
+ const channelQueryOptions = (0, import_react260.useMemo)(
54921
+ () => (0, import_lodash21.default)(propChannelQueryOptions, {
54942
54922
  messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE }
54943
54923
  }),
54944
54924
  [propChannelQueryOptions]
@@ -54948,12 +54928,12 @@ var ChannelInner = (props) => {
54948
54928
  const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
54949
54929
  const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
54950
54930
  const thread = useThreadContext();
54951
- const [channelConfig, setChannelConfig] = (0, import_react259.useState)(channel.getConfig());
54952
- const [notifications, setNotifications] = (0, import_react259.useState)([]);
54953
- const notificationTimeouts = (0, import_react259.useRef)([]);
54954
- const [channelUnreadUiState, _setChannelUnreadUiState] = (0, import_react259.useState)();
54955
- const channelReducer = (0, import_react259.useMemo)(() => makeChannelReducer(), []);
54956
- const [state, dispatch] = (0, import_react259.useReducer)(
54931
+ const [channelConfig, setChannelConfig] = (0, import_react260.useState)(channel.getConfig());
54932
+ const [notifications, setNotifications] = (0, import_react260.useState)([]);
54933
+ const notificationTimeouts = (0, import_react260.useRef)([]);
54934
+ const [channelUnreadUiState, _setChannelUnreadUiState] = (0, import_react260.useState)();
54935
+ const channelReducer = (0, import_react260.useMemo)(() => makeChannelReducer(), []);
54936
+ const [state, dispatch] = (0, import_react260.useReducer)(
54957
54937
  channelReducer,
54958
54938
  // channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
54959
54939
  // => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state
@@ -54965,14 +54945,14 @@ var ChannelInner = (props) => {
54965
54945
  );
54966
54946
  const jumpToMessageFromSearch = useSearchFocusedMessage();
54967
54947
  const isMounted = useIsMounted();
54968
- const originalTitle = (0, import_react259.useRef)("");
54969
- const lastRead = (0, import_react259.useRef)(void 0);
54970
- const online = (0, import_react259.useRef)(true);
54971
- const clearHighlightedMessageTimeoutId = (0, import_react259.useRef)(
54948
+ const originalTitle = (0, import_react260.useRef)("");
54949
+ const lastRead = (0, import_react260.useRef)(void 0);
54950
+ const online = (0, import_react260.useRef)(true);
54951
+ const clearHighlightedMessageTimeoutId = (0, import_react260.useRef)(
54972
54952
  null
54973
54953
  );
54974
54954
  const channelCapabilitiesArray = channel.data?.own_capabilities;
54975
- const throttledCopyStateFromChannel = (0, import_lodash21.default)(
54955
+ const throttledCopyStateFromChannel = (0, import_lodash22.default)(
54976
54956
  () => dispatch({ channel, type: "copyStateFromChannelOnEvent" }),
54977
54957
  500,
54978
54958
  {
@@ -54980,15 +54960,15 @@ var ChannelInner = (props) => {
54980
54960
  trailing: true
54981
54961
  }
54982
54962
  );
54983
- const setChannelUnreadUiState = (0, import_react259.useMemo)(
54984
- () => (0, import_lodash21.default)(_setChannelUnreadUiState, 200, {
54963
+ const setChannelUnreadUiState = (0, import_react260.useMemo)(
54964
+ () => (0, import_lodash22.default)(_setChannelUnreadUiState, 200, {
54985
54965
  leading: true,
54986
54966
  trailing: false
54987
54967
  }),
54988
54968
  []
54989
54969
  );
54990
- const markRead = (0, import_react259.useMemo)(
54991
- () => (0, import_lodash21.default)(
54970
+ const markRead = (0, import_react260.useMemo)(
54971
+ () => (0, import_lodash22.default)(
54992
54972
  async (options) => {
54993
54973
  const { updateChannelUiUnreadState = true } = options ?? {};
54994
54974
  if (channel.disconnected || !channelConfig?.read_events) {
@@ -55090,7 +55070,7 @@ var ChannelInner = (props) => {
55090
55070
  }
55091
55071
  throttledCopyStateFromChannel();
55092
55072
  };
55093
- (0, import_react259.useLayoutEffect)(() => {
55073
+ (0, import_react260.useLayoutEffect)(() => {
55094
55074
  let errored = false;
55095
55075
  let done = false;
55096
55076
  (async () => {
@@ -55156,12 +55136,12 @@ var ChannelInner = (props) => {
55156
55136
  channelConfig?.read_events,
55157
55137
  initializeOnMount
55158
55138
  ]);
55159
- (0, import_react259.useEffect)(() => {
55139
+ (0, import_react260.useEffect)(() => {
55160
55140
  if (!state.thread) return;
55161
55141
  const message = state.messages?.find((m) => m.id === state.thread?.id);
55162
55142
  if (message) dispatch({ message, type: "setThread" });
55163
55143
  }, [state.messages, state.thread]);
55164
- const handleHighlightedMessageChange = (0, import_react259.useCallback)(
55144
+ const handleHighlightedMessageChange = (0, import_react260.useCallback)(
55165
55145
  ({
55166
55146
  highlightDuration,
55167
55147
  highlightedMessageId
@@ -55184,16 +55164,16 @@ var ChannelInner = (props) => {
55184
55164
  },
55185
55165
  [channel, searchController]
55186
55166
  );
55187
- (0, import_react259.useEffect)(() => {
55167
+ (0, import_react260.useEffect)(() => {
55188
55168
  if (!jumpToMessageFromSearch?.id) return;
55189
55169
  handleHighlightedMessageChange({ highlightedMessageId: jumpToMessageFromSearch.id });
55190
55170
  }, [jumpToMessageFromSearch, handleHighlightedMessageChange]);
55191
- const addNotification = (0, import_react259.useMemo)(
55171
+ const addNotification = (0, import_react260.useMemo)(
55192
55172
  () => makeAddNotifications(setNotifications, notificationTimeouts.current),
55193
55173
  []
55194
55174
  );
55195
- const loadMoreFinished = (0, import_react259.useCallback)(
55196
- (0, import_lodash19.default)(
55175
+ const loadMoreFinished = (0, import_react260.useCallback)(
55176
+ (0, import_lodash20.default)(
55197
55177
  (hasMore, messages) => {
55198
55178
  if (!isMounted.current) return;
55199
55179
  dispatch({ hasMore, messages, type: "loadMoreFinished" });
@@ -55253,7 +55233,7 @@ var ChannelInner = (props) => {
55253
55233
  });
55254
55234
  return queryResponse.messages.length;
55255
55235
  };
55256
- const jumpToMessage = (0, import_react259.useCallback)(
55236
+ const jumpToMessage = (0, import_react260.useCallback)(
55257
55237
  async (messageId, messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
55258
55238
  dispatch({ loadingMore: true, type: "setLoadingMore" });
55259
55239
  await channel.state.loadMessageIntoState(messageId, void 0, messageLimit);
@@ -55265,14 +55245,14 @@ var ChannelInner = (props) => {
55265
55245
  },
55266
55246
  [channel, handleHighlightedMessageChange, loadMoreFinished]
55267
55247
  );
55268
- const jumpToLatestMessage = (0, import_react259.useCallback)(async () => {
55248
+ const jumpToLatestMessage = (0, import_react260.useCallback)(async () => {
55269
55249
  await channel.state.loadMessageIntoState("latest");
55270
55250
  loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
55271
55251
  dispatch({
55272
55252
  type: "jumpToLatestMessage"
55273
55253
  });
55274
55254
  }, [channel, loadMoreFinished]);
55275
- const jumpToFirstUnreadMessage = (0, import_react259.useCallback)(
55255
+ const jumpToFirstUnreadMessage = (0, import_react260.useCallback)(
55276
55256
  async (queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
55277
55257
  if (!channelUnreadUiState?.unread_messages) return;
55278
55258
  let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
@@ -55395,7 +55375,7 @@ var ChannelInner = (props) => {
55395
55375
  channelUnreadUiState
55396
55376
  ]
55397
55377
  );
55398
- const deleteMessage = (0, import_react259.useCallback)(
55378
+ const deleteMessage = (0, import_react260.useCallback)(
55399
55379
  async (message) => {
55400
55380
  if (!message?.id) {
55401
55381
  throw new Error("Cannot delete a message - missing message ID.");
@@ -55513,8 +55493,8 @@ var ChannelInner = (props) => {
55513
55493
  event?.preventDefault();
55514
55494
  dispatch({ type: "closeThread" });
55515
55495
  };
55516
- const loadMoreThreadFinished = (0, import_react259.useCallback)(
55517
- (0, import_lodash19.default)(
55496
+ const loadMoreThreadFinished = (0, import_react260.useCallback)(
55497
+ (0, import_lodash20.default)(
55518
55498
  (threadHasMore, threadMessages) => {
55519
55499
  dispatch({
55520
55500
  threadHasMore,
@@ -55568,7 +55548,7 @@ var ChannelInner = (props) => {
55568
55548
  videoAttachmentSizeHandler: props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration,
55569
55549
  watcher_count: state.watcherCount
55570
55550
  });
55571
- const channelActionContextValue = (0, import_react259.useMemo)(
55551
+ const channelActionContextValue = (0, import_react260.useMemo)(
55572
55552
  () => ({
55573
55553
  addNotification,
55574
55554
  closeThread,
@@ -55605,7 +55585,7 @@ var ChannelInner = (props) => {
55605
55585
  setChannelUnreadUiState
55606
55586
  ]
55607
55587
  );
55608
- const componentContextValue = (0, import_react259.useMemo)(
55588
+ const componentContextValue = (0, import_react260.useMemo)(
55609
55589
  () => ({
55610
55590
  Attachment: props.Attachment,
55611
55591
  AttachmentPreviewList: props.AttachmentPreviewList,
@@ -55659,6 +55639,7 @@ var ChannelInner = (props) => {
55659
55639
  StartRecordingAudioButton: props.StartRecordingAudioButton,
55660
55640
  StopAIGenerationButton: props.StopAIGenerationButton,
55661
55641
  StreamedMessageText: props.StreamedMessageText,
55642
+ TextareaComposer: props.TextareaComposer,
55662
55643
  ThreadHead: props.ThreadHead,
55663
55644
  ThreadHeader: props.ThreadHeader,
55664
55645
  ThreadStart: props.ThreadStart,
@@ -55721,6 +55702,7 @@ var ChannelInner = (props) => {
55721
55702
  props.StartRecordingAudioButton,
55722
55703
  props.StopAIGenerationButton,
55723
55704
  props.StreamedMessageText,
55705
+ props.TextareaComposer,
55724
55706
  props.ThreadHead,
55725
55707
  props.ThreadHeader,
55726
55708
  props.ThreadStart,
@@ -55735,26 +55717,26 @@ var ChannelInner = (props) => {
55735
55717
  typing
55736
55718
  });
55737
55719
  if (state.error) {
55738
- return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react259.default.createElement(LoadingErrorIndicator2, { error: state.error }));
55720
+ return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement(LoadingErrorIndicator2, { error: state.error }));
55739
55721
  }
55740
55722
  if (state.loading) {
55741
- return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react259.default.createElement(LoadingIndicator2, null));
55723
+ return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement(LoadingIndicator2, null));
55742
55724
  }
55743
55725
  if (!channel.watch) {
55744
- return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react259.default.createElement("div", null, t("Channel Missing")));
55726
+ return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement("div", null, t("Channel Missing")));
55745
55727
  }
55746
- return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, { className: windowsEmojiClass }, /* @__PURE__ */ import_react259.default.createElement(ChannelStateProvider, { value: channelStateContextValue }, /* @__PURE__ */ import_react259.default.createElement(ChannelActionProvider, { value: channelActionContextValue }, /* @__PURE__ */ import_react259.default.createElement(WithComponents, { overrides: componentContextValue }, /* @__PURE__ */ import_react259.default.createElement(TypingProvider, { value: typingContextValue }, /* @__PURE__ */ import_react259.default.createElement("div", { className: (0, import_clsx66.default)(chatContainerClass) }, children))))));
55728
+ return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, { className: windowsEmojiClass }, /* @__PURE__ */ import_react260.default.createElement(ChannelStateProvider, { value: channelStateContextValue }, /* @__PURE__ */ import_react260.default.createElement(ChannelActionProvider, { value: channelActionContextValue }, /* @__PURE__ */ import_react260.default.createElement(WithComponents, { overrides: componentContextValue }, /* @__PURE__ */ import_react260.default.createElement(TypingProvider, { value: typingContextValue }, /* @__PURE__ */ import_react260.default.createElement("div", { className: (0, import_clsx66.default)(chatContainerClass) }, children))))));
55747
55729
  };
55748
- var Channel = import_react259.default.memo(UnMemoizedChannel);
55730
+ var Channel = import_react260.default.memo(UnMemoizedChannel);
55749
55731
 
55750
55732
  // src/components/ChannelHeader/ChannelHeader.tsx
55751
- var import_react261 = __toESM(require("react"));
55733
+ var import_react262 = __toESM(require("react"));
55752
55734
 
55753
55735
  // src/components/ChannelHeader/icons.tsx
55754
- var import_react260 = __toESM(require("react"));
55736
+ var import_react261 = __toESM(require("react"));
55755
55737
  var MenuIcon2 = ({ title }) => {
55756
55738
  const { t } = useTranslationContext("MenuIcon");
55757
- return /* @__PURE__ */ import_react260.default.createElement("svg", { "data-testid": "menu-icon", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react260.default.createElement("title", null, title ?? t("Menu")), /* @__PURE__ */ import_react260.default.createElement(
55739
+ return /* @__PURE__ */ import_react261.default.createElement("svg", { "data-testid": "menu-icon", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react261.default.createElement("title", null, title ?? t("Menu")), /* @__PURE__ */ import_react261.default.createElement(
55758
55740
  "path",
55759
55741
  {
55760
55742
  d: "M0 88C0 74.75 10.75 64 24 64H424C437.3 64 448 74.75 448 88C448 101.3 437.3 112 424 112H24C10.75 112 0 101.3 0 88zM0 248C0 234.7 10.75 224 24 224H424C437.3 224 448 234.7 448 248C448 261.3 437.3 272 424 272H24C10.75 272 0 261.3 0 248zM424 432H24C10.75 432 0 421.3 0 408C0 394.7 10.75 384 24 384H424C437.3 384 448 394.7 448 408C448 421.3 437.3 432 424 432z",
@@ -55781,15 +55763,15 @@ var ChannelHeader = (props) => {
55781
55763
  overrideTitle
55782
55764
  });
55783
55765
  const { member_count, subtitle } = channel?.data || {};
55784
- return /* @__PURE__ */ import_react261.default.createElement("div", { className: "str-chat__channel-header" }, /* @__PURE__ */ import_react261.default.createElement(
55766
+ return /* @__PURE__ */ import_react262.default.createElement("div", { className: "str-chat__channel-header" }, /* @__PURE__ */ import_react262.default.createElement(
55785
55767
  "button",
55786
55768
  {
55787
55769
  "aria-label": t("aria/Menu"),
55788
55770
  className: "str-chat__header-hamburger",
55789
55771
  onClick: openMobileNav
55790
55772
  },
55791
- /* @__PURE__ */ import_react261.default.createElement(MenuIcon3, null)
55792
- ), /* @__PURE__ */ import_react261.default.createElement(
55773
+ /* @__PURE__ */ import_react262.default.createElement(MenuIcon3, null)
55774
+ ), /* @__PURE__ */ import_react262.default.createElement(
55793
55775
  Avatar2,
55794
55776
  {
55795
55777
  className: "str-chat__avatar--channel-header",
@@ -55797,36 +55779,36 @@ var ChannelHeader = (props) => {
55797
55779
  image: displayImage,
55798
55780
  name: displayTitle
55799
55781
  }
55800
- ), /* @__PURE__ */ import_react261.default.createElement("div", { className: "str-chat__channel-header-end" }, /* @__PURE__ */ import_react261.default.createElement("p", { className: "str-chat__channel-header-title" }, displayTitle, " ", live && /* @__PURE__ */ import_react261.default.createElement("span", { className: "str-chat__header-livestream-livelabel" }, t("live"))), subtitle && /* @__PURE__ */ import_react261.default.createElement("p", { className: "str-chat__channel-header-subtitle" }, subtitle), /* @__PURE__ */ import_react261.default.createElement("p", { className: "str-chat__channel-header-info" }, !live && !!member_count && member_count > 0 && /* @__PURE__ */ import_react261.default.createElement(import_react261.default.Fragment, null, t("{{ memberCount }} members", {
55782
+ ), /* @__PURE__ */ import_react262.default.createElement("div", { className: "str-chat__channel-header-end" }, /* @__PURE__ */ import_react262.default.createElement("p", { className: "str-chat__channel-header-title" }, displayTitle, " ", live && /* @__PURE__ */ import_react262.default.createElement("span", { className: "str-chat__header-livestream-livelabel" }, t("live"))), subtitle && /* @__PURE__ */ import_react262.default.createElement("p", { className: "str-chat__channel-header-subtitle" }, subtitle), /* @__PURE__ */ import_react262.default.createElement("p", { className: "str-chat__channel-header-info" }, !live && !!member_count && member_count > 0 && /* @__PURE__ */ import_react262.default.createElement(import_react262.default.Fragment, null, t("{{ memberCount }} members", {
55801
55783
  memberCount: member_count
55802
55784
  }), ",", " "), t("{{ watcherCount }} online", { watcherCount: watcher_count }))));
55803
55785
  };
55804
55786
 
55805
55787
  // src/components/Chat/Chat.tsx
55806
- var import_react265 = __toESM(require("react"));
55788
+ var import_react266 = __toESM(require("react"));
55807
55789
  var import_stream_chat12 = require("stream-chat");
55808
55790
 
55809
55791
  // src/components/Chat/hooks/useChat.ts
55810
- var import_react262 = require("react");
55792
+ var import_react263 = require("react");
55811
55793
  var useChat = ({
55812
55794
  client,
55813
55795
  defaultLanguage = "en",
55814
55796
  i18nInstance,
55815
55797
  initialNavOpen
55816
55798
  }) => {
55817
- const [translators, setTranslators] = (0, import_react262.useState)({
55799
+ const [translators, setTranslators] = (0, import_react263.useState)({
55818
55800
  t: (key) => key,
55819
55801
  tDateTimeParser: defaultDateTimeParser,
55820
55802
  userLanguage: "en"
55821
55803
  });
55822
- const [channel, setChannel] = (0, import_react262.useState)();
55823
- const [mutes, setMutes] = (0, import_react262.useState)([]);
55824
- const [navOpen, setNavOpen] = (0, import_react262.useState)(initialNavOpen);
55825
- const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0, import_react262.useState)({});
55804
+ const [channel, setChannel] = (0, import_react263.useState)();
55805
+ const [mutes, setMutes] = (0, import_react263.useState)([]);
55806
+ const [navOpen, setNavOpen] = (0, import_react263.useState)(initialNavOpen);
55807
+ const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0, import_react263.useState)({});
55826
55808
  const clientMutes = client.user?.mutes ?? [];
55827
55809
  const closeMobileNav = () => setNavOpen(false);
55828
55810
  const openMobileNav = () => setTimeout(() => setNavOpen(true), 100);
55829
- const appSettings = (0, import_react262.useRef)(null);
55811
+ const appSettings = (0, import_react263.useRef)(null);
55830
55812
  const getAppSettings = () => {
55831
55813
  if (appSettings.current) {
55832
55814
  return appSettings.current;
@@ -55834,9 +55816,9 @@ var useChat = ({
55834
55816
  appSettings.current = client.getAppSettings();
55835
55817
  return appSettings.current;
55836
55818
  };
55837
- (0, import_react262.useEffect)(() => {
55819
+ (0, import_react263.useEffect)(() => {
55838
55820
  if (!client) return;
55839
- const version = "13.0.0-rc.2";
55821
+ const version = "13.0.0";
55840
55822
  const userAgent = client.getUserAgent();
55841
55823
  if (!userAgent.includes("stream-chat-react")) {
55842
55824
  client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -55848,7 +55830,7 @@ var useChat = ({
55848
55830
  client.polls.unregisterSubscriptions();
55849
55831
  };
55850
55832
  }, [client]);
55851
- (0, import_react262.useEffect)(() => {
55833
+ (0, import_react263.useEffect)(() => {
55852
55834
  setMutes(clientMutes);
55853
55835
  const handleEvent = (event) => {
55854
55836
  setMutes(event.me?.mutes || []);
@@ -55856,7 +55838,7 @@ var useChat = ({
55856
55838
  client.on("notification.mutes_updated", handleEvent);
55857
55839
  return () => client.off("notification.mutes_updated", handleEvent);
55858
55840
  }, [clientMutes?.length]);
55859
- (0, import_react262.useEffect)(() => {
55841
+ (0, import_react263.useEffect)(() => {
55860
55842
  let userLanguage = client.user?.language;
55861
55843
  if (!userLanguage) {
55862
55844
  const browserLanguage = window.navigator.language.slice(0, 2);
@@ -55873,7 +55855,7 @@ var useChat = ({
55873
55855
  });
55874
55856
  });
55875
55857
  }, [i18nInstance]);
55876
- const setActiveChannel = (0, import_react262.useCallback)(
55858
+ const setActiveChannel = (0, import_react263.useCallback)(
55877
55859
  async (activeChannel, watchers = {}, event) => {
55878
55860
  if (event && event.preventDefault) event.preventDefault();
55879
55861
  if (activeChannel && Object.keys(watchers).length) {
@@ -55884,7 +55866,7 @@ var useChat = ({
55884
55866
  },
55885
55867
  []
55886
55868
  );
55887
- (0, import_react262.useEffect)(() => {
55869
+ (0, import_react263.useEffect)(() => {
55888
55870
  setLatestMessageDatesByChannels({});
55889
55871
  }, [client.user?.id]);
55890
55872
  return {
@@ -55901,7 +55883,7 @@ var useChat = ({
55901
55883
  };
55902
55884
 
55903
55885
  // src/components/Chat/hooks/useCreateChatContext.ts
55904
- var import_react263 = require("react");
55886
+ var import_react264 = require("react");
55905
55887
  var useCreateChatContext = (value) => {
55906
55888
  const {
55907
55889
  channel,
@@ -55926,7 +55908,7 @@ var useCreateChatContext = (value) => {
55926
55908
  const clientValues = `${client.clientID}${Object.keys(client.activeChannels).length}${Object.keys(client.listeners).length}${client.mutedChannels.length}
55927
55909
  ${client.user?.id}`;
55928
55910
  const mutedUsersLength = mutes.length;
55929
- const chatContext = (0, import_react263.useMemo)(
55911
+ const chatContext = (0, import_react264.useMemo)(
55930
55912
  () => ({
55931
55913
  channel,
55932
55914
  channelsQueryState,
@@ -55961,10 +55943,10 @@ var useCreateChatContext = (value) => {
55961
55943
  };
55962
55944
 
55963
55945
  // src/components/Chat/hooks/useChannelsQueryState.ts
55964
- var import_react264 = require("react");
55946
+ var import_react265 = require("react");
55965
55947
  var useChannelsQueryState = () => {
55966
- const [error, setError] = (0, import_react264.useState)(null);
55967
- const [queryInProgress, setQueryInProgress] = (0, import_react264.useState)("uninitialized");
55948
+ const [error, setError] = (0, import_react265.useState)(null);
55949
+ const [queryInProgress, setQueryInProgress] = (0, import_react265.useState)("uninitialized");
55968
55950
  return {
55969
55951
  error,
55970
55952
  queryInProgress,
@@ -55999,7 +55981,7 @@ var Chat = (props) => {
55999
55981
  translators
56000
55982
  } = useChat({ client, defaultLanguage, i18nInstance, initialNavOpen });
56001
55983
  const channelsQueryState = useChannelsQueryState();
56002
- const searchController = (0, import_react265.useMemo)(
55984
+ const searchController = (0, import_react266.useMemo)(
56003
55985
  () => customChannelSearchController ?? new import_stream_chat12.SearchController({
56004
55986
  sources: [
56005
55987
  new import_stream_chat12.ChannelSearchSource(client),
@@ -56027,11 +56009,11 @@ var Chat = (props) => {
56027
56009
  useImageFlagEmojisOnWindows
56028
56010
  });
56029
56011
  if (!translators.t) return null;
56030
- return /* @__PURE__ */ import_react265.default.createElement(ChatProvider, { value: chatContextValue }, /* @__PURE__ */ import_react265.default.createElement(TranslationProvider, { value: translators }, children));
56012
+ return /* @__PURE__ */ import_react266.default.createElement(ChatProvider, { value: chatContextValue }, /* @__PURE__ */ import_react266.default.createElement(TranslationProvider, { value: translators }, children));
56031
56013
  };
56032
56014
 
56033
56015
  // src/components/Chat/hooks/useCreateChatClient.ts
56034
- var import_react266 = require("react");
56016
+ var import_react267 = require("react");
56035
56017
  var import_stream_chat13 = require("stream-chat");
56036
56018
  var useCreateChatClient = ({
56037
56019
  apiKey,
@@ -56039,13 +56021,13 @@ var useCreateChatClient = ({
56039
56021
  tokenOrProvider,
56040
56022
  userData
56041
56023
  }) => {
56042
- const [chatClient, setChatClient] = (0, import_react266.useState)(null);
56043
- const [cachedUserData, setCachedUserData] = (0, import_react266.useState)(userData);
56024
+ const [chatClient, setChatClient] = (0, import_react267.useState)(null);
56025
+ const [cachedUserData, setCachedUserData] = (0, import_react267.useState)(userData);
56044
56026
  if (userData.id !== cachedUserData.id) {
56045
56027
  setCachedUserData(userData);
56046
56028
  }
56047
- const [cachedOptions] = (0, import_react266.useState)(options);
56048
- (0, import_react266.useEffect)(() => {
56029
+ const [cachedOptions] = (0, import_react267.useState)(options);
56030
+ (0, import_react267.useEffect)(() => {
56049
56031
  const client = new import_stream_chat13.StreamChat(apiKey, void 0, cachedOptions);
56050
56032
  let didUserConnectInterrupt = false;
56051
56033
  const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
@@ -56063,12 +56045,12 @@ var useCreateChatClient = ({
56063
56045
  };
56064
56046
 
56065
56047
  // src/components/Window/Window.tsx
56066
- var import_react267 = __toESM(require("react"));
56048
+ var import_react268 = __toESM(require("react"));
56067
56049
  var import_clsx67 = __toESM(require("clsx"));
56068
56050
  var UnMemoizedWindow = (props) => {
56069
56051
  const { children, thread: propThread } = props;
56070
56052
  const { thread: contextThread } = useChannelStateContext("Window");
56071
- return /* @__PURE__ */ import_react267.default.createElement(
56053
+ return /* @__PURE__ */ import_react268.default.createElement(
56072
56054
  "div",
56073
56055
  {
56074
56056
  className: (0, import_clsx67.default)("str-chat__main-panel", {
@@ -56078,7 +56060,7 @@ var UnMemoizedWindow = (props) => {
56078
56060
  children
56079
56061
  );
56080
56062
  };
56081
- var Window = import_react267.default.memo(UnMemoizedWindow);
56063
+ var Window = import_react268.default.memo(UnMemoizedWindow);
56082
56064
  // Annotate the CommonJS export names for ESM import in node:
56083
56065
  0 && (module.exports = {
56084
56066
  ACTIONS_NOT_WORKING_IN_THREAD,