@tencentcloud/ai-desk-customer-vue 0.1.5 → 0.2.0

package/README.md

@@ -1,12 +1,393 @@
-## 简介
-@tencentcloud/ai-desk-customer-vue 和 @tencentcloud/ai-desk-customer-uniapp 是基于 uikit 的客服插件，专为企业客服人员设计，用于为客户提供咨询解答服务。它具备丰富的功能，如消息快速回复、自动回复、访客信息查看、营销数据分析、客户管理等，并且支持多渠道接入，可以实现多样化集成。 在电商行业中，客服插件的功能更加贴合电商行业的特点，例如购物车信息互通、链接自动识别、多店铺管理等功能。它具有以下优势：
- - 提高客服效率：客服插件可以快速回复客户的问题，并且支持自动回复功能，可以大大减少客服人员的工作量；
- - 提升客户体验：客服插件可以实时显示客户信息，方便客服人员了解客户需求，提供更加精准的服务，提升客户体验；
- - 加强客户管理：客服插件可以记录客户的历史对话内容，方便了解客户的需求和反馈，提升客户管理水平；
- - 优化营销策略：客服插件可以收集客户的意见和建议，帮助企业优化营销策略，提升营销效果。
+## 介绍
 
+智能客服用户端 Web UIKit。使用此 UIKit，您可以在一天内将智能客服的能力集成到您的 Web 或 Hybrid 项目。极简接入，用 AI 为您的产品降本增效。其流程如下图所示：
 
-### 文档
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/7de563a1f4cf11efa8355254001c06ec.png)
 
-详见: [@tencentcloud/ai-desk-customer-vue 文档](https://cloud.tencent.com/document/product/269/102783)
-[@tencentcloud/ai-desk-customer-uniapp 文档](https://cloud.tencent.com/document/product/269/97537)
+
+## 效果展示
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/d0637be3f42811efa8355254001c06ec.png)
+
+
+## 开发环境要求
+- Vue ( 全面支持 Vue2 & Vue3 ， 请您在下方接入时选择您所匹配的 Vue 版本接入指引进行接入)
+
+- TypeScript （如果您是 js 项目， 请参见 [常见问题- js 工程如何接入 TUIKit 组件](https://cloud.tencent.com/document/product/269/68493#dbce298f-6d21-4221-86fc-12b0153eaef8) 进行配置 ts 渐进式支持）
+
+- sass（sass-loader 版本 ≤ 10.1.1）
+
+- node（node.js ≥ 16.0.0）
+
+- npm（版本请与 node 版本匹配）
+
+
+## UIKit 源码集成
+
+### 步骤1：创建项目
+
+支持使用 webpack 或 vite 创建项目工程，配置 Vue3 / Vue2 + TypeScript + sass。以下是几种项目工程搭建示例：
+
+
+
+【vue-cli】
+
+> **注意：**
+> 
+
+> 请您务必保证您的** @vue/cli 版本在 5.0.0** 以上，您可使用以下示例代码升级您的 @vue/cli 版本至 v5.0.8。
+> 
+
+
+使用 vue-cli 方式创建项目， 配置 Vue2 / Vue3 + TypeScript + sass。
+如果您尚未安装 vue-cli 或者 vue-cli 版本低于 5.0.0 ，可以在 terminal 或 cmd 中采用如下方式进行安装：
+
+
+【shell】
+``` bash
+npm install -g @vue/cli@5.0.8 sass sass-loader@10.1.1
+```
+
+通过 vue-cli 创建项目，并选择下图中所选配置项。
+
+
+【shell】
+``` bash
+vue create ai-desk-example
+```
+
+请务必保证按照如下配置选择：
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027119864/f2327fbe352211ef9397525400fdb830.png)
+
+创建完成后，切换到项目所在目录：
+``` bash
+cd ai-desk-example
+```
+
+如果您是 vue2 项目，请根据您所使用的 Vue 版本进行以下相应的环境配置， vue3 项目请忽略。
+
+
+
+【vue2.7】
+``` bash
+npm i vue@2.7.9 vue-template-compiler@2.7.9
+```
+
+【vue2.6及以下】
+``` bash
+npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
+```
+
+【vite】
+
+> **说明：**
+> 
+
+> Vite 需要[**Node.js**](https://nodejs.org/en/)** 版本 18+，20+。**当您的包管理器发出警告时，请注意升级您的 Node 版本，详情请参考 [vite 官网](https://cn.vitejs.dev/guide/)。
+> 
+
+
+使用 vite 方式创建项目，按照下图选项配置 Vue + TypeScript 。
+``` bash
+npm create vite@latest
+```
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/94f4888bf42911efa8355254001c06ec.png)
+
+
+之后切换到项目目录，安装项目依赖：
+``` bash
+cd ai-desk-example
+npm install
+```
+
+安装插件所需 sass 环境依赖：
+``` bash
+npm i -D sass sass-loader
+```
+
+> **说明：**
+> 
+
+> 请删除 **src/style.css** 内的项目默认样式，避免样式问题。
+> 
+
+
+### 步骤2：下载 UI 组件
+
+通过 npm 方式下载 UI 组件，并将 UI 组件复制到自己工程的 src 目录下：
+
+
+
+【macOS  端】
+
+
+【shell】
+``` bash
+npm i @tencentcloud/ai-desk-customer-vue
+```
+
+
+【shell】
+``` bash
+mkdir -p ./src/ai-desk-customer-vue && rsync -av --exclude={'node_modules','package.json','excluded-list.txt','srcipt'} ./node_modules/@tencentcloud/ai-desk-customer-vue/ ./src/ai-desk-customer-vue
+```
+
+【Windows  端】
+
+
+【shell】
+``` bash
+npm i @tencentcloud/ai-desk-customer-vue
+```
+
+
+【shell】
+``` bash
+xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-vue /i /e /exclude:.\node_modules\@tencentcloud\ai-desk-customer-vue\excluded-list.txt
+```
+
+### 步骤3：引入 UI 组件
+
+##### 在需要展示的页面，引入 UI 的组件即可使用。
+
+##### 例如：在 App.vue 页面中实现以下代码，即可快速搭建客服咨询界面（以下示例代码同时支持 Web 端与 H5 端）：
+
+> **说明：**
+> 
+
+> 以下示例代码使用了 setup 语法，如果您的项目没有使用 setup 语法，请按照 Vue3/Vue2 的标准方式注册组件。
+> 
+
+
+
+
+【vue3】
+``` javascript
+<template>
+  <CustomerServiceChat
+    :SDKAppID=""
+    userID=""
+    userSig=""
+    :style="{ width: '600px', height: '970px', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    />
+</template>
+<script setup lang="ts">
+    import { CustomerServiceChat } from './ai-desk-customer-vue';
+</script>
+<style scoped>
+</style>
+```
+
+【vue2.7】
+``` javascript
+<template>
+  <div id="app">
+    <CustomerServiceChat
+    :SDKAppID=""
+    userID=""
+    userSig=""
+    :style="{ width: '600px', height: '970px', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { CustomerServiceChat } from "./ai-desk-customer-vue";
+</script>
+<style lang="scss">
+body {
+  margin: 0;
+}
+</style>
+```
+
+【vue2.6及以下】
+``` javascript
+<template>
+  <div id="app">
+    <CustomerServiceChat
+    :SDKAppID=""
+    userID=""
+    userSig=""
+    :style="{ width: '600px', height: '970px', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { CustomerServiceChat } from "./ai-desk-customer-vue";
+</script>
+<style lang="scss">
+body {
+  margin: 0;
+}
+</style>
+```
+1. 安装支持 composition-api 以及 script setup 的相关依赖，以及 vue2.6 相关依赖。
+
+``` javascript
+npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
+```
+2. 在 `main.ts/mian.js `中引入 VueCompositionAPI。
+
+``` javascript
+import VueCompositionAPI from "@vue/composition-api";
+Vue.use(VueCompositionAPI);
+```
+3. 在 `vue.config.js `中增加，若没有该文件请新建。
+
+``` javascript
+const ScriptSetup = require("unplugin-vue2-script-setup/webpack").default;
+module.exports = {
+  parallel: false, // disable thread-loader, which is not compactible with this plugin
+  configureWebpack: {
+    plugins: [
+      ScriptSetup({
+        /* options */
+      }),
+    ],
+  },
+  chainWebpack(config) {
+    // disable type check and let `vue-tsc` handles it
+    config.plugins.delete("fork-ts-checker");
+  },
+};
+```
+4. 在 `src/ai-desk-customer-vue/adapter-vue.ts` 文件最后, 替换导出源：
+
+``` javascript
+// 初始写法
+export * from "vue";
+// 替换为
+export * from "@vue/composition-api";
+```
+
+### 步骤4： 获取 SDKAppID 、userID 、 userSig
+
+设置` App.vue `中 CustomerServiceChat 组件的 props 属性 SDKAppID、userID、userSig 。
+- SDKAppID 信息，可通过 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取:
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027984635/98fbf9465ebf11ef8f105254002693fd.png)
+
+- userID 信息，可通过单击 [ 即时通信 IM 控制台 -【账号管理】](https://console.cloud.tencent.com/im/account-management)，切换至目标应用所在账号，即可创建账号并获取 userID。
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027984635/98fee9bb5ebf11efb927525400fdb830.png)
+
+- userSig 信息，可单击 [ 即时通信 IM 控制台 > 开发工具 > UserSig生成&校验](https://console.cloud.tencent.com/im/tool-usersig)，填写创建的 userID，即可生成 userSig。
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027984635/9907771d5ebf11efb66652540055f650.png)
+
+
+### 步骤5：启动项目，发起您的第一条客服咨询
+
+执行以下命令启动项目：
+
+
+
+【vue-cli】
+
+> **说明：**
+> 
+
+> 由于 vue-cli 默认开启 webpack 全局 overlay 报错信息提示，为了您有更好的体验，**建议您关闭全局 overlay 报错提示。**
+> 
+
+> 在 vue.config.js 中添加以下代码
+> 
+
+> 
+
+【webpack4及以上】
+> `module.exports = defineConfig({`
+> `  devServer: {`
+> `    client: {`
+> `      overlay: false,`
+> `    },`
+> `  },`
+> `});`
+
+【webpack3】
+> `module.exports = {`
+> `  devServer: {`
+> `    overlay: false,`
+> `  },`
+> `};`
+> 
+
+> 在 tsconfig.json 中关闭 ai-desk-customer-vue  的ts检测。
+> 
+> `{`
+> `    "compilerOptions": {`
+> `      ...`
+> `      "preserveValueImports": false,`
+> `      "importsNotUsedAsValues": "preserve",`
+> `      "noImplicitAny": false,`
+> `    },`
+> `    "exclude": [`
+> `      "node_modules",`
+> `      "src/ai-desk-customer-vue",`
+> `    ]`
+> `}`
+
+
+
+【shell】
+``` bash
+npm run serve
+```
+
+【vite】
+
+
+【shell】
+``` bash
+npm run dev
+```
+
+## 常见问题
+
+##### 什么是 UserSig？如何生成 UserSig？
+
+UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
+
+UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688#GeneratingdynamicUserSig)。
+
+##### js 工程如何接入 TUIKit 组件?
+
+UIKit 仅支持 ts 环境运行，您可以通过渐进式配置 typescript 来使您项目中已有的 js 代码 与 UIKit 中 ts 代码共存。
+
+
+
+【vue-cli】
+
+请在您 vue-cli 脚手架创建的工程根目录执行：
+``` bash
+vue add typescript
+```
+
+之后按照如下进行配置项进行选择（为了保证能同时支持原有 js 代码 与 UIKit 中 ts 代码，请您务必严格按照以下五个选项进行配置）![260706614-5e2fc00b-ace5-4843-bef6-c0e234225b5d.png (1514×360)](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/1f8ad8d0f43211ef920e5254005ef0f7.png)
+
+**完成以上步骤后，请重新运行项目！**
+
+【vite】
+
+请在您 vite 创建的工程根目录执行：
+``` bash
+npm install -D typescript
+```
+
+##### 编译报错 node_modules/marked/lib/marked.esm.js: Class private methods are not enabled.
+
+如果您运行过程中出现如下错误，说明您当前使用的 marked 版本过低，请升级 marked 版本至 6.0.0。
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/32a9c4c9f43111efbda7525400454e06.png)
+
+
+请在您项目的根目录使用以下脚本升级 marked 版本：
+``` bash
+npm i marked@6.0.0 --legacy-peer-deps
+```
+
+## 交流与反馈
+
+[点此进入 IM 社群](https://zhiliao.qq.com/s/c5GY7HIM62CK)，享有专业工程师的支持，解决您的难题。

package/adapter-vue-web.ts

@@ -1,12 +1,8 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import * as _Vue from 'vue';
-import * as VueApi from '@vue/composition-api';
+import * as Vue from 'vue';
+import { TUIGlobal } from '@tencentcloud/universal-api';
 
-let VueBasic: any = {
-  default: {},
-};
-VueBasic = _Vue ? _Vue : VueBasic;
 let vueVersion: number;
+let framework = 'vue2';
 let createVNode = (
   arg1: any,
   arg2: any,
@@ -17,57 +13,39 @@ let render = (arg1: any, arg2: any) => {
   return;
 };
 
-let defineProps = () => {
-  return;
-};
-
-let defineEmits = () => {
-  return;
-};
-
-let withDefaults = (arg: any) => {
-  return arg;
-};
-
 try {
   if (
-    (VueBasic as any)?.default?.version
-    && (VueBasic as any)?.default?.version?.startsWith('2.7.')
+    (Vue as any)?.default?.version
+    && (Vue as any)?.default?.version?.startsWith('2.7.')
   ) {
     // >= Vue 2.7.0
     vueVersion = 2.7;
+    TUIGlobal.Vue = (Vue as any)?.getCurrentInstance()?.appContext?.app;
   } else if (
-    (VueBasic as any)?.default?.version
-    && (VueBasic as any)?.default?.version?.startsWith('2.')
+    (Vue as any)?.default?.version
+    && (Vue as any)?.default?.version?.startsWith('2.')
   ) {
     // < Vue 2.7.0
     vueVersion = 2;
+    TUIGlobal.Vue = (Vue as any).default;
   } else {
     // >= Vue 3.0.0
     vueVersion = 3;
-    createVNode = (VueBasic as any)?.createVNode;
-    render = (VueBasic as any)?.render;
-    defineProps = (VueBasic as any)?.defineProps;
-    defineEmits = (VueBasic as any)?.defineEmits;
-    withDefaults = (VueBasic as any)?.withDefaults;
+    framework = 'vue3';
+    createVNode = (Vue as any)?.createVNode;
+    render = (Vue as any)?.render;
+    TUIGlobal.Vue = (Vue as any)?.getCurrentInstance()?.appContext?.app;
     // exportedAPIOrigin = Vue;
   }
 } catch (error: any) {
   // >= Vue 3.0.0
   vueVersion = 3;
-  createVNode = (VueBasic as any)?.createVNode;
-  render = (VueBasic as any)?.render;
-  defineProps = (VueBasic as any)?.defineProps;
-  defineEmits = (VueBasic as any)?.defineEmits;
-  withDefaults = (VueBasic as any)?.withDefaults;
+  framework = 'vue3';
+  createVNode = (Vue as any)?.createVNode;
+  render = (Vue as any)?.render;
+  TUIGlobal.Vue = (Vue as any)?.getCurrentInstance()?.appContext?.app;
 }
 console.warn(`[adapter-vue]: vue version is ${vueVersion}`);
+export { vueVersion, framework, render, createVNode };
 
-let vue: any = VueBasic;
-
-if (vueVersion === 2) {
-  vue = VueApi;
-}
-
-export { vueVersion, render, createVNode, defineProps, defineEmits, withDefaults };
-export { vue };
+export * from 'vue';

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/marked.ts

@@ -0,0 +1,27 @@
+import {Marked} from 'marked';
+
+export const marked = new Marked(
+  {mangle: false, headerIds: false},
+  {
+    renderer: {
+      image(this: any, href: string | null, title: string | null, text: string) {
+        const safeHref = encodeURIComponent(href || '');
+        return `<div
+                    class="image-container"
+                    onclick="onMarkdownImageClicked('${safeHref}')"
+                    style="cursor:pointer;" >
+                    <img src="${href}" alt="${text}"/>
+                </div>
+                `;
+      },
+      link(this: any, href: string | null, title: string | null, text: string) {
+        return `<a target="_blank" rel="noreferrer noopenner" class="message-marked_link" href="${href || ''}" title="${title}">${text}</a>`;
+      },
+    },
+  },
+);
+
+export const parseMarkdown = (text: string) => {
+  let ret = marked.parse(text);
+  return typeof ret === 'string' ? ret : '';
+};

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-rich-text.vue

@@ -2,8 +2,8 @@
   <div>
     <div>
       <div
-        class="rich-text"
-        v-html="formatedContent"
+        class="message-marked"
+        v-html="parsedContent"
       />
       <div v-if="image" class="rich-image-previewer" @click="closeImage">
         <img
@@ -13,18 +13,14 @@
         }"
         :src="imageSrc"
         />
-        
-      </div>	
+      </div>
     </div>
-
   </div>
-	
-  
 </template>
 
 <script lang="ts">
 import vue  from '../../../../../../adapter-vue';
-import { marked } from 'marked';
+import { parseMarkdown } from "./marked";
 import { customerServicePayloadType } from '../../../../../../interface';
 const { computed,ref } = vue;
 interface Props {
@@ -43,34 +39,13 @@ export default {
     const image = ref(false);
     const imageSrc = ref('');
     const imageList = [];
-    const formatedContent = computed(() => {
-      const rendererMD = new marked.Renderer();
-    marked.setOptions({
-      renderer: rendererMD,
-      gfm: true,
-      breaks: true,
-      pedantic: false,
-      sanitize: false,
-      smartLists: true,
-      smartypants: false,
-    });
+    const parsedContent = computed(() => {
       // @ts-ignore
-      window.handleImageClick = function(e,href:string) {
+      window.onMarkdownImageClicked = function(href:string) {
         image.value = !image.value;
-        imageSrc.value = href; 
-      
+        imageSrc.value = decodeURIComponent(href);
       }
-    
-      
-      rendererMD.image = (href, title, text) => {
-        return `
-          <div onclick="handleImageClick(event,'${href}')">
-            <img src="${href}" alt="${text}" style="max-width: 100%;">
-          </div>
-        `
-      }
-      let richtext = marked.parse(props.payload.content);
-      return richtext;
+      return parseMarkdown(props.payload.content);
     });
 
     const closeImage = () => {
@@ -78,10 +53,9 @@ export default {
       imageSrc.value = '';
     }
 
-
     return {
       props,
-      formatedContent,
+      parsedContent,
       image,
       imageSrc,
       closeImage,
@@ -91,29 +65,6 @@ export default {
 };
 </script>
 <style lang="scss">
-.rich-text {
-  div,
-  ul,
-  ol,
-  dt,
-  dd,
-  li,
-  dl,
-  h1,
-  h2,
-  h3,
-  h4,
-  p,
-  img,
-  a {
-    max-width: 100%;
-  }
-
-  a {
-    color: blue;
-  }
-}
-
 .rich-image-previewer {
   position: fixed;
   z-index: 101;

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-stream.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="message-stream">
-    {{ displayedContent }}<span
+    <pre :class="['message-marked']" v-html="displayedContent" />
+    <span
       v-if="!isFinished"
       class="blinking-cursor"
     />
@@ -10,6 +11,8 @@
 <script lang="ts">
 import vue from '../../../../../../adapter-vue';
 import { customerServicePayloadType } from '../../../../../../interface';
+import { parseMarkdown } from './marked'
+
 const { ref, watchEffect, onBeforeUnmount, onMounted } = vue;
 
 interface Props {
@@ -27,36 +30,19 @@ export default {
     const content = ref<string>('');
     const displayedContent = ref<string>('');
     const isFinished = ref<boolean>(false);
-    let intervalId: number | null = null;
     let currentIndex = 0;
 
-    const updateDisplayedContent = () => {
-      if (intervalId) {
-        clearInterval(intervalId);
-      }
-      // @ts-ignore
-      intervalId = setInterval(() => {
-        if (currentIndex < content.value.length) {
-          displayedContent.value += content.value[currentIndex];
-          currentIndex++;
-        } else {
-          clearInterval(intervalId!);
-          intervalId = null;
-        }
-      }, 50);
-    };
-
     onMounted(() => {
       content.value = props?.payload?.chunks?.join('') ?? '';
-      displayedContent.value = content.value;
-      currentIndex = content.value.length;
+      displayedContent.value = parseMarkdown(content.value);
+      currentIndex = displayedContent.value.length;
     });
 
     watchEffect(() => {
       const newContent = props?.payload?.chunks?.join('') ?? '';
-      if (newContent.length > currentIndex) {
-        content.value = newContent;
-        updateDisplayedContent();
+      const parsedContent = parseMarkdown(newContent);
+      if (parsedContent.length > currentIndex) {
+        displayedContent.value = parsedContent;
       }
     });
 
@@ -64,12 +50,6 @@ export default {
       isFinished.value = props?.payload?.isFinished === 1;
     });
 
-    onBeforeUnmount(() => {
-      if (intervalId) {
-        clearInterval(intervalId);
-      }
-    });
-
     return {
       content,
       props,

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/styles/common.scss

@@ -114,3 +114,65 @@
     }
   }
 }
+
+.message-marked {
+  overflow: hidden;
+  word-break: break-word;
+  white-space: normal;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 0;
+
+  .message-marked_code-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    border-radius: 9px;
+    margin: 0 0 10px;
+    padding: 1em;
+    overflow: hidden;
+  }
+
+  .message-marked_code-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .message-marked_code-content {
+    overflow: auto;
+  }
+
+  body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p {
+    margin: 0 0 1em;
+  }
+
+  ul,ol,li {
+    list-style: disc;
+    list-style-type: disc;
+  }
+
+  ul,ol {
+    padding-left: 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  li {
+    padding: 0 0 5px;
+    margin: 0;
+  }
+
+  img {
+    overflow: hidden;
+    object-fit: contain;
+    max-width: 100%;
+  }
+
+  a {
+    color: #0052d9;
+    cursor: pointer;
+  }
+}

package/components/CustomerServiceChat/message-list/style/web.scss

@@ -6,7 +6,6 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-Shadow: 0 4px 8px rgba(0,0,0,0.1);
 
   &-main {
     min-height: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/ai-desk-customer-vue",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "chat uikit ai-desk-customer",
   "main": "index",
   "keywords": [
@@ -21,10 +21,10 @@
     "publish:uniapp": "cd ../tui-customer-service-plugin-uniapp && ls && npm publish --access public"
   },
   "dependencies": {
-    "@tencentcloud/chat-uikit-engine": "^2.4.2",
-    "@tencentcloud/tui-core": "^2.4.0",
+    "@tencentcloud/chat-uikit-engine": "latest",
+    "@tencentcloud/tui-core": "latest",
     "@tencentcloud/tui-emoji-plugin": "latest",
-    "@tencentcloud/universal-api": "^2.4.0",
+    "@tencentcloud/universal-api": "latest",
     "@tiptap/core": "2.0.0-beta.220",
     "@tiptap/extension-document": "2.0.0-beta.220",
     "@tiptap/extension-image": "2.0.0-beta.220",
@@ -35,10 +35,9 @@
     "@tiptap/pm": "2.0.0-beta.220",
     "@tiptap/suggestion": "2.0.0-beta.220",
     "@types/lodash": "^4.14.202",
-    "@vue/composition-api": "^1.0.0-rc.1",
     "dayjs": "^1.11.10",
     "lodash": "^4.17.21",
-    "marked": "4.0.10",
+    "marked": "^6.0.0",
     "mp-html": "^2.5.0",
     "vue-clipboard3": "2.0.0"
   },