@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/message-rich-text.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <div v-if="!isUniFrameWork">
+      <div
+        class="rich-text"
+        v-html="formatedContent"
+      />
+      <div v-if="image" class="rich-image-previewer" @click="closeImage">
+        <img
+        class="rich-image-preview"
+        :style="{
+          transform: `scale(1) rotate(0deg)`,
+        }"
+        :src="imageSrc"
+        />
+        
+      </div>	
+    </div>
+    <div v-else>
+      <!-- <mpHtml :content="formatedContent"/> -->
+    </div>
+  </div>
+	
+  
+</template>
+
+<script lang="ts">
+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';
+const { computed,ref } = vue;
+interface Props {
+  payload: customerServicePayloadType;
+}
+export default {
+  components: {
+    // mpHtml
+  },
+  props: {
+    payload: {
+      type: Object as () => customerServicePayloadType,
+      default: () => ({}),
+    },
+  },
+  setup(props: Props) {
+    const image = ref(false);
+    const imageSrc = ref('');
+    const imageList = [];
+    const formatedContent = computed(() => {
+      const rendererMD = new marked.Renderer();
+    marked.setOptions({
+      renderer: rendererMD,
+      gfm: true,
+      breaks: true,
+      pedantic: false,
+      sanitize: false,
+      smartLists: true,
+      smartypants: false,
+    });
+    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%;">
+          </div>
+        `
+      }
+      let richtext = marked.parse(props.payload.content);
+      return richtext;
+    });
+
+    const closeImage = () => {
+      image.value = !image.value;
+      imageSrc.value = '';
+    }
+
+
+    return {
+      props,
+      formatedContent,
+      image,
+      imageSrc,
+      closeImage,
+      isUniFrameWork,
+      imageList
+    };
+  },
+};
+</script>
+<style lang="scss">
+.rich-text {
+  div,
+  ul,
+  ol,
+  dt,
+  dd,
+  li,
+  dl,
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  img,
+  a {
+    max-width: 100%;
+  }
+
+  a {
+    color: blue;
+  }
+}
+
+.rich-image-previewer {
+  position: fixed;
+  z-index: 101;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(#000, 0.3);
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+
+.rich-image-preview {
+  width: 80%;
+  height:auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: transform 0.1s ease 0s;
+  pointer-events: auto;
+}
+
+</style>

package/components/message-robot-welcome.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="welcome-card">
+    <div class="welcome-title">
+      <div class="welcome-title-left-container">
+        <Icon :src="iconQuestion" />
+        <p
+          v-if="title"
+          class="card-title"
+        >
+          {{ title }}
+        </p>
+      </div>
+      <div
+        class="change-wrapper"
+        @click="changeBranchList()"
+      >
+      <div style="margin-right: 3px;">
+        换一换
+      </div>
+        <Icon :src="iconRefresh" />
+      </div>
+    </div>
+    <div
+      v-for="(item, index) in showList"
+      :key="index"
+      class="welcome-item"
+      @click="handleContentListItemClick(item)"
+    >
+      <div>{{ item.content }}</div>
+    </div>
+  </div>
+</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 Icon from './customer-icon.vue';
+import iconQuestion from '../assets/icon_question.png';
+import iconRefresh from '../assets/icon_refresh.png';
+import { customerServicePayloadType } from '../interface';
+const { reactive, toRefs } = vue;
+
+interface Props {
+  payload: customerServicePayloadType;
+}
+
+interface welcomeBranchItem {
+  id: string;
+  content: string;
+  answer: string;
+}
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    payload: {
+      type: Object as () => customerServicePayloadType,
+      default: () => ({ content: { title: '', items: [] } }),
+    },
+  },
+  emits: ['sendMessage'],
+  setup(props: Props, { emit }) {
+    const data = reactive({
+      // title
+      title: props.payload?.content?.title || '',
+      // all branch list
+      list: props.payload?.content?.items || [],
+      // current branch list
+      showList: (props.payload?.content?.items || []).slice(0, 3),
+      // current page number
+      pageNumber: 1,
+    });
+
+    const handleContentListItemClick = (branch: welcomeBranchItem) => {
+      emit('sendMessage', { text: branch.content });
+    };
+
+    const changeBranchList = () => {
+      if (data.pageNumber * 3 >= data.list?.length) {
+        data.pageNumber = 0;
+      }
+      data.showList = data.list?.slice(
+        data.pageNumber * 3,
+        data.pageNumber * 3 + 3,
+      );
+      data.pageNumber += 1;
+    };
+
+    return {
+      ...toRefs(data),
+      handleContentListItemClick,
+      imRobotGuess,
+      refresh,
+      iconRight,
+      changeBranchList,
+      iconQuestion,
+      iconRefresh
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.welcome-card {
+  min-width: 300px;
+  max-width: 400px;
+
+  .welcome-title {
+    display: flex;
+    height: 20px;
+    margin-bottom: 10px;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .welcome-title-left-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .card-title {
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 16px;
+  }
+
+  .el-link {
+    display: block;
+    font-weight: 400;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
+  /* stylelint-disable */
+  .el-link__inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  /* stylelint-enable */
+
+  .branch-number {
+    margin-left: 15px;
+    margin-right: 15px;
+    font-size: 20px;
+    display: inline-block;
+  }
+
+  .change-wrapper {
+    display: flex;
+    cursor: pointer;
+  }
+
+  .welcome-item {
+    padding: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background-color: #ffffff;
+    margin-bottom: 10px;
+    border:1px solid #adcfff;
+    border-radius: 20px;
+    font-weight: 500;
+    color: #1c66e5;
+    gap: 10px;
+  }
+
+  .welcome-item:hover {
+    background: #f2f7ff;
+  }
+
+  .welcome-item:last-child {
+    margin-bottom: 0;
+  }
+}
+</style>

package/components/message-stream.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="message-stream">
+    {{ displayedContent }}<span
+      v-if="!isFinished"
+      class="blinking-cursor"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import vue from '../adapter-vue';
+import { customerServicePayloadType } from '../interface';
+const { ref, watchEffect, onBeforeUnmount, onMounted } = vue;
+
+interface Props {
+  payload: customerServicePayloadType;
+}
+
+export default {
+  props: {
+    payload: {
+      type: Object as () => customerServicePayloadType,
+      default: () => ({}),
+    },
+  },
+  setup(props: Props) {
+    const content = ref<string>('');
+    const displayedContent = ref<string>('');
+    const isFinished = ref<boolean>(false);
+    let intervalId: number | null = null;
+    let currentIndex = 0;
+
+    const updateDisplayedContent = () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+      // @ts-ignore
+      intervalId = setInterval(() => {
+        if (currentIndex < content.value.length) {
+          displayedContent.value += content.value[currentIndex];
+          currentIndex++;
+        } else {
+          clearInterval(intervalId!);
+          intervalId = null;
+        }
+      }, 50);
+    };
+
+    onMounted(() => {
+      content.value = props?.payload?.chunks?.join('') ?? '';
+      displayedContent.value = content.value;
+      currentIndex = content.value.length;
+    });
+
+    watchEffect(() => {
+      const newContent = props?.payload?.chunks?.join('') ?? '';
+      if (newContent.length > currentIndex) {
+        content.value = newContent;
+        updateDisplayedContent();
+      }
+    });
+
+    watchEffect(() => {
+      isFinished.value = props?.payload?.isFinished === 1;
+    });
+
+    onBeforeUnmount(() => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    });
+
+    return {
+      content,
+      props,
+      isFinished,
+      displayedContent,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.message-stream {
+  overflow-wrap: break-word;
+  word-break: keep-all;
+  white-space: normal;
+  font-size: 14px;
+
+  .blinking-cursor {
+    display: inline-block;
+    width: 1px;
+    height: 16px;
+    background-color: black;
+    animation: blink 1s step-end infinite;
+    vertical-align: sub;
+  }
+
+  @keyframes blink {
+    0%,
+    100% {
+      background-color: transparent;
+    }
+
+    50% {
+      background-color: black;
+    }
+  }
+}
+</style>

package/constant.ts

@@ -0,0 +1,122 @@
+// https://cloud.tencent.com/document/product/269/96058
+export const CUSTOM_MESSAGE_SRC = {
+  OFFICIAL_ACCOUNT: '1',
+  MINI_APP: '2',
+  MINI_APP_SERVICE_ACCOUNT: '3',
+  BACKEND_INTERNAL: '4',
+  WEB: '5',
+  SESSION_MESSAGE_SLICE: '6',
+  MINI_APP_AUTO: '7',
+  INTERNAL: '8',
+  MENU: '9',
+  MENU_SELECTED: '10',
+  CLIENT_STATE: '11',
+  TYPING_STATE: '12',
+  ROBOT: '13',
+  BRANCH: '15',
+  BRANCH_NUMBER: 15,
+  MEMBER: '17',
+  NO_SEAT_ONLINE: '18',
+  END: '19',
+  TIMEOUT: '20',
+  FROM_INPUT: '21',
+  PRODUCT_CARD: '22',
+  SATISFACTION_CON: '23',
+  USER_SATISFACTION: '24',
+  ROBOT_MSG: '29',
+  RICH_TEXT: '30',
+  STREAM_TEXT: '31',
+  MULTI_BRANCH:'32',
+  MULTI_FORM:'33',
+};
+
+// im message extra type
+export const IM_MESSAGE_EXTRA_TYPE = {
+  INFO: 'INFO',
+  ROBERT_REPLAY_PLACEHOLDER: 'ROBOT_REPLAY_PLACEHOLDER',
+};
+
+// rating template type
+export const RATING_TEMPLATE_TYPE = {
+  STAR: 1,
+  NUMBER: 2,
+};
+
+// rating state
+export const RATING_STATE = {
+  NONE: 1,
+  IN_PROGRESS: 2,
+  DONE: 3,
+};
+
+// rating send rule
+export const RATING_SEND_RULE = {
+  ALLOW_AUTO_SEND: 1,
+  ALLOW_SERVICE_SEND: 2,
+  ALLOW_CLIENT_SEND: 4,
+};
+
+// send rating error code
+export const SEND_RATING_ERROR_CODE = {
+  SESSION_EXPIRED_OR_NOT_START: 10150,
+  ACCESS_DATA_ERROR: 10151,
+  DUPLICATE_SUBMIT: 10152,
+  INTERNAL_ERROR: 10153,
+  NO_STAFF: 10154,
+};
+// clent state
+export const CLIENT_STATE = {
+  ONLINE: '1',
+  OFFLINE: '2',
+};
+
+// IM message type
+export const IM_TYPE = {
+  WEB: 'web',
+  H5: 'h5',
+};
+
+// IM message status
+export const IM_STATUS = {
+  SUCCESS: 'success',
+  FAIL: 'fail',
+  UN_SEND: 'unSend',
+  READ: 'read',
+};
+
+// robot command
+export const ROBOT_COMMAND = {
+  UPDATE_BUBBLE: 'updateBubble',
+  UPDATE_SEARCH_TIPS: 'updateSearchTips',
+  SHOW_DIALOG: 'showDialog',
+  FEEDBACK: 'feedback',
+  SELECT_RECOMMEND: 'selectRecommend',
+  SELECT_SEARCH_TIP: 'selectSearchTips',
+  UPDATE_BOT_STATUS: 'updateBotStatus',
+};
+
+// robot message type
+export const ROBOT_MESSAGE_TYPE = {
+  SIMPLE_TEXT: 'simpleText',
+  RICH_TEXT: 'richText',
+  MULTI_LINE_TEXT: 'multiLineText',
+  CANDIDATE_ANSWER: 'candidateAnswer',
+  QUESTION_LIST: 'questionList',
+};
+
+// robot status
+export const ROBOT_STATUS = {
+  IN: 'inBot',
+  LEAVE: 'leaveBot',
+};
+
+// message type
+export const TYPES = {
+  MSG_CUSTOM: 'TIMCustomElem',
+};
+
+export const EMOJI_TYPE = {
+  BASIC: 'basic',
+  BIG: 'big',
+  CUSTOM: 'CUSTOM',
+};

package/excluded-list.txt

@@ -0,0 +1,6 @@
+.\node_modules\@tencentcloud\tui-customer-service-plugin\node_modules
+.\node_modules\@tencentcloud\tui-customer-service-plugin\package.json
+.\node_modules\@tencentcloud\tui-customer-service-plugin\excluded-list.txt
+.\node_modules\@tencentcloud\tui-customer-service-plugin\script
+
+

package/index.ts

@@ -0,0 +1,30 @@
+declare const uni: any;
+import TUICustomerPluginServer from './server';
+import { isMessageInvisible } from './utils/index';
+// #ifndef APP || APP-PLUS || MP || H5
+import CustomerChatWeb from './components/CustomerServiceChat/index-web.vue';
+// #endif
+
+const TUICustomerServer = TUICustomerPluginServer.getInstance();
+
+const isCustomerServicePluginMessage = TUICustomerServer.isCustomerServicePluginMessage.bind(TUICustomerServer);
+
+const setCustomerServiceAccounts = TUICustomerServer.setCustomerServiceAccounts.bind(TUICustomerServer);
+
+const getCustomerServiceAccounts = TUICustomerServer.getCustomerServiceAccounts.bind(TUICustomerServer);
+
+const isCustomerConversation = TUICustomerServer.isCustomerConversation.bind(TUICustomerServer);
+
+let CustomerServiceChat = {};
+if (typeof uni === 'undefined') {
+  CustomerServiceChat = CustomerChatWeb;
+}
+
+export {
+  isCustomerServicePluginMessage,
+  isMessageInvisible,
+  setCustomerServiceAccounts,
+  getCustomerServiceAccounts,
+  CustomerServiceChat,
+  isCustomerConversation
+};

package/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="message-custom">
+    <MessageRating
+      v-if="isMessageRating(props.message)"
+      :message="props.message"
+      @sendMessage="sendCustomMessage"
+    />
+    <MessageCustomerService
+      v-else-if="isCustomerServiceMessage(props.message)"
+      :message="props.message"
+      @sendMessage="sendTextMessage"
+      @sendCustomMessage="sendCustomMessage"
+      @showFormPopup="handleShowFormPopup"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { isCustomerServiceMessage, isMessageRating } from './utils/index';
+import { CustomMessagePayload, TextMessagePayload, IMessageModel } from './interface';
+import MessageCustomerService from './components/message-customer-service.vue';
+import MessageRating from './components/message-rating/index.vue';
+import {
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
+interface Props {
+  message: IMessageModel;
+}
+export default {
+  components: {
+    MessageCustomerService,
+    MessageRating,
+  },
+  props: {
+    message: {
+      type: Object as () => IMessageModel,
+      default: () => ({}),
+    },
+  },
+  emits: ['showFormPopup'],
+  setup(props: Props, { emit }) {
+    const sendTextMessage = (payload: TextMessagePayload) => {
+      TUIChatService.sendTextMessage({payload});
+    };
+    const sendCustomMessage = (payload: CustomMessagePayload) => {
+      TUIChatService.sendCustomMessage({payload});
+    };
+    const handleShowFormPopup = (data: boolean) => {
+      emit('showFormPopup', data);
+    }
+    return {
+      props,
+      sendTextMessage,
+      sendCustomMessage,
+      isCustomerServiceMessage,
+      isMessageRating,
+      handleShowFormPopup
+    };
+  },
+};
+</script>