@uimkit/uikit-react
Version:
<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>
300 lines (293 loc) • 16.1 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('react');
var UIMessageInput = require('../UIMessageInput/UIMessageInput.js');
require('../EmoticonItem/EmoticonItem.js');
require('emoji-mart');
require('../../context/MessageInputContext.js');
var EmojiContext = require('../../context/EmojiContext.js');
require('../../context/TranslationContext.js');
var UIKitContext = require('../../context/UIKitContext.js');
var ComponentContext = require('../../context/ComponentContext.js');
var ChatActionContext = require('../../context/ChatActionContext.js');
require('../../context/UIMessageContext.js');
var ChatStateContext = require('../../context/ChatStateContext.js');
require('../UICommandItem/UICommandItem.js');
require('../../node_modules/.pnpm/lodash.throttle@4.1.1/node_modules/lodash.throttle/index.js');
require('../../types/models.js');
require('../../types/events.js');
require('../UIUserItem/UIUserItem.js');
var data = require('@emoji-mart/data');
require('../UIMessageInput/hooks/useHandleQuoteMessage.js');
require('../../constants.js');
var UIMessageList = require('../UIMessageList/UIMessageList.js');
require('../EmptyStateIndicator/EmptyStateIndicator.js');
require('../UIMessageList/MessageNotification.js');
require('../Loading/LoadingErrorIndicator.js');
require('../Loading/LoadingIndicator.js');
require('../DateSeparator/DateSeparator.js');
var UIMessage = require('../UIMessage/UIMessage.js');
require('../UIMessage/MessagePlugins.js');
require('../UIMessage/MessageStatus.js');
require('../UIMessage/MessageProgress.js');
var UIChatHeader = require('../UIChatHeader/UIChatHeader.js');
require('../Icon/type.js');
require('../Icon/config.js');
require('../Plugins/index.js');
var ChatState = require('./ChatState.js');
var useCreateChatStateContext = require('./hooks/useCreateChatStateContext.js');
var useHandleMessage = require('./hooks/useHandleMessage.js');
var index = require('../Toast/index.js');
var useCreateMessage = require('../../hooks/useCreateMessage.js');
var emojiData = require('./emojiData.js');
var commands = require('../../store/messages/commands.js');
var useDispatch = require('../../store/useDispatch.js');
require('../../store/conversations/actions.js');
require('../../node_modules/.pnpm/lodash.flatten@4.4.0/node_modules/lodash.flatten/index.js');
require('../../node_modules/.pnpm/lodash.some@4.6.0/node_modules/lodash.some/index.js');
require('redux');
require('../../store/rootReducer.js');
require('../../store/accounts/actions.js');
require('../../store/accounts/selectors.js');
require('../../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/invariant.js');
require('i18next');
var actions = require('../../store/messages/actions.js');
require('../../store/contacts/actions.js');
var commands$1 = require('../../store/conversations/commands.js');
var useConversationState = require('../../hooks/useConversationState.js');
require('react-redux');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var data__default = /*#__PURE__*/_interopDefaultLegacy(data);
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$1 = _a === void 0 ? data__default["default"] : _a, doSendMessageRequest = props.doSendMessageRequest, conversation = props.conversation, children = props.children;
var client = UIKitContext.useUIKit('UIChat').client;
var _b = React.useState(conversation.config), chatConfig = _b[0], setChatConfig = _b[1];
var _c = React.useReducer(ChatState.chatReducer, tslib.__assign({}, ChatState.initialState)), _state = _c[0], dispatch = _c[1];
var reduxDispatch = useDispatch.useDispatch();
var _d = useConversationState.useConversationState(conversation.id), loadMore = _d.loadMore, loadMoreNewer = _d.loadMoreNewer, jumpToMessage = _d.jumpToMessage, conversationState = tslib.__rest(_d, ["loadMore", "loadMoreNewer", "jumpToMessage"]);
var state = React.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 tslib.__assign(tslib.__assign({}, _state), { hasMore: hasMore, hasMoreNewer: hasMoreNewer, loadingMore: loadingMore, loadingMoreNewer: loadingMoreNewer, messages: messages, highlightedMessageId: highlightedMessageId, suppressAutoscroll: suppressAutoscroll });
}, [_state, conversationState]);
var messageListRef = React.useRef(null);
var chatStateContextValue = useCreateChatStateContext(tslib.__assign({ client: client, conversation: conversation, chatConfig: chatConfig, messageListRef: messageListRef, messageConfig: messageConfig, UIMessageInputConfig: UIMessageInputConfig, UIMessageListConfig: UIMessageListConfig }, state));
var _e = useHandleMessage.useHandleMessage({
state: state,
dispatch: dispatch,
}), operateMessage = _e.operateMessage, setAudioSource = _e.setAudioSource;
var _f = useCreateMessage.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;
React.useLayoutEffect(function () {
// 监听 conversation 内部事件
setChatConfig(conversation.config);
return function () {
// 解除监听 conversation 内部事件
};
}, [conversation.id]);
var jumpToLatestMessage = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
return tslib.__generator(this, function (_a) {
// 不使用 redux
{
// 使用 redux
reduxDispatch({
type: actions.ConversationActionType.JumpToLatestMessage,
conversation: conversation,
});
}
return [2 /*return*/];
});
}); };
var sendMessage = React.useCallback(function (_message) { return tslib.__awaiter(void 0, void 0, void 0, function () {
var message, messageResponse, error_1;
return tslib.__generator(this, function (_a) {
switch (_a.label) {
case 0:
message = tslib.__assign(tslib.__assign({}, _message), { conversation_id: conversation.id });
reduxDispatch(commands.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(commands.updateLocalMessage(messageResponse));
// 更新本地会话显示
reduxDispatch(commands$1.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();
index.Toast({ text: error_1.message, type: 'error' });
reduxDispatch(commands.updateLocalMessage(tslib.__assign(tslib.__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 = React.useCallback(function (message) { return tslib.__awaiter(void 0, void 0, void 0, function () {
var e_1;
return tslib.__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(commands.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 = React.useCallback(function (message) {
reduxDispatch(commands.updateLocalMessage(message));
}, [reduxDispatch]);
var revokeMessage = React.useCallback(function (message) { return tslib.__awaiter(void 0, void 0, void 0, function () {
var r, e_2;
return tslib.__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 = React.useCallback(function (message) { return tslib.__awaiter(void 0, void 0, void 0, function () {
var r, e_3;
return tslib.__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 = React.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 = React.useMemo(function () { return ({
UIMessage: UIMessage$1 || UIMessage.UIMessage,
MessageContext: MessageContext,
InputPlugins: InputPlugins,
MessagePlugins: MessagePlugins,
UIChatHeader: UIChatHeader$1,
UIMessageInput: UIMessageInput$1,
InputQuote: InputQuote,
TriggerProvider: TriggerProvider,
}); }, []);
var emojiConfig = {
commonEmoji: emojiData.commonEmoji,
defaultMinimalEmojis: emojiData.defaultMinimalEmojis,
emojiData: emojiData$1,
emojiSetDef: emojiData.emojiSetDef,
};
var emojiContextValue = React.useMemo(function () { return ({
Emoji: props.Emoji,
emojiConfig: emojiConfig,
// EmojiIndex: props.EmojiIndex,
EmojiPicker: props.EmojiPicker,
}); }, []);
return (React__default["default"].createElement("div", { className: "chat" },
React__default["default"].createElement(ChatStateContext.ChatStateContextProvider, { value: chatStateContextValue },
React__default["default"].createElement(ChatActionContext.ChatActionProvider, { value: chatActionContextValue },
React__default["default"].createElement(EmojiContext.EmojiProvider, { value: emojiContextValue },
React__default["default"].createElement(ComponentContext.ComponentProvider, { value: componentContextValue }, children || (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(UIChatHeader.UIChatHeader, null),
React__default["default"].createElement(UIMessageList.UIMessageList, null),
React__default["default"].createElement(UIMessageInput.UIMessageInput, null)))))))));
};
var UIChat = function (props) {
var propConversation = props.conversation, _a = props.EmptyPlaceholder, EmptyPlaceholder = _a === void 0 ? null : _a;
var contextConversation = UIKitContext.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["default"].createElement("div", { className: className }, EmptyPlaceholder);
}
return React__default["default"].createElement(UIChatInner, tslib.__assign({}, props, { conversation: conversation, key: conversation.id }));
};
exports.UIChat = UIChat;
//# sourceMappingURL=UIChat.js.map