@tencentcloud/ai-desk-customer-vue 1.5.2 → 1.5.4

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

@@ -1,17 +1,49 @@
 <template>
   <div :class="['chat-header', !isPC && 'chat-header-h5']">
-    <div
-      v-if="!isPC && props.canCloseChat"
-      :class="['chat-header-back', !isPC && 'chat-header-h5-back']"
-      @click="closeChat(currentConversation.conversationID)"
-    >
-      <Icon :file="backSVG" />
+    <div class="chat-header-name">
+      <div
+        v-if="!isPC && props.canCloseChat"
+        :class="['chat-header-back', !isPC && 'chat-header-h5-back']"
+        @click="closeChat(currentConversation.conversationID)"
+      >
+        <Icon :file="backSVG" />
+      </div>
+      <div class="chat-header-container">
+        <Icon v-if="!isPC" width="32px" :file="customerAvatarMobile" />
+        <div :class="['chat-header-content', !isPC && 'chat-header-h5-content']">
+          {{ currentConversationName }}
+        </div>
+      </div>
     </div>
-    <div class="chat-header-container">
-      <Icon v-if="!isPC" style="width:32px;" :file="customerAvatarMobile" />
-      <div :class="['chat-header-content', !isPC && 'chat-header-h5-content']">
-         {{ currentConversationName }}
+    <div v-if="props.enableMultilingual === 1" class="language-selector">
+      <div class="selected-language-option" @click="toggleDropdown">
+        {{ currentLanguageOption.name }}
+        <span class="arrow" :class="{ 'arrow-up': showDropdown }">
+          <Icon :file="arrowDown" width="12px" height="12px" />
+        </span>
       </div>
+      
+      <transition name="fade">
+        <div v-if="showDropdown" class="dropdown-popup">
+          <div 
+            v-for="option in languageOptionList" 
+            :key="option.code"
+            :class="['dropdown-item',currentLanguageOption.code === option.code ? 'dropdown-item-selected' : '']"
+            @click="selectLanguage(option)"
+          >
+            <div class="language">
+              <div class="language-code">
+                {{ option.codeForShow }}
+              </div>
+              <div class="language-name">
+                {{ option.name }}
+              </div>
+            </div>
+            
+            <Icon v-if="currentLanguageOption.code === option.code" :file="languageSelectedIcon" width="20px" height="20px" />
+          </div>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -25,24 +57,51 @@ import {
 } from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../common/Icon.vue';
 import backSVG from '../../../assets/back.svg';
+import arrowDown from '../../../assets/language_arrow_down.svg';
 import customerAvatarMobile from '../../../assets/customer_avatar_mobile.png';
+import languageSelectedIcon from '../../../assets/language_check.svg';
 import { isPC } from '../../../utils/env';
 import state from '../../../utils/state';
+import { SUPPORTED_LANGUAGES } from '../../../constant';
 const { ref, onMounted, onUnmounted } = vue;
 
 interface IProps {
   canCloseChat?: boolean;
+  currentLang?: string;
+  enableMultilingual: number;
+  langList?: Array<string>;
+}
+interface ILanguage {
+  name: string;
+  code: string;
+  codeForShow: string;
 }
 
-const emits = defineEmits(['closeChat']);
+const emits = defineEmits(['closeChat','changeLanguage']);
 const currentConversation = ref<IConversationModel>();
 const currentConversationName = ref('');
 const isTyping = ref(false);
-
+const showDropdown = ref(false);
+const languageOptionList = ref<Array<ILanguage>>([]);
+const currentLanguageOption = ref<ILanguage>({name:'',code:'',codeForShow:''});
+ 
 const props = withDefaults(defineProps<IProps>(), {
   canCloseChat: true,
+  currentLang: '',
+  enableMultilingual: 0,
+  langList: () => [],
 });
 
+if (props.enableMultilingual === 1) {
+  languageOptionList.value = props.langList
+  .map(key => ({
+    code: key,
+    codeForShow: SUPPORTED_LANGUAGES[key].codeForShow,
+    name: SUPPORTED_LANGUAGES[key].name,
+  }));
+  currentLanguageOption.value = languageOptionList.value.find(option => option.code === props.currentLang);
+}
+
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdated,
@@ -84,8 +143,24 @@ function onTypingStatusUpdated(status: boolean) {
     }
   }
 }
+
+function toggleDropdown() {
+  showDropdown.value = !showDropdown.value
+}
+
+function selectLanguage(languageOption) {
+  showDropdown.value = false;
+  currentLanguageOption.value = languageOption;
+  emits('changeLanguage', languageOption.code);
+}
 </script>
 <style lang="scss" scoped>
+.chat-header-name {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-width: 0;
+}
 .chat-header {
   display: flex;
   min-width: 0;
@@ -93,9 +168,12 @@ function onTypingStatusUpdated(status: boolean) {
   align-items: center;
   justify-content: space-between;
   border-bottom:1px solid #f3f4f7;
+  font-family: PingFangSC-Regular;
+  width: 100%;
 
   &-container {
     display: flex;
+    flex: 1;
     min-width: 0;
     flex-direction: row;
     justify-content: flex-start;
@@ -113,6 +191,7 @@ function onTypingStatusUpdated(status: boolean) {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    min-width: 0;
   }
 
   &-back,
@@ -137,7 +216,130 @@ function onTypingStatusUpdated(status: boolean) {
   }
 
   &-content {
-    text-align: center;
+    margin: 0 20px 0 10px;
   }
 }
+
+.language-selector {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.selected-language-option {
+  padding: 8px 6px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-size: 12px;
+  color: #0F1014;
+  gap: 5px;
+}
+
+.arrow {
+  transition: transform 0.2s;
+  font-size: 12px;
+}
+
+.arrow-up {
+  transform: rotate(180deg);
+}
+
+.dropdown-popup {
+  position: absolute;
+  top: 100%;
+  right: 10px;
+  font-size: 12px;
+  max-width: 200px;
+  max-height: 400px;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0px 1px 8px 0px var(---Black-8, rgba(0, 0, 0, 0.06)), 0px 4px 12px 0px var(---Black-8, rgba(0, 0, 0, 0.06)), 0px 10px 30px 0px var(---Black-8, rgba(0, 0, 0, 0.06));
+  z-index: 1000;
+  margin-top: 4px;
+  padding: 8px 0px;
+  overflow-y: auto;
+  scrollbar-width: 4px;
+  scrollbar-color: #E7EAEF;
+}
+
+.dropdown-popup::-webkit-scrollbar {
+  width: 4px;
+}
+.dropdown-popup::-webkit-scrollbar-track {
+  background: transparent;
+}
+.dropdown-popup::-webkit-scrollbar-thumb {
+  background-color: #E7EAEF;
+  border-radius: 2px;
+}
+
+.dropdown-item {
+  transition: background-color 0.2s;
+  display: flex;
+  flex-direction: row;
+  padding: 5px 12px;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  .language {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    font-size: 12px;
+    .language-code {
+      color: #71798A;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 2px;
+      border: 1px solid rgba(114, 122, 138, 0.20);
+      padding: 0 8px;
+      font-weight: 600;
+      min-width: 12px;
+      flex-shrink: 0;
+    }
+    .language-name {
+      color: #0F1014;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      min-width: 0; 
+    }
+  }
+}
+
+.dropdown-item:hover,.dropdown-item-selected {
+  background-color: #F2F6FF;
+}
+
+.dropdown-item-selected {
+  position: relative;
+}
+
+.dropdown-item-selected::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #F2F6FF;
+  z-index: -1;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
 </style>

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

@@ -2,9 +2,10 @@ 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 as emojiCNLocales } from './locales/zh_cn';
+import { default as emojiENLocales } from './locales/en';
 import { IEmojiGroupList } from '../../../interface';
 import { EMOJI_TYPE } from '../../../constant';
-import { isWeChat } from '../../../utils/env';
+import state from '../../../utils/state.js';
 
 const hasCustomBasicEmoji = CUSTOM_BASIC_EMOJI_URL && Object.keys(CUSTOM_BASIC_EMOJI_URL_MAPPING).length;
 
@@ -32,7 +33,7 @@ const EMOJI_GROUP_LIST: IEmojiGroupList = [
  */
 const convertKeyToEmojiName = (key: string): string => {
   // WeChat does not support emoji translation
-  return isWeChat ? emojiCNLocales[key] : TUITranslateService.t(`Emoji.${key}`);
+  return state.get('currentLanguage') == 'zh' ? emojiCNLocales[key] : emojiENLocales[key];
 };
 
 /**

package/components/CustomerServiceChat/index-web.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['tui-chat', !isPC && 'tui-chat-h5']">
+  <div :class="['tui-chat', !isPC && 'tui-chat-h5']" :key="currentLanguage">
     <div
       v-if="currentConversationID"
       :class="['tui-chat', !isPC && 'tui-chat-h5']"
@@ -10,7 +10,11 @@
           !isPC && 'tui-chat-H5-header'
         ]"
         :canCloseChat="props.canCloseChat"
+        :enableMultilingual="props.enableMultilingual"
+        :langList="languageForShowList"
+        :currentLang="currentLanguage"
         @closeChat="closeChat"
+        @changeLanguage="changeLanguage"
       />
       <MessageList
         ref="messageListRef"
@@ -99,14 +103,13 @@ import MessageInputToolbar from './message-input-toolbar/index-web.vue';
 import EmojiDialog from './message-input-toolbar/emoji-dialog-mobile/emoji-dialog-mobile.vue';
 import { isH5, isPC } from '../../utils/env';
 import { ToolbarButtonModel, ToolbarDisplayType, InputToolbarModel, QuickOrderModel } from '../../interface';
-import { isSupportedLang } from '../../utils/';
 import Log from '../../utils/logger';
 import MessageToolbarButton from './message-toolbar-button/index.vue';
 import TUILocales from '../../locales';
 import { Toast, TOAST_TYPE } from '../common/Toast/index-web';
 import state from '../../utils/state.js';
 import { switchReadStatus,isNonEmptyObject } from '../../utils/utils';
-
+import { getCountryForTimezone } from 'countries-and-timezones';
 const { ref, onMounted, onUnmounted, computed } = vue;
 
 interface IProps {
@@ -129,6 +132,8 @@ interface IProps {
   showReadStatus?: number;
   showTyping?: number;
   bottomQuickOrder?: QuickOrderModel;
+  enableMultilingual?: number;
+  langList?: Array<string>;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -144,6 +149,10 @@ const toolShowH5 = ref(false);
 const languages = Object.keys(TUILocales);
 const quoteMessage = ref<IMessageModel>();
 const showBottomQuickOrder = ref(false);
+const currentLanguage = ref('');
+const languageForShowList = ref<Array<string>>([]);
+let timezone = '';
+let countryID = '';
 const props = withDefaults(defineProps<IProps>(), {
   canCloseChat: true,
   SDKAppID: 0,
@@ -161,6 +170,8 @@ const props = withDefaults(defineProps<IProps>(), {
   staffNickName: '',
   userNickName: '',
   showTyping: 0,
+  enableMultilingual: 0,
+  langList: () => [],
 });
 
 const loginCustomerUIKit = () => {
@@ -185,6 +196,12 @@ const loginCustomerUIKit = () => {
   })
 }
 
+const getTimeZoneAndCountry = () => {
+  timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const country = getCountryForTimezone(timezone);
+  countryID = country && country.id ? country.id : '';
+}
+
 const convertLanguageToLowercase = (language) => {
   let lowercase = language.toLowerCase();
   if (lowercase === 'zh-cn' || lowercase === 'zh_cn') {
@@ -195,27 +212,53 @@ const convertLanguageToLowercase = (language) => {
   return lowercase;
 }
 
+const getValidLanguage = (language: string) => {
+  let validLanguage = '';
+  if (props.enableMultilingual === 1 && languageForShowList.value.length !== 0) {
+    if (languageForShowList.value.includes(language)) {
+      validLanguage = language;
+    } else {
+      // choose default language (languageForShowList.value[0] for uikit) if language is not supported
+      validLanguage = languageForShowList.value[0];
+    }
+  } else if (languages.includes(language)) {
+    validLanguage = language;
+  } else {
+    if (props.userLang !== ''){
+      Log.w(`userLang:${props.userLang} is not supported`);
+    }
+    validLanguage = 'en';
+  }
+  return validLanguage;
+}
+
 const initLanguage = () => {
   Log.i(`initLanguage ${props.userLang}`);
   TUITranslateService.provideLanguages({ ...TUILocales });
   TUITranslateService.useI18n();
+  if (props.enableMultilingual === 1) {
+    languageForShowList.value = props.langList.filter(language => languages.includes(language));
+  }
   let language;
-  if (props.userLang !== '') {
-    let userLang = convertLanguageToLowercase(props.userLang);
-    if (!languages.includes(userLang)) {
-      Log.w(`userLang:${props.userLang} is not supported`);
-      language = 'en';
-    } else {
-      language = userLang;
+  try {
+    const prevLanguage = localStorage.getItem('AIDesk_language');
+    if (prevLanguage) {
+      language = prevLanguage;
     }
-  } else {
-    let navigatorLang = convertLanguageToLowercase(navigator.language);
-    if (!languages.includes(navigatorLang)) {
-      language = 'en';
+  } catch {
+    Log.w('No Previous Language');
+  }
+  if (!language) {
+    if (props.userLang !== '') {
+      let userLang = convertLanguageToLowercase(props.userLang);
+      language = getValidLanguage(userLang);
     } else {
-      language = navigatorLang;
+      let navigatorLang = convertLanguageToLowercase(navigator.language);
+      language = getValidLanguage(navigatorLang);
     }
-  }
+  } 
+  currentLanguage.value = language;
+  state.set('currentLanguage', language);
   TUITranslateService.changeLanguage(language);
 }
 
@@ -244,7 +287,7 @@ try {
   const userContext = TUILogin.getContext();
   if (userContext.userID == '' && props.SDKAppID !==0 && props.userID !=='' && props.userSig !==''){
     loginCustomerUIKit();
-    if (props.robotLang && !isSupportedLang(props.robotLang)) {
+    if (props.robotLang && !languages.includes(props.robotLang)) {
       Log.w(`robotLang:${props.robotLang} is not supported`);
     }
   }
@@ -252,6 +295,7 @@ try {
   setAvatarNickName();
   setShowReadStatus();
   setShowTyping();
+  getTimeZoneAndCountry();
   if (isNonEmptyObject(props.bottomQuickOrder)) {
     showBottomQuickOrder.value = true;
   }
@@ -355,14 +399,7 @@ function onCurrentConversationIDUpdate(conversationID: string) {
   currentConversationID.value = conversationID;
 
   // The TUICustomerServicePlugin plugin determines if the current conversation is a customer service conversation, then sets chatType and activates the conversation.
-  TUICore.callService({
-    serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
-    method: TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION,
-    params: {
-      conversationID: conversationID,
-      robotLang: props.robotLang && isSupportedLang(props.robotLang) ? props.robotLang : undefined,
-    },
-  });
+  activeConversation();
 }
 
 function emojiShow(){
@@ -401,6 +438,31 @@ function onQuoteMessageUpdated(options?: {
 function closeBottomQuickOrder() {
   showBottomQuickOrder.value = false;
 }
+
+function changeLanguage(languageCode: string) {
+  Log.l(`multilingual: change language to ${languageCode}`);
+  TUITranslateService.changeLanguage(languageCode).then(() => {
+    currentLanguage.value = languageCode;
+    try {
+      localStorage.setItem('AIDesk_language', languageCode);
+    } catch {
+      Log.w("Failed to set language to localStorage.");
+    }
+    activeConversation();
+  });
+}
+function activeConversation() {
+  TUICore.callService({
+    serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
+    method: TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION,
+    params: {
+      conversationID: currentConversationID.value,
+      robotLang: props.robotLang && languages.includes(props.robotLang) ? props.robotLang : currentLanguage.value === 'zh_tw' ? 'zh-TW' : currentLanguage.value,
+      country: countryID,
+      timezone: timezone,
+    },
+  });
+}
 </script>
 
 <style scoped lang="scss" src="./style/index.scss">

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

@@ -1,6 +1,8 @@
 <template>
   <div class="message-input-wrapper">
-    <MessageInputQuote />
+    <MessageInputQuote 
+      @getQuoteMessageCloudCustomData="getQuoteMessageCloudCustomData"
+    />
     <div
       :class="[
         'message-input-container',
@@ -96,6 +98,7 @@ const editor = ref<InstanceType<typeof MessageInputEditor>>();
 const currentConversation = ref<IConversationModel>();
 const h5Dialog = ref<HTMLElement>();
 const showSendButton = ref(false);
+let quoteMessageCloudCustomData:string = '';
 
 onMounted(() => {
   // document.addEventListener('click', handleClick);
@@ -136,13 +139,17 @@ const sendMessage = async () => {
     }
     return editor;
   });
-  await sendMessages(editorContentList, currentConversation.value);
+  await sendMessages(editorContentList, currentConversation.value, quoteMessageCloudCustomData);
   // 注意这里不要 emit 'sendMessage'，避免写出死循环
   emit('messageSent');
   editor.value?.resetEditor();
   showSendButton.value = false;
 };
 
+const getQuoteMessageCloudCustomData = (cloudCustomData: string) => {
+  quoteMessageCloudCustomData = cloudCustomData;
+};
+
 const insertEmoji = (emoji: any) => {
   editor.value?.addEmoji(emoji);
   showSendButton.value = true;

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

@@ -121,6 +121,17 @@ function onQuoteMessageUpdated(options?: {
   type: string;
 }) {
   currentQuoteMessage.value = options;
+  if (options && options.message) {
+    focusEditor();
+  }
+}
+
+function focusEditor() {
+  if (isH5 && editorDom.value) {
+    editorDom.value.focus();
+  } else if (editor) {
+    editor.commands.focus()
+  }
 }
 
 onMounted(() => {

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

@@ -21,8 +21,8 @@
       <Icon
         class="input-quote-close-icon"
         :file="closeIcon"
-        width="11px"
-        height="11px"
+        width="14px"
+        height="14px"
         @onClick="cancelQuote"
       />
     </div>
@@ -42,6 +42,8 @@ import closeIcon from '../../../../assets/close-quote-icon.svg';
 import { isPC,isH5 } from '../../../../utils/env';
 import { transformTextWithKeysToEmojiNames } from '../../emoji-config';
 import { InputDisplayType } from '../../../../interface';
+import { getQuoteContentForDesk } from '../../../../utils/utils';
+import { MessageQuoteTypeEnum } from '../../message-list/message-elements/message-quote/interface';
 const { ref, computed, onMounted, onUnmounted } = vue;
 
 interface IProps {
@@ -54,6 +56,9 @@ const props = withDefaults(defineProps<IProps>(), {
 
 const TYPES = TUIChatEngine.TYPES;
 const quoteMessage = ref<IMessageModel>();
+const quoteMessageType = ref<number>(0);
+
+const emits = defineEmits(['getQuoteMessageCloudCustomData']);
 
 onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
@@ -74,30 +79,39 @@ const quoteContentText = computed(() => {
       _quoteContentText = transformTextWithKeysToEmojiNames(
         quoteMessage.value.payload?.text,
       );
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_TEXT;
       break;
     case TYPES.MSG_IMAGE:
       _quoteContentText = TUITranslateService.t('TUIChat.图片');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_IMAGE;
       break;
     case TYPES.MSG_AUDIO:
       _quoteContentText = TUITranslateService.t('TUIChat.语音');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_SOUND;
       break;
     case TYPES.MSG_VIDEO:
       _quoteContentText = TUITranslateService.t('TUIChat.视频');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_VIDEO;
       break;
     case TYPES.MSG_FILE:
       _quoteContentText = TUITranslateService.t('TUIChat.文件');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_FILE;
       break;
     case TYPES.MSG_CUSTOM:
-      _quoteContentText = TUITranslateService.t('TUIChat.自定义');
+      _quoteContentText = getQuoteContentForDesk(quoteMessage.value);
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_CUSTOM;
       break;
     case TYPES.MSG_FACE:
       _quoteContentText = TUITranslateService.t('TUIChat.表情');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_FACE;
       break;
     case TYPES.MSG_MERGER:
       _quoteContentText = TUITranslateService.t('TUIChat.聊天记录');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_MERGER;
       break;
     default:
       _quoteContentText = TUITranslateService.t('TUIChat.消息');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_NONE;
       break;
   }
   return _quoteContentText;
@@ -114,10 +128,21 @@ function onQuoteMessageUpdated(options?: {
   message: IMessageModel;
   type: string;
 }) {
-  if (options?.message && options?.type === 'quote') {
+  if (options && options.message && options.type === 'quote') {
     quoteMessage.value = options.message;
+    const quoteMessageCloudCustomData = JSON.stringify({
+      messageReply: {
+        messageAbstract: quoteContentText.value,
+        messageID: quoteMessage.value.ID,
+        messageSender: quoteMessage.value.from,
+        messageTime: quoteMessage.value.time,
+        messageType: quoteMessageType.value,
+      }
+    });
+    emits('getQuoteMessageCloudCustomData', quoteMessageCloudCustomData);
   } else {
     quoteMessage.value = undefined;
+    emits('getQuoteMessageCloudCustomData', undefined);
   }
 }
 </script>
@@ -152,7 +177,7 @@ function onQuoteMessageUpdated(options?: {
   .input-quote-content-h5 {
     display: flex;
     justify-content: space-between;
-    background-color: #fff;
+    background-color: rgba(255, 255, 255, 0.5);
     padding: 8px 16px 8px 8px;
     font-size: 12px;
     align-items: center;
@@ -197,6 +222,6 @@ function onQuoteMessageUpdated(options?: {
 .input-quote-container-h5 {
   @extend %common-container-style;
   width:100%;
-  margin: 0px 0 5px 5px;
+  margin: 5px 0 5px 0px;
 }
 </style>