fix: 修复点击开启新会话的时候，界面显示异常的问题

src/views/AI-new/components/chat-new.vue

@@ -132,7 +132,8 @@ export default {
       this.$emit('update:isSearching', !this.isSearching)
     },
     startNewConversation() {
-      this.$emit('update:messages', [])
+      this.$emit('initBotMessage')
+      // this.$emit('update:messages', [])
       this.$emit('update:conversationId', '')
       this.$emit('update:productName', '')
     },

src/views/AI-new/index.vue

@@ -31,7 +31,7 @@
 
     <chatMessage ref="chatMessage" :messages.sync="messages" :messageStatus.sync="messageStatus" :is-deep.sync="isDeep"
       :conversation-id.sync="conversationId" :is-searching.sync="isSearching" :product-name.sync="productName"
-      :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="normal_chat"></chatMessage>
+      :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="normal_chat" @initBotMessage="initBotMessage"/>
   </div>
 </template>
 
@@ -134,6 +134,9 @@ export default {
     },
     cellClick(item) {
       this.$refs.chatMessage.cellClick(item)
+    },
+    initBotMessage() {
+      this.messages = []
     }
   },
   watch: {

src/views/AI-new/views/productKnowledge/index.vue

@@ -1,15 +1,26 @@
 <template>
   <div class="chat-page">
     <van-nav-bar title="产品知识助手" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
-    <sticky :hotList="hotList" :productName="productName" :messagesList.sync="messages"
+    <sticky
-      :autoScrollEnabled.sync="autoScrollEnabled" @setProductName="setProductName"
+      :hotList="hotList"
-      :isDisabled="messageStatus === 'send'" :conversationId="conversationId"></sticky>
+      :productName="productName"
+      :messagesList.sync="messages"
+      :autoScrollEnabled.sync="autoScrollEnabled"
+      @setProductName="setProductName"
+      :isDisabled="messageStatus === 'send'"
+      :conversationId="conversationId"
+    ></sticky>
 
     <main class="chat-main">
       <div class="chat-content">
         <div class="message-area" ref="messageArea" @scroll="handleScroll">
-          <messageComponent :messagesList="messages" :is-deep="isDeep" :is-search="isSearching" :think-ok="isThink"
+          <messageComponent
-            @setProductName="setProductName"></messageComponent>
+            :messagesList="messages"
+            :is-deep="isDeep"
+            :is-search="isSearching"
+            :think-ok="isThink"
+            @setProductName="setProductName"
+          ></messageComponent>
           <!-- <HotProducts class="mb10" :messagesList.sync="messages" @getHotList="getHotProducts"></HotProducts> -->
         </div>
       </div>
@@ -19,9 +30,18 @@
       </div>
     </main>
 
-    <chatMessage :messages.sync="messages" :messageStatus.sync="messageStatus" :is-deep.sync="isDeep"
+    <chatMessage
-      :conversation-id.sync="conversationId" :is-searching.sync="isSearching" :product-name.sync="productName"
+      :messages.sync="messages"
-      :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="chat"/>
+      :messageStatus.sync="messageStatus"
+      :is-deep.sync="isDeep"
+      :conversation-id.sync="conversationId"
+      :is-searching.sync="isSearching"
+      :product-name.sync="productName"
+      :autoScrollEnabled.sync="autoScrollEnabled"
+      @getIsThink="getIsThink"
+      action="chat"
+      @initBotMessage="initBotMessage"
+    />
   </div>
 </template>
 
@@ -41,7 +61,7 @@ export default {
     messageComponent,
     HotProducts,
     chatMessage,
-    sticky,
+    sticky
   },
   data() {
     return {
@@ -54,7 +74,7 @@ export default {
       isSearching: false,
       isDeep: false,
       autoScrollEnabled: true,
-      scrollPosition: 0,
+      scrollPosition: 0
     }
   },
   created() {
@@ -65,16 +85,13 @@ export default {
 
     if (!compareId) {
       sessionStorage.removeItem('results')
-      this.messages.push({
+      this.initBotMessage()
-        type: 'bot',
-        text: `这里是产品知识小助手，请告诉我您想要了解哪个产品？也可以输入以下信息，我帮您进行精准查询：\n\n1.投保规则\n\n2.保障责任\n\n3.增值服务\n\n您可以直接向我提问~`,
-      })
     } else {
       // 可以调用接口展示 名字 或者存在session里
 
       let sesstions = JSON.parse(sessionStorage.getItem('results')).productResults
       console.log(sesstions)
-      let text = sesstions.map((item) => {
+      let text = sesstions.map(item => {
         return item.productName + '<br/>'
       })
       console.log(text)
@@ -82,7 +99,7 @@ export default {
 
       this.messages.push({
         type: 'user',
-        text: other,
+        text: other
       })
     }
     this.getHotProducts()
@@ -122,6 +139,12 @@ export default {
       this.autoScrollEnabled = isAtBottom
       this.scrollPosition = messageArea.scrollTop
     },
+    initBotMessage() {
+      this.messages.splice(0, this.messages.length, {
+        type: 'bot',
+        text: `这里是产品知识小助手，请告诉我您想要了解哪个产品？也可以输入以下信息，我帮您进行精准查询：\n\n1.投保规则\n\n2.保障责任\n\n3.增值服务\n\n您可以直接向我提问~`
+      })
+    }
   },
   watch: {
     messages: {
@@ -129,9 +152,9 @@ export default {
         // console.log(this.messages, 'messages');
         this.$nextTick(() => this.scrollToBottom())
       },
-      deep: true,
+      deep: true
-    },
+    }
-  },
+  }
 }
 </script>
 

src/views/AI-new/views/productRecommend/index.vue

@@ -1,29 +1,49 @@
 <template>
-    <div class="chat-page">
+  <div class="chat-page">
-        <van-nav-bar title="产品推荐助手-保障型" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
+    <van-nav-bar title="产品推荐助手-保障型" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
-        <sticky :hotList="hotList" :productName="productName" :messagesList.sync="messages"
+    <sticky
-            :autoScrollEnabled.sync="autoScrollEnabled" @setProductName="setProductName"
+      :hotList="hotList"
-            :isDisabled="messageStatus === 'send'" :conversationId="conversationId"></sticky>
+      :productName="productName"
+      :messagesList.sync="messages"
+      :autoScrollEnabled.sync="autoScrollEnabled"
+      @setProductName="setProductName"
+      :isDisabled="messageStatus === 'send'"
+      :conversationId="conversationId"
+    ></sticky>
 
-        <main class="chat-main">
+    <main class="chat-main">
-            <div class="chat-content">
+      <div class="chat-content">
-                <div class="message-area" ref="messageArea" @scroll="handleScroll">
+        <div class="message-area" ref="messageArea" @scroll="handleScroll">
-                    <messageComponent :messagesList="messages" :is-deep="isDeep" :is-search="isSearching"
+          <messageComponent
-                        :think-ok="isThink" @setProductName="setProductName"></messageComponent>
+            :messagesList="messages"
-                    <!-- <HotProducts class="mb10" :messagesList.sync="messages" @getHotList="getHotProducts"></HotProducts> -->
+            :is-deep="isDeep"
-                </div>
+            :is-search="isSearching"
-            </div>
+            :think-ok="isThink"
-            <!-- 滚动到顶部按钮 -->
+            @setProductName="setProductName"
-            <div class="button-container" style="background: #fff">
+          ></messageComponent>
-                <van-icon name="upgrade" size="2em" @click="scrollToTop" />
+          <!-- <HotProducts class="mb10" :messagesList.sync="messages" @getHotList="getHotProducts"></HotProducts> -->
-            </div>
+        </div>
-        </main>
+      </div>
+      <!-- 滚动到顶部按钮 -->
+      <div class="button-container" style="background: #fff">
+        <van-icon name="upgrade" size="2em" @click="scrollToTop" />
+      </div>
+    </main>
 
-        <chatMessage :messages.sync="messages" :messageStatus.sync="messageStatus" :is-deep.sync="isDeep"
+    <chatMessage
-            :conversation-id.sync="conversationId" :is-searching.sync="isSearching" :product-name.sync="productName"
+      :messages.sync="messages"
-            :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="product_recommend">
+      :messageStatus.sync="messageStatus"
-        </chatMessage>
+      :is-deep.sync="isDeep"
-    </div>
+      :conversation-id.sync="conversationId"
+      :is-searching.sync="isSearching"
+      :product-name.sync="productName"
+      :autoScrollEnabled.sync="autoScrollEnabled"
+      @getIsThink="getIsThink"
+      action="product_recommend"
+      @initBotMessage="initBotMessage"
+    >
+    </chatMessage>
+  </div>
 </template>
 
 <script>
@@ -35,108 +55,111 @@ import sticky from '@/views/AI/components/sticky.vue'
 import chatMessage from '@/views/AI-new/components/chat-new.vue'
 
 export default {
-    components: {
+  components: {
-        SvgIcon,
+    SvgIcon,
-        [Icon.name]: Icon,
+    [Icon.name]: Icon,
-        [NavBar.name]: NavBar,
+    [NavBar.name]: NavBar,
-        messageComponent,
+    messageComponent,
-        HotProducts,
+    HotProducts,
-        chatMessage,
+    chatMessage,
-        sticky,
+    sticky
-    },
+  },
-    data() {
+  data() {
-        return {
+    return {
-            hotList: [],
+      hotList: [],
-            productName: '',
+      productName: '',
-            conversationId: '',
+      conversationId: '',
-            messageStatus: 'stop',
+      messageStatus: 'stop',
-            isThink: null,
+      isThink: null,
-            messages: [],
+      messages: [],
-            isSearching: false,
+      isSearching: false,
-            isDeep: false,
+      isDeep: false,
-            autoScrollEnabled: true,
+      autoScrollEnabled: true,
-            scrollPosition: 0,
+      scrollPosition: 0
-        }
+    }
-    },
+  },
-    created() {
+  created() {
-        let { compareId, conversationId } = this.$route.query
+    let { compareId, conversationId } = this.$route.query
-        if (conversationId) {
+    if (conversationId) {
-            this.conversationId = conversationId
+      this.conversationId = conversationId
-        }
+    }
 
-        if (!compareId) {
+    if (!compareId) {
-            sessionStorage.removeItem('results')
+      sessionStorage.removeItem('results')
-            this.messages.push({
+      this.initBotMessage()
-                type: 'bot',
+    } else {
-                text: `这里是产品推荐小助手，请告诉我以下客户的信息， 我帮您精准推荐：\n\n1.如果您需要推荐保障类产品，您可以告诉我以下信息：
+      // 可以调用接口展示 名字 或者存在session里
+      let sesstions = JSON.parse(sessionStorage.getItem('results')).productResults
+      console.log(sesstions)
+      let text = sesstions.map(item => {
+        return item.productName + '<br/>'
+      })
+      console.log(text)
+      let other = '对比产品 <br/>' + text.join('')
+
+      this.messages.push({
+        type: 'user',
+        text: other
+      })
+    }
+    this.getHotProducts()
+  },
+  methods: {
+    getIsThink(e) {
+      this.isThink = e
+    },
+    getHotProducts(e) {
+      console.log(e)
+      this.hotList = e
+    },
+
+    scrollToTop() {
+      const messageArea = this.$refs.messageArea
+      if (messageArea) {
+        messageArea.scrollTop = 0
+      }
+    },
+    scrollToBottom() {
+      if (!this.autoScrollEnabled) return
+      this.$nextTick(() => {
+        const messageArea = this.$refs.messageArea
+        if (messageArea) {
+          messageArea.scrollTop = messageArea.scrollHeight
+        }
+      })
+    },
+    setProductName(e) {
+      this.productName = e
+    },
+    handleScroll() {
+      const messageArea = this.$refs.messageArea
+      if (!messageArea) return
+      const threshold = 10
+      const isAtBottom = messageArea.scrollHeight - messageArea.clientHeight <= messageArea.scrollTop + threshold
+      this.autoScrollEnabled = isAtBottom
+      this.scrollPosition = messageArea.scrollTop
+    },
+    initBotMessage() {
+      this.messages.splice(0, this.messages.length, {
+        type: 'bot',
+        text: `这里是产品推荐小助手，请告诉我以下客户的信息， 我帮您精准推荐：\n\n1.如果您需要推荐保障类产品，您可以告诉我以下信息：
                 \n\n• 客户需要哪类保障？（重疾/医疗/意外）
                 \n\n• 客户的年龄、性别、有无既往病症
                 \n\n• 客户的保障场景（住院医疗/百万医疗/出行意外/综合意外/交通意外）
                 \n\n2.如果您需要推荐理财储蓄类产品，您可以告诉我以下信息：
                 \n\n• 客户主要目标是什么？（财富升值/子女教育/资产传承/养老保障）
-                \n\n• 客户的年龄、性别、年收入、风险承受能力`,
+                \n\n• 客户的年龄、性别、年收入、风险承受能力`
-            })
+      })
-        } else {
+    }
-            // 可以调用接口展示 名字 或者存在session里
+  },
-            let sesstions = JSON.parse(sessionStorage.getItem('results')).productResults
+  watch: {
-            console.log(sesstions)
+    messages: {
-            let text = sesstions.map((item) => {
+      handler() {
-                return item.productName + '<br/>'
+        this.$nextTick(() => this.scrollToBottom())
-            })
+      },
-            console.log(text)
+      deep: true
-            let other = '对比产品 <br/>' + text.join('')
+    }
-
+  }
-            this.messages.push({
-                type: 'user',
-                text: other,
-            })
-        }
-        this.getHotProducts()
-    },
-    methods: {
-        getIsThink(e) {
-            this.isThink = e
-        },
-        getHotProducts(e) {
-            console.log(e)
-            this.hotList = e
-        },
-
-        scrollToTop() {
-            const messageArea = this.$refs.messageArea
-            if (messageArea) {
-                messageArea.scrollTop = 0
-            }
-        },
-        scrollToBottom() {
-            if (!this.autoScrollEnabled) return
-            this.$nextTick(() => {
-                const messageArea = this.$refs.messageArea
-                if (messageArea) {
-                    messageArea.scrollTop = messageArea.scrollHeight
-                }
-            })
-        },
-        setProductName(e) {
-            this.productName = e
-        },
-        handleScroll() {
-            const messageArea = this.$refs.messageArea
-            if (!messageArea) return
-            const threshold = 10
-            const isAtBottom = messageArea.scrollHeight - messageArea.clientHeight <= messageArea.scrollTop + threshold
-            this.autoScrollEnabled = isAtBottom
-            this.scrollPosition = messageArea.scrollTop
-        },
-    },
-    watch: {
-        messages: {
-            handler() {
-                this.$nextTick(() => this.scrollToBottom())
-            },
-            deep: true,
-        },
-    },
 }
 </script>
 
@@ -146,37 +169,37 @@ $primary-text-color: #f6aa21;
 $primary-trans-color: rgba(135, 162, 208, 0.5);
 
 .chat-page {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    height: 100vh;
+  height: 100vh;
-    //-webkit-user-select: none;
+  //-webkit-user-select: none;
-    //-moz-user-select: none;
+  //-moz-user-select: none;
-    //-ms-user-select: none;
+  //-ms-user-select: none;
-    //user-select: none;
+  //user-select: none;
 
-    .chat-main {
+  .chat-main {
-        flex: 1;
+    flex: 1;
-        overflow-y: auto;
+    overflow-y: auto;
-        padding: 10px;
+    padding: 10px;
-        background: #f7f8fa;
+    background: #f7f8fa;
-        position: relative;
+    position: relative;
 
-        .button-container {
+    .button-container {
-            position: fixed;
+      position: fixed;
-            bottom: 150px;
+      bottom: 150px;
-            right: 10px;
+      right: 10px;
-            border-radius: 50%;
+      border-radius: 50%;
-        }
-
-        .chat-content {
-            height: 100%;
-
-            .message-area {
-                height: 100%;
-                overflow-y: auto;
-                transition: all 0.2s ease-in-out;
-            }
-        }
     }
+
+    .chat-content {
+      height: 100%;
+
+      .message-area {
+        height: 100%;
+        overflow-y: auto;
+        transition: all 0.2s ease-in-out;
+      }
+    }
+  }
 }
-</style>
+</style>