@uimkit/uikit-react
Version:
<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>
291 lines (288 loc) • 15.3 kB
JavaScript
import { __assign, __rest, __awaiter, __generator } from 'tslib';
import React__default, { useState, useReducer, useMemo, useRef, useLayoutEffect, useCallback } from 'react';
import { UIMessageInput } from '../UIMessageInput/UIMessageInput.js';
import '../EmoticonItem/EmoticonItem.js';
import 'emoji-mart';
import '../../context/MessageInputContext.js';
import { EmojiProvider } from '../../context/EmojiContext.js';
import '../../context/TranslationContext.js';
import { useUIKit } from '../../context/UIKitContext.js';
import { ComponentProvider } from '../../context/ComponentContext.js';
import { ChatActionProvider } from '../../context/ChatActionContext.js';
import '../../context/UIMessageContext.js';
import { ChatStateContextProvider } from '../../context/ChatStateContext.js';
import '../UICommandItem/UICommandItem.js';
import '../../node_modules/.pnpm/lodash.throttle@4.1.1/node_modules/lodash.throttle/index.js';
import '../../types/models.js';
import '../../types/events.js';
import '../UIUserItem/UIUserItem.js';
import data from '@emoji-mart/data';
import '../UIMessageInput/hooks/useHandleQuoteMessage.js';
import '../../constants.js';
import { UIMessageList } from '../UIMessageList/UIMessageList.js';
import '../EmptyStateIndicator/EmptyStateIndicator.js';
import '../UIMessageList/MessageNotification.js';
import '../Loading/LoadingErrorIndicator.js';
import '../Loading/LoadingIndicator.js';
import '../DateSeparator/DateSeparator.js';
import { UIMessage } from '../UIMessage/UIMessage.js';
import '../UIMessage/MessagePlugins.js';
import '../UIMessage/MessageStatus.js';
import '../UIMessage/MessageProgress.js';
import { UIChatHeader } from '../UIChatHeader/UIChatHeader.js';
import '../Icon/type.js';
import '../Icon/config.js';
import '../Plugins/index.js';
import { chatReducer, initialState } from './ChatState.js';
import useCreateChatStateContext from './hooks/useCreateChatStateContext.js';
import { useHandleMessage } from './hooks/useHandleMessage.js';
import { Toast } from '../Toast/index.js';
import { useCreateMessage } from '../../hooks/useCreateMessage.js';
import { commonEmoji, defaultMinimalEmojis, emojiSetDef } from './emojiData.js';
import { updateLocalMessage, deleteLocalMessage } from '../../store/messages/commands.js';
import { useDispatch } from '../../store/useDispatch.js';
import '../../store/conversations/actions.js';
import '../../node_modules/.pnpm/lodash.flatten@4.4.0/node_modules/lodash.flatten/index.js';
import '../../node_modules/.pnpm/lodash.some@4.6.0/node_modules/lodash.some/index.js';
import 'redux';
import '../../store/rootReducer.js';
import '../../store/accounts/actions.js';
import '../../store/accounts/selectors.js';
import '../../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/invariant.js';
import 'i18next';
import { ConversationActionType } from '../../store/messages/actions.js';
import '../../store/contacts/actions.js';
import { updateConversation } from '../../store/conversations/commands.js';
import { useConversationState } from '../../hooks/useConversationState.js';
import 'react-redux';
var UIChatInner = function (props) {
var UIMessage$1 = props.UIMessage, InputPlugins = props.InputPlugins, MessagePlugins = props.MessagePlugins, UIChatHeader$1 = props.UIChatHeader, UIMessageInput$1 = props.UIMessageInput, InputQuote = props.InputQuote, TriggerProvider = props.TriggerProvider, messageConfig = props.messageConfig, UIMessageInputConfig = props.UIMessageInputConfig, UIMessageListConfig = props.UIMessageListConfig, MessageContext = props.MessageContext, cloudCustomData = props.cloudCustomData, _a = props.emojiData, emojiData = _a === void 0 ? data : _a, doSendMessageRequest = props.doSendMessageRequest, conversation = props.conversation, children = props.children;
var client = useUIKit('UIChat').client;
var _b = useState(conversation.config), chatConfig = _b[0], setChatConfig = _b[1];
var _c = useReducer(chatReducer, __assign({}, initialState)), _state = _c[0], dispatch = _c[1];
var reduxDispatch = useDispatch();
var _d = useConversationState(conversation.id), loadMore = _d.loadMore, loadMoreNewer = _d.loadMoreNewer, jumpToMessage = _d.jumpToMessage, conversationState = __rest(_d, ["loadMore", "loadMoreNewer", "jumpToMessage"]);
var state = useMemo(function () {
var hasMore = conversationState.hasMore, hasMoreNewer = conversationState.hasMoreNewer, loadingMore = conversationState.loadingMore, loadingMoreNewer = conversationState.loadingMoreNewer, messages = conversationState.messages, highlightedMessageId = conversationState.highlightedMessageId, suppressAutoscroll = conversationState.suppressAutoscroll;
return __assign(__assign({}, _state), { hasMore: hasMore, hasMoreNewer: hasMoreNewer, loadingMore: loadingMore, loadingMoreNewer: loadingMoreNewer, messages: messages, highlightedMessageId: highlightedMessageId, suppressAutoscroll: suppressAutoscroll });
}, [_state, conversationState]);
var messageListRef = useRef(null);
var chatStateContextValue = useCreateChatStateContext(__assign({ client: client, conversation: conversation, chatConfig: chatConfig, messageListRef: messageListRef, messageConfig: messageConfig, UIMessageInputConfig: UIMessageInputConfig, UIMessageListConfig: UIMessageListConfig }, state));
var _e = useHandleMessage({
state: state,
dispatch: dispatch,
}), operateMessage = _e.operateMessage, setAudioSource = _e.setAudioSource;
var _f = useCreateMessage({ client: client, conversation: conversation, cloudCustomData: cloudCustomData }), createTextMessage = _f.createTextMessage, createFaceMessage = _f.createFaceMessage, createImageMessage = _f.createImageMessage, createVideoMessage = _f.createVideoMessage, createFileMessage = _f.createFileMessage,
// createForwardMessage,
createCustomMessage = _f.createCustomMessage, createAudioMessage = _f.createAudioMessage, createTextAtMessage = _f.createTextAtMessage, createLocationMessage = _f.createLocationMessage, createMergerMessage = _f.createMergerMessage;
useLayoutEffect(function () {
// 监听 conversation 内部事件
setChatConfig(conversation.config);
return function () {
// 解除监听 conversation 内部事件
};
}, [conversation.id]);
var jumpToLatestMessage = function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
// 不使用 redux
{
// 使用 redux
reduxDispatch({
type: ConversationActionType.JumpToLatestMessage,
conversation: conversation,
});
}
return [2 /*return*/];
});
}); };
var sendMessage = useCallback(function (_message) { return __awaiter(void 0, void 0, void 0, function () {
var message, messageResponse, error_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
message = __assign(__assign({}, _message), { conversation_id: conversation.id });
reduxDispatch(updateLocalMessage(message));
_a.label = 1;
case 1:
_a.trys.push([1, 6, , 7]);
messageResponse = void 0;
if (!doSendMessageRequest) return [3 /*break*/, 3];
return [4 /*yield*/, doSendMessageRequest(message)];
case 2:
messageResponse = _a.sent();
return [3 /*break*/, 5];
case 3: return [4 /*yield*/, client.sendMessage(message)];
case 4:
messageResponse = _a.sent();
_a.label = 5;
case 5:
// 错误提示
if (messageResponse.failed) {
throw new Error(messageResponse.failed_reason);
}
reduxDispatch(updateLocalMessage(messageResponse));
// 更新本地会话显示
reduxDispatch(updateConversation({
account: message.account,
id: message.conversation_id,
last_message: message,
active_at: message.sent_at,
}));
return [3 /*break*/, 7];
case 6:
error_1 = _a.sent();
Toast({ text: error_1.message, type: 'error' });
reduxDispatch(updateLocalMessage(__assign(__assign({}, message), { sending: false, succeeded: false, failed_reason: error_1.message, status: 'failed' })));
throw error_1;
case 7: return [2 /*return*/];
}
});
}); }, [client, conversation, reduxDispatch]);
var deleteMessage = useCallback(function (message) { return __awaiter(void 0, void 0, void 0, function () {
var e_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
return [4 /*yield*/, client.deleteMessage(message.id)];
case 1:
_a.sent();
reduxDispatch(deleteLocalMessage(message));
return [3 /*break*/, 3];
case 2:
e_1 = _a.sent();
throw new Error(e_1);
case 3: return [2 /*return*/];
}
});
}); }, [reduxDispatch]);
var editLocalMessage = useCallback(function (message) {
reduxDispatch(updateLocalMessage(message));
}, [reduxDispatch]);
var revokeMessage = useCallback(function (message) { return __awaiter(void 0, void 0, void 0, function () {
var r, e_2;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
return [4 /*yield*/, client.revokeMessage(message)];
case 1:
r = _a.sent();
editLocalMessage(r !== null && r !== void 0 ? r : message);
return [3 /*break*/, 3];
case 2:
e_2 = _a.sent();
throw new Error(e_2);
case 3:
return [2 /*return*/];
}
});
}); }, [reduxDispatch]);
var resendMessage = useCallback(function (message) { return __awaiter(void 0, void 0, void 0, function () {
var r, e_3;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
return [4 /*yield*/, client.resendMessage(message)];
case 1:
r = _a.sent();
editLocalMessage(r !== null && r !== void 0 ? r : message);
return [3 /*break*/, 3];
case 2:
e_3 = _a.sent();
throw new Error(e_3);
case 3:
return [2 /*return*/];
}
});
}); }, [reduxDispatch]);
var chatActionContextValue = useMemo(function () { return ({
editLocalMessage: editLocalMessage,
sendMessage: sendMessage,
createTextMessage: createTextMessage,
createFaceMessage: createFaceMessage,
createImageMessage: createImageMessage,
createVideoMessage: createVideoMessage,
createFileMessage: createFileMessage,
// createForwardMessage,
createCustomMessage: createCustomMessage,
createAudioMessage: createAudioMessage,
createTextAtMessage: createTextAtMessage,
createLocationMessage: createLocationMessage,
createMergerMessage: createMergerMessage,
operateMessage: operateMessage,
jumpToMessage: jumpToMessage,
jumpToLatestMessage: jumpToLatestMessage,
deleteMessage: deleteMessage,
revokeMessage: revokeMessage,
resendMessage: resendMessage,
setAudioSource: setAudioSource,
loadMore: loadMore,
loadMoreNewer: loadMoreNewer,
}); }, [
editLocalMessage,
sendMessage,
createTextMessage,
createFaceMessage,
createImageMessage,
createVideoMessage,
createFileMessage,
// createForwardMessage,
createCustomMessage,
createAudioMessage,
createTextAtMessage,
createLocationMessage,
createMergerMessage,
operateMessage,
jumpToLatestMessage,
deleteMessage,
revokeMessage,
resendMessage,
setAudioSource,
loadMore,
loadMoreNewer,
]);
var componentContextValue = useMemo(function () { return ({
UIMessage: UIMessage$1 || UIMessage,
MessageContext: MessageContext,
InputPlugins: InputPlugins,
MessagePlugins: MessagePlugins,
UIChatHeader: UIChatHeader$1,
UIMessageInput: UIMessageInput$1,
InputQuote: InputQuote,
TriggerProvider: TriggerProvider,
}); }, []);
var emojiConfig = {
commonEmoji: commonEmoji,
defaultMinimalEmojis: defaultMinimalEmojis,
emojiData: emojiData,
emojiSetDef: emojiSetDef,
};
var emojiContextValue = useMemo(function () { return ({
Emoji: props.Emoji,
emojiConfig: emojiConfig,
// EmojiIndex: props.EmojiIndex,
EmojiPicker: props.EmojiPicker,
}); }, []);
return (React__default.createElement("div", { className: "chat" },
React__default.createElement(ChatStateContextProvider, { value: chatStateContextValue },
React__default.createElement(ChatActionProvider, { value: chatActionContextValue },
React__default.createElement(EmojiProvider, { value: emojiContextValue },
React__default.createElement(ComponentProvider, { value: componentContextValue }, children || (React__default.createElement(React__default.Fragment, null,
React__default.createElement(UIChatHeader, null),
React__default.createElement(UIMessageList, null),
React__default.createElement(UIMessageInput, null)))))))));
};
var UIChat = function (props) {
var propConversation = props.conversation, _a = props.EmptyPlaceholder, EmptyPlaceholder = _a === void 0 ? null : _a;
var contextConversation = useUIKit('UIChat').activeConversation;
var conversation = propConversation !== null && propConversation !== void 0 ? propConversation : contextConversation;
var className = 'uim-conversation'; // clsx(chatClass, theme, conversationClass);
if (!(conversation === null || conversation === void 0 ? void 0 : conversation.id)) {
return React__default.createElement("div", { className: className }, EmptyPlaceholder);
}
return React__default.createElement(UIChatInner, __assign({}, props, { conversation: conversation, key: conversation.id }));
};
export { UIChat };
//# sourceMappingURL=UIChat.js.map