@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.3

package/src/TUIRoom/components/Chat/ChatKit/components/TUIConversation/conversation-network/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    v-if="isNotNetwork"
+    class="network"
+  >
+    <i class="icon icon-error">!</i>
+    <p class="network-content">
+      {{
+        TUITranslateService.t("TUIConversation.网络异常，请您检查网络设置")
+      }}
+    </p>
+  </div>
+</template>
+<script lang="ts" setup>
+import TUIChatEngine, {
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import {
+  ref,
+} from '../../../adapter-vue';
+
+const isNotNetwork = ref(false);
+
+TUIStore.watch(StoreName.USER, {
+  netStateChange: (value: string) => {
+    isNotNetwork.value = (value === TUIChatEngine.TYPES.NET_STATE_DISCONNECTED);
+  },
+});
+</script>
+
+<style lang="scss" scoped src="../style/index.scss"></style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUIConversation/index.ts

@@ -0,0 +1,5 @@
+import TUIConversation from "./index.vue";
+import TUIConversationServer from "./server";
+new TUIConversationServer();
+
+export default TUIConversation;

package/src/TUIRoom/components/Chat/ChatKit/components/TUIConversation/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="tui-conversation"
+    @click="handleClickConv"
+  >
+    <ConversationHeader
+      v-if="isShowConversationHeader"
+      ref="headerRef"
+    />
+    <ConversationNetwork />
+    <ConversationList @handleSwitchConversation="handleSwitchConversation" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import { ref } from '../../adapter-vue';
+import ConversationList from './conversation-list/index.vue';
+import ConversationHeader from './conversation-header/index.vue';
+import ConversationNetwork from './conversation-network/index.vue';
+
+const emits = defineEmits(['handleSwitchConversation']);
+
+const totalUnreadCount = ref(0);
+const headerRef = ref<typeof ConversationHeader>();
+const isShowConversationHeader = ref<boolean>(true);
+
+TUIStore.watch(StoreName.CONV, {
+  totalUnreadCount: (count: number) => {
+    totalUnreadCount.value = count;
+  },
+});
+
+TUIStore.watch(StoreName.CUSTOM, {
+  isShowConversationHeader: (showStatus: boolean) => {
+    isShowConversationHeader.value = showStatus !== false;
+  },
+});
+
+const handleSwitchConversation = (conversationID: string) => {
+  emits('handleSwitchConversation', conversationID);
+};
+
+const handleClickConv = () => {
+  headerRef?.value?.closeChildren();
+};
+</script>
+
+<style lang="scss" scoped src="./style/index.scss"></style>

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

@@ -0,0 +1,163 @@
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import {
+  TUITranslateService,
+  TUIConversationService,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { CONV_CREATE_TYPE } from '../../constant';
+import { isUniFrameWork } from '../../utils/env';
+import createGroupIcon from '../../assets/icon/start-group.svg';
+import createC2CIcon from '../../assets/icon/icon-c2c.svg';
+import { enableSampleTaskStatus } from '../../utils/enableSampleTaskStatus';
+
+export default class TUIConversationServer {
+  static instance: TUIConversationServer;
+  private onCallParamsMap: Map<string, any>;
+  private onCallCallbackMap: Map<string, () => void>;
+  public constants: typeof TUIConstants;
+  constructor() {
+    TUICore.registerService(TUIConstants.TUIConversation.SERVICE.NAME, this);
+    TUICore.registerExtension(TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID, this);
+    this.onCallParamsMap = new Map();
+    this.onCallCallbackMap = new Map();
+    this.constants = TUIConstants;
+  }
+
+  static getInstance(): TUIConversationServer {
+    if (!TUIConversationServer.instance) {
+      TUIConversationServer.instance = new TUIConversationServer();
+    }
+    return TUIConversationServer.instance;
+  }
+
+  public getOnCallParams(method: string): any {
+    return this.onCallParamsMap.get(method);
+  }
+
+  public getOnCallCallback(method: string): (() => void) | undefined {
+    return this.onCallCallbackMap.get(method);
+  }
+
+  public onCall(method: string, params: Record<string, any>, callback: () => void): void {
+    this.onCallParamsMap.set(method, params);
+    this.onCallCallbackMap.set(method, callback);
+    switch (method) {
+      case TUIConstants.TUIConversation.SERVICE.METHOD.CREATE_CONVERSATION:
+        this.createConversation(params);
+        break;
+      case TUIConstants.TUIConversation.SERVICE.METHOD.HIDE_CONVERSATION_HEADER:
+        this.hideConversationHeader();
+        break;
+    }
+  }
+
+  public onGetExtension(extensionID: string) {
+    if (extensionID === TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID) {
+      const list = [
+        {
+          weight: 100,
+          icon: createC2CIcon,
+          text: TUITranslateService.t('TUIConversation.发起单聊'),
+          data: {
+            name: CONV_CREATE_TYPE.TYPEC2C,
+          },
+          listener: {
+            onClicked: this.createConversation.bind(this),
+          },
+        },
+        {
+          weight: 100,
+          icon: createGroupIcon,
+          text: TUITranslateService.t('TUIConversation.发起群聊'),
+          data: {
+            name: CONV_CREATE_TYPE.TYPEGROUP,
+          },
+          listener: {
+            onClicked: this.createConversation.bind(this),
+          },
+        },
+      ];
+      return list;
+    }
+  }
+
+  private createConversation(item: any) {
+    // Tell TUIContact to call the SelectFriend component to select a friend
+    TUICore.callService({
+      serviceName: TUIConstants.TUIContact.SERVICE.NAME,
+      method: TUIConstants.TUIContact.SERVICE.METHOD.SELECT_FRIEND,
+      params: {
+        title: item.text,
+        isRadio: item.data.name !== CONV_CREATE_TYPE.TYPEGROUP,
+        isNeedSearch: !TUIStore.getData(StoreName.APP, 'isOfficial'),
+      },
+      callback: async (memberList: any[]) => {
+        if (!memberList || memberList.length === 0) {
+          // Return to the previous page
+          return this.routerForward(null);
+        }
+        if (item.data.name === CONV_CREATE_TYPE.TYPEGROUP) {
+          // After selecting members, if you want to create a group chat, you need to create a group
+          this.createGroup(memberList);
+        } else {
+          const { userID } = memberList[0];
+          // Generate Conversation
+          await this.generateConversation(`C2C${userID}`);
+          this.routerForward(`C2C${userID}`);
+        }
+      },
+    });
+  }
+
+  private createGroup(memberList: any[]) {
+    TUICore.callService({
+      serviceName: TUIConstants.TUIGroup.SERVICE.NAME,
+      method: TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP,
+      params: {
+        title: TUITranslateService.t('TUIConversation.发起群聊'),
+        memberList,
+      },
+      callback: async (group: any) => {
+        let conversationID: string | null = null;
+        if (group) {
+          const { groupID } = group;
+          await this.generateConversation(`GROUP${groupID}`);
+          conversationID = `GROUP${groupID}`;
+        }
+        this.routerForward(conversationID);
+      },
+    });
+  }
+
+  private async routerForward(conversationID: string | null): Promise<void> {
+    if (isUniFrameWork) {
+      await TUIGlobal?.reLaunch({
+        url: '/TUIKit/components/TUIConversation/index',
+      });
+      if (conversationID) {
+        TUIGlobal?.navigateTo({
+          url: '/TUIKit/components/TUIChat/index',
+        });
+      }
+    }
+  }
+
+  private generateConversation(conversationID: string) {
+    TUIConversationService.switchConversation(conversationID)
+      .then(() => {
+        if (conversationID.startsWith('GROUP')) {
+          enableSampleTaskStatus('groupChat');
+        }
+        console.warn('打开会话成功');
+      })
+      .catch((err: any) => {
+        console.warn('打开会话失败', err.code, err.msg);
+      });
+  }
+
+  private hideConversationHeader = () => {
+    TUIStore.update(StoreName.CUSTOM, 'isShowConversationHeader', false);
+  };
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIConversation/style/color.scss

@@ -0,0 +1,12 @@
+.tui-conversation {
+  background: #fff;
+}
+
+.network {
+  &-content {
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    color: #e54545;
+    letter-spacing: 0;
+  }
+}

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

@@ -0,0 +1,3 @@
+@import '../../../assets/styles/common';
+@import './web';
+@import './color';

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

@@ -0,0 +1,107 @@
+.tui-conversation {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &-list {
+    overflow: auto;
+  }
+}
+
+.tui-conversation-header {
+  width: 100%;
+  position: relative;
+
+  .list {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #F4F5F9;
+    padding: 7px 0;
+
+    &-item {
+      flex: 1;
+      display: flex;
+      position: relative;
+      padding: 7px;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+
+  &-item{
+    flex: 1;
+    display: flex;
+    align-items: center;
+
+    &-title {
+      padding: 0 8px;
+      font-size: 16px;
+      font-weight: normal;
+    }
+  }
+
+  &-children {
+    position: absolute;
+    top: 100%;
+    z-index: 3;
+    padding: 7px 9px;
+    border-bottom: none;
+    background-color: #fff;
+    box-shadow: 0 3px 7px 0 #0003;
+    flex-direction: column;
+  }
+}
+
+.network {
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+
+  .icon-error{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 15px;
+    height: 15px;
+    border-radius: 15px;
+    background: red;
+    color: #fff;
+    font-style: normal;
+  }
+
+  &-content {
+    padding: 5px;
+    font-size: 12px;
+    line-height: 22px;
+  }
+}
+
+.plus {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  position: relative;
+}
+
+.plus::before,
+.plus::after {
+  content: "";
+  position: absolute;
+  background-color: #232832;
+  border-radius: 0.5px;
+  width: 1px;
+  height: 14px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.plus::after {
+  transform: rotate(90deg);
+  width: 0.5px;
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIGroup/create-group/group-introduction/config.ts

@@ -0,0 +1,50 @@
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+
+const groupIntroConfig = [
+  {
+    icon: 'https://web.sdk.qcloud.com/im/assets/images/Public.svg',
+    label: '陌生人社交群（Public）',
+    type: TUIChatEngine.TYPES.GRP_PUBLIC,
+    detail: '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见',
+    src: '产品文档',
+  },
+  {
+    icon: 'https://web.sdk.qcloud.com/im/assets/images/Meeting.svg',
+    label: '临时会议群（Meeting）',
+    type: TUIChatEngine.TYPES.GRP_MEETING,
+    detail: '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见',
+    src: '产品文档',
+  },
+  {
+    icon: 'https://web.sdk.qcloud.com/im/assets/images/Work.svg',
+    label: '好友工作群（Work）',
+    type: TUIChatEngine.TYPES.GRP_WORK,
+    detail: '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见',
+    src: '产品文档',
+  },
+  {
+    icon: 'https://web.sdk.qcloud.com/im/assets/images/AVChatroom.svg',
+    label: '直播群（AVChatroom）',
+    type: TUIChatEngine.TYPES.GRP_AVCHATROOM,
+    detail: '创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见',
+    src: '产品文档',
+  },
+  {
+    icon: 'https://web.sdk.qcloud.com/im/assets/images/Community.png',
+    label: '社群（Community）',
+    type: TUIChatEngine.TYPES.GRP_COMMUNITY,
+    detail: '创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见',
+    src: '产品文档',
+  },
+];
+
+const findGroupIntroConfig = (type: string) => {
+  return groupIntroConfig.filter((item: any) => {
+    return item.type === type;
+  })[0];
+};
+
+export {
+  groupIntroConfig,
+  findGroupIntroConfig,
+};

package/src/TUIRoom/components/Chat/ChatKit/components/TUIGroup/create-group/group-introduction/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <ul class="group-introduction-list select">
+    <li
+      v-for="(item, index) in type"
+      :key="index"
+      class="select-item"
+      :class="[selectType === item.type && 'selected']"
+      @click="selected(item)"
+    >
+      <main class="select-item-type">
+        <div class="select-item-header">
+          <aside class="left">
+            <Icon
+              class="icon"
+              :file="item.icon"
+            />
+            <span class="select-item-label">{{ TUITranslateService.t(`TUIGroup.${item.label}`) }}</span>
+          </aside>
+          <Icon
+            v-if="selectType === item.type"
+            :file="selectedIcon"
+          />
+        </div>
+        <span class="select-item-detail">{{ TUITranslateService.t(`TUIGroup.${item.detail}`) }}</span>
+        <a
+          class="link"
+          :href="documentLink.product.url"
+          target="_blank"
+          @click="openUrl(documentLink.product.url)"
+        >{{
+          TUITranslateService.t(`TUIGroup.${item.src}`) }}</a>
+      </main>
+    </li>
+  </ul>
+</template>
+<script lang="ts" setup>
+import { ref, watchEffect } from '../../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import documentLink from '../../../../utils/documentLink';
+import Icon from '../../../common/Icon.vue';
+import selectedIcon from '../../../../assets/icon/selected.svg';
+import { groupIntroConfig } from './config';
+import { isUniFrameWork } from '../../../../utils/env';
+
+const props = defineProps({
+  groupType: {
+    type: String,
+    default: '',
+  },
+});
+
+const type = groupIntroConfig;
+
+const selectType = ref();
+
+const emit = defineEmits(['selectType']);
+
+watchEffect(() => {
+  selectType.value = props.groupType;
+});
+
+const selected = (item: any) => {
+  selectType.value = item.type;
+  emit('selectType', item.type);
+};
+
+const openUrl = (link: string) => {
+  if (!isUniFrameWork) {
+    TUIGlobal?.open(link);
+  }
+};
+
+</script>
+<style lang="scss" scoped src="../style/index.scss"></style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUIGroup/create-group/index.ts

@@ -0,0 +1,3 @@
+import CreateGroup from './index.vue';
+
+export default CreateGroup;