@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.3

package/src/TUIRoom/components/Chat/ChatKit/components/TUISearch/search-result/style/web.scss

@@ -0,0 +1,180 @@
+.tui-search-result {
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  box-sizing: border-box;
+
+  &-with-border {
+    border-top: 1px solid rgba(0,0,0,0.1);
+  }
+
+  &-detail {
+    width: 360px;
+    overflow-y: hidden;
+    border-left: 1px solid rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    .tui-search-message-header {
+      padding: 10px;
+      display: flex;
+      flex-direction: row;
+      place-content: space-between space-between;
+      font-size: 14px;
+      align-items: center;
+
+      .header-content {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1;
+        overflow: hidden;
+        color: #666;
+        white-space: nowrap;
+
+        .header-content-count {
+          width: fit-content;
+          white-space: nowrap;
+        }
+
+        .header-content-keyword {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .header-content-type {
+          width: 110px;
+          white-space: nowrap;
+        }
+
+        .normal {
+          color: #666;
+        }
+
+        .highlight {
+          color: #007aff;
+        }
+      }
+
+      .header-enter {
+        margin-left: 10px;
+        width: 70px;
+        color: #666;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+      }
+    }
+
+    .tui-search-message-list {
+      overflow-y: auto;
+
+      .list-item {
+        width: 100%;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .list-group {
+        &.list-group-image {
+          display: flex;
+          flex-flow: row wrap;
+
+          .list-group-item {
+            width: 111px;
+            height: 111px;
+          }
+        }
+
+        .list-group-date {
+          width: 100%;
+          box-sizing: border-box;
+          font-family: "PingFang SC", sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          letter-spacing: 0;
+          text-align: left;
+          padding: 10px 10px 2px;
+        }
+      }
+
+      .more {
+        display: flex;
+        flex-direction: row;
+        font-size: 14px;
+        padding: 8px 0;
+        justify-content: center;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+
+        .more-text {
+          padding-left: 8px;
+          font-size: 12px;
+          color: #007aff;
+          user-select: none;
+        }
+      }
+    }
+  }
+
+  &-main {
+    width: 350px;
+    padding: 10px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    .tui-search-result-list {
+      &-item {
+        .header {
+          font-size: 14px;
+          padding: 4px 0;
+        }
+
+        .list {
+          display: flex;
+          flex-direction: column;
+
+          .list-item {
+            cursor: pointer;
+          }
+
+          .list-item-selected {
+            background: #f2f2f2;
+            border-radius: 5px;
+          }
+        }
+
+        .more {
+          display: flex;
+          flex-direction: row;
+          font-size: 14px;
+
+          // padding: 8px 0;
+          padding-top: 10px;
+          user-select: none;
+          cursor: pointer;
+
+          .more-text {
+            padding-left: 8px;
+            font-size: 12px;
+            color: #007aff;
+            user-select: none;
+          }
+        }
+      }
+    }
+  }
+
+  .tui-search-result-in-conversation {
+    border: none;
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUISearch/search-time-list.ts

@@ -0,0 +1,45 @@
+// const oneDay = 24 * 60 * 60 * 1000;
+const oneDay = 24 * 60 * 60;
+export const searchMessageTimeList: {
+  [propsName: string]: {
+    key: string;
+    label: string;
+    value: { timePosition: number; timePeriod: number };
+  };
+} = {
+  all: {
+    key: 'all',
+    label: '全部',
+    value: {
+      timePosition: 0,
+      timePeriod: 0,
+    },
+  },
+  oneDay: {
+    key: 'today',
+    label: '今天',
+    value: {
+      timePosition: 0,
+      timePeriod: oneDay,
+    },
+  },
+  threeDay: {
+    key: 'threeDays',
+    label: '近三天',
+    value: {
+      timePosition: 0,
+      timePeriod: 3 * oneDay,
+    },
+  },
+  sevenDay: {
+    key: 'sevenDays',
+    label: '近七天',
+    value: {
+      timePosition: 0,
+      timePeriod: 7 * oneDay,
+    },
+  },
+};
+
+export const searchMessageTimeKeys = Object.keys(searchMessageTimeList);
+export const searchMessageTimeDefault = searchMessageTimeList['all'];

package/src/TUIRoom/components/Chat/ChatKit/components/TUISearch/search-type-list.ts

@@ -0,0 +1,86 @@
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+export interface ISearchMessageTypeList {
+  [propsName: string]: {
+    key: string;
+    label: string;
+    value: any[] | string;
+  };
+}
+export const allMessageTypeList = [
+  TUIChatEngine.TYPES.MSG_TEXT,
+  TUIChatEngine.TYPES.MSG_FILE,
+  TUIChatEngine.TYPES.MSG_IMAGE,
+  TUIChatEngine.TYPES.MSG_VIDEO,
+  TUIChatEngine.TYPES.MSG_AUDIO,
+  TUIChatEngine.TYPES.MSG_LOCATION,
+  TUIChatEngine.TYPES.MSG_CUSTOM,
+  TUIChatEngine.TYPES.MSG_MERGER,
+];
+export const searchMessageTypeList: ISearchMessageTypeList = {
+  allMessage: {
+    key: 'allMessage',
+    label: '全部',
+    value: allMessageTypeList,
+  },
+  textMessage: {
+    key: 'textMessage',
+    label: '文本',
+    value: [TUIChatEngine.TYPES.MSG_TEXT],
+  },
+  fileMessage: {
+    key: 'fileMessage',
+    label: '文件',
+    value: [TUIChatEngine.TYPES.MSG_FILE],
+  },
+  imageMessage: {
+    key: 'imageMessage',
+    label: '图片/视频',
+    value: [TUIChatEngine.TYPES.MSG_IMAGE, TUIChatEngine.TYPES.MSG_VIDEO],
+  },
+  otherMessage: {
+    key: 'otherMessage',
+    label: '其他',
+    value: [
+      TUIChatEngine.TYPES.MSG_AUDIO,
+      TUIChatEngine.TYPES.MSG_LOCATION,
+      TUIChatEngine.TYPES.MSG_CUSTOM,
+      TUIChatEngine.TYPES.MSG_MERGER,
+    ],
+  },
+};
+
+export const searchMessageTypeKeys = Object.keys(searchMessageTypeList);
+export const searchMessageSingleTypeKeys = Object.keys(searchMessageTypeList).filter(
+  (key: string) => key !== 'all',
+);
+export const searchInGlobalDefaultType = searchMessageTypeList['allMessage'];
+export const searchInConversationDefaultType = searchMessageTypeList['textMessage'];
+export const searchMessageTypeDefault = {
+  global: searchInGlobalDefaultType,
+  conversation: searchInConversationDefaultType,
+};
+
+// Global search type key list
+export const globalSearchTypeKeys = ['allMessage', 'textMessage', 'fileMessage', 'otherMessage'];
+// Global search type list
+export const globalSearchTypeList = Object.keys(searchMessageTypeList)
+  .filter((key: string) => globalSearchTypeKeys?.includes(key))
+  .reduce((obj: ISearchMessageTypeList, key: string) => {
+    obj[key] = searchMessageTypeList[key];
+    return obj;
+  }, {});
+
+// Search type key list in session
+export const conversationSearchTypeKeys = [
+  'textMessage',
+  'fileMessage',
+  'imageMessage',
+  'otherMessage',
+];
+// Search type list in session
+export const conversationSearchTypeList = Object.keys(searchMessageTypeList)
+  .filter((key: string) => conversationSearchTypeKeys?.includes(key))
+  .reduce((obj: ISearchMessageTypeList, key: string) => {
+    obj[key] = searchMessageTypeList[key];
+    return obj;
+  }, {});

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

@@ -0,0 +1,73 @@
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import {
+  TUIUserService,
+  TUIGroupService,
+  TUIFriendService,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { isUniFrameWork } from '../../utils/env';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+
+export default class TUISearchServer {
+  constructor() {
+    TUICore.registerService(TUIConstants.TUISearch.SERVICE.NAME, this);
+    TUICore.registerExtension(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, this);
+  }
+
+  public onCall(method: string, params: { [propsName: string]: string }) {
+    switch (method) {
+      case TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_GROUP:
+        return this.searchGroup(params?.groupID);
+      case TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_USER:
+        return this.searchUser(params?.userID);
+      case TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_FRIEND:
+        return this.searchFriend(params?.userID);
+      case TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_GROUP_MEMBER:
+        return this.searchGroupMember(params?.groupID, params?.userID);
+    }
+  }
+
+  public onGetExtension(extensionID: string) {
+    if (extensionID === TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID) {
+      const list: any[] = [];
+      const searchExtension = {
+        weight: 3000,
+        text: '搜索',
+        icon: 'https://web.sdk.qcloud.com/component/TUIKit/assets/message-search.svg',
+        data: {
+          name: 'search',
+        },
+        listener: {
+          onClicked: () => {
+            TUIStore.update(StoreName.SEARCH, 'isShowInConversationSearch', true);
+            isUniFrameWork && TUIGlobal?.navigateTo({
+              url: '/TUIKit/components/TUISearch/index',
+            });
+          },
+        },
+      };
+      list.push(searchExtension);
+      return list;
+    }
+  }
+
+  public async searchFriend(userID: string) {
+    return TUIFriendService.getFriendProfile({ userIDList: [userID] });
+  }
+
+  public async searchUser(userID: string) {
+    return TUIUserService.getUserProfile({ userIDList: [userID] });
+  }
+
+  public async searchGroup(groupID: string) {
+    return TUIGroupService.searchGroupByID(groupID);
+  }
+
+  public async searchGroupMember(groupID: string, userID: string) {
+    return TUIGroupService.getGroupMemberProfile({
+      groupID,
+      userIDList: [userID],
+    });
+  }
+}

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

@@ -0,0 +1,39 @@
+.tui-search-h5 {
+  &-full-screen {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+    background: #fff;
+  }
+
+  &-global,
+  &-conversation {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  &-conversation {
+    overflow: hidden;
+  }
+
+  &.tui-search-main-conversation {
+    box-shadow: none;
+  }
+
+  .search-input,
+  .search-container,
+  .search-result {
+    min-width: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+}

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

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

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

@@ -0,0 +1,28 @@
+.tui-search {
+  &-main-global {
+    width: 100%;
+    height: fit-content;
+  }
+
+  &-main-conversation {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    box-shadow: 0 1px 10px 0 rgba(2,16,43,0.15);
+  }
+
+  .tui-search-global {
+    &-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .tui-search-conversation {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUISearch/type.ts

@@ -0,0 +1,76 @@
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+
+export type SEARCH_TYPE = 'global' | 'conversation';
+
+// Message search result type display summary
+// Unsupported type:
+// TYPES.MSG_FACE / TYPES.MSG_GRP_TIP / TYPES.MSG_GRP_SYS_NOTICE
+export const messageTypeAbstractMap: Record<string, string> = {
+  [TUIChatEngine.TYPES.MSG_TEXT]: '[文本]',
+  [TUIChatEngine.TYPES.MSG_IMAGE]: '[图片]',
+  [TUIChatEngine.TYPES.MSG_AUDIO]: '[语音]',
+  [TUIChatEngine.TYPES.MSG_VIDEO]: '[视频]',
+  [TUIChatEngine.TYPES.MSG_FILE]: '[文件]',
+  [TUIChatEngine.TYPES.MSG_CUSTOM]: '[自定义消息]',
+  [TUIChatEngine.TYPES.MSG_SYSTEM]: '[系统消息]',
+  [TUIChatEngine.TYPES.MSG_MERGER]: '[合并消息]',
+  [TUIChatEngine.TYPES.MSG_LOCATION]: '[位置消息]',
+};
+
+export const searchResultItemDisplayType = {
+  INFO: 'info', // Normal information flow display
+  BUBBLE: 'bubble', // Message bubble display
+  FILE: 'file', // File list type display
+  IMAGE: 'image', // Picture collection display
+};
+
+export type searchResultItemDisplayTypeKeys = keyof typeof searchResultItemDisplayType;
+export type searchResultItemDisplayTypeValues = typeof searchResultItemDisplayType[searchResultItemDisplayTypeKeys];
+
+export const searchMessageType = {
+  // CONTACT: "contact", // Contact search, not supported yet
+  // GROUP: "group", // Group search, not supported yet
+  ALL_MESSAGE: 'allMessage',
+  TEXT_MESSAGE: 'textMessage',
+  IMAGE_MESSAGE: 'imageMessage',
+  FILE_MESSAGE: 'fileMessage',
+  OTHER_MESSAGE: 'otherMessage',
+};
+
+export type searchMessageTypeKeys = keyof typeof searchMessageType;
+export type searchMessageTypeValues = typeof searchMessageType[searchMessageTypeKeys];
+
+export interface ISearchInputValue {
+  value: string;
+  searchType: SEARCH_TYPE;
+}
+export interface ISearchTypeTab {
+  key: string;
+  label: string;
+  value: string | string[];
+}
+export interface ISearchMessageType {
+  value: ISearchTypeTab;
+  searchType: SEARCH_TYPE;
+}
+export interface ISearchTimeTab {
+  key: string;
+  label: string;
+  value: {
+    timePosition: number;
+    timePeriod: number;
+  };
+}
+export interface ISearchMessageTime {
+  value: ISearchTimeTab;
+  searchType: SEARCH_TYPE;
+}
+export interface ISearchingStatus {
+  isSearching: boolean;
+  searchType: string;
+}
+
+export interface IHighlightContent {
+  text: string;
+  isHighlight: boolean;
+}