@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.3

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/selected.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
+  <title>编组 14</title>
+  <defs>
+    <filter x="-10.6%" y="-5.4%" width="121.2%" height="110.9%" filterUnits="objectBoundingBox" id="filter-1">
+      <feOffset dx="0" dy="7" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+      <feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+      <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+        <feMergeNode in="SourceGraphic"></feMergeNode>
+      </feMerge>
+    </filter>
+  </defs>
+  <g id="new" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="自定义消息" transform="translate(-458.000000, -318.000000)">
+      <g id="编组-32" filter="url(#filter-1)" transform="translate(44.000000, 60.000000)">
+        <g id="编组-24" transform="translate(30.000000, 250.000000)">
+          <g id="编组-14" transform="translate(384.000000, 8.000000)">
+            <circle id="椭圆形" fill="#006EFF" fill-rule="nonzero" cx="8" cy="8" r="8"></circle>
+            <polyline id="路径-4" stroke="#FFFFFF" stroke-width="2" transform="translate(8.042641, 6.242641) rotate(-315.000000) translate(-8.042641, -6.242641) " points="6.04264069 10.2426407 10.0426407 10.2426407 10.0426407 2.24264069"></polyline>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/setting.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 14" opacity="0.802743">
+        <path id="&#229;&#189;&#162;&#231;&#138;&#182;&#231;&#187;&#147;&#229;&#144;&#136;"
+            fill-rule="evenodd" clip-rule="evenodd"
+            d="M6 10.5C6 11.3284 5.32843 12 4.5 12C3.67157 12 3 11.3284 3 10.5C3 9.67157 3.67157 9 4.5 9C5.32843 9 6 9.67157 6 10.5ZM12 10.5C12 11.3284 11.3284 12 10.5 12C9.67157 12 9 11.3284 9 10.5C9 9.67157 9.67157 9 10.5 9C11.3284 9 12 9.67157 12 10.5ZM16.5 12C17.3284 12 18 11.3284 18 10.5C18 9.67157 17.3284 9 16.5 9C15.6716 9 15 9.67157 15 10.5C15 11.3284 15.6716 12 16.5 12Z"
+            fill="#232832" />
+    </g>
+</svg>

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/start-group.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <circle r="2.61111" transform="matrix(1 0 0 -1 8.55545 3.88889)" stroke="#4C5059"></circle>
+  <circle r="2.61111" transform="matrix(1 0 0 -1 4.66678 3.88889)" fill="#F4F5F9" stroke="#4C5059"></circle>
+  <path d="M5.16675 11.7778C5.16675 9.84484 6.73375 8.27783 8.66675 8.27783H10.0001C11.9331 8.27783 13.5001 9.84484 13.5001 11.7778V12.7223H5.16675V11.7778Z" stroke="#4C5059"></path>
+  <path d="M0.5 11.7778C0.5 9.84484 2.067 8.27783 4 8.27783H5.33333C7.26633 8.27783 8.83333 9.84484 8.83333 11.7778V12.7223H0.5V11.7778Z" fill="#F4F5F9" stroke="#4C5059"></path>
+</svg>

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/translate.svg

@@ -0,0 +1,12 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_313_82772" fill="white">
+<rect x="7" y="7.62939e-06" width="12" height="12" rx="0.5"/>
+</mask>
+<rect x="7" y="7.62939e-06" width="12" height="12" rx="0.5" fill="#444444" stroke="#CCCCCC" stroke-width="4" mask="url(#path-1-inside-1_313_82772)"/>
+<path d="M12.7426 3.61601H12.6745L12.6496 3.67939L10.9636 7.96339L10.9098 8.10001H11.0566H11.5846H11.6536L11.6781 8.03553L12.1096 6.90001H13.9397L14.3712 8.03553L14.3957 8.10001H14.4646H14.9986H15.1455L15.0917 7.96339L13.4057 3.67939L13.3808 3.61601H13.3126H12.7426ZM13.7079 6.28601H12.3421L13.03 4.49341L13.7079 6.28601Z" fill="#CCCCCC" stroke="#CCCCCC" stroke-width="0.2"/>
+<mask id="path-3-inside-2_313_82772" fill="white">
+<rect y="6.00001" width="12" height="12" rx="0.5"/>
+</mask>
+<rect y="6.00001" width="12" height="12" rx="0.5" fill="#444444" stroke="#CCCCCC" stroke-width="4" mask="url(#path-3-inside-2_313_82772)"/>
+<path d="M5.77801 8.97401H5.67801V9.07401V10.054H3.63H3.53V10.154V12.974V13.074H3.63H4.062H4.162V12.974V12.696H5.67801V14.642V14.742H5.77801H6.222H6.322V14.642V12.696H7.84401V12.974V13.074H7.94401H8.37601H8.47601V12.974V10.154V10.054H8.37601H6.322V9.07401V8.97401H6.222H5.77801ZM4.162 12.076V10.674H5.67801V12.076H4.162ZM6.322 12.076V10.674H7.84401V12.076H6.322Z" fill="#CCCCCC" stroke="#CCCCCC" stroke-width="0.2"/>
+</svg>

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/video-dark.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189;"
+        opacity="0.795169">
+        <rect id="&#231;&#159;&#169;&#229;&#189;&#162;" x="0.5" y="0.5" width="15" height="13"
+            rx="1.75" stroke="#D5E0F2"
+            style="stroke:#D5E0F2;" />
+        <path id="&#228;&#184;&#137;&#232;&#167;&#146;&#229;&#189;&#162;"
+            d="M10.0282 7L6.5 9.1169L6.5 4.8831L10.0282 7Z" stroke="#D5E0F2"
+            style="stroke:#D5E0F2;" />
+    </g>
+</svg>

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/video-light.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189;"
+        opacity="0.795169">
+        <rect id="&#231;&#159;&#169;&#229;&#189;&#162;" x="0.5" y="0.5" width="15" height="13"
+            rx="1.75" stroke="#232832"
+            style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;" />
+        <path id="&#228;&#184;&#137;&#232;&#167;&#146;&#229;&#189;&#162;"
+            d="M10.0282 7L6.5 9.1169L6.5 4.8831L10.0282 7Z" stroke="#232832"
+            style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;" />
+    </g>
+</svg>
+    

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/words-dark.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189; 5" opacity="0.795169">
+    <path id="&#231;&#159;&#169;&#229;&#189;&#162;" d="M9.60349 12.4231H9.35784L9.20772 12.6175L8.01519 14.1621L6.92003 12.6321L6.77045 12.4231H6.51345H3.25C2.2835 12.4231 1.5 11.6396 1.5 10.6731V3.25C1.5 2.2835 2.2835 1.5 3.25 1.5H12.75C13.7165 1.5 14.5 2.2835 14.5 3.25V8.80223V10.6731C14.5 11.6396 13.7165 12.4231 12.75 12.4231H9.60349Z" stroke="#D5E0F2" style="stroke:#D5E0F2;"/>
+    <path id="&#232;&#183;&#175;&#229;&#190;&#132; 10" d="M9.29061 3.7428L5.97266 6.33122L9.88719 7.13347L6.61672 9.7428" stroke="#D5E0F2" style="stroke:#D5E0F2;" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    </svg>

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/words-light.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#231;&#188;&#150;&#231;&#187;&#132; 9&#229;&#164;&#135;&#228;&#187;&#189; 5" opacity="0.795169">
+    <path id="&#231;&#159;&#169;&#229;&#189;&#162;" d="M9.60349 12.4231H9.35784L9.20772 12.6175L8.01519 14.1621L6.92003 12.6321L6.77045 12.4231H6.51345H3.25C2.2835 12.4231 1.5 11.6396 1.5 10.6731V3.25C1.5 2.2835 2.2835 1.5 3.25 1.5H12.75C13.7165 1.5 14.5 2.2835 14.5 3.25V8.80223V10.6731C14.5 11.6396 13.7165 12.4231 12.75 12.4231H9.60349Z" stroke="#232832" style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;"/>
+    <path id="&#232;&#183;&#175;&#229;&#190;&#132; 10" d="M9.29061 3.7428L5.97266 6.33122L9.88719 7.13347L6.61672 9.7428" stroke="#232832" style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    </svg>
+    

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/zoom-in.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill="#444444"
+    d="M945.066667 898.133333l-189.866667-189.866666c55.466667-64 87.466667-149.333333 87.466667-241.066667 0-204.8-168.533333-373.333333-373.333334-373.333333S96 264.533333 96 469.333333 264.533333 842.666667 469.333333 842.666667c91.733333 0 174.933333-34.133333 241.066667-87.466667l189.866667 189.866667c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c8.533333-12.8 8.533333-34.133333-2.133333-46.933334zM469.333333 778.666667C298.666667 778.666667 160 640 160 469.333333S298.666667 160 469.333333 160 778.666667 298.666667 778.666667 469.333333 640 778.666667 469.333333 778.666667z" />
+  <path fill="#444444"
+    d="M597.333333 437.333333h-96V341.333333c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v96H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h96V597.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-96H597.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" />
+</svg>

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/zoom-out.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill="#444444"
+    d="M945.066667 898.133333l-189.866667-189.866666c55.466667-64 87.466667-149.333333 87.466667-241.066667 0-204.8-168.533333-373.333333-373.333334-373.333333S96 264.533333 96 469.333333 264.533333 842.666667 469.333333 842.666667c91.733333 0 174.933333-34.133333 241.066667-87.466667l189.866667 189.866667c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c8.533333-12.8 8.533333-34.133333-2.133333-46.933334zM469.333333 778.666667C298.666667 778.666667 160 640 160 469.333333S298.666667 160 469.333333 160 778.666667 298.666667 778.666667 469.333333 640 778.666667 469.333333 778.666667z" />
+  <path fill="#444444"
+    d="M597.333333 437.333333H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h256c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" />
+</svg>

package/src/TUIRoom/components/Chat/ChatKit/assets/styles/common.scss

@@ -0,0 +1,59 @@
+body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p {
+  margin:0;
+  padding:0;
+  font-style:normal;
+
+  /* font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif; */
+}
+
+ol, ul, li {
+  list-style:none;
+}
+
+img {
+  border:0;
+  vertical-align:middle;
+  pointer-events:none;
+}
+
+body {
+  color:#000;
+  background:#FFF;
+}
+
+.clear {
+  clear:both;
+  height:1px;
+  width:100%;
+  overflow:hidden;
+  margin-top:-1px;
+}
+
+a {
+  color:#000;
+  text-decoration:none;
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration:none;
+}
+
+input, textarea {
+  user-select: auto;
+}
+
+input:focus, input:active, textarea:focus, textarea:active {
+  outline: none;
+}
+
+.chat-aside {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  box-sizing: border-box;
+  width: 360px !important;
+  border-radius: 8px 0 0 8px;
+  z-index: 9999;
+  max-height: calc(100% - 50px);
+}

package/src/TUIRoom/components/Chat/ChatKit/assets/styles/sample.scss

@@ -0,0 +1,99 @@
+/* stylelint-disable */
+.TUIKit {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  text-align: left;
+  .TUIKit-navbar {
+    background: #e8e8e9;
+    overflow: hidden;
+    .TUIKit-navbar-item {
+      padding: 10px;
+      color: #147aff;
+      font-weight: 500;
+      cursor: pointer;
+    }
+    .TUIKit-navbar-item-active {
+      background: #dddddd;
+    }
+  }
+  .TUIKit-main-container {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    .TUIKit-main {
+      flex: 1;
+      display: flex;
+      .TUIKit-main-aside {
+        min-width: 285px;
+        flex: 0 0 24%;
+        border-right: 1px solid #f4f5f9;
+      }
+      .TUIKit-main-main {
+        flex: 1;
+        display: flex;
+        .chat{
+          flex: 1;
+        }
+        .chat-aside {
+          position: absolute;
+          top: 50px;
+          right: 0;
+          box-sizing: border-box;
+          max-width: 360px;
+          max-height: calc(100% - 50px);
+          border-radius: 8px 0 0 8px;
+          z-index: 9999;
+        }
+      }
+    }
+    .callkit-container {
+      position: fixed;
+      left: calc(50% - 25rem);
+      top: calc(50% - 18rem);
+      width: 50rem;
+      height: 36rem;
+    }
+    .callkit-container.miniMized {
+      left: auto;
+      right: 10px;
+      top: 70px;
+      background: transparent;
+    }
+  }
+}
+.TUIKit-h5 {
+  display: flex;
+  flex-direction: column-reverse;
+  .TUIKit-navbar {
+    display: flex;
+    flex-direction: row;
+    .TUIKit-navbar-item {
+      flex: 1;
+      text-align: center;
+      cursor: none;
+    }
+  }
+  .TUIKit-main-container {
+    flex: 1;
+    .TUIKit-main {
+      .TUIKit-main-aside {
+        flex: 1;
+      }
+      .TUIKit-main-main {
+        .chat-popup {
+          position: absolute;
+          max-width: 100%;
+          max-height: 100%;
+        }
+      }
+    }
+    .callkit-container {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/chat-header/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div :class="['chat-header', !isPC && 'chat-header-h5']">
+    <div
+      v-if="!isPC && isNotRoomChat"
+      :class="['chat-header-back', !isPC && 'chat-header-h5-back']"
+      @click="closeChat(currentConversation.conversationID)"
+    >
+      <Icon :file="backSVG" />
+    </div>
+    <div class="chat-header-container">
+      <div
+        v-if="isNotRoomChat"
+        :class="['chat-header-content', !isPC && 'chat-header-h5-content']"
+      >
+        {{ currentConversationName }}
+      </div>
+      <div>
+        <!-- <JoinGroupCard v-if="isPC" /> -->
+      </div>
+    </div>
+    <div :class="['chat-header-setting', !isPC && 'chat-header-h5-setting']">
+      <div
+        v-for="(item, index) in props.headerExtensionList"
+        :key="index"
+        @click.stop="handleExtensions(item)"
+      >
+        <Icon :file="item.icon" />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, withDefaults } from '../../../adapter-vue';
+import {
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  IConversationModel,
+} from '@tencentcloud/chat-uikit-engine';
+import { TUIConstants, ExtensionInfo } from '@tencentcloud/tui-core';
+// import { JoinGroupCard } from '@tencentcloud/call-uikit-vue';
+import Icon from '../../common/Icon.vue';
+import backSVG from '../../../assets/icon/back.svg';
+import { isPC } from '../../../utils/env';
+import TUIChatConfig from '../config';
+
+const props = withDefaults(
+  defineProps<{
+    headerExtensionList: ExtensionInfo[];
+  }>(),
+  {
+    headerExtensionList: () => ([]),
+  },
+);
+
+const emits = defineEmits(['closeChat']);
+const currentConversation = ref<IConversationModel>();
+const currentConversationName = ref('');
+const typingStatus = ref(false);
+const groupID = ref('');
+const isNotRoomChat = ref<boolean>(TUIChatConfig.getChatType() !== TUIConstants.TUIChat.TYPE.ROOM);
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdated,
+  });
+
+  TUIStore.watch(StoreName.CHAT, {
+    typingStatus: onTypingStatusUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdated,
+  });
+
+  TUIStore.unwatch(StoreName.CHAT, {
+    typingStatus: onTypingStatusUpdated,
+  });
+});
+
+const closeChat = (conversationID: string | undefined) => {
+  emits('closeChat', conversationID);
+};
+
+const handleExtensions = (item: ExtensionInfo) => {
+  item.listener.onClicked?.({ groupID: groupID.value });
+};
+
+function onCurrentConversationUpdated(conversation: IConversationModel) {
+  currentConversation.value = conversation;
+  groupID.value = currentConversation.value?.groupProfile?.groupID;
+  currentConversationName.value = currentConversation?.value?.getShowName();
+}
+
+function onTypingStatusUpdated(status: boolean) {
+  typingStatus.value = status;
+  if (typingStatus.value) {
+    currentConversationName.value = TUITranslateService.t('TUIChat.对方正在输入');
+  } else {
+    currentConversationName.value = currentConversation.value?.getShowName() || '';
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.chat-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  &-container {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  &-content {
+    margin-right: 20px;
+    flex: 1;
+    font-size: 16px;
+    line-height: 30px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: #000;
+    letter-spacing: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-back,
+  &-setting {
+    width: 27px;
+    height: 27px;
+
+    .icon {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.chat-header-h5 {
+  &-back {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-content{
+    margin: 0 20px;
+    text-align: center;
+  }
+}
+</style>

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

@@ -0,0 +1,83 @@
+class TUIChatConfig {
+  static instance: TUIChatConfig;
+  private chatType: string;
+  private features: Record<string, any>;
+  private theme: string;
+  constructor() {
+    this.chatType = '';
+    this.features = {
+      DownloadFile: true,
+      CopyMessage: true,
+      DeleteMessage: true,
+      RevokeMessage: true,
+      QuoteMessage: true,
+      ForwardMessage: true,
+      TranslateMessage: true,
+      VoiceToText: true,
+      MultiSelection: true,
+      EmojiReaction: true,
+      InputEmoji: true,
+      InputStickers: true,
+      InputImage: true,
+      InputVoice: true,
+      InputVideo: true,
+      InputFile: true,
+      InputEvaluation: true,
+      InputQuickReplies: true,
+      InputMention: true,
+      MessageSearch: true,
+      ReadStatus: true,
+    };
+    this.theme = 'light';
+  }
+
+  static getInstance(): TUIChatConfig {
+    if (!TUIChatConfig.instance) {
+      TUIChatConfig.instance = new TUIChatConfig();
+    }
+    return TUIChatConfig.instance;
+  }
+
+  setChatType(chatType: string) {
+    this.chatType = chatType;
+  }
+
+  getChatType() {
+    return this.chatType;
+  }
+
+  hideTUIChatFeatures(features: string[]) {
+    if (!features) {
+      return;
+    }
+    features.forEach((feature: string) => {
+      if (this.features[feature]) {
+        this.features[feature] = false;
+      }
+    });
+  }
+
+  getFeatureConfig(key?: string) {
+    if (key) {
+      return this.features[key];
+    }
+    return this.features;
+  }
+
+  setTheme(theme: string) {
+    this.theme = theme;
+  }
+
+  getTheme() {
+    return this.theme;
+  }
+}
+
+const ChatConfig = TUIChatConfig.getInstance();
+const hideTUIChatFeatures = ChatConfig.hideTUIChatFeatures.bind(ChatConfig);
+
+export {
+  hideTUIChatFeatures,
+};
+
+export default ChatConfig;

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/emoji-config/custom-emoji.ts

@@ -0,0 +1,15 @@
+import { IEmojiGroupList } from '../../../interface';
+
+/**
+* Custom big emoji
+*/
+export const CUSTOM_BIG_EMOJI_URL: string = '';
+
+export const CUSTOM_BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [];
+
+/**
+* Custom basic emoji
+*/
+export const CUSTOM_BASIC_EMOJI_URL: string = '';
+
+export const CUSTOM_BASIC_EMOJI_URL_MAPPING: Record<string, string> = {};

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/emoji-config/default-emoji.ts

@@ -0,0 +1,114 @@
+/**
+ * Emoji input interface in the chat screen.
+ * In respect for the copyright of the emoji design, the Chat Demo/TUIKit project does not include the cutouts of large emoji elements.
+ * Please replace them with your own designed or copyrighted emoji packs before the official launch for commercial use.
+ * The default small yellow face emoji pack is copyrighted by Tencent Cloud and can be authorized for a fee.
+ * If you wish to obtain authorization, please submit a ticket to contact us.
+ *
+ * submit a ticket url：https://console.tencentcloud.com/workorder/category?level1_id=29&level2_id=40&source=14&data_title=Chat&step=1
+ */
+import { default as emojiCNLocales } from './locales/zh_cn';
+import { default as emojiENLocales } from './locales/en';
+import { EMOJI_TYPE } from '../../../constant';
+import { IEmojiGroupList } from '../../../interface';
+
+export const DEFAULT_BASIC_EMOJI_URL = 'https://web.sdk.qcloud.com/im/assets/emoji-plugin/';
+export const DEFAULT_BIG_EMOJI_URL = 'https://web.sdk.qcloud.com/im/assets/face-elem/';
+
+export const DEFAULT_BASIC_EMOJI_URL_MAPPING: Record<string, string> = {
+  '[TUIEmoji_Expect]': 'emoji_0@2x.png',
+  '[TUIEmoji_Blink]': 'emoji_1@2x.png',
+  '[TUIEmoji_Guffaw]': 'emoji_2@2x.png',
+  '[TUIEmoji_KindSmile]': 'emoji_3@2x.png',
+  '[TUIEmoji_Haha]': 'emoji_4@2x.png',
+  '[TUIEmoji_Cheerful]': 'emoji_5@2x.png',
+  '[TUIEmoji_Smile]': 'emoji_6@2x.png',
+  '[TUIEmoji_Sorrow]': 'emoji_7@2x.png',
+  '[TUIEmoji_Speechless]': 'emoji_8@2x.png',
+  '[TUIEmoji_Amazed]': 'emoji_9@2x.png',
+  '[TUIEmoji_Complacent]': 'emoji_10@2x.png',
+  '[TUIEmoji_Lustful]': 'emoji_11@2x.png',
+  '[TUIEmoji_Stareyes]': 'emoji_12@2x.png',
+  '[TUIEmoji_Giggle]': 'emoji_13@2x.png',
+  '[TUIEmoji_Daemon]': 'emoji_14@2x.png',
+  '[TUIEmoji_Rage]': 'emoji_15@2x.png',
+  '[TUIEmoji_Yawn]': 'emoji_16@2x.png',
+  '[TUIEmoji_TearsLaugh]': 'emoji_17@2x.png',
+  '[TUIEmoji_Silly]': 'emoji_18@2x.png',
+  '[TUIEmoji_Wail]': 'emoji_19@2x.png',
+  '[TUIEmoji_Kiss]': 'emoji_20@2x.png',
+  '[TUIEmoji_Trapped]': 'emoji_21@2x.png',
+  '[TUIEmoji_Fear]': 'emoji_22@2x.png',
+  '[TUIEmoji_BareTeeth]': 'emoji_23@2x.png',
+  '[TUIEmoji_FlareUp]': 'emoji_24@2x.png',
+  '[TUIEmoji_Tact]': 'emoji_25@2x.png',
+  '[TUIEmoji_Shit]': 'emoji_26@2x.png',
+  '[TUIEmoji_ShutUp]': 'emoji_27@2x.png',
+  '[TUIEmoji_Sigh]': 'emoji_28@2x.png',
+  '[TUIEmoji_Hehe]': 'emoji_29@2x.png',
+  '[TUIEmoji_Silent]': 'emoji_30@2x.png',
+  '[TUIEmoji_Skull]': 'emoji_31@2x.png',
+  '[TUIEmoji_Mask]': 'emoji_32@2x.png',
+  '[TUIEmoji_Beer]': 'emoji_33@2x.png',
+  '[TUIEmoji_Cake]': 'emoji_34@2x.png',
+  '[TUIEmoji_RedPacket]': 'emoji_35@2x.png',
+  '[TUIEmoji_Bombs]': 'emoji_36@2x.png',
+  '[TUIEmoji_Ai]': 'emoji_37@2x.png',
+  '[TUIEmoji_Celebrate]': 'emoji_38@2x.png',
+  '[TUIEmoji_Bless]': 'emoji_39@2x.png',
+  '[TUIEmoji_Flower]': 'emoji_40@2x.png',
+  '[TUIEmoji_Watermelon]': 'emoji_41@2x.png',
+  '[TUIEmoji_Cow]': 'emoji_42@2x.png',
+  '[TUIEmoji_Fool]': 'emoji_43@2x.png',
+  '[TUIEmoji_Surprised]': 'emoji_44@2x.png',
+  '[TUIEmoji_Askance]': 'emoji_45@2x.png',
+  '[TUIEmoji_Monster]': 'emoji_46@2x.png',
+  '[TUIEmoji_Pig]': 'emoji_47@2x.png',
+  '[TUIEmoji_Coffee]': 'emoji_48@2x.png',
+  '[TUIEmoji_Ok]': 'emoji_49@2x.png',
+  '[TUIEmoji_Heart]': 'emoji_50@2x.png',
+  '[TUIEmoji_Sun]': 'emoji_51@2x.png',
+  '[TUIEmoji_Moon]': 'emoji_52@2x.png',
+  '[TUIEmoji_Star]': 'emoji_53@2x.png',
+  '[TUIEmoji_Rich]': 'emoji_54@2x.png',
+  '[TUIEmoji_Fortune]': 'emoji_55@2x.png',
+  '[TUIEmoji_857]': 'emoji_56@2x.png',
+  '[TUIEmoji_666]': 'emoji_57@2x.png',
+  '[TUIEmoji_Prohibit]': 'emoji_58@2x.png',
+  '[TUIEmoji_Convinced]': 'emoji_59@2x.png',
+  '[TUIEmoji_Knife]': 'emoji_60@2x.png',
+  '[TUIEmoji_Like]': 'emoji_61@2x.png',
+};
+
+export const BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [
+  {
+    emojiGroupID: 1,
+    type: EMOJI_TYPE.BIG,
+    url: DEFAULT_BIG_EMOJI_URL,
+    list: ['yz00', 'yz01', 'yz02', 'yz03', 'yz04', 'yz05', 'yz06', 'yz07', 'yz08',
+      'yz09', 'yz10', 'yz11', 'yz12', 'yz13', 'yz14', 'yz15', 'yz16', 'yz17'],
+  },
+  {
+    emojiGroupID: 2,
+    type: EMOJI_TYPE.BIG,
+    url: DEFAULT_BIG_EMOJI_URL,
+    list: ['ys00', 'ys01', 'ys02', 'ys03', 'ys04', 'ys05', 'ys06', 'ys07', 'ys08',
+      'ys09', 'ys10', 'ys11', 'ys12', 'ys13', 'ys14', 'ys15'],
+  },
+  {
+    emojiGroupID: 3,
+    type: EMOJI_TYPE.BIG,
+    url: DEFAULT_BIG_EMOJI_URL,
+    list: ['gcs00', 'gcs01', 'gcs02', 'gcs03', 'gcs04', 'gcs05', 'gcs06', 'gcs07',
+      'gcs08', 'gcs09', 'gcs10', 'gcs11', 'gcs12', 'gcs13', 'gcs14', 'gcs15', 'gcs16'],
+  },
+];
+
+export const BASIC_EMOJI_NAME_TO_KEY_MAPPING = {
+  ...Object.fromEntries(
+    Object.entries(emojiCNLocales)?.map(([key, val]) => [val, key]),
+  ),
+  ...Object.fromEntries(
+    Object.entries(emojiENLocales)?.map(([key, val]) => [val, key]),
+  ),
+};