@tencentcloud/ai-desk-customer-vue 0.3.0 → 0.7.0

package/assets/loading_message.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#CCCCCC"><path d="M480.2-240Q380-240 310-309.8q-70-69.8-70-170T309.8-650q69.8-70 170-70T650-650.2q70 69.8 70 170T650.2-310q-69.8 70-170 70Z"/></svg>

package/components/CustomerServiceChat/index-web.vue

@@ -18,6 +18,9 @@
         @handleEditor="handleEditor"
         @closeInputToolBar="() => changeToolbarDisplayType('none')"
       />
+      <MessageToolbarButton
+        :toolbarButtonList="props.toolbarButtonList"
+      />
       <MessageInputToolbar
         v-if="isInputToolbarShow"
         :class="[
@@ -87,9 +90,10 @@ import MessageInput from './message-input/index-web.vue';
 import MessageInputToolbar from './message-input-toolbar/index-web.vue';
 import EmojiDialog from './message-input-toolbar/emoji-dialog-mobile/emoji-dialog-mobile.vue';
 import { isPC, isH5} from '../../utils/env';
-import { ToolbarDisplayType } from '../../interface';
+import { ToolbarButtonModel, ToolbarDisplayType } from '../../interface';
 import { isSupportedLang } from '../../utils/';
 import Log from '../../utils/logger';
+import MessageToolbarButton from './message-toolbar-button/index.vue';
 
 const { ref, onMounted, onUnmounted, computed } = vue;
 
@@ -99,6 +103,7 @@ interface IProps {
   userID?:string;
   userSig?:string;
   robotLang?:string;
+  toolbarButtonList?:ToolbarButtonModel[];
 }
 
 const emits = defineEmits(['closeChat']);
@@ -115,6 +120,7 @@ const props = withDefaults(defineProps<IProps>(), {
   userID: '',
   userSig: '',
   robotLang: '',
+  toolbarButtonList:() => [] as ToolbarButtonModel[]
 });
 
 const loginCustomerUIKit = () => {

package/components/CustomerServiceChat/message-list/index-web.vue

@@ -68,8 +68,9 @@
                 @resendMessage="resendMessage(item)"
               >
                 <template #messageElement>
+                  <MessageThinking v-if="isThinkingMessage(item)"/>
                   <MessageText
-                    v-if="item.type === TYPES.MSG_TEXT"
+                    v-else-if="item.type === TYPES.MSG_TEXT"
                     :content="item.getMessageContent()"
                   />
                   <ProgressMessage
@@ -175,7 +176,7 @@
 
 <script lang="ts" setup>
 import vue from '../../../adapter-vue';
-const { ref, nextTick, computed, onMounted, onUnmounted }  = vue;
+const { ref, nextTick, computed, onMounted, onUnmounted } = vue;
 import TUIChatEngine, {
   IMessageModel,
   TUIStore,
@@ -203,6 +204,7 @@ import MessageVideo from './message-elements/message-video-web.vue';
 import MessageTool from './message-tool/index-web.vue';
 import MessageRevoked from './message-tool/message-revoked.vue';
 import MessagePlugin from '../message-list/message-elements/message-desk/message-plugin-web.vue';
+import MessageThinking from './message-elements/message-thinking.vue';
 import ScrollButton from './scroll-button/index.vue';
 import { isPluginMessage } from './message-elements/message-desk/index';
 import Dialog from '../../common/Dialog/index.vue';
@@ -214,9 +216,8 @@ import {
   isEnabledMessageReadReceiptGlobal,
   deepCopy,
 } from '../../../utils/utils';
-import { isMessageInvisible } from '../../../utils/index';
-// import {TUICustomerServer} from '../../../server';
-import {isCustomerConversation} from '../../../index';
+import { isMessageInvisible, isThinkingMessage, isThinkingMessageOverTime } from '../../../utils/index';
+import { isCustomerConversation } from '../../../index';
 
 interface ScrollConfig {
   scrollToMessage?: IMessageModel;
@@ -328,19 +329,26 @@ onUnmounted(() => {
 });
 
 async function onMessageListUpdated(list: IMessageModel[]) {
-  if(!isCustomerConversation(currentConversationID.value)){
+  if (!isCustomerConversation(currentConversationID.value)) {
     return;
   }
   observer?.disconnect();
   const oldLastMessage = currentLastMessage.value;
   let hasEmojiReaction = false;
   allMessageList.value = list;
-  messageList.value = list.filter((message) => {
+
+  messageList.value = list.filter((message, index) => {
     if (message.reactionList?.length && !message.isDeleted) {
       hasEmojiReaction = true;
     }
+
+    // 判断是否结束
+    if (isThinkingMessage(message)) {
+      return isThinkingMessageOverTime(message);
+    }
     return !message.isDeleted && !isMessageInvisible(message as any);
   });
+
   if (!messageList.value?.length) {
     currentLastMessage.value = {};
     return;
@@ -695,6 +703,7 @@ function setAudioPlayed(messageID: string) {
   };
 }
 
+
 defineExpose({
   scrollToLatestMessage,
 });

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

@@ -1,61 +1,74 @@
 <template>
   <div class="message-stream">
     <pre :class="['message-marked']" v-html="displayedContent" />
-    <span
-      v-if="!isFinished"
-      class="blinking-cursor"
-    />
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import vue from '../../../../../../adapter-vue';
 import { customerServicePayloadType } from '../../../../../../interface';
 import { parseMarkdown } from './marked'
+import { TypeWriter } from "./type-writer";
+import { JSONToObject } from "../../../../../../utils";
 
-const { ref, watchEffect, onMounted } = vue;
+const { ref, computed, withDefaults, defineProps, watch } = vue;
 
 interface Props {
   payload: customerServicePayloadType;
 }
 
-export default {
-  props: {
-    payload: {
-      type: Object as () => customerServicePayloadType,
-      default: () => ({}),
-    },
+const props = withDefaults(defineProps<Props>(), {
+  payload: () => '',
+});
+
+const isStreaming = ref<boolean>(false);
+const chunks = ref<string>('');
+const isFinished = ref<boolean>(true);
+const prevChunksLength = ref<number>(0);
+const streamContent = ref<string>('');
+const displayedContent = computed(() => parseMarkdown(streamContent.value));
+
+const typeWriter = new TypeWriter({
+  onTyping: (item: string) => {
+    streamContent.value += item;
+    // emits('onStreaming', item, streamContent.value);
+  },
+  onComplete() {
+    isStreaming.value = false;
   },
-  setup(props: Props) {
-    const displayedContent = ref<string>('');
-    const isFinished = ref<boolean>(false);
-    let currentIndex = 0;
+});
 
-    onMounted(() => {
-      displayedContent.value = parseMarkdown(props?.payload?.chunks?.join('') ?? '');
-      currentIndex = displayedContent.value.length;
-    });
+function startStreaming(content: string[]) {
+  if (!isStreaming.value) {
+    isStreaming.value = true;
+    typeWriter.add(content);
+    typeWriter.start();
+  } else {
+    typeWriter.add(content);
+  }
+}
 
-    watchEffect(() => {
-      const newContent = props?.payload?.chunks?.join('') ?? '';
-      const parsedContent = parseMarkdown(newContent);
-      if (parsedContent.length > currentIndex) {
-        displayedContent.value = parsedContent;
-        currentIndex = parsedContent.length;
+watch(() => props.payload, (newValue: string, oldValue: string) => {
+      if (newValue === oldValue) {
+        return;
       }
-    });
-
-    watchEffect(() => {
-      isFinished.value = props?.payload?.isFinished === 1;
-    });
 
-    return {
-      props,
-      isFinished,
-      displayedContent,
-    };
-  },
-};
+      const _payloadObject = JSONToObject(props.payload);
+      chunks.value = Array.isArray(_payloadObject.chunks) ? _payloadObject.chunks.join('') : _payloadObject.chunks;
+      isFinished.value = _payloadObject.isFinished === 1;
+      if (newValue && !oldValue && isFinished.value) {
+        // disable typeWriter style or history message first load
+        streamContent.value = chunks.value;
+      } else {
+        const _newChunksToAdd = chunks.value?.slice(prevChunksLength.value);
+        startStreaming([_newChunksToAdd]);
+      }
+      prevChunksLength.value = chunks.value?.length;
+    }, {
+      deep: true,
+      immediate: true,
+    },
+);
 </script>
 <style lang="scss" scoped>
 .message-stream {
@@ -63,19 +76,5 @@ export default {
   word-break: keep-all;
   white-space: normal;
   font-size: 14px;
-
-  .blinking-cursor {
-    display: inline-block;
-    width: 1px;
-    height: 1em;
-    background-color: black;
-    animation: blink 1s step-end infinite;
-    vertical-align: sub;
-  }
-
-  @keyframes blink {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0; }
-  }
 }
 </style>

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

@@ -118,7 +118,7 @@
 .message-marked {
   overflow: hidden;
   word-break: break-word;
-  white-space: normal;
+  white-space: pre-wrap;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/type-writer.ts

@@ -0,0 +1,189 @@
+const chineseRegex = /[\u4e00-\u9fa5]/;
+const wordAndNonWordRegex = /\b\w+\b|[^\w]+/g;
+const isStringArray = (test: any): boolean => {
+  return Array.isArray(test) && !test.some(value => typeof value !== 'string');
+};
+
+export class TypeWriter {
+  /**
+   * @property {array} strings strings to be typed
+   */
+  public strings: string[] = [];
+
+  /**
+   * @property {boolean} isTyping current typing status
+   */
+  public isTyping: boolean = false;
+
+  /**
+   * @property {number} typeSpeed type speed in milliseconds. If empty, using dynamic speed.
+   */
+  public typeSpeed?: number = 0;
+
+  /**
+   * @property {number} curArrayPos current typing string's position of all strings.
+   */
+  private curArrayPos: number = 0;
+
+  /**
+   * @property {number} curCharPos current typing character's position in current strings.
+   */
+  private curCharPos: number = 0;
+
+  /**
+   * @property {ReturnType<typeof setTimeout>} timer timer for type writer animation
+   */
+  private timer?: ReturnType<typeof setTimeout>;
+
+  /**
+   * On string is typing
+   * @param {string} curStr
+   * @param {number} arrayPos
+   * @param {number} characterPos
+   * @param {Typed} self
+   */
+  public onTyping?: (curStr: string, arrayPos: number, characterPos: number, self: any) => void;
+
+  /**
+   * After start
+   * @param {number} arrayPos
+   * @param {number} characterPos
+   * @param {TypeWriter} self
+   */
+  public onStart?: (arrayPos: number, characterPos: number, self: any) => void;
+
+  /**
+   * After stop
+   * @param {number} arrayPos
+   * @param {number} characterPos
+   * @param {TypeWriter} self
+   */
+  public onStop?: (arrayPos: number, characterPos: number, self: any) => void;
+
+  /**
+   * All typing is complete
+   * @param {Typed} self
+   */
+  public onComplete?: (self: any) => void;
+
+  constructor(options: {
+    defaultStrings?: string[];
+    typeSpeed?: number;
+    onTyping?: (curStr: string, arrayPos: number, characterPos: number, self: any) => void;
+    onComplete?: (self: any) => void;
+    onStart?: (arrayPos: number, characterPos: number, self: any) => void;
+    onStop?: (arrayPos: number, characterPos: number, self: any) => void;
+  }) {
+    const { defaultStrings, typeSpeed, onTyping, onComplete, onStart, onStop } = options;
+    if (defaultStrings && isStringArray(defaultStrings)) {
+      this.add(defaultStrings);
+    }
+    if (typeof typeSpeed === 'number') {
+      this.typeSpeed = typeSpeed;
+    }
+    if (typeof onTyping === 'function') {
+      this.onTyping = onTyping;
+    }
+    if (typeof onComplete === 'function') {
+      this.onComplete = onComplete;
+    }
+    if (typeof onStart === 'function') {
+      this.onStart = onStart;
+    }
+    if (typeof onStop === 'function') {
+      this.onStop = onStop;
+    }
+  }
+
+  add(addStrings: string[]) {
+    if (!addStrings || !addStrings.length) return;
+    addStrings.forEach((item: string) => {
+      if (chineseRegex.test(item)) {
+        const newValueArray = item.split('');
+        this.strings.push(...newValueArray);
+      } else {
+        const newValueArray = item.match(wordAndNonWordRegex) || item.split('');
+        this.strings.push(...newValueArray);
+      }
+    });
+  }
+
+  start() {
+    if (this.isTyping) {
+      return;
+    }
+    this.isTyping = true;
+    this.onStart && this.onStart(this.curArrayPos, this.curCharPos, this);
+    this._next();
+  }
+
+  stop() {
+    if (!this.isTyping) {
+      return;
+    }
+    this.isTyping = false;
+    clearTimeout(this.timer);
+    this.onStop && this.onStop(this.curArrayPos, this.curCharPos, this);
+  }
+
+  done() {
+    this.stop();
+    let _str = this.strings[this.curArrayPos].slice(this.curCharPos);
+    _str += this.strings.slice(this.curArrayPos + 1).join('');
+    this.curArrayPos = this.strings.length - 1;
+    this.curCharPos = this.strings[this.curArrayPos]?.length - 1;
+    this.onTyping && this.onTyping(_str, this.curArrayPos, this.curCharPos, this);
+    this.strings = [];
+  }
+
+  _consume() {
+    if (!this.strings.length) {
+      return;
+    }
+
+    if ((this.curArrayPos >= this.strings.length)) {
+      this.isTyping = false;
+      this.onComplete?.(this);
+      return;
+    }
+
+    const item = this.strings[this.curArrayPos]?.[this.curCharPos];
+    if (item) {
+      this.onTyping && this.onTyping(item, this.curArrayPos, this.curCharPos, this);
+    }
+
+    if (this.curCharPos < this.strings[this.curArrayPos]?.length - 1) {
+      this.curCharPos++;
+    } else {
+      this.curArrayPos++;
+      this.curCharPos = 0;
+    }
+  }
+
+  _next() {
+    this._consume();
+    this.timer = setTimeout(() => {
+      this._consume();
+      if (this.isTyping) {
+        this._next();
+      }
+    }, this.typeSpeed || this._dynamicSpeed());
+  }
+
+  _dynamicSpeed() {
+    let length = 0;
+    length += (this.strings[this.curArrayPos]?.length || 0) - this.curCharPos - 1;
+    for (let i = this.curArrayPos + 1; i < this.strings.length; i++) {
+      length += this.strings[i]?.length || 0;
+    }
+    if (length <= 0) {
+      length = 10;
+    }
+    const speed = 1500 / length;
+    if (speed >= 150) {
+      return 150;
+    } else {
+      return speed;
+    }
+  }
+}

package/components/CustomerServiceChat/message-list/message-elements/message-thinking.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="message-thinking">
+        <div v-for="(icon, index) in icons" :key="index">
+            <transition name="fade">
+                <Icon v-if="icon" :file="loading_message" width="16px" height="16px"/>
+            </transition>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import vue from '../../../../adapter-vue';
+import Icon from '../../../common/Icon.vue';
+import loading_message from '../../../../assets/loading_message.svg';
+const { ref, watchEffect,onMounted,onUnmounted} = vue;
+export default {
+    components:{
+        Icon
+    },
+  setup() {
+    const icons = ref([false, false, false]);
+    const index = ref(0);
+
+    let intervalId:any;
+
+    onMounted(() => {
+      intervalId = setInterval(() => {
+        if (index.value < icons.value.length) {
+          icons.value = icons.value.map((v, i) => (i === index.value ? true : v));
+          index.value += 1;
+        } else {
+          icons.value = icons.value.map(() => false);
+          index.value = 0;
+        }
+      }, 500);
+    });
+
+    onUnmounted(() => {
+      intervalId && clearInterval(intervalId)
+      intervalId = null;
+    });
+
+    return { icons,loading_message };
+  }
+}
+</script>
+<style lang="scss" scoped>
+.message-thinking{
+    display: flex;
+    flex-direction: row;
+    width: 45px;
+    height: 16px;
+}
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+</style>

package/components/CustomerServiceChat/message-toolbar-button/index.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="toolbar-button-container">
+        <template v-for="(item, index) in props.toolbarButtonList">
+            <div v-if="item.renderCondition()" :key="index"
+                :class="['toolbar-button', isH5 ? 'toolbar-button-h5' : '']" @click="onClick(index)">
+                <Icon v-if="item.icon" class="toolbar-button-icon" :file="item.icon" width="18px" height="18px"/>
+                <div class="toolbar-button-text">
+                    {{ item.title }}
+                </div>
+
+            </div>
+        </template>
+    </div>
+</template>
+<script lang="ts" setup>
+import { isH5 } from '../../../utils/env';
+import { ToolbarButtonModel } from '../../../interface';
+import Icon from '../../common/Icon.vue';
+
+interface IProps {
+    toolbarButtonList?: ToolbarButtonModel[]
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    toolbarButtonList: () => [] as ToolbarButtonModel[]
+});
+
+function onClick(index: number) {
+    props.toolbarButtonList[index].clickEvent();
+}
+
+</script>
+<style>
+.toolbar-button-container {
+    display: flex;
+    flex-direction: row !important;
+    margin: 5px !important;
+    display: flex ;
+    align-items: center ;
+}
+
+.toolbar-button {
+    border: 1px solid #E7EAEF;
+    padding: 5px;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+    white-space: nowrap;
+}
+
+.toolbar-button-h5 {
+    border: none;
+    background-color: #fff;
+    box-shadow: 0px 2px 2px 0px rgba(70, 98, 140, 0.06);
+}
+
+.toolbar-button-icon {
+    margin-right: 3px;
+}
+.toolbar-button-text {
+    font-size: 12px;
+    text-overflow: ellipsis;
+    max-width: 100px;
+    overflow: hidden;
+    font-family: PingFangSC-Regular;
+}
+</style>

package/constant.ts

@@ -28,6 +28,7 @@ export const CUSTOM_MESSAGE_SRC = {
   STREAM_TEXT: '31',
   MULTI_BRANCH:'32',
   MULTI_FORM:'33',
+  THINKING:'35',
 };
 
 // im message extra type

package/interface.ts

@@ -8,6 +8,7 @@ export interface customerServicePayloadType {
   chunks?: string[];
   status?:number;
   nodeStatus?:number;
+  thinkingStatus?:number;
 }
 
 interface IMenuItem {
@@ -174,3 +175,10 @@ export interface ISendMessagePayload {
   file?: any;
   atUserList?: string[];
 }
+
+export interface ToolbarButtonModel {
+  title:string,
+  icon?:string,
+  renderCondition:()=>{},
+  clickEvent:()=>void
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/ai-desk-customer-vue",
-  "version": "0.3.0",
+  "version": "0.7.0",
   "description": "chat uikit ai-desk-customer web-mui-uikit",
   "main": "index",
   "keywords": [

package/server.ts

@@ -1,7 +1,9 @@
 import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
 import {
   isCustomerServiceMessage,
+  isThinkingMessage,
   isMessageInvisible,
+  clearChatStorage,
 } from './utils/index';
 import TUIChatEngine, { TUIChatService, TUIConversationService,IMessageModel  } from '@tencentcloud/chat-uikit-engine';
 import Log from './utils/logger';
@@ -10,6 +12,7 @@ export default class TUICustomerServer {
   static isInitialized: boolean;
   static instance: TUICustomerServer;
   private customerServiceAccounts: any[];
+  static loggedInUserID: string;
   constructor() {
     TUICore.registerService(TUIConstants.TUICustomerServicePlugin.SERVICE.NAME, this);
     TUICore.registerExtension(TUIConstants.TUIContact.EXTENSION.CONTACT_LIST.EXT_ID, this);
@@ -25,13 +28,15 @@ export default class TUICustomerServer {
   }
 
   static loginCustomerUIKit(SDKAppID:number, userID:string, userSig:string) {
+    clearChatStorage(SDKAppID, userID);
     TUIChatEngine.login({
       SDKAppID,
       userID,
       userSig,
       useUploadPlugin: true,
     }).then(() => {
-      Log.i("login success");
+      Log.i(`login success. userID:${userID}`);
+      TUICustomerServer.loggedInUserID = userID;
       TUIConversationService.switchConversation('C2C@customer_service_account');
       TUIChatEngine.chat.callExperimentalAPI('isFeatureEnabledForStat', Math.pow(2, 42));
     })
@@ -40,19 +45,26 @@ export default class TUICustomerServer {
     })
   }
 
-  /**
-   * init
-   */
   public static init(SDKAppID:number, userID:string, userSig:string) {
+    Log.l(`TUICustomerServer.init SDKAppID:${SDKAppID} userID:${userID} isInitialized:${TUICustomerServer.isInitialized} loggedInUserID:${TUICustomerServer.loggedInUserID}`);
     // Backward compatibility, the new version executes the init operation by default in index.ts
     if (TUICustomerServer.isInitialized) {
-      return;
+      if (TUICustomerServer.loggedInUserID === userID) {
+        return;
+      }
+      TUICustomerServer.unInit().finally(() => {
+        this.loginCustomerUIKit(SDKAppID, userID, userSig);
+      });
+    } else {
+      TUICustomerServer.isInitialized = true;
+      // Execute call server when native plugin TUICallKit exists
+      this.loginCustomerUIKit(SDKAppID, userID, userSig);
     }
-    TUICustomerServer.isInitialized = true;
-    // Execute call server when native plugin TUICallKit exists
-    this.loginCustomerUIKit(SDKAppID, userID, userSig);
   }
 
+  public static async unInit() {
+    return TUIChatEngine.logout();
+  }
 
   // Determine if the current session is a customer service session
   public isCustomerConversation(conversationID: string) {
@@ -65,6 +77,9 @@ export default class TUICustomerServer {
     if (!message || !this.isCustomerConversation(message.conversationID)) {
       return false;
     }
+    if (isThinkingMessage(message)) {
+      return false;
+    }
     return isCustomerServiceMessage(message) || isMessageInvisible(message);
   }
 

package/utils/index.ts

@@ -37,6 +37,22 @@ export const isMessageRating = (message: IMessageModel): boolean => {
   return isCustomerServiceMessage(message) && customerServicePayload.src === CUSTOM_MESSAGE_SRC.MENU;
 };
 
+export const isThinkingMessage = (message: IMessageModel): boolean => {
+  const isCustomerMessage = message?.type === TYPES.MSG_CUSTOM;
+  const customerServicePayload: customerServicePayloadType = JSONToObject(message?.payload?.data);
+  return isCustomerMessage && customerServicePayload?.src === CUSTOM_MESSAGE_SRC.THINKING && customerServicePayload?.thinkingStatus === 0;
+}
+
+export const isThinkingMessageOverTime = (message: IMessageModel): boolean => {
+  const messageTime = message.time * 1000;
+  const minute = 60 * 1000;
+  const now = Date.now();
+  if (now - messageTime > minute) {
+    return false;
+  }
+  return true;
+}
+
 export const isMessageInvisible = (message: IMessageModel): boolean => {
   const customerServicePayload: customerServicePayloadType = JSONToObject(message?.payload?.data);
   const robotCommandArray = ['feedback', 'updateBotStatus'];
@@ -50,11 +66,11 @@ export const isMessageInvisible = (message: IMessageModel): boolean => {
     CUSTOM_MESSAGE_SRC.RICH_TEXT,
     CUSTOM_MESSAGE_SRC.STREAM_TEXT,
     CUSTOM_MESSAGE_SRC.MULTI_BRANCH,
-    CUSTOM_MESSAGE_SRC.MULTI_FORM
+    CUSTOM_MESSAGE_SRC.MULTI_FORM,
   ];
   const isCustomerMessage = message?.type === TYPES.MSG_CUSTOM;
   const isCustomerInvisible = customerServicePayload?.src && !whiteList.includes(customerServicePayload?.src);
-  const isMultiFormMessage:boolean =  customerServicePayload?.src !== null &&  customerServicePayload?.src === CUSTOM_MESSAGE_SRC.MULTI_FORM && message.flow === 'out';
+  const isMultiFormMessage: boolean = customerServicePayload?.src !== null && customerServicePayload?.src === CUSTOM_MESSAGE_SRC.MULTI_FORM && message.flow === 'out';
   const isRobot = customerServicePayload?.src === CUSTOM_MESSAGE_SRC.ROBOT && robotCommandArray.indexOf(customerServicePayload?.content?.command) !== -1;
   return isCustomerMessage && (isCustomerInvisible || isRobot || isMultiFormMessage);
 };
@@ -70,3 +86,22 @@ export const isSupportedLang = (lang: string): boolean => {
     'fil' // Filipino菲律宾语：fil
   ].indexOf(lang) !== -1;
 }
+
+// 如果用户选择 block cookies，此时访问 localStorage 浏览器会抛错
+// Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document
+// 通过 navigator.cookieEnabled 短路逻辑规避
+const canIUseCookies = () => {
+  // When the browser is configured to block third-party cookies, and navigator.cookieEnabled is invoked inside a third-party iframe,
+  // it returns true in Safari, Edge Spartan and IE (while trying to set a cookie in such scenario would fail).
+  // It returns false in Firefox and Chromium-based browsers.
+  if (typeof window !== 'undefined') {
+    return window.navigator?.cookieEnabled && localStorage;
+  }
+  return false;
+}
+
+export const clearChatStorage = (SDKAppID, userID) => {
+  if (canIUseCookies()) {
+    localStorage.removeItem(`TIM_${SDKAppID}_${userID}_conversationMap`);
+  }
+}