aida_front/src/component/HomePage/RobotAssist.vue

<template>
	<div class="robot" @click="robotmax">
		<div class="robot_top" ref="robotDom" v-fade="robotTop,'block'">
			<div :class="[item.state == 1?'text_right':'text_left']" v-for="item in dialogue" ref="robotChildDom">
				<div class="robot_text">{{item.str}}</div>
			</div>
		</div>
		<div class="robot_bottom">
			<div class="robot_input" v-fade="robotInput,'flex'">
				<input
					placeholder="write a message~"
					v-model="chatCentent"
					@keydown.enter="roborSend()"
					@input="robotmax"
				/>
				<div class="robot_btn">
					<i class="fi fi-ss-paper-plane-top" @click="roborSend"></i>
				</div>
			</div>
			<div class="robot_img">
				<img src="@/assets/images/homePage/robot.png" @click="robotBtn">
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, createVNode, ref,Ref} from "vue";
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
import { getCookie } from "@/tool/cookie";
import axios from 'axios'

import { message } from "ant-design-vue";
export default defineComponent({
    components: {
        DownOutlined,
        UserOutlined,
    },
	setup() {
		const robotDom = ref<HTMLElement | null>(null);
		const robotChildDom = ref<HTMLElement | null>(null);
		let chatCentent = ref<string>('');
		const robotTop = ref(false)
		const robotInput = ref(false)
        let timeTop:any =  0;
        let timeInput:any =  0;
		let dialogue:any = ref([
			{
				state:1,
				str:"2222222 22222222 222"
			},
			{
				state:2,
				str:"2222 22222 22 2222 22"
			},
			{
				state:1,
				str:"222 22222 222 2222 222"
			},
		])
		const userInfo:any =  {}
		
		return {
		robotTop,
		robotInput,
		chatCentent,
		dialogue,
		robotDom,
		robotChildDom,
		timeTop,
		timeInput,
		userInfo,
		};
	},
    data() {
        return {
        };
    },
    mounted() {
		this.textScroll()
		let userInfo:any = getCookie("userInfo")
        this.userInfo = JSON.parse(userInfo);
	},
	directives:{
		fade:{
			updated (el,oldVal){
				if(oldVal.value){
					el.style.display = oldVal.arg
					setTimeout(() => {
						el.classList.add("active")
					}, 100);
				}else{
					el.classList.remove("active")
					setTimeout(() => {
					el.style.display="none"
					}, 100);
				}
			}
		}
	},
    methods: {
		robotBtn(){
			if(!this.robotTop||!this.robotInput){
				this.robotTop = true
				this.robotInput = true
				
			}else{
				this.robotTop = false
				this.robotInput = false
			}
			this.textScroll()//聊天定位到最低部
			this.createTimer()
		},
		textScroll(){
			
			
			this.$nextTick(()=>{
				if(this.robotDom && this.robotChildDom){
				// const items = this.robotChildDom._rawValue
				let num = 0
				for (let index = 0; index < (this.$refs.robotChildDom as any).length; index++) {
					const height = (this.$refs.robotChildDom as any)[index].clientHeight;
					num = num+40+height
				}
				this.robotDom.scrollTop = num
			}
			})
			
		},
		robotmax(){//点击内容就设置为true显示 重置定时器
			this.createTimer()
		},
		roborSend (){
			this.createTimer()
			if(!this.chatCentent){
                message.error("Please enter content");
				return
			}
			this.dialogue.push({
				state:2,
				str:this.chatCentent
			})
			let a = true
			let data = {
				"user_id" : this.userInfo.userId,
				// "message" : this.chatCentent,
				"message" : "Hello, can you tell me what holiday is on July 1st",
				
				"session_id":""
			}
			let interaction = {onDownloadProgress: (progressEvent:any) => {
					this.clearTimer()
					console.log(progressEvent.event.currentTarget.response);
					
				//   if(a){
				// 	this.dialogue.push({
				// 		state:1,
				// 		str:progressEvent.event.currentTarget.response
				// 	})
				// 	a = false
				//   }else{
				// 	this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
				//   }
                },
            }
			Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
                (rv: any) => {
					a = true
					this.createTimer()
                }
            ).catch(res=>{
				this.createTimer()
            });

			// new Promise((resolve, reject) => {

				
			
            // axios.post("/api/python/chatStream", data,{
			// 	onDownloadProgress: (progressEvent:any) => {
			// 		// this.clearTimer()
			// 		console.log(progressEvent);
					
			// 	//   if(a){
			// 	// 	this.dialogue.push({
			// 	// 		state:1,
			// 	// 		// str:progressEvent.event.currentTarget.response
			// 	// 	})
			// 	// 	a = false
			// 	//   }else{
			// 	// 	this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
			// 	//   }
            //     },
			// 	}).then(response => {
            //         // resolve(response)
			// 		console.log(response);

            //     }).catch((error) => {
			// 		console.log(error);
					
			// 	})

			// }); 
		
			this.chatCentent = ""
			this.textScroll()

		},
		//创建定时器
        createTimer() {
			if (this.robotTop || this.robotInput) {
				this.clearTimer()
				this.timeTop = setInterval(() => {
					this.robotTop = false
				}, 10000);
				this.timeInput = setInterval(() => {
					this.robotInput = false
				}, 5000);

			}
           
        },

        //清除定时器
        clearTimer() {
			
			clearInterval(this.timeTop);
			clearInterval(this.timeInput);
        },
    },
});
</script>
<style lang="less" scoped>
.robot{
	position: absolute;
	bottom: .5rem;
	// bottom: 2.5rem;
	right: 2.5rem;
	// right: 5rem;
	z-index: 9999;
	// width: 400px;
	.robot_top{
		// width: 70%;
		width: 25rem;
		margin-left: auto;
		height: 14rem;
		overflow-x: hidden;
		transition: .3s all;
		opacity: 0;
		display: none;
		&.active{
			opacity: 1;
		}
		&.robot_top::-webkit-scrollbar{display: none;}
		.robot_text{
			font-size: 1.4rem;
			padding: .5rem 1rem;
			display: inline-block;
			border-radius: 2rem;
			max-width: 80%;
		}
		.text_left,.text_right{
			margin: 2rem 0;
			font-size: 1.2rem;
		}
		.text_left{
			display: flex;
			justify-content: flex-start;
			>div{
				background-color: #e8e8ea;
				color: #000;
			}
		}
		.text_right{
			display: flex;
			justify-content: flex-end;
			>div{
				background-color: #835ff7;
				color: #fff;
			}
		}
	}
	.robot_bottom{
		display: flex;
		align-items: center;
	}
	.robot_input{
		border: 1px solid #d5d5d7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 10px;
		background: #fff;
		border-radius: 5px;
		// height: 32px;
		transition: .3s all;
		opacity: 0;
		display: none;
		margin-right: 4rem;
		&.active{
			opacity: 1;
		}
		input{
			border: none;
			font-size: 1.2rem;
			width: 25rem;
		}
		.robot_btn{
			display: flex;
			height: 100%;
			cursor: pointer;
		}
		.fi-ss-paper-plane-top{
			display: flex;
			align-items: center;
		}
		.fi-ss-paper-plane-top::before{
			color: #835df8;
		}
	}
	.robot_img{
		    margin-left: auto;
		img{
			width: 8rem;
			// margin-left: 40px;
			cursor: pointer;

		}
	}
}
</style>