143 lines
4.5 KiB
Vue
143 lines
4.5 KiB
Vue
<template>
|
||
<div class="agent-container flex flex-col">
|
||
<div class="agent-header flex align-center space-between">
|
||
<div class="header-title-wrapper">
|
||
<div class="agent-title">{{ props.title }}</div>
|
||
<div class="agent-name">AI Assistant 1.0</div>
|
||
</div>
|
||
<SvgIcon name="equal" color="#0d0d0d" size="24" />
|
||
</div>
|
||
<div class="agent-body flex-1 flex flex-col">
|
||
<List :message-list="messageList" />
|
||
<Input is-agent-mode @send="handleSendMessage" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue'
|
||
import List from './List.vue'
|
||
import Input from '../../components/Input.vue'
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
title: string
|
||
}>(),
|
||
{
|
||
title: 'Retro Sofa Sketch'
|
||
}
|
||
)
|
||
|
||
const messageList = ref([
|
||
{ id: 1, text: 'Hello', isUser: true },
|
||
{
|
||
id: 2,
|
||
text: 'Hey, I am your design assistant FiDA. I noticed that you want to design a yellow sofa. I can help you! Tell me what else you need?'
|
||
},
|
||
{
|
||
id: 3,
|
||
text: 'Please design a vintage-inspired sofa with smooth, flowing lines and a sculptural silhouette. The sofa features a retro aesthetic combined with elegant curves, creating a timeless and refined look.',
|
||
isUser: true
|
||
}
|
||
])
|
||
|
||
const handleSendMessage = (message: string) => {
|
||
console.log('Message sent:', message)
|
||
messageList.value.push({
|
||
id: messageList.value.length + 1,
|
||
text: message,
|
||
isUser: true
|
||
})
|
||
|
||
// Add AI loading message
|
||
const aiMessage = reactive({
|
||
id: messageList.value.length + 1,
|
||
text: '',
|
||
isUser: false,
|
||
loading: true,
|
||
thinking: false,
|
||
thinkingText: '',
|
||
thinkingCollapsed: false,
|
||
streaming: false
|
||
})
|
||
messageList.value.push(aiMessage)
|
||
|
||
// Simulate AI response
|
||
setTimeout(() => {
|
||
aiMessage.loading = false
|
||
aiMessage.thinking = true
|
||
aiMessage.thinkingText = '思考中...'
|
||
|
||
// Simulate thinking process
|
||
setTimeout(() => {
|
||
aiMessage.thinkingText = '分析用户需求：设计复古风格沙发，强调流畅线条和雕塑轮廓。'
|
||
}, 1000)
|
||
|
||
setTimeout(() => {
|
||
aiMessage.thinkingText += '\n考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素。'
|
||
}, 2000)
|
||
|
||
setTimeout(() => {
|
||
aiMessage.thinkingText += '\n生成设计草图...'
|
||
aiMessage.thinking = false
|
||
aiMessage.streaming = true
|
||
|
||
// Simulate streaming response
|
||
const response = '根据您的描述，我为您设计了一个复古风格的沙发。这个沙发采用黄色皮革材质，线条流畅，轮廓雕塑感强。整体造型优雅，结合了现代舒适与复古美学。'
|
||
let index = 0
|
||
const interval = setInterval(() => {
|
||
if (index < response.length) {
|
||
aiMessage.text += response[index]
|
||
index++
|
||
} else {
|
||
clearInterval(interval)
|
||
aiMessage.streaming = false
|
||
}
|
||
}, 50)
|
||
}, 3000)
|
||
}, 1000)
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.c-svg {
|
||
width: initial;
|
||
}
|
||
.agent-container {
|
||
// width: 39%;
|
||
width: 63.4rem;
|
||
background-color: #fff;
|
||
border-radius: 2rem;
|
||
box-shadow: 0px 15px 21px 0px #0000000d;
|
||
|
||
.agent-header {
|
||
height: 7.4rem;
|
||
border-bottom: 0.1rem solid #c9c9c9;
|
||
font-family: 'GeneralMedium';
|
||
padding: 1.4rem 3.4rem 1.4rem 3.1rem;
|
||
|
||
.agent-title {
|
||
font-size: 1.8rem;
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
|
||
.agent-name {
|
||
font-size: 1.4rem;
|
||
}
|
||
}
|
||
.agent-body {
|
||
padding: 3.2rem;
|
||
.assist-input-wrapper {
|
||
width: 100%;
|
||
height: 14.4rem;
|
||
min-height: 14.4rem !important;
|
||
max-height: 14.4rem !important;
|
||
}
|
||
}
|
||
.input-wrapper {
|
||
height: 14.4rem;
|
||
padding: 0 2rem 3rem;
|
||
}
|
||
}
|
||
</style>
|