类似于gpt的聊天效果,打字机_聊天对话框类似于gpt 流式输出

下载第三课库 typed.js

把这个组件命名TypedEffect,应用这个组件,放在第二个代码片段里面去

<template>
  <div class="typed-container">
    <span ref="typedElement"></span>
  </div>
</template>
 
<script>
import Typed from 'typed.js';
 
export default {
  name:'TypedEffect',
  props: {
    strings: {
      type: Array,
      required: true
    },
    typeSpeed: {
      type: Number,
      default: 50
    },
    backSpeed: {
      type: Number,
      default: 50
    },
    loop: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.initTyped();
  },
  beforeDestroy() {
    if (this.typed) {
      this.typed.destroy();
    }
  },
  watch: {
    strings(newStrings) {
      if (this.typed) {
        this.typed.destroy();
      }
      this.initTyped();
    }
  },
  methods: {
    initTyped() {
      const options = {
        strings: this.strings,
        typeSpeed: this.typeSpeed,
        backSpeed: this.backSpeed,
        loop: this.loop
      };
      this.typed = new Typed(this.$refs.typedElement, options);
    }
  }
};
</script>
 
<style scoped>
.typed-container {
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
}
</style>

<template>
  <div class="chatbot">
    <div class="chat-window"  v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
      <div v-for="(message, index) in messages" :key="index" :class="['message', message.type]">
        <div v-if="message.type === 'question'" class="user-message">
            <span class="tiwen">{{ message.text }}</span>   <span class="tiwenTox"></span>
        </div>
        <div v-else class="bot-message">
         <span class="ecwfwfTx"></span> <TypedEffect v-if="index === messages.length - 1 && !showNextMessage" :strings="[message.text]" :typeSpeed="50" :backSpeed="50" :loop="false" />
          <span class="ecwfwf" v-else> {{ message.text }}</span>
        </div>
      </div>
    </div>
 
      <input class="cwedcw" v-model="userInput" @keyup.enter="handleInput"  placeholder="输入你的问题后,敲回车键" /> 
 
  </div>
</template>
 
<script>
import TypedEffect from './TypedEffect.vue';
import { interpretTheContentOfTheDocument } from "@/api/wenjian";
export default {
  name:'chatbot',
  components: {
    TypedEffect
  },
   props: {
    // text: {
    //   type: String,
    //   required: true
    // },
    name: {
      type: String,
      required: true
    },
    size: {
      type: String,
      required: true
    },
    type: {
      type: String,
      required: true
    },
    },
  data() {
    return {
      userInput: '',
      messages: [],
      responses: {
        '你好': '你好！有什么我可以帮助你的吗？',
        '天气': '今天天气很好，适合外出。',
        '再见': '再见！祝你有美好的一天！'
      },
      showNextMessage: true,
 
      dataObject:null,
      text:null,
      loading:false
    };
  },
  created(){
// console.log(this.text);
console.log(this.name);
console.log(this.size);
console.log(this.type);
 this.text = sessionStorage.getItem('text');
  },
    beforeDestroy() {
       this.dataObject.text =null
    },
  methods: {
  async  handleInput() {
          this.loading=true
      const userQuestion = this.userInput.trim();
      if (userQuestion) {
        console.log('User question:', userQuestion);
        let query={
         busKgFile:{
          text:this.text,
          name:this.name,
          size:this.size,
          type:this.type
         },
          q:userQuestion
        }
       const res= await interpretTheContentOfTheDocument(query)
 
       console.log(res,"相关回答");
       const originalString = res
// 数据处理
// 定义正则表达式来匹配 data 字段
const regex = /data: (\{.*\})/s;
 
// 使用正则表达式匹配内容
const match = originalString.match(regex);
 
// 如果匹配成功，提取第一个捕获组内容作为 data 字段的字符串
if (match) {
  const dataString = match[1];
  
  // 将 data 字符串解析为对象
  try {
    this.dataObject  = JSON.parse(dataString);
    // console.log(dataObject);
  } catch (error) {
    console.error('Failed to parse data object:', error);
  }
} else {
  console.error('No data field found in the input string.');
}
if(this.dataObject.text){
 this.loading=false
}else{
  this.loading=false
}
 
// console.log(dataObject.text,"相关回答");
        this.messages.push({ type: 'question', text: userQuestion });
        const response =    this.dataObject.text || '对不起，我不明白你的问题。';
        this.userInput = '';  // 清空输入框
        this.showNextMessage = false;  // 隐藏下一条信息
        setTimeout(() => {
          this.messages.push({ type: 'answer', text: response });
          this.$nextTick(() => {
            this.showNextMessage = true;  // 显示下一条信息
          });
        }, 500);  // 模拟回复延迟
      }
    }
  }
};
</script>
 
<style scoped>
.chatbot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
 
.chat-window {
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  height: 80vh;
  overflow-y: auto;
  padding: 10px;
  background-color: #f9f9f9;
}
 
.message   {
  margin: 10px 0;
   
}
 
.user-message {
  text-align: right;
  padding: 10px;
  /* background-color: #d1e7dd; */
  border-radius: 10px;
  align-self: flex-end;
  max-width: 80%;
  display: flex;
  align-items: center
}
::v-deep .message .question{
 
}
.tiwen{
  display: inline-block;
  width: 90%;
    border-radius: 10px;
      text-align: right;
  padding: 10px;
background-color: #d1e7dd;
}
.tiwenTox{
    width: 40px;
  height: 40px;
  display: inline-block;
  background: url(../../../../assets/wendong/66135a5a1bfb5b0037b2bd52.png)  no-repeat;
background-size: 100% 100%;
margin-left: 5px;
 
}
 
.bot-message {
  text-align: left;
  padding: 10px;
  /* background-color: #f8d7da; */
  border-radius: 10px;
  align-self: flex-start;
  max-width: 80%;
}
.ecwfwf{
   display: inline-block;
  width: 90%;
    border-radius: 10px;
    text-align: left;
  padding: 10px;
  background-color: #f8d7da;
}
.ecwfwfTx{
     width: 40px;
  height: 40px;
  display: inline-block;
  background: url(../../../../assets/wendong/logo.png)  no-repeat;
background-size: 100% 100%;
margin-left: 5px;
}
input {
  margin-top: 20px;
  padding: 10px;
  font-size: 16px;
  width: 400px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.cwedcw{
  width: 90%;
}
.sdcscs{
  display: flex;
  align-content: center;
}
</style>