123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299 |
- <template>
- <div class="chat">
- <div :class="['tui-chat', !isPC && 'tui-chat-h5']">
- <div
- v-if="!currentConversationID"
- :class="['tui-chat-default', !isPC && 'tui-chat-h5-default']"
- >
- <slot />
- </div>
- <div v-if="currentConversationID" :class="['tui-chat', !isPC && 'tui-chat-h5']">
- <ChatHeader
- :class="[
- 'tui-chat-header',
- !isPC && 'tui-chat-H5-header',
- isUniFrameWork && 'tui-chat-uniapp-header',
- ]"
- :headerExtensionList="headerExtensionList"
- @closeChat="closeChat"
- />
- <Forward @toggleMultipleSelectMode="toggleMultipleSelectMode" />
- <MessageList
- ref="messageListRef"
- :class="['tui-chat-message-list', !isPC && 'tui-chat-h5-message-list']"
- :isGroup="isGroup"
- :groupID="groupID"
- :isNotInGroup="isNotInGroup"
- :isMultipleSelectMode="isMultipleSelectMode"
- @handleEditor="handleEditor"
- @closeInputToolBar="() => changeToolbarDisplayType('none')"
- @toggleMultipleSelectMode="toggleMultipleSelectMode"
- />
- <div
- v-if="isNotInGroup"
- :class="{
- 'tui-chat-leave-group': true,
- 'tui-chat-leave-group-mobile': isMobile,
- }"
- >
- {{ leaveGroupReasonText }}
- </div>
- <MultipleSelectPanel
- v-else-if="isMultipleSelectMode"
- @oneByOneForwardMessage="oneByOneForwardMessage"
- @mergeForwardMessage="mergeForwardMessage"
- @toggleMultipleSelectMode="toggleMultipleSelectMode"
- />
- <template v-else>
- <MessageInputToolbar
- v-if="isInputToolbarShow"
- :class="[
- 'tui-chat-message-input-toolbar',
- !isPC && 'tui-chat-h5-message-input-toolbar',
- isUniFrameWork && 'tui-chat-uni-message-input-toolbar',
- ]"
- :displayType="inputToolbarDisplayType"
- @insertEmoji="insertEmoji"
- @changeToolbarDisplayType="changeToolbarDisplayType"
- @scrollToLatestMessage="scrollToLatestMessage"
- />
- <MessageInput
- ref="messageInputRef"
- :class="[
- 'tui-chat-message-input',
- !isPC && 'tui-chat-h5-message-input',
- isUniFrameWork && 'tui-chat-uni-message-input',
- isWeChat && 'tui-chat-wx-message-input',
- ]"
- :enableAt="featureConfig.InputMention"
- :isMuted="false"
- :muteText="TUITranslateService.t('TUIChat.您已被管理员禁言')"
- :placeholder="TUITranslateService.t('TUIChat.请输入消息')"
- :inputToolbarDisplayType="inputToolbarDisplayType"
- @changeToolbarDisplayType="changeToolbarDisplayType"
- />
- </template>
- </div>
- <!-- Group Management -->
- <div
- v-if="
- !isNotInGroup && isUniFrameWork && isGroup && headerExtensionList.length > 0
- "
- class="group-profile"
- @click="handleGroup"
- >
- {{ headerExtensionList[0].text }}
- </div>
- </div>
- </div>
- </template>
- <script lang="ts" setup>
- import { ref, onMounted, onUnmounted, computed } from "../../adapter-vue";
- import TUIChatEngine, {
- TUITranslateService,
- TUIConversationService,
- TUIStore,
- StoreName,
- IMessageModel,
- IConversationModel,
- } from "@tencentcloud/chat-uikit-engine";
- import TUICore, { TUIConstants, ExtensionInfo } from "@tencentcloud/tui-core";
- import ChatHeader from "./chat-header/index.vue";
- import MessageList from "./message-list/index.vue";
- import MessageInput from "./message-input/index.vue";
- import MultipleSelectPanel from "./mulitple-select-panel/index.vue";
- import Forward from "./forward/index.vue";
- import MessageInputToolbar from "./message-input-toolbar/index.vue";
- import { isPC, isWeChat, isUniFrameWork, isMobile } from "../../utils/env";
- import { ToolbarDisplayType } from "../../interface";
- import TUIChatConfig from "./config";
- // @Start uniapp use Chat only
- import { onLoad, onUnload } from "@dcloudio/uni-app";
- import { initChat, logout } from "./entry-chat-only.ts";
- onLoad((options) => {
- initChat(options);
- });
- onUnload(() => {
- // Whether logout is decided by yourself when the page is unloaded. The default is false.
- logout(false)
- .then(() => {
- // Handle success result from promise.then when you set true.
- })
- .catch(() => {
- // handle error
- });
- });
- // @End uniapp use Chat only
- const emits = defineEmits(["closeChat"]);
- const groupID = ref(undefined);
- const isGroup = ref(false);
- const isNotInGroup = ref(false);
- const notInGroupReason = ref<number>();
- const currentConversationID = ref();
- const isMultipleSelectMode = ref(false);
- const inputToolbarDisplayType = ref<ToolbarDisplayType>("none");
- const messageInputRef = ref();
- const messageListRef = ref<InstanceType<typeof MessageList>>();
- const headerExtensionList = ref<ExtensionInfo[]>([]);
- const featureConfig = TUIChatConfig.getFeatureConfig();
- onMounted(() => {
- TUIStore.watch(StoreName.CONV, {
- currentConversationID: onCurrentConversationIDUpdate,
- currentConversation: onCurrentConversationUpdate,
- });
- });
- onUnmounted(() => {
- TUIStore.unwatch(StoreName.CONV, {
- currentConversationID: onCurrentConversationIDUpdate,
- currentConversation: onCurrentConversationUpdate,
- });
- reset();
- });
- const isInputToolbarShow = computed<boolean>(() => {
- return isUniFrameWork ? inputToolbarDisplayType.value !== "none" : true;
- });
- const leaveGroupReasonText = computed<string>(() => {
- let text = "";
- switch (notInGroupReason.value) {
- case 4:
- text = TUITranslateService.t("TUIChat.您已被管理员移出群聊");
- break;
- case 5:
- text = TUITranslateService.t("TUIChat.该群聊已被解散");
- break;
- case 8:
- text = TUITranslateService.t("TUIChat.您已退出该群聊");
- break;
- default:
- text = TUITranslateService.t("TUIChat.您已退出该群聊");
- break;
- }
- return text;
- });
- const reset = () => {
- TUIConversationService.switchConversation("");
- };
- const closeChat = (conversationID: string) => {
- emits("closeChat", conversationID);
- reset();
- };
- const insertEmoji = (emojiObj: object) => {
- messageInputRef.value?.insertEmoji(emojiObj);
- };
- const handleEditor = (message: IMessageModel, type: string) => {
- if (!message || !type) return;
- switch (type) {
- case "reference":
- // todo
- break;
- case "reply":
- // todo
- break;
- case "reedit":
- if (message?.payload?.text) {
- messageInputRef?.value?.reEdit(message?.payload?.text);
- }
- break;
- default:
- break;
- }
- };
- const handleGroup = () => {
- headerExtensionList.value[0].listener.onClicked({ groupID: groupID.value });
- };
- function changeToolbarDisplayType(type: ToolbarDisplayType) {
- inputToolbarDisplayType.value = inputToolbarDisplayType.value === type ? "none" : type;
- if (inputToolbarDisplayType.value !== "none" && isUniFrameWork) {
- uni.$emit("scroll-to-bottom");
- }
- }
- function scrollToLatestMessage() {
- messageListRef.value?.scrollToLatestMessage();
- }
- function toggleMultipleSelectMode(visible?: boolean) {
- isMultipleSelectMode.value =
- visible === undefined ? !isMultipleSelectMode.value : visible;
- }
- function mergeForwardMessage() {
- messageListRef.value?.mergeForwardMessage();
- }
- function oneByOneForwardMessage() {
- messageListRef.value?.oneByOneForwardMessage();
- }
- function onCurrentConversationUpdate(conversation: IConversationModel) {
- if (conversation?.operationType > 0) {
- headerExtensionList.value = [];
- isNotInGroup.value = true;
- /**
- * 4 - be removed from the group
- * 5 - group is dismissed
- * 8 - quit group
- */
- notInGroupReason.value = conversation?.operationType;
- } else {
- isNotInGroup.value = false;
- notInGroupReason.value = undefined;
- }
- }
- function onCurrentConversationIDUpdate(conversationID: string) {
- if (currentConversationID.value === conversationID) {
- return;
- }
- isGroup.value = false;
- let conversationType = TUIChatEngine.TYPES.CONV_C2C;
- if (conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP)) {
- conversationType = TUIChatEngine.TYPES.CONV_GROUP;
- isGroup.value = true;
- groupID.value = conversationID.replace(TUIChatEngine.TYPES.CONV_GROUP, "");
- }
- headerExtensionList.value = [];
- currentConversationID.value = conversationID;
- isMultipleSelectMode.value = false;
- // Initialize chatType
- TUIChatConfig.setChatType(conversationType);
- // While converstaion change success, notify callkit and roomkit、or other components.
- TUICore.notifyEvent(
- TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED,
- TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED,
- { groupID: groupID.value }
- );
- // The TUICustomerServicePlugin plugin determines if the current conversation is a customer service conversation, then sets chatType and activates the conversation.
- TUICore.callService({
- serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
- method: TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION,
- params: { conversationID: conversationID },
- });
- // Get chat header extensions
- if (TUIChatConfig.getChatType() === TUIConstants.TUIChat.TYPE.GROUP) {
- headerExtensionList.value = TUICore.getExtensionList(
- TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID
- );
- }
- }
- </script>
- <style scoped lang="scss" src="./style/index.scss"></style>
|