@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/message-branch.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="branch-card">
+    <div
+      v-if="content.header || content.title"
+      class="branch-body branch-bubble"
+    >
+      <Icon :src="iconQuestion" class="branch-title-icon"/>
+      {{ content.header || content.title }}
+  </div>
+    <div
+      v-if="!isSelected"
+      v-for="(item, index) in content.items"
+      :key="index"
+      class="branch-body branch-bubble branch-item"
+      :style="{ borderWidth: content.header ? '1px 0 0px 0' : '' }"
+      @click="handleContentListItemClick(item)"
+    >
+      {{ item.content }}
+    </div>
+  </div>
+</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 Icon from './customer-icon.vue';
+const { computed, ref} = vue;
+// const { computed,ref } = vue;
+
+interface Props {
+  payload: customerServicePayloadType;
+}
+
+interface branchItem {
+  content: string;
+  desc: string;
+}
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    payload: {
+      type: Object as () => customerServicePayloadType,
+      default: () => ({}),
+    },
+  },
+  emits: ['sendMessage'],
+  setup(props: Props, { emit }) {
+    const isSelected = ref<boolean>(false);
+    const content = computed(() => {
+      return (
+        props?.payload?.content || {
+          header: undefined,
+          items: [],
+        }
+      );
+    });
+
+    const handleContentListItemClick = (branch: branchItem) => {
+      isSelected.value = true;
+      emit('sendMessage', { text: branch.content });
+    };
+
+    return {
+      content,
+      handleContentListItemClick,
+      iconRight,
+      iconQuestion,
+      isSelected,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.branch-body {
+  display: flex;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 12px 14px;
+  font-size: 14px;
+  color: #000;
+  letter-spacing: 0;
+  word-wrap: break-word;
+  word-break: break-all;
+  position: relative;
+
+  .branch-main {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    align-content: flex-start;
+    border: 0 solid black;
+    margin: 0;
+    padding: 0;
+    min-width: 0;
+  }
+}
+.branch-bubble {
+  background: #f3f4f7;
+  border-radius: 0 10px 10px;
+  margin-bottom: 8px;
+}
+.branch-item {
+  color:#1c66e5;
+  cursor: pointer;
+}
+.branch-card {
+  min-width: 250px;
+  max-width: 350px;
+  display:flex;
+  flex-direction:column;
+  align-items: flex-start;
+}
+</style>

package/components/message-customer-service.vue

@@ -0,0 +1,114 @@
+<template>
+  <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>
+</template>
+
+<script lang="ts">
+import vue from '../adapter-vue';
+import { JSONToObject } from '../utils/index';
+import { CUSTOM_MESSAGE_SRC } from '../constant';
+import { customerServicePayloadType, IMessageModel } from '../interface';
+import MessageBranch from './message-branch.vue';
+import MessageForm from './message-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';
+const { computed } = vue;
+
+interface Props {
+  message: IMessageModel;
+}
+
+export default {
+  components: {
+    MessageBranch,
+    MessageForm,
+    MessageProductCard,
+    MessageRichText,
+    MessageIMRobotWelcome,
+    MessageStream,
+    MessageMultiBranch,
+    MessageMultiForm
+  },
+  props: {
+    message: {
+      type: Object as () => IMessageModel,
+      default: () => ({}),
+    },
+  },
+  emits: ['sendMessage','sendCustomMessage','showFormPopup'],
+  setup(props: Props, { emit }) {
+    const payload = computed<customerServicePayloadType>(() => {
+      return props.message && JSONToObject(props.message?.payload?.data);
+    });
+    const sendTextMessage = (text: string) => {
+      emit('sendMessage', text);
+    };
+    const sendCustomMessage = (data: any) => {
+      emit('sendCustomMessage', data);
+    };
+    const handleShowFormPopup = (data: boolean) => {
+      emit('showFormPopup', data);
+    }
+
+    return {
+      payload,
+      sendTextMessage,
+      CUSTOM_MESSAGE_SRC,
+      sendCustomMessage,
+      handleShowFormPopup
+    };
+  },
+};
+</script>

package/components/message-form/form-branch.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="form-branch-container">
+    <p
+      v-if="props.title"
+      class="card-title"
+    >
+      {{ props.title }}
+    </p>
+    <div
+      v-for="(item, index) in props.list"
+      :key="index"
+      class="form-branch-item"
+      @click="listItemClick(item)"
+    >
+      {{ item.content }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+interface branchItem {
+  content: string;
+  desc: string;
+}
+
+interface Props {
+  title: string;
+  list: branchItem[];
+}
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ['input-click'],
+  setup(props: Props, { emit }) {
+    const listItemClick = (branch: branchItem): void => {
+      emit('input-click', branch);
+    };
+    return {
+      props,
+      listItemClick,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.form-branch-container {
+  .card-title {
+    margin-bottom: 8px;
+  }
+
+  .form-branch-item {
+    font-weight: 400;
+    color: rgba(54, 141, 255, 1);
+    padding-top: 5px;
+    cursor: pointer;
+    padding-bottom: 5px;
+  }
+}
+</style>

package/components/message-form/form-input.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="form-container" v-if="!isShowForm && !isFinish">
+      <Icon :src="iconForm" width="65px" height="65px"/>
+    
+    <div class="right-container">
+      <div class="card-title">
+        {{ props.title }}
+      </div>
+      <div class="form-button" @click="showForm">
+        立即填写
+      </div>
+    </div>
+    
+  </div>
+  <div class="form-input-container" v-else-if="isShowForm && !isFinish">
+    <div class="card-title">
+      <!-- {{ props.title }} -->
+        title
+    </div>
+    <div class="form-input-box">
+      <div class="form-input-line">
+        <div class="form-label">
+          <span class="required-icon" v-if="true" >{{'*'}}</span>
+          <label>label</label>
+        </div>
+        <input
+          v-model="text"
+          class="form-input"
+          placeholder="请输入内容"
+        >
+      </div>
+    </div>
+  </div>
+  <div class="form-finish-container" v-else-if="isFinish">
+    <div class="card-title">
+      <div>
+        {{ props.title }}
+      </div>
+      <div class="form-finish-title-right">
+        <Icon :src="iconSucess" style="margin:0px 4px"/>
+        已提交
+      </div>
+    </div>
+    <div>
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+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';
+const { computed, ref} = vue;
+
+interface Props {
+  title: string;
+}
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['input-submit'],
+  setup(props: Props, { emit }) {
+    const disabled = ref<boolean>(false);
+    const text = ref<string>('');
+    const isShowForm = ref<boolean>(false);
+    const isFinish  = ref<boolean>(false);
+
+    const listItemClick = (): void => {
+      disabled.value = true;
+      isShowForm.value = false;
+      isFinish.value = true;
+      // emit('input-submit', text.value);
+    };
+
+    const showForm = (): void => {
+      isShowForm.value = true;
+    }
+
+    return {
+      disabled,
+      text,
+      listItemClick,
+      props,
+      iconForm,
+      isShowForm,
+      showForm,
+      iconSucess,
+      isFinish
+    };
+  },
+};
+</script>
+<style lang="scss">
+.form-container {
+  display:flex;
+  .right-container {
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-left: 10px;
+    .form-button {
+      background-color: #1c66e5;
+      color:#ffffff;
+      padding:2px 12px;
+      border-radius: 12px;
+    }
+  }
+}
+.form-input-container {
+  .card-title {
+    font-size:14px;
+    margin-bottom: 8px;
+  }
+
+  .form-input-box {
+    button:disabled {
+      background: #d8d8d8;
+    }
+    .form-input-line {
+      display:flex;
+      margin-bottom: 10px;
+    }
+    .form-label {
+      align-self: center;
+      display:flex;
+      width:66px;
+      label {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      
+      .required-icon {
+        color: #e54545; 
+        font-size: 16px;
+      }
+    }
+    .form-input {
+      flex:1;
+      margin-left:10px;
+      height: 27px;
+      border-radius: 8px;
+      border: 0px;
+    }
+    .form-input-radio {
+      margin-left:10px;
+      display:flex;
+      align-items: center;
+      flex-flow: wrap;
+      label {
+        margin-right: 5px;
+      }
+
+      .form-radio {
+        margin:0px 5px 0px 0px;
+      }
+    }
+  }
+
+  .form-button {
+    position: relative;
+    height: 40px;
+    width: 42px;
+    font-size: 16px;
+    border-radius: 0 8px 8px 0;
+    border: 0 rgba(221, 221, 221, 1) solid;
+    background: #006eff;
+    color: white;
+    cursor: pointer;
+  }
+
+  .form-button::before {
+    content: "";
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    right: 40%;
+    border-left: 2px solid #fff;
+    border-bottom: 2px solid #fff;
+    transform: translate(0, -50%) rotate(-135deg);
+  }
+}
+
+.form-finish-container {
+    .card-title {
+      display:flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+    }
+    .form-finish-title-right {
+      display:flex;
+    }
+  }
+  input[type="radio"] { 
+    +label { 
+      position: relative; 
+      cursor: pointer; 
+      margin-left: 20px; 
+      &::before { 
+        content: ""; 
+        position: absolute; 
+        left: -20px; 
+        top:2px;
+        border-radius: 50%;
+        // border: 1px solid #6f686a;
+        width: 16px; 
+        height: 16px;
+        background-image: url('../../assets/radio-uncheck.png');
+        background-size: cover;
+        background-position: center;
+    } 
+    &::after {
+      content: "";
+      position: absolute;
+      left: -20px;
+      top: 2px;
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      }
+  } 
+  &:checked {
+    + label::after {
+      background-image: url('../../assets/radio-check.png');
+      background-size: cover;
+    }
+  }
+}
+
+
+
+</style>

package/components/message-form/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    v-if="content.type === 1"
+    class="message-form"
+  >
+    <div class="message-form">
+      <FormBranch
+        :title="content.header"
+        :list="content.items"
+        @input-click="handleContentListItemClick"
+      />
+    </div>
+  </div>
+  <div
+    v-else
+    class="message-form"
+  >
+    <FormInput
+      :title="content.header"
+      @input-submit="handleFormSaveInputSubmit"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import vue from '../../adapter-vue';
+import FormBranch from './form-branch.vue';
+import FormInput from './form-input.vue';
+const { computed} = vue;
+
+interface branchItem {
+  content: string;
+  desc: string;
+}
+
+interface Props {
+  payload: any;
+}
+
+export default {
+  components: {
+    FormBranch,
+    FormInput,
+  },
+  props: {
+    payload: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['sendMessage'],
+  setup(props: Props, { emit }) {
+    const content = computed(() => {
+      return props.payload?.content || {
+        type: 0,
+        header: '',
+        items: [],
+      };
+    });
+
+    const handleContentListItemClick = (branch: branchItem) => {
+      emit('sendMessage', { text: branch.content });
+    };
+
+    const handleFormSaveInputSubmit = (text: string) => {
+      emit('sendMessage', { text });
+    };
+    return {
+      content,
+      handleContentListItemClick,
+      handleFormSaveInputSubmit,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.message-form {
+  max-width: 300px;
+}
+</style>

package/components/message-multi-branch/branch-pc.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="form-branch-container">
+      <div
+        v-if="props.payload.content.header"
+        class="card-title"
+      >
+            {{ props.payload.content.header }}
+        </div>
+      <div
+        v-if="props.payload.status == 0 && !isClicked"
+        v-for="(item, index) in props.payload.content.items"
+        :key="index"
+        class="form-branch-item"
+        @click="listItemClick(item)"
+      >
+        {{ item.content }}
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts">
+import { customerServicePayloadType } from '../../interface';
+  interface branchItem {
+    content: string;
+    desc: string;
+  }
+  
+  interface Props {
+    payload: customerServicePayloadType;
+  }
+  
+  export default {
+    props: {
+        payload: {
+            type: Object as () => customerServicePayloadType,
+            default: () => ({content: { header: '', items: [] },status:0}),
+        },
+    },
+    emits: ['input-click'],
+    setup(props: Props, { emit }) {
+        let isClicked = false;
+      const listItemClick = (branch: branchItem): void => {
+        emit('input-click', branch);
+        isClicked = true;
+      };
+      
+      return {
+        props,
+        isClicked,
+        listItemClick,
+      };
+    },
+  };
+  </script>
+  <style lang="scss">
+  .form-branch-container {
+    .card-title {
+        background-color: #fbfbfb;
+        padding: 12px;
+      border-radius: 0 10px 10px;
+      width:fit-content;
+      font-family: PingFangSC-Regular;
+    }
+  
+    .form-branch-item {
+      font-weight: 500;
+      color: rgba(54, 141, 255, 1);
+      background-color: #fbfbfb;
+      border: 1px solid rgba(0, 110, 255, 0.3);
+        padding: 12px;
+        border-radius: 25px;
+        margin-top: 8px;
+      cursor: pointer;
+        width:fit-content;
+        font-family: PingFangSC-Regular;
+    }
+  }
+  </style>
+