@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.2

package/src/TUIRoom/components/AITools/AITranscription.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="conversation" ref="conversationContainer">
+    <div
+      v-for="(item, index) in conversations"
+      :key="index"
+      class="conversation-item"
+    >
+      <div class="title">
+        <span class="speaker">{{ item.speaker }}</span>
+        <span class="timestamp">{{ item.timestamp }}</span>
+      </div>
+      <div class="content">
+        <div v-for="(msg, msgIndex) in item.messages" :key="msgIndex">
+          {{ msg }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick } from 'vue';
+import { roomService, AI_TASK } from '../../services';
+
+const conversationContainer = ref<HTMLElement | null>(null);
+
+onMounted(() => scrollToBottom());
+
+const processedConversations = ref<
+  {
+    timestamp: string;
+    speaker: string;
+    content: string;
+  }[]
+>(processConversation(roomService.aiTask.transcriptionText.value));
+
+const scrollToBottom = async () => {
+  if (conversationContainer.value) {
+    await nextTick();
+    conversationContainer.value.scrollIntoView({ block: 'end' });
+  }
+};
+
+const conversations = computed(() => {
+  const result = [];
+  let currentSpeaker: string | null = null;
+  let currentTimestamp: string | null = null;
+  let currentMessages: string[] = [];
+
+  processedConversations.value.forEach(item => {
+    const [start, end] = item.timestamp.split('->');
+    const timestampMinute = start.slice(0, 5); // Take the "HH:MM" part
+
+    if (
+      item.speaker === currentSpeaker &&
+      timestampMinute === currentTimestamp
+    ) {
+      // Aggregate messages from the same speaker and within the same minute
+      currentMessages.push(item.content);
+    } else {
+      // New speakers or different minutes, save previous aggregation results
+      if (currentSpeaker !== null) {
+        result.push({
+          timestamp: currentTimestamp,
+          speaker: currentSpeaker,
+          messages: currentMessages,
+        });
+      }
+      // Update active speaker, timestamp, and message
+      currentSpeaker = item.speaker;
+      currentTimestamp = timestampMinute;
+      currentMessages = [item.content];
+    }
+  });
+
+  // Save the last set of aggregation results
+  if (currentSpeaker !== null) {
+    result.push({
+      timestamp: currentTimestamp,
+      speaker: currentSpeaker,
+      messages: currentMessages,
+    });
+  }
+
+  return result;
+});
+
+roomService.aiTask.on(AI_TASK.TRANSCRIPTION_TASK, data => {
+  if (!data) return;
+  processedConversations.value = processConversation(
+    data.transcriptionText.value
+  );
+});
+
+function processConversation(data: string) {
+  const pattern =
+    /(\d{2}:\d{2}:\d{2}->\d{2}:\d{2}:\d{2})\s+([\u4e00-\u9fa5\w]+):\s*(.*)/;
+
+  const conversations: {
+    timestamp: string;
+    speaker: string;
+    content: string;
+  }[] = [];
+
+  const lines = data.split('\n');
+
+  lines.forEach(line => {
+    const match = pattern.exec(line);
+    if (match) {
+      const timestamp = match[1];
+      const speaker = match[2];
+      const content = match[3];
+      conversations.push({
+        timestamp,
+        speaker,
+        content,
+      });
+    }
+  });
+
+  conversations.sort((a, b) => {
+    const timeA = a.timestamp.split('->')[0];
+    const timeB = b.timestamp.split('->')[0];
+    return timeA.localeCompare(timeB);
+  });
+
+  return conversations;
+}
+</script>
+
+<style scoped lang="scss">
+.conversation {
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.conversation-item {
+  margin-bottom: 10px;
+}
+
+.title {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: var(--font-color-4);
+  text-align: left;
+}
+
+.content {
+  padding: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  text-align: left;
+  background-color: var(--background-color-7);
+  border-radius: 8px;
+}
+</style>

package/src/TUIRoom/components/Chat/ChatKit/CHANGELOG.md

@@ -0,0 +1,145 @@
+## [2.2.7] (2024-09-13)
+
+### Features
+- 优化 C2C 会话音视频通话信令上屏(对齐微信体验)
+
+## [2.2.6] (2024-09-06)
+
+### Features
+- Work 类型群组支持普通群成员修改群名称、群公告信息
+
+## [2.2.3] (2024-07-05)
+
+### Features
+- 支持会话草稿
+- 支持富文本复制
+- 支持文本部分复制
+- 语音消息使用红点提示是否播放
+
+## Fix
+- 修复邀请加入群聊选人组件未过滤已有群成员问题
+- 修复 TUISearch 搜索文本消息出现 [系统消息] 前缀问题
+- 修复消息引用语音但展示为"聊天记录"的问题
+- 修复 Callkit 在 H5 环境下布局只有半屏的问题
+
+## [2.2.0] (2024-06-17)
+
+### Features
+- 支持消息多选、消息逐条转发、消息合并转发
+- 支持表情包自定义
+- 支持中英文 github readme
+- 被引用消息撤回时隐藏原始消息内容并提醒已撤回
+
+## [2.1.4] (2024-05-20)
+
+### Fix
+- 修复头像组件因加载图片失败导致的循环加载问题
+
+## [2.1.3] (2024-05-17)
+
+### Features
+- 点击空白区域时收起小表情面板和工具栏
+- callkit 提供音视频通话中途加人能力
+- 更新 roomkit 引用方式
+
+### Fix
+
+- 修复视频一定概率无法播放的问题
+- 修复消息引用的视觉左侧未对齐的问题
+
+## [2.1.1] (2024-04-26)
+
+### Features
+- 支持语音转文字
+- 文本消息转翻译兼容小表情上屏，兼容提及所有人
+
+### Fix
+- 优化已读回执详情列表超长昵称的显示效果
+- 解决转发消息已读回执失效的问题
+- 解决加没有群申请时额外请求用户信息的问题
+
+## [2.1.0] (2024-04-12)
+
+### Features
+- 新增消息翻译功能
+
+## [2.0.9] (2024-03-29)
+
+### Features
+- ScrollButton 支持未读新消息提示
+- 群未决申请展示优化
+- 兼容支持 H5 IOS longPress 事件
+
+### Update
+- 下线本地审核相关入口
+
+### Fix
+- 修复 nick 过长样式溢出问题
+
+## [2.0.8] (2024-03-15)
+
+### Fix
+- 修复已知问题，提升稳定性
+
+## [2.0.7] (2024-03-15)
+
+### Fix
+- TUIConversation network 断网显示优化
+- 修复消息列表滚动到顶部后"回到底部"按钮消失的问题
+- 修复一定概率下消息列表为空的问题
+
+## [2.0.6] (2024-03-01)
+
+### Features
+
+- 升级 universal api 引入方式
+
+## [2.0.5] (2024-02-04)
+
+### Features
+
+- 新增表情回复功能(需购买旗舰版)
+- 聊天界面更新黄脸小表情
+- 添加音频播放动画
+
+### Fix
+
+- 语音场景优化 修复了语音播放相关的体验问题
+
+## [2.0.4] (2024-01-19)
+
+### Features
+
+- 支持文本消息复制
+
+## [2.0.3] (2024-01-12)
+
+### Features
+
+- TUIContact 关系链支持用户在线状态。
+- TUIContact 中获取客服列表的时机调整为 Engine 设置商业化能力位之后。
+
+### Fix
+
+- 修复已知问题，提升稳定性
+
+## [2.0.2] (2024-01-05)
+
+### Fix
+
+- 修复 IOS13 消息无法发送问题
+- 修复已知问题，提升稳定性
+
+## [2.0.0] (2023-12-21)
+
+### Features
+
+- 全面支持 Vue2 & Vue3，包括以下主体功能：
+  - TUIChat: 负责消息界面展示，包括多类型消息收发，消息引用/删除/撤回/转发、查询消息已读回执详情等功能。
+  - TUIConversation: 负责会话列表的展示和编辑，包括会话置顶、会话消息免打扰、会话删除等功能.
+  - TUISearch: 负责消息云端搜索，包括全局搜索与会话内搜索，支持文本、图片、文件等多类型消息混合搜索，支持搜索时间范围选择与搜索结果定位，免费试用请点击 https://cloud.tencent.com/document/product/269/92648#ae4e3f5c-94db-4df3-8a49-65d23ce417b8 开通。
+  - TUIGroup: 负责群聊的创建以及群资料、群成员、群组权限、群公告、群禁言的管理。
+  - TUIContact: 负责联系人与群组展示，添加好友，移入黑名单，好友备注，信息展示等功能。
+- 同时，我们还提供了功能丰富的插件系统：
+  - TUICustomerService: 在线客服插件，支持灵活的路由排队、客服接待、智能机器人功能，配合功能丰富的管理端与数据分析能力，支持客服多终端办公，免费试用请点击 https://cloud.tencent.com/document/product/269/92648#ae4e3f5c-94db-4df3-8a49-65d23ce417b8 开通。
+  - TUICallKit: 音视频通话 UI 组件，支持两人或多人进行音视频通话，覆盖游戏社交、在线客服、视频客服、在线问诊、保险咨询等场景，免费试用请点击 https://cloud.tencent.com/document/product/269/79861#step1 开通。

package/src/TUIRoom/components/Chat/ChatKit/README.md

@@ -0,0 +1,94 @@
+<h1 align="center">chat-uikit-vue</h1>
+<p align="center">
+  Globally interconnected In-App Chat, user profile and relationship chains and online/offline push.
+</p>
+<p align="center">
+  <span>English / </span>
+  <a href="https://github.com/TencentCloud/chat-uikit-vue/blob/main/.github/README_ZH.md">简体中文</a>
+</p>
+
+![image](https://github.com/TencentCloud/chat-uikit-vue/assets/57951148/7bd24604-1e5e-4541-8992-245dccbbc810)
+![image](https://github.com/TencentCloud/chat-uikit-vue/assets/57951148/40ae2f49-39ae-432d-8d1b-5b46414bc3b4)
+
+## About chat-uikit-vue
+
+[chat-uikit-vue](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue) is a Vue UI component library based on Tencent Cloud Chat SDK. It provides universally used UI components that include Conversation, Chat, and Group components. Leveraging these meticulously crafted UI components, you can quickly construct an elegant, reliable, and scalable Chat application.
+
+> 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](https://console.tencentcloud.com/workorder/category?level1_id=29&level2_id=40&source=14&data_title=Chat&step=1) to contact us.
+
+
+## Core Capabilities
+
+- UIKit: Build a fully-featured chat app in just ten minutes using UIKit components
+- Various Message Types: Support multiple message types, such as text, images, audio, and video messages
+- Notifications: Timely notify users of app messages and drive higher conversion rates
+- Group Management: Create groups, manage group members, and customize profiles
+- Conversation Management: View information about unread messages, recent, pinned, or deleted chats
+
+## Demo
+
+👉🏻 [Free Demo](https://web.sdk.qcloud.com/im/demo/intl/index.html?scene=social)
+
+## Send Your First Message
+
+### Vue3
+- [Integration TUIKit](https://trtc.io/document/58644?platform=web&product=chat)
+- [Quick Run Demo](https://github.com/TencentCloud/chat-uikit-vue/blob/main/Vue3/Demo/README.md)
+
+### Vue2
+- [Integration TUIKit](https://trtc.io/document/58644?platform=web&product=chat)
+- [Quick Run Demo](https://github.com/TencentCloud/chat-uikit-vue/blob/main/Vue2/Demo/README.md)
+
+
+## TUILogin 
+
+``` javascript
+import { TUILogin } from '@tencentcloud/tui-core';
+```
+The options parameter is of the Object type. It contains the following attribute values:
+| Name | Type | Description |
+| --- | --- | --- |
+| SDKAppID | number | Required, SDKAppID of the chat app |
+| userID | string | Required, user ID|
+| userSig |string | Required, the password with which the user logs in to the Chat console. It is essentially the ciphertext generated by encrypting information such as the UserID.For the detailed generation method, see [Generating UserSig](https://trtc.io/document/34385) |
+| TIMPush | any | Optional, TIMPush plugin instance when uniapp build app packages |
+| pushConfig | object | Optional, TIMPush plugin's config |
+| useUploadPlugin | boolean | Optional, whether to use the upload plugin, the default is false |
+| proxyServer | string | Optional, WebSocket server proxy address |
+| fileUploadProxy | string | Optional, image, video, file upload proxy address |
+| fileDownloadProxy | string | Optional, image, video, file download proxy address|
+| framework | string \| undefined | Required, UI framework type, optional values: vue2、vue3、undefined |
+
+``` javascript
+// Login
+TUILogin.login(options);
+```
+
+``` javascript
+// Logout
+TUILogin.logout();
+```
+
+``` javascript
+// Set the SDK log level.
+// 0: Common level. You are advised to use this level during access as it covers more logs.
+// 1: Release level. You are advised to use this level for key information in a production environment.
+TUILogin.setLogLevel(0); 
+```
+
+``` javascript
+// Get Chat SDK instance
+const { chat } = TUILogin.getContext();
+```
+
+## Documentation
+- [Home page](https://trtc.io/document/50061?platform=web&product=chat)
+- [@tencentcloud/chat-uikit-vue npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue)
+- [Chat SDK](https://trtc.io/document/34309?platform=web&product=chat)
+
+## Contact Us
+Join a Tencent Cloud Chat developer group for Reliable technical support & Product details & Constant exchange of ideas.
+- Telegram group (EN): [join](https://t.me/+1doS9AUBmndhNGNl)
+- WhatsApp group (EN): [join](https://chat.whatsapp.com/Gfbxk7rQBqc8Rz4pzzP27A)
+- Telegram group (ZH): [join](https://t.me/tencent_imsdk)
+- WhatsApp group (ZH): [join](https://chat.whatsapp.com/IVa11ZkVmKTEwSWsAzSyik)

package/src/TUIRoom/components/Chat/ChatKit/adapter-vue.ts

@@ -0,0 +1,44 @@
+import * as Vue from 'vue';
+let vueVersion: number;
+let framework = 'vue2';
+let createVNode = (
+  arg1: any,
+  arg2: any,
+): { component: any; props: any; data: any } => {
+  return {} as { component: any; props: any; data: any };
+};
+let render = (arg1: any, arg2: any) => {
+  return;
+};
+
+try {
+  if (
+    (Vue as any)?.default?.version
+    && (Vue as any)?.default?.version?.startsWith('2.7.')
+  ) {
+    // >= Vue 2.7.0
+    vueVersion = 2.7;
+  } else if (
+    (Vue as any)?.default?.version
+    && (Vue as any)?.default?.version?.startsWith('2.')
+  ) {
+    // < Vue 2.7.0
+    vueVersion = 2;
+  } else {
+    // >= Vue 3.0.0
+    vueVersion = 3;
+    framework = 'vue3';
+    createVNode = (Vue as any)?.createVNode;
+    render = (Vue as any)?.render;
+    // exportedAPIOrigin = Vue;
+  }
+} catch (error: any) {
+  // >= Vue 3.0.0
+  vueVersion = 3;
+  framework = 'vue3';
+  createVNode = (Vue as any)?.createVNode;
+  render = (Vue as any)?.render;
+}
+console.warn(`[adapter-vue]: vue version is ${vueVersion}`);
+export { vueVersion, framework, render, createVNode };
+export * from 'vue';

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/add-circle.svg

@@ -0,0 +1,7 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#188;&#150;&#231;&#187;&#132; 4">
+<circle id="&#230;&#164;&#173;&#229;&#156;&#134;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189; 27" cx="28" cy="28.8535" r="26" stroke="#444444" stroke-width="4"/>
+<rect id="&#231;&#159;&#169;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189; 8" x="15" y="27.8535" width="26" height="4" rx="1" fill="#444444"/>
+<rect id="&#231;&#159;&#169;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189; 8_2" x="26" y="42.8535" width="26" height="4" rx="1" transform="rotate(-90 26 42.8535)" fill="#444444"/>
+</g>
+</svg>

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

@@ -0,0 +1,12 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity="0.80492">
+        <rect x="0.25" y="7.25" width="13.5" height="0.5" rx="0.25" stroke="#232832"
+            style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;"
+            stroke-width="0.5" />
+        <rect x="6.75" y="14.25" width="13.5" height="0.5" rx="0.25"
+            transform="rotate(-90 6.75 14.25)" stroke="#232832"
+            style="stroke:#232832;stroke:color(display-p3 0.1360 0.1574 0.1949);stroke-opacity:1;"
+            stroke-width="0.5" />
+    </g>
+</svg>
+    

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

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>画板</title>
+    <g id="画板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="at" fill-rule="nonzero">
+            <g id="编组-11">
+                <circle id="蒙版" fill="#006EFF" cx="9" cy="9" r="9"></circle>
+                <path d="M9.66185229,2.28113733 C6.35797576,1.9652543 3.31197412,4.08255376 2.47142946,7.27925624 C1.63088481,10.4759587 3.24414254,13.8075738 6.27970227,15.1439012 C7.13080638,15.5270729 8.05149341,15.7333128 8.98542228,15.75 C10.4722047,15.75 11.9176115,15.2625575 13.0981167,14.3627071 C13.3947741,14.1374908 13.4522747,13.7156728 13.2266384,13.4198867 C13.1178721,13.276076 12.9558003,13.1816064 12.776601,13.1575656 C12.5974017,13.1335248 12.415994,13.1819143 12.2728721,13.2919325 C10.3435542,14.7428224 7.68158841,14.7434418 5.75158944,13.29345 C3.82159048,11.8434583 3.09194171,9.29474777 3.96409619,7.04962006 C4.83625067,4.80449236 7.09854886,3.40780813 9.50627338,3.62802361 C12.3207581,3.95233736 14.4329906,6.34319268 14.3968623,9.16372615 L14.3968623,9.62166747 C14.3952895,9.9342631 14.2661407,10.232791 14.0390751,10.4486938 C13.8120095,10.6645966 13.5065396,10.7793212 13.1928169,10.7665208 C12.550363,10.6962989 12.071833,10.14342 12.0970003,9.50044771 L12.0970003,6.59117338 C12.0970003,6.21924101 11.7941523,5.91773024 11.4205703,5.91773024 C11.0787978,5.91484427 10.78856,6.16623611 10.7441403,6.50362577 C10.1146233,5.91340542 9.28194317,5.58565993 8.41722108,5.58774312 C6.79570933,5.59984582 5.40245718,6.73673734 5.07217831,8.31729266 C4.74189943,9.89784798 5.56412488,11.4936147 7.04624976,12.1485503 C8.52837464,12.8034859 10.2686288,12.3400523 11.2244056,11.0358981 C11.622024,11.6482852 12.275384,12.0499682 13.0034289,12.1296342 C13.7314737,12.2093002 14.4568676,11.9584868 14.9785921,11.4466984 C15.4798496,10.9719157 15.7593539,10.3104139 15.7497223,9.62166747 L15.7497223,9.16372615 C15.7810534,5.6593071 13.1575247,2.69329944 9.66185229,2.28113733 Z M8.43074968,11.0965079 C7.27638137,11.0965079 6.34058097,10.1648397 6.34058097,9.01556866 C6.34058097,7.86629763 7.27638137,6.93462938 8.43074968,6.93462938 C9.58511798,6.93462938 10.5209184,7.86629763 10.5209184,9.01556866 C10.5172055,10.1633051 9.58357657,11.0928115 8.43074968,11.0965079 L8.43074968,11.0965079 Z" id="形状" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 57" class="design-iconfont">
+  <g fill="none" fill-rule="evenodd">
+    <path stroke="#444" stroke-width="4" d="M28 2A26 26 0 1 0 28 54A26 26 0 1 0 28 2Z" transform="translate(0 .853448)"/>
+    <path d="M3.22061856,17.5880403 C3.66244636,17.5880403 4.02061856,17.9462125 4.02061856,18.3880403 L4.02061856,18.6926914 C4.02061856,24.8806658 8.93625507,29.8970101 15,29.8970101 C20.967495,29.8970101 25.8230402,25.0386509 25.975681,18.9864559 L25.9793814,18.6926914 L25.9793814,18.3880403 C25.9793814,17.9462125 26.3375536,17.5880403 26.7793814,17.5880403 L29.2,17.5880403 C29.6418278,17.5880403 30,17.9462125 30,18.3880403 L30,18.6926914 C30,27.1466845 23.2842712,34 15,34 C6.82193736,34 0.172455987,27.3212841 0.00330065692,19.0170447 L0,18.6926914 L0,18.3880403 C-1.65130603e-16,17.9462125 0.3581722,17.5880403 0.8,17.5880403 L3.22061856,17.5880403 Z M15.1965847,0 C19.4037284,0 22.8142432,3.57961711 22.8142432,7.9953621 L22.8142432,18.3119584 C22.7872128,22.7074732 19.3846075,26.2557375 15.1965847,26.2557375 L14.8034153,26.2557375 C10.5962716,26.2557375 7.18575682,22.6760398 7.18575682,18.2603754 L7.18575682,7.94377912 C7.21278722,3.54818373 10.6153925,0 14.8034153,0 L15.1965847,0 Z M15.1965847,4.10298992 L14.8034153,4.10298992 C12.9144516,4.10298992 11.325224,5.69669854 11.2126654,7.73818076 L11.2063754,7.94377912 L11.2063754,18.2603754 C11.2063754,20.365303 12.7386643,22.0414789 14.614709,22.1474289 L14.8034153,22.1527476 L15.1965847,22.1527476 C17.0855164,22.1527476 18.6747739,20.5589954 18.7873345,18.5175525 L18.7936246,18.3119584 L18.7936246,7.9953621 C18.7936246,5.89038947 17.2613666,4.21425569 15.385294,4.10830842 L15.1965847,4.10298992 Z" transform="translate(13 12)" fill="#444" fill-rule="nonzero"/>
+  </g>
+</svg>

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

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" viewBox="0 0 48 48" version="1.1">
+  <title>ic_back_white</title>
+  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="02.-查看信息-示例好友" transform="translate(-32.000000, -200.000000)">
+      <g id="编组-6" transform="translate(0.000000, 176.000000)">
+        <g id="ic_back_white" transform="translate(32.000000, 24.000000)">
+          <g id="ic_back_black" fill="#444444" fill-rule="nonzero">
+            <path d="M9.51231071,24 L23.5198286,38.7290411 C23.785378,39.0082689 23.7753168,39.4496082 23.4973187,39.7164448 L21.6255915,41.5130226 C21.3466827,41.7807332 20.9035602,41.7716553 20.6358496,41.4927466 C20.6351032,41.491969 20.6343586,41.4911896 20.6336157,41.4904085 L4.45876399,24.4823948 C4.2017544,24.2121467 4.2017544,23.7878533 4.45876399,23.5176052 L20.6336157,6.50959152 C20.900035,6.22944906 21.3431109,6.21832422 21.6232533,6.48474351 C21.6240344,6.48548634 21.6248138,6.48623097 21.6255915,6.48697741 L23.4973187,8.28355524 C23.7753168,8.55039175 23.785378,8.99173114 23.5198286,9.27095893 L9.51231071,24 L9.51231071,24 Z" id="Path-2"></path>
+          </g>
+          <rect id="矩形" x="0" y="0" width="48" height="48"></rect>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

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

@@ -0,0 +1,6 @@
+<svg width="33" height="23" viewBox="0 0 33 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M0.5 4.33337C0.5 2.12424 2.29086 0.333374 4.5 0.333374H19.1667C21.3758 0.333374 23.1667 2.12424 23.1667 4.33337V18.3334C23.1667 20.5425 21.3758 22.3334 19.1667 22.3334H4.5C2.29086 22.3334 0.5 20.5425 0.5 18.3334V4.33337ZM4.5 5.45837C4.5 4.90609 4.94771 4.45837 5.5 4.45837H7.5C8.05228 4.45837 8.5 4.90609 8.5 5.45837V7.58337C8.5 8.13566 8.05228 8.58337 7.5 8.58337H5.5C4.94771 8.58337 4.5 8.13566 4.5 7.58337V5.45837ZM33 4.85879C33 3.68986 31.7222 2.97013 30.7225 3.576L25.5742 6.69633L25.3333 6.8423V7.12393V15.43V15.7017L25.5613 15.8495L30.684 19.1709C31.6819 19.8179 33 19.1016 33 17.9122V4.85879ZM31.2408 4.43119C31.5741 4.22923 32 4.46914 32 4.85879V17.9122C32 18.3087 31.5606 18.5475 31.228 18.3318L26.3333 15.1583V7.40555L31.2408 4.43119Z"
+        fill="#333333" />
+</svg>
+    

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/call-voice.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="12" viewBox="0 0 32 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M8.6347 11.9983C9.72788 11.9992 10.6193 11.1223 10.6362 10.0292L10.673 7.64717C11.6292 7.36896 13.5482 6.92739 16.0961 6.92739C18.6443 6.92739 20.5804 7.36912 21.5479 7.64767L21.5621 9.97475C21.5689 11.0721 22.4585 11.9591 23.5559 11.9625L29.9833 11.9825C31.0878 11.9859 31.986 11.0933 31.9895 9.98883L32 6.68064C32 4.65824 30.7746 2.85759 28.9507 2.2C26.1675 1.1964 21.6615 0 16 0C10.3386 0 5.83262 1.1964 3.04934 2.2C2.38985 2.43778 1.80885 2.82489 1.33541 3.31805C0.499655 4.18858 0.000161509 5.38952 0 6.68064L0.00557949 9.99594C0.00743508 11.0985 0.90127 11.9916 2.00385 11.9926L8.6347 11.9983Z"
+        fill="#333333" />
+</svg>
+    

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

@@ -0,0 +1,23 @@
+<?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>清除</title>
+  <g id="页面-2备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="创建群聊" transform="translate(-1243.000000, -413.000000)">
+      <g id="Group-1364" transform="translate(650.000000, 343.000000)">
+        <g id="Group-1363" transform="translate(290.000000, 46.000000)">
+          <g id="Group-1358" transform="translate(0.000000, 24.000000)">
+            <g id="清除" transform="translate(303.000000, 0.000000)">
+              <path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z" id="矩形"></path>
+              <path d="M1,8 C1,11.8659999 4.13400006,15 8,15 C11.8659999,15 15,11.8659999 15,8 C15,4.13400006 11.8659999,1 8,1 L8,1 C4.13400006,1 1,4.13400006 1,8 Z" fill="#999999"></path>
+              <g id="编组" transform="translate(8.000000, 8.000000) rotate(-315.000000) translate(-8.000000, -8.000000) translate(4.000000, 4.000000)" fill="#FFFFFF">
+                <rect id="矩形备份" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " x="1.8189894e-12" y="3.5" width="8" height="1" rx="0.5"></rect>
+                <rect id="矩形备份" transform="translate(4.000000, 4.000000) rotate(-360.000000) translate(-4.000000, -4.000000) " x="0" y="3.5" width="8" height="1" rx="0.5"></rect>
+              </g>
+              <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/check-sm.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.50001 13C2.91038 13 0 10.0896 0 6.50001C0 2.91038 2.91038 0 6.50001 0C10.0896 0 13 2.91038 13 6.50001C13 10.0896 10.0896 13 6.50001 13ZM5.05051 9.05234C5.31489 9.31679 5.74359 9.31685 6.00805 9.05247C6.00809 9.05242 6.00813 9.05238 6.00817 9.05234L10.1129 4.94758C10.3774 4.68313 10.3774 4.25437 10.1129 3.98992C9.84847 3.72546 9.41971 3.72546 9.15526 3.98992L5.50008 7.58659L3.86425 5.95076C3.5998 5.68631 3.17104 5.68631 2.90659 5.95076C2.64213 6.21521 2.64213 6.64398 2.90659 6.90843L5.05051 9.05235L5.05051 9.05234Z" fill="#999"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.92904 6L11.815 1.11198C12.0617 0.86524 12.0617 0.458461 11.815 0.211725L11.7884 0.185051C11.5417 -0.0616838 11.1351 -0.0616838 10.8885 0.185051L6.0025 5.07974L1.11651 0.185051C0.869879 -0.0616838 0.463269 -0.0616838 0.216637 0.185051L0.189974 0.211725C-0.0633245 0.458461 -0.0633245 0.86524 0.189974 1.11198L5.07596 6L0.189974 10.888C-0.0566588 11.1348 -0.0566588 11.5415 0.189974 11.7883L0.216637 11.8149C0.463269 12.0617 0.869879 12.0617 1.11651 11.8149L6.0025 6.92692L10.8885 11.8149C11.1351 12.0617 11.5417 12.0617 11.7884 11.8149L11.815 11.7883C12.0617 11.5415 12.0617 11.1348 11.815 10.888L6.92904 6Z" fill="#8F959E" style="fill:#8F959E;fill:color(display-p3 0.5608 0.5843 0.6196);fill-opacity:1;"/>
+</svg>

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

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_2075_534" fill="white">
+<rect y="6.10352e-05" width="16" height="16" rx="0.5"/>
+</mask>
+<rect y="6.10352e-05" width="16" height="16" rx="0.5" fill="white" stroke="#444444" stroke-width="4" mask="url(#path-1-inside-1_2075_534)"/>
+<path d="M7.276 3.43201H8.872L12.148 12H10.648L9.868 9.85201H6.28L5.5 12H4L7.276 3.43201ZM6.7 8.70001H9.448L8.104 4.94401H8.056L6.7 8.70001Z" fill="#444444"/>
+</svg>

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

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_1_4" fill="white">
+<rect y="6.10352e-05" width="16" height="16" rx="0.5"/>
+</mask>
+<rect y="6.10352e-05" width="16" height="16" rx="0.5" fill="white" stroke="#444444" stroke-width="4" mask="url(#path-1-inside-1_1_4)"/>
+<path d="M4.51199 5.81608V6.39208H5.74399C6.10399 7.62408 6.74399 8.69608 7.67199 9.60808C6.80799 10.3921 5.70399 10.9601 4.35999 11.3201L4.66399 11.8241C6.02399 11.4321 7.15999 10.8161 8.07199 9.97608C8.93599 10.7201 10.024 11.3361 11.352 11.8321L11.664 11.3521C10.384 10.8801 9.31999 10.2881 8.47199 9.56808C9.25599 8.72008 9.84799 7.65608 10.24 6.39208H11.488V5.81608H8.43199C8.17599 5.26408 7.90399 4.79208 7.59999 4.40808L7.02399 4.61608C7.34399 4.99208 7.60799 5.39208 7.82399 5.81608H4.51199ZM6.31199 6.39208H9.63999C9.30399 7.49608 8.78399 8.43208 8.07199 9.20808C7.23999 8.40808 6.65599 7.47208 6.31199 6.39208Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.31199 5.61608H7.48751C7.31129 5.31249 7.10719 5.02243 6.87168 4.74571L6.68467 4.52597L7.66745 4.17108L7.7568 4.28394C8.0517 4.65645 8.31433 5.10396 8.55891 5.61608H11.688V6.59208H10.3863C10.0114 7.74389 9.46813 8.73403 8.75997 9.54663C9.55979 10.1899 10.5494 10.7279 11.7332 11.1644L11.9682 11.2511L11.4323 12.0756L11.282 12.0194C10.0044 11.5423 8.9389 10.9527 8.07627 10.2412C7.1617 11.0446 6.04107 11.6353 4.71938 12.0163L4.57197 12.0587L4.05139 11.1957L4.30824 11.1269C5.54648 10.7952 6.56828 10.2862 7.38032 9.59789C6.54448 8.73191 5.95109 7.72929 5.59553 6.59208H4.31199V5.61608ZM5.74399 6.39208C6.08545 7.56066 6.67884 8.58529 7.53097 9.46597C7.57721 9.51377 7.62422 9.56114 7.67199 9.60808C7.62257 9.65292 7.57237 9.69705 7.52139 9.74048C6.72554 10.4184 5.73841 10.9245 4.56 11.2645C4.49393 11.2835 4.42726 11.3021 4.35999 11.3201L4.66399 11.8241C6.02399 11.4321 7.15999 10.8161 8.07199 9.97608C8.93599 10.7201 10.024 11.3361 11.352 11.8321L11.664 11.3521C11.5996 11.3283 11.5357 11.3043 11.4724 11.2799C10.3526 10.8491 9.40393 10.3229 8.6263 9.69577C8.57409 9.65366 8.52265 9.6111 8.47199 9.56808C8.51719 9.51918 8.56176 9.46957 8.60569 9.41924C9.32359 8.59671 9.87059 7.5832 10.24 6.39208H11.488V5.81608H8.43199C8.17599 5.26408 7.90399 4.79208 7.59999 4.40808L7.02399 4.61608C7.07008 4.67024 7.115 4.72489 7.15879 4.78004C7.3708 5.04705 7.55614 5.32573 7.71752 5.61608C7.75424 5.68215 7.78972 5.74881 7.82399 5.81608H4.51199V6.39208H5.74399ZM6.31199 6.39208C6.3334 6.45931 6.35574 6.52597 6.37901 6.59208C6.70795 7.52643 7.223 8.34973 7.92962 9.06741C7.97624 9.11476 8.0237 9.16165 8.07199 9.20808C8.07199 9.20808 8.07198 9.20809 8.07199 9.20808C8.11712 9.1589 8.16148 9.10906 8.20507 9.05858C8.80725 8.36128 9.26261 7.54091 9.5765 6.59208C9.59834 6.52604 9.61951 6.45937 9.63999 6.39208H6.31199ZM6.59144 6.59208C6.90978 7.46685 7.39807 8.23985 8.06267 8.91746C8.62858 8.25932 9.06168 7.48673 9.36556 6.59208H6.59144Z" fill="#444444"/>
+</svg>

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/d-left-arrow.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#444444"
+        style="fill:#444444;fill:color(display-p3 0.2667 0.2667 0.2667);fill-opacity:1;"
+        d="M529.408 149.376a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z"></path>
+</svg>

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/d-right-arrow.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#444444"
+        style="fill:#444444;fill:color(display-p3 0.2667 0.2667 0.2667);fill-opacity:1;"
+        d="M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688zm-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z"></path>
+</svg>

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

@@ -0,0 +1,25 @@
+<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;">
+        <path id="&#231;&#155;&#180;&#231;&#186;&#191;" d="M2.15682 4.76268H14.0347"
+            stroke="#FF584C"
+            style="stroke:#FF584C;stroke:color(display-p3 1.0000 0.3451 0.2980);stroke-opacity:1;"
+            stroke-linecap="round" />
+        <path id="&#231;&#155;&#180;&#231;&#186;&#191;&#229;&#164;&#135;&#228;&#187;&#189;"
+            d="M5.23978 2.15307H11.1684" stroke="#FF584C"
+            style="stroke:#FF584C;stroke:color(display-p3 1.0000 0.3451 0.2980);stroke-opacity:1;"
+            stroke-linecap="round" />
+        <path id="&#231;&#155;&#180;&#231;&#186;&#191;&#229;&#164;&#135;&#228;&#187;&#189; 2"
+            d="M6.90014 7.32796V10.9714" stroke="#FF584C"
+            style="stroke:#FF584C;stroke:color(display-p3 1.0000 0.3451 0.2980);stroke-opacity:1;"
+            stroke-linecap="round" />
+        <path id="&#231;&#155;&#180;&#231;&#186;&#191;&#229;&#164;&#135;&#228;&#187;&#189; 3"
+            d="M9.58605 7.32796V10.9714" stroke="#FF584C"
+            style="stroke:#FF584C;stroke:color(display-p3 1.0000 0.3451 0.2980);stroke-opacity:1;"
+            stroke-linecap="round" />
+        <path id="&#231;&#159;&#169;&#229;&#189;&#162;"
+            d="M4.14331 4.8316H12.1596V12.9091C12.1596 13.5367 11.6508 14.0454 11.0232 14.0454H5.27968C4.65208 14.0454 4.14331 13.5367 4.14331 12.9091V4.8316Z"
+            stroke="#FF584C"
+            style="stroke:#FF584C;stroke:color(display-p3 1.0000 0.3451 0.2980);stroke-opacity:1;" />
+    </g>
+</svg>
+    

package/src/TUIRoom/components/Chat/ChatKit/assets/icon/double-arrow.svg

@@ -0,0 +1 @@
+<svg t="1660053550964" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3181" width="200" height="200"><path d="M95.658667 461.354667a71.637333 71.637333 0 0 0 0 101.290666l365.696 365.696a71.637333 71.637333 0 0 0 101.290666 0l365.696-365.696a71.637333 71.637333 0 1 0-101.248-101.290666L512 776.448l-315.093333-315.093333a71.594667 71.594667 0 0 0-101.248 0z" p-id="3182" fill="#bfbfbf"></path><path d="M95.658667 95.658667a71.637333 71.637333 0 0 0 0 101.248l365.696 365.738666a71.594667 71.594667 0 0 0 101.290666 0l365.696-365.738666a71.637333 71.637333 0 0 0-101.248-101.248L512 410.709333 196.906667 95.658667a71.637333 71.637333 0 0 0-101.248 0z" p-id="3183" fill="#bfbfbf"></path></svg>

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

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5L7.21955 10L3 5" stroke="#979797"/>
+</svg>