<template>
|
<div class="chat-box">
|
<div class="chat-box-left">
|
<img class="logo" src="../../assets/images/home/zylogo.png" alt="">
|
<div class="new-chat">
|
<el-icon>
|
<Plus />
|
</el-icon>
|
<div>New conversation</div>
|
</div>
|
<div class="chat-list" v-for="(item, index) in pageData.historylist">
|
<div :title="item.content" @click="goAi(item)">{{ item.content }}</div>
|
</div>
|
</div>
|
<div class="chat-box-right">
|
<div class="main-title">
|
Hello,l am <img src="../../assets/images/home/AI_logo.png" alt=""> Al Assistant
|
</div>
|
<div class="main-introduce">
|
Ask anything about molecular structures, properties, or potential targets. Get instant AI-powered
|
insights<br /> from our curated small molecule library.
|
</div>
|
<!-- 输入框 -->
|
<div class="chat-footer">
|
<!-- 输入框 -->
|
<div class="chat-text">
|
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3 }" placeholder=""
|
v-model="pageData.inputValue" @keyup.enter="handleEnter($event)" />
|
</div>
|
<!-- 功能选择区域 -->
|
<div class="select">
|
<div class="select-right">
|
<div class="select-item">
|
<img @click="sendMsg()" :src="currentImage" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="main-footer">
|
Information displayed here is AI model generated and should not be considered as legal, finance or
|
investment advice. You should always seek advice from a qualified <br />professional. Request
|
consultation.
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { reactive, computed } from 'vue'
|
import type { ai } from '@/types/ai'
|
import current from '@/assets/images/ai/current.png'
|
import noCurrent from '@/assets/images/ai/noCurrent.png'
|
import { pathData } from '@/assets/js/config'
|
import router from '@/router'
|
const pageData = reactive<ai>({
|
historylist: [
|
{
|
content: "What is the quarterly water bill?",
|
},
|
{
|
content: "How much are the council rates per quarter?",
|
},
|
{
|
content: "What are the quarterly strata fees?",
|
},
|
{
|
content: "What are the quarterly strata fees?",
|
},
|
],
|
inputValue: ""
|
})
|
|
const currentImage = computed(() => {
|
return pageData.inputValue.trim() === '' ? noCurrent : current;
|
});
|
|
const goAi = (e: any) => {
|
pageData.inputValue = e.content;
|
};
|
|
const handleEnter = (event: any) => {
|
event.preventDefault()
|
pageData.inputValue = pageData.inputValue.replace(/\n/g, '')
|
// 调用发送消息的方法
|
sendMsg()
|
}
|
const sendMsg = () => {
|
const query = { searchText: pageData.inputValue };
|
router.push({ path: pathData.aiDetails, query })
|
|
};
|
|
|
|
|
|
</script>
|
|
<style lang="less" scoped>
|
.chat-box {
|
display: flex;
|
height: 100%;
|
width: 100%;
|
|
}
|
|
.chat-box-left {
|
width: 14%;
|
border-right: 1px solid #F0F0F0;
|
padding: 13px 17px;
|
|
.logo {
|
width: 100%;
|
}
|
|
.new-chat {
|
height: 34px;
|
background: linear-gradient(90deg, #006CB6 0%, #01644C 100%);
|
border-radius: 30px 30px 30px 30px;
|
margin-top: 45px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #fff;
|
cursor: pointer;
|
|
div {
|
margin-left: 5px;
|
font-weight: 400;
|
font-size: 12px;
|
}
|
}
|
|
.chat-list {
|
width: 100%;
|
margin-top: 28px;
|
|
div {
|
line-height: 1.5em;
|
cursor: pointer;
|
width: 100%;
|
margin-top: 20px;
|
overflow: hidden;
|
text-wrap: nowrap;
|
}
|
}
|
}
|
|
.chat-box-right {
|
width: 86%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.main-title {
|
display: flex;
|
align-items: center;
|
font-weight: 500;
|
font-size: 22px;
|
color: #000000;
|
line-height: 40px;
|
|
img {
|
margin: 0 5px;
|
height: 48px;
|
}
|
}
|
|
.main-introduce {
|
text-align: center;
|
margin: 10px 0 48px 0;
|
font-weight: 400;
|
font-size: 12px;
|
color: #BABABA;
|
line-height: 1.4em;
|
}
|
|
.chat-footer {
|
width: 62%;
|
min-width: 800px;
|
border-radius: 8px 8px 8px 8px;
|
border: 1px solid #E8E8E8;
|
padding: 9px 13px;
|
box-sizing: border-box;
|
margin-bottom: 10px;
|
}
|
|
::v-deep(.chat-text) {
|
// height: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 10px;
|
|
.el-textarea__inner {
|
overflow: auto;
|
height: 100% !important;
|
border: none !important;
|
outline: none !important;
|
box-shadow: none !important;
|
background-color: transparent !important;
|
resize: none !important;
|
}
|
|
img {
|
cursor: pointer;
|
min-height: 25px;
|
}
|
}
|
|
.select {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.select-left,
|
.select-right {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
|
.upload-demo {
|
height: 24px;
|
}
|
|
svg {
|
cursor: pointer;
|
}
|
|
.select-item {
|
display: flex;
|
align-items: center;
|
padding: 2px 10px;
|
box-sizing: border-box;
|
border: 1px solid #e9d8bf;
|
border-radius: 15px;
|
|
font-size: 14px;
|
font-family:
|
Microsoft YaHei,
|
Microsoft YaHei-Regular;
|
font-weight: 400;
|
color: #e1c49a;
|
|
img {
|
height: 34px;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.select-right {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
|
.select-item {
|
border: 0;
|
}
|
}
|
}
|
|
.main-footer {
|
text-align: center;
|
font-weight: 400;
|
font-size: 12px;
|
color: #BABABA;
|
line-height: 1.4em;
|
}
|
|
}
|
</style>
|
