Add File
This commit is contained in:
231
frontend/src/views/embedded/AssistantPreview.vue
Normal file
231
frontend/src/views/embedded/AssistantPreview.vue
Normal file
@@ -0,0 +1,231 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import icon_sidebar_outlined from '@/assets/embedded/icon_sidebar_outlined_nofill.svg'
|
||||||
|
import icon_new_chat_outlined from '@/assets/svg/icon_new_chat_outlined.svg'
|
||||||
|
import LOGO from '@/assets/svg/logo-custom_small.svg'
|
||||||
|
import disable_answer from '@/assets/embedded/disable.png'
|
||||||
|
import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
|
||||||
|
import icon_magnify_outlined from '@/assets/svg/icon_magnify_outlined.svg'
|
||||||
|
import { propTypes } from '@/utils/propTypes'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
welcomeDesc: propTypes.string.def(''),
|
||||||
|
logo: propTypes.string.def(''),
|
||||||
|
welcome: propTypes.string.def(''),
|
||||||
|
name: propTypes.string.def(''),
|
||||||
|
})
|
||||||
|
const textareaVal = ref('')
|
||||||
|
const basePath = import.meta.env.VITE_API_BASE_URL
|
||||||
|
const baseUrl = basePath + '/system/assistant/picture/'
|
||||||
|
|
||||||
|
const pageLogo = computed(() => {
|
||||||
|
return props.logo.startsWith('blob') ? props.logo : baseUrl + props.logo
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="assistant-window">
|
||||||
|
<div class="header">
|
||||||
|
<el-icon size="20">
|
||||||
|
<icon_sidebar_outlined></icon_sidebar_outlined>
|
||||||
|
</el-icon>
|
||||||
|
<el-icon v-if="!props.logo" class="logo" size="30">
|
||||||
|
<LOGO></LOGO>
|
||||||
|
</el-icon>
|
||||||
|
<img v-else :src="pageLogo" class="logo" width="30px" height="30px" alt="" />
|
||||||
|
<span :title="name" class="title ellipsis">{{ name }}</span>
|
||||||
|
|
||||||
|
<el-tooltip effect="dark" :content="$t('embedded.new_conversation')" placement="top">
|
||||||
|
<el-icon class="new-chat" size="20">
|
||||||
|
<icon_new_chat_outlined></icon_new_chat_outlined>
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
|
||||||
|
<el-icon class="new-chat" style="right: 52px" size="20">
|
||||||
|
<icon_magnify_outlined></icon_magnify_outlined>
|
||||||
|
</el-icon>
|
||||||
|
|
||||||
|
<el-icon class="new-chat" style="right: 16px" size="20">
|
||||||
|
<icon_close_outlined></icon_close_outlined>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="center">
|
||||||
|
<el-icon v-if="!props.logo" class="logo" size="30">
|
||||||
|
<LOGO></LOGO>
|
||||||
|
</el-icon>
|
||||||
|
<img v-else :src="pageLogo" class="logo" width="30px" height="30px" alt="" />
|
||||||
|
<div class="i-am">{{ welcome }}</div>
|
||||||
|
<div class="i-can">{{ welcomeDesc }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="textarea-send">
|
||||||
|
<el-input
|
||||||
|
v-model="textareaVal"
|
||||||
|
:autosize="{ minRows: 1, maxRows: 8.5848 }"
|
||||||
|
type="textarea"
|
||||||
|
clearable
|
||||||
|
:placeholder="$t('embedded.enter_a_question')"
|
||||||
|
/>
|
||||||
|
<el-tooltip :offset="10" effect="dark" :content="$t('embedded.send')" placement="top">
|
||||||
|
<img :src="disable_answer" width="32px" height="32px" alt="" />
|
||||||
|
</el-tooltip>
|
||||||
|
|
||||||
|
<!-- <el-tooltip
|
||||||
|
:offset="10"
|
||||||
|
effect="dark"
|
||||||
|
:content="$t('embedded.stop_replying')"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<img :src="answer" width="32px" height="32px" alt="" />
|
||||||
|
</el-tooltip>
|
||||||
|
|
||||||
|
<img :src="loading_answer" width="32px" height="32px" alt="" />
|
||||||
|
<img :src="send_answer" width="32px" height="32px" alt="" /> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="drawer-assistant"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.assistant-window {
|
||||||
|
width: 460px;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid #dee0e3;
|
||||||
|
box-shadow: 0px 6px 24px 0px #1f232914;
|
||||||
|
background-color: #fff;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
.header {
|
||||||
|
background: var(--ed-color-primary-1a, #1cba901a);
|
||||||
|
height: 56px;
|
||||||
|
padding: 0 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
color: var(--ed-text-color-primary);
|
||||||
|
.logo {
|
||||||
|
margin: 0 8px 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: var(--ed-text-color-primary);
|
||||||
|
width: 242px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ed-icon:not(.logo) {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
background-color: #1f23291a;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 6px;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-chat {
|
||||||
|
position: absolute;
|
||||||
|
right: 88px;
|
||||||
|
top: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.i-am {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 16px 0;
|
||||||
|
max-width: 100%;
|
||||||
|
word-break: break-all;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.i-can {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
max-width: 350px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #646a73;
|
||||||
|
max-width: 88%;
|
||||||
|
word-break: break-all;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
|
||||||
|
.textarea-send {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
.ed-textarea {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ed-textarea__inner) {
|
||||||
|
padding: 12px 12px 52px 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
border-radius: 16px;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #8f959e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
right: 12px;
|
||||||
|
bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
bottom: 16px;
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-assistant {
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 50%;
|
||||||
|
background: #f5f6f7;
|
||||||
|
box-shadow: 0px 6px 24px 0px #1f232914;
|
||||||
|
padding: 16px;
|
||||||
|
border-right: 1px solid #dee0e3;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user