askbot-dragon 0.6.21 → 0.6.25

package/src/components/message/TextMessage.vue

@@ -7,8 +7,8 @@
         {{text.template}}
       </div>
     </div>
-    <div style="text-align: right;"  id="submit">
-      <el-button type="primary" round style="color: white;background-color: #4C61E1;" size="small" @click="submitClick" :disabled="disableds" >{{submitValue}}</el-button>
+    <div   id="submit">
+      <el-button  plain size="small" @click="submitClick" :disabled="disableds" >{{submitValue}}</el-button>
     </div>
     <div v-if="isCompany">
       <div v-if="single === true" style="border-top: 1px dashed #ebebeb;display: flex;justify-content: space-between" class="editMessage">
@@ -322,11 +322,11 @@ export default {
     let icon=text.getElementsByClassName('arsenalkebianji')
     for (let i=0;i<icon.length;i++)
     {
-      icon[i].style.color='#4C61E1'
+      icon[i].style.color='#366aff'
     }
     for (let i=0;i<cpntain.length;i++)
     {
-      if(this.type!==undefined)
+      if(this.type)
       {
         cpntain[i].style.paddingRight=0.2+'rem'
         cpntain[i].style.paddingLeft=0.2+'rem'
@@ -676,6 +676,7 @@ export default {
       }
     },
     inputBlur(){
+      console.debug('inputBlur')
       this.single=false
     },
     quedingClick(){
@@ -853,31 +854,65 @@ export default {
 
 <style lang="less">
 @import "../../assets/less/common.css";
+#textMessage{
+  #submit{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .el-button{
+      border: 1px solid #BBCDFF;
+      border-radius: 14px;
+      background-color: white;
+      color: #366aff;
+      font-weight: 400;
+    }
+    .el-button--small{
+      padding: 9px 30px;
+      font-size: 1em;
+    }
+  }
+  #html{
+    p{
+      color:#A9B3C6;
+    }
+    .ask-component-placeholder-icon{
+      padding-left: 12px;
+      color: #366aff;
+      font-size: 18px;
+    }
+    .ask-component-placeholder-span{
+      color: #616161!important;
+    }
+  }
+}
 .remPhoneClass{
   margin: 0 auto;
-  width: 80vw;
+  /*width: 80vw;*/
   .inputClass{
+    margin-top: 8px;
     width: 100%;
+    .el-input__inner{
+      border-radius: 9px;
+    }
   }
   .htmlClass{
     padding: 4px 0;
   }
-  #submit{
-    padding: 4px 0;
-  }
 
 }
 .remCompanyClass{
 
   margin: 0 auto;
-  width: 300px;
+  /*width: 300px;*/
   .inputClass{
     padding: 10px 0 10px 0;
     width: 100%;
+    .el-input__inner{
+      border-radius: 9px;
+    }
   }
-  #submit{
-    padding: 10px 0 4px 10px;
-  }
+
   .editMessage{
     display: flex;
     justify-content: space-between;

package/src/components/message/TicketMessage.vue

@@ -12,36 +12,30 @@
               <div class="ticketMessageContain">
                 <div :class="{isPhoneClass:isPhone===true,isCompayClass:isCompany===true}">
                   <div :class="{isIosClass:isIos===true,isAndroidClass:isAndroid===true}">
-                    <div class="htmlClass" >
-                      <div v-for="(items,ind) in item.content.htmlList" :key="ind" >
-                        <div v-if="items.type==='IMAGE'">
-                          <div class="img">
-                            <img :src="items.src">
-                          </div>
+                    <div class="htmlClass">
+                      <div v-for="(items,ind) in item.content.htmlList"
+                           :key="ind"
+                           class="html-item"
+                      >
+                        <div class="img" v-if="items.type==='IMAGE'">
+                          <img :src="items.src">
                         </div>
-                        <div v-if="items.type==='SINGLE'">
-                          <div class="singleClass" v-for="(itemss,inde) in items.list" :key="inde">
-                            <div v-html="itemss" class="singleItem"></div>
-                          </div>
+                        <div class="singleClass" v-else-if="items.type==='SINGLE'">
+                          <div v-html="itemss" class="singleItem"  v-for="(itemss,inde) in items.list" :key="inde"></div>
                         </div>
-                        <div v-if="items.type==='DOUBLE'">
-                          <div class="doubleClass">
-                            <div  class="doubleItem" v-for="(itemss,__index) in items.list" :key="__index" v-html="itemss">
-                            </div>
-
+                        <div class="doubleClass" v-else-if="items.type==='DOUBLE'">
+                          <div  class="doubleItem" v-for="(itemss,__index) in items.list" :key="__index" v-html="itemss">
                           </div>
                         </div>
-                        <div v-if="items.type==='TRIPLE'">
-                          <div class="tripleClass">
-                            <div v-html="itemss" class="tripleItem" v-for="(itemss,___index) in items.list" :key="___index"></div>
-                          </div>
+                        <div class="tripleClass" v-else-if="items.type==='TRIPLE'">
+                          <div v-html="itemss" class="tripleItem" v-for="(itemss,___index) in items.list" :key="___index"></div>
                         </div>
                       </div>
                     </div>
-                    <div v-for="(items,____index) in item.content.buttonList" :key="____index" >
-                      <div class="buttonClass">
+                    <div class="button-list">
+                      <div v-for="(items,____index) in item.content.buttonList" :key="____index" class="button-item">
                         <div @click="btnClick(items)" class="buttonClassItem">
-                          {{items.name}}
+                          <span class="btn-name">{{items.name}}</span>
                         </div>
                       </div>
                     </div>

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

@@ -401,39 +401,17 @@ export default {
   justify-content: center;
   width: 100%;
 }
-/*.isPhoneClass{
-  .bullet_item{
-    width: 0.1rem;
-    height: 0.1rem;
-    margin: 0 0.1rem;
-  }
-}*/
-/*.isAndroidClass,.isPcClass{
-  !*.bullet_item{
-    width: 0.05rem;
-    height: 0.05rem;
-    margin: 0 0.03rem;
-  }*!
-  .bullet_item {
-    color: white;
-    background-color: white;
-    border: 1.5px solid #AAAAAA !important;
-    border-radius: 0.2rem;
-    width: 3px;
-    height: 3px;
-    margin: 0 2px;
-  }
-}*/
 //机器人中样式
 .isPcClass{
   .bullet_item {
     color: white;
-    background-color: white;
-    border: 1.5px solid #AAAAAA !important;
+   /* background-color: white;*/
+    border: 1.5px solid #EAEDF3 !important;
     border-radius: 0.2rem;
     width: 4px;
     height: 4px;
     margin: 0 3px;
+    background-color: #EAEDF3;
   }
 }
 /*.typeClassRem{
@@ -451,8 +429,8 @@ export default {
 .isAndroidClass{
   .bullet_item {
     color: white;
-    background-color: white;
-    border: 1.5px solid #AAAAAA !important;
+    background-color: #EAEDF3;
+    border: 1.5px solid #EAEDF3 !important;
     border-radius: 0.2rem;
     width: 4px;
     height: 4px;
@@ -462,21 +440,17 @@ export default {
 .isIosClass{
   .bullet_item {
     color: white;
-    background-color: white;
-    border: 1.5px solid #AAAAAA !important;
+    background-color: #EAEDF3;
+    border: 1.5px solid #EAEDF3 !important;
     border-radius: 0.2rem;
     width: 4px;
     height: 4px;
     margin: 0 3px;
   }
 }
-/*.bullet_item {
-  color: white;
-  border: 1px solid #AAAAAA !important;
-  border-radius: 0.2rem;
-}*/
 .bullet_item.active {
-  background-color: #AAAAAA;
+  background-color: #366AFF;
+  border: 1.5px solid #366AFF !important;
 }
 
 .preBtn{

package/src/components/msgLoading.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="media-body-loading">
+    <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>
+        <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
+        <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
+        <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
+        <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
+        <circle id="7" cx="60" cy="110" r="10"></circle>
+        <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
+        <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
+        <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
+        <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
+        <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
+        <circle id="1" cx="60" cy="10" r="10"></circle>
+      </g>
+
+      <use xlink:href="#circle" class="use"/>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "msgLoading",
+  data() {
+    return {
+      name: "",
+    };
+  },
+  methods:{
+  },
+  mounted() {
+  }
+};
+</script>
+
+<style lang="less">
+@import "../assets/less/converSationContainer/common";
+
+.label {
+  font-family: 'Raleway', serif;
+  font-size: 14px;
+  text-transform: uppercase;
+  margin-top: 15px;
+}
+.circle__progress--fill {
+  --initialStroke: 0;
+  --transitionDuration: 0;
+  stroke-opacity: 1;
+  stroke-dasharray: var(--initialStroke);
+  stroke-dashoffset: var(--initialStroke);
+  transition: stroke-dashoffset var(--transitionDuration) ease;
+}
+.circle__svg {
+  transform: rotate(-90deg);
+}
+.media-body-loading {
+  background-color: #DEE3F0;
+ /* background-color: #f4f8fc;*/
+ /* border: 1px solid #f4f8fc;*/
+  word-break: break-word;
+/*  box-shadow: 0px 0px 5px 0px rgba(76, 97, 255, 0.38);*/
+  flex: 1;
+  text-align: left;
+  .bot_loading {
+    height: 4px;
+    line-height: 1px;
+    margin: 7px auto;
+    text-align: center;
+  }
+  .bot_loading span {
+    // margin-top: 7px;
+    display: inline-block;
+    width: 4px;
+    border-radius: 3px;
+    height: 100%;
+    margin-right: 3px;
+    margin-bottom: 2px;
+    background: #333333;
+    -webkit-animation:bot_load 1.04s ease infinite;
+  }
+  // .bot_loading span:last-child {
+  //   margin-right: 0px;
+  // }
+  @-webkit-keyframes bot_load {
+    0% {
+      opacity: 1;
+      -webkit-transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      -webkit-transform: scale(0);
+    }
+  }
+
+  .bot_loading span:nth-child(1) {
+    -webkit-animation-delay: 0.13s;
+  }
+  .bot_loading span:nth-child(2) {
+    -webkit-animation-delay: 0.39s;
+  }
+  .bot_loading span:nth-child(3) {
+    -webkit-animation-delay: 0.52s;
+  }
+  .bot_loading span:nth-child(4) {
+    -webkit-animation-delay: 0.65s;
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    stroke-opacity: 0;
+  }
+  50% {
+    stroke-dasharray: 130, 200;
+    stroke-dashoffset: -50;
+    stroke-opacity: 0.5;
+  }
+  100% {
+    stroke-dasharray: 130, 200;
+    stroke-dashoffset: -188;
+    stroke-opacity: 1;
+  }
+}
+.loading {
+  stroke: #FFFFFF;
+  stroke-width: 4;
+  fill: none;
+  animation: dash 2.5s linear infinite;
+  border-radius: 20px;
+ /* stroke-opacity: 0.6;*/
+}
+.left{fill:url(#left);}
+.right{fill:url(#right);}
+.top{fill:#9DBFE4;}
+@keyframes load{
+  0%{
+    transform:rotate(0)
+  }
+  50%{
+    transform:rotate(180deg)
+  }
+  100%{
+    transform:rotate(360deg)
+  }
+}
+#load{animation:load 2s  linear infinite; transform-origin:center center; }
+.g-circles {
+  -webkit-transform: scale(0.9) translate(7px, 7px);
+  -ms-transform: scale(0.9) translate(7px, 7px);
+  transform: scale(0.9) translate(7px, 7px);
+}
+
+circle {
+  fill: #FFFFFF;
+  fill-opacity: 0;
+  -webkit-animation: opacity 1.2s linear infinite;
+  animation: opacity 1.2s linear infinite;
+}
+circle:nth-child(12n + 1) {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+circle:nth-child(12n + 2) {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+circle:nth-child(12n + 3) {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+circle:nth-child(12n + 4) {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+circle:nth-child(12n + 5) {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+circle:nth-child(12n + 6) {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s;
+}
+circle:nth-child(12n + 7) {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s;
+}
+circle:nth-child(12n + 8) {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+circle:nth-child(12n + 9) {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+circle:nth-child(12n + 10) {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+circle:nth-child(12n + 11) {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+circle:nth-child(12n + 12) {
+  -webkit-animation-delay: -1.2s;
+  animation-delay: -1.2s;
+}
+
+@-webkit-keyframes opacity {
+  3% {
+    fill-opacity: 1;
+  }
+
+  75% {
+    fill-opacity: 0;
+  }
+}
+
+@keyframes opacity {
+  3% {
+    fill-opacity: 1;
+  }
+
+  75% {
+    fill-opacity: 0;
+  }
+}
+</style>

package/src/components/recommend.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="text-recommed-intent">
+    <p class="other" 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',
+              ]"
+          :key="msg.nodeId + '_' + index"
+          @click="
+                  $emit(
+                      'onRadioClickReco',
+                      'recdNodeId' +
+                          '_' +
+                          index +
+                          '_' +
+                          option.id +
+                          '_' +
+                          option.text,
+                      option.text,
+                      msg.apiKey
+                  )
+              "
+      >
+        {{ option.text
+        }}<i class="arsenal_icon arsenalangle-right-solid"></i>
+      </p>
+    </div>
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  name: "recommend",
+  props: ["msg"]
+}
+</script>
+
+<style scoped lang="less">
+.text-recommed-intent{
+ /* max-width: 300px;*/
+  .other{
+    word-wrap: break-word;
+    word-break: break-all;
+    overflow: hidden;
+    padding: 14px 0;
+    height: auto;
+    border-bottom: 1px solid #EEEEEE;
+    color: #A9B3C6;
+    font-size: 13px;
+  }
+  .options-list{
+    padding-top: 8px;
+    /*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;
+    }
+    .end{
+      border-bottom-left-radius: 25px !important;
+      border-bottom-right-radius: 25px !important;
+    }
+  }
+}
+</style>

package/src/components/voiceComponent.vue

@@ -0,0 +1,102 @@
+<template>
+  <div id="voice-component">
+    <div id="voice-component-container">
+      <div id="voice-component-c">
+        <div class="voice-btn">
+          <i class="iconfont arsenalchess-pawn-solid"></i>
+        </div>
+      </div>
+      <div class="close-voice" @click="closeVoice">
+        <div class="voice-style">
+          <i class="arsenal_icon arsenalcuo1"></i>
+        </div>
+      </div>
+      <div class="voice-tip">
+        <slot name="voiceTip"></slot>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "voice_component",
+  data(){
+    return{
+
+    }
+  },
+  methods:{
+    closeVoice(){
+      this.$emit('closeVoice')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#voice-component{
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  z-index: 9999;
+  #voice-component-container{
+    position: relative;
+    #voice-component-c{
+      height: 120px;
+      width: 130%;
+      position: relative;
+      left: -15%;
+      background: linear-gradient(180deg, #E7E7E7, #FFFFFF);
+      border: 2px solid white;
+      border-radius: 100% 100% 0 0;
+      border-bottom: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .voice-btn{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        i{
+          color: #366aff;
+          font-size: 30px;
+        }
+      }
+    }
+    .voice-tip{
+      width: 100%;
+      position: absolute;
+      top: -30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #999999;
+      font-size: 13px;
+    }
+    .close-voice{
+      width: 100%;
+      position: absolute;
+      top: -100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .voice-style{
+        width: 60px;
+        height: 60px;
+        background: #EEF1F7;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        i{
+          font-size: 24px;
+          color: #999999;
+        }
+      }
+    }
+  }
+
+}
+</style>