askbot-dragon 0.6.25 → 0.6.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "0.6.25",
+  "version": "0.6.29",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/assets/less/ticketMessage.less

@@ -13,6 +13,26 @@
   .button-item:last-child{
     margin-bottom: 0!important;
   }
+  .buttonClassItem{
+    width: 178px;
+    /* padding: 0px 30px;*/
+    height: 30px;
+    background: #FFFFFF;
+    border: 1px solid #BBCDFF;
+    border-radius: 14px;
+    color: #366aff;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+    .btn-name{
+      display: flex;
+      align-items: center;
+    }
+  }
   .isCompayClass{
     .el-divider--horizontal{
       margin: 8px 0 0 0 !important;
@@ -28,14 +48,6 @@
         }
       }
     }
-    .buttonClassItem{
-      font-weight: 600;
-      text-align: center;
-      border-top: 1.5px solid #DCDFE6;
-      padding: 8px 0;
-      color: #366aff;
-      cursor: pointer;
-    }
     .singleClass{
       padding: 8px 0;
       div, h1, h2, h3, h4, h5, h6, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td{
@@ -71,7 +83,7 @@
         overflow: hidden;
         img{
           width: 100%;
-          height:calc(80vw / 2.35);
+          height:calc((100vw - 120px) / 2.35);
           object-fit: contain;
         }
       }
@@ -127,22 +139,6 @@
         }
       }
     }
-    .buttonClassItem{
-     /* width: 178px;*/
-      padding: 0px 30px;
-      height: 30px;
-      background: #FFFFFF;
-      border: 1px solid #BBCDFF;
-      border-radius: 14px;
-      color: #366aff;
-      display: flex;
-      align-content: center;
-      justify-content: center;
-      .btn-name{
-        display: flex;
-        align-items: center;
-      }
-    }
   }
   .singleClass{
     display: flex;

package/src/components/ConversationContainer.vue

@@ -31,7 +31,8 @@
 <!--    满意或不满意-->
     <bot-action-satisfactor :msg="botActionSatis"></bot-action-satisfactor>
     <answer-dissatisfaction :msg="answerDiss"></answer-dissatisfaction>
-
+    <feed-back :feedBack="feedBack"></feed-back>
+    <voice-compontent></voice-compontent>
 <!--    <FileType :urls="urls" :color="black"></FileType>-->
 <!--    <FileType :urls="urls" :color="black"></FileType>
     <chat-content :messageList="messageList"></chat-content>-->
@@ -55,6 +56,7 @@ import LoadingProcess from "./loadingProcess";
 import BotActionSatisfactor from "./botActionSatisfactor";
 import AnswerDissatisfaction from "./answerDissatisfaction";
 import ActionSendToBot from "./actionSendToBot";
+import VoiceCompontent from './voiceComponent'
 /* import TicketMessage from "@/components/message/TicketMessage";
 import TicketMessage from "@/components/message/TicketMessage";
 import TextMessage from "@/components/message/TextMessage";
@@ -63,7 +65,7 @@ import FeedBack from "@/components/feedBack";*/
 /*import ActionAlert from "@/components/message/ActionAlertIframe";*/
 /*import FileType from "@/components/FileType";
 import ChatContent from "./chatContent";*/
-
+import FeedBack from "@/components/feedBack"
 export default {
   name: "ConversationContainer",
   components: {
@@ -80,7 +82,8 @@ export default {
     AnswerRadio,
     FormTemplate,
     TextMessage,
-
+    FeedBack,
+    VoiceCompontent
 
 
   },
@@ -1197,6 +1200,7 @@ export default {
 <style scoped lang="less">
 @import "../assets/less/converSationContainer/converSatonContainer";
 #conversation{
+  background-color:#F5F7FB ;
 }
 .img_div{
   position: relative;

package/src/components/actionSatisfaction.vue

@@ -18,7 +18,7 @@
       满意<i class="arsenal_icon arsenalangle-right-solid"></i>
     </p>
     <p
-        class="statisfaction-item end"
+        class="statisfaction-item"
         @click="
                   sendSatisfaction(
                     'USER_ACTION_TO_SATISFACTION_V2',

package/src/components/actionSendToBot.vue

@@ -2,14 +2,11 @@
   <div
       class="action-send-to-bot"
   >
-    <p class="other" v-html="msg.content.description"></p>
+    <p class="bot-des" v-html="msg.content.description"></p>
     <div class="options-list">
       <p
           v-for="(option, index) in msg.content.options"
-          v-bind:class="[
-                  index == msg.content.options.length - 1 ? 'end' : '',
-                  'options-item',
-                ]"
+          class="options-item"
           :key="msg.nodeId + '_' + index"
           @click="$emit('onRadioClick2', option.content, option.name, msg.apiKey)"
       >
@@ -29,7 +26,7 @@
 
 <style scoped lang="less">
 .action-send-to-bot{
-  .other {
+  .bot-des {
     word-wrap: break-word;
     word-break: break-all;
     overflow: hidden;
@@ -50,10 +47,9 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-    }
-    .end{
-      border-bottom-left-radius: 25px !important;
-      border-bottom-right-radius: 25px !important;
+      i{
+        padding-left: 10px;
+      }
     }
   }
 }

package/src/components/answerDissatisfaction.vue

@@ -3,7 +3,7 @@
     <p class="satisfaction-reply-text" v-html="msg.content.replyText"></p>
     <p
         v-for="(option, index) in msg.content.replyOptions"
-        v-bind:class="[ index == msg.content.replyOptions.length - 1 ? 'end' : '','statisfaction-item']"
+        class="statisfaction-item"
         :key="index"
         @click="sendDissatisfaction(option,msg.apiKey)">
       {{ option.name }}<i class="arsenal_icon arsenalangle-right-solid"></i>
@@ -22,11 +22,12 @@ export default {
   props:['msg'],
   methods:{
     sendDissatisfaction(option,apiKey){
-      let value = JSON.stringify({
+      this.$emit('sendDissatisfaction',option,apiKey)
+      /*let value = JSON.stringify({
         input: option.name,
         reply_text: option.answer
       });
-      this.$emit('sendMessage','USER_ACTION_TO_DISSATISFACTION_V2',value,null,apiKey);
+      this.$emit('sendMessage','USER_ACTION_TO_DISSATISFACTION_V2',value,null,apiKey);*/
     }
   }
 }

package/src/components/answerRadio.vue

@@ -1,13 +1,10 @@
 <template>
   <div id="answer-radio">
-    <p class="other" v-html="msg.content.description"></p>
+    <p class="radio-description" v-html="msg.content.description"></p>
     <div class="options-list">
       <div
           v-for="(option, index) in msg.content.options"
-          v-bind:class="[
-                  index == msg.content.options.length - 1 ? 'end' : '',
-                  'options-item',
-                ]"
+          class="options-item"
           :key="msg.nodeId + '_' + index"
           @click="
                   $emit(
@@ -33,11 +30,12 @@ export default {
 
 <style scoped lang="less">
 #answer-radio{
-  .other {
+  .radio-description {
     word-wrap: break-word;
     word-break: break-all;
     overflow: hidden;
-    padding: 8px 10px 10px 0;
+    /*padding: 8px 10px 10px 0;*/
+    padding-bottom: 10px;
     height: auto;
     border-bottom: 1px solid #EEEEEE;
   }
@@ -54,6 +52,9 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      i{
+        padding-left: 10px;
+      }
     }
     .end{
       border-bottom-left-radius: 25px !important;

package/src/components/associationIntention.vue

@@ -4,15 +4,15 @@
       <p v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)"></p>
     </div>
     <div v-if=" (msgType === 'answer_welcofmetext' || msgType === 'answer_text') && (msg.recommend&& msg.recommend.status)">
-      <p class="media-body-ps-text-box" v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)"></p>
-     <recommend :msg="msg"></recommend>
+      <p v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)" class="answer-rich-text"></p>
+     <Recommend :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
     </div>
     <div v-if="msg.type === 'answer_rich_text' && !(msg.content.recommend != undefined && msg.content.recommend.status)">
       <p v-html="$options.filters.imageStyle(msg.content.html)"></p>
     </div>
     <div  v-else-if="msg.type == 'answer_rich_text' && (msg.content.recommend != undefined && msg.content.recommend.status)">
-      <p style="padding: 12px 0" v-html="$options.filters.imageStyle(msg.content.html)"></p>
-      <recommend :msg="msg.content"></recommend>
+      <p v-html="$options.filters.imageStyle(msg.content.html)" class="answer-rich-text"></p>
+      <Recommend :msg="msg.content" @onRadioClickReco="onRadioClickReco"></Recommend>
     </div>
     <div v-else-if="msgType === 'answer_image'" >
       <div
@@ -26,17 +26,14 @@
             class="img-class"
         />
       </div>
-      <recommend :msg="msg"></recommend>
+      <Recommend :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
     </div>
-    <div v-else-if="msgType === 'answer_video' || msgType === 'user_video' || msgType === 'VIDEO'"
-         class="media-body-ps1">
+    <div v-else-if="msgType === 'answer_video' || msgType === 'user_video' || msgType === 'VIDEO'">
       <div class="association-img">
         <ask-video :msg="msg" :url="msg.content.url" :local-url="msg.content.localUrl"
                    :progress="msg.content.progress"></ask-video>
       </div>
-      <div class="media-body-ps" style="border-radius: 0 0 32px 32px;">
-        <recommend :msg="msg"></recommend>
-      </div>
+      <Recommend :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
     </div>
   </div>
 </template>
@@ -71,8 +68,12 @@
         let index = list.indexOf(word)
         return `<img height="20px" src="https://guoranim.oss-cn-beijing.aliyuncs.com/emoji/${index+1}.png" align="middle">`
       },
-      onRadioClickReco(){},
-      onImageClick(){},
+      onRadioClickReco(id, name, apikey) {
+        this.$emit("onRadioClick", id, name, apikey);
+      },
+      onImageClick(url){
+        console.debug('onImageClick',url)
+      },
     }
   }
 </script>
@@ -85,6 +86,13 @@
     /*display: flex;
     align-items: center;
     justify-content: center;*/
+    .options-list{
+      padding-top: 8px;
+    }
+  }
+  .answer-rich-text{
+    padding-bottom: 12px;
+    border-bottom: 1px solid #EEEEEE;
   }
 }
 

package/src/components/botActionSatisfactor.vue

@@ -9,10 +9,7 @@
         <p
 
             v-for="(option, index) in msg.content.reply_options"
-            v-bind:class="[
-                  index == msg.content.reply_options.length - 1 ? 'end' : '',
-                  'statisfaction-item',
-                ]"
+            class="statisfaction-item"
             :key="index"
             @click="
                   onSatisfactionClick(

package/src/components/chatContent.vue

@@ -234,7 +234,8 @@
                 display: flex;
                 -ms-flex-align: start;
                 align-items: flex-start;
-                max-width: 80%;
+                /*max-width: 80%;*/
+                max-width: calc(100vw - 50px);
                 .media-body-image{
                     background-color: #F4F8FC;
                     border: 1px solid #F4F8FC;

package/src/components/feedBack.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="feedBack" class="companyNotRem" :class="{phoneClass:isPhone,companyClass:isCompany,notClick:isDisabled===true}">
-    <span class="feed-positive-button" >
-      <el-button round class="btnClass" @click="positiveFeedback(feedBack,1)"   v-html="feedBack.positiveFeedback.text" v-if="positiveClick ===false">{{feedBack.positiveFeedback.text}}</el-button>
-      <el-button round class="btnClassActive"     v-html="feedBack.positiveFeedback.text" v-if="positiveClick ===true">{{feedBack.positiveFeedback.text}}</el-button>
+    <span :class="!positiveClick?'feed-positive-button':'feed-check-positive-button'">
+      <el-button round class="btnClass" @click="positiveFeedback(feedBack,1)"   v-html="feedBack.positiveFeedback.text" v-if="!positiveClick">{{feedBack.positiveFeedback.text}}</el-button>
+      <el-button round class="btnClassActive"  v-html="feedBack.positiveFeedback.text" v-else>{{feedBack.positiveFeedback.text}}</el-button>
     </span>
-    <span class="feed-negative-button">
-      <el-button round class="btnClass" @click="positiveFeedback(feedBack,2)"   v-html="feedBack.negativeFeedback.text" v-if="negativeClick ===false">{{feedBack.negativeFeedback.text}}</el-button>
-      <el-button round class="btnClassActive"  v-html="feedBack.negativeFeedback.text" v-if="negativeClick ===true">{{feedBack.negativeFeedback.text}}</el-button>
+    <span  :class="!negativeClick?'feed-negative-button':'feed-check-negative-button'">
+      <el-button round class="btnClass" @click="positiveFeedback(feedBack,2)"   v-html="feedBack.negativeFeedback.text" v-if="!negativeClick">{{feedBack.negativeFeedback.text}}</el-button>
+      <el-button round class="btnClassActive"  v-html="feedBack.negativeFeedback.text" v-else>{{feedBack.negativeFeedback.text}}</el-button>
     </span>
   </div>
 </template>
@@ -93,6 +93,25 @@ name: "feedBack",
       font-weight: 400;
     }
   }
+  .feed-check-positive-button{
+    margin-right: 8px;
+    /deep/.el-button{
+      border: 1px solid #4C61E1;
+      color: #FFFFFF;
+      background-color: #4C61E1;
+      border-radius: 14px;
+      font-weight: 400;
+    }
+  }
+  .feed-check-negative-button{
+    /deep/.el-button{
+      border: 1px solid #4C61E1;
+      color: #FFFFFF;
+      background-color: #4C61E1;
+      border-radius: 14px;
+      font-weight: 400;
+    }
+  }
   .feed-negative-button{
     background: #FFFFFF;
     /deep/.el-button{
@@ -117,10 +136,6 @@ name: "feedBack",
     line-height: 0.9;
   }
 }
-.btnClassActive{
-  color: #ffffff;
-  background-color: #4C61E1
-}
 .companyClass{
 /*  min-width: 300px;*/
   width: 370px;
@@ -136,10 +151,4 @@ name: "feedBack",
 .notClick{
   pointer-events: none;
 }
-.positiveActive{
-  color: red;
-}
-.negativeActive{
-  color: red;
-}
 </style>

package/src/components/message/swiper/ticketSwiper.vue

@@ -337,11 +337,11 @@ export default {
       if(flag){
         this.isPhone=true
         let el=this.$el
-        el.style.width='80vw'
+        el.style.width='calc(100vw - 120px)'
         let swiper=document.getElementsByClassName('swiper')
         for (let i=0;i<swiper.length;i++)
         {
-          swiper[i].style.width='80vw'
+          swiper[i].style.width='calc(100vw - 120px)'
           console.log(swiper[i].style.width)
         }
 

package/src/components/msgLoading.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media-body-loading">
+  <div class="media-body-loadings">
     <svg viewBox="0 0 120 120" width="30px" height="30px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <g id="circle" class="g-circles g-circles--v1">
         <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
@@ -56,7 +56,7 @@ export default {
 .circle__svg {
   transform: rotate(-90deg);
 }
-.media-body-loading {
+.media-body-loadings {
   background-color: #DEE3F0;
  /* background-color: #f4f8fc;*/
  /* border: 1px solid #f4f8fc;*/

package/src/components/recommend.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="text-recommed-intent">
-    <p class="other" v-if="msg.recommend&&msg.recommend.description" v-html="msg.recommend.description"></p>
+    <p class="intent-des" v-if="msg.recommend&&msg.recommend.description" v-html="msg.recommend.description"></p>
     <div v-if="msg.recommend.list" class="options-list">
       <p
           v-for="(option, index) in msg.recommend.list"
-          v-bind:class="[
-                  index == msg.recommend.list.length - 1 ? 'end' : '',
-                  'options-item',
-              ]"
+          class="options-item"
+          :class="index!==msg.recommend.list.length -1?'recommend-item':'last-item'"
           :key="msg.nodeId + '_' + index"
           @click="
                   $emit(
@@ -43,21 +41,23 @@ export default {
 <style scoped lang="less">
 .text-recommed-intent{
  /* max-width: 300px;*/
-  .other{
+  background-color: white;
+  .intent-des{
     word-wrap: break-word;
     word-break: break-all;
     overflow: hidden;
-    padding: 14px 0;
+    padding: 10px 0;
     height: auto;
     border-bottom: 1px solid #EEEEEE;
     color: #A9B3C6;
     font-size: 13px;
+    background-color: white;
   }
   .options-list{
-    padding-top: 8px;
+    /*padding-top: 8px;*/
     /*padding-right: 10px;*/
     .options-item{
-      padding: 8px 0;
+
       height: 25px;
       line-height: 25px;
       background-color: #ffffff;
@@ -66,6 +66,15 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      i{
+        padding-left: 10px;
+      }
+    }
+    .recommend-item{
+      padding: 8px 0;
+    }
+    .last-item{
+      padding-top: 8px;
     }
     .end{
       border-bottom-left-radius: 25px !important;

package/src/components/voiceComponent.vue

@@ -41,6 +41,7 @@ export default {
   bottom: 0;
   width: 100%;
   z-index: 9999;
+  left: 0;
   #voice-component-container{
     position: relative;
     #voice-component-c{
@@ -48,7 +49,7 @@ export default {
       width: 130%;
       position: relative;
       left: -15%;
-      background: linear-gradient(180deg, #E7E7E7, #FFFFFF);
+      background: linear-gradient(180deg, #f2f2f2, #FFFFFF);
       border: 2px solid white;
       border-radius: 100% 100% 0 0;
       border-bottom: none;