askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/chatContent.vue

@@ -1,514 +1,515 @@
-<template>
-    <view class="chat-message-content" id="messageContent" @touchstart="touchEvent">
-        <view class="message-notice" v-show="connectSucess"><view class="notice-content">已为您对接专属智能助理</view></view>
-        <view v-for="(msg, index) in messageList" :key="index">
-            <!-- <view class="message-notice">
-                    <view class="notice-content" v-if="showTime(msg, index, messageList) && msg.time != null">{{new Date(msg.time).toISOString().slice(0, 10),}}</view>
-                </view> -->
-            <view class="message" v-bind:class="msg.speaker == 'user' ? 'message-kf' : 'message'">
-                <view class="user-detail">
-                    <Msgloading  v-if="msg.speaker != 'user' && msg.type == 'msg_loading'"></Msgloading>
-                    <!-- 小程序富文本组件 -->
-                    <view v-if="(msg.type == 'answer_rich_text' || msg.type == 'answer_rich_text_pro')" class="media-body">
-                        <!--<mp-html
-                        lazy-load
-                        scroll-table
-                        selectable
-                        use-anchor
-                        show-with-animation
-                        loading-img
-                        :tag-style="tagStyle"
-                        :content="msg.content.html" />-->
-                        <rich-text :nodes="msg.content.html"></rich-text>
-                    </view>
-                    <!-- <view v-if="msg.type == 'answer_rich_text'" class="media-body">
-                        <view id="msg_text"><rich-text :nodes="strings"></rich-text></view>
-                    </view> -->
-                    <!-- 欢迎语、文本组件 -->
-                    <view v-if="msg.type == 'answer_welcofmetext' || msg.type == 'answer_text'" class="media-body">
-                        <view v-if="msg.speaker == 'user'" v-html="msg.content" @click="tapName" :selectable="true" ref="msg_text" id="msg_text"></view>
-                        <view v-if="msg.speaker != 'user'">
-                            <view
-                                    v-for="(span, index) in msg.mini_text"
-                                    :key="index"
-                                    @click="tapName"
-                                    :data-content="span"
-                                    :style="span.type == 'url' ? 'color: #007AFF;' : ''"
-                            >
-                                <rich-text :nodes="span.content"></rich-text>
-                            </view>
-                        </view>
-                    </view>
-
-                    <!-- web-view组件 -->
-                    <view v-if="msg.type == 'web_view'" class="media-body">
-                        <view class="" v-for="(webCell, webcInd) in msg.arr" :key="webcInd">
-                            <view v-show="webCell.type == 'text'"><rich-text :nodes="webCell.text"></rich-text></view>
-                            <text v-show="webCell.type == 'url'" style="color: #007AFF" class="url" @click="gotoWebview(webCell.url)">点击了解详情</text>
-                        </view>
-                    </view>
-                    <!-- 点选组件 -->
-                    <view v-if="msg.type == 'answer_radio'" class="media-body-ps">
-                        <view v-if="msg.content.description != ''" class="other" v-html="msg.content.description"></view>
-                        <view
-                                v-for="(option, ind) in msg.content.options"
-                                v-bind:class="[ind == msg.content.options.length - 1 && ind != 1 ? 'end' : '', 'ps']"
-                                :key="ind"
-                                @click="sendRadioMessage(msg.id + '_' + ind + '_' + option.value + '_' + option.name, option.name)"
-                        >
-                            {{ option.name }}
-                            <i class="arsenal_icon arsenalangle-right-solid"></i>
-                        </view>
-                    </view>
-                    <!-- 图片组件 -->
-                    <view
-                            :style="msg.type == 'answer_image' ? 'background-color: #ffffff !important;' : ''"
-                            v-if="msg.type == 'answer_image' ||msg.type == 'IMAGE'"
-                            class="media-body-image"
-                    >
-                        <img v-if="msg.content.urls!=null" :src="msg.content.urls[0]"  mode="widthFix" @click="onImageClick(msg.content.urls[0])" />
-                        <img v-else :src="msg.content.url"  mode="widthFix" @click="onImageClick(msg.content.url)" />
-                    </view>
-                    <!-- 等待语音组件 -->
-                    <view v-if="msg.type == 'answer_loading'" class="media-body">
-                        <view class="loading">
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                        </view>
-                    </view>
-                    <!-- 视频组件 -->
-                    <view v-if="msg.type == 'answer_video'" class="media-body-image"><video id="myVideo" :src="msg.content.url"></video></view>
-                    <view v-if="msg.type == 'VIDEO'" class="media-body-image"><video id="myVideo" :src="msg.content.url"></video></view>
-                    <!-- 反问组件 -->
-                    <view v-if="msg.type == 'action_question'" class="media-body"><view v-html="msg.content"></view></view>
-                    <!-- 满意度组件 -->
-                    <view v-if="msg.type == 'action_satisfaction'" class="media-body-ps">
-                        <view class="other" v-html="msg.content.satisfactionDes"></view>
-                        <view class="ps" @click="sendSatisfaction('user_action_to_satisfaction', '满意', msg.content.satisfactoryAnswer)">满意</view>
-                        <view class="ps end" @click="sendSatisfaction('user_action_to_satisfaction', '不满意', msg.content.unsatisfiedAnswer, msg.content.answerRadio)">
-                            不满意
-                        </view>
-                    </view>
-                    <view v-if="msg.type == 'USER_ACTION_TO_SATISFACTION_V2' ||msg.type == 'USER_ACTION_TO_DISSATISFACTION_V2'" class="media-body">
-                        <SatisfactionV2 :message='msg'></SatisfactionV2>
-                    </view>
-                    <!-- 不满意选项 -->
-                    <view v-if="msg.type == 'answer_dissatisfaction'"
-                          class="message" v-bind:class="msg.speaker == 'user' ? 'message-kf' : 'message'">
-                        <DissatisfactionOptions :message='msg' @onOption="sendDissatisfaction"></DissatisfactionOptions>
-
-                    </view>
-                    <view v-if="msg.type == 'user_action_to_satisfaction' || msg.type == 'user_action_to_unsatisfactory'">
-                        <view class="media-body" v-if="msg.speaker == 'user'"><view v-html="msg.content.input"></view></view>
-                    </view>
-                </view>
-            </view>
-            <view
-                    v-if="(msg.type == 'user_action_to_satisfaction' || msg.type == 'user_action_to_unsatisfactory') && msg.speaker != 'user' && msg.content != null"
-                    class="message"
-                    v-bind:class="msg.speaker == 'user' ? 'message-kf' : 'message'"
-            >
-                <view class="user-detail">
-                    <view class="media-body-ps">
-                        <view class="other" v-html="msg.content.reply_text"></view>
-                        <view v-if="msg.content.reply_options != null && msg.content.reply_options.length > 0">
-                            <view
-                                v-for="(reply_option, index) in msg.content.reply_options"
-                                v-bind:class="[index == msg.content.reply_options.length - 1 ? 'end' : '', 'ps']"
-                                :key="index"
-                            >
-                                <view @click="sendSatisfaction4Uni" :data-name="reply_option.name" :data-answer="reply_option.answer">{{ reply_option.name }}</view>
-                            </view>
-                        </view>
-                    </view>
-                </view>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script>
-    import Msgloading from "./ask-components/Msgloading";
-    import SatisfactionV2 from "./ask-components/SatisfactionV2";
-    import DissatisfactionOptions from "./ask-components/DissatisfactionOptions";
-    export default {
-        name: "chatContent",
-        data(){
-            return{
-                connectSucess: false,
-            }
-        },
-        components:{Msgloading,SatisfactionV2,DissatisfactionOptions},
-        props:['messageList'],
-        methods:{
-            touchEvent(){
-                this.$emit('touchEvent')
-            },
-            tapName(){
-                this.$emit('tapName')
-            },
-            gotoWebview(url){
-                this.$emit('gotoWebview',url)
-            },
-            sendRadioMessage(value, showValue){
-                this.$emit('sendRadioMessage',value,showValue)
-            },
-            onImageClick(url){
-                this.$emit('onImageClick',url)
-            },
-            sendDissatisfaction(options){
-                this.$emit('sendDissatisfaction',options)
-            },
-            sendSatisfaction4Uni(e){
-                this.$emit('sendSatisfaction4Uni',e)
-            },
-            sendSatisfaction(type, choose, answer, answerRadio){
-                this.$emit('sendSatisfaction',type,choose,answer,answerRadio)
-            }
-        }
-    }
-</script>
-
-<style scoped lang="less">
-    .chat-message-content {
-        display: flex;
-        flex-direction: column;
-        .message-notice {
-            display: inline-block;
-            text-align: center;
-            margin-top: 10px;
-            margin-bottom: 10px;
-            width: 100%;
-            background-color: transparent !important;
-        }
-        .notice-content {
-            display: inline-block;
-            padding: 5px 10px;
-            border-radius: 5px;
-            background-color: #F4F8FC;
-            color: #666666;
-            font-size: 12px;
-            max-width: 80%;
-            word-wrap: break-word;
-            word-break: break-all;
-            overflow: hidden;
-        }
-        .notice-content-day {
-            display: inline-block;
-            padding: 5px 10px;
-            .line-left {
-                display: inline-block;
-                width: 100px;
-                height: 1px;
-                margin-bottom: 5px;
-                margin-right: 5px;
-                //background:#dcdcdc;
-                background: -webkit-linear-gradient(left, #fff -4%, #666666 50%);
-            }
-            .line-text {
-                color: #666666;
-                font-size: 24px;
-            }
-            .line-right {
-                display: inline-block;
-                width: 100px;
-                height: 1px;
-                margin-bottom: 5px;
-                margin-left: 5px;
-                //background:#dcdcdc;
-                background: -webkit-linear-gradient(left, #666666 50%, #fff 100%);
-            }
-        }
-        .voiceinputting {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-        }
-        .message {
-            display: flex;
-            margin-bottom: 20px;
-            justify-content: flex-start;
-            .user-detail {
-                display: flex;
-                -ms-flex-align: start;
-                align-items: flex-start;
-                /*max-width: 80%;*/
-                max-width: calc(100vw - 50px);
-                .media-body-image{
-                    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;
-                    border-radius: 32px;
-                    border-top-left-radius: 0px;
-                    padding: 5px 5px;
-                    image{
-                        border-radius: 32px !important;
-                        border-top-left-radius: 0px !important;
-                    }
-                    video{
-                        border-radius: 32px !important;
-                        border-top-left-radius: 0px !important;
-                    }
-                }
-                .media-body {
-                    //max-width: calc(100vw - 800px);
-                    //background-color: #ecebeb;
-                    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;
-                    min-height: 30px;
-                    line-height: 30px;
-                    border-radius: 32px;
-                    border-top-left-radius: 0px;
-                    padding: 8px 15px;
-                    text-align: left;
-                    margin-left: 5px;
-                    h2 {
-                        font-size: 18px;
-                    }
-                    p {
-                        font-size: 14px;
-                        word-wrap: break-word;
-                        word-break: break-all;
-                        overflow: hidden;
-                        height: auto;
-                    }
-                    img{
-                        max-width: 74vw;
-                    }
-                    .voicemessage {
-                        width: 400px;
-                        height: 70px;
-                        line-height: 70px;
-                        background-color: #e8eaec;
-                        border-radius: 10px;
-                        .icon-vioce {
-                            font-size: 24px;
-                            float: left;
-                            margin-left: 40px;
-                            margin-right: 40px;
-                        }
-                        .time {
-                            font-size: 24px;
-                            margin-left: 40px;
-                        }
-                    }
-                    span {
-                        margin-bottom: 10px;
-                        font-size: 12px;
-                        color: #a3a4a5;
-                        float: left;
-                    }
-                    .botname {
-                        margin-left: 20px;
-                        float: right;
-                    }
-                    .mb-0 {
-                        margin-bottom: 0 !important;
-                        text-align: left;
-                        line-height: 1.3;
-                        margin-top: 0;
-                        font-size: 24px;
-                    }
-                }
-                .media-body-ps {
-                    //max-width: calc(100vw - 800px);
-                    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;
-                    min-height: 30px;
-                    line-height: 30px;
-                    border-radius: 32px;
-                    border-top-left-radius: 0px;
-                    overflow: hidden;
-                    text-align: left;
-                    margin-left: 5px;
-                    h2 {
-                        font-size: 18px;
-                    }
-                    .other {
-                        font-size: 14px;
-                        word-wrap: break-word;
-                        word-break: break-all;
-                        overflow: hidden;
-                        padding: 8px 20px 8px 15px;
-                        height: auto;
-                    }
-                    .ps {
-                        padding: 8px 20px 8px 15px;
-                        height: auto;
-                        border-top: 1px solid #F4F8FC;
-                        background-color: #ffffff;
-                        color: #4C61E1;
-                        cursor: pointer;
-                        font-size: 14px;
-                        display: flex;
-                        flex-direction: row;
-                        justify-content: space-between;
-                        i{
-                            margin-left: 20px;
-                        }
-                    }
-                    .end {
-                        border: 1px solid #F4F8FC;
-                        border-bottom-left-radius: 32px !important;
-                        border-bottom-right-radius: 32px !important;
-                    }
-                    .voicemessage {
-                        width: 200px;
-                        height: 35px;
-                        line-height: 35px;
-                        background-color: #e8eaec;
-                        border-radius: 10px;
-                        .icon-vioce {
-                            font-size: 24px;
-                            float: left;
-                            margin-left: 20px;
-                            margin-right: 20px;
-                        }
-                        .time {
-                            font-size: 28px;
-                            margin-left: 20px;
-                        }
-                    }
-                    span {
-                        margin-bottom: 10px;
-                        font-size: 24px;
-                        color: #a3a4a5;
-                        float: left;
-                    }
-                    .botname {
-                        margin-left: 20px;
-                        float: right;
-                    }
-                    .mb-0 {
-                        margin-bottom: 0 !important;
-                        text-align: left;
-                        line-height: 1.3;
-                        margin-top: 0;
-                        font-size: 24px;
-                    }
-                }
-            }
-            .video-player .video-js .vjs-icon-placeholder {
-                width: 300px;
-                height: 172px;
-                display: block;
-            }
-            .el-image {
-                float: right;
-                width: 300px !important;
-                height: auto !important;
-            }
-        }
-        .message-kf {
-            display: flex;
-            margin-bottom: 20px;
-            justify-content: flex-end;
-            margin-right: 20px;
-            .user-detail {
-                display: flex;
-                -ms-flex-align: start;
-                align-items: flex-start;
-                max-width: 80%;
-                .media-body-image{
-                    border: 1px solid #4C61E1 !important;
-                    border: 1px solid #4C61E1 !important;
-                    word-break: break-word;
-                    box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
-                    border-radius: 32px !important;
-                    border-top-right-radius: 0px !important;
-                    padding: 5px 5px;
-                    display: flex;
-                    text-align: center;
-                    overflow: hidden;
-                    image{
-                        border-radius: 32px !important;
-                        border-top-right-radius: 0px !important;
-                    }
-                    video{
-                        border-radius: 32px !important;
-                        border-top-right-radius: 0px !important;
-                    }
-                }
-                .media-body {
-                    //max-width: calc(100vw - 800px);
-                    border: 1px solid #4C61E1 !important;
-                    background-color: #4C61E1 !important;
-                    color: #ffffff !important;
-                    word-break: break-word;
-                    border-radius: 32px;
-                    border-top-right-radius: 0px;
-                    padding: 8px 15px;
-                    text-align: left;
-                    h2 {
-                        font-size: 36px;
-                    }
-                    p {
-                        font-size: 28px;
-                        word-wrap: break-word;
-                        word-break: break-all;
-                        overflow: hidden;
-                        font-size: 28px;
-                        height: auto;
-                    }
-                    img{
-                        max-width: 66vw;
-                    }
-                    .voicemessage {
-                        width: 200px;
-                        height: 35px;
-                        line-height: 35px;
-                        background-color: #e8eaec;
-                        border-radius: 10px;
-                        .icon-vioce {
-                            font-size: 24px;
-                            float: left;
-                            margin-left: 20px;
-                            margin-right: 20px;
-                        }
-                        .time {
-                            font-size: 28px;
-                            margin-left: 20px;
-                        }
-                    }
-                    span {
-                        margin-bottom: 10px;
-                        font-size: 24px;
-                        color: #a3a4a5;
-                        float: left;
-                    }
-                    .botname {
-                        margin-left: 20px;
-                        float: right;
-                    }
-                    .mb-0 {
-                        margin-bottom: 0 !important;
-                        text-align: left;
-                        line-height: 1.3;
-                        margin-top: 0;
-                        font-size: 24px;
-                    }
-                }
-            }
-            .video-player .video-js .vjs-icon-placeholder {
-                width: 300px;
-                height: 172px;
-                display: block;
-            }
-            .el-image {
-                float: right;
-                width: 300px !important;
-                height: auto !important;
-            }
-        }
-    }
+<template>
+    <view class="chat-message-content" id="messageContent" @touchstart="touchEvent">
+        <view class="message-notice" v-show="connectSucess"><view class="notice-content">已为您对接专属智能助理</view></view>
+        <view v-for="(msg, index) in messageList" :key="index">
+            <!-- <view class="message-notice">
+                    <view class="notice-content" v-if="showTime(msg, index, messageList) && msg.time != null">{{new Date(msg.time).toISOString().slice(0, 10),}}</view>
+                </view> -->
+            <view class="message" v-bind:class="msg.speaker == 'user' ? 'message-kf' : 'message'">
+                <view class="user-detail">
+                    <Msgloading  v-if="msg.speaker != 'user' && msg.type == 'msg_loading'"></Msgloading>
+                    <!-- 小程序富文本组件 -->
+                    <view v-if="(msg.type == 'answer_rich_text' || msg.type == 'answer_rich_text_pro')" class="media-body">
+                        <!--<mp-html
+                        lazy-load
+                        scroll-table
+                        selectable
+                        use-anchor
+                        show-with-animation
+                        loading-img
+                        :tag-style="tagStyle"
+                        :content="msg.content.html" />-->
+                        <rich-text :nodes="msg.content.html"></rich-text>
+                    </view>
+                    <!-- <view v-if="msg.type == 'answer_rich_text'" class="media-body">
+                        <view id="msg_text"><rich-text :nodes="strings"></rich-text></view>
+                    </view> -->
+                    <!-- 欢迎语、文本组件 -->
+                    <view v-if="msg.type == 'answer_welcofmetext' || msg.type == 'answer_text'" class="media-body">
+                        <view v-if="msg.speaker == 'user'" v-html="msg.content" @click="tapName" :selectable="true" ref="msg_text" id="msg_text"></view>
+                        <view v-if="msg.speaker != 'user'">
+                            <view
+                                    v-for="(span, index) in msg.mini_text"
+                                    :key="index"
+                                    @click="tapName"
+                                    :data-content="span"
+                                    :style="span.type == 'url' ? 'color: #007AFF;' : ''"
+                            >
+                                <rich-text :nodes="span.content"></rich-text>
+                            </view>
+                        </view>
+                    </view>
+
+                    <!-- web-view组件 -->
+                    <view v-if="msg.type == 'web_view'" class="media-body">
+                        <view class="" v-for="(webCell, webcInd) in msg.arr" :key="webcInd">
+                            <view v-show="webCell.type == 'text'"><rich-text :nodes="webCell.text"></rich-text></view>
+                            <text v-show="webCell.type == 'url'" style="color: #007AFF" class="url" @click="gotoWebview(webCell.url)">点击了解详情</text>
+                        </view>
+                    </view>
+                    <!-- 点选组件 -->
+                    <view v-if="msg.type == 'answer_radio'" class="media-body-ps">
+                        <view v-if="msg.content.description != ''" class="other" v-html="msg.content.description"></view>
+                        <view
+                                v-for="(option, ind) in msg.content.options"
+                                v-bind:class="[ind == msg.content.options.length - 1 && ind != 1 ? 'end' : '', 'ps']"
+                                :key="ind"
+                                @click="sendRadioMessage(msg.id + '_' + ind + '_' + option.value + '_' + option.name, option.name)"
+                        >
+                            {{ option.name }}
+                            <i class="arsenal_icon arsenalangle-right-solid"></i>
+                        </view>
+                    </view>
+                    <!-- 图片组件 -->
+                    <view
+                            :style="msg.type == 'answer_image' ? 'background-color: #ffffff !important;' : ''"
+                            v-if="msg.type == 'answer_image' ||msg.type == 'IMAGE'"
+                            class="media-body-image"
+                    >
+                        <img v-if="msg.content.urls!=null" :src="msg.content.urls[0]"  mode="widthFix" @click="onImageClick(msg.content.urls[0])" />
+                        <img v-else :src="msg.content.url"  mode="widthFix" @click="onImageClick(msg.content.url)" />
+                    </view>
+                    <!-- 等待语音组件 -->
+                    <view v-if="msg.type == 'answer_loading'" class="media-body">
+                        <view class="loading">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </view>
+                    </view>
+                    <!-- 视频组件 -->
+                    <view v-if="msg.type == 'answer_video'" class="media-body-image"><video id="myVideo" :src="msg.content.url"></video></view>
+                    <view v-if="msg.type == 'VIDEO'" class="media-body-image"><video id="myVideo" :src="msg.content.url"></video></view>
+                    <!-- 反问组件 -->
+                    <view v-if="msg.type == 'action_question'" class="media-body"><view v-html="msg.content"></view></view>
+                    <!-- 满意度组件 -->
+                    <view v-if="msg.type == 'action_satisfaction'" class="media-body-ps">
+                        <view class="other" v-html="msg.content.satisfactionDes"></view>
+                        <view class="ps" @click="sendSatisfaction('user_action_to_satisfaction', '满意', msg.content.satisfactoryAnswer)">满意</view>
+                        <view class="ps end" @click="sendSatisfaction('user_action_to_satisfaction', '不满意', msg.content.unsatisfiedAnswer, msg.content.answerRadio)">
+                            不满意
+                        </view>
+                    </view>
+                    <view v-if="msg.type == 'USER_ACTION_TO_SATISFACTION_V2' ||msg.type == 'USER_ACTION_TO_DISSATISFACTION_V2'" class="media-body">
+                        <SatisfactionV2 :message='msg'></SatisfactionV2>
+                    </view>
+                    <!-- 不满意选项 -->
+                    <view v-if="msg.type == 'answer_dissatisfaction'"
+                          class="message" v-bind:class="msg.speaker == 'user' ? 'message-kf' : 'message'">
+                        <DissatisfactionOptions :message='msg' @onOption="sendDissatisfaction"></DissatisfactionOptions>
+
+                    </view>
+                    <view v-if="msg.type == 'user_action_to_satisfaction' || msg.type == 'user_action_to_unsatisfactory'">
+                        <view class="media-body" v-if="msg.speaker == 'user'"><view v-html="msg.content.input"></view></view>
+                    </view>
+                </view>
+            </view>
+            <view
+                    v-if="(msg.type == 'user_action_to_satisfaction' || msg.type == 'user_action_to_unsatisfactory') && msg.speaker != 'user' && msg.content != null"
+                    class="message"
+                    v-bind:class="msg.speaker == 'user' ? 'message-kf' : 'message'"
+            >
+                <view class="user-detail">
+                    <view class="media-body-ps">
+                        <view class="other" v-html="msg.content.reply_text"></view>
+                        <view v-if="msg.content.reply_options != null && msg.content.reply_options.length > 0">
+                            <view
+                                v-for="(reply_option, index) in msg.content.reply_options"
+                                v-bind:class="[index == msg.content.reply_options.length - 1 ? 'end' : '', 'ps']"
+                                :key="index"
+                            >
+                                <view @click="sendSatisfaction4Uni" :data-name="reply_option.name" :data-answer="reply_option.answer">{{ reply_option.name }}</view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import Msgloading from "./ask-components/Msgloading";
+    import SatisfactionV2 from "./ask-components/SatisfactionV2";
+    import DissatisfactionOptions from "./ask-components/DissatisfactionOptions";
+    export default {
+        name: "chatContent",
+        data(){
+            return{
+                connectSucess: false,
+            }
+        },
+        components:{Msgloading,SatisfactionV2,DissatisfactionOptions},
+        props:['messageList'],
+        methods:{
+            touchEvent(){
+                this.$emit('touchEvent')
+            },
+            tapName(){
+                this.$emit('tapName')
+            },
+            gotoWebview(url){
+                this.$emit('gotoWebview',url)
+            },
+            sendRadioMessage(value, showValue){
+                this.$emit('sendRadioMessage',value,showValue)
+            },
+            onImageClick(url){
+                this.$emit('onImageClick',url)
+            },
+            sendDissatisfaction(options){
+                this.$emit('sendDissatisfaction',options)
+            },
+            sendSatisfaction4Uni(e){
+                this.$emit('sendSatisfaction4Uni',e)
+            },
+            sendSatisfaction(type, choose, answer, answerRadio){
+                this.$emit('sendSatisfaction',type,choose,answer,answerRadio)
+            }
+        }
+    }
+</script>
+
+<style scoped lang="less">
+@import "../assets/less/variables.less";
+    .chat-message-content {
+        display: flex;
+        flex-direction: column;
+        .message-notice {
+            display: inline-block;
+            text-align: center;
+            margin-top: 10px;
+            margin-bottom: 10px;
+            width: 100%;
+            background-color: transparent !important;
+        }
+        .notice-content {
+            display: inline-block;
+            padding: 5px 10px;
+            border-radius: 5px;
+            background-color: @background-content-color;
+            color: @font-secondary-color;
+            font-size: 12px;
+            max-width: 80%;
+            word-wrap: break-word;
+            word-break: break-all;
+            overflow: hidden;
+        }
+        .notice-content-day {
+            display: inline-block;
+            padding: 5px 10px;
+            .line-left {
+                display: inline-block;
+                width: 100px;
+                height: 1px;
+                margin-bottom: 5px;
+                margin-right: 5px;
+                //background:#dcdcdc;
+                background: -webkit-linear-gradient(left, #fff -4%, #666666 50%);
+            }
+            .line-text {
+                color: @font-secondary-color;
+                font-size: 24px;
+            }
+            .line-right {
+                display: inline-block;
+                width: 100px;
+                height: 1px;
+                margin-bottom: 5px;
+                margin-left: 5px;
+                //background:#dcdcdc;
+                background: -webkit-linear-gradient(left, #666666 50%, #fff 100%);
+            }
+        }
+        .voiceinputting {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+        }
+        .message {
+            display: flex;
+            margin-bottom: 20px;
+            justify-content: flex-start;
+            .user-detail {
+                display: flex;
+                -ms-flex-align: start;
+                align-items: flex-start;
+                /*max-width: 80%;*/
+                max-width: calc(100vw - 50px);
+                .media-body-image{
+                    background-color: @background-content-color;
+                    border: 1px solid @border-color-r2;
+                    word-break: break-word;
+                    box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
+                    flex: 1;
+                    border-radius: 32px;
+                    border-top-left-radius: 0px;
+                    padding: 5px 5px;
+                    image{
+                        border-radius: 32px !important;
+                        border-top-left-radius: 0px !important;
+                    }
+                    video{
+                        border-radius: 32px !important;
+                        border-top-left-radius: 0px !important;
+                    }
+                }
+                .media-body {
+                    //max-width: calc(100vw - 800px);
+                    //background-color: #ecebeb;
+                    background-color: @background-content-color;
+                    border: 1px solid @border-color-r2;
+                    word-break: break-word;
+                    box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
+                    flex: 1;
+                    min-height: 30px;
+                    line-height: 30px;
+                    border-radius: 32px;
+                    border-top-left-radius: 0px;
+                    padding: 8px 15px;
+                    text-align: left;
+                    margin-left: 5px;
+                    h2 {
+                        font-size: 18px;
+                    }
+                    p {
+                        font-size: 14px;
+                        word-wrap: break-word;
+                        word-break: break-all;
+                        overflow: hidden;
+                        height: auto;
+                    }
+                    img{
+                        max-width: 74vw;
+                    }
+                    .voicemessage {
+                        width: 400px;
+                        height: 70px;
+                        line-height: 70px;
+                        background-color: #e8eaec;
+                        border-radius: 10px;
+                        .icon-vioce {
+                            font-size: 24px;
+                            float: left;
+                            margin-left: 40px;
+                            margin-right: 40px;
+                        }
+                        .time {
+                            font-size: 24px;
+                            margin-left: 40px;
+                        }
+                    }
+                    span {
+                        margin-bottom: 10px;
+                        font-size: 12px;
+                        color: @font-primary-color-r4;
+                        float: left;
+                    }
+                    .botname {
+                        margin-left: 20px;
+                        float: right;
+                    }
+                    .mb-0 {
+                        margin-bottom: 0 !important;
+                        text-align: left;
+                        line-height: 1.3;
+                        margin-top: 0;
+                        font-size: 24px;
+                    }
+                }
+                .media-body-ps {
+                    //max-width: calc(100vw - 800px);
+                    background-color: @background-content-color;
+                    border: 1px solid @border-color-r2;
+                    word-break: break-word;
+                    box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
+                    flex: 1;
+                    min-height: 30px;
+                    line-height: 30px;
+                    border-radius: 32px;
+                    border-top-left-radius: 0px;
+                    overflow: hidden;
+                    text-align: left;
+                    margin-left: 5px;
+                    h2 {
+                        font-size: 18px;
+                    }
+                    .other {
+                        font-size: 14px;
+                        word-wrap: break-word;
+                        word-break: break-all;
+                        overflow: hidden;
+                        padding: 8px 20px 8px 15px;
+                        height: auto;
+                    }
+                    .ps {
+                        padding: 8px 20px 8px 15px;
+                        height: auto;
+                        border-top: 1px solid @border-color-r2;
+                        background-color: @background-color-light;
+                        color: @font-primary-accent-color;
+                        cursor: pointer;
+                        font-size: 14px;
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: space-between;
+                        i{
+                            margin-left: 20px;
+                        }
+                    }
+                    .end {
+                        border: 1px solid @background-content-color;
+                        border-bottom-left-radius: 32px !important;
+                        border-bottom-right-radius: 32px !important;
+                    }
+                    .voicemessage {
+                        width: 200px;
+                        height: 35px;
+                        line-height: 35px;
+                        background-color: #e8eaec;
+                        border-radius: 10px;
+                        .icon-vioce {
+                            font-size: 24px;
+                            float: left;
+                            margin-left: 20px;
+                            margin-right: 20px;
+                        }
+                        .time {
+                            font-size: 28px;
+                            margin-left: 20px;
+                        }
+                    }
+                    span {
+                        margin-bottom: 10px;
+                        font-size: 24px;
+                        color: @font-primary-color-r4;
+                        float: left;
+                    }
+                    .botname {
+                        margin-left: 20px;
+                        float: right;
+                    }
+                    .mb-0 {
+                        margin-bottom: 0 !important;
+                        text-align: left;
+                        line-height: 1.3;
+                        margin-top: 0;
+                        font-size: 24px;
+                    }
+                }
+            }
+            .video-player .video-js .vjs-icon-placeholder {
+                width: 300px;
+                height: 172px;
+                display: block;
+            }
+            .el-image {
+                float: right;
+                width: 300px !important;
+                height: auto !important;
+            }
+        }
+        .message-kf {
+            display: flex;
+            margin-bottom: 20px;
+            justify-content: flex-end;
+            margin-right: 20px;
+            .user-detail {
+                display: flex;
+                -ms-flex-align: start;
+                align-items: flex-start;
+                max-width: 80%;
+                .media-body-image{
+                    border: 1px solid @border-color-primary !important;
+                    border: 1px solid @border-color-primary !important;
+                    word-break: break-word;
+                    box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
+                    border-radius: 32px !important;
+                    border-top-right-radius: 0px !important;
+                    padding: 5px 5px;
+                    display: flex;
+                    text-align: center;
+                    overflow: hidden;
+                    image{
+                        border-radius: 32px !important;
+                        border-top-right-radius: 0px !important;
+                    }
+                    video{
+                        border-radius: 32px !important;
+                        border-top-right-radius: 0px !important;
+                    }
+                }
+                .media-body {
+                    //max-width: calc(100vw - 800px);
+                    border: 1px solid @border-color-primary !important;
+                    background-color: @border-color-primary !important;
+                    color: #ffffff !important;
+                    word-break: break-word;
+                    border-radius: 32px;
+                    border-top-right-radius: 0px;
+                    padding: 8px 15px;
+                    text-align: left;
+                    h2 {
+                        font-size: 36px;
+                    }
+                    p {
+                        font-size: 28px;
+                        word-wrap: break-word;
+                        word-break: break-all;
+                        overflow: hidden;
+                        font-size: 28px;
+                        height: auto;
+                    }
+                    img{
+                        max-width: 66vw;
+                    }
+                    .voicemessage {
+                        width: 200px;
+                        height: 35px;
+                        line-height: 35px;
+                        background-color: #e8eaec;
+                        border-radius: 10px;
+                        .icon-vioce {
+                            font-size: 24px;
+                            float: left;
+                            margin-left: 20px;
+                            margin-right: 20px;
+                        }
+                        .time {
+                            font-size: 28px;
+                            margin-left: 20px;
+                        }
+                    }
+                    span {
+                        margin-bottom: 10px;
+                        font-size: 24px;
+                        color: @font-primary-color-r4;
+                        float: left;
+                    }
+                    .botname {
+                        margin-left: 20px;
+                        float: right;
+                    }
+                    .mb-0 {
+                        margin-bottom: 0 !important;
+                        text-align: left;
+                        line-height: 1.3;
+                        margin-top: 0;
+                        font-size: 24px;
+                    }
+                }
+            }
+            .video-player .video-js .vjs-icon-placeholder {
+                width: 300px;
+                height: 172px;
+                display: block;
+            }
+            .el-image {
+                float: right;
+                width: 300px !important;
+                height: auto !important;
+            }
+        }
+    }
 </style>