@tencentcloud/ai-desk-customer-vue 1.6.0 → 1.6.3

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## 1.6.3 @2025.11.13
+
+### Features
+- 转人工排队阶段支持展示排队信息，提升用户体验。
+- 转人工成功后支持展示人工客服的昵称和头像。
+- 优化 markdown 图片尺寸。
+
+### Fixed
+- 没有消息时显示查看更多。
+- 流式消息的字体跟主字体不一致的问题。
+
+## 1.6.2 @2025.10.30
+
+### Features
+- 优化发送语音的产品体验。
+- 优化 scroll-button 等组件样式。
+- emoji 表情适配海外。
+- 完善 markdown 解析。
+
 ## 1.6.0 @2025.10.21
 
 ### Features

package/assets/arrow_down_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#444444"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>

package/assets/arrow_down_icon_white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>

package/components/CustomerServiceChat/chat-header/index-web.vue

@@ -160,11 +160,7 @@ function setCurrentConversationName() {
   if (props.headerConfig && props.headerConfig.title) {
     currentConversationName.value = props.headerConfig.title;
   } else {
-    if (isH5) {
-      currentConversationName.value = TUITranslateService.t('AIDesk.Hi，我是') + currentConversation.value.getShowName();
-    } else {
-      currentConversationName.value = currentConversation.value.getShowName() || '';
-    }
+    currentConversationName.value = currentConversation.value.getShowName() || '';
   }
 }
 

package/components/CustomerServiceChat/customer-queue-page/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="customer-queue">
+    <div class="customer-queue-header">
+      {{ TUITranslateService.t("AIDesk.排队等待中") }}...
+    </div>
+    <div class="customer-queue-info">
+      {{ TUITranslateService.t("AIDesk.排队等待话术") }}
+    </div>
+    <div class="customer-queue-container">
+      <div class="customer-queue-content-title">
+        {{ TUITranslateService.t("AIDesk.当前前方排队人数") }}
+      </div>
+      <div class="customer-queue-content-number">
+        {{ props.queueNumber }}
+      </div>
+    </div>
+    <div class="customer-queue-end-button">
+      <div :class="['customer-queue-end-button-content', isClicked ? 'button-clicked' : '']" @click="endQueuing">
+        {{ TUITranslateService.t("AIDesk.结束排队") }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import vue from '../../../adapter-vue';
+const { ref, onMounted, onUnmounted } = vue;
+import { IConversationModel, StoreName, TUIChatService, TUIStore, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { CUSTOM_MESSAGE_SRC } from '../../../constant';
+import { getTo, isEnabledMessageReadReceiptGlobal } from '../../../utils/utils';
+const currentConversation = ref<IConversationModel>();
+const isClicked = ref(false);
+const props = defineProps({
+  queueNumber: {
+    type: Number,
+    default: 0
+  },
+});
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+const onCurrentConversationUpdate = (conversation: IConversationModel) => {
+  currentConversation.value = conversation;
+};
+
+const endQueuing = () => {
+  if (isClicked.value) {
+    return;
+  }
+  isClicked.value = true;
+  TUIChatService.sendCustomMessage({
+    to: getTo(currentConversation.value),
+    conversationType: currentConversation.value.type,
+    payload: {
+      data: JSON.stringify({
+        customerServicePlugin: 0,
+        src: CUSTOM_MESSAGE_SRC.USER_END_CONVERSATION,
+      }),
+    },
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  },{ onlineUserOnly:true });
+}
+</script>
+<style lang="scss">
+.customer-queue {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+.customer-queue-header {
+  height: 52px;
+  background-color: #1C66E5;
+  color: white;
+  line-height: 52px;
+  padding-left: 20px;
+}
+.customer-queue-info {
+  padding: 20px;
+  color: #666;
+}
+.customer-queue-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;    
+  justify-content: center;
+  color: #1C66E5;
+}
+
+.customer-queue-content-title {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.customer-queue-content-number {
+  font-size: 40px;
+  font-weight: bold;
+}
+.customer-queue-end-button {
+  color: white;
+  padding: 8px 23px;
+  border-radius: 10px;
+}
+.customer-queue-end-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  &-content {
+    background: #1c66e5;
+    color: white;
+    padding: 8px 23px;
+    border-radius: 10px;
+    width: fit-content;
+    min-width: 70px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+  }
+}
+.button-clicked {
+  cursor: default;
+  background: #cccccc;
+  color: #666666;
+}
+</style>

package/components/CustomerServiceChat/emoji-config/default-emoji.ts

@@ -80,6 +80,17 @@ export const DEFAULT_BASIC_EMOJI_URL_MAPPING: Record<string, string> = {
   '[TUIEmoji_Like]': 'emoji_61@2x.png',
 };
 
+export const EXCLUDED_EMOJI_LIST = [
+  '[TUIEmoji_Pig]',
+  '[TUIEmoji_Rich]',
+  '[TUIEmoji_Fortune]',
+  '[TUIEmoji_857]',
+  '[TUIEmoji_666]',
+  '[TUIEmoji_Prohibit]',
+  '[TUIEmoji_Convinced]',
+  '[TUIEmoji_Knife]',
+];
+
 export const BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [
   {
     emojiGroupID: 1,

package/components/CustomerServiceChat/emoji-config/index.ts

@@ -1,6 +1,6 @@
 import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { CUSTOM_BASIC_EMOJI_URL, CUSTOM_BIG_EMOJI_URL, CUSTOM_BASIC_EMOJI_URL_MAPPING, CUSTOM_BIG_EMOJI_GROUP_LIST } from './custom-emoji';
-import { DEFAULT_BASIC_EMOJI_URL, BIG_EMOJI_GROUP_LIST, DEFAULT_BASIC_EMOJI_URL_MAPPING, BASIC_EMOJI_NAME_TO_KEY_MAPPING, DEFAULT_BIG_EMOJI_URL } from './default-emoji';
+import { DEFAULT_BASIC_EMOJI_URL, BIG_EMOJI_GROUP_LIST, DEFAULT_BASIC_EMOJI_URL_MAPPING, BASIC_EMOJI_NAME_TO_KEY_MAPPING, DEFAULT_BIG_EMOJI_URL, EXCLUDED_EMOJI_LIST } from './default-emoji';
 import { default as emojiCNLocales } from './locales/zh_cn';
 import { default as emojiENLocales } from './locales/en';
 import { IEmojiGroupList } from '../../../interface';
@@ -126,6 +126,17 @@ const parseTextToRenderArray = (text: string): Array<{ type: 'text' | 'image'; c
   return result;
 };
 
+const filterEmojisInNonChineseEnv = (list: string[]) => {
+  const language = state.get('currentLanguage') || 'zh';
+  if (!(language === 'zh' || language === 'zh_tw')) {
+    return list.filter((item) => {
+      return !EXCLUDED_EMOJI_LIST.includes(item);
+    });
+  } else {
+    return list;
+  }
+}
+
 export {
   EMOJI_GROUP_LIST,
   CUSTOM_BIG_EMOJI_URL,
@@ -138,4 +149,6 @@ export {
   transformTextWithKeysToEmojiNames,
   transformTextWithEmojiNamesToKeys,
   emojiConfig,
+  BASIC_EMOJI_URL,
+  filterEmojisInNonChineseEnv,
 };

package/components/CustomerServiceChat/index-web.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['tui-chat', !isPC && 'tui-chat-h5']" :key="currentLanguage">
     <div
-      v-if="currentConversationID"
+      v-if="currentConversationID && (!props.showQueuePage || queueNumber < 0 || queueNumber === undefined)"
       :class="['tui-chat', !isPC && 'tui-chat-h5']"
     >
       <ChatHeader
@@ -94,6 +94,9 @@
           @close="() => { showFeedbackModal = false }"
         />
     </div>
+    <div v-if="props.showQueuePage && queueNumber >= 0" :class="['tui-chat', !isPC && 'tui-chat-h5']">
+      <CustomerQueuePage :queueNumber="queueNumber"/>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -122,6 +125,7 @@ import state from '../../utils/state.js';
 import { switchReadStatus,isNonEmptyObject } from '../../utils/utils';
 import { getCountryForTimezone } from 'countries-and-timezones';
 import FeedbackModal from './feedback-modal/index.vue';
+import CustomerQueuePage from './customer-queue-page/index.vue';
 const { ref, onMounted, onUnmounted, computed } = vue;
 
 interface IProps {
@@ -134,12 +138,13 @@ interface IProps {
   toolbarButtonList?: ToolbarButtonModel[];
   showAvatar?: number;
   robotAvatar?: string;
-  staffAvatar?: string;
+  memberAvatar?: string;
   userAvatar?: string;
   showNickName?: number;
   robotNickName?: string;
-  staffNickName?: string;
+  memberNickName?: string;
   userNickName?: string;
+  enableUnifiedMemberProfile?: number;
   inputToolbarList?: InputToolbarModel[];
   showReadStatus?: number;
   showTyping?: number;
@@ -151,6 +156,7 @@ interface IProps {
   enableURLDetection?: number;
   headerConfig?: IHeaderConfig;
   enableSendingAudio?: number;
+  showQueuePage?: number;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -170,6 +176,7 @@ const currentLanguage = ref('');
 const languageForShowList = ref<Array<string>>([]);
 const feedbackModalRef = ref();
 const showFeedbackModal = ref(false);
+const queueNumber = ref(-1);
 let timezone = '';
 let countryID = '';
 const props = withDefaults(defineProps<IProps>(), {
@@ -182,12 +189,13 @@ const props = withDefaults(defineProps<IProps>(), {
   showReadStatus: 1,
   showAvatar: 1,
   robotAvatar: '',
-  staffAvatar: '',
+  memberAvatar: '',
   userAvatar: '',
   showNickName: 0,
   robotNickName: '',
-  staffNickName: '',
+  memberNickName: '',
   userNickName: '',
+  enableUnifiedMemberProfile: 1,
   showTyping: 0,
   enableMultilingual: 0,
   enableFeedback: 0,
@@ -195,6 +203,7 @@ const props = withDefaults(defineProps<IProps>(), {
   langList: () => [],
   enableURLDetection: 0,
   enableSendingAudio: 0,
+  showQueuePage: 0,
 });
 
 const loginCustomerUIKit = () => {
@@ -290,11 +299,12 @@ const setAvatarNickName = () => {
     showAvatar: props.showAvatar,
     showNickName: props.showNickName,
     userAvatar: props.userAvatar,
-    staffAvatar: props.staffAvatar,
+    memberAvatar: props.memberAvatar,
     robotAvatar: props.robotAvatar,
     userNickName: props.userNickName,
-    staffNickName: props.staffNickName,
+    memberNickName: props.memberNickName,
     robotNickName: props.robotNickName,
+    enableUnifiedMemberProfile: props.enableUnifiedMemberProfile,
   });
 }
 
@@ -346,6 +356,9 @@ onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
     quoteMessage: onQuoteMessageUpdated,
   });
+  TUIStore.watch(StoreName.CUSTOM, {
+    isQueuing: onIsQueuingUpdate,
+  });
 });
 
 onUnmounted(() => {
@@ -358,6 +371,9 @@ onUnmounted(() => {
   TUIStore.unwatch(StoreName.CHAT, {
     quoteMessage: onQuoteMessageUpdated,
   });
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    isQueuing: onIsQueuingUpdate,
+  });
 });
 
 const isInputToolbarShow = computed<boolean>(() => {
@@ -501,6 +517,12 @@ function onDislike(messageInfo: Object) {
   showFeedbackModal.value = true;
   feedbackModalRef.value.onDislike(messageInfo);
 }
+
+function onIsQueuingUpdate(data: {conversationID: string, value: number}) {
+  if (data && data.conversationID === currentConversationID.value) {
+    queueNumber.value = data.value;
+  }
+}
 </script>
 
 <style scoped lang="scss" src="./style/index.scss">

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

@@ -69,6 +69,7 @@ import audioIcon from '../../../assets/audio-blue.svg';
 import keyboardIcon from '../../../assets/keyboard-icon.svg';
 import { INPUT_TOOLBAR_TYPE } from '../../../constant';
 import { onUnmounted } from 'vue';
+import Log from '../../../utils/logger';
 const { ref, onMounted, onBeforeUnmount, computed } = vue;
 
 const props = defineProps({
@@ -111,23 +112,33 @@ const showSendButton = ref(false);
 const isInHumanService = ref(false);
 let quoteMessageCloudCustomData:string = '';
 const isInAudioMode = ref(false);
+let hasAudioStream = false;
+let audioStream = null;
 
 onMounted(() => {
   // document.addEventListener('click', handleClick);
   TUIStore.watch(StoreName.CUSTOM, {
     isInHumanService: onInHumanServiceUpdate,
   });
+  document.addEventListener('visibilitychange', handleVisibilityChange);
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CUSTOM, {
     isInHumanService: onInHumanServiceUpdate,
   });
+  stopAudioStream();
+  document.removeEventListener('visibilitychange', handleVisibilityChange);
 });
 
 const onInHumanServiceUpdate = (data: {conversationID: string, value: boolean}) => {
   if (data && data.conversationID === currentConversation.value.conversationID) {
     isInHumanService.value = data.value;
+    if (!isInHumanService.value) {
+      isInAudioMode.value = false;
+      placeholder.value = TUITranslateService.t('TUIChat.请输入消息');
+      stopAudioStream();
+    }
   }
 };
 
@@ -203,9 +214,28 @@ const toolShow = () => {
 const blurToolAndEmojiH5 = () =>{
   emit('blurToolAndEmojiH5');
 }
+const getAudioStream = async () => {
+  try {
+    stopAudioStream();
+    audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    hasAudioStream = true;
+  } catch (err) {
+    Log.e('Error accessing audio stream:', err);
+  }
+}
+const stopAudioStream = () => {
+  if (audioStream) {
+    audioStream.getTracks().forEach(track => track.stop());
+    audioStream = null;
+    hasAudioStream = false;
+  }
+}
 
 const audioShow = () => {
   isInAudioMode.value = !isInAudioMode.value;
+  if (isInAudioMode.value && !hasAudioStream) {
+    getAudioStream();
+  }
   placeholder.value = isInAudioMode.value ? TUITranslateService.t('TUIChat.按住说话') : TUITranslateService.t('TUIChat.请输入消息'); 
   emit('blurToolAndEmojiH5');
 }
@@ -228,6 +258,14 @@ const shouldShowAudio = computed(() => {
   return isH5 && isInHumanService.value && (props.enableSendingAudio === 1 || (props.inputToolbarList !== undefined && props.inputToolbarList.some(item => item.presetId === INPUT_TOOLBAR_TYPE.AUDIO && item.isEnabled === 1)));
 });
 
+const handleVisibilityChange = () => {
+  if (document.visibilityState === 'hidden') {
+    stopAudioStream();
+  } else if (document.visibilityState === 'visible' && isInAudioMode.value) {
+    getAudioStream();
+  }
+}
+
 defineExpose({
   insertEmoji,
   reEdit,

package/components/CustomerServiceChat/message-input/message-input-button.vue

@@ -89,6 +89,11 @@ const sendMessage = () => {
   &:hover {
     .message-input-button-hover {
       display: flex;
+      width: max-content;
+      max-width: 60vw;
+      overflow: hidden;
+      word-break: break-word;
+      white-space: normal;
     }
   }
 }

package/components/CustomerServiceChat/message-input/message-input-editor-web.vue

@@ -155,6 +155,7 @@ let recordTimer: any = null;
 const audioWaveBars = ref(Array(24).fill({ height: 6 }));
 let audioWaveAnimation = -1;
 let pressStartTime: any = null;
+const hasMicPermission = ref(false);
 
 function onCurrentConversationIDUpdated(conversationID: string) {
   if (currentConversationID.value !== conversationID) {
@@ -795,9 +796,11 @@ watch(
 );
 async function initRecorder() {
   clearInterval(recordTimer);
-  recordTimer = undefined;
+  recordTimer = null;
   recordTime.value = 0;
   await recorder.value.stop();
+  isRecording.value = false;
+  recordTip.value = TUITranslateService.t("TUIChat.松开发送");
   cancelAnimationFrame(audioWaveAnimation);
 }
 
@@ -826,14 +829,19 @@ const startRecording = async(e) => {
   isRecording.value = true;
   pressStartTime = new Date();
   recordCancel.value = false;
-  Recorder.getPermission().then(async() => {
+  Recorder.getPermission().then(() => {
+    hasMicPermission.value = true;
     if (!isRecording.value) {
       return;
     }
-    if (recordTimer !== undefined) {
+    if (recordTimer !== null) {
       initRecorder();
     }
+    // 提前获取音频流，避免开始录音时启动过长
     recorder.value.start().then(() => {
+      if (!isRecording.value) {
+        return;
+      }
       updateRecordWave();
       startRecordY = getRecordY(e);
       recordTimer = setInterval(() => {
@@ -841,7 +849,6 @@ const startRecording = async(e) => {
       }, 1000);
     }, (error) => {
       Log.e(`Error in recording ${error.name} : ${error.message}`);
-      isRecording.value = false;
       let toastMessage = `${error.name} : ${error.message}`;
       Toast({
         message:toastMessage,
@@ -851,7 +858,6 @@ const startRecording = async(e) => {
       initRecorder();
     });
   }, (error) => {
-    isRecording.value = false;
     initRecorder();
     Toast({
       message:TUITranslateService.t("TUIChat.请检查麦克风访问权限"),
@@ -864,11 +870,10 @@ const startRecording = async(e) => {
 };
 
 const stopRecording = async () => {
-  isRecording.value = false;
   const duration = recordTime.value;
   initRecorder();
   const pressDuration = Date.now() - pressStartTime;
-  if (pressDuration < 1000) {
+  if (pressDuration < 1000 && hasMicPermission.value) {
     // 按压时间过短，还没开始录音就结束
     Toast({
       message: TUITranslateService.t("TUIChat.按压时间过短，请按压超过1秒"),
@@ -1179,8 +1184,7 @@ defineExpose({
   overflow: hidden;
   right: 0;
   bottom: 0;
-  background: linear-gradient(180deg, #FFF 0%, #FFF 64.35%);
-  background: linear-gradient(180deg, color(display-p3 1 1 1 / 0.00) 0%, color(display-p3 1 1 1) 64.35%);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 64.35%);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;

package/components/CustomerServiceChat/message-input-toolbar/emoji-dialog-mobile/emoji-dialog-mobile.vue

@@ -1,60 +1,54 @@
 <template>
-
-    <div class="emojiDialog">
-        <ul ref="emojiPickerListRef" class="emojiDialogList">
-            <li
-                v-for="(childrenItem, childrenIndex) in currentEmojiList"
-                :key="childrenIndex"
-                class="emojiDialogList-item"
-                @click="select(childrenItem, childrenIndex)"
-            >
-                <img
-                    v-if="currentTabItem.type === EMOJI_TYPE.BASIC"
-                    class="emoji"
-                    :src="currentTabItem.url + BASIC_EMOJI_URL_MAPPING[childrenItem]"
-                    >
-            </li>
-        </ul>
-        <div class="sendButtonContainer">
-            <div class="sendButton" @click="sendMessage">
-              {{ TUITranslateService.t("发送") }}
-            </div>
-        </div>
+  <div class="emojiDialog">
+    <ul ref="emojiPickerListRef" class="emojiDialogList">
+      <li
+        v-for="(childrenItem, childrenIndex) in currentEmojiList"
+        :key="childrenIndex"
+        class="emojiDialogList-item"
+        @click="select(childrenItem, childrenIndex)"
+      >
+        <img
+          class="emoji"
+          :src="BASIC_EMOJI_URL + BASIC_EMOJI_URL_MAPPING[childrenItem]"
+        >
+      </li>
+    </ul>
+    <div class="sendButtonContainer">
+      <div class="sendButton" @click="sendMessage">
+        {{ TUITranslateService.t("发送") }}
+      </div>
     </div>
-    
+  </div>
 </template>
 <script lang="ts" setup>
 import vue from '../../../../adapter-vue';
-import { IEmojiGroupList, IEmojiGroup } from '../../../../interface';
+import { IEmojiGroupList } from '../../../../interface';
 const { ref, onMounted, onUnmounted } = vue;
 import {
-  TUIChatService,
   TUIStore,
   StoreName,
   IConversationModel,
   TUITranslateService,
-  SendMessageParams,
 } from '@tencentcloud/chat-uikit-engine';
 import {
   EMOJI_GROUP_LIST,
   BASIC_EMOJI_URL_MAPPING,
   convertKeyToEmojiName,
+  BASIC_EMOJI_URL,
+  filterEmojisInNonChineseEnv,
 } from '../../emoji-config';
-import { EMOJI_TYPE } from '.././../../../constant';
-import { isPC, } from '../../../../utils/env';
 
 const emits = defineEmits(['insertEmoji', 'onClose', 'sendMessage']);
 const list = ref<IEmojiGroupList>(initEmojiList());
 const currentConversation = ref();
 const emojiPickerListRef = ref();
-const currentTabIndex = ref<number>(0);
 const currentEmojiList = ref<string[]>(list?.value[0]?.list);
-    const currentTabItem = ref<IEmojiGroup>(list?.value[0]);
 
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdate,
   });
+  currentEmojiList.value = filterEmojisInNonChineseEnv(list.value[0].list);
 });
 
 onUnmounted(() => {
@@ -66,24 +60,10 @@ onUnmounted(() => {
 const select = (item: any, index: number) => {
   const options: any = {
     emoji: { key: item, name: convertKeyToEmojiName(item) },
-    type: currentTabItem?.value?.type,
+    type: 'basic',
+    url : BASIC_EMOJI_URL + BASIC_EMOJI_URL_MAPPING[item],
   };
-  switch (currentTabItem?.value?.type) {
-    case EMOJI_TYPE.BASIC:
-      options.url = currentTabItem?.value?.url + BASIC_EMOJI_URL_MAPPING[item];
-        emits('insertEmoji', options);
-      
-      break;
-    case EMOJI_TYPE.BIG:
-    //   sendFaceMessage(index, currentTabItem.value);
-      break;
-    case EMOJI_TYPE.CUSTOM:
-    //   sendFaceMessage(index, currentTabItem.value);
-      break;
-    default:
-      break;
-  }
-  isPC && emits('onClose');
+  emits('insertEmoji', options);
 };
 
 function sendMessage(){