stream-chat-react 13.0.3 → 13.0.4
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/Dialog/DialogManager.js +2 -1
- package/dist/components/MessageInput/AttachmentSelector.js +3 -3
- package/dist/components/MessageInput/MessageInput.js +4 -2
- package/dist/components/MessageList/MessageList.js +4 -2
- package/dist/components/MessageList/VirtualizedMessageList.js +4 -2
- package/dist/components/UtilityComponents/useStableId.d.ts +5 -0
- package/dist/components/UtilityComponents/useStableId.js +11 -0
- package/dist/experimental/index.browser.cjs.map +1 -1
- package/dist/experimental/index.node.cjs.map +1 -1
- package/dist/index.browser.cjs +576 -565
- package/dist/index.browser.cjs.map +4 -4
- package/dist/index.node.cjs +576 -565
- package/dist/index.node.cjs.map +4 -4
- package/package.json +1 -1
package/dist/index.node.cjs
CHANGED
|
@@ -20474,11 +20474,11 @@ __export(src_exports, {
|
|
|
20474
20474
|
module.exports = __toCommonJS(src_exports);
|
|
20475
20475
|
|
|
20476
20476
|
// src/components/Attachment/Attachment.tsx
|
|
20477
|
-
var
|
|
20477
|
+
var import_react255 = __toESM(require("react"));
|
|
20478
20478
|
var import_stream_chat11 = require("stream-chat");
|
|
20479
20479
|
|
|
20480
20480
|
// src/components/Attachment/AttachmentContainer.tsx
|
|
20481
|
-
var
|
|
20481
|
+
var import_react254 = __toESM(require("react"));
|
|
20482
20482
|
var import_react_player2 = __toESM(require("react-player"));
|
|
20483
20483
|
var import_clsx65 = __toESM(require("clsx"));
|
|
20484
20484
|
var linkify = __toESM(require("linkifyjs"));
|
|
@@ -20610,13 +20610,14 @@ var withComponentContext = (Component2) => {
|
|
|
20610
20610
|
var import_react10 = __toESM(require("react"));
|
|
20611
20611
|
|
|
20612
20612
|
// src/components/Dialog/DialogManager.ts
|
|
20613
|
+
var import_nanoid = require("nanoid");
|
|
20613
20614
|
var import_stream_chat = require("stream-chat");
|
|
20614
20615
|
var DialogManager = class {
|
|
20615
20616
|
constructor({ id } = {}) {
|
|
20616
20617
|
this.state = new import_stream_chat.StateStore({
|
|
20617
20618
|
dialogsById: {}
|
|
20618
20619
|
});
|
|
20619
|
-
this.id = id ?? (
|
|
20620
|
+
this.id = id ?? (0, import_nanoid.nanoid)();
|
|
20620
20621
|
}
|
|
20621
20622
|
get openDialogCount() {
|
|
20622
20623
|
return Object.values(this.state.getLatestValue().dialogsById).reduce(
|
|
@@ -21723,7 +21724,7 @@ var UnMemoizedAudio = (props) => {
|
|
|
21723
21724
|
var Audio = import_react29.default.memo(UnMemoizedAudio);
|
|
21724
21725
|
|
|
21725
21726
|
// src/components/Attachment/VoiceRecording.tsx
|
|
21726
|
-
var
|
|
21727
|
+
var import_react250 = __toESM(require("react"));
|
|
21727
21728
|
|
|
21728
21729
|
// src/components/ReactFileUtilities/FileIcon/FileIcon.tsx
|
|
21729
21730
|
var import_react31 = __toESM(require("react"));
|
|
@@ -22685,8 +22686,8 @@ var FileIcon = (props) => {
|
|
|
22685
22686
|
|
|
22686
22687
|
// src/components/ReactFileUtilities/UploadButton.tsx
|
|
22687
22688
|
var import_clsx63 = __toESM(require("clsx"));
|
|
22688
|
-
var
|
|
22689
|
-
var
|
|
22689
|
+
var import_nanoid6 = require("nanoid");
|
|
22690
|
+
var import_react249 = __toESM(require("react"));
|
|
22690
22691
|
|
|
22691
22692
|
// src/components/ReactFileUtilities/utils.ts
|
|
22692
22693
|
var import_react32 = require("react");
|
|
@@ -22786,14 +22787,13 @@ var readFileAsArrayBuffer = (file) => new Promise((resolve, reject) => {
|
|
|
22786
22787
|
});
|
|
22787
22788
|
|
|
22788
22789
|
// src/components/MessageInput/AttachmentSelector.tsx
|
|
22789
|
-
var
|
|
22790
|
-
var import_react209 = __toESM(require("react"));
|
|
22790
|
+
var import_react210 = __toESM(require("react"));
|
|
22791
22791
|
|
|
22792
22792
|
// src/components/MessageInput/icons.tsx
|
|
22793
22793
|
var import_react33 = __toESM(require("react"));
|
|
22794
|
-
var
|
|
22794
|
+
var import_nanoid2 = require("nanoid");
|
|
22795
22795
|
var LoadingIndicatorIcon = ({ size = 20 }) => {
|
|
22796
|
-
const id = (0, import_react33.useMemo)(() => (0,
|
|
22796
|
+
const id = (0, import_react33.useMemo)(() => (0, import_nanoid2.nanoid)(), []);
|
|
22797
22797
|
return /* @__PURE__ */ import_react33.default.createElement("div", { className: "str-chat__loading-indicator" }, /* @__PURE__ */ import_react33.default.createElement(
|
|
22798
22798
|
"svg",
|
|
22799
22799
|
{
|
|
@@ -22962,7 +22962,7 @@ var PlayIcon = () => /* @__PURE__ */ import_react33.default.createElement(
|
|
|
22962
22962
|
var CheckSignIcon = () => /* @__PURE__ */ import_react33.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 18 14", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react33.default.createElement("path", { d: "M5.79457 10.875L2.32457 7.40502C1.93457 7.01502 1.30457 7.01502 0.91457 7.40502C0.52457 7.79502 0.52457 8.42502 0.91457 8.81502L5.09457 12.995C5.48457 13.385 6.11457 13.385 6.50457 12.995L17.0846 2.41502C17.4746 2.02502 17.4746 1.39502 17.0846 1.00502C16.6946 0.615024 16.0646 0.615024 15.6746 1.00502L5.79457 10.875Z" }));
|
|
22963
22963
|
|
|
22964
22964
|
// src/components/MessageInput/hooks/useMessageComposer.ts
|
|
22965
|
-
var
|
|
22965
|
+
var import_react207 = require("react");
|
|
22966
22966
|
var import_stream_chat6 = require("stream-chat");
|
|
22967
22967
|
|
|
22968
22968
|
// src/components/Threads/ThreadContext.tsx
|
|
@@ -37594,7 +37594,7 @@ var ThreadList = ({ virtuosoProps }) => {
|
|
|
37594
37594
|
};
|
|
37595
37595
|
|
|
37596
37596
|
// src/components/Thread/Thread.tsx
|
|
37597
|
-
var
|
|
37597
|
+
var import_react206 = __toESM(require("react"));
|
|
37598
37598
|
var import_clsx53 = __toESM(require("clsx"));
|
|
37599
37599
|
|
|
37600
37600
|
// src/components/Message/FixedHeightMessage.tsx
|
|
@@ -42705,10 +42705,10 @@ var FixedHeightMessage = import_react108.default.memo(
|
|
|
42705
42705
|
);
|
|
42706
42706
|
|
|
42707
42707
|
// src/components/Message/Message.tsx
|
|
42708
|
-
var
|
|
42708
|
+
var import_react201 = __toESM(require("react"));
|
|
42709
42709
|
|
|
42710
42710
|
// src/components/Message/MessageSimple.tsx
|
|
42711
|
-
var
|
|
42711
|
+
var import_react200 = __toESM(require("react"));
|
|
42712
42712
|
var import_clsx52 = __toESM(require("clsx"));
|
|
42713
42713
|
|
|
42714
42714
|
// src/components/MessageBounce/MessageBounceModal.tsx
|
|
@@ -45432,13 +45432,13 @@ var GiphyPreviewMessage = (props) => {
|
|
|
45432
45432
|
|
|
45433
45433
|
// src/components/MessageList/MessageList.tsx
|
|
45434
45434
|
var import_clsx49 = __toESM(require("clsx"));
|
|
45435
|
-
var
|
|
45435
|
+
var import_react188 = __toESM(require("react"));
|
|
45436
45436
|
|
|
45437
45437
|
// src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
|
|
45438
45438
|
var import_react169 = require("react");
|
|
45439
45439
|
|
|
45440
45440
|
// src/components/MessageList/utils.ts
|
|
45441
|
-
var
|
|
45441
|
+
var import_nanoid3 = require("nanoid");
|
|
45442
45442
|
|
|
45443
45443
|
// src/constants/messageTypes.ts
|
|
45444
45444
|
var CUSTOM_MESSAGE_TYPE = {
|
|
@@ -48547,14 +48547,14 @@ var processMessages = (params) => {
|
|
|
48547
48547
|
};
|
|
48548
48548
|
var makeIntroMessage = () => ({
|
|
48549
48549
|
customType: CUSTOM_MESSAGE_TYPE.intro,
|
|
48550
|
-
id: (0,
|
|
48550
|
+
id: (0, import_nanoid3.nanoid)()
|
|
48551
48551
|
});
|
|
48552
48552
|
var makeDateMessageId = (date) => {
|
|
48553
48553
|
let idSuffix;
|
|
48554
48554
|
try {
|
|
48555
|
-
idSuffix = !date ? (0,
|
|
48555
|
+
idSuffix = !date ? (0, import_nanoid3.nanoid)() : date instanceof Date ? date.toISOString() : date;
|
|
48556
48556
|
} catch (e) {
|
|
48557
|
-
idSuffix = (0,
|
|
48557
|
+
idSuffix = (0, import_nanoid3.nanoid)();
|
|
48558
48558
|
}
|
|
48559
48559
|
return `${CUSTOM_MESSAGE_TYPE.date}-${idSuffix}`;
|
|
48560
48560
|
};
|
|
@@ -49492,6 +49492,14 @@ function defaultRenderMessages({
|
|
|
49492
49492
|
return renderedMessages;
|
|
49493
49493
|
}
|
|
49494
49494
|
|
|
49495
|
+
// src/components/UtilityComponents/useStableId.ts
|
|
49496
|
+
var import_nanoid4 = require("nanoid");
|
|
49497
|
+
var import_react187 = require("react");
|
|
49498
|
+
var useStableId = (key) => {
|
|
49499
|
+
const id = (0, import_react187.useMemo)(() => (0, import_nanoid4.nanoid)(), [key]);
|
|
49500
|
+
return id;
|
|
49501
|
+
};
|
|
49502
|
+
|
|
49495
49503
|
// src/components/MessageList/MessageList.tsx
|
|
49496
49504
|
var MessageListWithContext = (props) => {
|
|
49497
49505
|
const {
|
|
@@ -49531,8 +49539,8 @@ var MessageListWithContext = (props) => {
|
|
|
49531
49539
|
threadList = false,
|
|
49532
49540
|
unsafeHTML = false
|
|
49533
49541
|
} = props;
|
|
49534
|
-
const [listElement, setListElement] =
|
|
49535
|
-
const [ulElement, setUlElement] =
|
|
49542
|
+
const [listElement, setListElement] = import_react188.default.useState(null);
|
|
49543
|
+
const [ulElement, setUlElement] = import_react188.default.useState(null);
|
|
49536
49544
|
const { customClasses } = useChatContext("MessageList");
|
|
49537
49545
|
const {
|
|
49538
49546
|
EmptyStateIndicator: EmptyStateIndicator2 = EmptyStateIndicator,
|
|
@@ -49621,24 +49629,24 @@ var MessageListWithContext = (props) => {
|
|
|
49621
49629
|
threadList
|
|
49622
49630
|
});
|
|
49623
49631
|
const messageListClass = customClasses?.messageList || "str-chat__list";
|
|
49624
|
-
const loadMore =
|
|
49632
|
+
const loadMore = import_react188.default.useCallback(() => {
|
|
49625
49633
|
if (loadMoreCallback) {
|
|
49626
49634
|
loadMoreCallback(messageLimit);
|
|
49627
49635
|
}
|
|
49628
49636
|
}, [loadMoreCallback, messageLimit]);
|
|
49629
|
-
const loadMoreNewer =
|
|
49637
|
+
const loadMoreNewer = import_react188.default.useCallback(() => {
|
|
49630
49638
|
if (loadMoreNewerCallback) {
|
|
49631
49639
|
loadMoreNewerCallback(messageLimit);
|
|
49632
49640
|
}
|
|
49633
49641
|
}, [loadMoreNewerCallback, messageLimit]);
|
|
49634
|
-
const scrollToBottomFromNotification =
|
|
49642
|
+
const scrollToBottomFromNotification = import_react188.default.useCallback(async () => {
|
|
49635
49643
|
if (hasMoreNewer) {
|
|
49636
49644
|
await jumpToLatestMessage();
|
|
49637
49645
|
} else {
|
|
49638
49646
|
scrollToBottom();
|
|
49639
49647
|
}
|
|
49640
49648
|
}, [scrollToBottom, hasMoreNewer]);
|
|
49641
|
-
|
|
49649
|
+
import_react188.default.useLayoutEffect(() => {
|
|
49642
49650
|
if (highlightedMessageId) {
|
|
49643
49651
|
const element3 = ulElement?.querySelector(
|
|
49644
49652
|
`[data-message-id='${highlightedMessageId}']`
|
|
@@ -49646,14 +49654,15 @@ var MessageListWithContext = (props) => {
|
|
|
49646
49654
|
element3?.scrollIntoView({ block: "center" });
|
|
49647
49655
|
}
|
|
49648
49656
|
}, [highlightedMessageId]);
|
|
49657
|
+
const id = useStableId();
|
|
49649
49658
|
const showEmptyStateIndicator = elements.length === 0 && !threadList;
|
|
49650
|
-
const dialogManagerId = threadList ?
|
|
49651
|
-
return /* @__PURE__ */
|
|
49659
|
+
const dialogManagerId = threadList ? `message-list-dialog-manager-thread-${id}` : `message-list-dialog-manager-${id}`;
|
|
49660
|
+
return /* @__PURE__ */ import_react188.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react188.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react188.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react188.default.createElement(
|
|
49652
49661
|
UnreadMessagesNotification2,
|
|
49653
49662
|
{
|
|
49654
49663
|
unreadCount: channelUnreadUiState?.unread_messages
|
|
49655
49664
|
}
|
|
49656
|
-
), /* @__PURE__ */
|
|
49665
|
+
), /* @__PURE__ */ import_react188.default.createElement(
|
|
49657
49666
|
"div",
|
|
49658
49667
|
{
|
|
49659
49668
|
className: (0, import_clsx49.default)(messageListClass, customClasses?.threadList),
|
|
@@ -49661,7 +49670,7 @@ var MessageListWithContext = (props) => {
|
|
|
49661
49670
|
ref: setListElement,
|
|
49662
49671
|
tabIndex: 0
|
|
49663
49672
|
},
|
|
49664
|
-
showEmptyStateIndicator ? /* @__PURE__ */
|
|
49673
|
+
showEmptyStateIndicator ? /* @__PURE__ */ import_react188.default.createElement(EmptyStateIndicator2, { listType: threadList ? "thread" : "message" }) : /* @__PURE__ */ import_react188.default.createElement(
|
|
49665
49674
|
InfiniteScroll,
|
|
49666
49675
|
{
|
|
49667
49676
|
className: "str-chat__message-list-scroll",
|
|
@@ -49670,17 +49679,17 @@ var MessageListWithContext = (props) => {
|
|
|
49670
49679
|
hasPreviousPage: props.hasMore,
|
|
49671
49680
|
head: props.head,
|
|
49672
49681
|
isLoading: props.loadingMore,
|
|
49673
|
-
loader: /* @__PURE__ */
|
|
49682
|
+
loader: /* @__PURE__ */ import_react188.default.createElement("div", { className: "str-chat__list__loading", key: "loading-indicator" }, props.loadingMore && /* @__PURE__ */ import_react188.default.createElement(LoadingIndicator2, { size: 20 })),
|
|
49674
49683
|
loadNextPage: loadMoreNewer,
|
|
49675
49684
|
loadPreviousPage: loadMore,
|
|
49676
49685
|
threshold: loadMoreScrollThreshold,
|
|
49677
49686
|
...restInternalInfiniteScrollProps
|
|
49678
49687
|
},
|
|
49679
|
-
/* @__PURE__ */
|
|
49680
|
-
/* @__PURE__ */
|
|
49681
|
-
/* @__PURE__ */
|
|
49688
|
+
/* @__PURE__ */ import_react188.default.createElement("ul", { className: "str-chat__ul", ref: setUlElement }, elements),
|
|
49689
|
+
/* @__PURE__ */ import_react188.default.createElement(TypingIndicator2, { threadList }),
|
|
49690
|
+
/* @__PURE__ */ import_react188.default.createElement("div", { key: "bottom" })
|
|
49682
49691
|
)
|
|
49683
|
-
))), /* @__PURE__ */
|
|
49692
|
+
))), /* @__PURE__ */ import_react188.default.createElement(
|
|
49684
49693
|
MessageListNotifications2,
|
|
49685
49694
|
{
|
|
49686
49695
|
hasNewMessages,
|
|
@@ -49705,7 +49714,7 @@ var MessageList = (props) => {
|
|
|
49705
49714
|
// eslint-disable-line @typescript-eslint/no-unused-vars
|
|
49706
49715
|
...restChannelStateContext
|
|
49707
49716
|
} = useChannelStateContext("MessageList");
|
|
49708
|
-
return /* @__PURE__ */
|
|
49717
|
+
return /* @__PURE__ */ import_react188.default.createElement(
|
|
49709
49718
|
MessageListWithContext,
|
|
49710
49719
|
{
|
|
49711
49720
|
jumpToLatestMessage,
|
|
@@ -49718,16 +49727,16 @@ var MessageList = (props) => {
|
|
|
49718
49727
|
};
|
|
49719
49728
|
|
|
49720
49729
|
// src/components/MessageList/ScrollToBottomButton.tsx
|
|
49721
|
-
var
|
|
49730
|
+
var import_react189 = __toESM(require("react"));
|
|
49722
49731
|
var import_clsx50 = __toESM(require("clsx"));
|
|
49723
49732
|
var UnMemoizedScrollToBottomButton = (props) => {
|
|
49724
49733
|
const { isMessageListScrolledToBottom, onClick, threadList } = props;
|
|
49725
49734
|
const { channel: activeChannel, client } = useChatContext();
|
|
49726
49735
|
const { thread } = useChannelStateContext();
|
|
49727
|
-
const [countUnread, setCountUnread] = (0,
|
|
49728
|
-
const [replyCount, setReplyCount] = (0,
|
|
49736
|
+
const [countUnread, setCountUnread] = (0, import_react189.useState)(activeChannel?.countUnread() || 0);
|
|
49737
|
+
const [replyCount, setReplyCount] = (0, import_react189.useState)(thread?.reply_count || 0);
|
|
49729
49738
|
const observedEvent = threadList ? "message.updated" : "message.new";
|
|
49730
|
-
(0,
|
|
49739
|
+
(0, import_react189.useEffect)(() => {
|
|
49731
49740
|
const handleEvent = (event) => {
|
|
49732
49741
|
const newMessageInAnotherChannel = event.cid !== activeChannel?.cid;
|
|
49733
49742
|
const newMessageIsMine = event.user?.id === client.user?.id;
|
|
@@ -49749,14 +49758,14 @@ var UnMemoizedScrollToBottomButton = (props) => {
|
|
|
49749
49758
|
client.off(observedEvent, handleEvent);
|
|
49750
49759
|
};
|
|
49751
49760
|
}, [activeChannel, isMessageListScrolledToBottom, observedEvent, replyCount, thread]);
|
|
49752
|
-
(0,
|
|
49761
|
+
(0, import_react189.useEffect)(() => {
|
|
49753
49762
|
if (isMessageListScrolledToBottom) {
|
|
49754
49763
|
setCountUnread(0);
|
|
49755
49764
|
setReplyCount(thread?.reply_count || 0);
|
|
49756
49765
|
}
|
|
49757
49766
|
}, [isMessageListScrolledToBottom, thread]);
|
|
49758
49767
|
if (isMessageListScrolledToBottom) return null;
|
|
49759
|
-
return /* @__PURE__ */
|
|
49768
|
+
return /* @__PURE__ */ import_react189.default.createElement("div", { className: "str-chat__jump-to-latest-message" }, /* @__PURE__ */ import_react189.default.createElement(
|
|
49760
49769
|
"button",
|
|
49761
49770
|
{
|
|
49762
49771
|
"aria-live": "polite",
|
|
@@ -49767,8 +49776,8 @@ var UnMemoizedScrollToBottomButton = (props) => {
|
|
|
49767
49776
|
"data-testid": "message-notification",
|
|
49768
49777
|
onClick
|
|
49769
49778
|
},
|
|
49770
|
-
/* @__PURE__ */
|
|
49771
|
-
countUnread > 0 && /* @__PURE__ */
|
|
49779
|
+
/* @__PURE__ */ import_react189.default.createElement(ArrowDown, null),
|
|
49780
|
+
countUnread > 0 && /* @__PURE__ */ import_react189.default.createElement(
|
|
49772
49781
|
"div",
|
|
49773
49782
|
{
|
|
49774
49783
|
className: (0, import_clsx50.default)(
|
|
@@ -49781,23 +49790,23 @@ var UnMemoizedScrollToBottomButton = (props) => {
|
|
|
49781
49790
|
)
|
|
49782
49791
|
));
|
|
49783
49792
|
};
|
|
49784
|
-
var ScrollToBottomButton =
|
|
49793
|
+
var ScrollToBottomButton = import_react189.default.memo(
|
|
49785
49794
|
UnMemoizedScrollToBottomButton
|
|
49786
49795
|
);
|
|
49787
49796
|
|
|
49788
49797
|
// src/components/MessageList/VirtualizedMessageList.tsx
|
|
49789
|
-
var
|
|
49798
|
+
var import_react199 = __toESM(require("react"));
|
|
49790
49799
|
var import_react_virtuoso2 = require("react-virtuoso");
|
|
49791
49800
|
|
|
49792
49801
|
// src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts
|
|
49793
|
-
var
|
|
49802
|
+
var import_react190 = require("react");
|
|
49794
49803
|
function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
|
|
49795
|
-
const [newMessagesNotification, setNewMessagesNotification] = (0,
|
|
49796
|
-
const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0,
|
|
49797
|
-
const didMount = (0,
|
|
49798
|
-
const lastMessageId = (0,
|
|
49799
|
-
const atBottom = (0,
|
|
49800
|
-
(0,
|
|
49804
|
+
const [newMessagesNotification, setNewMessagesNotification] = (0, import_react190.useState)(false);
|
|
49805
|
+
const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0, import_react190.useState)(true);
|
|
49806
|
+
const didMount = (0, import_react190.useRef)(false);
|
|
49807
|
+
const lastMessageId = (0, import_react190.useRef)("");
|
|
49808
|
+
const atBottom = (0, import_react190.useRef)(false);
|
|
49809
|
+
(0, import_react190.useEffect)(() => {
|
|
49801
49810
|
if (hasMoreNewer) {
|
|
49802
49811
|
setNewMessagesNotification(true);
|
|
49803
49812
|
return;
|
|
@@ -49823,17 +49832,17 @@ function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
|
|
|
49823
49832
|
}
|
|
49824
49833
|
|
|
49825
49834
|
// src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts
|
|
49826
|
-
var
|
|
49835
|
+
var import_react191 = require("react");
|
|
49827
49836
|
var STATUSES_EXCLUDED_FROM_PREPEND = {
|
|
49828
49837
|
failed: true,
|
|
49829
49838
|
sending: true
|
|
49830
49839
|
};
|
|
49831
49840
|
function usePrependedMessagesCount(messages, hasDateSeparator) {
|
|
49832
49841
|
const firstRealMessageIndex = hasDateSeparator ? 1 : 0;
|
|
49833
|
-
const firstMessageOnFirstLoadedPage = (0,
|
|
49834
|
-
const previousFirstMessageOnFirstLoadedPage = (0,
|
|
49835
|
-
const previousNumItemsPrepended = (0,
|
|
49836
|
-
const numItemsPrepended = (0,
|
|
49842
|
+
const firstMessageOnFirstLoadedPage = (0, import_react191.useRef)(void 0);
|
|
49843
|
+
const previousFirstMessageOnFirstLoadedPage = (0, import_react191.useRef)(void 0);
|
|
49844
|
+
const previousNumItemsPrepended = (0, import_react191.useRef)(0);
|
|
49845
|
+
const numItemsPrepended = (0, import_react191.useMemo)(() => {
|
|
49837
49846
|
if (!messages || !messages.length) {
|
|
49838
49847
|
previousNumItemsPrepended.current = 0;
|
|
49839
49848
|
return 0;
|
|
@@ -49864,10 +49873,10 @@ function usePrependedMessagesCount(messages, hasDateSeparator) {
|
|
|
49864
49873
|
}
|
|
49865
49874
|
|
|
49866
49875
|
// src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts
|
|
49867
|
-
var
|
|
49876
|
+
var import_react192 = require("react");
|
|
49868
49877
|
function useShouldForceScrollToBottom(messages, currentUserId) {
|
|
49869
|
-
const lastFocusedOwnMessage = (0,
|
|
49870
|
-
const initialFocusRegistered = (0,
|
|
49878
|
+
const lastFocusedOwnMessage = (0, import_react192.useRef)("");
|
|
49879
|
+
const initialFocusRegistered = (0, import_react192.useRef)(false);
|
|
49871
49880
|
function recheckForNewOwnMessage() {
|
|
49872
49881
|
if (messages && messages.length > 0) {
|
|
49873
49882
|
const lastMessage = messages[messages.length - 1];
|
|
@@ -49878,7 +49887,7 @@ function useShouldForceScrollToBottom(messages, currentUserId) {
|
|
|
49878
49887
|
}
|
|
49879
49888
|
return false;
|
|
49880
49889
|
}
|
|
49881
|
-
(0,
|
|
49890
|
+
(0, import_react192.useEffect)(() => {
|
|
49882
49891
|
if (messages && messages.length && !initialFocusRegistered.current) {
|
|
49883
49892
|
initialFocusRegistered.current = true;
|
|
49884
49893
|
recheckForNewOwnMessage();
|
|
@@ -49888,11 +49897,11 @@ function useShouldForceScrollToBottom(messages, currentUserId) {
|
|
|
49888
49897
|
}
|
|
49889
49898
|
|
|
49890
49899
|
// src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts
|
|
49891
|
-
var
|
|
49900
|
+
var import_react193 = require("react");
|
|
49892
49901
|
var useGiphyPreview = (separateGiphyPreview) => {
|
|
49893
|
-
const [giphyPreviewMessage, setGiphyPreviewMessage] = (0,
|
|
49902
|
+
const [giphyPreviewMessage, setGiphyPreviewMessage] = (0, import_react193.useState)();
|
|
49894
49903
|
const { client } = useChatContext("useGiphyPreview");
|
|
49895
|
-
(0,
|
|
49904
|
+
(0, import_react193.useEffect)(() => {
|
|
49896
49905
|
if (!separateGiphyPreview) return;
|
|
49897
49906
|
const handleEvent = (event) => {
|
|
49898
49907
|
const { message, user } = event;
|
|
@@ -49910,11 +49919,11 @@ var useGiphyPreview = (separateGiphyPreview) => {
|
|
|
49910
49919
|
};
|
|
49911
49920
|
|
|
49912
49921
|
// src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts
|
|
49913
|
-
var
|
|
49922
|
+
var import_react194 = require("react");
|
|
49914
49923
|
var useMessageSetKey = ({ messages }) => {
|
|
49915
|
-
const [messageSetKey, setMessageSetKey] = (0,
|
|
49916
|
-
const firstMessageId = (0,
|
|
49917
|
-
(0,
|
|
49924
|
+
const [messageSetKey, setMessageSetKey] = (0, import_react194.useState)(+/* @__PURE__ */ new Date());
|
|
49925
|
+
const firstMessageId = (0, import_react194.useRef)(void 0);
|
|
49926
|
+
(0, import_react194.useEffect)(() => {
|
|
49918
49927
|
const continuousSet = messages?.find(
|
|
49919
49928
|
(message) => message.id === firstMessageId.current
|
|
49920
49929
|
);
|
|
@@ -49929,24 +49938,24 @@ var useMessageSetKey = ({ messages }) => {
|
|
|
49929
49938
|
};
|
|
49930
49939
|
|
|
49931
49940
|
// src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts
|
|
49932
|
-
var
|
|
49941
|
+
var import_react195 = require("react");
|
|
49933
49942
|
var useScrollToBottomOnNewMessage = ({
|
|
49934
49943
|
messages,
|
|
49935
49944
|
scrollToBottom,
|
|
49936
49945
|
scrollToLatestMessageOnFocus
|
|
49937
49946
|
}) => {
|
|
49938
|
-
const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = (0,
|
|
49939
|
-
const scrollToBottomIfConfigured = (0,
|
|
49947
|
+
const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = (0, import_react195.useState)(false);
|
|
49948
|
+
const scrollToBottomIfConfigured = (0, import_react195.useRef)(void 0);
|
|
49940
49949
|
scrollToBottomIfConfigured.current = (event) => {
|
|
49941
49950
|
if (!scrollToLatestMessageOnFocus || !newMessagesReceivedInBackground || event.target !== window) {
|
|
49942
49951
|
return;
|
|
49943
49952
|
}
|
|
49944
49953
|
setTimeout(scrollToBottom, 100);
|
|
49945
49954
|
};
|
|
49946
|
-
(0,
|
|
49955
|
+
(0, import_react195.useEffect)(() => {
|
|
49947
49956
|
setNewMessagesReceivedInBackground(true);
|
|
49948
49957
|
}, [messages]);
|
|
49949
|
-
(0,
|
|
49958
|
+
(0, import_react195.useEffect)(() => {
|
|
49950
49959
|
const handleFocus = (event) => {
|
|
49951
49960
|
scrollToBottomIfConfigured.current?.(event);
|
|
49952
49961
|
};
|
|
@@ -49965,14 +49974,14 @@ var useScrollToBottomOnNewMessage = ({
|
|
|
49965
49974
|
};
|
|
49966
49975
|
|
|
49967
49976
|
// src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts
|
|
49968
|
-
var
|
|
49977
|
+
var import_react196 = require("react");
|
|
49969
49978
|
var useUnreadMessagesNotificationVirtualized = ({
|
|
49970
49979
|
lastRead,
|
|
49971
49980
|
showAlways,
|
|
49972
49981
|
unreadCount
|
|
49973
49982
|
}) => {
|
|
49974
|
-
const [show, setShow] = (0,
|
|
49975
|
-
const toggleShowUnreadMessagesNotification = (0,
|
|
49983
|
+
const [show, setShow] = (0, import_react196.useState)(false);
|
|
49984
|
+
const toggleShowUnreadMessagesNotification = (0, import_react196.useCallback)(
|
|
49976
49985
|
(renderedMessages) => {
|
|
49977
49986
|
if (!unreadCount) return;
|
|
49978
49987
|
const firstRenderedMessage = renderedMessages[0];
|
|
@@ -49993,7 +50002,7 @@ var useUnreadMessagesNotificationVirtualized = ({
|
|
|
49993
50002
|
},
|
|
49994
50003
|
[lastRead, showAlways, unreadCount]
|
|
49995
50004
|
);
|
|
49996
|
-
(0,
|
|
50005
|
+
(0, import_react196.useEffect)(() => {
|
|
49997
50006
|
if (!unreadCount) setShow(false);
|
|
49998
50007
|
}, [unreadCount]);
|
|
49999
50008
|
return { show, toggleShowUnreadMessagesNotification };
|
|
@@ -50002,7 +50011,7 @@ var useUnreadMessagesNotificationVirtualized = ({
|
|
|
50002
50011
|
// src/components/MessageList/VirtualizedMessageListComponents.tsx
|
|
50003
50012
|
var import_clsx51 = __toESM(require("clsx"));
|
|
50004
50013
|
var import_lodash17 = __toESM(require("lodash.throttle"));
|
|
50005
|
-
var
|
|
50014
|
+
var import_react197 = __toESM(require("react"));
|
|
50006
50015
|
var PREPEND_OFFSET = 10 ** 7;
|
|
50007
50016
|
function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
|
|
50008
50017
|
return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
|
|
@@ -50020,10 +50029,10 @@ var makeItemsRenderedHandler = (renderedItemsActions, processedMessages) => (0,
|
|
|
50020
50029
|
);
|
|
50021
50030
|
}, 200);
|
|
50022
50031
|
var Item = ({ context, ...props }) => {
|
|
50023
|
-
if (!context) return /* @__PURE__ */
|
|
50032
|
+
if (!context) return /* @__PURE__ */ import_react197.default.createElement(import_react197.default.Fragment, null);
|
|
50024
50033
|
const message = context.processedMessages[calculateItemIndex(props["data-item-index"], context.numItemsPrepended)];
|
|
50025
50034
|
const groupStyles = context.messageGroupStyles[message.id];
|
|
50026
|
-
return /* @__PURE__ */
|
|
50035
|
+
return /* @__PURE__ */ import_react197.default.createElement(
|
|
50027
50036
|
"div",
|
|
50028
50037
|
{
|
|
50029
50038
|
...props,
|
|
@@ -50037,13 +50046,13 @@ var Header = ({ context }) => {
|
|
|
50037
50046
|
const { LoadingIndicator: LoadingIndicator2 = LoadingIndicator } = useComponentContext(
|
|
50038
50047
|
"VirtualizedMessageListHeader"
|
|
50039
50048
|
);
|
|
50040
|
-
return /* @__PURE__ */
|
|
50049
|
+
return /* @__PURE__ */ import_react197.default.createElement(import_react197.default.Fragment, null, context?.head, context?.loadingMore && LoadingIndicator2 && /* @__PURE__ */ import_react197.default.createElement("div", { className: "str-chat__virtual-list__loading" }, /* @__PURE__ */ import_react197.default.createElement(LoadingIndicator2, { size: 20 })));
|
|
50041
50050
|
};
|
|
50042
50051
|
var EmptyPlaceholder = ({ context }) => {
|
|
50043
50052
|
const { EmptyStateIndicator: EmptyStateIndicator2 = EmptyStateIndicator } = useComponentContext(
|
|
50044
50053
|
"VirtualizedMessageList"
|
|
50045
50054
|
);
|
|
50046
|
-
return /* @__PURE__ */
|
|
50055
|
+
return /* @__PURE__ */ import_react197.default.createElement(import_react197.default.Fragment, null, EmptyStateIndicator2 && /* @__PURE__ */ import_react197.default.createElement(EmptyStateIndicator2, { listType: context?.threadList ? "thread" : "message" }));
|
|
50047
50056
|
};
|
|
50048
50057
|
var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
|
|
50049
50058
|
const {
|
|
@@ -50079,12 +50088,12 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
|
|
|
50079
50088
|
return customMessageRenderer(messageList, streamMessageIndex);
|
|
50080
50089
|
}
|
|
50081
50090
|
const message = messageList[streamMessageIndex];
|
|
50082
|
-
if (!message || isIntroMessage(message)) return /* @__PURE__ */
|
|
50091
|
+
if (!message || isIntroMessage(message)) return /* @__PURE__ */ import_react197.default.createElement("div", { style: { height: "1px" } });
|
|
50083
50092
|
if (isDateSeparatorMessage(message)) {
|
|
50084
|
-
return DateSeparator2 ? /* @__PURE__ */
|
|
50093
|
+
return DateSeparator2 ? /* @__PURE__ */ import_react197.default.createElement(DateSeparator2, { date: message.date, unread: message.unread }) : null;
|
|
50085
50094
|
}
|
|
50086
50095
|
if (message.type === "system") {
|
|
50087
|
-
return MessageSystem ? /* @__PURE__ */
|
|
50096
|
+
return MessageSystem ? /* @__PURE__ */ import_react197.default.createElement(MessageSystem, { message }) : null;
|
|
50088
50097
|
}
|
|
50089
50098
|
const maybePrevMessage = messageList[streamMessageIndex - 1];
|
|
50090
50099
|
const maybeNextMessage = messageList[streamMessageIndex + 1];
|
|
@@ -50100,7 +50109,7 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
|
|
|
50100
50109
|
previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : void 0,
|
|
50101
50110
|
unreadMessageCount
|
|
50102
50111
|
});
|
|
50103
|
-
return /* @__PURE__ */
|
|
50112
|
+
return /* @__PURE__ */ import_react197.default.createElement(import_react197.default.Fragment, null, isFirstUnreadMessage && /* @__PURE__ */ import_react197.default.createElement("div", { className: "str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react197.default.createElement(UnreadMessagesSeparator2, { unreadCount: unreadMessageCount })), /* @__PURE__ */ import_react197.default.createElement(
|
|
50104
50113
|
Message,
|
|
50105
50114
|
{
|
|
50106
50115
|
additionalMessageInputProps,
|
|
@@ -50127,12 +50136,12 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
|
|
|
50127
50136
|
};
|
|
50128
50137
|
|
|
50129
50138
|
// src/context/VirtualizedMessageListContext.tsx
|
|
50130
|
-
var
|
|
50131
|
-
var VirtualizedMessageListContext = (0,
|
|
50139
|
+
var import_react198 = __toESM(require("react"));
|
|
50140
|
+
var VirtualizedMessageListContext = (0, import_react198.createContext)(void 0);
|
|
50132
50141
|
var VirtualizedMessageListContextProvider = ({
|
|
50133
50142
|
children,
|
|
50134
50143
|
value
|
|
50135
|
-
}) => /* @__PURE__ */
|
|
50144
|
+
}) => /* @__PURE__ */ import_react198.default.createElement(
|
|
50136
50145
|
VirtualizedMessageListContext.Provider,
|
|
50137
50146
|
{
|
|
50138
50147
|
value
|
|
@@ -50147,7 +50156,7 @@ function captureResizeObserverExceededError(e) {
|
|
|
50147
50156
|
}
|
|
50148
50157
|
}
|
|
50149
50158
|
function useCaptureResizeObserverExceededError() {
|
|
50150
|
-
(0,
|
|
50159
|
+
(0, import_react199.useEffect)(() => {
|
|
50151
50160
|
window.addEventListener("error", captureResizeObserverExceededError);
|
|
50152
50161
|
return () => {
|
|
50153
50162
|
window.removeEventListener("error", captureResizeObserverExceededError);
|
|
@@ -50231,15 +50240,15 @@ var VirtualizedMessageListWithContext = (props) => {
|
|
|
50231
50240
|
} = useComponentContext("VirtualizedMessageList");
|
|
50232
50241
|
const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
|
|
50233
50242
|
const { client, customClasses } = useChatContext("VirtualizedMessageList");
|
|
50234
|
-
const virtuoso = (0,
|
|
50235
|
-
const lastRead = (0,
|
|
50243
|
+
const virtuoso = (0, import_react199.useRef)(null);
|
|
50244
|
+
const lastRead = (0, import_react199.useMemo)(() => channel.lastRead?.(), [channel]);
|
|
50236
50245
|
const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } = useUnreadMessagesNotificationVirtualized({
|
|
50237
50246
|
lastRead: channelUnreadUiState?.last_read,
|
|
50238
50247
|
showAlways: !!showUnreadNotificationAlways,
|
|
50239
50248
|
unreadCount: channelUnreadUiState?.unread_messages ?? 0
|
|
50240
50249
|
});
|
|
50241
50250
|
const { giphyPreviewMessage, setGiphyPreviewMessage } = useGiphyPreview(separateGiphyPreview);
|
|
50242
|
-
const processedMessages = (0,
|
|
50251
|
+
const processedMessages = (0, import_react199.useMemo)(() => {
|
|
50243
50252
|
if (typeof messages === "undefined") {
|
|
50244
50253
|
return [];
|
|
50245
50254
|
}
|
|
@@ -50271,12 +50280,12 @@ var VirtualizedMessageListWithContext = (props) => {
|
|
|
50271
50280
|
returnAllReadData,
|
|
50272
50281
|
userID: client.userID
|
|
50273
50282
|
});
|
|
50274
|
-
const lastReceivedMessageId = (0,
|
|
50283
|
+
const lastReceivedMessageId = (0, import_react199.useMemo)(
|
|
50275
50284
|
() => getLastReceived(processedMessages),
|
|
50276
50285
|
[processedMessages]
|
|
50277
50286
|
);
|
|
50278
50287
|
const groupStylesFn = groupStyles || getGroupStyles;
|
|
50279
|
-
const messageGroupStyles = (0,
|
|
50288
|
+
const messageGroupStyles = (0, import_react199.useMemo)(
|
|
50280
50289
|
() => processedMessages.reduce((acc, message, i) => {
|
|
50281
50290
|
const style = groupStylesFn(
|
|
50282
50291
|
message,
|
|
@@ -50309,7 +50318,7 @@ var VirtualizedMessageListWithContext = (props) => {
|
|
|
50309
50318
|
messageListIsThread: !!threadList,
|
|
50310
50319
|
wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id
|
|
50311
50320
|
});
|
|
50312
|
-
const scrollToBottom = (0,
|
|
50321
|
+
const scrollToBottom = (0, import_react199.useCallback)(async () => {
|
|
50313
50322
|
if (hasMoreNewer) {
|
|
50314
50323
|
await jumpToLatestMessage();
|
|
50315
50324
|
return;
|
|
@@ -50341,7 +50350,7 @@ var VirtualizedMessageListWithContext = (props) => {
|
|
|
50341
50350
|
processedMessages,
|
|
50342
50351
|
client.userID
|
|
50343
50352
|
);
|
|
50344
|
-
const handleItemsRendered = (0,
|
|
50353
|
+
const handleItemsRendered = (0, import_react199.useMemo)(
|
|
50345
50354
|
() => makeItemsRenderedHandler([toggleShowUnreadMessagesNotification], processedMessages),
|
|
50346
50355
|
[processedMessages, toggleShowUnreadMessagesNotification]
|
|
50347
50356
|
);
|
|
@@ -50354,7 +50363,7 @@ var VirtualizedMessageListWithContext = (props) => {
|
|
|
50354
50363
|
}
|
|
50355
50364
|
return isAtBottom ? stickToBottomScrollBehavior : false;
|
|
50356
50365
|
};
|
|
50357
|
-
const computeItemKey2 = (0,
|
|
50366
|
+
const computeItemKey2 = (0, import_react199.useCallback)(
|
|
50358
50367
|
(index3, _, { numItemsPrepended: numItemsPrepended2, processedMessages: processedMessages2 }) => processedMessages2[calculateItemIndex(index3, numItemsPrepended2)].id,
|
|
50359
50368
|
[]
|
|
50360
50369
|
);
|
|
@@ -50371,7 +50380,7 @@ var VirtualizedMessageListWithContext = (props) => {
|
|
|
50371
50380
|
loadMore?.(messageLimit);
|
|
50372
50381
|
}
|
|
50373
50382
|
};
|
|
50374
|
-
(0,
|
|
50383
|
+
(0, import_react199.useEffect)(() => {
|
|
50375
50384
|
let scrollTimeout;
|
|
50376
50385
|
if (highlightedMessageId) {
|
|
50377
50386
|
const index3 = findMessageIndex(processedMessages, highlightedMessageId);
|
|
@@ -50385,19 +50394,20 @@ var VirtualizedMessageListWithContext = (props) => {
|
|
|
50385
50394
|
clearTimeout(scrollTimeout);
|
|
50386
50395
|
};
|
|
50387
50396
|
}, [highlightedMessageId, processedMessages]);
|
|
50397
|
+
const id = useStableId();
|
|
50388
50398
|
if (!processedMessages) return null;
|
|
50389
|
-
const dialogManagerId = threadList ?
|
|
50390
|
-
return /* @__PURE__ */
|
|
50399
|
+
const dialogManagerId = threadList ? `virtualized-message-list-dialog-manager-thread-${id}` : `virtualized-message-list-dialog-manager-${id}`;
|
|
50400
|
+
return /* @__PURE__ */ import_react199.default.createElement(VirtualizedMessageListContextProvider, { value: { scrollToBottom } }, /* @__PURE__ */ import_react199.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react199.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react199.default.createElement(
|
|
50391
50401
|
UnreadMessagesNotification2,
|
|
50392
50402
|
{
|
|
50393
50403
|
unreadCount: channelUnreadUiState?.unread_messages
|
|
50394
50404
|
}
|
|
50395
|
-
), /* @__PURE__ */
|
|
50405
|
+
), /* @__PURE__ */ import_react199.default.createElement(
|
|
50396
50406
|
"div",
|
|
50397
50407
|
{
|
|
50398
50408
|
className: customClasses?.virtualizedMessageList || "str-chat__virtual-list"
|
|
50399
50409
|
},
|
|
50400
|
-
/* @__PURE__ */
|
|
50410
|
+
/* @__PURE__ */ import_react199.default.createElement(
|
|
50401
50411
|
import_react_virtuoso2.Virtuoso,
|
|
50402
50412
|
{
|
|
50403
50413
|
atBottomStateChange,
|
|
@@ -50463,7 +50473,7 @@ var VirtualizedMessageListWithContext = (props) => {
|
|
|
50463
50473
|
...defaultItemHeight ? { defaultItemHeight } : {}
|
|
50464
50474
|
}
|
|
50465
50475
|
)
|
|
50466
|
-
)), TypingIndicator2 && /* @__PURE__ */
|
|
50476
|
+
)), TypingIndicator2 && /* @__PURE__ */ import_react199.default.createElement(TypingIndicator2, null)), /* @__PURE__ */ import_react199.default.createElement(
|
|
50467
50477
|
MessageListNotifications2,
|
|
50468
50478
|
{
|
|
50469
50479
|
hasNewMessages: newMessagesNotification,
|
|
@@ -50475,7 +50485,7 @@ var VirtualizedMessageListWithContext = (props) => {
|
|
|
50475
50485
|
threadList,
|
|
50476
50486
|
unreadCount: threadList ? void 0 : channelUnreadUiState?.unread_messages
|
|
50477
50487
|
}
|
|
50478
|
-
), giphyPreviewMessage && /* @__PURE__ */
|
|
50488
|
+
), giphyPreviewMessage && /* @__PURE__ */ import_react199.default.createElement(GiphyPreviewMessage2, { message: giphyPreviewMessage }));
|
|
50479
50489
|
};
|
|
50480
50490
|
function VirtualizedMessageList(props) {
|
|
50481
50491
|
const { jumpToLatestMessage, loadMore, loadMoreNewer } = useChannelActionContext(
|
|
@@ -50495,7 +50505,7 @@ function VirtualizedMessageList(props) {
|
|
|
50495
50505
|
suppressAutoscroll
|
|
50496
50506
|
} = useChannelStateContext("VirtualizedMessageList");
|
|
50497
50507
|
const messages = props.messages || contextMessages;
|
|
50498
|
-
return /* @__PURE__ */
|
|
50508
|
+
return /* @__PURE__ */ import_react199.default.createElement(
|
|
50499
50509
|
VirtualizedMessageListWithContext,
|
|
50500
50510
|
{
|
|
50501
50511
|
channel,
|
|
@@ -50539,8 +50549,8 @@ var MessageSimpleWithContext = (props) => {
|
|
|
50539
50549
|
} = props;
|
|
50540
50550
|
const { client } = useChatContext("MessageSimple");
|
|
50541
50551
|
const { t } = useTranslationContext("MessageSimple");
|
|
50542
|
-
const [isBounceDialogOpen, setIsBounceDialogOpen] = (0,
|
|
50543
|
-
const [isEditedTimestampOpen, setEditedTimestampOpen] = (0,
|
|
50552
|
+
const [isBounceDialogOpen, setIsBounceDialogOpen] = (0, import_react200.useState)(false);
|
|
50553
|
+
const [isEditedTimestampOpen, setEditedTimestampOpen] = (0, import_react200.useState)(false);
|
|
50544
50554
|
const {
|
|
50545
50555
|
Attachment: Attachment2 = Attachment,
|
|
50546
50556
|
Avatar: Avatar2 = Avatar,
|
|
@@ -50560,7 +50570,7 @@ var MessageSimpleWithContext = (props) => {
|
|
|
50560
50570
|
} = useComponentContext("MessageSimple");
|
|
50561
50571
|
const hasAttachment = messageHasAttachments(message);
|
|
50562
50572
|
const hasReactions = messageHasReactions(message);
|
|
50563
|
-
const isAIGenerated = (0,
|
|
50573
|
+
const isAIGenerated = (0, import_react200.useMemo)(
|
|
50564
50574
|
() => isMessageAIGenerated?.(message),
|
|
50565
50575
|
[isMessageAIGenerated, message]
|
|
50566
50576
|
);
|
|
@@ -50568,10 +50578,10 @@ var MessageSimpleWithContext = (props) => {
|
|
|
50568
50578
|
return null;
|
|
50569
50579
|
}
|
|
50570
50580
|
if (message.deleted_at || message.type === "deleted") {
|
|
50571
|
-
return /* @__PURE__ */
|
|
50581
|
+
return /* @__PURE__ */ import_react200.default.createElement(MessageDeleted2, { message });
|
|
50572
50582
|
}
|
|
50573
50583
|
if (isMessageBlocked(message)) {
|
|
50574
|
-
return /* @__PURE__ */
|
|
50584
|
+
return /* @__PURE__ */ import_react200.default.createElement(MessageBlocked2, null);
|
|
50575
50585
|
}
|
|
50576
50586
|
const showMetadata = !groupedByUser || endOfGroup;
|
|
50577
50587
|
const showReplyCountButton = !threadList && !!message.reply_count;
|
|
@@ -50605,14 +50615,14 @@ var MessageSimpleWithContext = (props) => {
|
|
|
50605
50615
|
}
|
|
50606
50616
|
);
|
|
50607
50617
|
const poll = message.poll_id && client.polls.fromState(message.poll_id);
|
|
50608
|
-
return /* @__PURE__ */
|
|
50618
|
+
return /* @__PURE__ */ import_react200.default.createElement(import_react200.default.Fragment, null, editing && /* @__PURE__ */ import_react200.default.createElement(EditMessageModal, { additionalMessageInputProps }), isBounceDialogOpen && /* @__PURE__ */ import_react200.default.createElement(
|
|
50609
50619
|
MessageBounceModal,
|
|
50610
50620
|
{
|
|
50611
50621
|
MessageBouncePrompt: MessageBouncePrompt2,
|
|
50612
50622
|
onClose: () => setIsBounceDialogOpen(false),
|
|
50613
50623
|
open: isBounceDialogOpen
|
|
50614
50624
|
}
|
|
50615
|
-
), /* @__PURE__ */
|
|
50625
|
+
), /* @__PURE__ */ import_react200.default.createElement("div", { className: rootClassName2, key: message.id }, PinIndicator2 && /* @__PURE__ */ import_react200.default.createElement(PinIndicator2, null), message.user && /* @__PURE__ */ import_react200.default.createElement(
|
|
50616
50626
|
Avatar2,
|
|
50617
50627
|
{
|
|
50618
50628
|
image: message.user.image,
|
|
@@ -50621,7 +50631,7 @@ var MessageSimpleWithContext = (props) => {
|
|
|
50621
50631
|
onMouseOver: onUserHover,
|
|
50622
50632
|
user: message.user
|
|
50623
50633
|
}
|
|
50624
|
-
), /* @__PURE__ */
|
|
50634
|
+
), /* @__PURE__ */ import_react200.default.createElement(
|
|
50625
50635
|
"div",
|
|
50626
50636
|
{
|
|
50627
50637
|
className: (0, import_clsx52.default)("str-chat__message-inner", {
|
|
@@ -50631,37 +50641,37 @@ var MessageSimpleWithContext = (props) => {
|
|
|
50631
50641
|
onClick: handleClick,
|
|
50632
50642
|
onKeyUp: handleClick
|
|
50633
50643
|
},
|
|
50634
|
-
/* @__PURE__ */
|
|
50635
|
-
/* @__PURE__ */
|
|
50636
|
-
/* @__PURE__ */
|
|
50644
|
+
/* @__PURE__ */ import_react200.default.createElement(MessageActions2, null),
|
|
50645
|
+
/* @__PURE__ */ import_react200.default.createElement("div", { className: "str-chat__message-reactions-host" }, hasReactions && /* @__PURE__ */ import_react200.default.createElement(ReactionsList2, { reverse: true })),
|
|
50646
|
+
/* @__PURE__ */ import_react200.default.createElement("div", { className: "str-chat__message-bubble" }, poll && /* @__PURE__ */ import_react200.default.createElement(Poll, { poll }), message.attachments?.length && !message.quoted_message ? /* @__PURE__ */ import_react200.default.createElement(
|
|
50637
50647
|
Attachment2,
|
|
50638
50648
|
{
|
|
50639
50649
|
actionHandler: handleAction,
|
|
50640
50650
|
attachments: message.attachments
|
|
50641
50651
|
}
|
|
50642
|
-
) : null, isAIGenerated ? /* @__PURE__ */
|
|
50652
|
+
) : null, isAIGenerated ? /* @__PURE__ */ import_react200.default.createElement(StreamedMessageText2, { message, renderText: renderText2 }) : /* @__PURE__ */ import_react200.default.createElement(MessageText, { message, renderText: renderText2 }), message.mml && /* @__PURE__ */ import_react200.default.createElement(
|
|
50643
50653
|
MML,
|
|
50644
50654
|
{
|
|
50645
50655
|
actionHandler: handleAction,
|
|
50646
50656
|
align: isMyMessage() ? "right" : "left",
|
|
50647
50657
|
source: message.mml
|
|
50648
50658
|
}
|
|
50649
|
-
), /* @__PURE__ */
|
|
50650
|
-
), showReplyCountButton && /* @__PURE__ */
|
|
50659
|
+
), /* @__PURE__ */ import_react200.default.createElement(MessageErrorIcon, null))
|
|
50660
|
+
), showReplyCountButton && /* @__PURE__ */ import_react200.default.createElement(
|
|
50651
50661
|
MessageRepliesCountButton2,
|
|
50652
50662
|
{
|
|
50653
50663
|
onClick: handleOpenThread,
|
|
50654
50664
|
reply_count: message.reply_count
|
|
50655
50665
|
}
|
|
50656
|
-
), showMetadata && /* @__PURE__ */
|
|
50666
|
+
), showMetadata && /* @__PURE__ */ import_react200.default.createElement("div", { className: "str-chat__message-metadata" }, /* @__PURE__ */ import_react200.default.createElement(MessageStatus2, null), !isMyMessage() && !!message.user && /* @__PURE__ */ import_react200.default.createElement("span", { className: "str-chat__message-simple-name" }, message.user.name || message.user.id), /* @__PURE__ */ import_react200.default.createElement(MessageTimestamp2, { customClass: "str-chat__message-simple-timestamp" }), isEdited && /* @__PURE__ */ import_react200.default.createElement("span", { className: "str-chat__mesage-simple-edited" }, t("Edited")), isEdited && /* @__PURE__ */ import_react200.default.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))));
|
|
50657
50667
|
};
|
|
50658
|
-
var MemoizedMessageSimple =
|
|
50668
|
+
var MemoizedMessageSimple = import_react200.default.memo(
|
|
50659
50669
|
MessageSimpleWithContext,
|
|
50660
50670
|
areMessageUIPropsEqual
|
|
50661
50671
|
);
|
|
50662
50672
|
var MessageSimple = (props) => {
|
|
50663
50673
|
const messageContext = useMessageContext("MessageSimple");
|
|
50664
|
-
return /* @__PURE__ */
|
|
50674
|
+
return /* @__PURE__ */ import_react200.default.createElement(MemoizedMessageSimple, { ...messageContext, ...props });
|
|
50665
50675
|
};
|
|
50666
50676
|
|
|
50667
50677
|
// src/components/Message/Message.tsx
|
|
@@ -50697,11 +50707,11 @@ var MessageWithContext = (props) => {
|
|
|
50697
50707
|
canReply,
|
|
50698
50708
|
isMyMessage
|
|
50699
50709
|
} = userRoles;
|
|
50700
|
-
const messageIsUnread = (0,
|
|
50710
|
+
const messageIsUnread = (0, import_react201.useMemo)(
|
|
50701
50711
|
() => !!(!isMyMessage && client.user?.id && read && (!read[client.user.id] || message?.created_at && new Date(message.created_at).getTime() > read[client.user.id].last_read.getTime())),
|
|
50702
50712
|
[client, isMyMessage, message.created_at, read]
|
|
50703
50713
|
);
|
|
50704
|
-
const messageActionsHandler = (0,
|
|
50714
|
+
const messageActionsHandler = (0, import_react201.useCallback)(
|
|
50705
50715
|
() => getMessageActions(messageActions, {
|
|
50706
50716
|
canDelete,
|
|
50707
50717
|
canEdit,
|
|
@@ -50755,9 +50765,9 @@ var MessageWithContext = (props) => {
|
|
|
50755
50765
|
onUserHover,
|
|
50756
50766
|
setEditingState: setEdit
|
|
50757
50767
|
};
|
|
50758
|
-
return /* @__PURE__ */
|
|
50768
|
+
return /* @__PURE__ */ import_react201.default.createElement(MessageProvider, { value: messageContextValue }, /* @__PURE__ */ import_react201.default.createElement(MessageUIComponent, { groupedByUser }));
|
|
50759
50769
|
};
|
|
50760
|
-
var MemoizedMessage =
|
|
50770
|
+
var MemoizedMessage = import_react201.default.memo(
|
|
50761
50771
|
MessageWithContext,
|
|
50762
50772
|
areMessagePropsEqual
|
|
50763
50773
|
);
|
|
@@ -50824,7 +50834,7 @@ var Message = (props) => {
|
|
|
50824
50834
|
notify: addNotification
|
|
50825
50835
|
});
|
|
50826
50836
|
const highlighted = highlightedMessageId === message.id;
|
|
50827
|
-
return /* @__PURE__ */
|
|
50837
|
+
return /* @__PURE__ */ import_react201.default.createElement(
|
|
50828
50838
|
MemoizedMessage,
|
|
50829
50839
|
{
|
|
50830
50840
|
additionalMessageInputProps: props.additionalMessageInputProps,
|
|
@@ -50874,13 +50884,13 @@ var Message = (props) => {
|
|
|
50874
50884
|
};
|
|
50875
50885
|
|
|
50876
50886
|
// src/components/Thread/ThreadHeader.tsx
|
|
50877
|
-
var
|
|
50887
|
+
var import_react203 = __toESM(require("react"));
|
|
50878
50888
|
|
|
50879
50889
|
// src/components/Thread/icons.tsx
|
|
50880
|
-
var
|
|
50890
|
+
var import_react202 = __toESM(require("react"));
|
|
50881
50891
|
var CloseIcon3 = ({ title }) => {
|
|
50882
50892
|
const { t } = useTranslationContext("CloseIcon");
|
|
50883
|
-
return /* @__PURE__ */
|
|
50893
|
+
return /* @__PURE__ */ import_react202.default.createElement(
|
|
50884
50894
|
"svg",
|
|
50885
50895
|
{
|
|
50886
50896
|
"data-testid": "close-no-outline",
|
|
@@ -50888,8 +50898,8 @@ var CloseIcon3 = ({ title }) => {
|
|
|
50888
50898
|
viewBox: "0 0 24 24",
|
|
50889
50899
|
xmlns: "http://www.w3.org/2000/svg"
|
|
50890
50900
|
},
|
|
50891
|
-
/* @__PURE__ */
|
|
50892
|
-
/* @__PURE__ */
|
|
50901
|
+
/* @__PURE__ */ import_react202.default.createElement("title", null, title ?? t("Close")),
|
|
50902
|
+
/* @__PURE__ */ import_react202.default.createElement(
|
|
50893
50903
|
"path",
|
|
50894
50904
|
{
|
|
50895
50905
|
d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
|
|
@@ -50909,7 +50919,7 @@ var ThreadHeader = (props) => {
|
|
|
50909
50919
|
overrideImage,
|
|
50910
50920
|
overrideTitle
|
|
50911
50921
|
});
|
|
50912
|
-
return /* @__PURE__ */
|
|
50922
|
+
return /* @__PURE__ */ import_react203.default.createElement("div", { className: "str-chat__thread-header" }, /* @__PURE__ */ import_react203.default.createElement("div", { className: "str-chat__thread-header-details" }, /* @__PURE__ */ import_react203.default.createElement("div", { className: "str-chat__thread-header-title" }, t("Thread")), /* @__PURE__ */ import_react203.default.createElement("div", { className: "str-chat__thread-header-subtitle" }, displayTitle)), /* @__PURE__ */ import_react203.default.createElement(
|
|
50913
50923
|
"button",
|
|
50914
50924
|
{
|
|
50915
50925
|
"aria-label": t("aria/Close thread"),
|
|
@@ -50917,31 +50927,31 @@ var ThreadHeader = (props) => {
|
|
|
50917
50927
|
"data-testid": "close-button",
|
|
50918
50928
|
onClick: closeThread
|
|
50919
50929
|
},
|
|
50920
|
-
/* @__PURE__ */
|
|
50930
|
+
/* @__PURE__ */ import_react203.default.createElement(CloseIcon3, null)
|
|
50921
50931
|
));
|
|
50922
50932
|
};
|
|
50923
50933
|
|
|
50924
50934
|
// src/components/Thread/ThreadHead.tsx
|
|
50925
|
-
var
|
|
50935
|
+
var import_react205 = __toESM(require("react"));
|
|
50926
50936
|
|
|
50927
50937
|
// src/components/Thread/ThreadStart.tsx
|
|
50928
|
-
var
|
|
50938
|
+
var import_react204 = __toESM(require("react"));
|
|
50929
50939
|
var ThreadStart = () => {
|
|
50930
50940
|
const { thread } = useChannelStateContext("ThreadStart");
|
|
50931
50941
|
const { t } = useTranslationContext("ThreadStart");
|
|
50932
50942
|
if (!thread?.reply_count) return null;
|
|
50933
|
-
return /* @__PURE__ */
|
|
50943
|
+
return /* @__PURE__ */ import_react204.default.createElement("div", { className: "str-chat__thread-start" }, t("replyCount", { count: thread.reply_count }));
|
|
50934
50944
|
};
|
|
50935
50945
|
|
|
50936
50946
|
// src/components/Thread/ThreadHead.tsx
|
|
50937
50947
|
var ThreadHead = (props) => {
|
|
50938
50948
|
const { ThreadStart: ThreadStart2 = ThreadStart } = useComponentContext("ThreadHead");
|
|
50939
|
-
return /* @__PURE__ */
|
|
50949
|
+
return /* @__PURE__ */ import_react205.default.createElement("div", { className: "str-chat__parent-message-li" }, /* @__PURE__ */ import_react205.default.createElement(Message, { initialMessage: true, threadList: true, ...props }), /* @__PURE__ */ import_react205.default.createElement(ThreadStart2, null));
|
|
50940
50950
|
};
|
|
50941
50951
|
|
|
50942
50952
|
// src/components/Thread/Thread.tsx
|
|
50943
|
-
var LegacyThreadContext =
|
|
50944
|
-
var useLegacyThreadContext = () => (0,
|
|
50953
|
+
var LegacyThreadContext = import_react206.default.createContext({ legacyThread: void 0 });
|
|
50954
|
+
var useLegacyThreadContext = () => (0, import_react206.useContext)(LegacyThreadContext);
|
|
50945
50955
|
var Thread = (props) => {
|
|
50946
50956
|
const { channel, channelConfig, thread } = useChannelStateContext("Thread");
|
|
50947
50957
|
const threadInstance = useThreadContext();
|
|
@@ -50949,7 +50959,7 @@ var Thread = (props) => {
|
|
|
50949
50959
|
if (channelConfig?.replies === false) return null;
|
|
50950
50960
|
return (
|
|
50951
50961
|
// FIXME: TS is having trouble here as at least one of the two would always be defined
|
|
50952
|
-
/* @__PURE__ */
|
|
50962
|
+
/* @__PURE__ */ import_react206.default.createElement(
|
|
50953
50963
|
ThreadInner,
|
|
50954
50964
|
{
|
|
50955
50965
|
...props,
|
|
@@ -51000,7 +51010,7 @@ var ThreadInner = (props) => {
|
|
|
51000
51010
|
const FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;
|
|
51001
51011
|
const MessageUIComponent = ThreadMessage || FallbackMessage;
|
|
51002
51012
|
const ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;
|
|
51003
|
-
(0,
|
|
51013
|
+
(0, import_react206.useEffect)(() => {
|
|
51004
51014
|
if (threadInstance) return;
|
|
51005
51015
|
if ((thread?.reply_count ?? 0) > 0) {
|
|
51006
51016
|
loadMoreThread();
|
|
@@ -51023,7 +51033,7 @@ var ThreadInner = (props) => {
|
|
|
51023
51033
|
const threadClass = customClasses?.thread || (0, import_clsx53.default)("str-chat__thread-container str-chat__thread", {
|
|
51024
51034
|
"str-chat__thread--virtualized": virtualized
|
|
51025
51035
|
});
|
|
51026
|
-
const head = /* @__PURE__ */
|
|
51036
|
+
const head = /* @__PURE__ */ import_react206.default.createElement(
|
|
51027
51037
|
ThreadHead2,
|
|
51028
51038
|
{
|
|
51029
51039
|
key: messageAsThread.id,
|
|
@@ -51034,14 +51044,14 @@ var ThreadInner = (props) => {
|
|
|
51034
51044
|
);
|
|
51035
51045
|
return (
|
|
51036
51046
|
// Thread component needs a context which we can use for message composer
|
|
51037
|
-
/* @__PURE__ */
|
|
51047
|
+
/* @__PURE__ */ import_react206.default.createElement(
|
|
51038
51048
|
LegacyThreadContext.Provider,
|
|
51039
51049
|
{
|
|
51040
51050
|
value: {
|
|
51041
51051
|
legacyThread: thread ?? void 0
|
|
51042
51052
|
}
|
|
51043
51053
|
},
|
|
51044
|
-
/* @__PURE__ */
|
|
51054
|
+
/* @__PURE__ */ import_react206.default.createElement("div", { className: threadClass }, /* @__PURE__ */ import_react206.default.createElement(ThreadHeader2, { closeThread, thread: messageAsThread }), /* @__PURE__ */ import_react206.default.createElement(
|
|
51045
51055
|
ThreadMessageList,
|
|
51046
51056
|
{
|
|
51047
51057
|
disableDateSeparator: !enableDateSeparator,
|
|
@@ -51053,7 +51063,7 @@ var ThreadInner = (props) => {
|
|
|
51053
51063
|
...threadProps,
|
|
51054
51064
|
...virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps
|
|
51055
51065
|
}
|
|
51056
|
-
), /* @__PURE__ */
|
|
51066
|
+
), /* @__PURE__ */ import_react206.default.createElement(
|
|
51057
51067
|
MessageInput,
|
|
51058
51068
|
{
|
|
51059
51069
|
focus: autoFocus,
|
|
@@ -51075,15 +51085,15 @@ var useMessageComposer = () => {
|
|
|
51075
51085
|
const { editing, message: editedMessage } = useMessageContext();
|
|
51076
51086
|
const { legacyThread: parentMessage } = useLegacyThreadContext();
|
|
51077
51087
|
const threadInstance = useThreadContext();
|
|
51078
|
-
const cachedEditedMessage = (0,
|
|
51088
|
+
const cachedEditedMessage = (0, import_react207.useMemo)(() => {
|
|
51079
51089
|
if (!editedMessage) return void 0;
|
|
51080
51090
|
return editedMessage;
|
|
51081
51091
|
}, [editedMessage?.id]);
|
|
51082
|
-
const cachedParentMessage = (0,
|
|
51092
|
+
const cachedParentMessage = (0, import_react207.useMemo)(() => {
|
|
51083
51093
|
if (!parentMessage) return void 0;
|
|
51084
51094
|
return parentMessage;
|
|
51085
51095
|
}, [parentMessage?.id]);
|
|
51086
|
-
const messageComposer = (0,
|
|
51096
|
+
const messageComposer = (0, import_react207.useMemo)(() => {
|
|
51087
51097
|
if (editing && cachedEditedMessage) {
|
|
51088
51098
|
const tag = import_stream_chat6.MessageComposer.constructTag(cachedEditedMessage);
|
|
51089
51099
|
const cachedComposer = queueCache.get(tag);
|
|
@@ -51123,7 +51133,7 @@ var useMessageComposer = () => {
|
|
|
51123
51133
|
) && !queueCache.peek(messageComposer.tag)) {
|
|
51124
51134
|
queueCache.add(messageComposer.tag, messageComposer);
|
|
51125
51135
|
}
|
|
51126
|
-
(0,
|
|
51136
|
+
(0, import_react207.useEffect)(() => {
|
|
51127
51137
|
const unsubscribe = messageComposer.registerSubscriptions();
|
|
51128
51138
|
return () => {
|
|
51129
51139
|
unsubscribe();
|
|
@@ -51155,24 +51165,24 @@ var useAttachmentManagerState = () => {
|
|
|
51155
51165
|
var CHANNEL_CONTAINER_ID = "str-chat__channel";
|
|
51156
51166
|
|
|
51157
51167
|
// src/components/Dialog/DialogMenu.tsx
|
|
51158
|
-
var
|
|
51168
|
+
var import_react208 = __toESM(require("react"));
|
|
51159
51169
|
var import_clsx54 = __toESM(require("clsx"));
|
|
51160
51170
|
var DialogMenuButton = ({
|
|
51161
51171
|
children,
|
|
51162
51172
|
className,
|
|
51163
51173
|
...props
|
|
51164
|
-
}) => /* @__PURE__ */
|
|
51174
|
+
}) => /* @__PURE__ */ import_react208.default.createElement("button", { className: (0, import_clsx54.default)("str-chat__dialog-menu__button", className), ...props }, /* @__PURE__ */ import_react208.default.createElement("div", { className: "str-chat__dialog-menu__button-icon" }), /* @__PURE__ */ import_react208.default.createElement("div", { className: "str-chat__dialog-menu__button-text" }, children));
|
|
51165
51175
|
|
|
51166
51176
|
// src/context/AttachmentSelectorContext.tsx
|
|
51167
|
-
var
|
|
51168
|
-
var AttachmentSelectorContext = (0,
|
|
51177
|
+
var import_react209 = __toESM(require("react"));
|
|
51178
|
+
var AttachmentSelectorContext = (0, import_react209.createContext)({
|
|
51169
51179
|
fileInput: null
|
|
51170
51180
|
});
|
|
51171
51181
|
var AttachmentSelectorContextProvider = ({
|
|
51172
51182
|
children,
|
|
51173
51183
|
value
|
|
51174
|
-
}) => /* @__PURE__ */
|
|
51175
|
-
var useAttachmentSelectorContext = () => (0,
|
|
51184
|
+
}) => /* @__PURE__ */ import_react209.default.createElement(AttachmentSelectorContext.Provider, { value }, children);
|
|
51185
|
+
var useAttachmentSelectorContext = () => (0, import_react209.useContext)(AttachmentSelectorContext);
|
|
51176
51186
|
|
|
51177
51187
|
// src/components/MessageInput/AttachmentSelector.tsx
|
|
51178
51188
|
var SimpleAttachmentSelector = () => {
|
|
@@ -51180,10 +51190,10 @@ var SimpleAttachmentSelector = () => {
|
|
|
51180
51190
|
AttachmentSelectorInitiationButtonContents,
|
|
51181
51191
|
FileUploadIcon = UploadIcon
|
|
51182
51192
|
} = useComponentContext();
|
|
51183
|
-
const inputRef = (0,
|
|
51184
|
-
const [labelElement, setLabelElement] = (0,
|
|
51185
|
-
const id = (
|
|
51186
|
-
(0,
|
|
51193
|
+
const inputRef = (0, import_react210.useRef)(null);
|
|
51194
|
+
const [labelElement, setLabelElement] = (0, import_react210.useState)(null);
|
|
51195
|
+
const id = useStableId();
|
|
51196
|
+
(0, import_react210.useEffect)(() => {
|
|
51187
51197
|
if (!labelElement) return;
|
|
51188
51198
|
const handleKeyUp = (event) => {
|
|
51189
51199
|
if (![" ", "Enter"].includes(event.key) || !inputRef.current) return;
|
|
@@ -51195,7 +51205,7 @@ var SimpleAttachmentSelector = () => {
|
|
|
51195
51205
|
labelElement.removeEventListener("keyup", handleKeyUp);
|
|
51196
51206
|
};
|
|
51197
51207
|
}, [labelElement]);
|
|
51198
|
-
return /* @__PURE__ */
|
|
51208
|
+
return /* @__PURE__ */ import_react210.default.createElement("div", { className: "str-chat__file-input-container", "data-testid": "file-upload-button" }, /* @__PURE__ */ import_react210.default.createElement(UploadFileInput, { id, ref: inputRef }), /* @__PURE__ */ import_react210.default.createElement(
|
|
51199
51209
|
"label",
|
|
51200
51210
|
{
|
|
51201
51211
|
className: "str-chat__file-input-label",
|
|
@@ -51203,25 +51213,25 @@ var SimpleAttachmentSelector = () => {
|
|
|
51203
51213
|
ref: setLabelElement,
|
|
51204
51214
|
tabIndex: 0
|
|
51205
51215
|
},
|
|
51206
|
-
AttachmentSelectorInitiationButtonContents ? /* @__PURE__ */
|
|
51216
|
+
AttachmentSelectorInitiationButtonContents ? /* @__PURE__ */ import_react210.default.createElement(AttachmentSelectorInitiationButtonContents, null) : /* @__PURE__ */ import_react210.default.createElement(FileUploadIcon, null)
|
|
51207
51217
|
));
|
|
51208
51218
|
};
|
|
51209
51219
|
var AttachmentSelectorMenuInitButtonIcon = () => {
|
|
51210
51220
|
const { AttachmentSelectorInitiationButtonContents, FileUploadIcon } = useComponentContext("SimpleAttachmentSelector");
|
|
51211
51221
|
if (AttachmentSelectorInitiationButtonContents) {
|
|
51212
|
-
return /* @__PURE__ */
|
|
51222
|
+
return /* @__PURE__ */ import_react210.default.createElement(AttachmentSelectorInitiationButtonContents, null);
|
|
51213
51223
|
}
|
|
51214
51224
|
if (FileUploadIcon) {
|
|
51215
|
-
return /* @__PURE__ */
|
|
51225
|
+
return /* @__PURE__ */ import_react210.default.createElement(FileUploadIcon, null);
|
|
51216
51226
|
}
|
|
51217
|
-
return /* @__PURE__ */
|
|
51227
|
+
return /* @__PURE__ */ import_react210.default.createElement("div", { className: "str-chat__attachment-selector__menu-button__icon" });
|
|
51218
51228
|
};
|
|
51219
51229
|
var DefaultAttachmentSelectorComponents = {
|
|
51220
51230
|
File({ closeMenu }) {
|
|
51221
51231
|
const { t } = useTranslationContext();
|
|
51222
51232
|
const { fileInput } = useAttachmentSelectorContext();
|
|
51223
51233
|
const { isUploadEnabled } = useAttachmentManagerState();
|
|
51224
|
-
return /* @__PURE__ */
|
|
51234
|
+
return /* @__PURE__ */ import_react210.default.createElement(
|
|
51225
51235
|
DialogMenuButton,
|
|
51226
51236
|
{
|
|
51227
51237
|
className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__upload-file-button",
|
|
@@ -51236,7 +51246,7 @@ var DefaultAttachmentSelectorComponents = {
|
|
|
51236
51246
|
},
|
|
51237
51247
|
Poll({ closeMenu, openModalForAction }) {
|
|
51238
51248
|
const { t } = useTranslationContext();
|
|
51239
|
-
return /* @__PURE__ */
|
|
51249
|
+
return /* @__PURE__ */ import_react210.default.createElement(
|
|
51240
51250
|
DialogMenuButton,
|
|
51241
51251
|
{
|
|
51242
51252
|
className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__create-poll-button",
|
|
@@ -51284,8 +51294,8 @@ var AttachmentSelector = ({
|
|
|
51284
51294
|
const menuDialogId = `attachment-actions-menu${isThreadInput ? "-thread" : ""}`;
|
|
51285
51295
|
const menuDialog = useDialog({ id: menuDialogId });
|
|
51286
51296
|
const menuDialogIsOpen = useDialogIsOpen(menuDialogId);
|
|
51287
|
-
const [modalContentAction, setModalContentActionAction] = (0,
|
|
51288
|
-
const openModal = (0,
|
|
51297
|
+
const [modalContentAction, setModalContentActionAction] = (0, import_react210.useState)();
|
|
51298
|
+
const openModal = (0, import_react210.useCallback)(
|
|
51289
51299
|
(actionType) => {
|
|
51290
51300
|
const action = actions.find((a) => a.type === actionType);
|
|
51291
51301
|
if (!action?.ModalContent) return;
|
|
@@ -51293,19 +51303,19 @@ var AttachmentSelector = ({
|
|
|
51293
51303
|
},
|
|
51294
51304
|
[actions]
|
|
51295
51305
|
);
|
|
51296
|
-
const closeModal = (0,
|
|
51297
|
-
const [fileInput, setFileInput] = (0,
|
|
51298
|
-
const menuButtonRef = (0,
|
|
51299
|
-
const getDefaultPortalDestination = (0,
|
|
51306
|
+
const closeModal = (0, import_react210.useCallback)(() => setModalContentActionAction(void 0), []);
|
|
51307
|
+
const [fileInput, setFileInput] = (0, import_react210.useState)(null);
|
|
51308
|
+
const menuButtonRef = (0, import_react210.useRef)(null);
|
|
51309
|
+
const getDefaultPortalDestination = (0, import_react210.useCallback)(
|
|
51300
51310
|
() => document.getElementById(CHANNEL_CONTAINER_ID),
|
|
51301
51311
|
[]
|
|
51302
51312
|
);
|
|
51303
51313
|
if (actions.length === 0) return null;
|
|
51304
51314
|
if (actions.length === 1 && actions[0].type === "uploadFile")
|
|
51305
|
-
return /* @__PURE__ */
|
|
51315
|
+
return /* @__PURE__ */ import_react210.default.createElement(SimpleAttachmentSelector, null);
|
|
51306
51316
|
const ModalContent = modalContentAction?.ModalContent;
|
|
51307
51317
|
const modalIsOpen = !!ModalContent;
|
|
51308
|
-
return /* @__PURE__ */
|
|
51318
|
+
return /* @__PURE__ */ import_react210.default.createElement(AttachmentSelectorContextProvider, { value: { fileInput } }, /* @__PURE__ */ import_react210.default.createElement("div", { className: "str-chat__attachment-selector" }, channelCapabilities["upload-file"] && /* @__PURE__ */ import_react210.default.createElement(UploadFileInput, { ref: setFileInput }), /* @__PURE__ */ import_react210.default.createElement(
|
|
51309
51319
|
"button",
|
|
51310
51320
|
{
|
|
51311
51321
|
"aria-expanded": menuDialogIsOpen,
|
|
@@ -51316,8 +51326,8 @@ var AttachmentSelector = ({
|
|
|
51316
51326
|
onClick: () => menuDialog?.toggle(),
|
|
51317
51327
|
ref: menuButtonRef
|
|
51318
51328
|
},
|
|
51319
|
-
/* @__PURE__ */
|
|
51320
|
-
), /* @__PURE__ */
|
|
51329
|
+
/* @__PURE__ */ import_react210.default.createElement(AttachmentSelectorMenuInitButtonIcon, null)
|
|
51330
|
+
), /* @__PURE__ */ import_react210.default.createElement(
|
|
51321
51331
|
DialogAnchor,
|
|
51322
51332
|
{
|
|
51323
51333
|
id: menuDialogId,
|
|
@@ -51326,13 +51336,13 @@ var AttachmentSelector = ({
|
|
|
51326
51336
|
tabIndex: -1,
|
|
51327
51337
|
trapFocus: true
|
|
51328
51338
|
},
|
|
51329
|
-
/* @__PURE__ */
|
|
51339
|
+
/* @__PURE__ */ import_react210.default.createElement(
|
|
51330
51340
|
"div",
|
|
51331
51341
|
{
|
|
51332
51342
|
className: "str-chat__attachment-selector-actions-menu str-chat__dialog-menu",
|
|
51333
51343
|
"data-testid": "attachment-selector-actions-menu"
|
|
51334
51344
|
},
|
|
51335
|
-
actions.map(({ ActionButton, type }) => /* @__PURE__ */
|
|
51345
|
+
actions.map(({ ActionButton, type }) => /* @__PURE__ */ import_react210.default.createElement(
|
|
51336
51346
|
ActionButton,
|
|
51337
51347
|
{
|
|
51338
51348
|
closeMenu: menuDialog.close,
|
|
@@ -51341,30 +51351,30 @@ var AttachmentSelector = ({
|
|
|
51341
51351
|
}
|
|
51342
51352
|
))
|
|
51343
51353
|
)
|
|
51344
|
-
), /* @__PURE__ */
|
|
51354
|
+
), /* @__PURE__ */ import_react210.default.createElement(
|
|
51345
51355
|
Portal,
|
|
51346
51356
|
{
|
|
51347
51357
|
getPortalDestination: getModalPortalDestination ?? getDefaultPortalDestination,
|
|
51348
51358
|
isOpen: modalIsOpen
|
|
51349
51359
|
},
|
|
51350
|
-
/* @__PURE__ */
|
|
51360
|
+
/* @__PURE__ */ import_react210.default.createElement(
|
|
51351
51361
|
Modal,
|
|
51352
51362
|
{
|
|
51353
51363
|
className: "str-chat__create-poll-modal",
|
|
51354
51364
|
onClose: closeModal,
|
|
51355
51365
|
open: modalIsOpen
|
|
51356
51366
|
},
|
|
51357
|
-
ModalContent && /* @__PURE__ */
|
|
51367
|
+
ModalContent && /* @__PURE__ */ import_react210.default.createElement(ModalContent, { close: closeModal })
|
|
51358
51368
|
)
|
|
51359
51369
|
)));
|
|
51360
51370
|
};
|
|
51361
51371
|
|
|
51362
51372
|
// src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx
|
|
51363
|
-
var
|
|
51373
|
+
var import_react228 = __toESM(require("react"));
|
|
51364
51374
|
var import_stream_chat9 = require("stream-chat");
|
|
51365
51375
|
|
|
51366
51376
|
// src/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
|
|
51367
|
-
var
|
|
51377
|
+
var import_react211 = __toESM(require("react"));
|
|
51368
51378
|
var import_stream_chat7 = require("stream-chat");
|
|
51369
51379
|
var UnsupportedAttachmentPreview = ({
|
|
51370
51380
|
attachment,
|
|
@@ -51373,14 +51383,14 @@ var UnsupportedAttachmentPreview = ({
|
|
|
51373
51383
|
}) => {
|
|
51374
51384
|
const { t } = useTranslationContext("UnsupportedAttachmentPreview");
|
|
51375
51385
|
const title = attachment.title ?? t("Unsupported attachment");
|
|
51376
|
-
return /* @__PURE__ */
|
|
51386
|
+
return /* @__PURE__ */ import_react211.default.createElement(
|
|
51377
51387
|
"div",
|
|
51378
51388
|
{
|
|
51379
51389
|
className: "str-chat__attachment-preview-unsupported",
|
|
51380
51390
|
"data-testid": "attachment-preview-unknown"
|
|
51381
51391
|
},
|
|
51382
|
-
/* @__PURE__ */
|
|
51383
|
-
/* @__PURE__ */
|
|
51392
|
+
/* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__attachment-preview-file-icon" }, /* @__PURE__ */ import_react211.default.createElement(FileIcon, { filename: title, mimeType: attachment.mime_type })),
|
|
51393
|
+
/* @__PURE__ */ import_react211.default.createElement(
|
|
51384
51394
|
"button",
|
|
51385
51395
|
{
|
|
51386
51396
|
"aria-label": t("aria/Remove attachment"),
|
|
@@ -51389,18 +51399,18 @@ var UnsupportedAttachmentPreview = ({
|
|
|
51389
51399
|
disabled: attachment.localMetadata?.uploadState === "uploading",
|
|
51390
51400
|
onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata?.id])
|
|
51391
51401
|
},
|
|
51392
|
-
/* @__PURE__ */
|
|
51402
|
+
/* @__PURE__ */ import_react211.default.createElement(CloseIcon, null)
|
|
51393
51403
|
),
|
|
51394
|
-
(0, import_stream_chat7.isLocalUploadAttachment)(attachment) && ["blocked", "failed"].includes(attachment.localMetadata?.uploadState) && !!handleRetry && /* @__PURE__ */
|
|
51404
|
+
(0, import_stream_chat7.isLocalUploadAttachment)(attachment) && ["blocked", "failed"].includes(attachment.localMetadata?.uploadState) && !!handleRetry && /* @__PURE__ */ import_react211.default.createElement(
|
|
51395
51405
|
"button",
|
|
51396
51406
|
{
|
|
51397
51407
|
className: "str-chat__attachment-preview-error str-chat__attachment-preview-error-file",
|
|
51398
51408
|
"data-testid": "file-preview-item-retry-button",
|
|
51399
51409
|
onClick: () => handleRetry(attachment)
|
|
51400
51410
|
},
|
|
51401
|
-
/* @__PURE__ */
|
|
51411
|
+
/* @__PURE__ */ import_react211.default.createElement(RetryIcon, null)
|
|
51402
51412
|
),
|
|
51403
|
-
/* @__PURE__ */
|
|
51413
|
+
/* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__attachment-preview-metadata" }, /* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__attachment-preview-title", title }, title), attachment.localMetadata?.uploadState === "finished" && !!attachment.asset_url && /* @__PURE__ */ import_react211.default.createElement(
|
|
51404
51414
|
"a",
|
|
51405
51415
|
{
|
|
51406
51416
|
className: "str-chat__attachment-preview-file-download",
|
|
@@ -51409,16 +51419,16 @@ var UnsupportedAttachmentPreview = ({
|
|
|
51409
51419
|
rel: "noreferrer",
|
|
51410
51420
|
target: "_blank"
|
|
51411
51421
|
},
|
|
51412
|
-
/* @__PURE__ */
|
|
51413
|
-
), attachment.localMetadata?.uploadState === "uploading" && /* @__PURE__ */
|
|
51422
|
+
/* @__PURE__ */ import_react211.default.createElement(DownloadIcon2, null)
|
|
51423
|
+
), attachment.localMetadata?.uploadState === "uploading" && /* @__PURE__ */ import_react211.default.createElement(LoadingIndicatorIcon, { size: 17 }))
|
|
51414
51424
|
);
|
|
51415
51425
|
};
|
|
51416
51426
|
|
|
51417
51427
|
// src/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.tsx
|
|
51418
|
-
var
|
|
51428
|
+
var import_react219 = __toESM(require("react"));
|
|
51419
51429
|
|
|
51420
51430
|
// src/components/MediaRecorder/RecordingPermissionDeniedNotification.tsx
|
|
51421
|
-
var
|
|
51431
|
+
var import_react212 = __toESM(require("react"));
|
|
51422
51432
|
var RecordingPermissionDeniedNotification = ({
|
|
51423
51433
|
onClose,
|
|
51424
51434
|
permissionName
|
|
@@ -51434,7 +51444,7 @@ var RecordingPermissionDeniedNotification = ({
|
|
|
51434
51444
|
microphone: t("Allow access to microphone")
|
|
51435
51445
|
}
|
|
51436
51446
|
};
|
|
51437
|
-
return /* @__PURE__ */
|
|
51447
|
+
return /* @__PURE__ */ import_react212.default.createElement("div", { className: "str-chat__recording-permission-denied-notification" }, /* @__PURE__ */ import_react212.default.createElement("div", { className: "str-chat__recording-permission-denied-notification__heading" }, permissionTranslations.heading[permissionName]), /* @__PURE__ */ import_react212.default.createElement("p", { className: "str-chat__recording-permission-denied-notification__message" }, permissionTranslations.body[permissionName]), /* @__PURE__ */ import_react212.default.createElement("div", { className: "str-chat__recording-permission-denied-notification__dismiss-button-container" }, /* @__PURE__ */ import_react212.default.createElement(
|
|
51438
51448
|
"button",
|
|
51439
51449
|
{
|
|
51440
51450
|
className: "str-chat__recording-permission-denied-notification__dismiss-button",
|
|
@@ -51445,15 +51455,15 @@ var RecordingPermissionDeniedNotification = ({
|
|
|
51445
51455
|
};
|
|
51446
51456
|
|
|
51447
51457
|
// src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx
|
|
51448
|
-
var
|
|
51458
|
+
var import_react217 = __toESM(require("react"));
|
|
51449
51459
|
|
|
51450
51460
|
// src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
|
|
51451
|
-
var
|
|
51461
|
+
var import_react214 = __toESM(require("react"));
|
|
51452
51462
|
|
|
51453
51463
|
// src/components/MediaRecorder/AudioRecorder/RecordingTimer.tsx
|
|
51454
51464
|
var import_clsx55 = __toESM(require("clsx"));
|
|
51455
|
-
var
|
|
51456
|
-
var RecordingTimer = ({ durationSeconds }) => /* @__PURE__ */
|
|
51465
|
+
var import_react213 = __toESM(require("react"));
|
|
51466
|
+
var RecordingTimer = ({ durationSeconds }) => /* @__PURE__ */ import_react213.default.createElement(
|
|
51457
51467
|
"div",
|
|
51458
51468
|
{
|
|
51459
51469
|
className: (0, import_clsx55.default)("str-chat__recording-timer", {
|
|
@@ -51475,15 +51485,15 @@ var AudioRecordingPreview = ({
|
|
|
51475
51485
|
mimeType
|
|
51476
51486
|
});
|
|
51477
51487
|
const displayedDuration = secondsElapsed || durationSeconds;
|
|
51478
|
-
return /* @__PURE__ */
|
|
51488
|
+
return /* @__PURE__ */ import_react214.default.createElement(import_react214.default.Fragment, null, /* @__PURE__ */ import_react214.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react214.default.createElement("source", { src: props.src, type: mimeType })), /* @__PURE__ */ import_react214.default.createElement(
|
|
51479
51489
|
"button",
|
|
51480
51490
|
{
|
|
51481
51491
|
className: "str-chat__audio_recorder__toggle-playback-button",
|
|
51482
51492
|
"data-testid": "audio-recording-preview-toggle-play-btn",
|
|
51483
51493
|
onClick: togglePlay
|
|
51484
51494
|
},
|
|
51485
|
-
isPlaying ? /* @__PURE__ */
|
|
51486
|
-
), /* @__PURE__ */
|
|
51495
|
+
isPlaying ? /* @__PURE__ */ import_react214.default.createElement(PauseIcon2, null) : /* @__PURE__ */ import_react214.default.createElement(PlayIcon, null)
|
|
51496
|
+
), /* @__PURE__ */ import_react214.default.createElement(RecordingTimer, { durationSeconds: displayedDuration }), /* @__PURE__ */ import_react214.default.createElement("div", { className: "str-chat__wave-progress-bar__track-container" }, /* @__PURE__ */ import_react214.default.createElement(
|
|
51487
51497
|
WaveProgressBar,
|
|
51488
51498
|
{
|
|
51489
51499
|
progress,
|
|
@@ -51494,24 +51504,24 @@ var AudioRecordingPreview = ({
|
|
|
51494
51504
|
};
|
|
51495
51505
|
|
|
51496
51506
|
// src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx
|
|
51497
|
-
var
|
|
51507
|
+
var import_react216 = __toESM(require("react"));
|
|
51498
51508
|
|
|
51499
51509
|
// src/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.ts
|
|
51500
|
-
var
|
|
51510
|
+
var import_react215 = require("react");
|
|
51501
51511
|
var useTimeElapsed = ({ startOnMount } = {}) => {
|
|
51502
|
-
const [secondsElapsed, setSecondsElapsed] = (0,
|
|
51503
|
-
const updateInterval = (0,
|
|
51504
|
-
const startCounter = (0,
|
|
51512
|
+
const [secondsElapsed, setSecondsElapsed] = (0, import_react215.useState)(0);
|
|
51513
|
+
const updateInterval = (0, import_react215.useRef)(void 0);
|
|
51514
|
+
const startCounter = (0, import_react215.useCallback)(() => {
|
|
51505
51515
|
if (updateInterval.current) return;
|
|
51506
51516
|
updateInterval.current = setInterval(() => {
|
|
51507
51517
|
setSecondsElapsed((prev) => prev + 1);
|
|
51508
51518
|
}, 1e3);
|
|
51509
51519
|
}, []);
|
|
51510
|
-
const stopCounter = (0,
|
|
51520
|
+
const stopCounter = (0, import_react215.useCallback)(() => {
|
|
51511
51521
|
clearInterval(updateInterval.current);
|
|
51512
51522
|
updateInterval.current = void 0;
|
|
51513
51523
|
}, []);
|
|
51514
|
-
(0,
|
|
51524
|
+
(0, import_react215.useEffect)(() => {
|
|
51515
51525
|
if (!startOnMount) return;
|
|
51516
51526
|
startCounter();
|
|
51517
51527
|
return () => {
|
|
@@ -51530,8 +51540,8 @@ var AudioRecordingWaveform = ({ maxDataPointsDrawn = 100 }) => {
|
|
|
51530
51540
|
const {
|
|
51531
51541
|
recordingController: { recorder }
|
|
51532
51542
|
} = useMessageInputContext();
|
|
51533
|
-
const [amplitudes, setAmplitudes] = (0,
|
|
51534
|
-
(0,
|
|
51543
|
+
const [amplitudes, setAmplitudes] = (0, import_react216.useState)([]);
|
|
51544
|
+
(0, import_react216.useEffect)(() => {
|
|
51535
51545
|
if (!recorder?.amplitudeRecorder) return;
|
|
51536
51546
|
const amplitudesSubscription = recorder.amplitudeRecorder.amplitudes.subscribe(setAmplitudes);
|
|
51537
51547
|
return () => {
|
|
@@ -51539,7 +51549,7 @@ var AudioRecordingWaveform = ({ maxDataPointsDrawn = 100 }) => {
|
|
|
51539
51549
|
};
|
|
51540
51550
|
}, [recorder]);
|
|
51541
51551
|
if (!recorder) return null;
|
|
51542
|
-
return /* @__PURE__ */
|
|
51552
|
+
return /* @__PURE__ */ import_react216.default.createElement("div", { className: "str-chat__waveform-box-container" }, /* @__PURE__ */ import_react216.default.createElement("div", { className: "str-chat__audio_recorder__waveform-box" }, amplitudes.slice(-maxDataPointsDrawn).map((amplitude, i) => /* @__PURE__ */ import_react216.default.createElement(
|
|
51543
51553
|
"div",
|
|
51544
51554
|
{
|
|
51545
51555
|
className: "str-chat__wave-progress-bar__amplitude-bar",
|
|
@@ -51555,7 +51565,7 @@ var AudioRecordingInProgress = () => {
|
|
|
51555
51565
|
const {
|
|
51556
51566
|
recordingController: { recorder }
|
|
51557
51567
|
} = useMessageInputContext();
|
|
51558
|
-
(0,
|
|
51568
|
+
(0, import_react216.useEffect)(() => {
|
|
51559
51569
|
if (!recorder?.mediaRecorder) return;
|
|
51560
51570
|
const { mediaRecorder } = recorder;
|
|
51561
51571
|
if (mediaRecorder.state === "recording") {
|
|
@@ -51572,7 +51582,7 @@ var AudioRecordingInProgress = () => {
|
|
|
51572
51582
|
mediaRecorder.removeEventListener("pause", stopCounter);
|
|
51573
51583
|
};
|
|
51574
51584
|
}, [recorder, startCounter, stopCounter]);
|
|
51575
|
-
return /* @__PURE__ */
|
|
51585
|
+
return /* @__PURE__ */ import_react216.default.createElement(import_react216.default.Fragment, null, /* @__PURE__ */ import_react216.default.createElement(RecordingTimer, { durationSeconds: secondsElapsed }), /* @__PURE__ */ import_react216.default.createElement(AudioRecordingWaveform, null));
|
|
51576
51586
|
};
|
|
51577
51587
|
|
|
51578
51588
|
// src/components/MediaRecorder/observable/Subscription.ts
|
|
@@ -51752,7 +51762,7 @@ var BrowserPermission = class {
|
|
|
51752
51762
|
|
|
51753
51763
|
// src/components/MediaRecorder/classes/MediaRecorderController.ts
|
|
51754
51764
|
var import_fix_webm_duration = __toESM(require("fix-webm-duration"));
|
|
51755
|
-
var
|
|
51765
|
+
var import_nanoid5 = require("nanoid");
|
|
51756
51766
|
|
|
51757
51767
|
// src/utils/mergeDeep.ts
|
|
51758
51768
|
var import_lodash18 = __toESM(require("lodash.mergewith"));
|
|
@@ -52030,7 +52040,7 @@ var MediaRecorderController = class {
|
|
|
52030
52040
|
file_size: blob.size,
|
|
52031
52041
|
localMetadata: {
|
|
52032
52042
|
file,
|
|
52033
|
-
id: (0,
|
|
52043
|
+
id: (0, import_nanoid5.nanoid)()
|
|
52034
52044
|
},
|
|
52035
52045
|
mime_type: blob.type,
|
|
52036
52046
|
title: file.name,
|
|
@@ -52219,7 +52229,7 @@ var AudioRecorder = () => {
|
|
|
52219
52229
|
recordingController: { completeRecording, recorder, recording, recordingState }
|
|
52220
52230
|
} = messageInputContext;
|
|
52221
52231
|
const isUploadingFile = recording?.localMetadata?.uploadState === "uploading";
|
|
52222
|
-
const state = (0,
|
|
52232
|
+
const state = (0, import_react217.useMemo)(
|
|
52223
52233
|
() => ({
|
|
52224
52234
|
paused: recordingState === "paused" /* PAUSED */,
|
|
52225
52235
|
recording: recordingState === "recording" /* RECORDING */,
|
|
@@ -52228,7 +52238,7 @@ var AudioRecorder = () => {
|
|
|
52228
52238
|
[recordingState]
|
|
52229
52239
|
);
|
|
52230
52240
|
if (!recorder) return null;
|
|
52231
|
-
return /* @__PURE__ */
|
|
52241
|
+
return /* @__PURE__ */ import_react217.default.createElement("div", { className: "str-chat__audio_recorder-container" }, /* @__PURE__ */ import_react217.default.createElement("div", { className: "str-chat__audio_recorder", "data-testid": "audio-recorder" }, /* @__PURE__ */ import_react217.default.createElement(
|
|
52232
52242
|
"button",
|
|
52233
52243
|
{
|
|
52234
52244
|
className: "str-chat__audio_recorder__cancel-button",
|
|
@@ -52236,8 +52246,8 @@ var AudioRecorder = () => {
|
|
|
52236
52246
|
disabled: isUploadingFile,
|
|
52237
52247
|
onClick: recorder.cancel
|
|
52238
52248
|
},
|
|
52239
|
-
/* @__PURE__ */
|
|
52240
|
-
), state.stopped && recording?.asset_url ? /* @__PURE__ */
|
|
52249
|
+
/* @__PURE__ */ import_react217.default.createElement(BinIcon, null)
|
|
52250
|
+
), state.stopped && recording?.asset_url ? /* @__PURE__ */ import_react217.default.createElement(
|
|
52241
52251
|
AudioRecordingPreview,
|
|
52242
52252
|
{
|
|
52243
52253
|
durationSeconds: recording.duration ?? 0,
|
|
@@ -52245,22 +52255,22 @@ var AudioRecorder = () => {
|
|
|
52245
52255
|
src: recording.asset_url,
|
|
52246
52256
|
waveformData: recording.waveform_data
|
|
52247
52257
|
}
|
|
52248
|
-
) : state.paused || state.recording ? /* @__PURE__ */
|
|
52258
|
+
) : state.paused || state.recording ? /* @__PURE__ */ import_react217.default.createElement(AudioRecordingInProgress, null) : null, state.paused && /* @__PURE__ */ import_react217.default.createElement(
|
|
52249
52259
|
"button",
|
|
52250
52260
|
{
|
|
52251
52261
|
className: "str-chat__audio_recorder__resume-recording-button",
|
|
52252
52262
|
onClick: recorder.resume
|
|
52253
52263
|
},
|
|
52254
|
-
/* @__PURE__ */
|
|
52255
|
-
), state.recording && /* @__PURE__ */
|
|
52264
|
+
/* @__PURE__ */ import_react217.default.createElement(MicIcon, null)
|
|
52265
|
+
), state.recording && /* @__PURE__ */ import_react217.default.createElement(
|
|
52256
52266
|
"button",
|
|
52257
52267
|
{
|
|
52258
52268
|
className: "str-chat__audio_recorder__pause-recording-button",
|
|
52259
52269
|
"data-testid": "pause-recording-audio-button",
|
|
52260
52270
|
onClick: recorder.pause
|
|
52261
52271
|
},
|
|
52262
|
-
/* @__PURE__ */
|
|
52263
|
-
), state.stopped ? /* @__PURE__ */
|
|
52272
|
+
/* @__PURE__ */ import_react217.default.createElement(PauseIcon2, null)
|
|
52273
|
+
), state.stopped ? /* @__PURE__ */ import_react217.default.createElement(
|
|
52264
52274
|
"button",
|
|
52265
52275
|
{
|
|
52266
52276
|
className: "str-chat__audio_recorder__complete-button",
|
|
@@ -52268,21 +52278,21 @@ var AudioRecorder = () => {
|
|
|
52268
52278
|
disabled: isUploadingFile,
|
|
52269
52279
|
onClick: completeRecording
|
|
52270
52280
|
},
|
|
52271
|
-
isUploadingFile ? /* @__PURE__ */
|
|
52272
|
-
) : /* @__PURE__ */
|
|
52281
|
+
isUploadingFile ? /* @__PURE__ */ import_react217.default.createElement(LoadingIndicatorIcon, null) : /* @__PURE__ */ import_react217.default.createElement(SendIcon, null)
|
|
52282
|
+
) : /* @__PURE__ */ import_react217.default.createElement(
|
|
52273
52283
|
"button",
|
|
52274
52284
|
{
|
|
52275
52285
|
className: "str-chat__audio_recorder__stop-button",
|
|
52276
52286
|
"data-testid": "audio-recorder-stop-button",
|
|
52277
52287
|
onClick: recorder.stop
|
|
52278
52288
|
},
|
|
52279
|
-
/* @__PURE__ */
|
|
52289
|
+
/* @__PURE__ */ import_react217.default.createElement(CheckSignIcon, null)
|
|
52280
52290
|
)));
|
|
52281
52291
|
};
|
|
52282
52292
|
|
|
52283
52293
|
// src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx
|
|
52284
|
-
var
|
|
52285
|
-
var StartRecordingAudioButton = (props) => /* @__PURE__ */
|
|
52294
|
+
var import_react218 = __toESM(require("react"));
|
|
52295
|
+
var StartRecordingAudioButton = (props) => /* @__PURE__ */ import_react218.default.createElement(
|
|
52286
52296
|
"button",
|
|
52287
52297
|
{
|
|
52288
52298
|
"aria-label": "Start recording audio",
|
|
@@ -52290,7 +52300,7 @@ var StartRecordingAudioButton = (props) => /* @__PURE__ */ import_react217.defau
|
|
|
52290
52300
|
"data-testid": "start-recording-audio-button",
|
|
52291
52301
|
...props
|
|
52292
52302
|
},
|
|
52293
|
-
/* @__PURE__ */
|
|
52303
|
+
/* @__PURE__ */ import_react218.default.createElement(MicIcon, null)
|
|
52294
52304
|
);
|
|
52295
52305
|
|
|
52296
52306
|
// src/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.tsx
|
|
@@ -52303,13 +52313,13 @@ var VoiceRecordingPreview = ({
|
|
|
52303
52313
|
const { audioRef, isPlaying, secondsElapsed, togglePlay } = useAudioController({
|
|
52304
52314
|
mimeType: attachment.mime_type
|
|
52305
52315
|
});
|
|
52306
|
-
return /* @__PURE__ */
|
|
52316
|
+
return /* @__PURE__ */ import_react219.default.createElement(
|
|
52307
52317
|
"div",
|
|
52308
52318
|
{
|
|
52309
52319
|
className: "str-chat__attachment-preview-voice-recording",
|
|
52310
52320
|
"data-testid": "attachment-preview-voice-recording"
|
|
52311
52321
|
},
|
|
52312
|
-
/* @__PURE__ */
|
|
52322
|
+
/* @__PURE__ */ import_react219.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react219.default.createElement(
|
|
52313
52323
|
"source",
|
|
52314
52324
|
{
|
|
52315
52325
|
"data-testid": "audio-source",
|
|
@@ -52317,8 +52327,8 @@ var VoiceRecordingPreview = ({
|
|
|
52317
52327
|
type: attachment.mime_type
|
|
52318
52328
|
}
|
|
52319
52329
|
)),
|
|
52320
|
-
/* @__PURE__ */
|
|
52321
|
-
/* @__PURE__ */
|
|
52330
|
+
/* @__PURE__ */ import_react219.default.createElement(PlayButton, { isPlaying, onClick: togglePlay }),
|
|
52331
|
+
/* @__PURE__ */ import_react219.default.createElement(
|
|
52322
52332
|
"button",
|
|
52323
52333
|
{
|
|
52324
52334
|
"aria-label": t("aria/Remove attachment"),
|
|
@@ -52327,24 +52337,24 @@ var VoiceRecordingPreview = ({
|
|
|
52327
52337
|
disabled: attachment.localMetadata?.uploadState === "uploading",
|
|
52328
52338
|
onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata.id])
|
|
52329
52339
|
},
|
|
52330
|
-
/* @__PURE__ */
|
|
52340
|
+
/* @__PURE__ */ import_react219.default.createElement(CloseIcon, null)
|
|
52331
52341
|
),
|
|
52332
|
-
["blocked", "failed"].includes(attachment.localMetadata?.uploadState) && !!handleRetry && /* @__PURE__ */
|
|
52342
|
+
["blocked", "failed"].includes(attachment.localMetadata?.uploadState) && !!handleRetry && /* @__PURE__ */ import_react219.default.createElement(
|
|
52333
52343
|
"button",
|
|
52334
52344
|
{
|
|
52335
52345
|
className: "str-chat__attachment-preview-error str-chat__attachment-preview-error-file",
|
|
52336
52346
|
"data-testid": "file-preview-item-retry-button",
|
|
52337
52347
|
onClick: () => handleRetry(attachment)
|
|
52338
52348
|
},
|
|
52339
|
-
/* @__PURE__ */
|
|
52349
|
+
/* @__PURE__ */ import_react219.default.createElement(RetryIcon, null)
|
|
52340
52350
|
),
|
|
52341
|
-
/* @__PURE__ */
|
|
52342
|
-
/* @__PURE__ */
|
|
52351
|
+
/* @__PURE__ */ import_react219.default.createElement("div", { className: "str-chat__attachment-preview-metadata" }, /* @__PURE__ */ import_react219.default.createElement("div", { className: "str-chat__attachment-preview-file-name", title: attachment.title }, attachment.title), typeof attachment.duration !== "undefined" && /* @__PURE__ */ import_react219.default.createElement(RecordingTimer, { durationSeconds: secondsElapsed || attachment.duration }), attachment.localMetadata?.uploadState === "uploading" && /* @__PURE__ */ import_react219.default.createElement(LoadingIndicatorIcon, { size: 17 })),
|
|
52352
|
+
/* @__PURE__ */ import_react219.default.createElement("div", { className: "str-chat__attachment-preview-file-icon" }, /* @__PURE__ */ import_react219.default.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type }))
|
|
52343
52353
|
);
|
|
52344
52354
|
};
|
|
52345
52355
|
|
|
52346
52356
|
// src/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.tsx
|
|
52347
|
-
var
|
|
52357
|
+
var import_react220 = __toESM(require("react"));
|
|
52348
52358
|
var FileAttachmentPreview = ({
|
|
52349
52359
|
attachment,
|
|
52350
52360
|
handleRetry,
|
|
@@ -52352,14 +52362,14 @@ var FileAttachmentPreview = ({
|
|
|
52352
52362
|
}) => {
|
|
52353
52363
|
const { t } = useTranslationContext("FilePreview");
|
|
52354
52364
|
const uploadState = attachment.localMetadata?.uploadState;
|
|
52355
|
-
return /* @__PURE__ */
|
|
52365
|
+
return /* @__PURE__ */ import_react220.default.createElement(
|
|
52356
52366
|
"div",
|
|
52357
52367
|
{
|
|
52358
52368
|
className: "str-chat__attachment-preview-file",
|
|
52359
52369
|
"data-testid": "attachment-preview-file"
|
|
52360
52370
|
},
|
|
52361
|
-
/* @__PURE__ */
|
|
52362
|
-
/* @__PURE__ */
|
|
52371
|
+
/* @__PURE__ */ import_react220.default.createElement("div", { className: "str-chat__attachment-preview-file-icon" }, /* @__PURE__ */ import_react220.default.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type })),
|
|
52372
|
+
/* @__PURE__ */ import_react220.default.createElement(
|
|
52363
52373
|
"button",
|
|
52364
52374
|
{
|
|
52365
52375
|
"aria-label": t("aria/Remove attachment"),
|
|
@@ -52368,9 +52378,9 @@ var FileAttachmentPreview = ({
|
|
|
52368
52378
|
disabled: uploadState === "uploading",
|
|
52369
52379
|
onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata?.id])
|
|
52370
52380
|
},
|
|
52371
|
-
/* @__PURE__ */
|
|
52381
|
+
/* @__PURE__ */ import_react220.default.createElement(CloseIcon, null)
|
|
52372
52382
|
),
|
|
52373
|
-
["blocked", "failed"].includes(uploadState) && !!handleRetry && /* @__PURE__ */
|
|
52383
|
+
["blocked", "failed"].includes(uploadState) && !!handleRetry && /* @__PURE__ */ import_react220.default.createElement(
|
|
52374
52384
|
"button",
|
|
52375
52385
|
{
|
|
52376
52386
|
className: "str-chat__attachment-preview-error str-chat__attachment-preview-error-file",
|
|
@@ -52379,9 +52389,9 @@ var FileAttachmentPreview = ({
|
|
|
52379
52389
|
handleRetry(attachment);
|
|
52380
52390
|
}
|
|
52381
52391
|
},
|
|
52382
|
-
/* @__PURE__ */
|
|
52392
|
+
/* @__PURE__ */ import_react220.default.createElement(RetryIcon, null)
|
|
52383
52393
|
),
|
|
52384
|
-
/* @__PURE__ */
|
|
52394
|
+
/* @__PURE__ */ import_react220.default.createElement("div", { className: "str-chat__attachment-preview-file-end" }, /* @__PURE__ */ import_react220.default.createElement("div", { className: "str-chat__attachment-preview-file-name", title: attachment.title }, attachment.title), (typeof uploadState === "undefined" || uploadState === "finished") && !!attachment.asset_url && /* @__PURE__ */ import_react220.default.createElement(
|
|
52385
52395
|
"a",
|
|
52386
52396
|
{
|
|
52387
52397
|
"aria-label": t("aria/Download attachment"),
|
|
@@ -52392,14 +52402,14 @@ var FileAttachmentPreview = ({
|
|
|
52392
52402
|
target: "_blank",
|
|
52393
52403
|
title: t("Download attachment {{ name }}", { name: attachment.title })
|
|
52394
52404
|
},
|
|
52395
|
-
/* @__PURE__ */
|
|
52396
|
-
), uploadState === "uploading" && /* @__PURE__ */
|
|
52405
|
+
/* @__PURE__ */ import_react220.default.createElement(DownloadIcon2, null)
|
|
52406
|
+
), uploadState === "uploading" && /* @__PURE__ */ import_react220.default.createElement(LoadingIndicatorIcon, { size: 17 }))
|
|
52397
52407
|
);
|
|
52398
52408
|
};
|
|
52399
52409
|
|
|
52400
52410
|
// src/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.tsx
|
|
52401
52411
|
var import_clsx56 = __toESM(require("clsx"));
|
|
52402
|
-
var
|
|
52412
|
+
var import_react221 = __toESM(require("react"));
|
|
52403
52413
|
var ImageAttachmentPreview = ({
|
|
52404
52414
|
attachment,
|
|
52405
52415
|
handleRetry,
|
|
@@ -52407,11 +52417,11 @@ var ImageAttachmentPreview = ({
|
|
|
52407
52417
|
}) => {
|
|
52408
52418
|
const { t } = useTranslationContext("ImagePreviewItem");
|
|
52409
52419
|
const { BaseImage: BaseImage3 = BaseImage } = useComponentContext("ImagePreview");
|
|
52410
|
-
const [previewError, setPreviewError] = (0,
|
|
52420
|
+
const [previewError, setPreviewError] = (0, import_react221.useState)(false);
|
|
52411
52421
|
const { id, uploadState } = attachment.localMetadata ?? {};
|
|
52412
|
-
const handleLoadError = (0,
|
|
52422
|
+
const handleLoadError = (0, import_react221.useCallback)(() => setPreviewError(true), []);
|
|
52413
52423
|
const assetUrl = attachment.image_url || attachment.localMetadata.previewUri;
|
|
52414
|
-
return /* @__PURE__ */
|
|
52424
|
+
return /* @__PURE__ */ import_react221.default.createElement(
|
|
52415
52425
|
"div",
|
|
52416
52426
|
{
|
|
52417
52427
|
className: (0, import_clsx56.default)("str-chat__attachment-preview-image", {
|
|
@@ -52419,7 +52429,7 @@ var ImageAttachmentPreview = ({
|
|
|
52419
52429
|
}),
|
|
52420
52430
|
"data-testid": "attachment-preview-image"
|
|
52421
52431
|
},
|
|
52422
|
-
/* @__PURE__ */
|
|
52432
|
+
/* @__PURE__ */ import_react221.default.createElement(
|
|
52423
52433
|
"button",
|
|
52424
52434
|
{
|
|
52425
52435
|
"aria-label": t("aria/Remove attachment"),
|
|
@@ -52428,19 +52438,19 @@ var ImageAttachmentPreview = ({
|
|
|
52428
52438
|
disabled: uploadState === "uploading",
|
|
52429
52439
|
onClick: () => id && removeAttachments([id])
|
|
52430
52440
|
},
|
|
52431
|
-
/* @__PURE__ */
|
|
52441
|
+
/* @__PURE__ */ import_react221.default.createElement(CloseIcon, null)
|
|
52432
52442
|
),
|
|
52433
|
-
["blocked", "failed"].includes(uploadState) && /* @__PURE__ */
|
|
52443
|
+
["blocked", "failed"].includes(uploadState) && /* @__PURE__ */ import_react221.default.createElement(
|
|
52434
52444
|
"button",
|
|
52435
52445
|
{
|
|
52436
52446
|
className: "str-chat__attachment-preview-error str-chat__attachment-preview-error-image",
|
|
52437
52447
|
"data-testid": "image-preview-item-retry-button",
|
|
52438
52448
|
onClick: () => handleRetry(attachment)
|
|
52439
52449
|
},
|
|
52440
|
-
/* @__PURE__ */
|
|
52450
|
+
/* @__PURE__ */ import_react221.default.createElement(RetryIcon, null)
|
|
52441
52451
|
),
|
|
52442
|
-
uploadState === "uploading" && /* @__PURE__ */
|
|
52443
|
-
assetUrl && /* @__PURE__ */
|
|
52452
|
+
uploadState === "uploading" && /* @__PURE__ */ import_react221.default.createElement("div", { className: "str-chat__attachment-preview-image-loading" }, /* @__PURE__ */ import_react221.default.createElement(LoadingIndicatorIcon, { size: 17 })),
|
|
52453
|
+
assetUrl && /* @__PURE__ */ import_react221.default.createElement(
|
|
52444
52454
|
BaseImage3,
|
|
52445
52455
|
{
|
|
52446
52456
|
alt: attachment.fallback,
|
|
@@ -52454,11 +52464,11 @@ var ImageAttachmentPreview = ({
|
|
|
52454
52464
|
};
|
|
52455
52465
|
|
|
52456
52466
|
// src/components/MessageInput/hooks/useCanCreatePoll.ts
|
|
52457
|
-
var
|
|
52467
|
+
var import_react222 = require("react");
|
|
52458
52468
|
var useCanCreatePoll = () => {
|
|
52459
52469
|
const { pollComposer } = useMessageComposer();
|
|
52460
|
-
const [canCreatePoll, setCanCreatePoll] = (0,
|
|
52461
|
-
(0,
|
|
52470
|
+
const [canCreatePoll, setCanCreatePoll] = (0, import_react222.useState)(pollComposer.canCreatePoll);
|
|
52471
|
+
(0, import_react222.useEffect)(
|
|
52462
52472
|
() => pollComposer.state.subscribe(() => {
|
|
52463
52473
|
setCanCreatePoll(pollComposer.canCreatePoll);
|
|
52464
52474
|
}),
|
|
@@ -52468,20 +52478,20 @@ var useCanCreatePoll = () => {
|
|
|
52468
52478
|
};
|
|
52469
52479
|
|
|
52470
52480
|
// src/components/MessageInput/hooks/useCooldownTimer.tsx
|
|
52471
|
-
var
|
|
52481
|
+
var import_react223 = require("react");
|
|
52472
52482
|
var useCooldownTimer = () => {
|
|
52473
52483
|
const { client, latestMessageDatesByChannels } = useChatContext("useCooldownTimer");
|
|
52474
52484
|
const { channel, messages = [] } = useChannelStateContext("useCooldownTimer");
|
|
52475
|
-
const [cooldownRemaining, setCooldownRemaining] = (0,
|
|
52485
|
+
const [cooldownRemaining, setCooldownRemaining] = (0, import_react223.useState)();
|
|
52476
52486
|
const { cooldown: cooldownInterval = 0, own_capabilities } = channel.data || {};
|
|
52477
52487
|
const skipCooldown = own_capabilities?.includes("skip-slow-mode");
|
|
52478
|
-
const ownLatestMessageDate = (0,
|
|
52488
|
+
const ownLatestMessageDate = (0, import_react223.useMemo)(
|
|
52479
52489
|
() => latestMessageDatesByChannels[channel.cid] ?? [...messages].sort(
|
|
52480
52490
|
(a, b) => b.created_at?.getTime() - a.created_at?.getTime()
|
|
52481
52491
|
).find((v) => v.user?.id === client.user?.id)?.created_at,
|
|
52482
52492
|
[messages, client.user?.id, latestMessageDatesByChannels, channel.cid]
|
|
52483
52493
|
);
|
|
52484
|
-
(0,
|
|
52494
|
+
(0, import_react223.useEffect)(() => {
|
|
52485
52495
|
const timeSinceOwnLastMessage = ownLatestMessageDate ? (
|
|
52486
52496
|
// prevent negative values
|
|
52487
52497
|
Math.max(0, ((/* @__PURE__ */ new Date()).getTime() - ownLatestMessageDate.getTime()) / 1e3)
|
|
@@ -52504,11 +52514,11 @@ var useCooldownTimer = () => {
|
|
|
52504
52514
|
};
|
|
52505
52515
|
|
|
52506
52516
|
// src/components/MessageInput/hooks/useTextareaRef.ts
|
|
52507
|
-
var
|
|
52517
|
+
var import_react224 = require("react");
|
|
52508
52518
|
var useTextareaRef = (props) => {
|
|
52509
52519
|
const { focus } = props;
|
|
52510
|
-
const textareaRef = (0,
|
|
52511
|
-
(0,
|
|
52520
|
+
const textareaRef = (0, import_react224.useRef)(void 0);
|
|
52521
|
+
(0, import_react224.useEffect)(() => {
|
|
52512
52522
|
if (focus && textareaRef.current) {
|
|
52513
52523
|
textareaRef.current.focus();
|
|
52514
52524
|
}
|
|
@@ -52519,7 +52529,7 @@ var useTextareaRef = (props) => {
|
|
|
52519
52529
|
};
|
|
52520
52530
|
|
|
52521
52531
|
// src/components/MessageInput/hooks/useSubmitHandler.ts
|
|
52522
|
-
var
|
|
52532
|
+
var import_react225 = require("react");
|
|
52523
52533
|
var import_stream_chat8 = require("stream-chat");
|
|
52524
52534
|
var takeStateSnapshot = (messageComposer) => {
|
|
52525
52535
|
const textComposerState = messageComposer.textComposer.state.getLatestValue();
|
|
@@ -52542,7 +52552,7 @@ var useSubmitHandler = (props) => {
|
|
|
52542
52552
|
const { addNotification, editMessage, sendMessage } = useChannelActionContext("useSubmitHandler");
|
|
52543
52553
|
const { t } = useTranslationContext("useSubmitHandler");
|
|
52544
52554
|
const messageComposer = useMessageComposer();
|
|
52545
|
-
const handleSubmit = (0,
|
|
52555
|
+
const handleSubmit = (0, import_react225.useCallback)(
|
|
52546
52556
|
async (event) => {
|
|
52547
52557
|
event?.preventDefault();
|
|
52548
52558
|
const composition = await messageComposer.compose();
|
|
@@ -52599,10 +52609,10 @@ var useSubmitHandler = (props) => {
|
|
|
52599
52609
|
};
|
|
52600
52610
|
|
|
52601
52611
|
// src/components/MessageInput/hooks/usePasteHandler.ts
|
|
52602
|
-
var
|
|
52612
|
+
var import_react226 = require("react");
|
|
52603
52613
|
var usePasteHandler = () => {
|
|
52604
52614
|
const { attachmentManager, textComposer } = useMessageComposer();
|
|
52605
|
-
const onPaste = (0,
|
|
52615
|
+
const onPaste = (0, import_react226.useCallback)(
|
|
52606
52616
|
(clipboardEvent) => {
|
|
52607
52617
|
(async (event) => {
|
|
52608
52618
|
const { items } = event.clipboardData;
|
|
@@ -52634,7 +52644,7 @@ var usePasteHandler = () => {
|
|
|
52634
52644
|
};
|
|
52635
52645
|
|
|
52636
52646
|
// src/components/MediaRecorder/hooks/useMediaRecorder.ts
|
|
52637
|
-
var
|
|
52647
|
+
var import_react227 = require("react");
|
|
52638
52648
|
var useMediaRecorder = ({
|
|
52639
52649
|
asyncMessagesMultiSendEnabled,
|
|
52640
52650
|
enabled,
|
|
@@ -52644,11 +52654,11 @@ var useMediaRecorder = ({
|
|
|
52644
52654
|
}) => {
|
|
52645
52655
|
const { t } = useTranslationContext("useMediaRecorder");
|
|
52646
52656
|
const messageComposer = useMessageComposer();
|
|
52647
|
-
const [recording, setRecording] = (0,
|
|
52648
|
-
const [recordingState, setRecordingState] = (0,
|
|
52649
|
-
const [permissionState, setPermissionState] = (0,
|
|
52650
|
-
const [isScheduledForSubmit, scheduleForSubmit] = (0,
|
|
52651
|
-
const recorder = (0,
|
|
52657
|
+
const [recording, setRecording] = (0, import_react227.useState)();
|
|
52658
|
+
const [recordingState, setRecordingState] = (0, import_react227.useState)();
|
|
52659
|
+
const [permissionState, setPermissionState] = (0, import_react227.useState)();
|
|
52660
|
+
const [isScheduledForSubmit, scheduleForSubmit] = (0, import_react227.useState)(false);
|
|
52661
|
+
const recorder = (0, import_react227.useMemo)(
|
|
52652
52662
|
() => enabled ? new MediaRecorderController({
|
|
52653
52663
|
config: recordingConfig ?? {},
|
|
52654
52664
|
generateRecordingTitle,
|
|
@@ -52656,7 +52666,7 @@ var useMediaRecorder = ({
|
|
|
52656
52666
|
}) : void 0,
|
|
52657
52667
|
[recordingConfig, enabled, generateRecordingTitle, t]
|
|
52658
52668
|
);
|
|
52659
|
-
const completeRecording = (0,
|
|
52669
|
+
const completeRecording = (0, import_react227.useCallback)(async () => {
|
|
52660
52670
|
if (!recorder) return;
|
|
52661
52671
|
const recording2 = await recorder.stop();
|
|
52662
52672
|
if (!recording2) return;
|
|
@@ -52666,12 +52676,12 @@ var useMediaRecorder = ({
|
|
|
52666
52676
|
}
|
|
52667
52677
|
recorder.cleanUp();
|
|
52668
52678
|
}, [asyncMessagesMultiSendEnabled, messageComposer, recorder]);
|
|
52669
|
-
(0,
|
|
52679
|
+
(0, import_react227.useEffect)(() => {
|
|
52670
52680
|
if (!isScheduledForSubmit) return;
|
|
52671
52681
|
handleSubmit();
|
|
52672
52682
|
scheduleForSubmit(false);
|
|
52673
52683
|
}, [handleSubmit, isScheduledForSubmit]);
|
|
52674
|
-
(0,
|
|
52684
|
+
(0, import_react227.useEffect)(() => {
|
|
52675
52685
|
if (!recorder) return;
|
|
52676
52686
|
recorder.permission.watch();
|
|
52677
52687
|
const recordingSubscription = recorder.recording.subscribe(setRecording);
|
|
@@ -52734,7 +52744,7 @@ var AttachmentPreviewList = ({
|
|
|
52734
52744
|
const messageComposer = useMessageComposer();
|
|
52735
52745
|
const { attachments } = useAttachmentManagerState();
|
|
52736
52746
|
if (!attachments.length) return null;
|
|
52737
|
-
return /* @__PURE__ */
|
|
52747
|
+
return /* @__PURE__ */ import_react228.default.createElement("div", { className: "str-chat__attachment-preview-list" }, /* @__PURE__ */ import_react228.default.createElement(
|
|
52738
52748
|
"div",
|
|
52739
52749
|
{
|
|
52740
52750
|
className: "str-chat__attachment-list-scroll-container",
|
|
@@ -52743,7 +52753,7 @@ var AttachmentPreviewList = ({
|
|
|
52743
52753
|
attachments.map((attachment) => {
|
|
52744
52754
|
if ((0, import_stream_chat9.isScrapedContent)(attachment)) return null;
|
|
52745
52755
|
if ((0, import_stream_chat9.isLocalVoiceRecordingAttachment)(attachment)) {
|
|
52746
|
-
return /* @__PURE__ */
|
|
52756
|
+
return /* @__PURE__ */ import_react228.default.createElement(
|
|
52747
52757
|
VoiceRecordingPreview2,
|
|
52748
52758
|
{
|
|
52749
52759
|
attachment,
|
|
@@ -52753,7 +52763,7 @@ var AttachmentPreviewList = ({
|
|
|
52753
52763
|
}
|
|
52754
52764
|
);
|
|
52755
52765
|
} else if ((0, import_stream_chat9.isLocalAudioAttachment)(attachment)) {
|
|
52756
|
-
return /* @__PURE__ */
|
|
52766
|
+
return /* @__PURE__ */ import_react228.default.createElement(
|
|
52757
52767
|
AudioAttachmentPreview,
|
|
52758
52768
|
{
|
|
52759
52769
|
attachment,
|
|
@@ -52763,7 +52773,7 @@ var AttachmentPreviewList = ({
|
|
|
52763
52773
|
}
|
|
52764
52774
|
);
|
|
52765
52775
|
} else if ((0, import_stream_chat9.isLocalVideoAttachment)(attachment)) {
|
|
52766
|
-
return /* @__PURE__ */
|
|
52776
|
+
return /* @__PURE__ */ import_react228.default.createElement(
|
|
52767
52777
|
VideoAttachmentPreview,
|
|
52768
52778
|
{
|
|
52769
52779
|
attachment,
|
|
@@ -52773,7 +52783,7 @@ var AttachmentPreviewList = ({
|
|
|
52773
52783
|
}
|
|
52774
52784
|
);
|
|
52775
52785
|
} else if ((0, import_stream_chat9.isLocalImageAttachment)(attachment)) {
|
|
52776
|
-
return /* @__PURE__ */
|
|
52786
|
+
return /* @__PURE__ */ import_react228.default.createElement(
|
|
52777
52787
|
ImageAttachmentPreview2,
|
|
52778
52788
|
{
|
|
52779
52789
|
attachment,
|
|
@@ -52783,7 +52793,7 @@ var AttachmentPreviewList = ({
|
|
|
52783
52793
|
}
|
|
52784
52794
|
);
|
|
52785
52795
|
} else if ((0, import_stream_chat9.isLocalFileAttachment)(attachment)) {
|
|
52786
|
-
return /* @__PURE__ */
|
|
52796
|
+
return /* @__PURE__ */ import_react228.default.createElement(
|
|
52787
52797
|
FileAttachmentPreview2,
|
|
52788
52798
|
{
|
|
52789
52799
|
attachment,
|
|
@@ -52793,7 +52803,7 @@ var AttachmentPreviewList = ({
|
|
|
52793
52803
|
}
|
|
52794
52804
|
);
|
|
52795
52805
|
} else if ((0, import_stream_chat9.isLocalAttachment)(attachment)) {
|
|
52796
|
-
return /* @__PURE__ */
|
|
52806
|
+
return /* @__PURE__ */ import_react228.default.createElement(
|
|
52797
52807
|
UnsupportedAttachmentPreview2,
|
|
52798
52808
|
{
|
|
52799
52809
|
attachment,
|
|
@@ -52809,13 +52819,13 @@ var AttachmentPreviewList = ({
|
|
|
52809
52819
|
};
|
|
52810
52820
|
|
|
52811
52821
|
// src/components/MessageInput/CooldownTimer.tsx
|
|
52812
|
-
var
|
|
52822
|
+
var import_react230 = __toESM(require("react"));
|
|
52813
52823
|
|
|
52814
52824
|
// src/components/MessageInput/hooks/useTimer.ts
|
|
52815
|
-
var
|
|
52825
|
+
var import_react229 = require("react");
|
|
52816
52826
|
var useTimer = ({ startFrom }) => {
|
|
52817
|
-
const [secondsLeft, setSecondsLeft] = (0,
|
|
52818
|
-
(0,
|
|
52827
|
+
const [secondsLeft, setSecondsLeft] = (0, import_react229.useState)();
|
|
52828
|
+
(0, import_react229.useEffect)(() => {
|
|
52819
52829
|
let countdownTimeout;
|
|
52820
52830
|
if (typeof secondsLeft === "number" && secondsLeft > 0) {
|
|
52821
52831
|
countdownTimeout = setTimeout(() => {
|
|
@@ -52826,7 +52836,7 @@ var useTimer = ({ startFrom }) => {
|
|
|
52826
52836
|
clearTimeout(countdownTimeout);
|
|
52827
52837
|
};
|
|
52828
52838
|
}, [secondsLeft]);
|
|
52829
|
-
(0,
|
|
52839
|
+
(0, import_react229.useEffect)(() => {
|
|
52830
52840
|
setSecondsLeft(startFrom ?? 0);
|
|
52831
52841
|
}, [startFrom]);
|
|
52832
52842
|
return secondsLeft;
|
|
@@ -52835,23 +52845,23 @@ var useTimer = ({ startFrom }) => {
|
|
|
52835
52845
|
// src/components/MessageInput/CooldownTimer.tsx
|
|
52836
52846
|
var CooldownTimer = ({ cooldownInterval }) => {
|
|
52837
52847
|
const secondsLeft = useTimer({ startFrom: cooldownInterval });
|
|
52838
|
-
return /* @__PURE__ */
|
|
52848
|
+
return /* @__PURE__ */ import_react230.default.createElement("div", { className: "str-chat__message-input-cooldown", "data-testid": "cooldown-timer" }, secondsLeft);
|
|
52839
52849
|
};
|
|
52840
52850
|
|
|
52841
52851
|
// src/components/MessageInput/EditMessageForm.tsx
|
|
52842
|
-
var
|
|
52852
|
+
var import_react248 = __toESM(require("react"));
|
|
52843
52853
|
|
|
52844
52854
|
// src/components/MessageInput/MessageInput.tsx
|
|
52845
|
-
var
|
|
52855
|
+
var import_react247 = __toESM(require("react"));
|
|
52846
52856
|
|
|
52847
52857
|
// src/components/MessageInput/MessageInputFlat.tsx
|
|
52848
|
-
var
|
|
52858
|
+
var import_react245 = __toESM(require("react"));
|
|
52849
52859
|
|
|
52850
52860
|
// src/components/MessageInput/SendButton.tsx
|
|
52851
|
-
var
|
|
52861
|
+
var import_react231 = __toESM(require("react"));
|
|
52852
52862
|
var SendButton = ({ sendMessage, ...rest }) => {
|
|
52853
52863
|
const hasSendableData = useMessageComposerHasSendableData();
|
|
52854
|
-
return /* @__PURE__ */
|
|
52864
|
+
return /* @__PURE__ */ import_react231.default.createElement(
|
|
52855
52865
|
"button",
|
|
52856
52866
|
{
|
|
52857
52867
|
"aria-label": "Send",
|
|
@@ -52862,18 +52872,18 @@ var SendButton = ({ sendMessage, ...rest }) => {
|
|
|
52862
52872
|
type: "button",
|
|
52863
52873
|
...rest
|
|
52864
52874
|
},
|
|
52865
|
-
/* @__PURE__ */
|
|
52875
|
+
/* @__PURE__ */ import_react231.default.createElement(SendIcon, null)
|
|
52866
52876
|
);
|
|
52867
52877
|
};
|
|
52868
52878
|
|
|
52869
52879
|
// src/components/MessageInput/StopAIGenerationButton.tsx
|
|
52870
|
-
var
|
|
52880
|
+
var import_react232 = __toESM(require("react"));
|
|
52871
52881
|
var StopAIGenerationButton = ({
|
|
52872
52882
|
onClick,
|
|
52873
52883
|
...restProps
|
|
52874
52884
|
}) => {
|
|
52875
52885
|
const { t } = useTranslationContext();
|
|
52876
|
-
return /* @__PURE__ */
|
|
52886
|
+
return /* @__PURE__ */ import_react232.default.createElement(
|
|
52877
52887
|
"button",
|
|
52878
52888
|
{
|
|
52879
52889
|
"aria-label": t("aria/Stop AI Generation"),
|
|
@@ -52886,7 +52896,7 @@ var StopAIGenerationButton = ({
|
|
|
52886
52896
|
};
|
|
52887
52897
|
|
|
52888
52898
|
// src/components/MessageInput/QuotedMessagePreview.tsx
|
|
52889
|
-
var
|
|
52899
|
+
var import_react233 = __toESM(require("react"));
|
|
52890
52900
|
var messageComposerStateStoreSelector = (state) => ({
|
|
52891
52901
|
quotedMessage: state.quotedMessage
|
|
52892
52902
|
});
|
|
@@ -52898,14 +52908,14 @@ var QuotedMessagePreviewHeader = () => {
|
|
|
52898
52908
|
messageComposerStateStoreSelector
|
|
52899
52909
|
);
|
|
52900
52910
|
if (!quotedMessage) return null;
|
|
52901
|
-
return /* @__PURE__ */
|
|
52911
|
+
return /* @__PURE__ */ import_react233.default.createElement("div", { className: "str-chat__quoted-message-preview-header" }, /* @__PURE__ */ import_react233.default.createElement("div", { className: "str-chat__quoted-message-reply-to-message" }, t("Reply to Message")), /* @__PURE__ */ import_react233.default.createElement(
|
|
52902
52912
|
"button",
|
|
52903
52913
|
{
|
|
52904
52914
|
"aria-label": t("aria/Cancel Reply"),
|
|
52905
52915
|
className: "str-chat__quoted-message-remove",
|
|
52906
52916
|
onClick: () => messageComposer.setQuotedMessage(null)
|
|
52907
52917
|
},
|
|
52908
|
-
/* @__PURE__ */
|
|
52918
|
+
/* @__PURE__ */ import_react233.default.createElement(CloseIcon, null)
|
|
52909
52919
|
));
|
|
52910
52920
|
};
|
|
52911
52921
|
var QuotedMessagePreview = ({
|
|
@@ -52919,27 +52929,27 @@ var QuotedMessagePreview = ({
|
|
|
52919
52929
|
messageComposer.state,
|
|
52920
52930
|
messageComposerStateStoreSelector
|
|
52921
52931
|
);
|
|
52922
|
-
const quotedMessageText = (0,
|
|
52932
|
+
const quotedMessageText = (0, import_react233.useMemo)(
|
|
52923
52933
|
() => quotedMessage?.i18n?.[`${userLanguage}_text`] || quotedMessage?.text,
|
|
52924
52934
|
[quotedMessage?.i18n, quotedMessage?.text, userLanguage]
|
|
52925
52935
|
);
|
|
52926
|
-
const renderedText = (0,
|
|
52936
|
+
const renderedText = (0, import_react233.useMemo)(
|
|
52927
52937
|
() => renderText2(quotedMessageText, quotedMessage?.mentioned_users),
|
|
52928
52938
|
[quotedMessage, quotedMessageText, renderText2]
|
|
52929
52939
|
);
|
|
52930
|
-
const quotedMessageAttachments = (0,
|
|
52940
|
+
const quotedMessageAttachments = (0, import_react233.useMemo)(
|
|
52931
52941
|
() => quotedMessage?.attachments?.length ? quotedMessage.attachments.slice(0, 1) : [],
|
|
52932
52942
|
[quotedMessage]
|
|
52933
52943
|
);
|
|
52934
52944
|
const poll = quotedMessage?.poll_id && client.polls.fromState(quotedMessage.poll_id);
|
|
52935
52945
|
if (!quotedMessageText && !quotedMessageAttachments.length && !poll) return null;
|
|
52936
|
-
return /* @__PURE__ */
|
|
52946
|
+
return /* @__PURE__ */ import_react233.default.createElement(
|
|
52937
52947
|
"div",
|
|
52938
52948
|
{
|
|
52939
52949
|
className: "str-chat__quoted-message-preview",
|
|
52940
52950
|
"data-testid": "quoted-message-preview"
|
|
52941
52951
|
},
|
|
52942
|
-
quotedMessage?.user && /* @__PURE__ */
|
|
52952
|
+
quotedMessage?.user && /* @__PURE__ */ import_react233.default.createElement(
|
|
52943
52953
|
Avatar2,
|
|
52944
52954
|
{
|
|
52945
52955
|
className: "str-chat__avatar--quoted-message-sender",
|
|
@@ -52948,7 +52958,7 @@ var QuotedMessagePreview = ({
|
|
|
52948
52958
|
user: quotedMessage.user
|
|
52949
52959
|
}
|
|
52950
52960
|
),
|
|
52951
|
-
/* @__PURE__ */
|
|
52961
|
+
/* @__PURE__ */ import_react233.default.createElement("div", { className: "str-chat__quoted-message-bubble" }, poll ? /* @__PURE__ */ import_react233.default.createElement(Poll, { isQuoted: true, poll }) : /* @__PURE__ */ import_react233.default.createElement(import_react233.default.Fragment, null, !!quotedMessageAttachments.length && /* @__PURE__ */ import_react233.default.createElement(Attachment2, { attachments: quotedMessageAttachments, isQuoted: true }), /* @__PURE__ */ import_react233.default.createElement(
|
|
52952
52962
|
"div",
|
|
52953
52963
|
{
|
|
52954
52964
|
className: "str-chat__quoted-message-text",
|
|
@@ -52961,7 +52971,7 @@ var QuotedMessagePreview = ({
|
|
|
52961
52971
|
|
|
52962
52972
|
// src/components/MessageInput/LinkPreviewList.tsx
|
|
52963
52973
|
var import_clsx57 = __toESM(require("clsx"));
|
|
52964
|
-
var
|
|
52974
|
+
var import_react234 = __toESM(require("react"));
|
|
52965
52975
|
var import_stream_chat10 = require("stream-chat");
|
|
52966
52976
|
var linkPreviewsManagerStateSelector = (state) => ({
|
|
52967
52977
|
linkPreviews: Array.from(state.previews.values()).filter(
|
|
@@ -52984,15 +52994,15 @@ var LinkPreviewList = () => {
|
|
|
52984
52994
|
);
|
|
52985
52995
|
const showLinkPreviews = linkPreviews.length > 0 && !quotedMessage;
|
|
52986
52996
|
if (!showLinkPreviews) return null;
|
|
52987
|
-
return /* @__PURE__ */
|
|
52997
|
+
return /* @__PURE__ */ import_react234.default.createElement("div", { className: "str-chat__link-preview-list" }, linkPreviews.map((linkPreview) => /* @__PURE__ */ import_react234.default.createElement(LinkPreviewCard, { key: linkPreview.og_scrape_url, linkPreview })));
|
|
52988
52998
|
};
|
|
52989
52999
|
var LinkPreviewCard = ({ linkPreview }) => {
|
|
52990
53000
|
const { linkPreviewsManager } = useMessageComposer();
|
|
52991
53001
|
const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
|
|
52992
|
-
const [referenceElement, setReferenceElement] = (0,
|
|
53002
|
+
const [referenceElement, setReferenceElement] = (0, import_react234.useState)(null);
|
|
52993
53003
|
if (!import_stream_chat10.LinkPreviewsManager.previewIsLoaded(linkPreview) && !import_stream_chat10.LinkPreviewsManager.previewIsLoading(linkPreview))
|
|
52994
53004
|
return null;
|
|
52995
|
-
return /* @__PURE__ */
|
|
53005
|
+
return /* @__PURE__ */ import_react234.default.createElement(
|
|
52996
53006
|
"div",
|
|
52997
53007
|
{
|
|
52998
53008
|
className: (0, import_clsx57.default)("str-chat__link-preview-card", {
|
|
@@ -53000,7 +53010,7 @@ var LinkPreviewCard = ({ linkPreview }) => {
|
|
|
53000
53010
|
}),
|
|
53001
53011
|
"data-testid": "link-preview-card"
|
|
53002
53012
|
},
|
|
53003
|
-
/* @__PURE__ */
|
|
53013
|
+
/* @__PURE__ */ import_react234.default.createElement(
|
|
53004
53014
|
PopperTooltip,
|
|
53005
53015
|
{
|
|
53006
53016
|
offset: [0, 5],
|
|
@@ -53009,7 +53019,7 @@ var LinkPreviewCard = ({ linkPreview }) => {
|
|
|
53009
53019
|
},
|
|
53010
53020
|
linkPreview.og_scrape_url
|
|
53011
53021
|
),
|
|
53012
|
-
/* @__PURE__ */
|
|
53022
|
+
/* @__PURE__ */ import_react234.default.createElement(
|
|
53013
53023
|
"div",
|
|
53014
53024
|
{
|
|
53015
53025
|
className: "str-chat__link-preview-card__icon-container",
|
|
@@ -53017,10 +53027,10 @@ var LinkPreviewCard = ({ linkPreview }) => {
|
|
|
53017
53027
|
onMouseLeave: handleLeave,
|
|
53018
53028
|
ref: setReferenceElement
|
|
53019
53029
|
},
|
|
53020
|
-
/* @__PURE__ */
|
|
53030
|
+
/* @__PURE__ */ import_react234.default.createElement(LinkIcon, null)
|
|
53021
53031
|
),
|
|
53022
|
-
/* @__PURE__ */
|
|
53023
|
-
/* @__PURE__ */
|
|
53032
|
+
/* @__PURE__ */ import_react234.default.createElement("div", { className: "str-chat__link-preview-card__content" }, /* @__PURE__ */ import_react234.default.createElement("div", { className: "str-chat__link-preview-card__content-title" }, linkPreview.title), /* @__PURE__ */ import_react234.default.createElement("div", { className: "str-chat__link-preview-card__content-description" }, linkPreview.text)),
|
|
53033
|
+
/* @__PURE__ */ import_react234.default.createElement(
|
|
53024
53034
|
"button",
|
|
53025
53035
|
{
|
|
53026
53036
|
className: "str-chat__link-preview-card__dismiss-button",
|
|
@@ -53028,49 +53038,49 @@ var LinkPreviewCard = ({ linkPreview }) => {
|
|
|
53028
53038
|
onClick: () => linkPreviewsManager.dismissPreview(linkPreview.og_scrape_url),
|
|
53029
53039
|
type: "button"
|
|
53030
53040
|
},
|
|
53031
|
-
/* @__PURE__ */
|
|
53041
|
+
/* @__PURE__ */ import_react234.default.createElement(CloseIcon, null)
|
|
53032
53042
|
)
|
|
53033
53043
|
);
|
|
53034
53044
|
};
|
|
53035
53045
|
|
|
53036
53046
|
// src/components/TextareaComposer/SuggestionList/CommandItem.tsx
|
|
53037
|
-
var
|
|
53047
|
+
var import_react235 = __toESM(require("react"));
|
|
53038
53048
|
var CommandItem = (props) => {
|
|
53039
53049
|
const { entity } = props;
|
|
53040
|
-
return /* @__PURE__ */
|
|
53050
|
+
return /* @__PURE__ */ import_react235.default.createElement("div", { className: "str-chat__slash-command" }, /* @__PURE__ */ import_react235.default.createElement("span", { className: "str-chat__slash-command-header" }, /* @__PURE__ */ import_react235.default.createElement("strong", null, entity.name), " ", entity.args), /* @__PURE__ */ import_react235.default.createElement("br", null), /* @__PURE__ */ import_react235.default.createElement("span", { className: "str-chat__slash-command-description" }, entity.description));
|
|
53041
53051
|
};
|
|
53042
53052
|
|
|
53043
53053
|
// src/components/TextareaComposer/SuggestionList/EmoticonItem.tsx
|
|
53044
|
-
var
|
|
53054
|
+
var import_react236 = __toESM(require("react"));
|
|
53045
53055
|
var EmoticonItem = (props) => {
|
|
53046
53056
|
const { entity } = props;
|
|
53047
53057
|
const hasEntity = Object.keys(entity).length;
|
|
53048
53058
|
if (!hasEntity) return null;
|
|
53049
53059
|
const { parts, token } = entity.tokenizedDisplayName ?? {};
|
|
53050
53060
|
const renderName = () => parts?.map(
|
|
53051
|
-
(part, i) => part.toLowerCase() === token ? /* @__PURE__ */
|
|
53061
|
+
(part, i) => part.toLowerCase() === token ? /* @__PURE__ */ import_react236.default.createElement("span", { className: "str-chat__emoji-item--highlight", key: `part-${i}` }, part) : /* @__PURE__ */ import_react236.default.createElement("span", { className: "str-chat__emoji-item--part", key: `part-${i}` }, part)
|
|
53052
53062
|
) ?? null;
|
|
53053
|
-
return /* @__PURE__ */
|
|
53063
|
+
return /* @__PURE__ */ import_react236.default.createElement("div", { className: "str-chat__emoji-item" }, /* @__PURE__ */ import_react236.default.createElement("span", { className: "str-chat__emoji-item--entity" }, entity.native), /* @__PURE__ */ import_react236.default.createElement("span", { className: "str-chat__emoji-item--name" }, renderName()));
|
|
53054
53064
|
};
|
|
53055
53065
|
|
|
53056
53066
|
// src/components/TextareaComposer/SuggestionList/SuggestionList.tsx
|
|
53057
53067
|
var import_clsx60 = __toESM(require("clsx"));
|
|
53058
|
-
var
|
|
53068
|
+
var import_react239 = __toESM(require("react"));
|
|
53059
53069
|
|
|
53060
53070
|
// src/components/TextareaComposer/SuggestionList/SuggestionListItem.tsx
|
|
53061
53071
|
var import_clsx58 = __toESM(require("clsx"));
|
|
53062
|
-
var
|
|
53063
|
-
var SuggestionListItem =
|
|
53072
|
+
var import_react237 = __toESM(require("react"));
|
|
53073
|
+
var SuggestionListItem = import_react237.default.forwardRef(function SuggestionListItem2({ className, component: Component2, focused, item, onMouseEnter }, innerRef) {
|
|
53064
53074
|
const { textComposer } = useMessageComposer();
|
|
53065
|
-
const containerRef = (0,
|
|
53066
|
-
const handleSelect = (0,
|
|
53075
|
+
const containerRef = (0, import_react237.useRef)(null);
|
|
53076
|
+
const handleSelect = (0, import_react237.useCallback)(() => {
|
|
53067
53077
|
textComposer.handleSelect(item);
|
|
53068
53078
|
}, [item, textComposer]);
|
|
53069
|
-
(0,
|
|
53079
|
+
(0, import_react237.useLayoutEffect)(() => {
|
|
53070
53080
|
if (!focused) return;
|
|
53071
53081
|
containerRef.current?.scrollIntoView({ behavior: "instant", block: "nearest" });
|
|
53072
53082
|
}, [focused, containerRef]);
|
|
53073
|
-
return /* @__PURE__ */
|
|
53083
|
+
return /* @__PURE__ */ import_react237.default.createElement(
|
|
53074
53084
|
"li",
|
|
53075
53085
|
{
|
|
53076
53086
|
className: (0, import_clsx58.default)("str-chat__suggestion-list-item", className, {
|
|
@@ -53079,7 +53089,7 @@ var SuggestionListItem = import_react236.default.forwardRef(function SuggestionL
|
|
|
53079
53089
|
onMouseEnter,
|
|
53080
53090
|
ref: containerRef
|
|
53081
53091
|
},
|
|
53082
|
-
/* @__PURE__ */
|
|
53092
|
+
/* @__PURE__ */ import_react237.default.createElement(
|
|
53083
53093
|
"button",
|
|
53084
53094
|
{
|
|
53085
53095
|
onClick: handleSelect,
|
|
@@ -53090,13 +53100,13 @@ var SuggestionListItem = import_react236.default.forwardRef(function SuggestionL
|
|
|
53090
53100
|
},
|
|
53091
53101
|
ref: innerRef
|
|
53092
53102
|
},
|
|
53093
|
-
/* @__PURE__ */
|
|
53103
|
+
/* @__PURE__ */ import_react237.default.createElement(Component2, { entity: item, focused })
|
|
53094
53104
|
)
|
|
53095
53105
|
);
|
|
53096
53106
|
});
|
|
53097
53107
|
|
|
53098
53108
|
// src/components/TextareaComposer/SuggestionList/UserItem.tsx
|
|
53099
|
-
var
|
|
53109
|
+
var import_react238 = __toESM(require("react"));
|
|
53100
53110
|
var import_clsx59 = __toESM(require("clsx"));
|
|
53101
53111
|
var UserItem = ({ Avatar: Avatar2 = Avatar, entity }) => {
|
|
53102
53112
|
const hasEntity = !!Object.keys(entity).length;
|
|
@@ -53105,7 +53115,7 @@ var UserItem = ({ Avatar: Avatar2 = Avatar, entity }) => {
|
|
|
53105
53115
|
const renderName = () => parts.map((part, i) => {
|
|
53106
53116
|
const matches = part.toLowerCase() === token;
|
|
53107
53117
|
const partWithHTMLSpacesAround = part.replace(/^\s+|\s+$/g, "\xA0");
|
|
53108
|
-
return /* @__PURE__ */
|
|
53118
|
+
return /* @__PURE__ */ import_react238.default.createElement(
|
|
53109
53119
|
"span",
|
|
53110
53120
|
{
|
|
53111
53121
|
className: (0, import_clsx59.default)({
|
|
@@ -53117,14 +53127,14 @@ var UserItem = ({ Avatar: Avatar2 = Avatar, entity }) => {
|
|
|
53117
53127
|
partWithHTMLSpacesAround
|
|
53118
53128
|
);
|
|
53119
53129
|
});
|
|
53120
|
-
return /* @__PURE__ */
|
|
53130
|
+
return /* @__PURE__ */ import_react238.default.createElement("div", { className: "str-chat__user-item" }, /* @__PURE__ */ import_react238.default.createElement(
|
|
53121
53131
|
Avatar2,
|
|
53122
53132
|
{
|
|
53123
53133
|
className: "str-chat__avatar--autocomplete-item",
|
|
53124
53134
|
image: entity.image,
|
|
53125
53135
|
name: entity.name || entity.id
|
|
53126
53136
|
}
|
|
53127
|
-
), /* @__PURE__ */
|
|
53137
|
+
), /* @__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" }, "@"));
|
|
53128
53138
|
};
|
|
53129
53139
|
|
|
53130
53140
|
// src/components/TextareaComposer/SuggestionList/SuggestionList.tsx
|
|
@@ -53135,9 +53145,9 @@ var searchSourceStateSelector = (nextValue) => ({
|
|
|
53135
53145
|
items: nextValue.items ?? []
|
|
53136
53146
|
});
|
|
53137
53147
|
var defaultComponents = {
|
|
53138
|
-
"/": (props) => /* @__PURE__ */
|
|
53139
|
-
":": (props) => /* @__PURE__ */
|
|
53140
|
-
"@": (props) => /* @__PURE__ */
|
|
53148
|
+
"/": (props) => /* @__PURE__ */ import_react239.default.createElement(CommandItem, { entity: props.entity }),
|
|
53149
|
+
":": (props) => /* @__PURE__ */ import_react239.default.createElement(EmoticonItem, { entity: props.entity }),
|
|
53150
|
+
"@": (props) => /* @__PURE__ */ import_react239.default.createElement(UserItem, { entity: props.entity })
|
|
53141
53151
|
};
|
|
53142
53152
|
var SuggestionList = ({
|
|
53143
53153
|
className,
|
|
@@ -53152,9 +53162,9 @@ var SuggestionList = ({
|
|
|
53152
53162
|
const { textComposer } = messageComposer;
|
|
53153
53163
|
const { suggestions } = useStateStore(textComposer.state, textComposerStateSelector);
|
|
53154
53164
|
const { items } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
|
|
53155
|
-
const [container, setContainer] = (0,
|
|
53165
|
+
const [container, setContainer] = (0, import_react239.useState)(null);
|
|
53156
53166
|
const component = suggestions?.trigger ? suggestionItemComponents[suggestions?.trigger] : void 0;
|
|
53157
|
-
(0,
|
|
53167
|
+
(0, import_react239.useEffect)(() => {
|
|
53158
53168
|
if (!closeOnClickOutside || !suggestions || !container) return;
|
|
53159
53169
|
const handleClick = (event) => {
|
|
53160
53170
|
if (container.contains(event.target)) return;
|
|
@@ -53166,19 +53176,19 @@ var SuggestionList = ({
|
|
|
53166
53176
|
};
|
|
53167
53177
|
}, [closeOnClickOutside, suggestions, container, textComposer]);
|
|
53168
53178
|
if (!suggestions || !items?.length || !component) return null;
|
|
53169
|
-
return /* @__PURE__ */
|
|
53179
|
+
return /* @__PURE__ */ import_react239.default.createElement(
|
|
53170
53180
|
"div",
|
|
53171
53181
|
{
|
|
53172
53182
|
className: (0, import_clsx60.default)("str-chat__suggestion-list-container", containerClassName),
|
|
53173
53183
|
ref: setContainer
|
|
53174
53184
|
},
|
|
53175
|
-
/* @__PURE__ */
|
|
53185
|
+
/* @__PURE__ */ import_react239.default.createElement(
|
|
53176
53186
|
InfiniteScrollPaginator,
|
|
53177
53187
|
{
|
|
53178
53188
|
loadNextOnScrollToBottom: suggestions.searchSource.search,
|
|
53179
53189
|
threshold: 100
|
|
53180
53190
|
},
|
|
53181
|
-
/* @__PURE__ */
|
|
53191
|
+
/* @__PURE__ */ import_react239.default.createElement(
|
|
53182
53192
|
"ul",
|
|
53183
53193
|
{
|
|
53184
53194
|
className: (0, import_clsx60.default)(
|
|
@@ -53186,7 +53196,7 @@ var SuggestionList = ({
|
|
|
53186
53196
|
className
|
|
53187
53197
|
)
|
|
53188
53198
|
},
|
|
53189
|
-
items.map((item, i) => /* @__PURE__ */
|
|
53199
|
+
items.map((item, i) => /* @__PURE__ */ import_react239.default.createElement(
|
|
53190
53200
|
AutocompleteSuggestionItem,
|
|
53191
53201
|
{
|
|
53192
53202
|
component,
|
|
@@ -53204,8 +53214,8 @@ var SuggestionList = ({
|
|
|
53204
53214
|
// src/components/TextareaComposer/TextareaComposer.tsx
|
|
53205
53215
|
var import_lodash19 = __toESM(require("lodash.debounce"));
|
|
53206
53216
|
var import_clsx61 = __toESM(require("clsx"));
|
|
53207
|
-
var
|
|
53208
|
-
var
|
|
53217
|
+
var import_react240 = require("react");
|
|
53218
|
+
var import_react241 = __toESM(require("react"));
|
|
53209
53219
|
var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
|
|
53210
53220
|
var textComposerStateSelector2 = (state) => ({
|
|
53211
53221
|
selection: state.selection,
|
|
@@ -53260,10 +53270,10 @@ var TextareaComposer = ({
|
|
|
53260
53270
|
);
|
|
53261
53271
|
const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
|
|
53262
53272
|
const { isLoadingItems } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector2) ?? {};
|
|
53263
|
-
const containerRef = (0,
|
|
53264
|
-
const [focusedItemIndex, setFocusedItemIndex] = (0,
|
|
53265
|
-
const [isComposing, setIsComposing] = (0,
|
|
53266
|
-
const changeHandler = (0,
|
|
53273
|
+
const containerRef = (0, import_react241.useRef)(null);
|
|
53274
|
+
const [focusedItemIndex, setFocusedItemIndex] = (0, import_react241.useState)(0);
|
|
53275
|
+
const [isComposing, setIsComposing] = (0, import_react241.useState)(false);
|
|
53276
|
+
const changeHandler = (0, import_react241.useCallback)(
|
|
53267
53277
|
(e) => {
|
|
53268
53278
|
if (onChange) {
|
|
53269
53279
|
onChange(e);
|
|
@@ -53280,13 +53290,13 @@ var TextareaComposer = ({
|
|
|
53280
53290
|
},
|
|
53281
53291
|
[onChange, textComposer, textareaRef]
|
|
53282
53292
|
);
|
|
53283
|
-
const onCompositionEnd = (0,
|
|
53293
|
+
const onCompositionEnd = (0, import_react241.useCallback)(() => {
|
|
53284
53294
|
setIsComposing(false);
|
|
53285
53295
|
}, []);
|
|
53286
|
-
const onCompositionStart = (0,
|
|
53296
|
+
const onCompositionStart = (0, import_react241.useCallback)(() => {
|
|
53287
53297
|
setIsComposing(true);
|
|
53288
53298
|
}, []);
|
|
53289
|
-
const keyDownHandler = (0,
|
|
53299
|
+
const keyDownHandler = (0, import_react241.useCallback)(
|
|
53290
53300
|
(event) => {
|
|
53291
53301
|
if (onKeyDown) {
|
|
53292
53302
|
onKeyDown(event);
|
|
@@ -53338,7 +53348,7 @@ var TextareaComposer = ({
|
|
|
53338
53348
|
textareaRef
|
|
53339
53349
|
]
|
|
53340
53350
|
);
|
|
53341
|
-
const scrollHandler = (0,
|
|
53351
|
+
const scrollHandler = (0, import_react241.useCallback)(
|
|
53342
53352
|
(event) => {
|
|
53343
53353
|
if (onScroll) {
|
|
53344
53354
|
onScroll(event);
|
|
@@ -53348,7 +53358,7 @@ var TextareaComposer = ({
|
|
|
53348
53358
|
},
|
|
53349
53359
|
[onScroll, textComposer]
|
|
53350
53360
|
);
|
|
53351
|
-
const setSelectionDebounced = (0,
|
|
53361
|
+
const setSelectionDebounced = (0, import_react240.useMemo)(
|
|
53352
53362
|
() => (0, import_lodash19.default)(
|
|
53353
53363
|
(e) => {
|
|
53354
53364
|
onSelect?.(e);
|
|
@@ -53362,18 +53372,18 @@ var TextareaComposer = ({
|
|
|
53362
53372
|
),
|
|
53363
53373
|
[onSelect, textComposer]
|
|
53364
53374
|
);
|
|
53365
|
-
(0,
|
|
53375
|
+
(0, import_react241.useEffect)(() => {
|
|
53366
53376
|
if (textareaRef.current && !isComposing) {
|
|
53367
53377
|
textareaRef.current.selectionStart = selection.start;
|
|
53368
53378
|
textareaRef.current.selectionEnd = selection.end;
|
|
53369
53379
|
}
|
|
53370
53380
|
}, [text7, textareaRef, selection.start, selection.end, isComposing]);
|
|
53371
|
-
(0,
|
|
53381
|
+
(0, import_react241.useEffect)(() => {
|
|
53372
53382
|
if (textComposer.suggestions) {
|
|
53373
53383
|
setFocusedItemIndex(0);
|
|
53374
53384
|
}
|
|
53375
53385
|
}, [textComposer.suggestions]);
|
|
53376
|
-
return /* @__PURE__ */
|
|
53386
|
+
return /* @__PURE__ */ import_react241.default.createElement(
|
|
53377
53387
|
"div",
|
|
53378
53388
|
{
|
|
53379
53389
|
className: (0, import_clsx61.default)(
|
|
@@ -53386,7 +53396,7 @@ var TextareaComposer = ({
|
|
|
53386
53396
|
),
|
|
53387
53397
|
ref: containerRef
|
|
53388
53398
|
},
|
|
53389
|
-
/* @__PURE__ */
|
|
53399
|
+
/* @__PURE__ */ import_react241.default.createElement(
|
|
53390
53400
|
import_react_textarea_autosize.default,
|
|
53391
53401
|
{
|
|
53392
53402
|
...{ ...additionalTextareaProps, ...restTextareaProps },
|
|
@@ -53415,7 +53425,7 @@ var TextareaComposer = ({
|
|
|
53415
53425
|
value: text7
|
|
53416
53426
|
}
|
|
53417
53427
|
),
|
|
53418
|
-
!isComposing && /* @__PURE__ */
|
|
53428
|
+
!isComposing && /* @__PURE__ */ import_react241.default.createElement(
|
|
53419
53429
|
AutocompleteSuggestionList,
|
|
53420
53430
|
{
|
|
53421
53431
|
className: listClassName,
|
|
@@ -53428,10 +53438,10 @@ var TextareaComposer = ({
|
|
|
53428
53438
|
};
|
|
53429
53439
|
|
|
53430
53440
|
// src/components/AIStateIndicator/AIStateIndicator.tsx
|
|
53431
|
-
var
|
|
53441
|
+
var import_react243 = __toESM(require("react"));
|
|
53432
53442
|
|
|
53433
53443
|
// src/components/AIStateIndicator/hooks/useAIState.ts
|
|
53434
|
-
var
|
|
53444
|
+
var import_react242 = require("react");
|
|
53435
53445
|
var AIStates = {
|
|
53436
53446
|
Error: "AI_STATE_ERROR",
|
|
53437
53447
|
ExternalSources: "AI_STATE_EXTERNAL_SOURCES",
|
|
@@ -53440,8 +53450,8 @@ var AIStates = {
|
|
|
53440
53450
|
Thinking: "AI_STATE_THINKING"
|
|
53441
53451
|
};
|
|
53442
53452
|
var useAIState = (channel) => {
|
|
53443
|
-
const [aiState, setAiState] = (0,
|
|
53444
|
-
(0,
|
|
53453
|
+
const [aiState, setAiState] = (0, import_react242.useState)(AIStates.Idle);
|
|
53454
|
+
(0, import_react242.useEffect)(() => {
|
|
53445
53455
|
if (!channel) {
|
|
53446
53456
|
return;
|
|
53447
53457
|
}
|
|
@@ -53478,21 +53488,21 @@ var AIStateIndicator = ({
|
|
|
53478
53488
|
[AIStates.Thinking]: t("Thinking..."),
|
|
53479
53489
|
[AIStates.Generating]: t("Generating...")
|
|
53480
53490
|
};
|
|
53481
|
-
return aiState in allowedStates ? /* @__PURE__ */
|
|
53491
|
+
return aiState in allowedStates ? /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__ai-state-indicator-container" }, /* @__PURE__ */ import_react243.default.createElement("p", { className: "str-chat__ai-state-indicator-text" }, allowedStates[aiState])) : null;
|
|
53482
53492
|
};
|
|
53483
53493
|
|
|
53484
53494
|
// src/components/MessageInput/WithDragAndDropUpload.tsx
|
|
53485
|
-
var
|
|
53495
|
+
var import_react244 = __toESM(require("react"));
|
|
53486
53496
|
var import_react_dropzone = require("react-dropzone");
|
|
53487
53497
|
var import_clsx62 = __toESM(require("clsx"));
|
|
53488
|
-
var DragAndDropUploadContext =
|
|
53498
|
+
var DragAndDropUploadContext = import_react244.default.createContext({
|
|
53489
53499
|
subscribeToDrop: null
|
|
53490
53500
|
});
|
|
53491
|
-
var useDragAndDropUploadContext = () => (0,
|
|
53501
|
+
var useDragAndDropUploadContext = () => (0, import_react244.useContext)(DragAndDropUploadContext);
|
|
53492
53502
|
var useRegisterDropHandlers = () => {
|
|
53493
53503
|
const { subscribeToDrop } = useDragAndDropUploadContext();
|
|
53494
53504
|
const messageComposer = useMessageComposer();
|
|
53495
|
-
(0,
|
|
53505
|
+
(0, import_react244.useEffect)(() => {
|
|
53496
53506
|
const unsubscribe = subscribeToDrop?.(messageComposer.attachmentManager.uploadFiles);
|
|
53497
53507
|
return unsubscribe;
|
|
53498
53508
|
}, [subscribeToDrop, messageComposer]);
|
|
@@ -53507,7 +53517,7 @@ var WithDragAndDropUpload = ({
|
|
|
53507
53517
|
component: Component2 = "div",
|
|
53508
53518
|
style
|
|
53509
53519
|
}) => {
|
|
53510
|
-
const dropHandlersRef = (0,
|
|
53520
|
+
const dropHandlersRef = (0, import_react244.useRef)(/* @__PURE__ */ new Set());
|
|
53511
53521
|
const { t } = useTranslationContext();
|
|
53512
53522
|
const messageInputContext = useMessageInputContext();
|
|
53513
53523
|
const dragAndDropUploadContext = useDragAndDropUploadContext();
|
|
@@ -53518,20 +53528,20 @@ var WithDragAndDropUpload = ({
|
|
|
53518
53528
|
attachmentManagerConfigStateSelector
|
|
53519
53529
|
);
|
|
53520
53530
|
const isWithinMessageInputContext = Object.keys(messageInputContext).length > 0;
|
|
53521
|
-
const accept = (0,
|
|
53531
|
+
const accept = (0, import_react244.useMemo)(
|
|
53522
53532
|
() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
|
|
53523
53533
|
mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
|
|
53524
53534
|
return mediaTypeMap;
|
|
53525
53535
|
}, {}),
|
|
53526
53536
|
[acceptedFiles]
|
|
53527
53537
|
);
|
|
53528
|
-
const subscribeToDrop = (0,
|
|
53538
|
+
const subscribeToDrop = (0, import_react244.useCallback)((fn) => {
|
|
53529
53539
|
dropHandlersRef.current.add(fn);
|
|
53530
53540
|
return () => {
|
|
53531
53541
|
dropHandlersRef.current.delete(fn);
|
|
53532
53542
|
};
|
|
53533
53543
|
}, []);
|
|
53534
|
-
const handleDrop = (0,
|
|
53544
|
+
const handleDrop = (0, import_react244.useCallback)((files) => {
|
|
53535
53545
|
dropHandlersRef.current.forEach((fn) => fn(files));
|
|
53536
53546
|
}, []);
|
|
53537
53547
|
const { getRootProps, isDragActive, isDragReject } = (0, import_react_dropzone.useDropzone)({
|
|
@@ -53544,24 +53554,24 @@ var WithDragAndDropUpload = ({
|
|
|
53544
53554
|
onDrop: isWithinMessageInputContext ? messageComposer.attachmentManager.uploadFiles : handleDrop
|
|
53545
53555
|
});
|
|
53546
53556
|
if (dragAndDropUploadContext.subscribeToDrop !== null) {
|
|
53547
|
-
return /* @__PURE__ */
|
|
53557
|
+
return /* @__PURE__ */ import_react244.default.createElement(Component2, { className }, children);
|
|
53548
53558
|
}
|
|
53549
|
-
return /* @__PURE__ */
|
|
53559
|
+
return /* @__PURE__ */ import_react244.default.createElement(
|
|
53550
53560
|
DragAndDropUploadContext.Provider,
|
|
53551
53561
|
{
|
|
53552
53562
|
value: {
|
|
53553
53563
|
subscribeToDrop
|
|
53554
53564
|
}
|
|
53555
53565
|
},
|
|
53556
|
-
/* @__PURE__ */
|
|
53566
|
+
/* @__PURE__ */ import_react244.default.createElement(Component2, { ...getRootProps({ className, style }) }, isDragActive && /* @__PURE__ */ import_react244.default.createElement(
|
|
53557
53567
|
"div",
|
|
53558
53568
|
{
|
|
53559
53569
|
className: (0, import_clsx62.default)("str-chat__dropzone-container", {
|
|
53560
53570
|
"str-chat__dropzone-container--not-accepted": isDragReject
|
|
53561
53571
|
})
|
|
53562
53572
|
},
|
|
53563
|
-
!isDragReject && /* @__PURE__ */
|
|
53564
|
-
isDragReject && /* @__PURE__ */
|
|
53573
|
+
!isDragReject && /* @__PURE__ */ import_react244.default.createElement("p", null, t("Drag your files here")),
|
|
53574
|
+
isDragReject && /* @__PURE__ */ import_react244.default.createElement("p", null, t("Some of the files will not be accepted"))
|
|
53565
53575
|
), children)
|
|
53566
53576
|
);
|
|
53567
53577
|
};
|
|
@@ -53593,33 +53603,33 @@ var MessageInputFlat = () => {
|
|
|
53593
53603
|
} = useComponentContext();
|
|
53594
53604
|
const { channel } = useChatContext("MessageInputFlat");
|
|
53595
53605
|
const { aiState } = useAIState(channel);
|
|
53596
|
-
const stopGenerating = (0,
|
|
53606
|
+
const stopGenerating = (0, import_react245.useCallback)(() => channel?.stopAIResponse(), [channel]);
|
|
53597
53607
|
const [
|
|
53598
53608
|
showRecordingPermissionDeniedNotification,
|
|
53599
53609
|
setShowRecordingPermissionDeniedNotification
|
|
53600
|
-
] = (0,
|
|
53601
|
-
const closePermissionDeniedNotification = (0,
|
|
53610
|
+
] = (0, import_react245.useState)(false);
|
|
53611
|
+
const closePermissionDeniedNotification = (0, import_react245.useCallback)(() => {
|
|
53602
53612
|
setShowRecordingPermissionDeniedNotification(false);
|
|
53603
53613
|
}, []);
|
|
53604
53614
|
const { attachments } = useAttachmentManagerState();
|
|
53605
|
-
if (recordingController.recordingState) return /* @__PURE__ */
|
|
53615
|
+
if (recordingController.recordingState) return /* @__PURE__ */ import_react245.default.createElement(AudioRecorder2, null);
|
|
53606
53616
|
const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices);
|
|
53607
53617
|
const isRecording = !!recordingController.recordingState;
|
|
53608
53618
|
const StopAIGenerationButton2 = StopAIGenerationButtonOverride === void 0 ? StopAIGenerationButton : StopAIGenerationButtonOverride;
|
|
53609
53619
|
const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopAIGenerationButton2;
|
|
53610
|
-
return /* @__PURE__ */
|
|
53620
|
+
return /* @__PURE__ */ import_react245.default.createElement(WithDragAndDropUpload, { className: "str-chat__message-input", component: "div" }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react245.default.createElement(
|
|
53611
53621
|
RecordingPermissionDeniedNotification2,
|
|
53612
53622
|
{
|
|
53613
53623
|
onClose: closePermissionDeniedNotification,
|
|
53614
53624
|
permissionName: "microphone" /* MIC */
|
|
53615
53625
|
}
|
|
53616
|
-
), /* @__PURE__ */
|
|
53626
|
+
), /* @__PURE__ */ import_react245.default.createElement(LinkPreviewList2, null), /* @__PURE__ */ import_react245.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react245.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message-textarea-container" }, /* @__PURE__ */ import_react245.default.createElement(QuotedMessagePreview2, null), /* @__PURE__ */ import_react245.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react245.default.createElement(TextareaComposer2, null), EmojiPicker && /* @__PURE__ */ import_react245.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react245.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react245.default.createElement(import_react245.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react245.default.createElement(
|
|
53617
53627
|
CooldownTimer2,
|
|
53618
53628
|
{
|
|
53619
53629
|
cooldownInterval: cooldownRemaining,
|
|
53620
53630
|
setCooldownRemaining
|
|
53621
53631
|
}
|
|
53622
|
-
) : /* @__PURE__ */
|
|
53632
|
+
) : /* @__PURE__ */ import_react245.default.createElement(import_react245.default.Fragment, null, /* @__PURE__ */ import_react245.default.createElement(SendButton2, { sendMessage: handleSubmit }), recordingEnabled && /* @__PURE__ */ import_react245.default.createElement(
|
|
53623
53633
|
StartRecordingAudioButton2,
|
|
53624
53634
|
{
|
|
53625
53635
|
disabled: isRecording || !asyncMessagesMultiSendEnabled && attachments.some(
|
|
@@ -53634,7 +53644,7 @@ var MessageInputFlat = () => {
|
|
|
53634
53644
|
};
|
|
53635
53645
|
|
|
53636
53646
|
// src/components/MessageInput/hooks/useCreateMessageInputContext.ts
|
|
53637
|
-
var
|
|
53647
|
+
var import_react246 = require("react");
|
|
53638
53648
|
var useCreateMessageInputContext = (value) => {
|
|
53639
53649
|
const {
|
|
53640
53650
|
additionalTextareaProps,
|
|
@@ -53658,7 +53668,7 @@ var useCreateMessageInputContext = (value) => {
|
|
|
53658
53668
|
textareaRef
|
|
53659
53669
|
} = value;
|
|
53660
53670
|
const parentId = parent?.id;
|
|
53661
|
-
const messageInputContext = (0,
|
|
53671
|
+
const messageInputContext = (0, import_react246.useMemo)(
|
|
53662
53672
|
() => ({
|
|
53663
53673
|
additionalTextareaProps,
|
|
53664
53674
|
asyncMessagesMultiSendEnabled,
|
|
@@ -53710,13 +53720,13 @@ var MessageInputProvider = (props) => {
|
|
|
53710
53720
|
emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex
|
|
53711
53721
|
});
|
|
53712
53722
|
const messageComposer = useMessageComposer();
|
|
53713
|
-
(0,
|
|
53723
|
+
(0, import_react247.useEffect)(
|
|
53714
53724
|
() => () => {
|
|
53715
53725
|
messageComposer.createDraft();
|
|
53716
53726
|
},
|
|
53717
53727
|
[messageComposer]
|
|
53718
53728
|
);
|
|
53719
|
-
(0,
|
|
53729
|
+
(0, import_react247.useEffect)(() => {
|
|
53720
53730
|
const threadId = messageComposer.threadId;
|
|
53721
53731
|
if (!threadId || !messageComposer.channel || !messageComposer.compositionIsEmpty)
|
|
53722
53732
|
return;
|
|
@@ -53727,16 +53737,17 @@ var MessageInputProvider = (props) => {
|
|
|
53727
53737
|
});
|
|
53728
53738
|
}, [messageComposer]);
|
|
53729
53739
|
useRegisterDropHandlers();
|
|
53730
|
-
return /* @__PURE__ */
|
|
53740
|
+
return /* @__PURE__ */ import_react247.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
|
|
53731
53741
|
};
|
|
53732
53742
|
var UnMemoizedMessageInput = (props) => {
|
|
53733
53743
|
const { Input: PropInput } = props;
|
|
53734
53744
|
const { Input: ContextInput } = useComponentContext("MessageInput");
|
|
53745
|
+
const id = useStableId();
|
|
53735
53746
|
const Input = PropInput || ContextInput || MessageInputFlat;
|
|
53736
|
-
const dialogManagerId = props.isThreadInput ?
|
|
53737
|
-
return /* @__PURE__ */
|
|
53747
|
+
const dialogManagerId = props.isThreadInput ? `message-input-dialog-manager-thread-${id}` : `message-input-dialog-manager-${id}`;
|
|
53748
|
+
return /* @__PURE__ */ import_react247.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react247.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react247.default.createElement(Input, null)));
|
|
53738
53749
|
};
|
|
53739
|
-
var MessageInput =
|
|
53750
|
+
var MessageInput = import_react247.default.memo(
|
|
53740
53751
|
UnMemoizedMessageInput
|
|
53741
53752
|
);
|
|
53742
53753
|
|
|
@@ -53744,7 +53755,7 @@ var MessageInput = import_react246.default.memo(
|
|
|
53744
53755
|
var EditMessageFormSendButton = () => {
|
|
53745
53756
|
const { t } = useTranslationContext();
|
|
53746
53757
|
const hasSendableData = useMessageComposerHasSendableData();
|
|
53747
|
-
return /* @__PURE__ */
|
|
53758
|
+
return /* @__PURE__ */ import_react248.default.createElement(
|
|
53748
53759
|
"button",
|
|
53749
53760
|
{
|
|
53750
53761
|
className: "str-chat__edit-message-send",
|
|
@@ -53759,26 +53770,26 @@ var EditMessageForm = () => {
|
|
|
53759
53770
|
const { t } = useTranslationContext("EditMessageForm");
|
|
53760
53771
|
const messageComposer = useMessageComposer();
|
|
53761
53772
|
const { clearEditingState, handleSubmit } = useMessageInputContext("EditMessageForm");
|
|
53762
|
-
const cancel = (0,
|
|
53773
|
+
const cancel = (0, import_react248.useCallback)(() => {
|
|
53763
53774
|
clearEditingState?.();
|
|
53764
53775
|
messageComposer.restore();
|
|
53765
53776
|
}, [clearEditingState, messageComposer]);
|
|
53766
|
-
(0,
|
|
53777
|
+
(0, import_react248.useEffect)(() => {
|
|
53767
53778
|
const onKeyDown = (event) => {
|
|
53768
53779
|
if (event.key === "Escape") cancel();
|
|
53769
53780
|
};
|
|
53770
53781
|
document.addEventListener("keydown", onKeyDown);
|
|
53771
53782
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
53772
53783
|
}, [cancel]);
|
|
53773
|
-
return /* @__PURE__ */
|
|
53784
|
+
return /* @__PURE__ */ import_react248.default.createElement(
|
|
53774
53785
|
"form",
|
|
53775
53786
|
{
|
|
53776
53787
|
autoComplete: "off",
|
|
53777
53788
|
className: "str-chat__edit-message-form",
|
|
53778
53789
|
onSubmit: handleSubmit
|
|
53779
53790
|
},
|
|
53780
|
-
/* @__PURE__ */
|
|
53781
|
-
/* @__PURE__ */
|
|
53791
|
+
/* @__PURE__ */ import_react248.default.createElement(MessageInputFlat, null),
|
|
53792
|
+
/* @__PURE__ */ import_react248.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react248.default.createElement(
|
|
53782
53793
|
"button",
|
|
53783
53794
|
{
|
|
53784
53795
|
className: "str-chat__edit-message-cancel",
|
|
@@ -53786,7 +53797,7 @@ var EditMessageForm = () => {
|
|
|
53786
53797
|
onClick: cancel
|
|
53787
53798
|
},
|
|
53788
53799
|
t("Cancel")
|
|
53789
|
-
), /* @__PURE__ */
|
|
53800
|
+
), /* @__PURE__ */ import_react248.default.createElement(EditMessageFormSendButton, null))
|
|
53790
53801
|
);
|
|
53791
53802
|
};
|
|
53792
53803
|
var EditMessageModal = ({
|
|
@@ -53795,18 +53806,18 @@ var EditMessageModal = ({
|
|
|
53795
53806
|
const { EditMessageInput = EditMessageForm } = useComponentContext();
|
|
53796
53807
|
const { clearEditingState } = useMessageContext();
|
|
53797
53808
|
const messageComposer = useMessageComposer();
|
|
53798
|
-
const onEditModalClose = (0,
|
|
53809
|
+
const onEditModalClose = (0, import_react248.useCallback)(() => {
|
|
53799
53810
|
clearEditingState();
|
|
53800
53811
|
messageComposer.restore();
|
|
53801
53812
|
}, [clearEditingState, messageComposer]);
|
|
53802
|
-
return /* @__PURE__ */
|
|
53813
|
+
return /* @__PURE__ */ import_react248.default.createElement(
|
|
53803
53814
|
Modal,
|
|
53804
53815
|
{
|
|
53805
53816
|
className: "str-chat__edit-message-modal",
|
|
53806
53817
|
onClose: onEditModalClose,
|
|
53807
53818
|
open: true
|
|
53808
53819
|
},
|
|
53809
|
-
/* @__PURE__ */
|
|
53820
|
+
/* @__PURE__ */ import_react248.default.createElement(
|
|
53810
53821
|
MessageInput,
|
|
53811
53822
|
{
|
|
53812
53823
|
clearEditingState,
|
|
@@ -53823,12 +53834,12 @@ var attachmentManagerConfigStateSelector2 = (state) => ({
|
|
|
53823
53834
|
acceptedFiles: state.attachments.acceptedFiles,
|
|
53824
53835
|
maxNumberOfFilesPerMessage: state.attachments.maxNumberOfFilesPerMessage
|
|
53825
53836
|
});
|
|
53826
|
-
var UploadButton = (0,
|
|
53837
|
+
var UploadButton = (0, import_react249.forwardRef)(function UploadButton2({ onFileChange, resetOnChange = true, ...rest }, ref) {
|
|
53827
53838
|
const handleInputChange = useHandleFileChangeWrapper(resetOnChange, onFileChange);
|
|
53828
|
-
return /* @__PURE__ */
|
|
53839
|
+
return /* @__PURE__ */ import_react249.default.createElement("input", { onChange: handleInputChange, ref, type: "file", ...rest });
|
|
53829
53840
|
});
|
|
53830
53841
|
var FileInput = UploadButton;
|
|
53831
|
-
var UploadFileInput = (0,
|
|
53842
|
+
var UploadFileInput = (0, import_react249.forwardRef)(function UploadFileInput2({
|
|
53832
53843
|
className,
|
|
53833
53844
|
onFileChange: onFileChangeCustom,
|
|
53834
53845
|
...props
|
|
@@ -53842,15 +53853,15 @@ var UploadFileInput = (0, import_react248.forwardRef)(function UploadFileInput2(
|
|
|
53842
53853
|
messageComposer.configState,
|
|
53843
53854
|
attachmentManagerConfigStateSelector2
|
|
53844
53855
|
);
|
|
53845
|
-
const id = (0,
|
|
53846
|
-
const onFileChange = (0,
|
|
53856
|
+
const id = (0, import_react249.useMemo)(() => (0, import_nanoid6.nanoid)(), []);
|
|
53857
|
+
const onFileChange = (0, import_react249.useCallback)(
|
|
53847
53858
|
(files) => {
|
|
53848
53859
|
attachmentManager.uploadFiles(files);
|
|
53849
53860
|
onFileChangeCustom?.(files);
|
|
53850
53861
|
},
|
|
53851
53862
|
[onFileChangeCustom, attachmentManager]
|
|
53852
53863
|
);
|
|
53853
|
-
return /* @__PURE__ */
|
|
53864
|
+
return /* @__PURE__ */ import_react249.default.createElement(
|
|
53854
53865
|
FileInput,
|
|
53855
53866
|
{
|
|
53856
53867
|
accept: acceptedFiles?.join(","),
|
|
@@ -53897,7 +53908,7 @@ var VoiceRecordingPlayer = ({
|
|
|
53897
53908
|
});
|
|
53898
53909
|
if (!asset_url) return null;
|
|
53899
53910
|
const displayedDuration = secondsElapsed || duration;
|
|
53900
|
-
return /* @__PURE__ */
|
|
53911
|
+
return /* @__PURE__ */ import_react250.default.createElement("div", { className: rootClassName, "data-testid": "voice-recording-widget" }, /* @__PURE__ */ import_react250.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react250.default.createElement("source", { "data-testid": "audio-source", src: asset_url, type: mime_type })), /* @__PURE__ */ import_react250.default.createElement(PlayButton, { isPlaying, onClick: togglePlay }), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata" }, /* @__PURE__ */ import_react250.default.createElement(
|
|
53901
53912
|
"div",
|
|
53902
53913
|
{
|
|
53903
53914
|
className: "str-chat__message-attachment__voice-recording-widget__title",
|
|
@@ -53905,25 +53916,25 @@ var VoiceRecordingPlayer = ({
|
|
|
53905
53916
|
title
|
|
53906
53917
|
},
|
|
53907
53918
|
title
|
|
53908
|
-
), /* @__PURE__ */
|
|
53919
|
+
), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state" }, /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__timer" }, attachment.duration ? displayDuration(displayedDuration) : /* @__PURE__ */ import_react250.default.createElement(
|
|
53909
53920
|
FileSizeIndicator,
|
|
53910
53921
|
{
|
|
53911
53922
|
fileSize: attachment.file_size,
|
|
53912
53923
|
maximumFractionDigits: 0
|
|
53913
53924
|
}
|
|
53914
|
-
)), /* @__PURE__ */
|
|
53925
|
+
)), /* @__PURE__ */ import_react250.default.createElement(
|
|
53915
53926
|
WaveProgressBar,
|
|
53916
53927
|
{
|
|
53917
53928
|
progress,
|
|
53918
53929
|
seek,
|
|
53919
53930
|
waveformData: waveform_data || []
|
|
53920
53931
|
}
|
|
53921
|
-
))), /* @__PURE__ */
|
|
53932
|
+
))), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__right-section" }, isPlaying ? /* @__PURE__ */ import_react250.default.createElement(PlaybackRateButton, { disabled: !audioRef.current, onClick: increasePlaybackRate }, playbackRate.toFixed(1), "x") : /* @__PURE__ */ import_react250.default.createElement(FileIcon, { big: true, mimeType: mime_type, size: 40 })));
|
|
53922
53933
|
};
|
|
53923
53934
|
var QuotedVoiceRecording = ({ attachment }) => {
|
|
53924
53935
|
const { t } = useTranslationContext();
|
|
53925
53936
|
const title = attachment.title || t("Voice message");
|
|
53926
|
-
return /* @__PURE__ */
|
|
53937
|
+
return /* @__PURE__ */ import_react250.default.createElement("div", { className: rootClassName, "data-testid": "quoted-voice-recording-widget" }, /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata" }, title && /* @__PURE__ */ import_react250.default.createElement(
|
|
53927
53938
|
"div",
|
|
53928
53939
|
{
|
|
53929
53940
|
className: "str-chat__message-attachment__voice-recording-widget__title",
|
|
@@ -53931,18 +53942,18 @@ var QuotedVoiceRecording = ({ attachment }) => {
|
|
|
53931
53942
|
title
|
|
53932
53943
|
},
|
|
53933
53944
|
title
|
|
53934
|
-
), /* @__PURE__ */
|
|
53945
|
+
), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state" }, /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__timer" }, attachment.duration ? displayDuration(attachment.duration) : /* @__PURE__ */ import_react250.default.createElement(
|
|
53935
53946
|
FileSizeIndicator,
|
|
53936
53947
|
{
|
|
53937
53948
|
fileSize: attachment.file_size,
|
|
53938
53949
|
maximumFractionDigits: 0
|
|
53939
53950
|
}
|
|
53940
|
-
)))), /* @__PURE__ */
|
|
53951
|
+
)))), /* @__PURE__ */ import_react250.default.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 34 }));
|
|
53941
53952
|
};
|
|
53942
|
-
var VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? /* @__PURE__ */
|
|
53953
|
+
var VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? /* @__PURE__ */ import_react250.default.createElement(QuotedVoiceRecording, { attachment }) : /* @__PURE__ */ import_react250.default.createElement(VoiceRecordingPlayer, { attachment });
|
|
53943
53954
|
|
|
53944
53955
|
// src/components/Attachment/Card.tsx
|
|
53945
|
-
var
|
|
53956
|
+
var import_react251 = __toESM(require("react"));
|
|
53946
53957
|
var import_clsx64 = __toESM(require("clsx"));
|
|
53947
53958
|
var import_react_player = __toESM(require("react-player"));
|
|
53948
53959
|
var getHostFromURL = (url) => {
|
|
@@ -53954,26 +53965,26 @@ var getHostFromURL = (url) => {
|
|
|
53954
53965
|
};
|
|
53955
53966
|
var UnableToRenderCard = ({ type }) => {
|
|
53956
53967
|
const { t } = useTranslationContext("Card");
|
|
53957
|
-
return /* @__PURE__ */
|
|
53968
|
+
return /* @__PURE__ */ import_react251.default.createElement(
|
|
53958
53969
|
"div",
|
|
53959
53970
|
{
|
|
53960
53971
|
className: (0, import_clsx64.default)("str-chat__message-attachment-card", {
|
|
53961
53972
|
[`str-chat__message-attachment-card--${type}`]: type
|
|
53962
53973
|
})
|
|
53963
53974
|
},
|
|
53964
|
-
/* @__PURE__ */
|
|
53975
|
+
/* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card--content" }, /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card--text" }, t("this content could not be displayed")))
|
|
53965
53976
|
);
|
|
53966
53977
|
};
|
|
53967
53978
|
var SourceLink = ({
|
|
53968
53979
|
author_name,
|
|
53969
53980
|
url
|
|
53970
|
-
}) => /* @__PURE__ */
|
|
53981
|
+
}) => /* @__PURE__ */ import_react251.default.createElement(
|
|
53971
53982
|
"div",
|
|
53972
53983
|
{
|
|
53973
53984
|
className: "str-chat__message-attachment-card--source-link",
|
|
53974
53985
|
"data-testid": "card-source-link"
|
|
53975
53986
|
},
|
|
53976
|
-
/* @__PURE__ */
|
|
53987
|
+
/* @__PURE__ */ import_react251.default.createElement(
|
|
53977
53988
|
SafeAnchor,
|
|
53978
53989
|
{
|
|
53979
53990
|
className: "str-chat__message-attachment-card--url",
|
|
@@ -53988,7 +53999,7 @@ var CardHeader = (props) => {
|
|
|
53988
53999
|
const { asset_url, dimensions, image: image3, image_url, thumb_url, title, type } = props;
|
|
53989
54000
|
let visual = null;
|
|
53990
54001
|
if (asset_url && type === "video") {
|
|
53991
|
-
visual = /* @__PURE__ */
|
|
54002
|
+
visual = /* @__PURE__ */ import_react251.default.createElement(
|
|
53992
54003
|
import_react_player.default,
|
|
53993
54004
|
{
|
|
53994
54005
|
className: "react-player",
|
|
@@ -53999,7 +54010,7 @@ var CardHeader = (props) => {
|
|
|
53999
54010
|
}
|
|
54000
54011
|
);
|
|
54001
54012
|
} else if (image3) {
|
|
54002
|
-
visual = /* @__PURE__ */
|
|
54013
|
+
visual = /* @__PURE__ */ import_react251.default.createElement(
|
|
54003
54014
|
ImageComponent,
|
|
54004
54015
|
{
|
|
54005
54016
|
dimensions,
|
|
@@ -54009,7 +54020,7 @@ var CardHeader = (props) => {
|
|
|
54009
54020
|
}
|
|
54010
54021
|
);
|
|
54011
54022
|
}
|
|
54012
|
-
return visual ? /* @__PURE__ */
|
|
54023
|
+
return visual ? /* @__PURE__ */ import_react251.default.createElement(
|
|
54013
54024
|
"div",
|
|
54014
54025
|
{
|
|
54015
54026
|
className: "str-chat__message-attachment-card--header str-chat__message-attachment-card-react--header",
|
|
@@ -54021,7 +54032,7 @@ var CardHeader = (props) => {
|
|
|
54021
54032
|
var CardContent = (props) => {
|
|
54022
54033
|
const { author_name, og_scrape_url, text: text7, title, title_link, type } = props;
|
|
54023
54034
|
const url = title_link || og_scrape_url;
|
|
54024
|
-
return /* @__PURE__ */
|
|
54035
|
+
return /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card--content" }, type === "audio" ? /* @__PURE__ */ import_react251.default.createElement(CardAudio, { og: props }) : /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card--flex" }, url && /* @__PURE__ */ import_react251.default.createElement(SourceLink, { author_name, url }), title && /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card--title" }, title), text7 && /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card--text" }, text7)));
|
|
54025
54036
|
};
|
|
54026
54037
|
var CardAudio = ({
|
|
54027
54038
|
og: { asset_url, author_name, mime_type, og_scrape_url, text: text7, title, title_link }
|
|
@@ -54032,7 +54043,7 @@ var CardAudio = ({
|
|
|
54032
54043
|
const url = title_link || og_scrape_url;
|
|
54033
54044
|
const dataTestId = "card-audio-widget";
|
|
54034
54045
|
const rootClassName2 = "str-chat__message-attachment-card-audio-widget";
|
|
54035
|
-
return /* @__PURE__ */
|
|
54046
|
+
return /* @__PURE__ */ import_react251.default.createElement("div", { className: rootClassName2, "data-testid": dataTestId }, asset_url && /* @__PURE__ */ import_react251.default.createElement(import_react251.default.Fragment, null, /* @__PURE__ */ import_react251.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react251.default.createElement("source", { "data-testid": "audio-source", src: asset_url, type: "audio/mp3" })), /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card-audio-widget--first-row" }, /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--play-controls" }, /* @__PURE__ */ import_react251.default.createElement(PlayButton, { isPlaying, onClick: togglePlay })), /* @__PURE__ */ import_react251.default.createElement(ProgressBar, { onClick: seek, progress }))), /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--second-row" }, url && /* @__PURE__ */ import_react251.default.createElement(SourceLink, { author_name, url }), title && /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--title" }, title), text7 && /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--description" }, text7)));
|
|
54036
54047
|
};
|
|
54037
54048
|
var UnMemoizedCard = (props) => {
|
|
54038
54049
|
const { asset_url, giphy, image_url, thumb_url, title, title_link, type } = props;
|
|
@@ -54046,45 +54057,45 @@ var UnMemoizedCard = (props) => {
|
|
|
54046
54057
|
dimensions.width = giphyVersion.width;
|
|
54047
54058
|
}
|
|
54048
54059
|
if (!title && !title_link && !asset_url && !image3) {
|
|
54049
|
-
return /* @__PURE__ */
|
|
54060
|
+
return /* @__PURE__ */ import_react251.default.createElement(UnableToRenderCard, null);
|
|
54050
54061
|
}
|
|
54051
|
-
return /* @__PURE__ */
|
|
54062
|
+
return /* @__PURE__ */ import_react251.default.createElement(
|
|
54052
54063
|
"div",
|
|
54053
54064
|
{
|
|
54054
54065
|
className: `str-chat__message-attachment-card str-chat__message-attachment-card--${type}`
|
|
54055
54066
|
},
|
|
54056
|
-
/* @__PURE__ */
|
|
54057
|
-
/* @__PURE__ */
|
|
54067
|
+
/* @__PURE__ */ import_react251.default.createElement(CardHeader, { ...props, dimensions, image: image3 }),
|
|
54068
|
+
/* @__PURE__ */ import_react251.default.createElement(CardContent, { ...props })
|
|
54058
54069
|
);
|
|
54059
54070
|
};
|
|
54060
|
-
var Card =
|
|
54071
|
+
var Card = import_react251.default.memo(UnMemoizedCard);
|
|
54061
54072
|
|
|
54062
54073
|
// src/components/Attachment/FileAttachment.tsx
|
|
54063
|
-
var
|
|
54064
|
-
var UnMemoizedFileAttachment = ({ attachment }) => /* @__PURE__ */
|
|
54074
|
+
var import_react252 = __toESM(require("react"));
|
|
54075
|
+
var UnMemoizedFileAttachment = ({ attachment }) => /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__message-attachment-file--item", "data-testid": "attachment-file" }, /* @__PURE__ */ import_react252.default.createElement(FileIcon, { className: "str-chat__file-icon", mimeType: attachment.mime_type }), /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__message-attachment-file--item-text" }, /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__message-attachment-file--item-first-row" }, /* @__PURE__ */ import_react252.default.createElement(
|
|
54065
54076
|
"div",
|
|
54066
54077
|
{
|
|
54067
54078
|
className: "str-chat__message-attachment-file--item-name",
|
|
54068
54079
|
"data-testid": "file-title"
|
|
54069
54080
|
},
|
|
54070
54081
|
attachment.title
|
|
54071
|
-
), /* @__PURE__ */
|
|
54072
|
-
var FileAttachment =
|
|
54082
|
+
), /* @__PURE__ */ import_react252.default.createElement(DownloadButton, { assetUrl: attachment.asset_url })), /* @__PURE__ */ import_react252.default.createElement(FileSizeIndicator, { fileSize: attachment.file_size })));
|
|
54083
|
+
var FileAttachment = import_react252.default.memo(
|
|
54073
54084
|
UnMemoizedFileAttachment
|
|
54074
54085
|
);
|
|
54075
54086
|
|
|
54076
54087
|
// src/components/Attachment/UnsupportedAttachment.tsx
|
|
54077
|
-
var
|
|
54088
|
+
var import_react253 = __toESM(require("react"));
|
|
54078
54089
|
var UnsupportedAttachment = ({ attachment }) => {
|
|
54079
54090
|
const { t } = useTranslationContext("UnsupportedAttachment");
|
|
54080
|
-
return /* @__PURE__ */
|
|
54091
|
+
return /* @__PURE__ */ import_react253.default.createElement(
|
|
54081
54092
|
"div",
|
|
54082
54093
|
{
|
|
54083
54094
|
className: "str-chat__message-attachment-unsupported",
|
|
54084
54095
|
"data-testid": "attachment-unsupported"
|
|
54085
54096
|
},
|
|
54086
|
-
/* @__PURE__ */
|
|
54087
|
-
/* @__PURE__ */
|
|
54097
|
+
/* @__PURE__ */ import_react253.default.createElement(FileIcon, { className: "str-chat__file-icon" }),
|
|
54098
|
+
/* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__message-attachment-unsupported__metadata" }, /* @__PURE__ */ import_react253.default.createElement(
|
|
54088
54099
|
"div",
|
|
54089
54100
|
{
|
|
54090
54101
|
className: "str-chat__message-attachment-unsupported__title",
|
|
@@ -54116,7 +54127,7 @@ var AttachmentWithinContainer = ({
|
|
|
54116
54127
|
"str-chat__message-attachment-with-actions": extra === "actions"
|
|
54117
54128
|
}
|
|
54118
54129
|
);
|
|
54119
|
-
return /* @__PURE__ */
|
|
54130
|
+
return /* @__PURE__ */ import_react254.default.createElement("div", { className: classNames }, children);
|
|
54120
54131
|
};
|
|
54121
54132
|
var AttachmentActionsContainer = ({
|
|
54122
54133
|
actionHandler,
|
|
@@ -54124,7 +54135,7 @@ var AttachmentActionsContainer = ({
|
|
|
54124
54135
|
AttachmentActions: AttachmentActions2 = AttachmentActions
|
|
54125
54136
|
}) => {
|
|
54126
54137
|
if (!attachment.actions?.length) return null;
|
|
54127
|
-
return /* @__PURE__ */
|
|
54138
|
+
return /* @__PURE__ */ import_react254.default.createElement(
|
|
54128
54139
|
AttachmentActions2,
|
|
54129
54140
|
{
|
|
54130
54141
|
...attachment,
|
|
@@ -54155,10 +54166,10 @@ var GalleryContainer = ({
|
|
|
54155
54166
|
attachment,
|
|
54156
54167
|
Gallery: Gallery2 = Gallery
|
|
54157
54168
|
}) => {
|
|
54158
|
-
const imageElements = (0,
|
|
54169
|
+
const imageElements = (0, import_react254.useRef)([]);
|
|
54159
54170
|
const { imageAttachmentSizeHandler } = useChannelStateContext();
|
|
54160
|
-
const [attachmentConfigurations, setAttachmentConfigurations] = (0,
|
|
54161
|
-
(0,
|
|
54171
|
+
const [attachmentConfigurations, setAttachmentConfigurations] = (0, import_react254.useState)([]);
|
|
54172
|
+
(0, import_react254.useLayoutEffect)(() => {
|
|
54162
54173
|
if (imageElements.current && imageElements.current.every((element3) => !!element3) && imageAttachmentSizeHandler) {
|
|
54163
54174
|
const newConfigurations = [];
|
|
54164
54175
|
imageElements.current.forEach((element3, i) => {
|
|
@@ -54175,15 +54186,15 @@ var GalleryContainer = ({
|
|
|
54175
54186
|
attachment.images[i]?.image_url || attachment.images[i]?.thumb_url || ""
|
|
54176
54187
|
)
|
|
54177
54188
|
}));
|
|
54178
|
-
return /* @__PURE__ */
|
|
54189
|
+
return /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType: "gallery" }, /* @__PURE__ */ import_react254.default.createElement(Gallery2, { images: images || [], innerRefs: imageElements, key: "gallery" }));
|
|
54179
54190
|
};
|
|
54180
54191
|
var ImageContainer = (props) => {
|
|
54181
54192
|
const { attachment, Image: Image2 = ImageComponent } = props;
|
|
54182
54193
|
const componentType = "image";
|
|
54183
|
-
const imageElement = (0,
|
|
54194
|
+
const imageElement = (0, import_react254.useRef)(null);
|
|
54184
54195
|
const { imageAttachmentSizeHandler } = useChannelStateContext();
|
|
54185
|
-
const [attachmentConfiguration, setAttachmentConfiguration] = (0,
|
|
54186
|
-
(0,
|
|
54196
|
+
const [attachmentConfiguration, setAttachmentConfiguration] = (0, import_react254.useState)(void 0);
|
|
54197
|
+
(0, import_react254.useLayoutEffect)(() => {
|
|
54187
54198
|
if (imageElement.current && imageAttachmentSizeHandler) {
|
|
54188
54199
|
const config = imageAttachmentSizeHandler(attachment, imageElement.current);
|
|
54189
54200
|
setAttachmentConfiguration(config);
|
|
@@ -54195,41 +54206,41 @@ var ImageContainer = (props) => {
|
|
|
54195
54206
|
style: getCssDimensionsVariables(attachment.image_url || attachment.thumb_url || "")
|
|
54196
54207
|
};
|
|
54197
54208
|
if (attachment.actions && attachment.actions.length) {
|
|
54198
|
-
return /* @__PURE__ */
|
|
54209
|
+
return /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react254.default.createElement(Image2, { ...imageConfig, innerRef: imageElement }), /* @__PURE__ */ import_react254.default.createElement(AttachmentActionsContainer, { ...props })));
|
|
54199
54210
|
}
|
|
54200
|
-
return /* @__PURE__ */
|
|
54211
|
+
return /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react254.default.createElement(Image2, { ...imageConfig, innerRef: imageElement }));
|
|
54201
54212
|
};
|
|
54202
54213
|
var CardContainer = (props) => {
|
|
54203
54214
|
const { attachment, Card: Card2 = Card } = props;
|
|
54204
54215
|
const componentType = "card";
|
|
54205
54216
|
if (attachment.actions && attachment.actions.length) {
|
|
54206
|
-
return /* @__PURE__ */
|
|
54217
|
+
return /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react254.default.createElement(Card2, { ...attachment }), /* @__PURE__ */ import_react254.default.createElement(AttachmentActionsContainer, { ...props })));
|
|
54207
54218
|
}
|
|
54208
|
-
return /* @__PURE__ */
|
|
54219
|
+
return /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react254.default.createElement(Card2, { ...attachment }));
|
|
54209
54220
|
};
|
|
54210
54221
|
var FileContainer = ({
|
|
54211
54222
|
attachment,
|
|
54212
54223
|
File: File2 = FileAttachment
|
|
54213
54224
|
}) => {
|
|
54214
54225
|
if (!attachment.asset_url) return null;
|
|
54215
|
-
return /* @__PURE__ */
|
|
54226
|
+
return /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType: "file" }, /* @__PURE__ */ import_react254.default.createElement(File2, { attachment }));
|
|
54216
54227
|
};
|
|
54217
54228
|
var AudioContainer = ({
|
|
54218
54229
|
attachment,
|
|
54219
54230
|
Audio: Audio2 = Audio
|
|
54220
|
-
}) => /* @__PURE__ */
|
|
54231
|
+
}) => /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType: "audio" }, /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react254.default.createElement(Audio2, { og: attachment })));
|
|
54221
54232
|
var VoiceRecordingContainer = ({
|
|
54222
54233
|
attachment,
|
|
54223
54234
|
isQuoted,
|
|
54224
54235
|
VoiceRecording: VoiceRecording2 = VoiceRecording
|
|
54225
|
-
}) => /* @__PURE__ */
|
|
54236
|
+
}) => /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType: "voiceRecording" }, /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react254.default.createElement(VoiceRecording2, { attachment, isQuoted })));
|
|
54226
54237
|
var MediaContainer = (props) => {
|
|
54227
54238
|
const { attachment, Media = import_react_player2.default } = props;
|
|
54228
54239
|
const componentType = "media";
|
|
54229
54240
|
const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } = useChannelStateContext();
|
|
54230
|
-
const videoElement = (0,
|
|
54231
|
-
const [attachmentConfiguration, setAttachmentConfiguration] = (0,
|
|
54232
|
-
(0,
|
|
54241
|
+
const videoElement = (0, import_react254.useRef)(null);
|
|
54242
|
+
const [attachmentConfiguration, setAttachmentConfiguration] = (0, import_react254.useState)();
|
|
54243
|
+
(0, import_react254.useLayoutEffect)(() => {
|
|
54233
54244
|
if (videoElement.current && videoAttachmentSizeHandler) {
|
|
54234
54245
|
const config = videoAttachmentSizeHandler(
|
|
54235
54246
|
attachment,
|
|
@@ -54239,7 +54250,7 @@ var MediaContainer = (props) => {
|
|
|
54239
54250
|
setAttachmentConfiguration(config);
|
|
54240
54251
|
}
|
|
54241
54252
|
}, [videoElement, videoAttachmentSizeHandler, attachment]);
|
|
54242
|
-
const content3 = /* @__PURE__ */
|
|
54253
|
+
const content3 = /* @__PURE__ */ import_react254.default.createElement(
|
|
54243
54254
|
"div",
|
|
54244
54255
|
{
|
|
54245
54256
|
className: "str-chat__player-wrapper",
|
|
@@ -54247,7 +54258,7 @@ var MediaContainer = (props) => {
|
|
|
54247
54258
|
ref: videoElement,
|
|
54248
54259
|
style: getCssDimensionsVariables(attachment.thumb_url || "")
|
|
54249
54260
|
},
|
|
54250
|
-
/* @__PURE__ */
|
|
54261
|
+
/* @__PURE__ */ import_react254.default.createElement(
|
|
54251
54262
|
Media,
|
|
54252
54263
|
{
|
|
54253
54264
|
className: "react-player",
|
|
@@ -54259,12 +54270,12 @@ var MediaContainer = (props) => {
|
|
|
54259
54270
|
}
|
|
54260
54271
|
)
|
|
54261
54272
|
);
|
|
54262
|
-
return attachment.actions?.length ? /* @__PURE__ */
|
|
54273
|
+
return attachment.actions?.length ? /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment" }, content3, /* @__PURE__ */ import_react254.default.createElement(AttachmentActionsContainer, { ...props }))) : /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType }, content3);
|
|
54263
54274
|
};
|
|
54264
54275
|
var UnsupportedAttachmentContainer = ({
|
|
54265
54276
|
attachment,
|
|
54266
54277
|
UnsupportedAttachment: UnsupportedAttachment2 = UnsupportedAttachment
|
|
54267
|
-
}) => /* @__PURE__ */
|
|
54278
|
+
}) => /* @__PURE__ */ import_react254.default.createElement(import_react254.default.Fragment, null, /* @__PURE__ */ import_react254.default.createElement(UnsupportedAttachment2, { attachment }));
|
|
54268
54279
|
|
|
54269
54280
|
// src/components/Attachment/Attachment.tsx
|
|
54270
54281
|
var CONTAINER_MAP = {
|
|
@@ -54287,12 +54298,12 @@ var ATTACHMENT_GROUPS_ORDER = [
|
|
|
54287
54298
|
];
|
|
54288
54299
|
var Attachment = (props) => {
|
|
54289
54300
|
const { attachments } = props;
|
|
54290
|
-
const groupedAttachments = (0,
|
|
54301
|
+
const groupedAttachments = (0, import_react255.useMemo)(
|
|
54291
54302
|
() => renderGroupedAttachments(props),
|
|
54292
54303
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
54293
54304
|
[attachments]
|
|
54294
54305
|
);
|
|
54295
|
-
return /* @__PURE__ */
|
|
54306
|
+
return /* @__PURE__ */ import_react255.default.createElement("div", { className: "str-chat__attachment-list" }, ATTACHMENT_GROUPS_ORDER.reduce(
|
|
54296
54307
|
(acc, groupName) => [...acc, ...groupedAttachments[groupName]],
|
|
54297
54308
|
[]
|
|
54298
54309
|
));
|
|
@@ -54309,7 +54320,7 @@ var renderGroupedAttachments = ({
|
|
|
54309
54320
|
const attachmentType = getAttachmentType(attachment);
|
|
54310
54321
|
const Container = CONTAINER_MAP[attachmentType];
|
|
54311
54322
|
typeMap[attachmentType].push(
|
|
54312
|
-
/* @__PURE__ */
|
|
54323
|
+
/* @__PURE__ */ import_react255.default.createElement(
|
|
54313
54324
|
Container,
|
|
54314
54325
|
{
|
|
54315
54326
|
key: `${attachmentType}-${typeMap[attachmentType].length}`,
|
|
@@ -54336,7 +54347,7 @@ var renderGroupedAttachments = ({
|
|
|
54336
54347
|
);
|
|
54337
54348
|
if (uploadedImages.length > 1) {
|
|
54338
54349
|
containers["gallery"] = [
|
|
54339
|
-
/* @__PURE__ */
|
|
54350
|
+
/* @__PURE__ */ import_react255.default.createElement(
|
|
54340
54351
|
GalleryContainer,
|
|
54341
54352
|
{
|
|
54342
54353
|
key: "gallery-container",
|
|
@@ -54350,7 +54361,7 @@ var renderGroupedAttachments = ({
|
|
|
54350
54361
|
];
|
|
54351
54362
|
} else if (uploadedImages.length === 1) {
|
|
54352
54363
|
containers["image"] = [
|
|
54353
|
-
/* @__PURE__ */
|
|
54364
|
+
/* @__PURE__ */ import_react255.default.createElement(ImageContainer, { key: "image-container", ...rest, attachment: uploadedImages[0] })
|
|
54354
54365
|
];
|
|
54355
54366
|
}
|
|
54356
54367
|
return containers;
|
|
@@ -54371,7 +54382,7 @@ var getAttachmentType = (attachment) => {
|
|
|
54371
54382
|
};
|
|
54372
54383
|
|
|
54373
54384
|
// src/components/Channel/Channel.tsx
|
|
54374
|
-
var
|
|
54385
|
+
var import_react261 = __toESM(require("react"));
|
|
54375
54386
|
var import_clsx66 = __toESM(require("clsx"));
|
|
54376
54387
|
var import_lodash20 = __toESM(require("lodash.debounce"));
|
|
54377
54388
|
var import_lodash21 = __toESM(require("lodash.defaultsdeep"));
|
|
@@ -54552,7 +54563,7 @@ var initialState = {
|
|
|
54552
54563
|
};
|
|
54553
54564
|
|
|
54554
54565
|
// src/components/Channel/hooks/useCreateChannelStateContext.ts
|
|
54555
|
-
var
|
|
54566
|
+
var import_react256 = require("react");
|
|
54556
54567
|
var useCreateChannelStateContext = (value) => {
|
|
54557
54568
|
const {
|
|
54558
54569
|
channel,
|
|
@@ -54611,7 +54622,7 @@ var useCreateChannelStateContext = (value) => {
|
|
|
54611
54622
|
const memoizedThreadMessageData = threadMessages.map(
|
|
54612
54623
|
({ 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}`
|
|
54613
54624
|
).join();
|
|
54614
|
-
const channelStateContext = (0,
|
|
54625
|
+
const channelStateContext = (0, import_react256.useMemo)(
|
|
54615
54626
|
() => ({
|
|
54616
54627
|
channel,
|
|
54617
54628
|
channelCapabilities,
|
|
@@ -54675,11 +54686,11 @@ var useCreateChannelStateContext = (value) => {
|
|
|
54675
54686
|
};
|
|
54676
54687
|
|
|
54677
54688
|
// src/components/Channel/hooks/useCreateTypingContext.ts
|
|
54678
|
-
var
|
|
54689
|
+
var import_react257 = require("react");
|
|
54679
54690
|
var useCreateTypingContext = (value) => {
|
|
54680
54691
|
const { typing } = value;
|
|
54681
54692
|
const typingValue = Object.keys(typing || {}).join();
|
|
54682
|
-
const typingContext = (0,
|
|
54693
|
+
const typingContext = (0, import_react257.useMemo)(
|
|
54683
54694
|
() => ({
|
|
54684
54695
|
typing
|
|
54685
54696
|
}),
|
|
@@ -54703,10 +54714,10 @@ var useEditMessageHandler = (doUpdateMessageRequest) => {
|
|
|
54703
54714
|
};
|
|
54704
54715
|
|
|
54705
54716
|
// src/components/Channel/hooks/useIsMounted.ts
|
|
54706
|
-
var
|
|
54717
|
+
var import_react258 = require("react");
|
|
54707
54718
|
var useIsMounted = () => {
|
|
54708
|
-
const isMounted = (0,
|
|
54709
|
-
(0,
|
|
54719
|
+
const isMounted = (0, import_react258.useRef)(false);
|
|
54720
|
+
(0, import_react258.useEffect)(() => {
|
|
54710
54721
|
isMounted.current = true;
|
|
54711
54722
|
return () => {
|
|
54712
54723
|
isMounted.current = false;
|
|
@@ -54716,8 +54727,8 @@ var useIsMounted = () => {
|
|
|
54716
54727
|
};
|
|
54717
54728
|
|
|
54718
54729
|
// src/components/Channel/hooks/useMentionsHandlers.ts
|
|
54719
|
-
var
|
|
54720
|
-
var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0,
|
|
54730
|
+
var import_react259 = require("react");
|
|
54731
|
+
var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0, import_react259.useCallback)(
|
|
54721
54732
|
(event, mentioned_users) => {
|
|
54722
54733
|
if (!onMentionsHover && !onMentionsClick || !(event.target instanceof HTMLElement)) {
|
|
54723
54734
|
return;
|
|
@@ -54741,11 +54752,11 @@ var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0, import_react
|
|
|
54741
54752
|
);
|
|
54742
54753
|
|
|
54743
54754
|
// src/components/Channel/LoadingChannel.tsx
|
|
54744
|
-
var
|
|
54745
|
-
var LoadingMessage = () => /* @__PURE__ */
|
|
54746
|
-
var LoadingMessageInput = () => /* @__PURE__ */
|
|
54747
|
-
var LoadingChannelHeader = () => /* @__PURE__ */
|
|
54748
|
-
var LoadingChannel = () => /* @__PURE__ */
|
|
54755
|
+
var import_react260 = __toESM(require("react"));
|
|
54756
|
+
var LoadingMessage = () => /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message" }, /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-avatar" }), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-end" }, /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-sender" }), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-last-row" }, /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-text" }), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-date" }))));
|
|
54757
|
+
var LoadingMessageInput = () => /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-input-row" }, /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-input" }), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-send" }));
|
|
54758
|
+
var LoadingChannelHeader = () => /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-header" }, /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-header-avatar" }), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-header-end" }, /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-header-name" }), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-header-info" })));
|
|
54759
|
+
var LoadingChannel = () => /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel" }, /* @__PURE__ */ import_react260.default.createElement(LoadingChannelHeader, null), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-list" }, Array.from(Array(3)).map((_, i) => /* @__PURE__ */ import_react260.default.createElement(LoadingMessage, { key: `loading-message-${i}` }))), /* @__PURE__ */ import_react260.default.createElement(LoadingMessageInput, null));
|
|
54749
54760
|
|
|
54750
54761
|
// src/components/Channel/hooks/useChannelContainerClasses.ts
|
|
54751
54762
|
var useImageFlagEmojisOnWindowsClass = () => {
|
|
@@ -54766,12 +54777,12 @@ var useChannelContainerClasses = ({
|
|
|
54766
54777
|
};
|
|
54767
54778
|
|
|
54768
54779
|
// src/components/Channel/utils.ts
|
|
54769
|
-
var
|
|
54780
|
+
var import_nanoid7 = require("nanoid");
|
|
54770
54781
|
var makeAddNotifications = (setNotifications, notificationTimeouts) => (text7, type) => {
|
|
54771
54782
|
if (typeof text7 !== "string" || type !== "success" && type !== "error") {
|
|
54772
54783
|
return;
|
|
54773
54784
|
}
|
|
54774
|
-
const id = (0,
|
|
54785
|
+
const id = (0, import_nanoid7.nanoid)();
|
|
54775
54786
|
setNotifications((prevNotifications) => [...prevNotifications, { id, text: text7, type }]);
|
|
54776
54787
|
const timeout = setTimeout(
|
|
54777
54788
|
() => setNotifications(
|
|
@@ -54932,7 +54943,7 @@ var ChannelContainer = ({
|
|
|
54932
54943
|
customClasses
|
|
54933
54944
|
});
|
|
54934
54945
|
const className = (0, import_clsx66.default)(chatClass, theme, channelClass, additionalClassName);
|
|
54935
|
-
return /* @__PURE__ */
|
|
54946
|
+
return /* @__PURE__ */ import_react261.default.createElement("div", { id: CHANNEL_CONTAINER_ID, ...props, className }, children);
|
|
54936
54947
|
};
|
|
54937
54948
|
var UnMemoizedChannel = (props) => {
|
|
54938
54949
|
const {
|
|
@@ -54944,15 +54955,15 @@ var UnMemoizedChannel = (props) => {
|
|
|
54944
54955
|
const { channel: contextChannel, channelsQueryState } = useChatContext("Channel");
|
|
54945
54956
|
const channel = propsChannel || contextChannel;
|
|
54946
54957
|
if (channelsQueryState.queryInProgress === "reload" && LoadingIndicator2) {
|
|
54947
|
-
return /* @__PURE__ */
|
|
54958
|
+
return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react261.default.createElement(LoadingIndicator2, null));
|
|
54948
54959
|
}
|
|
54949
54960
|
if (channelsQueryState.error && LoadingErrorIndicator2) {
|
|
54950
|
-
return /* @__PURE__ */
|
|
54961
|
+
return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react261.default.createElement(LoadingErrorIndicator2, { error: channelsQueryState.error }));
|
|
54951
54962
|
}
|
|
54952
54963
|
if (!channel?.cid) {
|
|
54953
|
-
return /* @__PURE__ */
|
|
54964
|
+
return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, null, EmptyPlaceholder2);
|
|
54954
54965
|
}
|
|
54955
|
-
return /* @__PURE__ */
|
|
54966
|
+
return /* @__PURE__ */ import_react261.default.createElement(ChannelInner, { ...props, channel, key: channel.cid });
|
|
54956
54967
|
};
|
|
54957
54968
|
var ChannelInner = (props) => {
|
|
54958
54969
|
const {
|
|
@@ -54972,7 +54983,7 @@ var ChannelInner = (props) => {
|
|
|
54972
54983
|
onMentionsHover,
|
|
54973
54984
|
skipMessageDataMemoization
|
|
54974
54985
|
} = props;
|
|
54975
|
-
const channelQueryOptions = (0,
|
|
54986
|
+
const channelQueryOptions = (0, import_react261.useMemo)(
|
|
54976
54987
|
() => (0, import_lodash21.default)(propChannelQueryOptions, {
|
|
54977
54988
|
messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE }
|
|
54978
54989
|
}),
|
|
@@ -54983,12 +54994,12 @@ var ChannelInner = (props) => {
|
|
|
54983
54994
|
const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
|
|
54984
54995
|
const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
|
|
54985
54996
|
const thread = useThreadContext();
|
|
54986
|
-
const [channelConfig, setChannelConfig] = (0,
|
|
54987
|
-
const [notifications, setNotifications] = (0,
|
|
54988
|
-
const notificationTimeouts = (0,
|
|
54989
|
-
const [channelUnreadUiState, _setChannelUnreadUiState] = (0,
|
|
54990
|
-
const channelReducer = (0,
|
|
54991
|
-
const [state, dispatch] = (0,
|
|
54997
|
+
const [channelConfig, setChannelConfig] = (0, import_react261.useState)(channel.getConfig());
|
|
54998
|
+
const [notifications, setNotifications] = (0, import_react261.useState)([]);
|
|
54999
|
+
const notificationTimeouts = (0, import_react261.useRef)([]);
|
|
55000
|
+
const [channelUnreadUiState, _setChannelUnreadUiState] = (0, import_react261.useState)();
|
|
55001
|
+
const channelReducer = (0, import_react261.useMemo)(() => makeChannelReducer(), []);
|
|
55002
|
+
const [state, dispatch] = (0, import_react261.useReducer)(
|
|
54992
55003
|
channelReducer,
|
|
54993
55004
|
// channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
|
|
54994
55005
|
// => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state
|
|
@@ -55000,10 +55011,10 @@ var ChannelInner = (props) => {
|
|
|
55000
55011
|
);
|
|
55001
55012
|
const jumpToMessageFromSearch = useSearchFocusedMessage();
|
|
55002
55013
|
const isMounted = useIsMounted();
|
|
55003
|
-
const originalTitle = (0,
|
|
55004
|
-
const lastRead = (0,
|
|
55005
|
-
const online = (0,
|
|
55006
|
-
const clearHighlightedMessageTimeoutId = (0,
|
|
55014
|
+
const originalTitle = (0, import_react261.useRef)("");
|
|
55015
|
+
const lastRead = (0, import_react261.useRef)(void 0);
|
|
55016
|
+
const online = (0, import_react261.useRef)(true);
|
|
55017
|
+
const clearHighlightedMessageTimeoutId = (0, import_react261.useRef)(
|
|
55007
55018
|
null
|
|
55008
55019
|
);
|
|
55009
55020
|
const channelCapabilitiesArray = channel.data?.own_capabilities;
|
|
@@ -55015,14 +55026,14 @@ var ChannelInner = (props) => {
|
|
|
55015
55026
|
trailing: true
|
|
55016
55027
|
}
|
|
55017
55028
|
);
|
|
55018
|
-
const setChannelUnreadUiState = (0,
|
|
55029
|
+
const setChannelUnreadUiState = (0, import_react261.useMemo)(
|
|
55019
55030
|
() => (0, import_lodash22.default)(_setChannelUnreadUiState, 200, {
|
|
55020
55031
|
leading: true,
|
|
55021
55032
|
trailing: false
|
|
55022
55033
|
}),
|
|
55023
55034
|
[]
|
|
55024
55035
|
);
|
|
55025
|
-
const markRead = (0,
|
|
55036
|
+
const markRead = (0, import_react261.useMemo)(
|
|
55026
55037
|
() => (0, import_lodash22.default)(
|
|
55027
55038
|
async (options) => {
|
|
55028
55039
|
const { updateChannelUiUnreadState = true } = options ?? {};
|
|
@@ -55125,7 +55136,7 @@ var ChannelInner = (props) => {
|
|
|
55125
55136
|
}
|
|
55126
55137
|
throttledCopyStateFromChannel();
|
|
55127
55138
|
};
|
|
55128
|
-
(0,
|
|
55139
|
+
(0, import_react261.useLayoutEffect)(() => {
|
|
55129
55140
|
let errored = false;
|
|
55130
55141
|
let done = false;
|
|
55131
55142
|
(async () => {
|
|
@@ -55191,12 +55202,12 @@ var ChannelInner = (props) => {
|
|
|
55191
55202
|
channelConfig?.read_events,
|
|
55192
55203
|
initializeOnMount
|
|
55193
55204
|
]);
|
|
55194
|
-
(0,
|
|
55205
|
+
(0, import_react261.useEffect)(() => {
|
|
55195
55206
|
if (!state.thread) return;
|
|
55196
55207
|
const message = state.messages?.find((m) => m.id === state.thread?.id);
|
|
55197
55208
|
if (message) dispatch({ message, type: "setThread" });
|
|
55198
55209
|
}, [state.messages, state.thread]);
|
|
55199
|
-
const handleHighlightedMessageChange = (0,
|
|
55210
|
+
const handleHighlightedMessageChange = (0, import_react261.useCallback)(
|
|
55200
55211
|
({
|
|
55201
55212
|
highlightDuration,
|
|
55202
55213
|
highlightedMessageId
|
|
@@ -55219,15 +55230,15 @@ var ChannelInner = (props) => {
|
|
|
55219
55230
|
},
|
|
55220
55231
|
[channel, searchController]
|
|
55221
55232
|
);
|
|
55222
|
-
(0,
|
|
55233
|
+
(0, import_react261.useEffect)(() => {
|
|
55223
55234
|
if (!jumpToMessageFromSearch?.id) return;
|
|
55224
55235
|
handleHighlightedMessageChange({ highlightedMessageId: jumpToMessageFromSearch.id });
|
|
55225
55236
|
}, [jumpToMessageFromSearch, handleHighlightedMessageChange]);
|
|
55226
|
-
const addNotification = (0,
|
|
55237
|
+
const addNotification = (0, import_react261.useMemo)(
|
|
55227
55238
|
() => makeAddNotifications(setNotifications, notificationTimeouts.current),
|
|
55228
55239
|
[]
|
|
55229
55240
|
);
|
|
55230
|
-
const loadMoreFinished = (0,
|
|
55241
|
+
const loadMoreFinished = (0, import_react261.useCallback)(
|
|
55231
55242
|
(0, import_lodash20.default)(
|
|
55232
55243
|
(hasMore, messages) => {
|
|
55233
55244
|
if (!isMounted.current) return;
|
|
@@ -55288,7 +55299,7 @@ var ChannelInner = (props) => {
|
|
|
55288
55299
|
});
|
|
55289
55300
|
return queryResponse.messages.length;
|
|
55290
55301
|
};
|
|
55291
|
-
const jumpToMessage = (0,
|
|
55302
|
+
const jumpToMessage = (0, import_react261.useCallback)(
|
|
55292
55303
|
async (messageId, messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
|
|
55293
55304
|
dispatch({ loadingMore: true, type: "setLoadingMore" });
|
|
55294
55305
|
await channel.state.loadMessageIntoState(messageId, void 0, messageLimit);
|
|
@@ -55300,14 +55311,14 @@ var ChannelInner = (props) => {
|
|
|
55300
55311
|
},
|
|
55301
55312
|
[channel, handleHighlightedMessageChange, loadMoreFinished]
|
|
55302
55313
|
);
|
|
55303
|
-
const jumpToLatestMessage = (0,
|
|
55314
|
+
const jumpToLatestMessage = (0, import_react261.useCallback)(async () => {
|
|
55304
55315
|
await channel.state.loadMessageIntoState("latest");
|
|
55305
55316
|
loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
|
|
55306
55317
|
dispatch({
|
|
55307
55318
|
type: "jumpToLatestMessage"
|
|
55308
55319
|
});
|
|
55309
55320
|
}, [channel, loadMoreFinished]);
|
|
55310
|
-
const jumpToFirstUnreadMessage = (0,
|
|
55321
|
+
const jumpToFirstUnreadMessage = (0, import_react261.useCallback)(
|
|
55311
55322
|
async (queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
|
|
55312
55323
|
if (!channelUnreadUiState?.unread_messages) return;
|
|
55313
55324
|
let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
|
|
@@ -55430,7 +55441,7 @@ var ChannelInner = (props) => {
|
|
|
55430
55441
|
channelUnreadUiState
|
|
55431
55442
|
]
|
|
55432
55443
|
);
|
|
55433
|
-
const deleteMessage = (0,
|
|
55444
|
+
const deleteMessage = (0, import_react261.useCallback)(
|
|
55434
55445
|
async (message) => {
|
|
55435
55446
|
if (!message?.id) {
|
|
55436
55447
|
throw new Error("Cannot delete a message - missing message ID.");
|
|
@@ -55548,7 +55559,7 @@ var ChannelInner = (props) => {
|
|
|
55548
55559
|
event?.preventDefault();
|
|
55549
55560
|
dispatch({ type: "closeThread" });
|
|
55550
55561
|
};
|
|
55551
|
-
const loadMoreThreadFinished = (0,
|
|
55562
|
+
const loadMoreThreadFinished = (0, import_react261.useCallback)(
|
|
55552
55563
|
(0, import_lodash20.default)(
|
|
55553
55564
|
(threadHasMore, threadMessages) => {
|
|
55554
55565
|
dispatch({
|
|
@@ -55603,7 +55614,7 @@ var ChannelInner = (props) => {
|
|
|
55603
55614
|
videoAttachmentSizeHandler: props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration,
|
|
55604
55615
|
watcher_count: state.watcherCount
|
|
55605
55616
|
});
|
|
55606
|
-
const channelActionContextValue = (0,
|
|
55617
|
+
const channelActionContextValue = (0, import_react261.useMemo)(
|
|
55607
55618
|
() => ({
|
|
55608
55619
|
addNotification,
|
|
55609
55620
|
closeThread,
|
|
@@ -55640,7 +55651,7 @@ var ChannelInner = (props) => {
|
|
|
55640
55651
|
setChannelUnreadUiState
|
|
55641
55652
|
]
|
|
55642
55653
|
);
|
|
55643
|
-
const componentContextValue = (0,
|
|
55654
|
+
const componentContextValue = (0, import_react261.useMemo)(
|
|
55644
55655
|
() => ({
|
|
55645
55656
|
Attachment: props.Attachment,
|
|
55646
55657
|
AttachmentPreviewList: props.AttachmentPreviewList,
|
|
@@ -55772,26 +55783,26 @@ var ChannelInner = (props) => {
|
|
|
55772
55783
|
typing
|
|
55773
55784
|
});
|
|
55774
55785
|
if (state.error) {
|
|
55775
|
-
return /* @__PURE__ */
|
|
55786
|
+
return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react261.default.createElement(LoadingErrorIndicator2, { error: state.error }));
|
|
55776
55787
|
}
|
|
55777
55788
|
if (state.loading) {
|
|
55778
|
-
return /* @__PURE__ */
|
|
55789
|
+
return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react261.default.createElement(LoadingIndicator2, null));
|
|
55779
55790
|
}
|
|
55780
55791
|
if (!channel.watch) {
|
|
55781
|
-
return /* @__PURE__ */
|
|
55792
|
+
return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react261.default.createElement("div", null, t("Channel Missing")));
|
|
55782
55793
|
}
|
|
55783
|
-
return /* @__PURE__ */
|
|
55794
|
+
return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, { className: windowsEmojiClass }, /* @__PURE__ */ import_react261.default.createElement(ChannelStateProvider, { value: channelStateContextValue }, /* @__PURE__ */ import_react261.default.createElement(ChannelActionProvider, { value: channelActionContextValue }, /* @__PURE__ */ import_react261.default.createElement(WithComponents, { overrides: componentContextValue }, /* @__PURE__ */ import_react261.default.createElement(TypingProvider, { value: typingContextValue }, /* @__PURE__ */ import_react261.default.createElement("div", { className: (0, import_clsx66.default)(chatContainerClass) }, children))))));
|
|
55784
55795
|
};
|
|
55785
|
-
var Channel =
|
|
55796
|
+
var Channel = import_react261.default.memo(UnMemoizedChannel);
|
|
55786
55797
|
|
|
55787
55798
|
// src/components/ChannelHeader/ChannelHeader.tsx
|
|
55788
|
-
var
|
|
55799
|
+
var import_react263 = __toESM(require("react"));
|
|
55789
55800
|
|
|
55790
55801
|
// src/components/ChannelHeader/icons.tsx
|
|
55791
|
-
var
|
|
55802
|
+
var import_react262 = __toESM(require("react"));
|
|
55792
55803
|
var MenuIcon2 = ({ title }) => {
|
|
55793
55804
|
const { t } = useTranslationContext("MenuIcon");
|
|
55794
|
-
return /* @__PURE__ */
|
|
55805
|
+
return /* @__PURE__ */ import_react262.default.createElement("svg", { "data-testid": "menu-icon", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react262.default.createElement("title", null, title ?? t("Menu")), /* @__PURE__ */ import_react262.default.createElement(
|
|
55795
55806
|
"path",
|
|
55796
55807
|
{
|
|
55797
55808
|
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",
|
|
@@ -55818,15 +55829,15 @@ var ChannelHeader = (props) => {
|
|
|
55818
55829
|
overrideTitle
|
|
55819
55830
|
});
|
|
55820
55831
|
const { member_count, subtitle } = channel?.data || {};
|
|
55821
|
-
return /* @__PURE__ */
|
|
55832
|
+
return /* @__PURE__ */ import_react263.default.createElement("div", { className: "str-chat__channel-header" }, /* @__PURE__ */ import_react263.default.createElement(
|
|
55822
55833
|
"button",
|
|
55823
55834
|
{
|
|
55824
55835
|
"aria-label": t("aria/Menu"),
|
|
55825
55836
|
className: "str-chat__header-hamburger",
|
|
55826
55837
|
onClick: openMobileNav
|
|
55827
55838
|
},
|
|
55828
|
-
/* @__PURE__ */
|
|
55829
|
-
), /* @__PURE__ */
|
|
55839
|
+
/* @__PURE__ */ import_react263.default.createElement(MenuIcon3, null)
|
|
55840
|
+
), /* @__PURE__ */ import_react263.default.createElement(
|
|
55830
55841
|
Avatar2,
|
|
55831
55842
|
{
|
|
55832
55843
|
className: "str-chat__avatar--channel-header",
|
|
@@ -55834,36 +55845,36 @@ var ChannelHeader = (props) => {
|
|
|
55834
55845
|
image: displayImage,
|
|
55835
55846
|
name: displayTitle
|
|
55836
55847
|
}
|
|
55837
|
-
), /* @__PURE__ */
|
|
55848
|
+
), /* @__PURE__ */ import_react263.default.createElement("div", { className: "str-chat__channel-header-end" }, /* @__PURE__ */ import_react263.default.createElement("p", { className: "str-chat__channel-header-title" }, displayTitle, " ", live && /* @__PURE__ */ import_react263.default.createElement("span", { className: "str-chat__header-livestream-livelabel" }, t("live"))), subtitle && /* @__PURE__ */ import_react263.default.createElement("p", { className: "str-chat__channel-header-subtitle" }, subtitle), /* @__PURE__ */ import_react263.default.createElement("p", { className: "str-chat__channel-header-info" }, !live && !!member_count && member_count > 0 && /* @__PURE__ */ import_react263.default.createElement(import_react263.default.Fragment, null, t("{{ memberCount }} members", {
|
|
55838
55849
|
memberCount: member_count
|
|
55839
55850
|
}), ",", " "), t("{{ watcherCount }} online", { watcherCount: watcher_count }))));
|
|
55840
55851
|
};
|
|
55841
55852
|
|
|
55842
55853
|
// src/components/Chat/Chat.tsx
|
|
55843
|
-
var
|
|
55854
|
+
var import_react267 = __toESM(require("react"));
|
|
55844
55855
|
var import_stream_chat13 = require("stream-chat");
|
|
55845
55856
|
|
|
55846
55857
|
// src/components/Chat/hooks/useChat.ts
|
|
55847
|
-
var
|
|
55858
|
+
var import_react264 = require("react");
|
|
55848
55859
|
var useChat = ({
|
|
55849
55860
|
client,
|
|
55850
55861
|
defaultLanguage = "en",
|
|
55851
55862
|
i18nInstance,
|
|
55852
55863
|
initialNavOpen
|
|
55853
55864
|
}) => {
|
|
55854
|
-
const [translators, setTranslators] = (0,
|
|
55865
|
+
const [translators, setTranslators] = (0, import_react264.useState)({
|
|
55855
55866
|
t: (key) => key,
|
|
55856
55867
|
tDateTimeParser: defaultDateTimeParser,
|
|
55857
55868
|
userLanguage: "en"
|
|
55858
55869
|
});
|
|
55859
|
-
const [channel, setChannel] = (0,
|
|
55860
|
-
const [mutes, setMutes] = (0,
|
|
55861
|
-
const [navOpen, setNavOpen] = (0,
|
|
55862
|
-
const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0,
|
|
55870
|
+
const [channel, setChannel] = (0, import_react264.useState)();
|
|
55871
|
+
const [mutes, setMutes] = (0, import_react264.useState)([]);
|
|
55872
|
+
const [navOpen, setNavOpen] = (0, import_react264.useState)(initialNavOpen);
|
|
55873
|
+
const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0, import_react264.useState)({});
|
|
55863
55874
|
const clientMutes = client.user?.mutes ?? [];
|
|
55864
55875
|
const closeMobileNav = () => setNavOpen(false);
|
|
55865
55876
|
const openMobileNav = () => setTimeout(() => setNavOpen(true), 100);
|
|
55866
|
-
const appSettings = (0,
|
|
55877
|
+
const appSettings = (0, import_react264.useRef)(null);
|
|
55867
55878
|
const getAppSettings = () => {
|
|
55868
55879
|
if (appSettings.current) {
|
|
55869
55880
|
return appSettings.current;
|
|
@@ -55871,9 +55882,9 @@ var useChat = ({
|
|
|
55871
55882
|
appSettings.current = client.getAppSettings();
|
|
55872
55883
|
return appSettings.current;
|
|
55873
55884
|
};
|
|
55874
|
-
(0,
|
|
55885
|
+
(0, import_react264.useEffect)(() => {
|
|
55875
55886
|
if (!client) return;
|
|
55876
|
-
const version = "13.0.
|
|
55887
|
+
const version = "13.0.4";
|
|
55877
55888
|
const userAgent = client.getUserAgent();
|
|
55878
55889
|
if (!userAgent.includes("stream-chat-react")) {
|
|
55879
55890
|
client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
|
|
@@ -55885,7 +55896,7 @@ var useChat = ({
|
|
|
55885
55896
|
client.polls.unregisterSubscriptions();
|
|
55886
55897
|
};
|
|
55887
55898
|
}, [client]);
|
|
55888
|
-
(0,
|
|
55899
|
+
(0, import_react264.useEffect)(() => {
|
|
55889
55900
|
setMutes(clientMutes);
|
|
55890
55901
|
const handleEvent = (event) => {
|
|
55891
55902
|
setMutes(event.me?.mutes || []);
|
|
@@ -55893,7 +55904,7 @@ var useChat = ({
|
|
|
55893
55904
|
client.on("notification.mutes_updated", handleEvent);
|
|
55894
55905
|
return () => client.off("notification.mutes_updated", handleEvent);
|
|
55895
55906
|
}, [clientMutes?.length]);
|
|
55896
|
-
(0,
|
|
55907
|
+
(0, import_react264.useEffect)(() => {
|
|
55897
55908
|
let userLanguage = client.user?.language;
|
|
55898
55909
|
if (!userLanguage) {
|
|
55899
55910
|
const browserLanguage = window.navigator.language.slice(0, 2);
|
|
@@ -55910,7 +55921,7 @@ var useChat = ({
|
|
|
55910
55921
|
});
|
|
55911
55922
|
});
|
|
55912
55923
|
}, [i18nInstance]);
|
|
55913
|
-
const setActiveChannel = (0,
|
|
55924
|
+
const setActiveChannel = (0, import_react264.useCallback)(
|
|
55914
55925
|
async (activeChannel, watchers = {}, event) => {
|
|
55915
55926
|
if (event && event.preventDefault) event.preventDefault();
|
|
55916
55927
|
if (activeChannel && Object.keys(watchers).length) {
|
|
@@ -55921,7 +55932,7 @@ var useChat = ({
|
|
|
55921
55932
|
},
|
|
55922
55933
|
[]
|
|
55923
55934
|
);
|
|
55924
|
-
(0,
|
|
55935
|
+
(0, import_react264.useEffect)(() => {
|
|
55925
55936
|
setLatestMessageDatesByChannels({});
|
|
55926
55937
|
}, [client.user?.id]);
|
|
55927
55938
|
return {
|
|
@@ -55938,7 +55949,7 @@ var useChat = ({
|
|
|
55938
55949
|
};
|
|
55939
55950
|
|
|
55940
55951
|
// src/components/Chat/hooks/useCreateChatContext.ts
|
|
55941
|
-
var
|
|
55952
|
+
var import_react265 = require("react");
|
|
55942
55953
|
var useCreateChatContext = (value) => {
|
|
55943
55954
|
const {
|
|
55944
55955
|
channel,
|
|
@@ -55963,7 +55974,7 @@ var useCreateChatContext = (value) => {
|
|
|
55963
55974
|
const clientValues = `${client.clientID}${Object.keys(client.activeChannels).length}${Object.keys(client.listeners).length}${client.mutedChannels.length}
|
|
55964
55975
|
${client.user?.id}`;
|
|
55965
55976
|
const mutedUsersLength = mutes.length;
|
|
55966
|
-
const chatContext = (0,
|
|
55977
|
+
const chatContext = (0, import_react265.useMemo)(
|
|
55967
55978
|
() => ({
|
|
55968
55979
|
channel,
|
|
55969
55980
|
channelsQueryState,
|
|
@@ -55998,10 +56009,10 @@ var useCreateChatContext = (value) => {
|
|
|
55998
56009
|
};
|
|
55999
56010
|
|
|
56000
56011
|
// src/components/Chat/hooks/useChannelsQueryState.ts
|
|
56001
|
-
var
|
|
56012
|
+
var import_react266 = require("react");
|
|
56002
56013
|
var useChannelsQueryState = () => {
|
|
56003
|
-
const [error, setError] = (0,
|
|
56004
|
-
const [queryInProgress, setQueryInProgress] = (0,
|
|
56014
|
+
const [error, setError] = (0, import_react266.useState)(null);
|
|
56015
|
+
const [queryInProgress, setQueryInProgress] = (0, import_react266.useState)("uninitialized");
|
|
56005
56016
|
return {
|
|
56006
56017
|
error,
|
|
56007
56018
|
queryInProgress,
|
|
@@ -56036,7 +56047,7 @@ var Chat = (props) => {
|
|
|
56036
56047
|
translators
|
|
56037
56048
|
} = useChat({ client, defaultLanguage, i18nInstance, initialNavOpen });
|
|
56038
56049
|
const channelsQueryState = useChannelsQueryState();
|
|
56039
|
-
const searchController = (0,
|
|
56050
|
+
const searchController = (0, import_react267.useMemo)(
|
|
56040
56051
|
() => customChannelSearchController ?? new import_stream_chat13.SearchController({
|
|
56041
56052
|
sources: [
|
|
56042
56053
|
new import_stream_chat13.ChannelSearchSource(client),
|
|
@@ -56064,11 +56075,11 @@ var Chat = (props) => {
|
|
|
56064
56075
|
useImageFlagEmojisOnWindows
|
|
56065
56076
|
});
|
|
56066
56077
|
if (!translators.t) return null;
|
|
56067
|
-
return /* @__PURE__ */
|
|
56078
|
+
return /* @__PURE__ */ import_react267.default.createElement(ChatProvider, { value: chatContextValue }, /* @__PURE__ */ import_react267.default.createElement(TranslationProvider, { value: translators }, children));
|
|
56068
56079
|
};
|
|
56069
56080
|
|
|
56070
56081
|
// src/components/Chat/hooks/useCreateChatClient.ts
|
|
56071
|
-
var
|
|
56082
|
+
var import_react268 = require("react");
|
|
56072
56083
|
var import_stream_chat14 = require("stream-chat");
|
|
56073
56084
|
var useCreateChatClient = ({
|
|
56074
56085
|
apiKey,
|
|
@@ -56076,13 +56087,13 @@ var useCreateChatClient = ({
|
|
|
56076
56087
|
tokenOrProvider,
|
|
56077
56088
|
userData
|
|
56078
56089
|
}) => {
|
|
56079
|
-
const [chatClient, setChatClient] = (0,
|
|
56080
|
-
const [cachedUserData, setCachedUserData] = (0,
|
|
56090
|
+
const [chatClient, setChatClient] = (0, import_react268.useState)(null);
|
|
56091
|
+
const [cachedUserData, setCachedUserData] = (0, import_react268.useState)(userData);
|
|
56081
56092
|
if (userData.id !== cachedUserData.id) {
|
|
56082
56093
|
setCachedUserData(userData);
|
|
56083
56094
|
}
|
|
56084
|
-
const [cachedOptions] = (0,
|
|
56085
|
-
(0,
|
|
56095
|
+
const [cachedOptions] = (0, import_react268.useState)(options);
|
|
56096
|
+
(0, import_react268.useEffect)(() => {
|
|
56086
56097
|
const client = new import_stream_chat14.StreamChat(apiKey, void 0, cachedOptions);
|
|
56087
56098
|
let didUserConnectInterrupt = false;
|
|
56088
56099
|
const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
|
|
@@ -56100,12 +56111,12 @@ var useCreateChatClient = ({
|
|
|
56100
56111
|
};
|
|
56101
56112
|
|
|
56102
56113
|
// src/components/Window/Window.tsx
|
|
56103
|
-
var
|
|
56114
|
+
var import_react269 = __toESM(require("react"));
|
|
56104
56115
|
var import_clsx67 = __toESM(require("clsx"));
|
|
56105
56116
|
var UnMemoizedWindow = (props) => {
|
|
56106
56117
|
const { children, thread: propThread } = props;
|
|
56107
56118
|
const { thread: contextThread } = useChannelStateContext("Window");
|
|
56108
|
-
return /* @__PURE__ */
|
|
56119
|
+
return /* @__PURE__ */ import_react269.default.createElement(
|
|
56109
56120
|
"div",
|
|
56110
56121
|
{
|
|
56111
56122
|
className: (0, import_clsx67.default)("str-chat__main-panel", {
|
|
@@ -56115,7 +56126,7 @@ var UnMemoizedWindow = (props) => {
|
|
|
56115
56126
|
children
|
|
56116
56127
|
);
|
|
56117
56128
|
};
|
|
56118
|
-
var Window =
|
|
56129
|
+
var Window = import_react269.default.memo(UnMemoizedWindow);
|
|
56119
56130
|
// Annotate the CommonJS export names for ESM import in node:
|
|
56120
56131
|
0 && (module.exports = {
|
|
56121
56132
|
ACTIONS_NOT_WORKING_IN_THREAD,
|