@tencentcloud/ai-desk-customer-vue 0.1.2 → 0.1.4

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

@@ -202,9 +202,9 @@ import MessageTimestamp from './message-elements/message-timestamp.vue';
 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/plugins/plugin-components/message-plugin-web.vue';
+import MessagePlugin from '../message-list/message-elements/message-desk/message-plugin-web.vue';
 import ScrollButton from './scroll-button/index.vue';
-import { isPluginMessage } from '../message-list/message-elements/plugins/plugin-components/index';
+import { isPluginMessage } from './message-elements/message-desk/index';
 import Dialog from '../../common/Dialog/index.vue';
 import ImagePreviewer from '../../common/ImagePreviewer/index-web.vue';
 import ProgressMessage from '../../common/ProgressMessage/index.vue';
@@ -216,7 +216,7 @@ import {
 } from '../../../utils/utils';
 import { isMessageInvisible } from '../../../utils/index';
 // import {TUICustomerServer} from '../../../server';
-import {isCustomerConversation,getCustomerServiceAccounts,setCustomerServiceAccounts} from '../../../index';
+import {isCustomerConversation} from '../../../index';
 
 interface ScrollConfig {
   scrollToMessage?: IMessageModel;
@@ -328,10 +328,6 @@ onUnmounted(() => {
 });
 
 async function onMessageListUpdated(list: IMessageModel[]) {
-  let customeraccounts = getCustomerServiceAccounts();
-  if(customeraccounts.length == 0){
-    setCustomerServiceAccounts(TUIStore.getData(StoreName.CUSTOM, "customerServiceAccounts"));
-  } 
   if(!isCustomerConversation(currentConversationID.value)){
     return;
   }

package/components/CustomerServiceChat/message-list/message-elements/{plugins/plugin-components → message-desk}/index.ts

@@ -1,5 +1,5 @@
 import TUIChatEngine, { IMessageModel } from '@tencentcloud/chat-uikit-engine';
-import { isCustomerServicePluginMessage } from './message-customer/index';
+import { isCustomerServicePluginMessage } from './message-desk-elements/index';
 
 export function isPluginMessage(message: IMessageModel): boolean {
   return (

package/components/{customer-icon.vue → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/customer-icon.vue}

@@ -1,14 +1,7 @@
 <template>
   <!--本地 icon 资源, uniapp 打包到 app 仅支持标签 image, 打包小程序和 H5 均可支持标签 img -->
   <div class="common-icon-container">
-    <image
-      v-if="isApp"
-      class="common-icon"
-      :src="props.src"
-      :style="{ width: props.width, height: props.height }"
-    />
     <img
-      v-else
       class="common-icon"
       :src="props.src"
       :style="{ width: props.width, height: props.height }"
@@ -16,7 +9,6 @@
   </div>
 </template>
 <script lang="ts">
-import { isApp } from '../utils/env';
 
 interface Props {
   src: string;
@@ -42,7 +34,6 @@ export default {
   setup(props: Props) {
     return {
       props,
-      isApp,
     };
   },
 };

package/components/CustomerServiceChat/message-list/message-elements/{plugins/plugin-components/message-customer → message-desk/message-desk-elements}/index.ts

@@ -1,5 +1,5 @@
 import {
   isCustomerServicePluginMessage,
   isMessageInvisible as isCustomServiceMessageInvisible,
-} from '../../../../../../../index';
+} from '../../../../../../index';
 export { isCustomerServicePluginMessage, isCustomServiceMessageInvisible };

package/components/{message-branch.vue → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-branch.vue}

@@ -21,10 +21,10 @@
 </template>
 
 <script lang="ts">
-import vue from '../adapter-vue';
-import { customerServicePayloadType } from '../interface';
-import iconRight from '../assets/iconRight.svg';
-import iconQuestion from '../assets/icon_question.png'
+import vue from '../../../../../../adapter-vue';
+import { customerServicePayloadType } from '../../../../../../interface';
+import iconRight from '../../../../../../assets/iconRight.svg';
+import iconQuestion from '../../../../../../assets/icon_question.png';
 import Icon from './customer-icon.vue';
 const { computed, ref} = vue;
 // const { computed,ref } = vue;

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

@@ -0,0 +1,126 @@
+<template>
+  <div class="message-custom">
+
+    <div class="custom">
+      <div
+        v-if="
+          payload.src === CUSTOM_MESSAGE_SRC.BRANCH ||
+            payload.src === CUSTOM_MESSAGE_SRC.BRANCH_NUMBER ||
+            (payload.src === CUSTOM_MESSAGE_SRC.ROBOT_MSG &&
+              payload.subtype !== 'welcome_msg')
+        "
+      >
+        <MessageBranch
+          :payload="payload"
+          @sendMessage="sendTextMessage"
+        />
+      </div>
+      <div
+        v-if="
+          payload.src === CUSTOM_MESSAGE_SRC.ROBOT_MSG
+        "
+      >
+        <MessageIMRobotWelcome
+          :payload="payload"
+          @sendMessage="sendTextMessage"
+        />
+      </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.FROM_INPUT">
+        <MessageForm
+          :payload="payload"
+          @sendMessage="sendTextMessage"
+        />
+      </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.PRODUCT_CARD">
+        <MessageProductCard :payload="payload" />
+      </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.RICH_TEXT">
+        <MessageRichText :payload="payload" />
+      </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.STREAM_TEXT">
+        <MessageStream :payload="payload" />
+      </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.MULTI_BRANCH">
+        <MessageMultiBranch :payload="payload" @sendMessage="sendTextMessage"/>
+      </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.MULTI_FORM && message.flow == 'in'">
+        <MessageMultiForm :payload="payload"
+          @sendMessage="sendCustomMessage"
+          @showFormPopup="handleShowFormPopup"
+          />
+      </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.MENU">
+        <MessageRating
+          :message="props.message"
+          @sendMessage="sendCustomMessage"
+        />
+      </div>
+  </div>
+  </div>
+</template>
+<script lang="ts">
+import { CustomMessagePayload, TextMessagePayload, customerServicePayloadType } from '../../../../../../interface';
+import MessageRating from './message-rating/index.vue';
+import vue from '../../../../../../adapter-vue';
+import { JSONToObject } from '../../../../../../utils/index';
+import { CUSTOM_MESSAGE_SRC } from '../../../../../../constant';
+import MessageBranch from './message-branch.vue';
+import MessageForm from './message-single-form/index.vue';
+import MessageIMRobotWelcome from './message-robot-welcome.vue';
+import MessageProductCard from './message-product-card.vue';
+import MessageRichText from './message-rich-text.vue';
+import MessageStream from './message-stream.vue';
+import MessageMultiBranch from './message-multi-branch/index.vue';
+import MessageMultiForm from './message-multi-form/index.vue';
+import {
+  IMessageModel,
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
+interface Props {
+  message: IMessageModel;
+}
+const { computed } = vue;
+export default {
+  components: {
+    MessageBranch,
+    MessageForm,
+    MessageProductCard,
+    MessageRichText,
+    MessageIMRobotWelcome,
+    MessageStream,
+    MessageMultiBranch,
+    MessageMultiForm,
+    MessageRating
+  },
+  props: {
+    message: {
+      type: Object as () => IMessageModel,
+      default: () => ({}),
+    },
+  },
+  emits: ['showFormPopup'],
+  setup(props: Props, { emit }) {
+    const payload = computed<customerServicePayloadType>(() => {
+      return props.message && JSONToObject(props.message?.payload?.data);
+    });
+    const sendTextMessage = (payload: TextMessagePayload) => {
+      TUIChatService.sendTextMessage({payload});
+    };
+    const sendCustomMessage = (payload: CustomMessagePayload) => {
+      TUIChatService.sendCustomMessage({payload});
+    };
+    const handleShowFormPopup = (data: boolean) => {
+      emit('showFormPopup', data);
+    }
+
+    return {
+      payload,
+      props,
+      sendTextMessage,
+      CUSTOM_MESSAGE_SRC,
+      sendCustomMessage,
+      handleShowFormPopup
+    };
+  },
+};
+</script>

package/components/{message-multi-branch → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-branch}/branch-pc.vue

@@ -19,7 +19,7 @@
   </template>
   
   <script lang="ts">
-import { customerServicePayloadType } from '../../interface';
+import { customerServicePayloadType } from '../../../../../../../interface';
   interface branchItem {
     content: string;
     desc: string;

package/components/{message-multi-branch → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-branch}/index.vue

@@ -9,10 +9,9 @@
   </template>
   
   <script lang="ts">
-  import vue from '../../adapter-vue';
+  import vue from '../../../../../../../adapter-vue';
   import BranchPc from './branch-pc.vue';
-  import { customerServicePayloadType } from '../../interface';
-  import { isApp, isPC } from '../../utils/env';
+  import { customerServicePayloadType } from '../../../../../../../interface';
   const { computed} = vue;
   
   interface branchItem {

package/components/{message-multi-form → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form}/component-mobile/form-popup.vue

@@ -11,10 +11,9 @@
   </BottomPopup>
   </template>
   <script setup lang="ts">
-  import vue from "../../../adapter-vue";
+  import vue from "../../../../../../../../adapter-vue";
   const { withDefaults, defineProps, defineEmits } = vue;
-  import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";
-  import BottomPopup from "../../common/BottomPopup";
+  import BottomPopup from "../../../../../../../common/BottomPopup";
   const props = withDefaults(
     defineProps<{
       show: boolean;

package/components/{message-multi-form → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form}/component-mobile/input-mobile.vue

@@ -16,7 +16,7 @@
     </div>
 </template>
 <script lang="ts">
-import vue from '../../../adapter-vue';
+import vue from '../../../../../../../../adapter-vue';
 import LabelMobile from './label-mobile.vue';
 const { computed, ref} = vue;
 

package/components/{message-multi-form → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form}/component-mobile/radios-mobile.vue

@@ -28,11 +28,11 @@
 </template>
 <script lang="ts">
 import Label from './label-mobile.vue';
-import vue from '../../../adapter-vue';
+import vue from '../../../../../../../../adapter-vue';
 import Icon from '../../customer-icon.vue';
-import radioUncheckIcon from '../../../assets/radio-uncheck.png';
-import radioCheckIcon from '../../../assets/radio-check.png';
-import { isPC, isH5,isWeChat, isUniFrameWork } from '../../../utils/env';
+import radioUncheckIcon from '../../../../../../../../assets/radio-uncheck.png';
+import radioCheckIcon from '../../../../../../../../assets/radio-check.png';
+import { isPC, isH5,isWeChat, isUniFrameWork } from '../../../../../../../../utils/env';
 const {  ref} = vue;
 export default {
     components:{
@@ -69,7 +69,7 @@ export default {
         }
         
         const clickItem=(index:number) => {
-            selectedOption.value = props.chooseItemList[index];
+            selectedOption.value = props.chooseItemList[index] as string;
             emit('input-change',{name:props.name,value:selectedOption.value});
         }
 
@@ -122,7 +122,7 @@ input[type="radio"] {
         // border: 1px solid #6f686a;
         width: 20px; 
         height: 20px;
-        background-image: url('../../../assets/radio-uncheck.png');
+        background-image: url('../../../../../../../../assets/radio-uncheck.png');
         background-size: cover;
         background-position: center;
     } 
@@ -138,7 +138,7 @@ input[type="radio"] {
   } 
   &:checked {
     + label::after {
-      background-image: url('../../../assets/radio-check.png');
+      background-image: url('../../../../../../../../assets/radio-check.png');
       background-size: cover;
     }
   }

package/components/{message-multi-form → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form}/component-pc/input-pc.vue

@@ -15,7 +15,7 @@
     </div>
 </template>
 <script lang="ts">
-import vue from '../../../adapter-vue';
+import vue from '../../../../../../../../adapter-vue';
 const { computed, ref} = vue;
 
 interface FormItem{

package/components/{message-multi-form → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form}/component-pc/radio-pc.vue

@@ -19,10 +19,9 @@
     </div>
 </template>
 <script lang="ts">
-import vue from '../../../adapter-vue';
-import Icon from '../../customer-icon.vue';
-import radioUncheckIcon from '../../../assets/radio-uncheck.png';
-import radioCheckIcon from '../../../assets/radio-check.png';
+import vue from '../../../../../../../../adapter-vue';
+import radioUncheckIcon from '../../../../../../../../assets/radio-uncheck.png';
+import radioCheckIcon from '../../../../../../../../assets/radio-check.png';
 const {  ref} = vue;
 export default {
     props:{
@@ -55,7 +54,7 @@ export default {
         }
         
         const clickItem=(index:number) => {
-            selectedOption.value = props.chooseItemList[index];
+            selectedOption.value = props.chooseItemList[index] as string;
             emit('input-change',{name:props.name,value:selectedOption.value});
         }
 

package/components/{message-multi-form → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form}/form-mobile.vue

@@ -13,6 +13,7 @@
 		            :show="showDialog"
 		            :showHeaderCloseButton="false"
 		            @onClose="closeDialog"
+                title=""
 		        >
 		            <div style="height:100%;overflow-y: auto;">
 		                <div class="dialog-title">
@@ -68,17 +69,17 @@
     
 </template>
 <script lang="ts">
-import vue from '../../adapter-vue';
-import { customerServicePayloadType } from '../../interface';
-import iconForm from '../../assets/icon_form.png';
-import iconFormFilled from '../../assets/icon_form_filled.png';
-import iconClose from '../../assets/dialog-close.png';
+import vue from '../../../../../../../adapter-vue';
+import { customerServicePayloadType } from '../../../../../../../interface';
+import iconForm from '../../../../../../../assets/icon_form.png';
+import iconFormFilled from '../../../../../../../assets/icon_form_filled.png';
+import iconClose from '../../../../../../../assets/dialog-close.png';
 import Icon from '../customer-icon.vue';
 import InputMobile from './component-mobile/input-mobile.vue';
 import RadioMobile from './component-mobile/radios-mobile.vue';
 import LabelMobile from './component-mobile/label-mobile.vue';
 import FormPopup from './component-mobile/form-popup.vue';
-import { CUSTOM_MESSAGE_SRC } from '../../constant';
+import { CUSTOM_MESSAGE_SRC } from '../../../../../../../constant';
 const { ref , onMounted,computed} = vue;
 interface Props {
   payload: customerServicePayloadType;
@@ -199,7 +200,7 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../styles/common.scss";
+@import "../styles/common.scss";
 
 .edit-profile-container {
   @extend .container;

package/components/{message-multi-form → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form}/form-pc.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="title-container">
-		    <div class="form-title" v-if="checkTip">
+		    <div class="form-title" v-if="checkTip()">
 		        {{ props.payload.content.tip }}
 		    </div>
 		    <div class="form-finish-title-right" v-if="finishSubmit || props.payload.nodeStatus == 2" >
@@ -36,14 +36,14 @@
     
 </template>
 <script lang="ts">
-import vue from '../../adapter-vue';
-import { customerServicePayloadType } from '../../interface';
+import vue from '../../../../../../../adapter-vue';
+import { customerServicePayloadType } from '../../../../../../../interface';
 import LabelPC from './component-pc/label-pc.vue';
 import InputPC from './component-pc/input-pc.vue';
 import RadioPC from './component-pc/radio-pc.vue';
 import Icon from '../customer-icon.vue';
-import iconSucess from '../../assets/icon_success.png';
-import { CUSTOM_MESSAGE_SRC } from '../../constant';
+import iconSucess from '../../../../../../../assets/icon_success.png';
+import { CUSTOM_MESSAGE_SRC } from '../../../../../../../constant';
 const { ref, onMounted } = vue;
 interface Props {
   payload: customerServicePayloadType;

package/components/{message-multi-form → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form}/index.vue

@@ -8,11 +8,11 @@
 </template>
 
 <script lang="ts">
-import vue from '../../adapter-vue';
+import vue from '../../../../../../../adapter-vue';
 import FormPC from './form-pc.vue';
 import FormMobile from './form-mobile.vue';
-import { customerServicePayloadType } from '../../interface';
-import { isApp, isPC } from '../../utils/env';
+import { customerServicePayloadType } from '../../../../../../../interface';
+import { isPC } from '../../../../../../../utils/env';
 const { computed} = vue;
 
 interface branchItem {

package/components/{message-product-card.vue → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-product-card.vue}

@@ -29,8 +29,8 @@
 </template>
 
 <script lang="ts">
-import { customerServicePayloadType } from '../interface';
-import { isApp } from '../utils/env';
+import { customerServicePayloadType } from '../../../../../../interface';
+import { isApp } from '../../../../../../utils/env';
 
 // eslint-disable-next-line
 declare var uni: any;

package/components/{message-rating → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-rating}/index.vue

@@ -12,12 +12,12 @@
 </template>
 
 <script lang="ts">
-import vue from '../../adapter-vue';
-import { JSONToObject } from '../../utils/index';
-import { RATING_TEMPLATE_TYPE } from '../../constant';
+import vue from '../../../../../../../adapter-vue';
+import { JSONToObject } from '../../../../../../../utils/index';
+import { RATING_TEMPLATE_TYPE } from '../../../../../../../constant';
 import RatingStar from './message-rating-star.vue';
 import RatingNumber from './message-rating-number.vue';
-import { IMessageModel } from '../../interface';
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
 const { computed } = vue;
 
 interface Props {

package/components/{message-rating → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-rating}/message-rating-number.vue

@@ -57,9 +57,9 @@
 </template>
 
 <script lang="ts">
-import vue from '../../adapter-vue';
-import { CUSTOM_MESSAGE_SRC } from '../../constant';
-import { ratingTemplateType } from '../../interface';
+import vue from '../../../../../../../adapter-vue';
+import { CUSTOM_MESSAGE_SRC } from '../../../../../../../constant';
+import { ratingTemplateType } from '../../../../../../../interface';
 const { computed, ref, watchEffect } = vue;
 
 interface Props {

package/components/{message-rating → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-rating}/message-rating-star.vue

@@ -60,11 +60,11 @@
 </template>
 
 <script lang="ts">
-import vue from '../../adapter-vue';
-import { CUSTOM_MESSAGE_SRC } from '../../constant';
-import { ratingTemplateType } from '../../interface';
-import star from '../../assets/star.png';
-import starLine from '../../assets/starLine.png';
+import vue from '../../../../../../../adapter-vue';
+import { CUSTOM_MESSAGE_SRC } from '../../../../../../../constant';
+import { ratingTemplateType } from '../../../../../../../interface';
+import star from '../../../../../../../assets/star.png';
+import starLine from '../../../../../../../assets/starLine.png';
 import Icon from '../customer-icon.vue';
 const { computed, ref, watchEffect } = vue;
 

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="!isUniFrameWork">
+    <div>
       <div
         class="rich-text"
         v-html="formatedContent"
@@ -16,27 +16,22 @@
         
       </div>	
     </div>
-    <div v-else>
-      <!-- <mpHtml :content="formatedContent"/> -->
-    </div>
+
   </div>
 	
   
 </template>
 
 <script lang="ts">
-import vue  from '../adapter-vue';
+import vue  from '../../../../../../adapter-vue';
 import { marked } from 'marked';
-import { customerServicePayloadType } from '../interface';
-import {isUniFrameWork,isWeChat} from '../utils/env';
-// import mpHtml from './common/RichText/dist/uni-app/components/mp-html/mp-html.vue';
+import { customerServicePayloadType } from '../../../../../../interface';
 const { computed,ref } = vue;
 interface Props {
   payload: customerServicePayloadType;
 }
 export default {
   components: {
-    // mpHtml
   },
   props: {
     payload: {
@@ -59,21 +54,15 @@ export default {
       smartLists: true,
       smartypants: false,
     });
-    if(!isUniFrameWork){
       // @ts-ignore
       window.handleImageClick = function(e,href:string) {
         image.value = !image.value;
         imageSrc.value = href; 
       
       }
-    }
+    
       
       rendererMD.image = (href, title, text) => {
-        if(isUniFrameWork){
-          return `
-          <img src="${href}" alt="${text}" style="max-width: 100%;">
-        `
-        }
         return `
           <div onclick="handleImageClick(event,'${href}')">
             <img src="${href}" alt="${text}" style="max-width: 100%;">
@@ -96,7 +85,6 @@ export default {
       image,
       imageSrc,
       closeImage,
-      isUniFrameWork,
       imageList
     };
   },

package/components/{message-robot-welcome.vue → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-robot-welcome.vue}

@@ -32,14 +32,14 @@
 </template>
 
 <script lang="ts">
-import vue from '../adapter-vue';
-import imRobotGuess from '../assets/imRobotGuess.svg';
-import refresh from '../assets/refresh.svg';
-import iconRight from '../assets/iconRight.svg';
+import vue from '../../../../../../adapter-vue';
+import imRobotGuess from '../../../../../../assets/imRobotGuess.svg';
+import refresh from '../../../../../../assets/refresh.svg';
+import iconRight from '../../../../../../assets/iconRight.svg';
 import Icon from './customer-icon.vue';
-import iconQuestion from '../assets/icon_question.png';
-import iconRefresh from '../assets/icon_refresh.png';
-import { customerServicePayloadType } from '../interface';
+import iconQuestion from '../../../../../../assets/icon_question.png';
+import iconRefresh from '../../../../../../assets/icon_refresh.png';
+import { customerServicePayloadType } from '../../../../../../interface';
 const { reactive, toRefs } = vue;
 
 interface Props {

package/components/{message-form → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-single-form}/form-input.vue

@@ -48,10 +48,10 @@
 </template>
 
 <script lang="ts">
-import vue from '../../adapter-vue';
-import iconForm from '../../assets/icon_form.png';
+import vue from '../../../../../../../adapter-vue';
+import iconForm from '../../../../../../../assets/icon_form.png';
 import Icon from '../customer-icon.vue';
-import iconSucess from '../../assets/icon_success.png';
+import iconSucess from '../../../../../../../assets/icon_success.png';
 const { computed, ref} = vue;
 
 interface Props {
@@ -215,7 +215,7 @@ export default {
         // border: 1px solid #6f686a;
         width: 16px; 
         height: 16px;
-        background-image: url('../../assets/radio-uncheck.png');
+        background-image: url('../../../../../../../assets/radio-uncheck.png');
         background-size: cover;
         background-position: center;
     } 
@@ -231,7 +231,7 @@ export default {
   } 
   &:checked {
     + label::after {
-      background-image: url('../../assets/radio-check.png');
+      background-image: url('../../../../../../../assets/radio-check.png');
       background-size: cover;
     }
   }

package/components/{message-form → CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-single-form}/index.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import vue from '../../adapter-vue';
+import vue from '../../../../../../../adapter-vue';
 import FormBranch from './form-branch.vue';
 import FormInput from './form-input.vue';
 const { computed} = vue;

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

@@ -8,8 +8,8 @@
 </template>
 
 <script lang="ts">
-import vue from '../adapter-vue';
-import { customerServicePayloadType } from '../interface';
+import vue from '../../../../../../adapter-vue';
+import { customerServicePayloadType } from '../../../../../../interface';
 const { ref, watchEffect, onBeforeUnmount, onMounted } = vue;
 
 interface Props {