askbot-dragon 0.6.24 → 0.6.28

package/src/components/actionSatisfaction.vue

@@ -0,0 +1,76 @@
+<template>
+  <div
+      class="action-satisfaction"
+  >
+    <p class="satisfaction-des" v-html="msg.content.satisfactionDes"></p>
+    <p
+        class="statisfaction-item"
+        @click="
+                  sendSatisfaction(
+                    'USER_ACTION_TO_SATISFACTION_V2',
+                    '满意',
+                    msg.content.satisfactoryAnswer,
+                    null,
+                    msg.apiKey
+                  )
+                "
+    >
+      满意<i class="arsenal_icon arsenalangle-right-solid"></i>
+    </p>
+    <p
+        class="statisfaction-item"
+        @click="
+                  sendSatisfaction(
+                    'USER_ACTION_TO_SATISFACTION_V2',
+                    '不满意',
+                    msg.content.unsatisfiedAnswer,
+                    msg.content.answerRadio,
+                    msg.apiKey
+                  )
+                "
+    >
+     不满意<i class="arsenal_icon arsenalangle-right-solid"></i>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "actionSatisfaction",
+  props:['msg'],
+  methods:{
+    sendSatisfaction(type, choose, answer, answerRadio,answerApiKey){
+      this.$emit('sendSatisfaction',type, choose, answer, answerRadio,answerApiKey)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import url(../assets/less/converSationContainer/common);
+.action-satisfaction{
+  .satisfaction-des{
+    word-wrap: break-word;
+    word-break: break-all;
+    overflow: hidden;
+    padding: 8px 0 10px 0;
+    height: auto;
+    border-bottom: 1px solid #EEEEEE;
+  }
+  .statisfaction-item{
+    padding: 8px 0;
+    height: 25px;
+    line-height: 25px;
+    background-color: #ffffff;
+    color: #366aff;
+    cursor:pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .end{
+    border-bottom-left-radius: 25px !important;
+    border-bottom-right-radius: 25px !important;
+  }
+}
+</style>

package/src/components/actionSendToBot.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+      class="action-send-to-bot"
+  >
+    <p class="bot-des" v-html="msg.content.description"></p>
+    <div class="options-list">
+      <p
+          v-for="(option, index) in msg.content.options"
+          class="options-item"
+          :key="msg.nodeId + '_' + index"
+          @click="$emit('onRadioClick2', option.content, option.name, msg.apiKey)"
+      >
+        {{ option.name }}<i class="arsenal_icon arsenalangle-right-solid"></i>
+      </p>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "actionSendToBot",
+    props:['msg']
+  }
+</script>
+
+<style scoped lang="less">
+.action-send-to-bot{
+  .bot-des {
+    word-wrap: break-word;
+    word-break: break-all;
+    overflow: hidden;
+    padding: 8px 10px 10px 0;
+    height: auto;
+    border-bottom: 1px solid #EEEEEE;
+  }
+  .options-list{
+    /* padding-top: 10px;*/
+    /*padding-right: 10px;*/
+    .options-item{
+      padding: 8px 0;
+      height: 25px;
+      line-height: 25px;
+      background-color: #ffffff;
+      color: #366aff;
+      cursor:pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      i{
+        padding-left: 10px;
+      }
+    }
+  }
+}
+</style>

package/src/components/answerDissatisfaction.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="answer-dissatisfaction">
+    <p class="satisfaction-reply-text" v-html="msg.content.replyText"></p>
+    <p
+        v-for="(option, index) in msg.content.replyOptions"
+        class="statisfaction-item"
+        :key="index"
+        @click="sendDissatisfaction(option,msg.apiKey)">
+      {{ option.name }}<i class="arsenal_icon arsenalangle-right-solid"></i>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "answerDissatisfaction",
+  data(){
+    return{
+
+    }
+  },
+  props:['msg'],
+  methods:{
+    sendDissatisfaction(option,apiKey){
+      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);*/
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.answer-dissatisfaction{
+  .satisfaction-reply-text{
+    word-wrap: break-word;
+    word-break: break-all;
+    overflow: hidden;
+    padding: 8px 0 10px 0;
+    height: auto;
+    border-bottom: 1px solid #EEEEEE;
+  }
+  .statisfaction-item{
+    padding: 8px 0;
+    height: 25px;
+    line-height: 25px;
+    background-color: #ffffff;
+    color: #366aff;
+    cursor:pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .end{
+    border-bottom-left-radius: 25px !important;
+    border-bottom-right-radius: 25px !important;
+  }
+}
+</style>

package/src/components/answerRadio.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="answer-radio">
+    <p class="radio-description" v-html="msg.content.description"></p>
+    <div class="options-list">
+      <div
+          v-for="(option, index) in msg.content.options"
+          class="options-item"
+          :key="msg.nodeId + '_' + index"
+          @click="
+                  $emit(
+                    'onRadioClick',msg.id +'_' + index + '_' + option.value + '_' + option.name,option.name, msg.apiKey,msg.actionCategory
+                  )">
+        {{ option.name }}<i class="arsenal_icon arsenalangle-right-solid"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "answerRadio",
+  data(){
+    return{
+
+    }
+  },
+  props:['msg']
+}
+</script>
+
+<style scoped lang="less">
+#answer-radio{
+  .radio-description {
+    word-wrap: break-word;
+    word-break: break-all;
+    overflow: hidden;
+    /*padding: 8px 10px 10px 0;*/
+    padding-bottom: 10px;
+    height: auto;
+    border-bottom: 1px solid #EEEEEE;
+  }
+  .options-list{
+   /* padding-top: 10px;*/
+    /*padding-right: 10px;*/
+    .options-item{
+     padding: 8px 0;
+      height: 25px;
+      line-height: 25px;
+      background-color: #ffffff;
+      color: #366aff;
+      cursor:pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      i{
+        padding-left: 10px;
+      }
+    }
+    .end{
+      border-bottom-left-radius: 25px !important;
+      border-bottom-right-radius: 25px !important;
+    }
+  }
+}
+</style>

package/src/components/askVideo.vue

@@ -0,0 +1,46 @@
+<template>
+    <div
+            v-loading="loading"
+            :element-loading-text="showProgress">
+        <!-- <video-player
+          class="video-player vjs-custom-skin"
+          x5-video-player-type="h5"
+          :options="videoOptions(msg.content,msg.type)"
+          @pause="statechanged"
+        /> -->
+        <video
+                :src="src"
+                controls="controls"
+                x5-video-player-type="h5-page"
+                style="object-fit: contain;width: 240px;height: 160px;background-color: black;border-radius: 17px"
+                class="video-player vjs-custom-skin"
+                :id="msg.keyId"/>
+    </div>
+</template>
+<script>
+    export default {
+        name: "ask_video",
+        props: ["msg", "url", "localUrl", "progress"],
+        data() {
+            return {
+            }
+        },
+        watch: {
+        },
+        computed: {
+            showProgress() {
+                return parseInt(this.progress * 100);
+            },
+            loading() {
+                return this.url == null || this.url === "";
+            },
+            src() {
+                return (this.url != null && this.url !== '') ? this.url : this.localUrl;
+            }
+        }
+
+    }
+</script>
+<style scoped lang="less">
+
+</style>

package/src/components/associationIntention.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="association-intention">
+    <div v-if=" (msgType === 'answer_welcofmetext' || msgType === 'answer_text') && !(msg.recommend&& msg.recommend.status)">
+      <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 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 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
+          class="association-img"
+      >
+        <!-- LPY 原生宽度适配有bug，弃用 -->
+        <img
+            :src="msg.content.url"
+            style="height: auto; width: auto;max-width: 240px;border-radius: 17px"
+            @click="onImageClick(msg.content.url)"
+            class="img-class"
+        />
+      </div>
+      <Recommend :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
+    </div>
+    <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>
+      <Recommend :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
+    </div>
+  </div>
+</template>
+
+<script>
+  import askVideo from "./askVideo";
+  import Recommend from "./recommend";
+  export default {
+    name: "associationIntention",
+    components: {Recommend, askVideo},
+    props: ["msg",'msgType'],
+    filters: {
+      imageStyle: function (html) {
+        //富文本内图片自适应高度宽度
+        const regex = new RegExp("<img", "gi");
+        return html.replace(
+            regex,
+            "<img style='max-width: 100%;' onclick='imageOnClick(this)'"
+        );
+      },
+    },
+    mounted() {
+      console.debug('msg',this.msg)
+    },
+    methods:{
+      // 将匹配结果替换表情图片
+      emotion (res) {
+        console.log('res:'+res);
+        let word = res.replace(/\/#|\/;/gi,'')
+        console.log('word:'+word);
+        const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', '不', '可以', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
+        let index = list.indexOf(word)
+        return `<img height="20px" src="https://guoranim.oss-cn-beijing.aliyuncs.com/emoji/${index+1}.png" align="middle">`
+      },
+      onRadioClickReco(id, name, apikey) {
+        this.$emit("onRadioClick", id, name, apikey);
+      },
+      onImageClick(url){
+        console.debug('onImageClick',url)
+      },
+    }
+  }
+</script>
+
+
+<style scoped lang="less">
+@import "../assets/less/converSationContainer/common";
+.association-intention{
+  .association-img{
+    /*display: flex;
+    align-items: center;
+    justify-content: center;*/
+    .options-list{
+      padding-top: 8px;
+    }
+  }
+  .answer-rich-text{
+    padding-bottom: 12px;
+    border-bottom: 1px solid #EEEEEE;
+  }
+}
+
+</style>

package/src/components/botActionSatisfactor.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="bot-action-satisfator">
+    <div class="replay">
+      <p class="reply-text" v-html="msg.content.reply_text"></p>
+      <div  v-if="
+                  msg.content.reply_options != null &&
+                  msg.content.reply_options.length > 0
+                ">
+        <p
+
+            v-for="(option, index) in msg.content.reply_options"
+            class="statisfaction-item"
+            :key="index"
+            @click="
+                  onSatisfactionClick(
+                    'user_action_to_unsatisfactory',
+                    option.name,
+                    option.answer, null,msg.apiKey
+                  )
+                "
+        >
+          {{ option.name }}<i class="arsenal_icon arsenalangle-right-solid"></i>
+        </p>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "botActionSatisfactor",
+    props:['msg'],
+    methods:{
+      onSatisfactionClick(type, choose, answer, answerRadio,answerApiKey) {
+        this.$emit("onSatisfactionClick", type, choose, answer, answerRadio,answerApiKey);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+@import "../assets/less/converSationContainer/common";
+.bot-action-satisfator{
+  .reply-text{
+    word-wrap: break-word;
+    word-break: break-all;
+    overflow: hidden;
+    padding: 8px 0 10px 0;
+    height: auto;
+    border-bottom: 1px solid #EEEEEE;
+  }
+  .statisfaction-item{
+    padding: 8px 0;
+    height: 25px;
+    line-height: 25px;
+    background-color: #ffffff;
+    color: #366aff;
+    cursor:pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .end{
+    border-bottom-left-radius: 25px !important;
+    border-bottom-right-radius: 25px !important;
+  }
+}
+</style>

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="marginRight" >
-      <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="marginRight">
-      <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>
@@ -82,40 +82,66 @@ name: "feedBack",
 </script>
 
 <style scoped lang="less">
-
+#feedBack{
+  .feed-positive-button{
+    background: #FFFFFF;
+    margin-right: 8px;
+    /deep/.el-button{
+      border: 1px solid #BBCDFF;
+      color: #366aff;
+      border-radius: 14px;
+      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{
+      border: 1px solid #BEC5DB;
+      color: #616161;
+      border-radius: 14px;
+      font-weight: 400;
+    }
+  }
+  /deep/.el-button.is-round{
+    padding: 9px 20px;
+  }
+}
 .phoneClass{
   width: 100vw;
   text-align: center;
   margin: 0 auto;
   line-height: 56px;
-  .marginRight{
-    margin-right: 10px;
-    margin-left: 10px;
-  }
   .el-button{
     min-width: 60px;
     height: 36px;
     line-height: 0.9;
   }
 }
-.btnClass{
-  color: #4C61E1;
-  border-color: #4C61E1
-}
-.btnClassActive{
-  color: #ffffff;
-  background-color: #4C61E1
-}
 .companyClass{
 /*  min-width: 300px;*/
   width: 370px;
   text-align: center;
   margin: 0 auto;
   line-height: 56px;
-  .marginRight{
-    margin-right: 10px;
-    margin-left: 10px;
-  }
   .el-button{
     min-width: 60px;
     height: 36px;
@@ -125,10 +151,4 @@ name: "feedBack",
 .notClick{
   pointer-events: none;
 }
-.positiveActive{
-  color: red;
-}
-.negativeActive{
-  color: red;
-}
 </style>