askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/interruptComponents/imageSelectionAnswer.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="imageSelectionAnswer">
+    <div class="imageSelectionText" v-if="msg.content.prompt">
+      {{msg.content.prompt}}
+    </div>
+    <div class="imageList">
+      <div class="imageItem"
+           v-for="(item,index) in msg.content.options"
+           :key="index"
+           :class="disabled || isDisabled ? 'disabledItem' : ''"
+      >
+        <el-image
+            style="width: 120px!important; height: 120px!important;"
+            :src="item.url"
+            @click="onImageClick(item.url)"
+            fit="cover">
+          <template #placeholder>
+            <div class="custom-loading">
+              <i class="el-icon-loading"></i>
+            </div>
+          </template>
+          <template #error>
+            <div class="custom-error">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </template>
+        </el-image>
+        <div class="checkIcon"
+             :class="checkImage && checkImage.url === item.url ? 'activeCheckIcon' : 'noCheckIcon'"
+             @click="selectImage(item)"
+        >
+          <div class="centerIcon" v-if="checkImage && checkImage.url === item.url">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="answerButton" v-if="msg.content.handleSettings && msg.content.handleSettings.length > 0" :class="disabled || isDisabled || !checkImage ? 'disabledButton' : ''">
+      <div class="buttonText"
+           v-for="(item,index) in msg.content.handleSettings"
+           :key="index"
+           @click="imageSelectionConfirm(item)"
+      >
+        {{ item }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "imageSelectionAnswer",
+  data(){
+    return{
+      checkImage:"",
+      isDisabled:false
+    }
+  },
+  props:{
+    answer:{
+      type:Object,
+      default(){
+        return{}
+      }
+    },
+    disabled:{
+      type:Boolean,
+      default:false
+    },
+    msg:{
+      type:Object,
+      default(){
+        return{}
+      }
+    },
+  },
+  methods:{
+    previewList(options){
+      let arr = [];
+      arr = options.map(item => item.url)
+      return arr
+    },
+    selectImage(item){
+      if (this.disabled || this.isDisabled){
+        return
+      }
+      this.checkImage = item;
+    },
+    imageSelectionConfirm(item){
+      if (this.disabled || this.isDisabled || !this.checkImage){
+        return
+      }
+      this.isDisabled = true;
+      this.$emit('imageSelectionConfirm',item,this.checkImage,this.msg)
+    },
+    onImageClick(url){
+      this.$emit('onImageClick',url)
+    },
+  }
+};
+</script>
+
+<style scoped lang="less">
+@import "../../assets/less/variables.less";
+
+.imageSelectionAnswer{
+  .imageSelectionText{
+    padding-bottom: 10px;
+  }
+  .imageList{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    background-color: @background-color-light;
+    .imageItem{
+      position: relative;
+      margin-right: 10px;
+      margin-bottom: 5px;
+      margin-top: 5px;
+      .checkIcon{
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 15px;
+        height: 15px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+      }
+      .activeCheckIcon{
+        background: @primary-color;
+        border: 1px solid @primary-color;
+        .centerIcon{
+          width: 6px;
+          height: 6px;
+          background: @background-color-light;
+          border-radius: 50%;
+          flex: none;
+        }
+      }
+      .noCheckIcon{
+        background: @background-color-light;
+        border: 1px solid @border-color-r6;
+      }
+    }
+  }
+  .answerButton{
+    padding-top: 10px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px solid @border-color-r6;
+    .buttonText{
+      padding: 0 4px;
+      cursor: pointer;
+      color: @font-primary-accent-color;
+    }
+  }
+  .disabledItem{
+    .checkIcon{
+      background-color: @background-color-asset-text-r2 !important;
+    }
+    .centerIcon{
+      background: @primary-color!important;
+    }
+  }
+  .custom-loading,
+  .custom-error {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: @background-color-custom;
+  }
+
+  .custom-loading {
+    color: @font-primary-accent-color;
+  }
+
+  .custom-error {
+    color: red;
+  }
+
+  .el-icon-loading {
+    font-size: 24px;
+    animation: rotating 2s linear infinite;
+  }
+
+  @keyframes rotating {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+}
+.disabledButton{
+  .buttonText{
+    color: @font-disable-color !important;
+  }
+}
+</style>

package/src/components/interruptComponents/multipleChoiceAnswer.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="multipleChoiceAnswer">
+    <div class="multipleText" v-if="msg.content.prompt">
+      {{msg.content.prompt}}
+    </div>
+    <div class="multipleList" :class="msg.content.options && msg.content.options.length == 0 ? 'disabledMultiple' : ''">
+      <el-checkbox-group v-model="checkList">
+        <el-checkbox
+            :label="item._metadata.id"
+            v-for="item in msg.content.options"
+            :key="item._metadata.id"
+            :disabled="disabled || isDisabled"
+        >
+          <el-image
+              style="width: 32px!important; height: 32px!important;margin-right: 4px;flex: none"
+              :src="item.url"
+              v-if="item.url"
+              @click.stop="onImageClick(item.url)"
+              fit="cover"></el-image>
+          {{ item.text }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <div class="answerButton" v-if="msg.content.handleSettings && msg.content.handleSettings.length > 0" :class="disabled || isDisabled || checkList.length === 0 ? 'disabledButton' : ''">
+      <div class="buttonText"
+           v-for="(item,index) in msg.content.handleSettings"
+           :key="index"
+           @click="multipleChoiceConfirm(item)"
+      >
+        {{ item }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "multipleChoiceAnswer",
+  data(){
+    return{
+      checkList:[],
+      isDisabled:false
+    }
+  },
+  props:{
+    disabled:{
+      type:Boolean,
+      default:false
+    },
+    msg:{
+      type:Object,
+      default(){
+        return{}
+      }
+    },
+  },
+  methods:{
+    previewList(options){
+      let arr = [];
+      arr = options.map(item => item.url)
+      return arr
+    },
+    multipleChoiceConfirm(item){
+      if (this.disabled || this.isDisabled || this.checkList.length === 0){
+        return
+      }
+      this.isDisabled = true;
+      this.$emit('multipleChoiceConfirm',item,this.checkList,this.msg)
+    },
+    onImageClick(url){
+      this.$emit('onImageClick',url)
+    },
+  }
+};
+</script>
+
+<style scoped lang="less">
+@import "../../assets/less/variables.less";
+
+.multipleChoiceAnswer{
+  .multipleText{
+    //margin-bottom: 10px;
+  }
+  .multipleList{
+    display: flex;
+    justify-items: flex-start;
+    padding: 8px 0;
+    background-color: @background-color-light;
+    /deep/.el-checkbox-group{
+      //display: flex;
+      //align-items: center;
+      //flex-direction: column;
+      .el-checkbox{
+        margin-right: 0!important;
+        margin-bottom: 10px;
+        display: flex;
+        align-items: center;
+        .el-checkbox__label{
+          display: flex;
+          align-items: center;
+          color: @font-primary-color;
+          white-space: pre-line;
+        }
+      }
+    }
+  }
+  .answerButton{
+    padding-top: 10px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px solid @border-color-r3;
+    .buttonText{
+      padding: 0 4px;
+      cursor: pointer;
+      color: @primary-color;
+    }
+  }
+}
+.disabledMultiple{
+  /deep/.el-checkbox__input{
+    display: none;
+  }
+  /deep/.el-checkbox__label{
+    padding-left: 0;
+  }
+}
+.disabledButton{
+  .buttonText{
+    color: @font-disable-color !important;
+  }
+}
+</style>

package/src/components/interruptComponents/singleChoiceAnswer.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="singleChoiceAnswer">
+    <div class="singleChoiceText" v-if="msg.content.prompt">
+      {{msg.content.prompt}}
+    </div>
+    <div class="optionsList" :class="isDisabled || disabled ? 'disabledOption' : ''">
+      <div
+          v-for="(option, index) in msg.content.options"
+          class="optionsItem"
+          :key="index"
+          @click="handleClick(option)"
+      >
+        <span> {{ option.text }}</span>
+        <i class="arsenal_icon arsenalangle-right-solid"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "singleChoiceAnswer",
+  data(){
+    return{
+      isDisabled:false
+    }
+  },
+  props:{
+    msg:{
+      type:Object,
+      default(){
+        return{}
+      }
+    },
+    disabled:{
+      type:Boolean,
+      default:false
+    }
+  },
+  methods:{
+    handleClick(item){
+      if (this.disabled || this.isDisabled){
+        return
+      }
+      this.isDisabled = true;
+      this.$emit('singleChoice',item,this.msg)
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+@import "../../assets/less/variables.less";
+.singleChoiceAnswer{
+
+  .singleChoiceText{
+    //padding-bottom: 10px;
+  }
+  .optionsList {
+    padding-top: 4px;
+
+    .optionsItem {
+      line-height: 25px;
+      background-color: @background-content-color;
+      color: @primary-color;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 0;
+      i {
+        padding-left: 10px;
+      }
+    }
+  }
+  .disabledOption{
+    .optionsItem{
+      color: @font-disable-color !important;
+    }
+  }
+}
+</style>