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