ebiz-base-ai/src/views/customer/index.vue

<template>
  <div class="chat-page">
    <van-nav-bar title="客服助手" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
    <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"
            @setProductName="setProductName"
          ></messageComponent>
        </div>
      </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"
      :conversation-id.sync="conversationId"
      :is-searching.sync="isSearching"
      :product-name.sync="productName"
      :autoScrollEnabled.sync="autoScrollEnabled"
      @getIsThink="getIsThink"
    ></chatMessage>
  </div>
</template>

<script>
import { Icon, NavBar } from 'vant'
import SvgIcon from '@/components/svg-icon/index.vue'
import HotProducts from '@/views/AI/components/HotProducts.vue'
import chatMessage from '@/views/AI/components/chat.vue'
import messageComponent from '@/views/AI/components/message.vue'

export default {
  components: {
    SvgIcon,
    messageComponent,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    HotProducts,
    chatMessage,
  },
  data() {
    return {
      hotList: [],
      productName: '',
      conversationId: '',
      messageStatus: 'stop',
      isThink: null,
      messages: [
        {
          type: 'bot',
          text: '欢迎使用AI客服助手，请输入问题开始对话。',
        },
      ],
      isSearching: false,
      isDeep: false,
      autoScrollEnabled: true,
      scrollPosition: 0,
    }
  },
  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>

<style lang="scss" scoped>
$primary-color: #2e5ca9;
$primary-text-color: #f6aa21;
$primary-trans-color: rgba(135, 162, 208, 0.5);

.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  //-webkit-user-select: none;
  //-moz-user-select: none;
  //-ms-user-select: none;
  //user-select: none;

  .chat-main {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: #f7f8fa;
    position: relative;

    .button-container {
      position: fixed;
      bottom: 150px;
      right: 10px;
      border-radius: 50%;
    }

    .chat-content {
      height: 100%;
      .message-area {
        height: 100%;
        overflow-y: auto;
        transition: all 0.2s ease-in-out;
      }
    }
  }
}
</style>