stream-chat-react 13.0.0-rc.1 → 13.0.0-rc.2
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/Chat/hooks/useChat.js +1 -1
- package/dist/components/TextareaComposer/SuggestionList/CommandItem.d.ts +2 -8
- package/dist/components/TextareaComposer/SuggestionList/SuggestionList.d.ts +6 -8
- package/dist/components/TextareaComposer/SuggestionList/SuggestionList.js +7 -6
- package/dist/components/TextareaComposer/SuggestionList/SuggestionListItem.d.ts +10 -10
- package/dist/components/TextareaComposer/SuggestionList/SuggestionListItem.js +1 -2
- package/dist/index.browser.cjs +239 -239
- package/dist/index.browser.cjs.map +2 -2
- package/dist/index.node.cjs +239 -239
- package/dist/index.node.cjs.map +2 -2
- package/package.json +3 -3
package/dist/index.browser.cjs
CHANGED
|
@@ -17666,11 +17666,11 @@ __export(src_exports, {
|
|
|
17666
17666
|
module.exports = __toCommonJS(src_exports);
|
|
17667
17667
|
|
|
17668
17668
|
// src/components/Attachment/Attachment.tsx
|
|
17669
|
-
var
|
|
17669
|
+
var import_react254 = __toESM(require("react"));
|
|
17670
17670
|
var import_stream_chat10 = require("stream-chat");
|
|
17671
17671
|
|
|
17672
17672
|
// src/components/Attachment/AttachmentContainer.tsx
|
|
17673
|
-
var
|
|
17673
|
+
var import_react253 = __toESM(require("react"));
|
|
17674
17674
|
var import_react_player2 = __toESM(require("react-player"));
|
|
17675
17675
|
var import_clsx65 = __toESM(require("clsx"));
|
|
17676
17676
|
var linkify = __toESM(require("linkifyjs"));
|
|
@@ -18915,7 +18915,7 @@ var UnMemoizedAudio = (props) => {
|
|
|
18915
18915
|
var Audio = import_react29.default.memo(UnMemoizedAudio);
|
|
18916
18916
|
|
|
18917
18917
|
// src/components/Attachment/VoiceRecording.tsx
|
|
18918
|
-
var
|
|
18918
|
+
var import_react249 = __toESM(require("react"));
|
|
18919
18919
|
|
|
18920
18920
|
// src/components/ReactFileUtilities/FileIcon/FileIcon.tsx
|
|
18921
18921
|
var import_react31 = __toESM(require("react"));
|
|
@@ -19878,7 +19878,7 @@ var FileIcon = (props) => {
|
|
|
19878
19878
|
// src/components/ReactFileUtilities/UploadButton.tsx
|
|
19879
19879
|
var import_clsx63 = __toESM(require("clsx"));
|
|
19880
19880
|
var import_nanoid5 = require("nanoid");
|
|
19881
|
-
var
|
|
19881
|
+
var import_react248 = __toESM(require("react"));
|
|
19882
19882
|
|
|
19883
19883
|
// src/components/ReactFileUtilities/utils.ts
|
|
19884
19884
|
var import_react32 = require("react");
|
|
@@ -48138,13 +48138,13 @@ var CooldownTimer = ({ cooldownInterval }) => {
|
|
|
48138
48138
|
};
|
|
48139
48139
|
|
|
48140
48140
|
// src/components/MessageInput/EditMessageForm.tsx
|
|
48141
|
-
var
|
|
48141
|
+
var import_react247 = __toESM(require("react"));
|
|
48142
48142
|
|
|
48143
48143
|
// src/components/MessageInput/MessageInput.tsx
|
|
48144
|
-
var
|
|
48144
|
+
var import_react246 = __toESM(require("react"));
|
|
48145
48145
|
|
|
48146
48146
|
// src/components/MessageInput/MessageInputFlat.tsx
|
|
48147
|
-
var
|
|
48147
|
+
var import_react244 = __toESM(require("react"));
|
|
48148
48148
|
|
|
48149
48149
|
// src/components/MessageInput/SendButton.tsx
|
|
48150
48150
|
var import_react231 = __toESM(require("react"));
|
|
@@ -48354,23 +48354,22 @@ var EmoticonItem = (props) => {
|
|
|
48354
48354
|
|
|
48355
48355
|
// src/components/TextareaComposer/SuggestionList/SuggestionList.tsx
|
|
48356
48356
|
var import_clsx60 = __toESM(require("clsx"));
|
|
48357
|
-
var
|
|
48357
|
+
var import_react239 = __toESM(require("react"));
|
|
48358
48358
|
|
|
48359
48359
|
// src/components/TextareaComposer/SuggestionList/SuggestionListItem.tsx
|
|
48360
48360
|
var import_clsx58 = __toESM(require("clsx"));
|
|
48361
|
-
var import_react237 = require("react");
|
|
48362
|
-
var
|
|
48363
|
-
var SuggestionListItem = import_react238.default.forwardRef(function SuggestionListItem2({ className, component: Component2, focused, item: item2, onMouseEnter }, innerRef) {
|
|
48361
|
+
var import_react237 = __toESM(require("react"));
|
|
48362
|
+
var SuggestionListItem = import_react237.default.forwardRef(function SuggestionListItem2({ className, component: Component2, focused, item: item2, onMouseEnter }, innerRef) {
|
|
48364
48363
|
const { textComposer } = useMessageComposer();
|
|
48365
|
-
const containerRef = (0,
|
|
48366
|
-
const handleSelect = (0,
|
|
48364
|
+
const containerRef = (0, import_react237.useRef)(null);
|
|
48365
|
+
const handleSelect = (0, import_react237.useCallback)(() => {
|
|
48367
48366
|
textComposer.handleSelect(item2);
|
|
48368
48367
|
}, [item2, textComposer]);
|
|
48369
48368
|
(0, import_react237.useLayoutEffect)(() => {
|
|
48370
48369
|
if (!focused) return;
|
|
48371
48370
|
containerRef.current?.scrollIntoView({ behavior: "instant", block: "nearest" });
|
|
48372
48371
|
}, [focused, containerRef]);
|
|
48373
|
-
return /* @__PURE__ */
|
|
48372
|
+
return /* @__PURE__ */ import_react237.default.createElement(
|
|
48374
48373
|
"li",
|
|
48375
48374
|
{
|
|
48376
48375
|
className: (0, import_clsx58.default)("str-chat__suggestion-list-item", className, {
|
|
@@ -48379,7 +48378,7 @@ var SuggestionListItem = import_react238.default.forwardRef(function SuggestionL
|
|
|
48379
48378
|
onMouseEnter,
|
|
48380
48379
|
ref: containerRef
|
|
48381
48380
|
},
|
|
48382
|
-
/* @__PURE__ */
|
|
48381
|
+
/* @__PURE__ */ import_react237.default.createElement(
|
|
48383
48382
|
"button",
|
|
48384
48383
|
{
|
|
48385
48384
|
onClick: handleSelect,
|
|
@@ -48390,13 +48389,13 @@ var SuggestionListItem = import_react238.default.forwardRef(function SuggestionL
|
|
|
48390
48389
|
},
|
|
48391
48390
|
ref: innerRef
|
|
48392
48391
|
},
|
|
48393
|
-
/* @__PURE__ */
|
|
48392
|
+
/* @__PURE__ */ import_react237.default.createElement(Component2, { entity: item2, focused })
|
|
48394
48393
|
)
|
|
48395
48394
|
);
|
|
48396
48395
|
});
|
|
48397
48396
|
|
|
48398
48397
|
// src/components/TextareaComposer/SuggestionList/UserItem.tsx
|
|
48399
|
-
var
|
|
48398
|
+
var import_react238 = __toESM(require("react"));
|
|
48400
48399
|
var import_clsx59 = __toESM(require("clsx"));
|
|
48401
48400
|
var UserItem = ({ Avatar: Avatar2 = Avatar, entity }) => {
|
|
48402
48401
|
const hasEntity = !!Object.keys(entity).length;
|
|
@@ -48405,7 +48404,7 @@ var UserItem = ({ Avatar: Avatar2 = Avatar, entity }) => {
|
|
|
48405
48404
|
const renderName = () => parts.map((part, i) => {
|
|
48406
48405
|
const matches = part.toLowerCase() === token;
|
|
48407
48406
|
const partWithHTMLSpacesAround = part.replace(/^\s+|\s+$/g, "\xA0");
|
|
48408
|
-
return /* @__PURE__ */
|
|
48407
|
+
return /* @__PURE__ */ import_react238.default.createElement(
|
|
48409
48408
|
"span",
|
|
48410
48409
|
{
|
|
48411
48410
|
className: (0, import_clsx59.default)({
|
|
@@ -48417,14 +48416,14 @@ var UserItem = ({ Avatar: Avatar2 = Avatar, entity }) => {
|
|
|
48417
48416
|
partWithHTMLSpacesAround
|
|
48418
48417
|
);
|
|
48419
48418
|
});
|
|
48420
|
-
return /* @__PURE__ */
|
|
48419
|
+
return /* @__PURE__ */ import_react238.default.createElement("div", { className: "str-chat__user-item" }, /* @__PURE__ */ import_react238.default.createElement(
|
|
48421
48420
|
Avatar2,
|
|
48422
48421
|
{
|
|
48423
48422
|
className: "str-chat__avatar--autocomplete-item",
|
|
48424
48423
|
image: entity.image,
|
|
48425
48424
|
name: entity.name || entity.id
|
|
48426
48425
|
}
|
|
48427
|
-
), /* @__PURE__ */
|
|
48426
|
+
), /* @__PURE__ */ import_react238.default.createElement("span", { className: "str-chat__user-item--name", "data-testid": "user-item-name" }, renderName()), /* @__PURE__ */ import_react238.default.createElement("div", { className: "str-chat__user-item-at" }, "@"));
|
|
48428
48427
|
};
|
|
48429
48428
|
|
|
48430
48429
|
// src/components/TextareaComposer/SuggestionList/SuggestionList.tsx
|
|
@@ -48435,25 +48434,26 @@ var searchSourceStateSelector = (nextValue) => ({
|
|
|
48435
48434
|
items: nextValue.items ?? []
|
|
48436
48435
|
});
|
|
48437
48436
|
var defaultComponents = {
|
|
48438
|
-
"/": CommandItem,
|
|
48439
|
-
":": EmoticonItem,
|
|
48440
|
-
"@": UserItem
|
|
48437
|
+
"/": (props) => /* @__PURE__ */ import_react239.default.createElement(CommandItem, { entity: props.entity }),
|
|
48438
|
+
":": (props) => /* @__PURE__ */ import_react239.default.createElement(EmoticonItem, { entity: props.entity }),
|
|
48439
|
+
"@": (props) => /* @__PURE__ */ import_react239.default.createElement(UserItem, { entity: props.entity })
|
|
48441
48440
|
};
|
|
48442
48441
|
var SuggestionList = ({
|
|
48443
48442
|
className,
|
|
48444
48443
|
closeOnClickOutside = true,
|
|
48445
48444
|
containerClassName,
|
|
48446
48445
|
focusedItemIndex,
|
|
48447
|
-
setFocusedItemIndex
|
|
48446
|
+
setFocusedItemIndex,
|
|
48447
|
+
suggestionItemComponents = defaultComponents
|
|
48448
48448
|
}) => {
|
|
48449
48449
|
const { AutocompleteSuggestionItem = SuggestionListItem } = useComponentContext();
|
|
48450
48450
|
const messageComposer = useMessageComposer();
|
|
48451
48451
|
const { textComposer } = messageComposer;
|
|
48452
48452
|
const { suggestions } = useStateStore(textComposer.state, textComposerStateSelector);
|
|
48453
48453
|
const { items } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
|
|
48454
|
-
const [container, setContainer] = (0,
|
|
48455
|
-
const component = suggestions?.trigger
|
|
48456
|
-
(0,
|
|
48454
|
+
const [container, setContainer] = (0, import_react239.useState)(null);
|
|
48455
|
+
const component = suggestions?.trigger ? suggestionItemComponents[suggestions?.trigger] : void 0;
|
|
48456
|
+
(0, import_react239.useEffect)(() => {
|
|
48457
48457
|
if (!closeOnClickOutside || !suggestions || !container) return;
|
|
48458
48458
|
const handleClick = (event) => {
|
|
48459
48459
|
if (container.contains(event.target)) return;
|
|
@@ -48465,19 +48465,19 @@ var SuggestionList = ({
|
|
|
48465
48465
|
};
|
|
48466
48466
|
}, [closeOnClickOutside, suggestions, container, textComposer]);
|
|
48467
48467
|
if (!suggestions || !items?.length || !component) return null;
|
|
48468
|
-
return /* @__PURE__ */
|
|
48468
|
+
return /* @__PURE__ */ import_react239.default.createElement(
|
|
48469
48469
|
"div",
|
|
48470
48470
|
{
|
|
48471
48471
|
className: (0, import_clsx60.default)("str-chat__suggestion-list-container", containerClassName),
|
|
48472
48472
|
ref: setContainer
|
|
48473
48473
|
},
|
|
48474
|
-
/* @__PURE__ */
|
|
48474
|
+
/* @__PURE__ */ import_react239.default.createElement(
|
|
48475
48475
|
InfiniteScrollPaginator,
|
|
48476
48476
|
{
|
|
48477
48477
|
loadNextOnScrollToBottom: suggestions.searchSource.search,
|
|
48478
48478
|
threshold: 100
|
|
48479
48479
|
},
|
|
48480
|
-
/* @__PURE__ */
|
|
48480
|
+
/* @__PURE__ */ import_react239.default.createElement(
|
|
48481
48481
|
"ul",
|
|
48482
48482
|
{
|
|
48483
48483
|
className: (0, import_clsx60.default)(
|
|
@@ -48485,7 +48485,7 @@ var SuggestionList = ({
|
|
|
48485
48485
|
className
|
|
48486
48486
|
)
|
|
48487
48487
|
},
|
|
48488
|
-
items.map((item2, i) => /* @__PURE__ */
|
|
48488
|
+
items.map((item2, i) => /* @__PURE__ */ import_react239.default.createElement(
|
|
48489
48489
|
AutocompleteSuggestionItem,
|
|
48490
48490
|
{
|
|
48491
48491
|
component,
|
|
@@ -48502,7 +48502,7 @@ var SuggestionList = ({
|
|
|
48502
48502
|
|
|
48503
48503
|
// src/components/TextareaComposer/TextareaComposer.tsx
|
|
48504
48504
|
var import_clsx61 = __toESM(require("clsx"));
|
|
48505
|
-
var
|
|
48505
|
+
var import_react240 = __toESM(require("react"));
|
|
48506
48506
|
var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
|
|
48507
48507
|
var textComposerStateSelector2 = (state) => ({
|
|
48508
48508
|
selection: state.selection,
|
|
@@ -48558,10 +48558,10 @@ var TextareaComposer = ({
|
|
|
48558
48558
|
);
|
|
48559
48559
|
const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
|
|
48560
48560
|
const { isLoadingItems } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector2) ?? {};
|
|
48561
|
-
const containerRef = (0,
|
|
48562
|
-
const [focusedItemIndex, setFocusedItemIndex] = (0,
|
|
48563
|
-
const [isComposing, setIsComposing] = (0,
|
|
48564
|
-
const changeHandler = (0,
|
|
48561
|
+
const containerRef = (0, import_react240.useRef)(null);
|
|
48562
|
+
const [focusedItemIndex, setFocusedItemIndex] = (0, import_react240.useState)(0);
|
|
48563
|
+
const [isComposing, setIsComposing] = (0, import_react240.useState)(false);
|
|
48564
|
+
const changeHandler = (0, import_react240.useCallback)(
|
|
48565
48565
|
(e) => {
|
|
48566
48566
|
if (onChange) {
|
|
48567
48567
|
onChange(e);
|
|
@@ -48578,13 +48578,13 @@ var TextareaComposer = ({
|
|
|
48578
48578
|
},
|
|
48579
48579
|
[onChange, textComposer, textareaRef]
|
|
48580
48580
|
);
|
|
48581
|
-
const onCompositionEnd = (0,
|
|
48581
|
+
const onCompositionEnd = (0, import_react240.useCallback)(() => {
|
|
48582
48582
|
setIsComposing(false);
|
|
48583
48583
|
}, []);
|
|
48584
|
-
const onCompositionStart = (0,
|
|
48584
|
+
const onCompositionStart = (0, import_react240.useCallback)(() => {
|
|
48585
48585
|
setIsComposing(true);
|
|
48586
48586
|
}, []);
|
|
48587
|
-
const keyDownHandler = (0,
|
|
48587
|
+
const keyDownHandler = (0, import_react240.useCallback)(
|
|
48588
48588
|
(event) => {
|
|
48589
48589
|
if (onKeyDown) {
|
|
48590
48590
|
onKeyDown(event);
|
|
@@ -48638,7 +48638,7 @@ var TextareaComposer = ({
|
|
|
48638
48638
|
textareaRef
|
|
48639
48639
|
]
|
|
48640
48640
|
);
|
|
48641
|
-
const scrollHandler = (0,
|
|
48641
|
+
const scrollHandler = (0, import_react240.useCallback)(
|
|
48642
48642
|
(event) => {
|
|
48643
48643
|
if (onScroll) {
|
|
48644
48644
|
onScroll(event);
|
|
@@ -48648,18 +48648,18 @@ var TextareaComposer = ({
|
|
|
48648
48648
|
},
|
|
48649
48649
|
[onScroll, textComposer]
|
|
48650
48650
|
);
|
|
48651
|
-
(0,
|
|
48651
|
+
(0, import_react240.useEffect)(() => {
|
|
48652
48652
|
if (textareaRef.current && !isComposing) {
|
|
48653
48653
|
textareaRef.current.selectionStart = selection.start;
|
|
48654
48654
|
textareaRef.current.selectionEnd = selection.end;
|
|
48655
48655
|
}
|
|
48656
48656
|
}, [text8, textareaRef, selection.start, selection.end, isComposing]);
|
|
48657
|
-
(0,
|
|
48657
|
+
(0, import_react240.useEffect)(() => {
|
|
48658
48658
|
if (textComposer.suggestions) {
|
|
48659
48659
|
setFocusedItemIndex(0);
|
|
48660
48660
|
}
|
|
48661
48661
|
}, [textComposer.suggestions]);
|
|
48662
|
-
return /* @__PURE__ */
|
|
48662
|
+
return /* @__PURE__ */ import_react240.default.createElement(
|
|
48663
48663
|
"div",
|
|
48664
48664
|
{
|
|
48665
48665
|
className: (0, import_clsx61.default)(
|
|
@@ -48672,7 +48672,7 @@ var TextareaComposer = ({
|
|
|
48672
48672
|
),
|
|
48673
48673
|
ref: containerRef
|
|
48674
48674
|
},
|
|
48675
|
-
/* @__PURE__ */
|
|
48675
|
+
/* @__PURE__ */ import_react240.default.createElement(
|
|
48676
48676
|
import_react_textarea_autosize.default,
|
|
48677
48677
|
{
|
|
48678
48678
|
...restProps,
|
|
@@ -48699,7 +48699,7 @@ var TextareaComposer = ({
|
|
|
48699
48699
|
value: text8
|
|
48700
48700
|
}
|
|
48701
48701
|
),
|
|
48702
|
-
!isComposing && /* @__PURE__ */
|
|
48702
|
+
!isComposing && /* @__PURE__ */ import_react240.default.createElement(
|
|
48703
48703
|
AutocompleteSuggestionList,
|
|
48704
48704
|
{
|
|
48705
48705
|
className: listClassName,
|
|
@@ -48712,10 +48712,10 @@ var TextareaComposer = ({
|
|
|
48712
48712
|
};
|
|
48713
48713
|
|
|
48714
48714
|
// src/components/AIStateIndicator/AIStateIndicator.tsx
|
|
48715
|
-
var
|
|
48715
|
+
var import_react242 = __toESM(require("react"));
|
|
48716
48716
|
|
|
48717
48717
|
// src/components/AIStateIndicator/hooks/useAIState.ts
|
|
48718
|
-
var
|
|
48718
|
+
var import_react241 = require("react");
|
|
48719
48719
|
var AIStates = {
|
|
48720
48720
|
Error: "AI_STATE_ERROR",
|
|
48721
48721
|
ExternalSources: "AI_STATE_EXTERNAL_SOURCES",
|
|
@@ -48724,8 +48724,8 @@ var AIStates = {
|
|
|
48724
48724
|
Thinking: "AI_STATE_THINKING"
|
|
48725
48725
|
};
|
|
48726
48726
|
var useAIState = (channel) => {
|
|
48727
|
-
const [aiState, setAiState] = (0,
|
|
48728
|
-
(0,
|
|
48727
|
+
const [aiState, setAiState] = (0, import_react241.useState)(AIStates.Idle);
|
|
48728
|
+
(0, import_react241.useEffect)(() => {
|
|
48729
48729
|
if (!channel) {
|
|
48730
48730
|
return;
|
|
48731
48731
|
}
|
|
@@ -48762,21 +48762,21 @@ var AIStateIndicator = ({
|
|
|
48762
48762
|
[AIStates.Thinking]: t("Thinking..."),
|
|
48763
48763
|
[AIStates.Generating]: t("Generating...")
|
|
48764
48764
|
};
|
|
48765
|
-
return aiState in allowedStates ? /* @__PURE__ */
|
|
48765
|
+
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;
|
|
48766
48766
|
};
|
|
48767
48767
|
|
|
48768
48768
|
// src/components/MessageInput/WithDragAndDropUpload.tsx
|
|
48769
|
-
var
|
|
48769
|
+
var import_react243 = __toESM(require("react"));
|
|
48770
48770
|
var import_react_dropzone = require("react-dropzone");
|
|
48771
48771
|
var import_clsx62 = __toESM(require("clsx"));
|
|
48772
|
-
var DragAndDropUploadContext =
|
|
48772
|
+
var DragAndDropUploadContext = import_react243.default.createContext({
|
|
48773
48773
|
subscribeToDrop: null
|
|
48774
48774
|
});
|
|
48775
|
-
var useDragAndDropUploadContext = () => (0,
|
|
48775
|
+
var useDragAndDropUploadContext = () => (0, import_react243.useContext)(DragAndDropUploadContext);
|
|
48776
48776
|
var useRegisterDropHandlers = () => {
|
|
48777
48777
|
const { subscribeToDrop } = useDragAndDropUploadContext();
|
|
48778
48778
|
const messageComposer = useMessageComposer();
|
|
48779
|
-
(0,
|
|
48779
|
+
(0, import_react243.useEffect)(() => {
|
|
48780
48780
|
const unsubscribe = subscribeToDrop?.(messageComposer.attachmentManager.uploadFiles);
|
|
48781
48781
|
return unsubscribe;
|
|
48782
48782
|
}, [subscribeToDrop, messageComposer]);
|
|
@@ -48791,7 +48791,7 @@ var WithDragAndDropUpload = ({
|
|
|
48791
48791
|
component: Component2 = "div",
|
|
48792
48792
|
style
|
|
48793
48793
|
}) => {
|
|
48794
|
-
const dropHandlersRef = (0,
|
|
48794
|
+
const dropHandlersRef = (0, import_react243.useRef)(/* @__PURE__ */ new Set());
|
|
48795
48795
|
const { t } = useTranslationContext();
|
|
48796
48796
|
const messageInputContext = useMessageInputContext();
|
|
48797
48797
|
const dragAndDropUploadContext = useDragAndDropUploadContext();
|
|
@@ -48802,20 +48802,20 @@ var WithDragAndDropUpload = ({
|
|
|
48802
48802
|
attachmentManagerConfigStateSelector
|
|
48803
48803
|
);
|
|
48804
48804
|
const isWithinMessageInputContext = Object.keys(messageInputContext).length > 0;
|
|
48805
|
-
const accept = (0,
|
|
48805
|
+
const accept = (0, import_react243.useMemo)(
|
|
48806
48806
|
() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
|
|
48807
48807
|
mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
|
|
48808
48808
|
return mediaTypeMap;
|
|
48809
48809
|
}, {}),
|
|
48810
48810
|
[acceptedFiles]
|
|
48811
48811
|
);
|
|
48812
|
-
const subscribeToDrop = (0,
|
|
48812
|
+
const subscribeToDrop = (0, import_react243.useCallback)((fn) => {
|
|
48813
48813
|
dropHandlersRef.current.add(fn);
|
|
48814
48814
|
return () => {
|
|
48815
48815
|
dropHandlersRef.current.delete(fn);
|
|
48816
48816
|
};
|
|
48817
48817
|
}, []);
|
|
48818
|
-
const handleDrop = (0,
|
|
48818
|
+
const handleDrop = (0, import_react243.useCallback)((files) => {
|
|
48819
48819
|
dropHandlersRef.current.forEach((fn) => fn(files));
|
|
48820
48820
|
}, []);
|
|
48821
48821
|
const { getRootProps, isDragActive, isDragReject } = (0, import_react_dropzone.useDropzone)({
|
|
@@ -48828,24 +48828,24 @@ var WithDragAndDropUpload = ({
|
|
|
48828
48828
|
onDrop: isWithinMessageInputContext ? messageComposer.attachmentManager.uploadFiles : handleDrop
|
|
48829
48829
|
});
|
|
48830
48830
|
if (dragAndDropUploadContext.subscribeToDrop !== null) {
|
|
48831
|
-
return /* @__PURE__ */
|
|
48831
|
+
return /* @__PURE__ */ import_react243.default.createElement(Component2, { className }, children);
|
|
48832
48832
|
}
|
|
48833
|
-
return /* @__PURE__ */
|
|
48833
|
+
return /* @__PURE__ */ import_react243.default.createElement(
|
|
48834
48834
|
DragAndDropUploadContext.Provider,
|
|
48835
48835
|
{
|
|
48836
48836
|
value: {
|
|
48837
48837
|
subscribeToDrop
|
|
48838
48838
|
}
|
|
48839
48839
|
},
|
|
48840
|
-
/* @__PURE__ */
|
|
48840
|
+
/* @__PURE__ */ import_react243.default.createElement(Component2, { ...getRootProps({ className, style }) }, isDragActive && /* @__PURE__ */ import_react243.default.createElement(
|
|
48841
48841
|
"div",
|
|
48842
48842
|
{
|
|
48843
48843
|
className: (0, import_clsx62.default)("str-chat__dropzone-container", {
|
|
48844
48844
|
"str-chat__dropzone-container--not-accepted": isDragReject
|
|
48845
48845
|
})
|
|
48846
48846
|
},
|
|
48847
|
-
!isDragReject && /* @__PURE__ */
|
|
48848
|
-
isDragReject && /* @__PURE__ */
|
|
48847
|
+
!isDragReject && /* @__PURE__ */ import_react243.default.createElement("p", null, t("Drag your files here")),
|
|
48848
|
+
isDragReject && /* @__PURE__ */ import_react243.default.createElement("p", null, t("Some of the files will not be accepted"))
|
|
48849
48849
|
), children)
|
|
48850
48850
|
);
|
|
48851
48851
|
};
|
|
@@ -48876,33 +48876,33 @@ var MessageInputFlat = () => {
|
|
|
48876
48876
|
} = useComponentContext("MessageInputFlat");
|
|
48877
48877
|
const { channel } = useChatContext("MessageInputFlat");
|
|
48878
48878
|
const { aiState } = useAIState(channel);
|
|
48879
|
-
const stopGenerating = (0,
|
|
48879
|
+
const stopGenerating = (0, import_react244.useCallback)(() => channel?.stopAIResponse(), [channel]);
|
|
48880
48880
|
const [
|
|
48881
48881
|
showRecordingPermissionDeniedNotification,
|
|
48882
48882
|
setShowRecordingPermissionDeniedNotification
|
|
48883
|
-
] = (0,
|
|
48884
|
-
const closePermissionDeniedNotification = (0,
|
|
48883
|
+
] = (0, import_react244.useState)(false);
|
|
48884
|
+
const closePermissionDeniedNotification = (0, import_react244.useCallback)(() => {
|
|
48885
48885
|
setShowRecordingPermissionDeniedNotification(false);
|
|
48886
48886
|
}, []);
|
|
48887
48887
|
const { attachments } = useAttachmentManagerState();
|
|
48888
|
-
if (recordingController.recordingState) return /* @__PURE__ */
|
|
48888
|
+
if (recordingController.recordingState) return /* @__PURE__ */ import_react244.default.createElement(AudioRecorder2, null);
|
|
48889
48889
|
const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices);
|
|
48890
48890
|
const isRecording = !!recordingController.recordingState;
|
|
48891
48891
|
const StopAIGenerationButton2 = StopAIGenerationButtonOverride === void 0 ? StopAIGenerationButton : StopAIGenerationButtonOverride;
|
|
48892
48892
|
const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopAIGenerationButton2;
|
|
48893
|
-
return /* @__PURE__ */
|
|
48893
|
+
return /* @__PURE__ */ import_react244.default.createElement(WithDragAndDropUpload, { className: "str-chat__message-input", component: "div" }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react244.default.createElement(
|
|
48894
48894
|
RecordingPermissionDeniedNotification2,
|
|
48895
48895
|
{
|
|
48896
48896
|
onClose: closePermissionDeniedNotification,
|
|
48897
48897
|
permissionName: "microphone" /* MIC */
|
|
48898
48898
|
}
|
|
48899
|
-
), /* @__PURE__ */
|
|
48899
|
+
), /* @__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(TextareaComposer, 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(
|
|
48900
48900
|
CooldownTimer2,
|
|
48901
48901
|
{
|
|
48902
48902
|
cooldownInterval: cooldownRemaining,
|
|
48903
48903
|
setCooldownRemaining
|
|
48904
48904
|
}
|
|
48905
|
-
) : /* @__PURE__ */
|
|
48905
|
+
) : /* @__PURE__ */ import_react244.default.createElement(import_react244.default.Fragment, null, /* @__PURE__ */ import_react244.default.createElement(SendButton2, { sendMessage: handleSubmit }), recordingEnabled && /* @__PURE__ */ import_react244.default.createElement(
|
|
48906
48906
|
StartRecordingAudioButton2,
|
|
48907
48907
|
{
|
|
48908
48908
|
disabled: isRecording || !asyncMessagesMultiSendEnabled && attachments.some(
|
|
@@ -48917,7 +48917,7 @@ var MessageInputFlat = () => {
|
|
|
48917
48917
|
};
|
|
48918
48918
|
|
|
48919
48919
|
// src/components/MessageInput/hooks/useCreateMessageInputContext.ts
|
|
48920
|
-
var
|
|
48920
|
+
var import_react245 = require("react");
|
|
48921
48921
|
var useCreateMessageInputContext = (value) => {
|
|
48922
48922
|
const {
|
|
48923
48923
|
additionalTextareaProps,
|
|
@@ -48943,7 +48943,7 @@ var useCreateMessageInputContext = (value) => {
|
|
|
48943
48943
|
textareaRef
|
|
48944
48944
|
} = value;
|
|
48945
48945
|
const parentId = parent?.id;
|
|
48946
|
-
const messageInputContext = (0,
|
|
48946
|
+
const messageInputContext = (0, import_react245.useMemo)(
|
|
48947
48947
|
() => ({
|
|
48948
48948
|
additionalTextareaProps,
|
|
48949
48949
|
asyncMessagesMultiSendEnabled,
|
|
@@ -48997,13 +48997,13 @@ var MessageInputProvider = (props) => {
|
|
|
48997
48997
|
emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex
|
|
48998
48998
|
});
|
|
48999
48999
|
const messageComposer = useMessageComposer();
|
|
49000
|
-
(0,
|
|
49000
|
+
(0, import_react246.useEffect)(
|
|
49001
49001
|
() => () => {
|
|
49002
49002
|
messageComposer.createDraft();
|
|
49003
49003
|
},
|
|
49004
49004
|
[messageComposer]
|
|
49005
49005
|
);
|
|
49006
|
-
(0,
|
|
49006
|
+
(0, import_react246.useEffect)(() => {
|
|
49007
49007
|
const threadId = messageComposer.threadId;
|
|
49008
49008
|
if (!threadId || !messageComposer.channel || !messageComposer.compositionIsEmpty)
|
|
49009
49009
|
return;
|
|
@@ -49014,16 +49014,16 @@ var MessageInputProvider = (props) => {
|
|
|
49014
49014
|
});
|
|
49015
49015
|
}, [messageComposer]);
|
|
49016
49016
|
useRegisterDropHandlers();
|
|
49017
|
-
return /* @__PURE__ */
|
|
49017
|
+
return /* @__PURE__ */ import_react246.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
|
|
49018
49018
|
};
|
|
49019
49019
|
var UnMemoizedMessageInput = (props) => {
|
|
49020
49020
|
const { Input: PropInput } = props;
|
|
49021
49021
|
const { Input: ContextInput } = useComponentContext("MessageInput");
|
|
49022
49022
|
const Input3 = PropInput || ContextInput || MessageInputFlat;
|
|
49023
49023
|
const dialogManagerId = props.isThreadInput ? "message-input-dialog-manager-thread" : "message-input-dialog-manager";
|
|
49024
|
-
return /* @__PURE__ */
|
|
49024
|
+
return /* @__PURE__ */ import_react246.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react246.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react246.default.createElement(Input3, null)));
|
|
49025
49025
|
};
|
|
49026
|
-
var MessageInput =
|
|
49026
|
+
var MessageInput = import_react246.default.memo(
|
|
49027
49027
|
UnMemoizedMessageInput
|
|
49028
49028
|
);
|
|
49029
49029
|
|
|
@@ -49031,7 +49031,7 @@ var MessageInput = import_react247.default.memo(
|
|
|
49031
49031
|
var EditMessageFormSendButton = () => {
|
|
49032
49032
|
const { t } = useTranslationContext();
|
|
49033
49033
|
const hasSendableData = useMessageComposerHasSendableData();
|
|
49034
|
-
return /* @__PURE__ */
|
|
49034
|
+
return /* @__PURE__ */ import_react247.default.createElement(
|
|
49035
49035
|
"button",
|
|
49036
49036
|
{
|
|
49037
49037
|
className: "str-chat__edit-message-send",
|
|
@@ -49046,26 +49046,26 @@ var EditMessageForm = () => {
|
|
|
49046
49046
|
const { t } = useTranslationContext("EditMessageForm");
|
|
49047
49047
|
const messageComposer = useMessageComposer();
|
|
49048
49048
|
const { clearEditingState, handleSubmit } = useMessageInputContext("EditMessageForm");
|
|
49049
|
-
const cancel = (0,
|
|
49049
|
+
const cancel = (0, import_react247.useCallback)(() => {
|
|
49050
49050
|
clearEditingState?.();
|
|
49051
49051
|
messageComposer.restore();
|
|
49052
49052
|
}, [clearEditingState, messageComposer]);
|
|
49053
|
-
(0,
|
|
49053
|
+
(0, import_react247.useEffect)(() => {
|
|
49054
49054
|
const onKeyDown = (event) => {
|
|
49055
49055
|
if (event.key === "Escape") cancel();
|
|
49056
49056
|
};
|
|
49057
49057
|
document.addEventListener("keydown", onKeyDown);
|
|
49058
49058
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
49059
49059
|
}, [cancel]);
|
|
49060
|
-
return /* @__PURE__ */
|
|
49060
|
+
return /* @__PURE__ */ import_react247.default.createElement(
|
|
49061
49061
|
"form",
|
|
49062
49062
|
{
|
|
49063
49063
|
autoComplete: "off",
|
|
49064
49064
|
className: "str-chat__edit-message-form",
|
|
49065
49065
|
onSubmit: handleSubmit
|
|
49066
49066
|
},
|
|
49067
|
-
/* @__PURE__ */
|
|
49068
|
-
/* @__PURE__ */
|
|
49067
|
+
/* @__PURE__ */ import_react247.default.createElement(MessageInputFlat, null),
|
|
49068
|
+
/* @__PURE__ */ import_react247.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react247.default.createElement(
|
|
49069
49069
|
"button",
|
|
49070
49070
|
{
|
|
49071
49071
|
className: "str-chat__edit-message-cancel",
|
|
@@ -49073,7 +49073,7 @@ var EditMessageForm = () => {
|
|
|
49073
49073
|
onClick: cancel
|
|
49074
49074
|
},
|
|
49075
49075
|
t("Cancel")
|
|
49076
|
-
), /* @__PURE__ */
|
|
49076
|
+
), /* @__PURE__ */ import_react247.default.createElement(EditMessageFormSendButton, null))
|
|
49077
49077
|
);
|
|
49078
49078
|
};
|
|
49079
49079
|
var EditMessageModal = ({
|
|
@@ -49082,18 +49082,18 @@ var EditMessageModal = ({
|
|
|
49082
49082
|
const { EditMessageInput = EditMessageForm } = useComponentContext();
|
|
49083
49083
|
const { clearEditingState } = useMessageContext();
|
|
49084
49084
|
const messageComposer = useMessageComposer();
|
|
49085
|
-
const onEditModalClose = (0,
|
|
49085
|
+
const onEditModalClose = (0, import_react247.useCallback)(() => {
|
|
49086
49086
|
clearEditingState();
|
|
49087
49087
|
messageComposer.restore();
|
|
49088
49088
|
}, [clearEditingState, messageComposer]);
|
|
49089
|
-
return /* @__PURE__ */
|
|
49089
|
+
return /* @__PURE__ */ import_react247.default.createElement(
|
|
49090
49090
|
Modal,
|
|
49091
49091
|
{
|
|
49092
49092
|
className: "str-chat__edit-message-modal",
|
|
49093
49093
|
onClose: onEditModalClose,
|
|
49094
49094
|
open: true
|
|
49095
49095
|
},
|
|
49096
|
-
/* @__PURE__ */
|
|
49096
|
+
/* @__PURE__ */ import_react247.default.createElement(
|
|
49097
49097
|
MessageInput,
|
|
49098
49098
|
{
|
|
49099
49099
|
clearEditingState,
|
|
@@ -49111,12 +49111,12 @@ var attachmentManagerConfigStateSelector2 = (state) => ({
|
|
|
49111
49111
|
acceptedFiles: state.attachments.acceptedFiles,
|
|
49112
49112
|
maxNumberOfFilesPerMessage: state.attachments.maxNumberOfFilesPerMessage
|
|
49113
49113
|
});
|
|
49114
|
-
var UploadButton = (0,
|
|
49114
|
+
var UploadButton = (0, import_react248.forwardRef)(function UploadButton2({ onFileChange, resetOnChange = true, ...rest }, ref) {
|
|
49115
49115
|
const handleInputChange = useHandleFileChangeWrapper(resetOnChange, onFileChange);
|
|
49116
|
-
return /* @__PURE__ */
|
|
49116
|
+
return /* @__PURE__ */ import_react248.default.createElement("input", { onChange: handleInputChange, ref, type: "file", ...rest });
|
|
49117
49117
|
});
|
|
49118
49118
|
var FileInput = UploadButton;
|
|
49119
|
-
var UploadFileInput = (0,
|
|
49119
|
+
var UploadFileInput = (0, import_react248.forwardRef)(function UploadFileInput2({
|
|
49120
49120
|
className,
|
|
49121
49121
|
onFileChange: onFileChangeCustom,
|
|
49122
49122
|
...props
|
|
@@ -49130,15 +49130,15 @@ var UploadFileInput = (0, import_react249.forwardRef)(function UploadFileInput2(
|
|
|
49130
49130
|
messageComposer.configState,
|
|
49131
49131
|
attachmentManagerConfigStateSelector2
|
|
49132
49132
|
);
|
|
49133
|
-
const id = (0,
|
|
49134
|
-
const onFileChange = (0,
|
|
49133
|
+
const id = (0, import_react248.useMemo)(() => (0, import_nanoid5.nanoid)(), []);
|
|
49134
|
+
const onFileChange = (0, import_react248.useCallback)(
|
|
49135
49135
|
(files) => {
|
|
49136
49136
|
attachmentManager.uploadFiles(files);
|
|
49137
49137
|
onFileChangeCustom?.(files);
|
|
49138
49138
|
},
|
|
49139
49139
|
[onFileChangeCustom, attachmentManager]
|
|
49140
49140
|
);
|
|
49141
|
-
return /* @__PURE__ */
|
|
49141
|
+
return /* @__PURE__ */ import_react248.default.createElement(
|
|
49142
49142
|
FileInput,
|
|
49143
49143
|
{
|
|
49144
49144
|
accept: acceptedFiles?.join(","),
|
|
@@ -49185,7 +49185,7 @@ var VoiceRecordingPlayer = ({
|
|
|
49185
49185
|
});
|
|
49186
49186
|
if (!asset_url) return null;
|
|
49187
49187
|
const displayedDuration = secondsElapsed || duration;
|
|
49188
|
-
return /* @__PURE__ */
|
|
49188
|
+
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(
|
|
49189
49189
|
"div",
|
|
49190
49190
|
{
|
|
49191
49191
|
className: "str-chat__message-attachment__voice-recording-widget__title",
|
|
@@ -49193,25 +49193,25 @@ var VoiceRecordingPlayer = ({
|
|
|
49193
49193
|
title
|
|
49194
49194
|
},
|
|
49195
49195
|
title
|
|
49196
|
-
), /* @__PURE__ */
|
|
49196
|
+
), /* @__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(
|
|
49197
49197
|
FileSizeIndicator,
|
|
49198
49198
|
{
|
|
49199
49199
|
fileSize: attachment.file_size,
|
|
49200
49200
|
maximumFractionDigits: 0
|
|
49201
49201
|
}
|
|
49202
|
-
)), /* @__PURE__ */
|
|
49202
|
+
)), /* @__PURE__ */ import_react249.default.createElement(
|
|
49203
49203
|
WaveProgressBar,
|
|
49204
49204
|
{
|
|
49205
49205
|
progress,
|
|
49206
49206
|
seek,
|
|
49207
49207
|
waveformData: waveform_data || []
|
|
49208
49208
|
}
|
|
49209
|
-
))), /* @__PURE__ */
|
|
49209
|
+
))), /* @__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 })));
|
|
49210
49210
|
};
|
|
49211
49211
|
var QuotedVoiceRecording = ({ attachment }) => {
|
|
49212
49212
|
const { t } = useTranslationContext();
|
|
49213
49213
|
const title = attachment.title || t("Voice message");
|
|
49214
|
-
return /* @__PURE__ */
|
|
49214
|
+
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(
|
|
49215
49215
|
"div",
|
|
49216
49216
|
{
|
|
49217
49217
|
className: "str-chat__message-attachment__voice-recording-widget__title",
|
|
@@ -49219,18 +49219,18 @@ var QuotedVoiceRecording = ({ attachment }) => {
|
|
|
49219
49219
|
title
|
|
49220
49220
|
},
|
|
49221
49221
|
title
|
|
49222
|
-
), /* @__PURE__ */
|
|
49222
|
+
), /* @__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(
|
|
49223
49223
|
FileSizeIndicator,
|
|
49224
49224
|
{
|
|
49225
49225
|
fileSize: attachment.file_size,
|
|
49226
49226
|
maximumFractionDigits: 0
|
|
49227
49227
|
}
|
|
49228
|
-
)))), /* @__PURE__ */
|
|
49228
|
+
)))), /* @__PURE__ */ import_react249.default.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 34 }));
|
|
49229
49229
|
};
|
|
49230
|
-
var VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? /* @__PURE__ */
|
|
49230
|
+
var VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? /* @__PURE__ */ import_react249.default.createElement(QuotedVoiceRecording, { attachment }) : /* @__PURE__ */ import_react249.default.createElement(VoiceRecordingPlayer, { attachment });
|
|
49231
49231
|
|
|
49232
49232
|
// src/components/Attachment/Card.tsx
|
|
49233
|
-
var
|
|
49233
|
+
var import_react250 = __toESM(require("react"));
|
|
49234
49234
|
var import_clsx64 = __toESM(require("clsx"));
|
|
49235
49235
|
var import_react_player = __toESM(require("react-player"));
|
|
49236
49236
|
var getHostFromURL = (url) => {
|
|
@@ -49242,26 +49242,26 @@ var getHostFromURL = (url) => {
|
|
|
49242
49242
|
};
|
|
49243
49243
|
var UnableToRenderCard = ({ type }) => {
|
|
49244
49244
|
const { t } = useTranslationContext("Card");
|
|
49245
|
-
return /* @__PURE__ */
|
|
49245
|
+
return /* @__PURE__ */ import_react250.default.createElement(
|
|
49246
49246
|
"div",
|
|
49247
49247
|
{
|
|
49248
49248
|
className: (0, import_clsx64.default)("str-chat__message-attachment-card", {
|
|
49249
49249
|
[`str-chat__message-attachment-card--${type}`]: type
|
|
49250
49250
|
})
|
|
49251
49251
|
},
|
|
49252
|
-
/* @__PURE__ */
|
|
49252
|
+
/* @__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")))
|
|
49253
49253
|
);
|
|
49254
49254
|
};
|
|
49255
49255
|
var SourceLink = ({
|
|
49256
49256
|
author_name,
|
|
49257
49257
|
url
|
|
49258
|
-
}) => /* @__PURE__ */
|
|
49258
|
+
}) => /* @__PURE__ */ import_react250.default.createElement(
|
|
49259
49259
|
"div",
|
|
49260
49260
|
{
|
|
49261
49261
|
className: "str-chat__message-attachment-card--source-link",
|
|
49262
49262
|
"data-testid": "card-source-link"
|
|
49263
49263
|
},
|
|
49264
|
-
/* @__PURE__ */
|
|
49264
|
+
/* @__PURE__ */ import_react250.default.createElement(
|
|
49265
49265
|
SafeAnchor,
|
|
49266
49266
|
{
|
|
49267
49267
|
className: "str-chat__message-attachment-card--url",
|
|
@@ -49276,7 +49276,7 @@ var CardHeader3 = (props) => {
|
|
|
49276
49276
|
const { asset_url, dimensions, image: image4, image_url, thumb_url, title, type } = props;
|
|
49277
49277
|
let visual = null;
|
|
49278
49278
|
if (asset_url && type === "video") {
|
|
49279
|
-
visual = /* @__PURE__ */
|
|
49279
|
+
visual = /* @__PURE__ */ import_react250.default.createElement(
|
|
49280
49280
|
import_react_player.default,
|
|
49281
49281
|
{
|
|
49282
49282
|
className: "react-player",
|
|
@@ -49287,7 +49287,7 @@ var CardHeader3 = (props) => {
|
|
|
49287
49287
|
}
|
|
49288
49288
|
);
|
|
49289
49289
|
} else if (image4) {
|
|
49290
|
-
visual = /* @__PURE__ */
|
|
49290
|
+
visual = /* @__PURE__ */ import_react250.default.createElement(
|
|
49291
49291
|
ImageComponent,
|
|
49292
49292
|
{
|
|
49293
49293
|
dimensions,
|
|
@@ -49297,7 +49297,7 @@ var CardHeader3 = (props) => {
|
|
|
49297
49297
|
}
|
|
49298
49298
|
);
|
|
49299
49299
|
}
|
|
49300
|
-
return visual ? /* @__PURE__ */
|
|
49300
|
+
return visual ? /* @__PURE__ */ import_react250.default.createElement(
|
|
49301
49301
|
"div",
|
|
49302
49302
|
{
|
|
49303
49303
|
className: "str-chat__message-attachment-card--header str-chat__message-attachment-card-react--header",
|
|
@@ -49309,7 +49309,7 @@ var CardHeader3 = (props) => {
|
|
|
49309
49309
|
var CardContent = (props) => {
|
|
49310
49310
|
const { author_name, og_scrape_url, text: text8, title, title_link, type } = props;
|
|
49311
49311
|
const url = title_link || og_scrape_url;
|
|
49312
|
-
return /* @__PURE__ */
|
|
49312
|
+
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), text8 && /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--text" }, text8)));
|
|
49313
49313
|
};
|
|
49314
49314
|
var CardAudio = ({
|
|
49315
49315
|
og: { asset_url, author_name, mime_type, og_scrape_url, text: text8, title, title_link }
|
|
@@ -49320,7 +49320,7 @@ var CardAudio = ({
|
|
|
49320
49320
|
const url = title_link || og_scrape_url;
|
|
49321
49321
|
const dataTestId = "card-audio-widget";
|
|
49322
49322
|
const rootClassName2 = "str-chat__message-attachment-card-audio-widget";
|
|
49323
|
-
return /* @__PURE__ */
|
|
49323
|
+
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), text8 && /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--description" }, text8)));
|
|
49324
49324
|
};
|
|
49325
49325
|
var UnMemoizedCard = (props) => {
|
|
49326
49326
|
const { asset_url, giphy, image_url, thumb_url, title, title_link, type } = props;
|
|
@@ -49334,45 +49334,45 @@ var UnMemoizedCard = (props) => {
|
|
|
49334
49334
|
dimensions.width = giphyVersion.width;
|
|
49335
49335
|
}
|
|
49336
49336
|
if (!title && !title_link && !asset_url && !image4) {
|
|
49337
|
-
return /* @__PURE__ */
|
|
49337
|
+
return /* @__PURE__ */ import_react250.default.createElement(UnableToRenderCard, null);
|
|
49338
49338
|
}
|
|
49339
|
-
return /* @__PURE__ */
|
|
49339
|
+
return /* @__PURE__ */ import_react250.default.createElement(
|
|
49340
49340
|
"div",
|
|
49341
49341
|
{
|
|
49342
49342
|
className: `str-chat__message-attachment-card str-chat__message-attachment-card--${type}`
|
|
49343
49343
|
},
|
|
49344
|
-
/* @__PURE__ */
|
|
49345
|
-
/* @__PURE__ */
|
|
49344
|
+
/* @__PURE__ */ import_react250.default.createElement(CardHeader3, { ...props, dimensions, image: image4 }),
|
|
49345
|
+
/* @__PURE__ */ import_react250.default.createElement(CardContent, { ...props })
|
|
49346
49346
|
);
|
|
49347
49347
|
};
|
|
49348
|
-
var Card3 =
|
|
49348
|
+
var Card3 = import_react250.default.memo(UnMemoizedCard);
|
|
49349
49349
|
|
|
49350
49350
|
// src/components/Attachment/FileAttachment.tsx
|
|
49351
|
-
var
|
|
49352
|
-
var UnMemoizedFileAttachment = ({ attachment }) => /* @__PURE__ */
|
|
49351
|
+
var import_react251 = __toESM(require("react"));
|
|
49352
|
+
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(
|
|
49353
49353
|
"div",
|
|
49354
49354
|
{
|
|
49355
49355
|
className: "str-chat__message-attachment-file--item-name",
|
|
49356
49356
|
"data-testid": "file-title"
|
|
49357
49357
|
},
|
|
49358
49358
|
attachment.title
|
|
49359
|
-
), /* @__PURE__ */
|
|
49360
|
-
var FileAttachment =
|
|
49359
|
+
), /* @__PURE__ */ import_react251.default.createElement(DownloadButton, { assetUrl: attachment.asset_url })), /* @__PURE__ */ import_react251.default.createElement(FileSizeIndicator, { fileSize: attachment.file_size })));
|
|
49360
|
+
var FileAttachment = import_react251.default.memo(
|
|
49361
49361
|
UnMemoizedFileAttachment
|
|
49362
49362
|
);
|
|
49363
49363
|
|
|
49364
49364
|
// src/components/Attachment/UnsupportedAttachment.tsx
|
|
49365
|
-
var
|
|
49365
|
+
var import_react252 = __toESM(require("react"));
|
|
49366
49366
|
var UnsupportedAttachment = ({ attachment }) => {
|
|
49367
49367
|
const { t } = useTranslationContext("UnsupportedAttachment");
|
|
49368
|
-
return /* @__PURE__ */
|
|
49368
|
+
return /* @__PURE__ */ import_react252.default.createElement(
|
|
49369
49369
|
"div",
|
|
49370
49370
|
{
|
|
49371
49371
|
className: "str-chat__message-attachment-unsupported",
|
|
49372
49372
|
"data-testid": "attachment-unsupported"
|
|
49373
49373
|
},
|
|
49374
|
-
/* @__PURE__ */
|
|
49375
|
-
/* @__PURE__ */
|
|
49374
|
+
/* @__PURE__ */ import_react252.default.createElement(FileIcon, { className: "str-chat__file-icon" }),
|
|
49375
|
+
/* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__message-attachment-unsupported__metadata" }, /* @__PURE__ */ import_react252.default.createElement(
|
|
49376
49376
|
"div",
|
|
49377
49377
|
{
|
|
49378
49378
|
className: "str-chat__message-attachment-unsupported__title",
|
|
@@ -49404,7 +49404,7 @@ var AttachmentWithinContainer = ({
|
|
|
49404
49404
|
"str-chat__message-attachment-with-actions": extra === "actions"
|
|
49405
49405
|
}
|
|
49406
49406
|
);
|
|
49407
|
-
return /* @__PURE__ */
|
|
49407
|
+
return /* @__PURE__ */ import_react253.default.createElement("div", { className: classNames }, children);
|
|
49408
49408
|
};
|
|
49409
49409
|
var AttachmentActionsContainer = ({
|
|
49410
49410
|
actionHandler,
|
|
@@ -49412,7 +49412,7 @@ var AttachmentActionsContainer = ({
|
|
|
49412
49412
|
AttachmentActions: AttachmentActions2 = AttachmentActions
|
|
49413
49413
|
}) => {
|
|
49414
49414
|
if (!attachment.actions?.length) return null;
|
|
49415
|
-
return /* @__PURE__ */
|
|
49415
|
+
return /* @__PURE__ */ import_react253.default.createElement(
|
|
49416
49416
|
AttachmentActions2,
|
|
49417
49417
|
{
|
|
49418
49418
|
...attachment,
|
|
@@ -49443,10 +49443,10 @@ var GalleryContainer = ({
|
|
|
49443
49443
|
attachment,
|
|
49444
49444
|
Gallery: Gallery2 = Gallery
|
|
49445
49445
|
}) => {
|
|
49446
|
-
const imageElements = (0,
|
|
49446
|
+
const imageElements = (0, import_react253.useRef)([]);
|
|
49447
49447
|
const { imageAttachmentSizeHandler } = useChannelStateContext();
|
|
49448
|
-
const [attachmentConfigurations, setAttachmentConfigurations] = (0,
|
|
49449
|
-
(0,
|
|
49448
|
+
const [attachmentConfigurations, setAttachmentConfigurations] = (0, import_react253.useState)([]);
|
|
49449
|
+
(0, import_react253.useLayoutEffect)(() => {
|
|
49450
49450
|
if (imageElements.current && imageElements.current.every((element4) => !!element4) && imageAttachmentSizeHandler) {
|
|
49451
49451
|
const newConfigurations = [];
|
|
49452
49452
|
imageElements.current.forEach((element4, i) => {
|
|
@@ -49463,15 +49463,15 @@ var GalleryContainer = ({
|
|
|
49463
49463
|
attachment.images[i]?.image_url || attachment.images[i]?.thumb_url || ""
|
|
49464
49464
|
)
|
|
49465
49465
|
}));
|
|
49466
|
-
return /* @__PURE__ */
|
|
49466
|
+
return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType: "gallery" }, /* @__PURE__ */ import_react253.default.createElement(Gallery2, { images: images || [], innerRefs: imageElements, key: "gallery" }));
|
|
49467
49467
|
};
|
|
49468
49468
|
var ImageContainer = (props) => {
|
|
49469
49469
|
const { attachment, Image: Image4 = ImageComponent } = props;
|
|
49470
49470
|
const componentType = "image";
|
|
49471
|
-
const imageElement = (0,
|
|
49471
|
+
const imageElement = (0, import_react253.useRef)(null);
|
|
49472
49472
|
const { imageAttachmentSizeHandler } = useChannelStateContext();
|
|
49473
|
-
const [attachmentConfiguration, setAttachmentConfiguration] = (0,
|
|
49474
|
-
(0,
|
|
49473
|
+
const [attachmentConfiguration, setAttachmentConfiguration] = (0, import_react253.useState)(void 0);
|
|
49474
|
+
(0, import_react253.useLayoutEffect)(() => {
|
|
49475
49475
|
if (imageElement.current && imageAttachmentSizeHandler) {
|
|
49476
49476
|
const config = imageAttachmentSizeHandler(attachment, imageElement.current);
|
|
49477
49477
|
setAttachmentConfiguration(config);
|
|
@@ -49483,41 +49483,41 @@ var ImageContainer = (props) => {
|
|
|
49483
49483
|
style: getCssDimensionsVariables(attachment.image_url || attachment.thumb_url || "")
|
|
49484
49484
|
};
|
|
49485
49485
|
if (attachment.actions && attachment.actions.length) {
|
|
49486
|
-
return /* @__PURE__ */
|
|
49486
|
+
return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react253.default.createElement(Image4, { ...imageConfig, innerRef: imageElement }), /* @__PURE__ */ import_react253.default.createElement(AttachmentActionsContainer, { ...props })));
|
|
49487
49487
|
}
|
|
49488
|
-
return /* @__PURE__ */
|
|
49488
|
+
return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement(Image4, { ...imageConfig, innerRef: imageElement }));
|
|
49489
49489
|
};
|
|
49490
49490
|
var CardContainer = (props) => {
|
|
49491
49491
|
const { attachment, Card: Card4 = Card3 } = props;
|
|
49492
49492
|
const componentType = "card";
|
|
49493
49493
|
if (attachment.actions && attachment.actions.length) {
|
|
49494
|
-
return /* @__PURE__ */
|
|
49494
|
+
return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react253.default.createElement(Card4, { ...attachment }), /* @__PURE__ */ import_react253.default.createElement(AttachmentActionsContainer, { ...props })));
|
|
49495
49495
|
}
|
|
49496
|
-
return /* @__PURE__ */
|
|
49496
|
+
return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement(Card4, { ...attachment }));
|
|
49497
49497
|
};
|
|
49498
49498
|
var FileContainer = ({
|
|
49499
49499
|
attachment,
|
|
49500
49500
|
File: File2 = FileAttachment
|
|
49501
49501
|
}) => {
|
|
49502
49502
|
if (!attachment.asset_url) return null;
|
|
49503
|
-
return /* @__PURE__ */
|
|
49503
|
+
return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType: "file" }, /* @__PURE__ */ import_react253.default.createElement(File2, { attachment }));
|
|
49504
49504
|
};
|
|
49505
49505
|
var AudioContainer = ({
|
|
49506
49506
|
attachment,
|
|
49507
49507
|
Audio: Audio2 = Audio
|
|
49508
|
-
}) => /* @__PURE__ */
|
|
49508
|
+
}) => /* @__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 })));
|
|
49509
49509
|
var VoiceRecordingContainer = ({
|
|
49510
49510
|
attachment,
|
|
49511
49511
|
isQuoted,
|
|
49512
49512
|
VoiceRecording: VoiceRecording2 = VoiceRecording
|
|
49513
|
-
}) => /* @__PURE__ */
|
|
49513
|
+
}) => /* @__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 })));
|
|
49514
49514
|
var MediaContainer = (props) => {
|
|
49515
49515
|
const { attachment, Media = import_react_player2.default } = props;
|
|
49516
49516
|
const componentType = "media";
|
|
49517
49517
|
const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } = useChannelStateContext();
|
|
49518
|
-
const videoElement = (0,
|
|
49519
|
-
const [attachmentConfiguration, setAttachmentConfiguration] = (0,
|
|
49520
|
-
(0,
|
|
49518
|
+
const videoElement = (0, import_react253.useRef)(null);
|
|
49519
|
+
const [attachmentConfiguration, setAttachmentConfiguration] = (0, import_react253.useState)();
|
|
49520
|
+
(0, import_react253.useLayoutEffect)(() => {
|
|
49521
49521
|
if (videoElement.current && videoAttachmentSizeHandler) {
|
|
49522
49522
|
const config = videoAttachmentSizeHandler(
|
|
49523
49523
|
attachment,
|
|
@@ -49527,7 +49527,7 @@ var MediaContainer = (props) => {
|
|
|
49527
49527
|
setAttachmentConfiguration(config);
|
|
49528
49528
|
}
|
|
49529
49529
|
}, [videoElement, videoAttachmentSizeHandler, attachment]);
|
|
49530
|
-
const content3 = /* @__PURE__ */
|
|
49530
|
+
const content3 = /* @__PURE__ */ import_react253.default.createElement(
|
|
49531
49531
|
"div",
|
|
49532
49532
|
{
|
|
49533
49533
|
className: "str-chat__player-wrapper",
|
|
@@ -49535,7 +49535,7 @@ var MediaContainer = (props) => {
|
|
|
49535
49535
|
ref: videoElement,
|
|
49536
49536
|
style: getCssDimensionsVariables(attachment.thumb_url || "")
|
|
49537
49537
|
},
|
|
49538
|
-
/* @__PURE__ */
|
|
49538
|
+
/* @__PURE__ */ import_react253.default.createElement(
|
|
49539
49539
|
Media,
|
|
49540
49540
|
{
|
|
49541
49541
|
className: "react-player",
|
|
@@ -49547,12 +49547,12 @@ var MediaContainer = (props) => {
|
|
|
49547
49547
|
}
|
|
49548
49548
|
)
|
|
49549
49549
|
);
|
|
49550
|
-
return attachment.actions?.length ? /* @__PURE__ */
|
|
49550
|
+
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);
|
|
49551
49551
|
};
|
|
49552
49552
|
var UnsupportedAttachmentContainer = ({
|
|
49553
49553
|
attachment,
|
|
49554
49554
|
UnsupportedAttachment: UnsupportedAttachment2 = UnsupportedAttachment
|
|
49555
|
-
}) => /* @__PURE__ */
|
|
49555
|
+
}) => /* @__PURE__ */ import_react253.default.createElement(import_react253.default.Fragment, null, /* @__PURE__ */ import_react253.default.createElement(UnsupportedAttachment2, { attachment }));
|
|
49556
49556
|
|
|
49557
49557
|
// src/components/Attachment/Attachment.tsx
|
|
49558
49558
|
var CONTAINER_MAP = {
|
|
@@ -49575,12 +49575,12 @@ var ATTACHMENT_GROUPS_ORDER = [
|
|
|
49575
49575
|
];
|
|
49576
49576
|
var Attachment = (props) => {
|
|
49577
49577
|
const { attachments } = props;
|
|
49578
|
-
const groupedAttachments = (0,
|
|
49578
|
+
const groupedAttachments = (0, import_react254.useMemo)(
|
|
49579
49579
|
() => renderGroupedAttachments(props),
|
|
49580
49580
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
49581
49581
|
[attachments]
|
|
49582
49582
|
);
|
|
49583
|
-
return /* @__PURE__ */
|
|
49583
|
+
return /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment-list" }, ATTACHMENT_GROUPS_ORDER.reduce(
|
|
49584
49584
|
(acc, groupName) => [...acc, ...groupedAttachments[groupName]],
|
|
49585
49585
|
[]
|
|
49586
49586
|
));
|
|
@@ -49597,7 +49597,7 @@ var renderGroupedAttachments = ({
|
|
|
49597
49597
|
const attachmentType = getAttachmentType(attachment);
|
|
49598
49598
|
const Container = CONTAINER_MAP[attachmentType];
|
|
49599
49599
|
typeMap[attachmentType].push(
|
|
49600
|
-
/* @__PURE__ */
|
|
49600
|
+
/* @__PURE__ */ import_react254.default.createElement(
|
|
49601
49601
|
Container,
|
|
49602
49602
|
{
|
|
49603
49603
|
key: `${attachmentType}-${typeMap[attachmentType].length}`,
|
|
@@ -49624,7 +49624,7 @@ var renderGroupedAttachments = ({
|
|
|
49624
49624
|
);
|
|
49625
49625
|
if (uploadedImages.length > 1) {
|
|
49626
49626
|
containers["gallery"] = [
|
|
49627
|
-
/* @__PURE__ */
|
|
49627
|
+
/* @__PURE__ */ import_react254.default.createElement(
|
|
49628
49628
|
GalleryContainer,
|
|
49629
49629
|
{
|
|
49630
49630
|
key: "gallery-container",
|
|
@@ -49638,7 +49638,7 @@ var renderGroupedAttachments = ({
|
|
|
49638
49638
|
];
|
|
49639
49639
|
} else if (uploadedImages.length === 1) {
|
|
49640
49640
|
containers["image"] = [
|
|
49641
|
-
/* @__PURE__ */
|
|
49641
|
+
/* @__PURE__ */ import_react254.default.createElement(ImageContainer, { key: "image-container", ...rest, attachment: uploadedImages[0] })
|
|
49642
49642
|
];
|
|
49643
49643
|
}
|
|
49644
49644
|
return containers;
|
|
@@ -49659,7 +49659,7 @@ var getAttachmentType = (attachment) => {
|
|
|
49659
49659
|
};
|
|
49660
49660
|
|
|
49661
49661
|
// src/components/Channel/Channel.tsx
|
|
49662
|
-
var
|
|
49662
|
+
var import_react260 = __toESM(require("react"));
|
|
49663
49663
|
var import_clsx66 = __toESM(require("clsx"));
|
|
49664
49664
|
var import_lodash19 = __toESM(require("lodash.debounce"));
|
|
49665
49665
|
var import_lodash20 = __toESM(require("lodash.defaultsdeep"));
|
|
@@ -49840,7 +49840,7 @@ var initialState = {
|
|
|
49840
49840
|
};
|
|
49841
49841
|
|
|
49842
49842
|
// src/components/Channel/hooks/useCreateChannelStateContext.ts
|
|
49843
|
-
var
|
|
49843
|
+
var import_react255 = require("react");
|
|
49844
49844
|
var useCreateChannelStateContext = (value) => {
|
|
49845
49845
|
const {
|
|
49846
49846
|
channel,
|
|
@@ -49899,7 +49899,7 @@ var useCreateChannelStateContext = (value) => {
|
|
|
49899
49899
|
const memoizedThreadMessageData = threadMessages.map(
|
|
49900
49900
|
({ 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}`
|
|
49901
49901
|
).join();
|
|
49902
|
-
const channelStateContext = (0,
|
|
49902
|
+
const channelStateContext = (0, import_react255.useMemo)(
|
|
49903
49903
|
() => ({
|
|
49904
49904
|
channel,
|
|
49905
49905
|
channelCapabilities,
|
|
@@ -49963,11 +49963,11 @@ var useCreateChannelStateContext = (value) => {
|
|
|
49963
49963
|
};
|
|
49964
49964
|
|
|
49965
49965
|
// src/components/Channel/hooks/useCreateTypingContext.ts
|
|
49966
|
-
var
|
|
49966
|
+
var import_react256 = require("react");
|
|
49967
49967
|
var useCreateTypingContext = (value) => {
|
|
49968
49968
|
const { typing } = value;
|
|
49969
49969
|
const typingValue = Object.keys(typing || {}).join();
|
|
49970
|
-
const typingContext = (0,
|
|
49970
|
+
const typingContext = (0, import_react256.useMemo)(
|
|
49971
49971
|
() => ({
|
|
49972
49972
|
typing
|
|
49973
49973
|
}),
|
|
@@ -49991,10 +49991,10 @@ var useEditMessageHandler = (doUpdateMessageRequest) => {
|
|
|
49991
49991
|
};
|
|
49992
49992
|
|
|
49993
49993
|
// src/components/Channel/hooks/useIsMounted.ts
|
|
49994
|
-
var
|
|
49994
|
+
var import_react257 = require("react");
|
|
49995
49995
|
var useIsMounted = () => {
|
|
49996
|
-
const isMounted = (0,
|
|
49997
|
-
(0,
|
|
49996
|
+
const isMounted = (0, import_react257.useRef)(false);
|
|
49997
|
+
(0, import_react257.useEffect)(() => {
|
|
49998
49998
|
isMounted.current = true;
|
|
49999
49999
|
return () => {
|
|
50000
50000
|
isMounted.current = false;
|
|
@@ -50004,8 +50004,8 @@ var useIsMounted = () => {
|
|
|
50004
50004
|
};
|
|
50005
50005
|
|
|
50006
50006
|
// src/components/Channel/hooks/useMentionsHandlers.ts
|
|
50007
|
-
var
|
|
50008
|
-
var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0,
|
|
50007
|
+
var import_react258 = require("react");
|
|
50008
|
+
var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0, import_react258.useCallback)(
|
|
50009
50009
|
(event, mentioned_users) => {
|
|
50010
50010
|
if (!onMentionsHover && !onMentionsClick || !(event.target instanceof HTMLElement)) {
|
|
50011
50011
|
return;
|
|
@@ -50029,11 +50029,11 @@ var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0, import_react
|
|
|
50029
50029
|
);
|
|
50030
50030
|
|
|
50031
50031
|
// src/components/Channel/LoadingChannel.tsx
|
|
50032
|
-
var
|
|
50033
|
-
var LoadingMessage = () => /* @__PURE__ */
|
|
50034
|
-
var LoadingMessageInput = () => /* @__PURE__ */
|
|
50035
|
-
var LoadingChannelHeader = () => /* @__PURE__ */
|
|
50036
|
-
var LoadingChannel = () => /* @__PURE__ */
|
|
50032
|
+
var import_react259 = __toESM(require("react"));
|
|
50033
|
+
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" }))));
|
|
50034
|
+
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" }));
|
|
50035
|
+
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" })));
|
|
50036
|
+
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));
|
|
50037
50037
|
|
|
50038
50038
|
// src/components/Channel/hooks/useChannelContainerClasses.ts
|
|
50039
50039
|
var useImageFlagEmojisOnWindowsClass = () => {
|
|
@@ -50220,7 +50220,7 @@ var ChannelContainer = ({
|
|
|
50220
50220
|
customClasses
|
|
50221
50221
|
});
|
|
50222
50222
|
const className = (0, import_clsx66.default)(chatClass, theme, channelClass, additionalClassName);
|
|
50223
|
-
return /* @__PURE__ */
|
|
50223
|
+
return /* @__PURE__ */ import_react260.default.createElement("div", { id: CHANNEL_CONTAINER_ID, ...props, className }, children);
|
|
50224
50224
|
};
|
|
50225
50225
|
var UnMemoizedChannel = (props) => {
|
|
50226
50226
|
const {
|
|
@@ -50232,15 +50232,15 @@ var UnMemoizedChannel = (props) => {
|
|
|
50232
50232
|
const { channel: contextChannel, channelsQueryState } = useChatContext("Channel");
|
|
50233
50233
|
const channel = propsChannel || contextChannel;
|
|
50234
50234
|
if (channelsQueryState.queryInProgress === "reload" && LoadingIndicator2) {
|
|
50235
|
-
return /* @__PURE__ */
|
|
50235
|
+
return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement(LoadingIndicator2, null));
|
|
50236
50236
|
}
|
|
50237
50237
|
if (channelsQueryState.error && LoadingErrorIndicator2) {
|
|
50238
|
-
return /* @__PURE__ */
|
|
50238
|
+
return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement(LoadingErrorIndicator2, { error: channelsQueryState.error }));
|
|
50239
50239
|
}
|
|
50240
50240
|
if (!channel?.cid) {
|
|
50241
|
-
return /* @__PURE__ */
|
|
50241
|
+
return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, EmptyPlaceholder2);
|
|
50242
50242
|
}
|
|
50243
|
-
return /* @__PURE__ */
|
|
50243
|
+
return /* @__PURE__ */ import_react260.default.createElement(ChannelInner, { ...props, channel, key: channel.cid });
|
|
50244
50244
|
};
|
|
50245
50245
|
var ChannelInner = (props) => {
|
|
50246
50246
|
const {
|
|
@@ -50260,7 +50260,7 @@ var ChannelInner = (props) => {
|
|
|
50260
50260
|
onMentionsHover,
|
|
50261
50261
|
skipMessageDataMemoization
|
|
50262
50262
|
} = props;
|
|
50263
|
-
const channelQueryOptions = (0,
|
|
50263
|
+
const channelQueryOptions = (0, import_react260.useMemo)(
|
|
50264
50264
|
() => (0, import_lodash20.default)(propChannelQueryOptions, {
|
|
50265
50265
|
messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE }
|
|
50266
50266
|
}),
|
|
@@ -50271,12 +50271,12 @@ var ChannelInner = (props) => {
|
|
|
50271
50271
|
const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
|
|
50272
50272
|
const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
|
|
50273
50273
|
const thread = useThreadContext();
|
|
50274
|
-
const [channelConfig, setChannelConfig] = (0,
|
|
50275
|
-
const [notifications, setNotifications] = (0,
|
|
50276
|
-
const notificationTimeouts = (0,
|
|
50277
|
-
const [channelUnreadUiState, _setChannelUnreadUiState] = (0,
|
|
50278
|
-
const channelReducer = (0,
|
|
50279
|
-
const [state, dispatch] = (0,
|
|
50274
|
+
const [channelConfig, setChannelConfig] = (0, import_react260.useState)(channel.getConfig());
|
|
50275
|
+
const [notifications, setNotifications] = (0, import_react260.useState)([]);
|
|
50276
|
+
const notificationTimeouts = (0, import_react260.useRef)([]);
|
|
50277
|
+
const [channelUnreadUiState, _setChannelUnreadUiState] = (0, import_react260.useState)();
|
|
50278
|
+
const channelReducer = (0, import_react260.useMemo)(() => makeChannelReducer(), []);
|
|
50279
|
+
const [state, dispatch] = (0, import_react260.useReducer)(
|
|
50280
50280
|
channelReducer,
|
|
50281
50281
|
// channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
|
|
50282
50282
|
// => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state
|
|
@@ -50288,10 +50288,10 @@ var ChannelInner = (props) => {
|
|
|
50288
50288
|
);
|
|
50289
50289
|
const jumpToMessageFromSearch = useSearchFocusedMessage();
|
|
50290
50290
|
const isMounted = useIsMounted();
|
|
50291
|
-
const originalTitle = (0,
|
|
50292
|
-
const lastRead = (0,
|
|
50293
|
-
const online = (0,
|
|
50294
|
-
const clearHighlightedMessageTimeoutId = (0,
|
|
50291
|
+
const originalTitle = (0, import_react260.useRef)("");
|
|
50292
|
+
const lastRead = (0, import_react260.useRef)(void 0);
|
|
50293
|
+
const online = (0, import_react260.useRef)(true);
|
|
50294
|
+
const clearHighlightedMessageTimeoutId = (0, import_react260.useRef)(
|
|
50295
50295
|
null
|
|
50296
50296
|
);
|
|
50297
50297
|
const channelCapabilitiesArray = channel.data?.own_capabilities;
|
|
@@ -50303,14 +50303,14 @@ var ChannelInner = (props) => {
|
|
|
50303
50303
|
trailing: true
|
|
50304
50304
|
}
|
|
50305
50305
|
);
|
|
50306
|
-
const setChannelUnreadUiState = (0,
|
|
50306
|
+
const setChannelUnreadUiState = (0, import_react260.useMemo)(
|
|
50307
50307
|
() => (0, import_lodash21.default)(_setChannelUnreadUiState, 200, {
|
|
50308
50308
|
leading: true,
|
|
50309
50309
|
trailing: false
|
|
50310
50310
|
}),
|
|
50311
50311
|
[]
|
|
50312
50312
|
);
|
|
50313
|
-
const markRead = (0,
|
|
50313
|
+
const markRead = (0, import_react260.useMemo)(
|
|
50314
50314
|
() => (0, import_lodash21.default)(
|
|
50315
50315
|
async (options) => {
|
|
50316
50316
|
const { updateChannelUiUnreadState = true } = options ?? {};
|
|
@@ -50413,7 +50413,7 @@ var ChannelInner = (props) => {
|
|
|
50413
50413
|
}
|
|
50414
50414
|
throttledCopyStateFromChannel();
|
|
50415
50415
|
};
|
|
50416
|
-
(0,
|
|
50416
|
+
(0, import_react260.useLayoutEffect)(() => {
|
|
50417
50417
|
let errored = false;
|
|
50418
50418
|
let done = false;
|
|
50419
50419
|
(async () => {
|
|
@@ -50479,12 +50479,12 @@ var ChannelInner = (props) => {
|
|
|
50479
50479
|
channelConfig?.read_events,
|
|
50480
50480
|
initializeOnMount
|
|
50481
50481
|
]);
|
|
50482
|
-
(0,
|
|
50482
|
+
(0, import_react260.useEffect)(() => {
|
|
50483
50483
|
if (!state.thread) return;
|
|
50484
50484
|
const message = state.messages?.find((m) => m.id === state.thread?.id);
|
|
50485
50485
|
if (message) dispatch({ message, type: "setThread" });
|
|
50486
50486
|
}, [state.messages, state.thread]);
|
|
50487
|
-
const handleHighlightedMessageChange = (0,
|
|
50487
|
+
const handleHighlightedMessageChange = (0, import_react260.useCallback)(
|
|
50488
50488
|
({
|
|
50489
50489
|
highlightDuration,
|
|
50490
50490
|
highlightedMessageId
|
|
@@ -50507,15 +50507,15 @@ var ChannelInner = (props) => {
|
|
|
50507
50507
|
},
|
|
50508
50508
|
[channel, searchController]
|
|
50509
50509
|
);
|
|
50510
|
-
(0,
|
|
50510
|
+
(0, import_react260.useEffect)(() => {
|
|
50511
50511
|
if (!jumpToMessageFromSearch?.id) return;
|
|
50512
50512
|
handleHighlightedMessageChange({ highlightedMessageId: jumpToMessageFromSearch.id });
|
|
50513
50513
|
}, [jumpToMessageFromSearch, handleHighlightedMessageChange]);
|
|
50514
|
-
const addNotification = (0,
|
|
50514
|
+
const addNotification = (0, import_react260.useMemo)(
|
|
50515
50515
|
() => makeAddNotifications(setNotifications, notificationTimeouts.current),
|
|
50516
50516
|
[]
|
|
50517
50517
|
);
|
|
50518
|
-
const loadMoreFinished = (0,
|
|
50518
|
+
const loadMoreFinished = (0, import_react260.useCallback)(
|
|
50519
50519
|
(0, import_lodash19.default)(
|
|
50520
50520
|
(hasMore, messages) => {
|
|
50521
50521
|
if (!isMounted.current) return;
|
|
@@ -50576,7 +50576,7 @@ var ChannelInner = (props) => {
|
|
|
50576
50576
|
});
|
|
50577
50577
|
return queryResponse.messages.length;
|
|
50578
50578
|
};
|
|
50579
|
-
const jumpToMessage = (0,
|
|
50579
|
+
const jumpToMessage = (0, import_react260.useCallback)(
|
|
50580
50580
|
async (messageId, messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
|
|
50581
50581
|
dispatch({ loadingMore: true, type: "setLoadingMore" });
|
|
50582
50582
|
await channel.state.loadMessageIntoState(messageId, void 0, messageLimit);
|
|
@@ -50588,14 +50588,14 @@ var ChannelInner = (props) => {
|
|
|
50588
50588
|
},
|
|
50589
50589
|
[channel, handleHighlightedMessageChange, loadMoreFinished]
|
|
50590
50590
|
);
|
|
50591
|
-
const jumpToLatestMessage = (0,
|
|
50591
|
+
const jumpToLatestMessage = (0, import_react260.useCallback)(async () => {
|
|
50592
50592
|
await channel.state.loadMessageIntoState("latest");
|
|
50593
50593
|
loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
|
|
50594
50594
|
dispatch({
|
|
50595
50595
|
type: "jumpToLatestMessage"
|
|
50596
50596
|
});
|
|
50597
50597
|
}, [channel, loadMoreFinished]);
|
|
50598
|
-
const jumpToFirstUnreadMessage = (0,
|
|
50598
|
+
const jumpToFirstUnreadMessage = (0, import_react260.useCallback)(
|
|
50599
50599
|
async (queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
|
|
50600
50600
|
if (!channelUnreadUiState?.unread_messages) return;
|
|
50601
50601
|
let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
|
|
@@ -50718,7 +50718,7 @@ var ChannelInner = (props) => {
|
|
|
50718
50718
|
channelUnreadUiState
|
|
50719
50719
|
]
|
|
50720
50720
|
);
|
|
50721
|
-
const deleteMessage = (0,
|
|
50721
|
+
const deleteMessage = (0, import_react260.useCallback)(
|
|
50722
50722
|
async (message) => {
|
|
50723
50723
|
if (!message?.id) {
|
|
50724
50724
|
throw new Error("Cannot delete a message - missing message ID.");
|
|
@@ -50836,7 +50836,7 @@ var ChannelInner = (props) => {
|
|
|
50836
50836
|
event?.preventDefault();
|
|
50837
50837
|
dispatch({ type: "closeThread" });
|
|
50838
50838
|
};
|
|
50839
|
-
const loadMoreThreadFinished = (0,
|
|
50839
|
+
const loadMoreThreadFinished = (0, import_react260.useCallback)(
|
|
50840
50840
|
(0, import_lodash19.default)(
|
|
50841
50841
|
(threadHasMore, threadMessages) => {
|
|
50842
50842
|
dispatch({
|
|
@@ -50891,7 +50891,7 @@ var ChannelInner = (props) => {
|
|
|
50891
50891
|
videoAttachmentSizeHandler: props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration,
|
|
50892
50892
|
watcher_count: state.watcherCount
|
|
50893
50893
|
});
|
|
50894
|
-
const channelActionContextValue = (0,
|
|
50894
|
+
const channelActionContextValue = (0, import_react260.useMemo)(
|
|
50895
50895
|
() => ({
|
|
50896
50896
|
addNotification,
|
|
50897
50897
|
closeThread,
|
|
@@ -50928,7 +50928,7 @@ var ChannelInner = (props) => {
|
|
|
50928
50928
|
setChannelUnreadUiState
|
|
50929
50929
|
]
|
|
50930
50930
|
);
|
|
50931
|
-
const componentContextValue = (0,
|
|
50931
|
+
const componentContextValue = (0, import_react260.useMemo)(
|
|
50932
50932
|
() => ({
|
|
50933
50933
|
Attachment: props.Attachment,
|
|
50934
50934
|
AttachmentPreviewList: props.AttachmentPreviewList,
|
|
@@ -51058,26 +51058,26 @@ var ChannelInner = (props) => {
|
|
|
51058
51058
|
typing
|
|
51059
51059
|
});
|
|
51060
51060
|
if (state.error) {
|
|
51061
|
-
return /* @__PURE__ */
|
|
51061
|
+
return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement(LoadingErrorIndicator2, { error: state.error }));
|
|
51062
51062
|
}
|
|
51063
51063
|
if (state.loading) {
|
|
51064
|
-
return /* @__PURE__ */
|
|
51064
|
+
return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement(LoadingIndicator2, null));
|
|
51065
51065
|
}
|
|
51066
51066
|
if (!channel.watch) {
|
|
51067
|
-
return /* @__PURE__ */
|
|
51067
|
+
return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement("div", null, t("Channel Missing")));
|
|
51068
51068
|
}
|
|
51069
|
-
return /* @__PURE__ */
|
|
51069
|
+
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))))));
|
|
51070
51070
|
};
|
|
51071
|
-
var Channel =
|
|
51071
|
+
var Channel = import_react260.default.memo(UnMemoizedChannel);
|
|
51072
51072
|
|
|
51073
51073
|
// src/components/ChannelHeader/ChannelHeader.tsx
|
|
51074
|
-
var
|
|
51074
|
+
var import_react262 = __toESM(require("react"));
|
|
51075
51075
|
|
|
51076
51076
|
// src/components/ChannelHeader/icons.tsx
|
|
51077
|
-
var
|
|
51077
|
+
var import_react261 = __toESM(require("react"));
|
|
51078
51078
|
var MenuIcon2 = ({ title }) => {
|
|
51079
51079
|
const { t } = useTranslationContext("MenuIcon");
|
|
51080
|
-
return /* @__PURE__ */
|
|
51080
|
+
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(
|
|
51081
51081
|
"path",
|
|
51082
51082
|
{
|
|
51083
51083
|
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",
|
|
@@ -51104,15 +51104,15 @@ var ChannelHeader = (props) => {
|
|
|
51104
51104
|
overrideTitle
|
|
51105
51105
|
});
|
|
51106
51106
|
const { member_count, subtitle } = channel?.data || {};
|
|
51107
|
-
return /* @__PURE__ */
|
|
51107
|
+
return /* @__PURE__ */ import_react262.default.createElement("div", { className: "str-chat__channel-header" }, /* @__PURE__ */ import_react262.default.createElement(
|
|
51108
51108
|
"button",
|
|
51109
51109
|
{
|
|
51110
51110
|
"aria-label": t("aria/Menu"),
|
|
51111
51111
|
className: "str-chat__header-hamburger",
|
|
51112
51112
|
onClick: openMobileNav
|
|
51113
51113
|
},
|
|
51114
|
-
/* @__PURE__ */
|
|
51115
|
-
), /* @__PURE__ */
|
|
51114
|
+
/* @__PURE__ */ import_react262.default.createElement(MenuIcon3, null)
|
|
51115
|
+
), /* @__PURE__ */ import_react262.default.createElement(
|
|
51116
51116
|
Avatar2,
|
|
51117
51117
|
{
|
|
51118
51118
|
className: "str-chat__avatar--channel-header",
|
|
@@ -51120,36 +51120,36 @@ var ChannelHeader = (props) => {
|
|
|
51120
51120
|
image: displayImage,
|
|
51121
51121
|
name: displayTitle
|
|
51122
51122
|
}
|
|
51123
|
-
), /* @__PURE__ */
|
|
51123
|
+
), /* @__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", {
|
|
51124
51124
|
memberCount: member_count
|
|
51125
51125
|
}), ",", " "), t("{{ watcherCount }} online", { watcherCount: watcher_count }))));
|
|
51126
51126
|
};
|
|
51127
51127
|
|
|
51128
51128
|
// src/components/Chat/Chat.tsx
|
|
51129
|
-
var
|
|
51129
|
+
var import_react266 = __toESM(require("react"));
|
|
51130
51130
|
var import_stream_chat12 = require("stream-chat");
|
|
51131
51131
|
|
|
51132
51132
|
// src/components/Chat/hooks/useChat.ts
|
|
51133
|
-
var
|
|
51133
|
+
var import_react263 = require("react");
|
|
51134
51134
|
var useChat = ({
|
|
51135
51135
|
client,
|
|
51136
51136
|
defaultLanguage = "en",
|
|
51137
51137
|
i18nInstance,
|
|
51138
51138
|
initialNavOpen
|
|
51139
51139
|
}) => {
|
|
51140
|
-
const [translators, setTranslators] = (0,
|
|
51140
|
+
const [translators, setTranslators] = (0, import_react263.useState)({
|
|
51141
51141
|
t: (key) => key,
|
|
51142
51142
|
tDateTimeParser: defaultDateTimeParser,
|
|
51143
51143
|
userLanguage: "en"
|
|
51144
51144
|
});
|
|
51145
|
-
const [channel, setChannel] = (0,
|
|
51146
|
-
const [mutes, setMutes] = (0,
|
|
51147
|
-
const [navOpen, setNavOpen] = (0,
|
|
51148
|
-
const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0,
|
|
51145
|
+
const [channel, setChannel] = (0, import_react263.useState)();
|
|
51146
|
+
const [mutes, setMutes] = (0, import_react263.useState)([]);
|
|
51147
|
+
const [navOpen, setNavOpen] = (0, import_react263.useState)(initialNavOpen);
|
|
51148
|
+
const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0, import_react263.useState)({});
|
|
51149
51149
|
const clientMutes = client.user?.mutes ?? [];
|
|
51150
51150
|
const closeMobileNav = () => setNavOpen(false);
|
|
51151
51151
|
const openMobileNav = () => setTimeout(() => setNavOpen(true), 100);
|
|
51152
|
-
const appSettings = (0,
|
|
51152
|
+
const appSettings = (0, import_react263.useRef)(null);
|
|
51153
51153
|
const getAppSettings = () => {
|
|
51154
51154
|
if (appSettings.current) {
|
|
51155
51155
|
return appSettings.current;
|
|
@@ -51157,9 +51157,9 @@ var useChat = ({
|
|
|
51157
51157
|
appSettings.current = client.getAppSettings();
|
|
51158
51158
|
return appSettings.current;
|
|
51159
51159
|
};
|
|
51160
|
-
(0,
|
|
51160
|
+
(0, import_react263.useEffect)(() => {
|
|
51161
51161
|
if (!client) return;
|
|
51162
|
-
const version = "13.0.0-rc.
|
|
51162
|
+
const version = "13.0.0-rc.2";
|
|
51163
51163
|
const userAgent = client.getUserAgent();
|
|
51164
51164
|
if (!userAgent.includes("stream-chat-react")) {
|
|
51165
51165
|
client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
|
|
@@ -51171,7 +51171,7 @@ var useChat = ({
|
|
|
51171
51171
|
client.polls.unregisterSubscriptions();
|
|
51172
51172
|
};
|
|
51173
51173
|
}, [client]);
|
|
51174
|
-
(0,
|
|
51174
|
+
(0, import_react263.useEffect)(() => {
|
|
51175
51175
|
setMutes(clientMutes);
|
|
51176
51176
|
const handleEvent = (event) => {
|
|
51177
51177
|
setMutes(event.me?.mutes || []);
|
|
@@ -51179,7 +51179,7 @@ var useChat = ({
|
|
|
51179
51179
|
client.on("notification.mutes_updated", handleEvent);
|
|
51180
51180
|
return () => client.off("notification.mutes_updated", handleEvent);
|
|
51181
51181
|
}, [clientMutes?.length]);
|
|
51182
|
-
(0,
|
|
51182
|
+
(0, import_react263.useEffect)(() => {
|
|
51183
51183
|
let userLanguage = client.user?.language;
|
|
51184
51184
|
if (!userLanguage) {
|
|
51185
51185
|
const browserLanguage = window.navigator.language.slice(0, 2);
|
|
@@ -51196,7 +51196,7 @@ var useChat = ({
|
|
|
51196
51196
|
});
|
|
51197
51197
|
});
|
|
51198
51198
|
}, [i18nInstance]);
|
|
51199
|
-
const setActiveChannel = (0,
|
|
51199
|
+
const setActiveChannel = (0, import_react263.useCallback)(
|
|
51200
51200
|
async (activeChannel, watchers = {}, event) => {
|
|
51201
51201
|
if (event && event.preventDefault) event.preventDefault();
|
|
51202
51202
|
if (activeChannel && Object.keys(watchers).length) {
|
|
@@ -51207,7 +51207,7 @@ var useChat = ({
|
|
|
51207
51207
|
},
|
|
51208
51208
|
[]
|
|
51209
51209
|
);
|
|
51210
|
-
(0,
|
|
51210
|
+
(0, import_react263.useEffect)(() => {
|
|
51211
51211
|
setLatestMessageDatesByChannels({});
|
|
51212
51212
|
}, [client.user?.id]);
|
|
51213
51213
|
return {
|
|
@@ -51224,7 +51224,7 @@ var useChat = ({
|
|
|
51224
51224
|
};
|
|
51225
51225
|
|
|
51226
51226
|
// src/components/Chat/hooks/useCreateChatContext.ts
|
|
51227
|
-
var
|
|
51227
|
+
var import_react264 = require("react");
|
|
51228
51228
|
var useCreateChatContext = (value) => {
|
|
51229
51229
|
const {
|
|
51230
51230
|
channel,
|
|
@@ -51249,7 +51249,7 @@ var useCreateChatContext = (value) => {
|
|
|
51249
51249
|
const clientValues = `${client.clientID}${Object.keys(client.activeChannels).length}${Object.keys(client.listeners).length}${client.mutedChannels.length}
|
|
51250
51250
|
${client.user?.id}`;
|
|
51251
51251
|
const mutedUsersLength = mutes.length;
|
|
51252
|
-
const chatContext = (0,
|
|
51252
|
+
const chatContext = (0, import_react264.useMemo)(
|
|
51253
51253
|
() => ({
|
|
51254
51254
|
channel,
|
|
51255
51255
|
channelsQueryState,
|
|
@@ -51284,10 +51284,10 @@ var useCreateChatContext = (value) => {
|
|
|
51284
51284
|
};
|
|
51285
51285
|
|
|
51286
51286
|
// src/components/Chat/hooks/useChannelsQueryState.ts
|
|
51287
|
-
var
|
|
51287
|
+
var import_react265 = require("react");
|
|
51288
51288
|
var useChannelsQueryState = () => {
|
|
51289
|
-
const [error, setError] = (0,
|
|
51290
|
-
const [queryInProgress, setQueryInProgress] = (0,
|
|
51289
|
+
const [error, setError] = (0, import_react265.useState)(null);
|
|
51290
|
+
const [queryInProgress, setQueryInProgress] = (0, import_react265.useState)("uninitialized");
|
|
51291
51291
|
return {
|
|
51292
51292
|
error,
|
|
51293
51293
|
queryInProgress,
|
|
@@ -51322,7 +51322,7 @@ var Chat = (props) => {
|
|
|
51322
51322
|
translators
|
|
51323
51323
|
} = useChat({ client, defaultLanguage, i18nInstance, initialNavOpen });
|
|
51324
51324
|
const channelsQueryState = useChannelsQueryState();
|
|
51325
|
-
const searchController = (0,
|
|
51325
|
+
const searchController = (0, import_react266.useMemo)(
|
|
51326
51326
|
() => customChannelSearchController ?? new import_stream_chat12.SearchController({
|
|
51327
51327
|
sources: [
|
|
51328
51328
|
new import_stream_chat12.ChannelSearchSource(client),
|
|
@@ -51350,11 +51350,11 @@ var Chat = (props) => {
|
|
|
51350
51350
|
useImageFlagEmojisOnWindows
|
|
51351
51351
|
});
|
|
51352
51352
|
if (!translators.t) return null;
|
|
51353
|
-
return /* @__PURE__ */
|
|
51353
|
+
return /* @__PURE__ */ import_react266.default.createElement(ChatProvider, { value: chatContextValue }, /* @__PURE__ */ import_react266.default.createElement(TranslationProvider, { value: translators }, children));
|
|
51354
51354
|
};
|
|
51355
51355
|
|
|
51356
51356
|
// src/components/Chat/hooks/useCreateChatClient.ts
|
|
51357
|
-
var
|
|
51357
|
+
var import_react267 = require("react");
|
|
51358
51358
|
var import_stream_chat13 = require("stream-chat");
|
|
51359
51359
|
var useCreateChatClient = ({
|
|
51360
51360
|
apiKey,
|
|
@@ -51362,13 +51362,13 @@ var useCreateChatClient = ({
|
|
|
51362
51362
|
tokenOrProvider,
|
|
51363
51363
|
userData
|
|
51364
51364
|
}) => {
|
|
51365
|
-
const [chatClient, setChatClient] = (0,
|
|
51366
|
-
const [cachedUserData, setCachedUserData] = (0,
|
|
51365
|
+
const [chatClient, setChatClient] = (0, import_react267.useState)(null);
|
|
51366
|
+
const [cachedUserData, setCachedUserData] = (0, import_react267.useState)(userData);
|
|
51367
51367
|
if (userData.id !== cachedUserData.id) {
|
|
51368
51368
|
setCachedUserData(userData);
|
|
51369
51369
|
}
|
|
51370
|
-
const [cachedOptions] = (0,
|
|
51371
|
-
(0,
|
|
51370
|
+
const [cachedOptions] = (0, import_react267.useState)(options);
|
|
51371
|
+
(0, import_react267.useEffect)(() => {
|
|
51372
51372
|
const client = new import_stream_chat13.StreamChat(apiKey, void 0, cachedOptions);
|
|
51373
51373
|
let didUserConnectInterrupt = false;
|
|
51374
51374
|
const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
|
|
@@ -51386,12 +51386,12 @@ var useCreateChatClient = ({
|
|
|
51386
51386
|
};
|
|
51387
51387
|
|
|
51388
51388
|
// src/components/Window/Window.tsx
|
|
51389
|
-
var
|
|
51389
|
+
var import_react268 = __toESM(require("react"));
|
|
51390
51390
|
var import_clsx67 = __toESM(require("clsx"));
|
|
51391
51391
|
var UnMemoizedWindow = (props) => {
|
|
51392
51392
|
const { children, thread: propThread } = props;
|
|
51393
51393
|
const { thread: contextThread } = useChannelStateContext("Window");
|
|
51394
|
-
return /* @__PURE__ */
|
|
51394
|
+
return /* @__PURE__ */ import_react268.default.createElement(
|
|
51395
51395
|
"div",
|
|
51396
51396
|
{
|
|
51397
51397
|
className: (0, import_clsx67.default)("str-chat__main-panel", {
|
|
@@ -51401,7 +51401,7 @@ var UnMemoizedWindow = (props) => {
|
|
|
51401
51401
|
children
|
|
51402
51402
|
);
|
|
51403
51403
|
};
|
|
51404
|
-
var Window =
|
|
51404
|
+
var Window = import_react268.default.memo(UnMemoizedWindow);
|
|
51405
51405
|
/*! Bundled license information:
|
|
51406
51406
|
|
|
51407
51407
|
is-buffer/index.js:
|