166 lines
3.6 KiB
Vue
166 lines
3.6 KiB
Vue
<template>
|
|
<div class="assistant-container flex flex-col space-between" ref="containerRef">
|
|
<div class="assistant-header flex space-between align-center" @mousedown="handleMouseDown">
|
|
<div class="assistant-header-title">AI Assistant</div>
|
|
<SvgIcon name="canvas-assistant-menu" class="menu-icon" color="#D58C4D" />
|
|
</div>
|
|
<div class="assistant-body flex-1">
|
|
<List :messageList="messageList" />
|
|
</div>
|
|
<div class="assistant-input flex align-center">
|
|
<el-input v-model="inputMessage" :placeholder="$t('assistant.inputPlaceholder')" />
|
|
<div class="sender-btn flex flex-center" @click="handleSendAgent">
|
|
<img src="@/assets/images/sender.png" class="sender-icon" />
|
|
<!-- <div class="sender-pause" /> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import List from './component/List.vue'
|
|
import { useDraggable } from './component/useDraggable'
|
|
|
|
const inputMessage = ref('')
|
|
const containerRef = ref<HTMLElement>()
|
|
|
|
// 使用拖拽 hook
|
|
const { handleMouseDown } = useDraggable(containerRef)
|
|
|
|
const messageList = ref([
|
|
{
|
|
content: 'Hi! How can I help you, today?',
|
|
id: 1,
|
|
role: 'assistant'
|
|
},
|
|
{
|
|
content: 'Please recommend some .',
|
|
id: 2,
|
|
role: 'user'
|
|
},
|
|
{
|
|
content: 'I noticed that you inputed a new sketch.',
|
|
id: 3,
|
|
role: 'system',
|
|
type: 'info'
|
|
},
|
|
{
|
|
content: 'Hi! How can I help you, today?',
|
|
id: 4,
|
|
role: 'assistant'
|
|
},
|
|
{
|
|
content: 'Please recommend some .',
|
|
id: 5,
|
|
role: 'user'
|
|
},
|
|
{
|
|
content: 'I noticed that you inputed a new sketch.',
|
|
id: 36,
|
|
role: 'system',
|
|
type: 'info'
|
|
},
|
|
{
|
|
content: 'Hi! How can I help you, today?',
|
|
id: 31,
|
|
role: 'assistant'
|
|
},
|
|
{
|
|
content: 'Please recommend some .',
|
|
id: 22,
|
|
role: 'user'
|
|
},
|
|
{
|
|
content: 'I noticed that you inputed a new sketch.',
|
|
id: 63,
|
|
role: 'system',
|
|
type: 'info'
|
|
}
|
|
])
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.assistant-container {
|
|
position: absolute;
|
|
right: 6.2rem;
|
|
bottom: 13.2rem;
|
|
width: 46.69rem;
|
|
height: 56.6rem;
|
|
flex-shrink: 0;
|
|
// background-color: #fff;
|
|
box-shadow: 0px 19.44px 27.22px 0px #0000000d;
|
|
border: 1px solid;
|
|
border-image-source: linear-gradient(
|
|
119.03deg,
|
|
rgba(233, 121, 60, 0.3) 1.61%,
|
|
rgba(255, 207, 144, 0.3) 101.01%
|
|
);
|
|
border-radius: 1.69rem;
|
|
.assistant-header {
|
|
height: 5.66rem;
|
|
font-family: 'Regular';
|
|
font-size: 1.6rem;
|
|
padding: 0 1.59rem 0 2.05rem;
|
|
background: linear-gradient(
|
|
119.03deg,
|
|
rgba(233, 121, 60, 0.3) 1.61%,
|
|
rgba(255, 207, 144, 0.3) 101.01%
|
|
);
|
|
border-top-left-radius: 1.69rem;
|
|
border-top-right-radius: 1.69rem;
|
|
user-select: none;
|
|
cursor: grabbing;
|
|
&:active {
|
|
cursor: grabbing;
|
|
}
|
|
.menu-icon {
|
|
width: 1.8rem;
|
|
}
|
|
}
|
|
.assistant-body {
|
|
margin: 1.6rem 0 2.9rem;
|
|
padding: 0 1.95rem 0 2.5rem;
|
|
overflow-y: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
display: none;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
display: none;
|
|
}
|
|
}
|
|
.assistant-input {
|
|
border: 1px solid #0000001a;
|
|
margin: 0 2rem 3rem;
|
|
border-radius: 3.53rem;
|
|
padding: 0 1rem 0 1.7rem;
|
|
.el-input {
|
|
:deep(.el-input__wrapper) {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
}
|
|
}
|
|
.sender-btn {
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
cursor: pointer;
|
|
background-color: #000;
|
|
border-radius: 50%;
|
|
|
|
.sender-icon {
|
|
width: 0.9rem;
|
|
height: 0.9rem;
|
|
}
|
|
.sender-pause {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|