@ndscnj/roomkit-web-vue3 3.2.0

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-list/style/index.scss

@@ -0,0 +1,11 @@
+@import "../../../../assets/styles/common";
+@import "./color";
+@import "./web";
+@import "./h5";
+
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-list/style/web.scss

@@ -0,0 +1,177 @@
+.tui-chat {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &-main {
+    min-height: 0;
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .tui-chat-safe-tips {
+      padding: 12px 20px;
+      background-color: rgba(255, 149, 0, 0.1);
+      color: #ff8c39;
+      line-height: 18px;
+      font-family: PingFangSC-Regular;
+      font-style: normal;
+      font-weight: 400;
+      text-align: justify;
+      font-size: 12px;
+
+      a {
+        color: #006eff;
+        float: right;
+      }
+    }
+
+    .tui-chat-application-tips {
+      text-align: center;
+      width: 100%;
+      background: #fce4d3;
+      padding: 2px;
+      font-size: 12px;
+    }
+
+    .application-tips-btn {
+      color: #006eff;
+      padding-left: 10px;
+    }
+
+    .tui-message-list {
+      flex: 1;
+      height: 100%;
+      overflow: hidden auto;
+
+      .message-more {
+        font-size: 14px;
+        padding: 5px;
+        text-align: center;
+      }
+
+      .to-bottom-tip {
+        position: sticky;
+        bottom: 10px;
+        left: 100%;
+        margin-right: 15px;
+        width: 92px;
+        height: 28px;
+        padding: 0 5px;
+        background: #fff;
+        border: 1px solid #e0e0e0;
+        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        border-radius: 3px;
+        cursor: pointer;
+
+        &-text {
+          font-family: PingFangSC-Regular;
+          font-weight: 400;
+          font-size: 10px;
+          color: #147aff;
+          letter-spacing: 0;
+          text-align: center;
+          padding-left: 3px;
+        }
+      }
+
+      .message-li {
+        &:first-child {
+          margin-top: 5px;
+        }
+
+        display: flex;
+        flex-direction: column;
+
+        .message-item {
+          display: flex;
+          position: relative;
+          flex-direction: column;
+
+          .message-tool {
+            z-index: 5;
+            position: absolute;
+            cursor: pointer;
+            transform: translateY(-100%);
+          }
+
+          .message-tool-out {
+            right: 30px;
+            left: auto;
+          }
+
+          .message-tool-in {
+            left: 30px;
+            right: auto;
+          }
+
+          .message-tool-bottom {
+            z-index: 5;
+            bottom: 0;
+            transform: translateY(100%);
+          }
+        }
+
+        .message-label {
+          max-width: 50px;
+        }
+      }
+
+      .right {
+        flex-direction: row-reverse;
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  .disabled {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.image-dialog {
+  position: fixed;
+  z-index: 5;
+  width: 100vw;
+  height: calc(100vh - 63px);
+  top: 63px;
+  left: 0;
+
+  header {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 140px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #9a999c;
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/mulitple-select-panel/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div
+    :class="{
+      'mulitple-select-panel': true,
+      'mulitple-select-panel-mobile': isMobile,
+    }"
+  >
+    <div
+      class="forward-button"
+      @click="oneByOneForwardMessage"
+    >
+      <Icon
+        :file="ForwardEachIcon"
+        :size="iconSize"
+      />
+      <span
+        :class="{
+          'forward-button-text': true,
+          'forward-button-text-mobile': isMobile,
+        }"
+      >{{ TUITranslateService.t('TUIChat.逐条转发') }}</span>
+    </div>
+    <div
+      class="forward-button"
+      @click="mergeForwardMessage"
+    >
+      <Icon
+        :file="ForwardMergeIcon"
+        :size="iconSize"
+      />
+      <span
+        :class="{
+          'forward-button-text': true,
+          'forward-button-text-mobile': isMobile,
+        }"
+      >{{ TUITranslateService.t('TUIChat.合并转发') }}</span>
+    </div>
+    <div
+      class="forward-button"
+      @click="cancelMultipleSelect"
+    >
+      <Icon
+        class="cancel-button-icon"
+        :file="AddIcon"
+        :size="iconSize"
+      />
+      <span
+        :class="{
+          'forward-button-text': true,
+          'forward-button-text-mobile': isMobile,
+        }"
+      >
+        {{ TUITranslateService.t('TUIChat.取消') }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from '../../../adapter-vue';
+import {
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../common/Icon.vue';
+import ForwardEachIcon from '../../../assets/icon/forward-each.svg';
+import ForwardMergeIcon from '../../../assets/icon/forward-merge.svg';
+import AddIcon from '../../../assets/icon/add-circle.svg';
+import { isMobile } from '../../../utils/env';
+
+interface IEmits {
+  (key: 'oneByOneForwardMessage'): void;
+  (key: 'mergeForwardMessage'): void;
+  (key: 'toggleMultipleSelectMode'): void;
+}
+
+const emits = defineEmits<IEmits>();
+
+const iconSize = ref(isMobile ? '25px' : '30px');
+
+function oneByOneForwardMessage() {
+  emits('oneByOneForwardMessage');
+}
+
+function mergeForwardMessage() {
+  emits('mergeForwardMessage');
+}
+
+function cancelMultipleSelect() {
+  emits('toggleMultipleSelectMode');
+}
+</script>
+
+<style lang="scss" scoped>
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.mulitple-select-panel {
+  height: 196px;
+  border-top: 1px solid #ebebeb;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #EBF0F6;
+
+  &-mobile {
+    height: 64px;
+    padding-bottom: 15px;
+    flex-direction: row;
+    align-items: flex-end;
+  }
+}
+
+.forward-button {
+  justify-content: center;
+  align-items: center;
+
+  &-text {
+    margin-top: 8px;
+    font-size: 12px;
+
+    &-mobile {
+      margin-top: 2px;
+    }
+  }
+
+  .cancel-button-icon {
+    transform: rotate(45deg);
+  }
+}
+</style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/offlinePushInfoManager/const.ts

@@ -0,0 +1,17 @@
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+export const DEFAULT_DESC: any = {
+  [TUIChatEngine.TYPES.MSG_TEXT]: '[文本]',
+  [TUIChatEngine.TYPES.MSG_FACE]: '[动画表情]',
+  [TUIChatEngine.TYPES.MSG_IMAGE]: '[图片]',
+  [TUIChatEngine.TYPES.MSG_FILE]: '[文件]',
+  [TUIChatEngine.TYPES.MSG_AUDIO]: '[语音]',
+  [TUIChatEngine.TYPES.MSG_VIDEO]: '[视频]',
+  [TUIChatEngine.TYPES.MSG_LOCATION]: '[地理位置]',
+  [TUIChatEngine.TYPES.MSG_MERGER]: '[聊天记录]',
+  [TUIChatEngine.TYPES.MSG_CUSTOM]: '[自定义消息]',
+};
+
+export enum PUSH_SCENE {
+  CHAT = 'chat',
+  CALL = 'call',
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/offlinePushInfoManager/index.ts

@@ -0,0 +1,6 @@
+import OfflinePushInfoManager from './offlinePushInfoManager';
+
+export * from './const';
+export * from './interface';
+
+export default OfflinePushInfoManager.getInstance();

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/offlinePushInfoManager/info.ts

@@ -0,0 +1,21 @@
+import { IChatOfflinePushInfo, ICallOfflinePushInfo } from './interface';
+
+export const chatOfflinePushInfo: IChatOfflinePushInfo = {
+  androidInfo: {
+    sound: 'private_ring.mp3',
+    XiaoMiChannelID: 'high_custom_1',
+    OPPOChannelID: 'tuikit',
+  },
+  apnsInfo: {
+    sound: '01.caf',
+    image: 'https://web.sdk.qcloud.com/im/demo/latest/faviconnew.png',
+  },
+};
+
+export const callOfflinePushInfo: ICallOfflinePushInfo = {
+  title: 'call',
+  description: 'you have a call',
+  androidSound: 'private_ring',
+  androidOPPOChannelID: 'tuikit',
+  iOSSound: '01.caf',
+};

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/offlinePushInfoManager/interface.ts

@@ -0,0 +1,49 @@
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+
+export interface IOfflinePushInfoCreateParams {
+  conversation: IConversationModel;
+  payload?: any;
+  messageType: string;
+}
+
+export interface IOfflinePushApnsInfo {
+  sound?: string;
+  ignoreIOSBadge?: boolean;
+  disableVoipPush?: boolean;
+  image?: string;
+}
+
+export interface IOfflinePushAndroidInfo {
+  sound?: string;
+  XiaoMiChannelID?: string;
+  OPPOChannelID?: string;
+  FCMChannelID?: string;
+  VIVOClassification?: number;
+  VIVOCategory?: string;
+  HuaWeiCategory?: string;
+  HuaWeiImage?: string;
+  HonorImage?: string;
+  GoogleImage?: string;
+}
+
+// https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#sendMessage
+export interface IChatOfflinePushInfo {
+  title?: string;
+  description?: string;
+  extension?: string;
+  androidInfo?: IOfflinePushAndroidInfo;
+  apnsInfo?: IOfflinePushApnsInfo;
+}
+
+// doc: https://cloud.tencent.com/document/product/269/105713
+export interface ICallOfflinePushInfo {
+  title?: string;
+  description?: string;
+  iOSSound?: string;
+  androidSound?: string;
+  androidOPPOChannelID?: string;
+  androidXiaoMiChannelID?: string;
+  androidFCMChannelID?: string;
+  ignoreIOSBadge?: string;
+  isDisablePush?: string;
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/offlinePushInfoManager/offlinePushInfoManager.ts

@@ -0,0 +1,76 @@
+import TUIChatEngine, { IConversationModel, StoreName, TUIStore, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { transformTextWithKeysToEmojiNames } from '../emoji-config';
+import {
+  IChatOfflinePushInfo,
+  IOfflinePushInfoCreateParams,
+} from './interface';
+import { chatOfflinePushInfo, callOfflinePushInfo } from './info';
+import { DEFAULT_DESC, PUSH_SCENE } from './const';
+
+class OfflinePushInfoManager {
+  private name = 'OfflinePushInfoManager';
+  private static instance: OfflinePushInfoManager | null = null;
+
+  private offlinePushInfo: any = {};
+
+  private constructor() {
+    this.offlinePushInfo = {
+      [PUSH_SCENE.CHAT]: chatOfflinePushInfo,
+      [PUSH_SCENE.CALL]: callOfflinePushInfo,
+    };
+  }
+
+  public static getInstance(): OfflinePushInfoManager {
+    if (!OfflinePushInfoManager.instance) {
+      OfflinePushInfoManager.instance = new OfflinePushInfoManager();
+    }
+    return OfflinePushInfoManager.instance;
+  }
+
+  public getOfflinePushInfo(scene: PUSH_SCENE) {
+    if (!Object.values(PUSH_SCENE).includes(scene)) {
+      console.error(`${this.name} getOfflinePushInfo scene: ${scene} is invalid`);
+      return null;
+    }
+    return this.offlinePushInfo[scene];
+  }
+
+  private genTitle(conversation: IConversationModel, userInfo: any) {
+    let title = conversation?.getShowName();
+    if (conversation.type === TUIChatEngine.TYPES.CONV_C2C) {
+      title = userInfo?.nick || userInfo?.userID;
+    }
+    return title;
+  }
+
+  private genDesc(messageType: string, payload: any) {
+    let desc = '';
+    if (messageType === TUIChatEngine.TYPES.MSG_TEXT) {
+      desc = transformTextWithKeysToEmojiNames(payload.text);
+    }
+    if (messageType === TUIChatEngine.TYPES.MSG_CUSTOM) {
+      desc = payload.description;
+    }
+    return desc || TUITranslateService.t(`TUIChat.${DEFAULT_DESC[messageType]}`);
+  }
+
+  public create(options: IOfflinePushInfoCreateParams): IChatOfflinePushInfo {
+    const { conversation, messageType = '', payload = {} } = options || {};
+    const userInfo = TUIStore.getData(StoreName.USER, 'userProfile');
+    const entity = {
+      sender: conversation.type === TUIChatEngine.TYPES.CONV_GROUP ? conversation.groupProfile?.groupID : userInfo?.userID,
+      nickName: userInfo?.nick,
+      chatType: conversation.type === TUIChatEngine.TYPES.CONV_GROUP ? 2 : 1,
+      version: 1,
+      action: 1,
+    };
+    return {
+      title: this.genTitle(conversation, userInfo),
+      description: this.genDesc(messageType, payload),
+      extension: JSON.stringify({ entity }),
+      ...this.offlinePushInfo[PUSH_SCENE.CHAT],
+    };
+  }
+}
+
+export default OfflinePushInfoManager;

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/server.ts

@@ -0,0 +1,91 @@
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import {
+  IMessageModel,
+  TUIStore,
+  StoreName,
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
+import TUIChatConfig from './config';
+
+export default class TUIChatServer {
+  public currentConversationID: string = '';
+  public currentMessageList: IMessageModel[] = [];
+
+  constructor() {
+    // register service
+    TUICore.registerService(TUIConstants.TUIChat.SERVICE.NAME, this);
+    // register event
+    TUICore.registerEvent(TUIConstants.TUITheme.EVENT.THEME_CHANGED, TUIConstants.TUITheme.EVENT_SUB_KEY.CHANGE_SUCCESS, this);
+    TUICore.registerEvent(TUIConstants.TUIChat.EVENT.CHAT_TYPE_CHANGED, TUIConstants.TUIChat.EVENT_SUB_KEY.CHANGE_SUCCESS, this);
+    // watch current conversationID
+    TUIStore.watch(StoreName.CONV, {
+      currentConversationID: (id: string) => {
+        this.currentConversationID = id;
+      },
+    });
+  }
+
+  public onCall(method: string, params: any, callback: any): any {
+    let message;
+    switch (method) {
+      case TUIConstants.TUIChat.SERVICE.METHOD.UPDATE_MESSAGE_LIST:
+        message = params.message;
+        // Two screen-up situations
+        // 1. If the call message conversationID is currentConversation,
+        // You need to use UPDATE_MESSAGE_LIST to update the messageList of TUIStore in the engine to display it on the screen
+        // (because you cannot get the messages you sent at this time)
+        // 2. If the call message conversationID is not currentConversation,
+        // The next time you switch to the conversation where the call message is located, getMessageList can get all the call messages you sent
+        // No need to process here
+        if (message?.conversationID === this.currentConversationID) {
+          TUIChatService.updateMessageList([message], 'push');
+        }
+        break;
+      case TUIConstants.TUIChat.SERVICE.METHOD.SEND_CUSTOM_MESSAGE:
+        TUIChatService.sendCustomMessage(params).then((res: any) => {
+          callback && callback(res);
+        });
+        break;
+      case TUIConstants.TUIChat.SERVICE.METHOD.SEND_TEXT_MESSAGE:
+        TUIChatService.sendTextMessage(params).then((res: any) => {
+          callback && callback(res);
+        });
+        break;
+      case TUIConstants.TUIChat.SERVICE.METHOD.SET_CHAT_TYPE:
+        TUIChatConfig.setChatType(params?.chatType);
+        break;
+      case TUIConstants.TUIChat.SERVICE.METHOD.CLOSE_MESSAGE_POP_MENU:
+        TUIStore.update(StoreName.CUSTOM, 'isShowMessagePopMenu', false);
+        break;
+      case TUIConstants.TUIChat.SERVICE.METHOD.UPDATE_MESSAGE_INFO:
+        TUIChatService.updateMessageInfo(params?.userInfo);
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+ * Listen for the success notification.
+ */
+  public onNotifyEvent(eventName: string, subKey: string, params?: Record<string, any>) {
+    if (eventName === TUIConstants.TUITheme.EVENT.THEME_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUITheme.EVENT_SUB_KEY.CHANGE_SUCCESS:
+          if (params?.theme) {
+            TUIChatConfig.setTheme(params.theme.toLowerCase()); // Room use 'DARK' or 'LIGHT'
+          }
+          break;
+      }
+    }
+    if (eventName === TUIConstants.TUIChat.EVENT.CHAT_TYPE_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUIChat.EVENT_SUB_KEY.CHANGE_SUCCESS:
+          if (params?.chatType) {
+            TUIChatConfig.setChatType(params?.chatType);
+          }
+          break;
+      }
+    }
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/style/h5.scss

@@ -0,0 +1,47 @@
+.chat {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+}
+
+.tui-chat-h5 {
+  &-message-list {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+  }
+
+  &-message-input {
+    height: auto;
+    padding: 10px 10px 0;
+    border-top: 1px solid #eee;
+  }
+
+  &-message-input-toolbar {
+    order: 1;
+    border: none;
+  }
+}
+
+.tui-chat-uniapp {
+  &-header {
+    display: none;
+  }
+}
+
+.group-profile {
+  position: absolute;
+  top: 14%;
+  right: 0;
+  width: 50px;
+  height: 30px;
+  line-height: 30px;
+  color: #000;
+  font-size: 10px;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  padding-left: 15px;
+  z-index: 100;
+  background-color: #ccc;
+  opacity: 0.5;
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/style/index.scss

@@ -0,0 +1,12 @@
+@import '../../../assets/styles/common';
+@import './web';
+@import './h5';
+@import './uni';
+@import './wx';
+
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/style/uni.scss

@@ -0,0 +1,10 @@
+.tui-chat-uni {
+  &-message-input {
+    max-height: 370px;
+    padding: 10px;
+  }
+
+  &-message-input-toolbar {
+    z-index: 100;
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/style/web.scss

@@ -0,0 +1,46 @@
+.tui-chat {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &-default {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+  }
+
+  &-header {
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+  }
+
+  &-message-list {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+  }
+
+  &-leave-group {
+    font-size: 14px;
+    height: 160px;
+    border-top: 1px solid #efefef;
+    justify-content: center;
+    align-items: center;
+
+    &-mobile {
+      height: 50px;
+    }
+  }
+
+  &-message-input {
+    height: 160px;
+    display: flex;
+  }
+}