aida_front/src/component/HomePage/RobotAssist.vue

<template>
	<div class="robot" @mousemove="robotmax">
		<div class="robot_top" ref="robotDom" v-fade="robotTop,'block'">
			<div :class="[item.state == 1?'text_right':'text_left']" v-for="item in record" ref="robotChildDom">
				<div class="robot_text">
					<span>
						{{item.str}}
					</span>
					<div class="robot_img">
						<div class="robot_img_item" v-for="imgItem in item.img">
							<img :src="imgItem.url" alt="">					
							<div
								class="delete_like_file_block"
							>
								<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
								<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
							</div>
						</div>
					</div>
				</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 record:any = ref([
			{
				state:1,
				str:"1111111111"
			},
			{
				state:2,
				str:"2222222222222"
			},
			{
				state:1,
				str:"1111111111"
			},
			{
				state:2,
				str:"2222222222222"
			},
			{
				state:1,
				str:"1111111111",
				img:[
					{url:'http://18.167.251.121:9000/aida-clothing/image/image_1695621083.572033.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20230926%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230926T064349Z&X-Amz-Expires=28800&X-Amz-SignedHeaders=host&X-Amz-Signature=74f33d78f94925b1cd2e0198efad99432d7f285f951d5fc1ac11bf77fc802238'},
					{url:'http://18.167.251.121:9000/aida-clothing/image/image_1695621083.572033.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20230926%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230926T064349Z&X-Amz-Expires=28800&X-Amz-SignedHeaders=host&X-Amz-Signature=74f33d78f94925b1cd2e0198efad99432d7f285f951d5fc1ac11bf77fc802238'},
					{url:'http://18.167.251.121:9000/aida-clothing/image/image_1695621083.572033.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20230926%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230926T064349Z&X-Amz-Expires=28800&X-Amz-SignedHeaders=host&X-Amz-Signature=74f33d78f94925b1cd2e0198efad99432d7f285f951d5fc1ac11bf77fc802238'},
					{url:'http://18.167.251.121:9000/aida-clothing/image/image_1695621083.572033.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20230926%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230926T064349Z&X-Amz-Expires=28800&X-Amz-SignedHeaders=host&X-Amz-Signature=74f33d78f94925b1cd2e0198efad99432d7f285f951d5fc1ac11bf77fc802238'},
				]
			},
			{
				state:2,
				str:"2222222222222"
			},
		])
		const userInfo:any =  {}
		
		return {
		robotTop,
		robotInput,
		chatCentent,
		record,
		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(){


			console.log(2323);
			if(!this.robotTop||!this.robotInput){
				this.robotTop = true
				this.robotInput = true
				
			}else{
				this.robotTop = false
				this.robotInput = false
			}
			// let noRefresh = false;
            // this.$router.push({ name: 'library', params: { noRefresh: 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.clearTimer()
			if(!this.chatCentent){
                message.warning("Please enter content");
				return
			}
			this.record.push({
				state:2,
				str:this.chatCentent
			})
			this.textScroll()
			let sessionId
			if(sessionStorage.getItem("sessionId") == null){
				let randomNum:any = Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
				sessionStorage.setItem('sessionId', randomNum);  
				sessionId = randomNum
			}else{
				sessionId = sessionStorage.getItem("sessionId")
			}
		// sessionStorage.setItem('username', '23123123123');  
		// sessionStorage.getItem("username")  
		// sessionStorage.removeItem
			console.log(sessionId);
			
			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":""
				"session_id":sessionId,
				"message" : this.chatCentent,
			}
			let interaction = {onDownloadProgress: (progressEvent:any) => {
					this.clearTimer()
					// console.log(progressEvent.event.currentTarget.response);
				//   if(a){
				// 	this.record.push({
				// 		state:1,
				// 		str:progressEvent.event.currentTarget.response
				// 	})
				// 	a = false
				//   }else{
				// 	this.record[this.record.length].str = progressEvent.event.currentTarget.response
				//   }
                },
            }
			Https.axiosPost(Https.httpUrls.chatStreamTest, data).then(
			// Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
                (rv) => {
					if(rv){
						console.log(rv);
						
						this.record.push({
							state:1,
							str:rv.output
						})
						this.createTimer()
						this.textScroll()
					}
                }
            ).catch(res=>{
				// console.log(res,'res');
            });
			this.chatCentent = ""
		},
		likeFile(item:any,str:string){
			if(str == 'like'){
				let data = {
					generateDetailId:item.id,
					level1Type:"Moodboard",
					level2Type: '',
					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
				}
				Https.axiosPost(Https.httpUrls.generateLike, data).then(
					(rv) => {
						console.log(rv);
						item.like = true
						
					}
				).catch(res=>{
				});
			}else{
				let data = {
					generateDetailId:item.id,
					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
				}
				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
					(rv) => {
						item.like = false
					}
				).catch(res=>{
				});
			}
		},
		//创建定时器
        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: 25rem;
		width: 30rem;
		margin-left: auto;
		height: 30rem;
		// height: 20rem;
		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: 1rem 1.5rem;
			display: inline-block;
			border-radius: 2rem;
			max-width: 80%;
			.robot_img{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				.robot_img_item{
					margin-bottom: 5%;
					margin-right: 2.5%;
					max-height: 100%;
					position: relative;
					width: 40%;
					.delete_like_file_block{
						display: none;
						width: 3.2rem;
						height: 3.2rem;
						background: rgba(0,0,0,0.6);
						border-radius: 0.4rem;
						position: absolute;
						top: 0rem;
						right: 0rem;
						text-align: center;
						line-height: 3.2rem;
						left: auto;
						cursor: pointer;
						i{
							font-size: 1.6rem;
							color: #fff;
							&.fi-rr-heart{

							}
							&.fi-sr-heart{
								color: red;
							}
						}
					}
					&:hover .delete_like_file_block{
						display: block;
					}
				}
				img{
					width: 100%;
					height: 8rem;
					object-fit: contain;
					cursor: auto;
					// width: auto;
				}
				img:nth-child(2n-1){
					// margin-right: 5%;
				}
			}
		}
		.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>