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.
- package/dist/components/Channel/Channel.d.ts +1 -1
- package/dist/components/Channel/Channel.js +2 -0
- package/dist/components/Chat/hooks/useChat.js +1 -1
- package/dist/components/MessageInput/EditMessageForm.js +1 -1
- package/dist/components/MessageInput/MessageInput.d.ts +1 -3
- package/dist/components/MessageInput/MessageInputFlat.js +2 -2
- package/dist/components/MessageInput/hooks/useCreateMessageInputContext.js +1 -3
- package/dist/components/MessageInput/hooks/useMessageInputControls.d.ts +0 -1
- package/dist/components/MessageInput/hooks/useMessageInputControls.js +3 -4
- package/dist/components/MessageInput/hooks/usePasteHandler.d.ts +1 -1
- package/dist/components/MessageInput/hooks/usePasteHandler.js +4 -4
- package/dist/components/MessageInput/hooks/{useMessageInputText.d.ts → useTextareaRef.d.ts} +1 -2
- package/dist/components/MessageInput/hooks/useTextareaRef.js +14 -0
- package/dist/components/TextareaComposer/TextareaComposer.d.ts +3 -5
- package/dist/components/TextareaComposer/TextareaComposer.js +13 -8
- package/dist/context/ComponentContext.d.ts +3 -3
- package/dist/experimental/index.browser.cjs.map +2 -2
- package/dist/experimental/index.node.cjs.map +2 -2
- package/dist/index.browser.cjs +264 -282
- package/dist/index.browser.cjs.map +4 -4
- package/dist/index.node.cjs +264 -282
- package/dist/index.node.cjs.map +4 -4
- package/dist/plugins/Emojis/EmojiPicker.js +9 -4
- package/dist/plugins/Emojis/index.browser.cjs +208 -96
- package/dist/plugins/Emojis/index.browser.cjs.map +4 -4
- package/dist/plugins/Emojis/index.node.cjs +208 -96
- package/dist/plugins/Emojis/index.node.cjs.map +4 -4
- package/dist/plugins/Emojis/middleware/textComposerEmojiMiddleware.d.ts +4 -48
- package/dist/plugins/Emojis/middleware/textComposerEmojiMiddleware.js +52 -58
- package/package.json +3 -3
- package/dist/components/MessageInput/hooks/useMessageInputText.js +0 -44
package/dist/index.node.cjs
CHANGED
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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/
|
|
52476
|
+
// src/components/MessageInput/hooks/useTextareaRef.ts
|
|
52477
52477
|
var import_react223 = require("react");
|
|
52478
|
-
var
|
|
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 = (
|
|
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,
|
|
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 {
|
|
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(
|
|
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
|
|
52785
|
+
var import_react247 = __toESM(require("react"));
|
|
52819
52786
|
|
|
52820
52787
|
// src/components/MessageInput/MessageInput.tsx
|
|
52821
|
-
var
|
|
52788
|
+
var import_react246 = __toESM(require("react"));
|
|
52822
52789
|
|
|
52823
52790
|
// src/components/MessageInput/MessageInputFlat.tsx
|
|
52824
|
-
var
|
|
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
|
|
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
|
-
|
|
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 =
|
|
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
|
-
...
|
|
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,
|
|
53239
|
-
const [focusedItemIndex, setFocusedItemIndex] = (0,
|
|
53240
|
-
const [isComposing, setIsComposing] = (0,
|
|
53241
|
-
const changeHandler = (0,
|
|
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,
|
|
53226
|
+
const onCompositionEnd = (0, import_react240.useCallback)(() => {
|
|
53259
53227
|
setIsComposing(false);
|
|
53260
53228
|
}, []);
|
|
53261
|
-
const onCompositionStart = (0,
|
|
53229
|
+
const onCompositionStart = (0, import_react240.useCallback)(() => {
|
|
53262
53230
|
setIsComposing(true);
|
|
53263
53231
|
}, []);
|
|
53264
|
-
const keyDownHandler = (0,
|
|
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,
|
|
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.
|
|
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,
|
|
53316
|
+
(0, import_react240.useEffect)(() => {
|
|
53335
53317
|
if (textComposer.suggestions) {
|
|
53336
53318
|
setFocusedItemIndex(0);
|
|
53337
53319
|
}
|
|
53338
53320
|
}, [textComposer.suggestions]);
|
|
53339
|
-
return /* @__PURE__ */
|
|
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__ */
|
|
53334
|
+
/* @__PURE__ */ import_react240.default.createElement(
|
|
53353
53335
|
import_react_textarea_autosize.default,
|
|
53354
53336
|
{
|
|
53355
|
-
...
|
|
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
|
|
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__ */
|
|
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
|
|
53376
|
+
var import_react242 = __toESM(require("react"));
|
|
53393
53377
|
|
|
53394
53378
|
// src/components/AIStateIndicator/hooks/useAIState.ts
|
|
53395
|
-
var
|
|
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,
|
|
53405
|
-
(0,
|
|
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__ */
|
|
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
|
|
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 =
|
|
53433
|
+
var DragAndDropUploadContext = import_react243.default.createContext({
|
|
53450
53434
|
subscribeToDrop: null
|
|
53451
53435
|
});
|
|
53452
|
-
var useDragAndDropUploadContext = () => (0,
|
|
53436
|
+
var useDragAndDropUploadContext = () => (0, import_react243.useContext)(DragAndDropUploadContext);
|
|
53453
53437
|
var useRegisterDropHandlers = () => {
|
|
53454
53438
|
const { subscribeToDrop } = useDragAndDropUploadContext();
|
|
53455
53439
|
const messageComposer = useMessageComposer();
|
|
53456
|
-
(0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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__ */
|
|
53492
|
+
return /* @__PURE__ */ import_react243.default.createElement(Component2, { className }, children);
|
|
53509
53493
|
}
|
|
53510
|
-
return /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
53525
|
-
isDragReject && /* @__PURE__ */
|
|
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
|
-
|
|
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,
|
|
53541
|
+
const stopGenerating = (0, import_react244.useCallback)(() => channel?.stopAIResponse(), [channel]);
|
|
53557
53542
|
const [
|
|
53558
53543
|
showRecordingPermissionDeniedNotification,
|
|
53559
53544
|
setShowRecordingPermissionDeniedNotification
|
|
53560
|
-
] = (0,
|
|
53561
|
-
const closePermissionDeniedNotification = (0,
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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,
|
|
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,
|
|
53658
|
+
(0, import_react246.useEffect)(
|
|
53678
53659
|
() => () => {
|
|
53679
53660
|
messageComposer.createDraft();
|
|
53680
53661
|
},
|
|
53681
53662
|
[messageComposer]
|
|
53682
53663
|
);
|
|
53683
|
-
(0,
|
|
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__ */
|
|
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__ */
|
|
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 =
|
|
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__ */
|
|
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,
|
|
53707
|
+
const cancel = (0, import_react247.useCallback)(() => {
|
|
53727
53708
|
clearEditingState?.();
|
|
53728
53709
|
messageComposer.restore();
|
|
53729
53710
|
}, [clearEditingState, messageComposer]);
|
|
53730
|
-
(0,
|
|
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__ */
|
|
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__ */
|
|
53745
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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,
|
|
53743
|
+
const onEditModalClose = (0, import_react247.useCallback)(() => {
|
|
53763
53744
|
clearEditingState();
|
|
53764
53745
|
messageComposer.restore();
|
|
53765
53746
|
}, [clearEditingState, messageComposer]);
|
|
53766
|
-
return /* @__PURE__ */
|
|
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__ */
|
|
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,
|
|
53771
|
+
var UploadButton = (0, import_react248.forwardRef)(function UploadButton2({ onFileChange, resetOnChange = true, ...rest }, ref) {
|
|
53792
53772
|
const handleInputChange = useHandleFileChangeWrapper(resetOnChange, onFileChange);
|
|
53793
|
-
return /* @__PURE__ */
|
|
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,
|
|
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,
|
|
53811
|
-
const onFileChange = (0,
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
53885
|
+
)))), /* @__PURE__ */ import_react249.default.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 34 }));
|
|
53906
53886
|
};
|
|
53907
|
-
var VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? /* @__PURE__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
53994
|
+
return /* @__PURE__ */ import_react250.default.createElement(UnableToRenderCard, null);
|
|
54015
53995
|
}
|
|
54016
|
-
return /* @__PURE__ */
|
|
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__ */
|
|
54022
|
-
/* @__PURE__ */
|
|
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 =
|
|
54005
|
+
var Card = import_react250.default.memo(UnMemoizedCard);
|
|
54026
54006
|
|
|
54027
54007
|
// src/components/Attachment/FileAttachment.tsx
|
|
54028
|
-
var
|
|
54029
|
-
var UnMemoizedFileAttachment = ({ attachment }) => /* @__PURE__ */
|
|
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__ */
|
|
54037
|
-
var FileAttachment =
|
|
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
|
|
54022
|
+
var import_react252 = __toESM(require("react"));
|
|
54043
54023
|
var UnsupportedAttachment = ({ attachment }) => {
|
|
54044
54024
|
const { t } = useTranslationContext("UnsupportedAttachment");
|
|
54045
|
-
return /* @__PURE__ */
|
|
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__ */
|
|
54052
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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,
|
|
54103
|
+
const imageElements = (0, import_react253.useRef)([]);
|
|
54124
54104
|
const { imageAttachmentSizeHandler } = useChannelStateContext();
|
|
54125
|
-
const [attachmentConfigurations, setAttachmentConfigurations] = (0,
|
|
54126
|
-
(0,
|
|
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__ */
|
|
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,
|
|
54128
|
+
const imageElement = (0, import_react253.useRef)(null);
|
|
54149
54129
|
const { imageAttachmentSizeHandler } = useChannelStateContext();
|
|
54150
|
-
const [attachmentConfiguration, setAttachmentConfiguration] = (0,
|
|
54151
|
-
(0,
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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,
|
|
54196
|
-
const [attachmentConfiguration, setAttachmentConfiguration] = (0,
|
|
54197
|
-
(0,
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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,
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
|
54319
|
+
var import_react260 = __toESM(require("react"));
|
|
54340
54320
|
var import_clsx66 = __toESM(require("clsx"));
|
|
54341
|
-
var
|
|
54342
|
-
var
|
|
54343
|
-
var
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
54651
|
+
var import_react257 = require("react");
|
|
54672
54652
|
var useIsMounted = () => {
|
|
54673
|
-
const isMounted = (0,
|
|
54674
|
-
(0,
|
|
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
|
|
54685
|
-
var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0,
|
|
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
|
|
54710
|
-
var LoadingMessage = () => /* @__PURE__ */
|
|
54711
|
-
var LoadingMessageInput = () => /* @__PURE__ */
|
|
54712
|
-
var LoadingChannelHeader = () => /* @__PURE__ */
|
|
54713
|
-
var LoadingChannel = () => /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
54898
|
+
return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, EmptyPlaceholder2);
|
|
54919
54899
|
}
|
|
54920
|
-
return /* @__PURE__ */
|
|
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,
|
|
54941
|
-
() => (0,
|
|
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,
|
|
54952
|
-
const [notifications, setNotifications] = (0,
|
|
54953
|
-
const notificationTimeouts = (0,
|
|
54954
|
-
const [channelUnreadUiState, _setChannelUnreadUiState] = (0,
|
|
54955
|
-
const channelReducer = (0,
|
|
54956
|
-
const [state, dispatch] = (0,
|
|
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,
|
|
54969
|
-
const lastRead = (0,
|
|
54970
|
-
const online = (0,
|
|
54971
|
-
const clearHighlightedMessageTimeoutId = (0,
|
|
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,
|
|
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,
|
|
54984
|
-
() => (0,
|
|
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,
|
|
54991
|
-
() => (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
55171
|
+
const addNotification = (0, import_react260.useMemo)(
|
|
55192
55172
|
() => makeAddNotifications(setNotifications, notificationTimeouts.current),
|
|
55193
55173
|
[]
|
|
55194
55174
|
);
|
|
55195
|
-
const loadMoreFinished = (0,
|
|
55196
|
-
(0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
55517
|
-
(0,
|
|
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,
|
|
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,
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
55726
|
+
return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement("div", null, t("Channel Missing")));
|
|
55745
55727
|
}
|
|
55746
|
-
return /* @__PURE__ */
|
|
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 =
|
|
55730
|
+
var Channel = import_react260.default.memo(UnMemoizedChannel);
|
|
55749
55731
|
|
|
55750
55732
|
// src/components/ChannelHeader/ChannelHeader.tsx
|
|
55751
|
-
var
|
|
55733
|
+
var import_react262 = __toESM(require("react"));
|
|
55752
55734
|
|
|
55753
55735
|
// src/components/ChannelHeader/icons.tsx
|
|
55754
|
-
var
|
|
55736
|
+
var import_react261 = __toESM(require("react"));
|
|
55755
55737
|
var MenuIcon2 = ({ title }) => {
|
|
55756
55738
|
const { t } = useTranslationContext("MenuIcon");
|
|
55757
|
-
return /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
55792
|
-
), /* @__PURE__ */
|
|
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__ */
|
|
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
|
|
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
|
|
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,
|
|
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,
|
|
55823
|
-
const [mutes, setMutes] = (0,
|
|
55824
|
-
const [navOpen, setNavOpen] = (0,
|
|
55825
|
-
const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0,
|
|
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,
|
|
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,
|
|
55819
|
+
(0, import_react263.useEffect)(() => {
|
|
55838
55820
|
if (!client) return;
|
|
55839
|
-
const version = "13.0.0
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
55946
|
+
var import_react265 = require("react");
|
|
55965
55947
|
var useChannelsQueryState = () => {
|
|
55966
|
-
const [error, setError] = (0,
|
|
55967
|
-
const [queryInProgress, setQueryInProgress] = (0,
|
|
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,
|
|
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__ */
|
|
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
|
|
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,
|
|
56043
|
-
const [cachedUserData, setCachedUserData] = (0,
|
|
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,
|
|
56048
|
-
(0,
|
|
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
|
|
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__ */
|
|
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 =
|
|
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,
|