From d765d3a8c24d9d22115ab2fe33942bcb08676273 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期四, 07 八月 2025 17:03:07 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/molecularDatabase
---
src/views/ai/aiDetails.vue | 454 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 454 insertions(+), 0 deletions(-)
diff --git a/src/views/ai/aiDetails.vue b/src/views/ai/aiDetails.vue
new file mode 100644
index 0000000..9c76460
--- /dev/null
+++ b/src/views/ai/aiDetails.vue
@@ -0,0 +1,454 @@
+<template>
+ <div class="chat-box">
+ <div class="chat-box-left">
+ <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">
+ <Header class="header"></Header>
+ <!-- 鑱婂ぉ妗嗗唴瀹瑰鍣� -->
+ <div class="chat-box-content" ref="messagesContainer">
+ <!-- 褰撳墠鏃堕棿鏄剧ず -->
+ <div class="chat-date">{{ currentTime }}</div>
+ <!-- 搴曢儴淇℃伅灞曠ず -->
+ <div class="chat-back-info">
+ <!-- 澶村儚 -->
+ <div class="back-avator">
+ <img src="../../assets/images/home/AI_logo.png" alt="" />
+ </div>
+ <!-- 鍩虹鍥句功淇℃伅 -->
+ <div class="base-book-box">
+ 鎮ㄥソ锛佹垜鏄偍鐨凙I鏅鸿兘鍔╂墜锛屼笓娉ㄤ簬灏忓垎瀛愮粨鏋勯鍩燂紒鎴戝彲浠ュ府鍔╂偍杞绘澗鑾峰彇涓庡皬鍒嗗瓙缁撴瀯鐩稿叧鐨勪俊鎭�傛偍鍙互杩欐牱闂垜锛氣�淎spirin鏄粈涔堬紵鈥濃�渪x鐨勭墿鐞嗗寲瀛﹀睘鎬ч兘鏄粈涔堬紵鈥濊灏忓垎瀛愮粨鏋勭煡璇嗚Е鎵嬪彲鍙婏紒
+ </div>
+ </div>
+ <!-- 娑堟伅鍒楄〃 -->
+ <div v-for="(item, index) in pageData.message" :key="index" class="chat-box-content-item">
+ <div v-if="item.type === 'user'" class="chat-date">{{ item.time }}</div>
+ <div :class="['message', item.type === 'user' ? 'user-message' : 'assistant-message']">
+ <!-- 鍔╂墜澶村儚 -->
+ <el-avatar class="assistant-avatar" :size="screenWidth > 375 ? 60 : 30"
+ :src="[item.type === 'user' ? userProfilePicture : assistantAvatar]" />
+ <!-- 娑堟伅鍐呭 -->
+ <div :class="['message-content', item.type === 'user' ? 'user-message-content' : '']">
+ <!-- 鐢ㄦ埛娑堟伅 -->
+ <div class="user-message-text" v-if="item.type === 'user'" v-html="item.content"></div>
+ <!-- AI 鍥剧墖娑堟伅 -->
+ <div :class="['message-text', 'requestText' + index].join(' ')"
+ v-if="item.type != 'user' && item.txtType == 'txt'">
+ <p class="message-text-title">
+ AI鏅鸿兘鍔╂墜涓烘偍鎵惧埌浠ヤ笅{{ pageData.inputValue }}鐨勪俊鎭唴瀹瑰涓�:
+ </p>
+ <iframe class="message-text-iframe" ref="iframeRef" v-if="item.iframeSrc != ''"
+ :src="item.iframeSrc" frameborder="0"></iframe>
+ <div v-html="item.content"></div>
+ <p class="message-text-titleOne">浠ヤ笂鍐呭鐢盇I鐢熸垚锛屼粎渚涘弬鑰冦��</p>
+ </div>
+ <!-- AI 鏂囨湰娑堟伅 -->
+ <!-- <div :class="['Ai-message-text', 'requestText' + index].join(' ')"
+ v-if="item.type != 'user' && item.txtType == 'txt'">
+ <div v-html="item.content"></div>
+ </div> -->
+ <!-- 娑堟伅搴曢儴鏃堕棿 -->
+ <div class="message-footer" v-if="item.type != 'user'">
+ <span class="message-time">{{ item.time }}</span>
+ </div>
+ </div>
+ </div>
+ <!-- 鍔犺浇涓姸鎬� -->
+ <div v-if="loading && index == message.length - 1"
+ class="message assistant-message loading-message">
+ <el-avatar class="assistant-avatar" :size="screenWidth > 375 ? 60 : 30"
+ :src="assistantAvatar" />
+ <div :class="['message-content', item.type === 'user' ? 'user-message-content' : '']">
+ <div class="message-text-loading">
+ <span class="dot-loading">鎬濊�冧腑...</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </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 { ref, reactive, computed } from 'vue'
+import type { aiDetails } from '@/types/aiDetails'
+import current from '@/assets/images/ai/current.png'
+import noCurrent from '@/assets/images/ai/noCurrent.png'
+import dayjs from 'dayjs'
+import Header from '@/layout/components/headerPage.vue'
+const pageData = reactive<aiDetails>({
+ 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: "",
+ message: "",
+})
+const currentTime = ref(dayjs(new Date()).format('MM/DD HH:mm:ss'))
+const currentImage = computed(() => {
+ return pageData.inputValue.trim() === '' ? noCurrent : current;
+});
+
+const goAi = (e: any) => {
+ pageData.inputValue = e.content;
+};
+
+
+
+
+
+
+
+</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;
+
+ .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%;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+
+
+ .chat-box-content {
+ width: 100%;
+ height: calc(100vh - 150px);
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ overflow: auto;
+ align-items: flex-start;
+
+ .chat-send {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-end;
+ margin-bottom: 20px;
+
+ .chat-send-info {
+ width: 263px;
+ height: 40px;
+ background: #af8b56;
+ border-radius: 20px;
+ line-height: 40px;
+ padding: 0 20px;
+ color: #fff;
+ }
+
+ .chat-message {
+ width: 263px;
+ height: 40px;
+ background: #fff;
+ border-radius: 20px;
+ line-height: 40px;
+ padding: 0 20px;
+ color: #000;
+ }
+ }
+
+ .chat-date {
+ color: #999;
+ width: 100%;
+ text-align: center;
+ margin-bottom: 30px;
+ margin-top: 30px;
+ }
+
+ .chat-send {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 20px;
+
+ .chat-send-info {
+ width: 263px;
+ height: 40px;
+ background: #af8b56;
+ border-radius: 20px;
+ line-height: 40px;
+ padding: 0 20px;
+ color: #fff;
+ }
+ }
+
+ .chat-back-info {
+ margin-bottom: 20px;
+ display: flex;
+ justify-content: flex-start;
+ // min-height: 90px;
+ padding: 16px;
+
+ .back-avator {
+ margin-right: 10px;
+
+ img {
+ width: 32px;
+ }
+ }
+
+ .base-book-box {
+ display: flex;
+ width: 800px;
+ padding: 20px 47px;
+ box-sizing: border-box;
+ background-color: #f7fffc;
+ border-radius: 20px;
+ }
+ }
+
+ .back-item {
+ width: 349px;
+ height: auto;
+ background: #ffffff;
+ border-radius: 20px;
+ margin-left: 100px;
+ margin-bottom: 20px;
+
+ .back-item-title {
+ width: 80%;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ padding: 0 10px;
+ margin: auto;
+ border-bottom: 1px solid #e9d8bf;
+ }
+
+ .hot-question {
+ cursor: pointer;
+
+ &:hover {
+ color: #d2a25b;
+ }
+ }
+
+ img {
+ margin-right: 10px;
+ }
+
+ ul li {
+ list-style: none;
+ margin: 20px 0 20px 0;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ }
+
+ .chat-change {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0 20px;
+ color: #d2a25b;
+ margin-bottom: 10px;
+ cursor: pointer;
+
+ img {
+ cursor: pointer;
+ }
+ }
+ }
+
+ .chat-box-content-item {
+ width: 100%;
+ }
+ }
+
+ .chat-box-content::-webkit-scrollbar {
+ width: 1px;
+ }
+
+ /* 闅愯棌姘村钩婊氬姩鏉� */
+ .chat-box-content::-webkit-scrollbar {
+ height: 0;
+ }
+
+
+
+
+
+ .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>
--
Gitblit v1.9.1