askbot-dragon 1.7.34-beta → 1.7.35-beta

package/src/components/associationIntention.vue

@@ -1,375 +1,379 @@
-<template>
-  <div class="association-intention">
-    <div class="plugin_name-dragon" v-if="msg.headerStyleValue && !hiddenHeaderFooter">{{ msg.headerStyleValue }}</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)"></p>-->
-      <template v-if="msg.dispatchServiceType === 'CHATGPT'">
-        <p  style="white-space: pre-wrap;">
-          {{msg.content | msgHtmlContent}}
-        </p>
-      </template>
-      <template v-else>
-        <p v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)" class="answer-rich-text"></p>
-      </template>
-    </div>
-    <div v-if=" (msgType === 'answer_welcofmetext' || msgType === 'answer_text') && (msg.recommend&& msg.recommend.status)">
-      <template v-if="msg.dispatchServiceType === 'CHATGPT'">
-        <p  style="white-space: pre-wrap;">
-          {{msg.content | msgHtmlContent}}
-        </p>
-      </template>
-      <template v-else>
-        <p v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)" class="answer-rich-text"></p>
-      </template>
-     <Recommend :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
-    </div>
-    <div v-if="(msg.type === 'answer_rich_text' || msg.type === 'answer_rich_text_pro') && !(msg.content.recommend && msg.content.recommend.status)">
-      <p :class="[msg.content.vertion == 1?'new-version-rich':'']" v-html="$options.filters.imageStyle(msg.content.html)" @click="lookAttach($event)"></p>
-    </div>
-    <div  v-else-if="(msg.type == 'answer_rich_text' || msg.type === 'answer_rich_text_pro') && (msg.content.recommend && msg.content.recommend.status)">
-      <p :class="['answer-rich-text', msg.content.vertion == 1?'new-version-rich':'']" v-html="$options.filters.imageStyle(msg.content.html)" @click="lookAttach($event)"></p>
-      <Recommend :msg="msg.content" @onRadioClickReco="onRadioClickReco"></Recommend>
-    </div>
-      <div v-else-if="msgType === 'answer_image'" >
-      <div
-          class="association-img"
-          v-if="msg.content.url"
-      >
-        <!-- LPY 原生宽度适配有bug，弃用 -->
-        <template v-if="sourceOhm === 'ohm' && !isOhmPc">
-          <viewer :images="[msg.content.url]">
-            <img
-              v-for="(src,index) in [msg.content.url]"
-              :src="src"
-              :key="index"
-              style="height: auto; width: calc(100vw - 137px);border-radius: 10px;max-width: 230px"
-              class="img-class"
-          />
-          </viewer>
-        </template>
-        <img
-            v-else
-            :src="msg.content.url"
-            style="height: auto; width: calc(100vw - 137px);border-radius: 10px;max-width: 230px"
-            @click="onImageClick(msg.content.url)"
-            class="img-class"
-        />
-      </div>
-      <Recommend v-if="msg.recommend && msg.recommend.list && msg.recommend.list.length > 0" :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
-    </div>
-    <div v-else-if="msgType === 'answer_video' || msgType === 'user_video' || msgType === 'VIDEO'">
-      <div class="association-img" v-if="msg.content.url">
-        <ask-video :msg="msg" :url="msg.content.url" :local-url="msg.content.localUrl"
-                   :progress="msg.content.progress" :nodownload="nodownload"></ask-video>
-      </div>
-      <Recommend v-if="msg.recommend && msg.recommend.list && msg.recommend.list.length > 0" :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
-    </div>
-    <div v-if="msg.footerStyleValue && !hiddenHeaderFooter" class="llm_bot_response-model-select-dragon">
-        <span class="model-switch-handle-name">{{msg.footerStyleValue}}</span>
-    </div>
-    <van-popup v-model="previewShowPopup" position="bottom" v-if="previewShowPopup" :style="{ height: '90%', background:'#FFFFFF'}">
-      <previewDoc ref="previewDoc" :url="previewHref" @close="close" v-if="previewShowPopup"></previewDoc>
-    </van-popup>
-    <el-drawer
-      title="我是标题"
-      :append-to-body="true"
-      :model="false"
-      :visible.sync="drawer"
-      :with-header="false"
-      size="65%"
-      v-if="drawer"
-    >
-      <previewDoc ref="previewDoc" :url="previewHref" @close="close" v-if="drawer"></previewDoc>
-    </el-drawer>
-  </div>
-</template>
-
-<script>
-  import askVideo from "./askVideo";
-  import Recommend from "./recommend";
-  import previewDoc from "./previewDoc";
-  import { isMobile } from "../assets/js/common";
-  export default {
-    name: "associationIntention",
-    components: {Recommend, askVideo, previewDoc},
-    props: ["msg",'msgType','isOpen','sourceOhm','isOhmPc', 'nodownload', 'hiddenHeaderFooter'],
-    filters: {
-      imageStyle: function (html) {
-        //富文本内图片自适应高度宽度
-        const regex = new RegExp("<img", "gi");
-        return html.replace(
-            regex,
-            "<img style='max-width: 230px;border-radius: 10px;' onclick='imageOnClick(this)'"
-        );
-      },
-      msgHtmlContent:function (content){
-        var reg = /<br\/>/g;
-        let msg = content.replace(reg,'\n');
-        return msg
-      },
-    },
-    data() {
-      return {
-        previewHref: "",
-        previewShowPopup:false,
-        drawer:false
-      }
-    },
-    mounted() {
-    },
-    methods:{
-      // 将匹配结果替换表情图片
-      emotion(res) {
-         let word = res.replace(/#|;/gi, "");
-          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,optionApiKey) {
-        this.$emit("onRadioClick", id, name, apikey,optionApiKey);
-      },
-      onImageClick(url){
-        this.$emit('onImageClick',url)
-      },
-      msgContent(content){
-        console.debug('215',content)
-        var regBr = /<br\/>/g;
-        let msg = content.replace(regBr,"\n");
-        var  reg = /<[^>]+>/g;
-        return reg.test(msg);
-
-      },
-      //预览图片
-      lookAttach(e){
-        console.log(246, e);
-        /* eslint-disable */
-        var reg = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/;
-        /* eslint-enable*/
-        if (e.target.localName == 'a'){
-          console.log(252);
-          this.previewHref = e.target.href;
-          console.log(254, this.previewHref);
-          if (this.previewHref.includes('https://www') || this.previewHref.includes('http://www') || (this.previewHref.indexOf('https://static.guoranbot.com') == -1 && this.previewHref.indexOf('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com'))){
-            return
-          } else {
-            if (isMobile()){
-              this.previewShowPopup = true
-              e.returnValue = false
-            } else {
-              this.drawer = true;
-              e.returnValue = false
-            }
-          }
-          // let url = ''
-          // try {
-          //   url = btoa(e.target.href)
-          // }
-          // catch {
-          //   url = encodeURIComponent(btoa(e.target.href))
-          // }
-          // window.open('https://test.open.askbot.cn/kkfileview/onlinePreview?url=' + url)
-          // e.stopPropagation()
-          // e.preventDefault()
-          e.returnValue = false
-        }
-      },
-      close(){
-        this.previewShowPopup = false;
-        this.drawer = false
-      }
-    },
-    watch:{
-      isOpen:{
-        handler(value){
-          if (value){
-            let reg = this.msg.content.html
-            if (reg){
-              reg = reg.replace('<a',"<span class='isReplace'")
-              reg = reg.replace('</a>','</span>')
-              console.debug('reg',reg)
-              this.msg.content.html = reg
-            }
-
-          }
-          else {
-            let reg = this.msg.content.html
-            console.debug('reg',reg)
-            if (reg){
-              reg = reg.replace("<span class='isReplace'","<a download")
-              let reg2 = reg
-              reg2 = reg2.replace('</span>','</a>')
-              this.msg.content.html = reg2
-              console.debug('reg',reg2)
-            }
-          }
-        }
-      }
-    }
-  }
-</script>
-
-
-<style scoped lang="less">
-@import "../assets/less/converSationContainer/common";
-.association-intention{
-  .plugin_name-dragon {
-    // width: 100%;
-    height: 26px;
-    border-radius: 26px;
-    background: #f2f5ff;
-    padding: 0 12px;
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-    color: #a9b3c6;
-    font-size: 12px;
-  }
-  .llm_bot_response-model-select-dragon{
-      margin-top: 12px;
-      color: #888888;
-      font-size: 12px;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      text-align: right;
-  }
-  .association-img{
-    /*display: flex;
-    align-items: center;
-    justify-content: center;*/
-
-  }
-  .answer-rich-text{
-    /*padding-bottom: 10px;
-    border-bottom: 1px solid #EEEEEE;*/
-  }
-  ///deep/a{
-  //  disabled:true
-  //  //pointer-events: none;
-  //}
-  /deep/ .new-version-rich {
-    ol {
-      list-style-type: roman !important;
-      padding-left: 25px;
-    }
-    ul {
-      list-style-type: square !important;
-      padding-left:25px;
-    }
-    img {
-      display: block;
-    }
-  }
-}
-/deep/.el-drawer__body{
-  height: 100%;
-}
+<template>
+  <div class="association-intention">
+    <div class="plugin_name-dragon" v-if="msg.headerStyleValue && !hiddenHeaderFooter">{{ msg.headerStyleValue }}</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)"></p>-->
+      <template v-if="msg.dispatchServiceType === 'CHATGPT'">
+        <p  style="white-space: pre-wrap;">
+          {{msg.content | msgHtmlContent}}
+        </p>
+      </template>
+      <template v-else>
+        <p v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)" class="answer-rich-text"></p>
+      </template>
+    </div>
+    <div v-if=" (msgType === 'answer_welcofmetext' || msgType === 'answer_text') && (msg.recommend&& msg.recommend.status)">
+      <template v-if="msg.dispatchServiceType === 'CHATGPT'">
+        <p  style="white-space: pre-wrap;">
+          {{msg.content | msgHtmlContent}}
+        </p>
+      </template>
+      <template v-else>
+        <p v-html="msg.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)" class="answer-rich-text"></p>
+      </template>
+     <Recommend :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
+    </div>
+    <div v-if="(msg.type === 'answer_rich_text' || msg.type === 'answer_rich_text_pro') && !(msg.content.recommend && msg.content.recommend.status)">
+      <p :class="[msg.content.vertion == 1?'new-version-rich':'']" v-html="$options.filters.imageStyle(msg.content.html)" @click="lookAttach($event)"></p>
+    </div>
+    <div  v-else-if="(msg.type == 'answer_rich_text' || msg.type === 'answer_rich_text_pro') && (msg.content.recommend && msg.content.recommend.status)">
+      <p :class="['answer-rich-text', msg.content.vertion == 1?'new-version-rich':'']" v-html="$options.filters.imageStyle(msg.content.html)" @click="lookAttach($event)"></p>
+      <Recommend :msg="msg.content" @onRadioClickReco="onRadioClickReco"></Recommend>
+    </div>
+      <div v-else-if="msgType === 'answer_image'" >
+      <div
+          class="association-img"
+          v-if="msg.content.url"
+      >
+        <!-- LPY 原生宽度适配有bug，弃用 -->
+        <template v-if="sourceOhm === 'ohm' && !isOhmPc">
+          <viewer :images="[msg.content.url]">
+            <img
+              v-for="(src,index) in [msg.content.url]"
+              :src="src"
+              :key="index"
+              style="height: auto; width: calc(100vw - 137px);border-radius: 10px;max-width: 230px"
+              class="img-class"
+          />
+          </viewer>
+        </template>
+        <img
+            v-else
+            :src="msg.content.url"
+            style="height: auto; width: calc(100vw - 137px);border-radius: 10px;max-width: 230px"
+            @click="onImageClick(msg.content.url)"
+            class="img-class"
+        />
+      </div>
+      <Recommend v-if="msg.recommend && msg.recommend.list && msg.recommend.list.length > 0" :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
+    </div>
+    <div v-else-if="msgType === 'answer_video' || msgType === 'user_video' || msgType === 'VIDEO'">
+      <div class="association-img" v-if="msg.content.url">
+        <ask-video :msg="msg" :url="msg.content.url" :local-url="msg.content.localUrl"
+                   :progress="msg.content.progress" :nodownload="nodownload"></ask-video>
+      </div>
+      <Recommend v-if="msg.recommend && msg.recommend.list && msg.recommend.list.length > 0" :msg="msg" @onRadioClickReco="onRadioClickReco"></Recommend>
+    </div>
+    <div v-if="msg.footerStyleValue && !hiddenHeaderFooter" class="llm_bot_response-model-select-dragon">
+        <span class="model-switch-handle-name">{{msg.footerStyleValue}}</span>
+    </div>
+    <van-popup v-model="previewShowPopup" position="bottom" v-if="previewShowPopup" :style="{ height: '90%', background:'#FFFFFF'}">
+      <previewDoc ref="previewDoc" :url="previewHref" :language="language" @close="close" v-if="previewShowPopup"></previewDoc>
+    </van-popup>
+    <el-drawer
+      :title="$t('common.drawerTitle')"
+      :append-to-body="true"
+      :model="false"
+      :visible.sync="drawer"
+      :with-header="false"
+      size="65%"
+      v-if="drawer"
+    >
+      <previewDoc ref="previewDoc" :url="previewHref" :language="language" @close="close" v-if="drawer"></previewDoc>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+  import askVideo from "./askVideo";
+  import Recommend from "./recommend";
+  import previewDoc from "./previewDoc";
+  import { isMobile } from "../assets/js/common";
+  export default {
+    name: "associationIntention",
+    components: {Recommend, askVideo, previewDoc},
+    props: ["msg",'msgType','isOpen','sourceOhm','isOhmPc', 'nodownload', 'hiddenHeaderFooter','language'],
+    filters: {
+      imageStyle: function (html) {
+        //富文本内图片自适应高度宽度
+        const regex = new RegExp("<img", "gi");
+        return html.replace(
+            regex,
+            "<img style='max-width: 230px;border-radius: 10px;' onclick='imageOnClick(this)'"
+        );
+      },
+      msgHtmlContent:function (content){
+        var reg = /<br\/>/g;
+        let msg = content.replace(reg,'\n');
+        return msg
+      },
+    },
+    data() {
+      return {
+        previewHref: "",
+        previewShowPopup:false,
+        drawer:false
+      }
+    },
+    methods:{
+      // 将匹配结果替换表情图片
+      emotion(res) {
+         let word = res.replace(/#|;/gi, "");
+          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,optionApiKey) {
+        this.$emit("onRadioClick", id, name, apikey,optionApiKey);
+      },
+      onImageClick(url){
+        this.$emit('onImageClick', encodeURI(url))
+      },
+      msgContent(content){
+        console.debug('215',content)
+        var regBr = /<br\/>/g;
+        let msg = content.replace(regBr,"\n");
+        var  reg = /<[^>]+>/g;
+        return reg.test(msg);
+
+      },
+      //预览图片
+      lookAttach(e){
+        console.log(246, e);
+        /* eslint-disable */
+        var reg = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/;
+        /* eslint-enable*/
+        if (e.target.localName == 'a'){
+          console.log(252);
+          this.previewHref = e.target.href;
+          console.log(254, this.previewHref);
+          if (this.previewHref.includes('https://www') || this.previewHref.includes('http://www') || (this.previewHref.indexOf('https://static.guoranbot.com') == -1 && this.previewHref.indexOf('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com'))){
+            return
+          } else {
+            if (isMobile()){
+              this.previewShowPopup = true
+              e.returnValue = false
+            } else {
+              this.drawer = true;
+              e.returnValue = false
+            }
+          }
+          // let url = ''
+          // try {
+          //   url = btoa(e.target.href)
+          // }
+          // catch {
+          //   url = encodeURIComponent(btoa(e.target.href))
+          // }
+          // window.open('https://test.open.askbot.cn/kkfileview/onlinePreview?url=' + url)
+          // e.stopPropagation()
+          // e.preventDefault()
+          e.returnValue = false
+        }
+      },
+      close(){
+        this.previewShowPopup = false;
+        this.drawer = false
+      }
+    },
+    watch:{
+      isOpen:{
+        handler(value){
+          if (value){
+            let reg = this.msg.content.html
+            if (reg){
+              reg = reg.replace('<a',"<span class='isReplace'")
+              reg = reg.replace('</a>','</span>')
+              console.debug('reg',reg)
+              this.msg.content.html = reg
+            }
+
+          }
+          else {
+            let reg = this.msg.content.html
+            console.debug('reg',reg)
+            if (reg){
+              reg = reg.replace("<span class='isReplace'","<a download")
+              let reg2 = reg
+              reg2 = reg2.replace('</span>','</a>')
+              this.msg.content.html = reg2
+              console.debug('reg',reg2)
+            }
+          }
+        }
+      }
+    }
+  }
+</script>
+
+
+<style scoped lang="less">
+@import "../assets/less/converSationContainer/common";
+.association-intention{
+  .plugin_name-dragon {
+    // width: 100%;
+    height: 26px;
+    border-radius: 26px;
+    background: #f2f5ff;
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    color: #a9b3c6;
+    font-size: 12px;
+  }
+  .llm_bot_response-model-select-dragon{
+      margin-top: 12px;
+      color: #888888;
+      font-size: 12px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      text-align: right;
+  }
+  .association-img{
+    /*display: flex;
+    align-items: center;
+    justify-content: center;*/
+
+  }
+  .answer-rich-text{
+    /*padding-bottom: 10px;
+    border-bottom: 1px solid #EEEEEE;*/
+  }
+  ///deep/a{
+  //  disabled:true
+  //  //pointer-events: none;
+  //}
+  /deep/ .new-version-rich {
+    ol {
+      list-style-type: roman !important;
+      padding-left: 25px;
+    }
+    ul {
+      list-style-type: square !important;
+      padding-left:25px;
+    }
+    img {
+      display: block;
+    }
+  }
+  /deep/ img {
+    height: auto;
+    width: calc(100vw - 137px);
+    border-radius: 25px;
+    max-width: 230px;
+  }
+}
+/deep/.el-drawer__body{
+  height: 100%;
+}
 </style>