76 lines
1.5 KiB
Vue
76 lines
1.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 />
|
||
|
|
<Input :is-agent-mode="true" @send="handleSendMessage" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import List from './List.vue'
|
||
|
|
import Input from '../../components/Input.vue'
|
||
|
|
|
||
|
|
const props = withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
title: string
|
||
|
|
}>(),
|
||
|
|
{
|
||
|
|
title: 'Retro Sofa Sketch'
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
const handleSendMessage = (message: string) => {
|
||
|
|
console.log('Message sent:', message)
|
||
|
|
}
|
||
|
|
</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>
|