FiDA_Front/src/views/home/agent/index.vue

<template>
	<div class="agent-wrapper flex space-between">
		<div class="openVersionTree">
			<div class="btn" @click="versionTreeData.drawer = true">Version Tree</div>
		</div>
		<div class="content-wrapper">
			<Agent ref="agentRef" :title="agentTitle" @update:sketchList="updateSketchList" />
			<div class="preview-wrapper">
				<Preview :type="previewType" :sketchList="sketchList" />
			</div>
		</div>
		<VersionTreeIndex
			ref="VersionTreeIndexRef"
			v-model:versionTreeData="versionTreeData"
			@restore="handleRestore"
			@selectNode="handleSelectNode"
		/>
	</div>
</template>

<script setup lang="ts">
	import { ref, watch, onMounted, computed } from 'vue'
	import Agent from './components/Agent.vue'
	import Preview from './components/Preview.vue'
	import VersionTreeIndex from './components/versionTree/index.vue'
	import { useProjectStore } from '@/stores'
	import { getProjectInfo } from '@/api/agent'
	import { clearNodeChat, getNodeAncestors } from '@/api/versitonTree'
	import { useRoute } from 'vue-router'

	const route = useRoute()
	const projectStore = useProjectStore()

	const agentTitle = ref('Retro Sofa Sketch')
	const previewType = ref<'sketch' | 'report'>('sketch')
	const VersionTreeIndexRef = ref()
	const agentRef = ref()
	const sketchList = ref([])
	const updateSketchList = (newVal) => {
		console.log('newVal', newVal)
		sketchList.value = newVal
		// VersionTreeIndexRef.value.getVersionTree()
	}

	const versionTreeData = ref({
		drawer: false
	})

	const handleRestore = () => {
		// agentRef.value?.inputRef?.addReportTag('Restore')
		clearNodeChat({ projectId: projectStore.state.id, id: projectStore.state.nodeId }).then(
			(res) => {}
		)
	}
	const handleSelectNode = () => {
		console.log('handleSelectNode')
		getNodeAncestors({ projectId: projectStore.state.id, id: projectStore.state.nodeId }).then(
			(res) => {
				console.log('res', res)
				agentRef.value.setChatInfo(res)
			}
		)
	}

	const handleGetProjectInfoAndHistory = () => {
		getProjectInfo({ id: route.params.id }).then((res) => {
			if(res?.conversation)agentRef.value.setChatInfo(res.conversation)
			let data = res?.project || res
			if(data?.latestNodeId)data.nodeId = data.latestNodeId
			projectStore.setProject({
				...data,
			})
		})
	}

	const proJectId = computed(() => route.params.id)

	watch(
		() => proJectId.value,
		(newVal, oldVal) => {
			projectStore.clearProject()
			if (newVal) {
				handleGetProjectInfoAndHistory()
			}
		}
	)

	onMounted(() => {
		projectStore.clearProject()
		if (proJectId.value) {
			handleGetProjectInfoAndHistory()
		}
	})
</script>

<style lang="less" scoped>
	.agent-wrapper {
		width: 100%;
		height: 100%;
		border-top: 0.1rem solid #c9c9c9;
		padding: 0rem 2.3rem 6rem 2.8rem;
		flex-direction: column;
		.openVersionTree {
			padding: 2rem 0rem;
			width: 100%;
			display: flex;
			justify-content: flex-end;
			height: min-content;
			> .btn {
				padding: 1.5rem 1.45rem;
				font-weight: 500;
				font-size: 1.4rem;
				border-radius: 2rem;
				position: relative;
				background: white;
				cursor: pointer;
				&::before {
					content: '';
					position: absolute;
					inset: -1px;
					background: linear-gradient(
						119.03deg,
						rgba(233, 121, 60, 0.8) 1.61%,
						rgba(255, 207, 144, 0.8) 101.01%
					);
					border-radius: 2.2rem;
					z-index: -1;
				}
			}
		}

		.content-wrapper {
			display: flex;
			flex: 1;
			justify-content: space-between;
			overflow: hidden;
		}

		.c-svg {
			width: initial;
		}

		.preview-wrapper {
			width: 91.2rem;
		}
	}
</style>