Vue种Ai对话框设计Demo

<template>
  <div>
    <!-- 对话框按钮 -->
    <el-button @click="showDialog">打开对话框</el-button>
    <!-- 对话框组件 -->
    <el-dialog :visible.sync="dialogVisible" title="ChatGPT对话框" :close-on-click-modal="false">
      <div class="chat-box">
        <!-- 消息列表 -->
        <div class="message-list">
          <el-card v-for="(message, index) in messages" :key="index">
            {{ message }}
          </el-card>
        </div>
        <!-- 输入框 -->
        <el-input v-model="inputMessage" placeholder="请输入消息"></el-input>
        <!-- 发送按钮 -->
        <el-button type="primary" @click="sendMessage">发送</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false, // 对话框是否可见
      inputMessage: '', // 用户输入的消息
      messages: [], // 消息列表
    }
  },
  methods: {
    // 打开对话框
    showDialog() {
      this.dialogVisible = true
    },
    // 关闭对话框
    closeDialog() {
      this.dialogVisible = false
    },
    // 发送消息
    sendMessage() {
      if (this.inputMessage !== '') {
        this.messages.push('用户：' + this.inputMessage) // 添加用户发送的消息到消息列表
        this.inputMessage = '' // 清空输入框
        this.replyMessage() // 调用回复消息函数
      }
    },
    // 回复消息
    replyMessage() {
      // 这里可以添加调用API接口等处理逻辑，获取AI回复的消息
      this.messages.push('Hello：这是回复的消息') // 将AI回复的消息添加到消息列表
    },
  },
}
</script>

<style>
.chat-box {
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: space-between;
}

.message-list {
  overflow-y: auto;
  max-height: 200px;
}
</style>