|
|
@@ -1,4 +1,5 @@
|
|
|
<template>
|
|
|
+ <page-meta root-font-size="system" />
|
|
|
<view class="container">
|
|
|
<scroll-view class="chat-messages" scroll-y="true" :scroll-with-animation="true"
|
|
|
:scroll-into-view="scrollToView"
|
|
|
@@ -9,11 +10,17 @@
|
|
|
<text :user-select="true" :selectable="true">{{ message.content }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 加载中 -->
|
|
|
+ <view style="clear: both;" v-if="loadingButton">
|
|
|
+ <view class="message ai-message">
|
|
|
+ <button :loading="true" class="loading_button" type="default"></button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</scroll-view>
|
|
|
<view class="chat-input">
|
|
|
<textarea @linechange="chatMsgMaxHeightChange" auto-height v-model="inputMessage" placeholder="输入消息..."
|
|
|
class="input-field" />
|
|
|
- <button class="send-button" :disabled="!button_state" @click="sendMessage">发送</button>
|
|
|
+ <button class="send-button" :disabled="!buttonState" @click="sendMessage">发送</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="fab_button">
|
|
|
@@ -26,41 +33,45 @@
|
|
|
<uni-drawer ref="showLeftDrawer" :width="220">
|
|
|
<view>
|
|
|
<scroll-view scroll-y="true" :style="{height: '100vh'}">
|
|
|
- <uni-list>
|
|
|
- <uni-list-item title="新建会话" :clickable="true" @click="createSession()">
|
|
|
- <template v-slot:footer>
|
|
|
- <uni-icons type="plus-filled" size="24"></uni-icons>
|
|
|
- </template>
|
|
|
- </uni-list-item>
|
|
|
- <view v-for="(session,index) in sessionList" :key="index">
|
|
|
- <uni-list-item :title="session.sessionName" :clickable="true"
|
|
|
- @click="changeSession(session.sessionId)" :ellipsis="2">
|
|
|
+ <view class="list_container">
|
|
|
+ <uni-list>
|
|
|
+ <uni-list-item title="新建会话" :clickable="true" @click="createSession()">
|
|
|
<template v-slot:footer>
|
|
|
- <uni-icons type="compose" size="24"
|
|
|
- @click.stop.prevent="toEditSession(session)"></uni-icons>
|
|
|
+ <uni-icons type="plus-filled" size="24"></uni-icons>
|
|
|
</template>
|
|
|
</uni-list-item>
|
|
|
- </view>
|
|
|
- </uni-list>
|
|
|
+ <view v-for="(session,index) in sessionList" :key="index">
|
|
|
+ <uni-list-item :title="session.sessionName" :clickable="true"
|
|
|
+ @click="changeSession(session.sessionId)" :ellipsis="2">
|
|
|
+ <template v-slot:footer>
|
|
|
+ <uni-icons type="compose" size="24"
|
|
|
+ @click.stop.prevent="toEditSession(session)"></uni-icons>
|
|
|
+ </template>
|
|
|
+ </uni-list-item>
|
|
|
+ </view>
|
|
|
+ </uni-list>
|
|
|
+ </view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
</uni-drawer>
|
|
|
</view>
|
|
|
<view class="edit_popup">
|
|
|
<uni-popup ref="editPopup" type="center" :mask-click="true">
|
|
|
- <uni-card title="编辑会话信息">
|
|
|
- <uni-forms ref="editForm" :modelValue="editSession" :rules="rules">
|
|
|
- <uni-forms-item label="会话名" name="sessionName">
|
|
|
- <uni-easyinput type="text" v-model="editSession.sessionName" placeholder="请输入会话名" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item>
|
|
|
- <button type="primary" :disabled="!editButtonState" @click="submitEditSession()">确认</button>
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item>
|
|
|
- <button type="warn" :disabled="!editButtonState" @click="deleteSession()">删除</button>
|
|
|
- </uni-forms-item>
|
|
|
- </uni-forms>
|
|
|
- </uni-card>
|
|
|
+ <view class="edit_session_container">
|
|
|
+ <uni-card title="编辑会话信息">
|
|
|
+ <uni-forms ref="editForm" :modelValue="editSession" :rules="rules">
|
|
|
+ <uni-forms-item label="会话名" name="sessionName">
|
|
|
+ <uni-easyinput type="textarea" v-model="editSession.sessionName" placeholder="请输入会话名" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item>
|
|
|
+ <button type="primary" :disabled="!editButtonState" @click="submitEditSession()">确认</button>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item>
|
|
|
+ <button type="warn" :disabled="!editButtonState" @click="deleteSession()">删除</button>
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-forms>
|
|
|
+ </uni-card>
|
|
|
+ </view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -162,26 +173,29 @@ function initHistoryMessage(sessionId) {
|
|
|
content: item.receiveContent
|
|
|
})
|
|
|
}
|
|
|
+ scrollToBottom(); // 滚动到底部
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const thisSessionId = ref(0);
|
|
|
const inputMessage = ref('');
|
|
|
const scrollToView = ref('');// 滚动到特定消息的标识
|
|
|
- const button_state = ref(true)
|
|
|
+ const buttonState = ref(true)
|
|
|
+ const loadingButton = ref(false)
|
|
|
|
|
|
// 发送消息函数
|
|
|
function sendMessage() {
|
|
|
- button_state.value = false
|
|
|
+ buttonState.value = false
|
|
|
if (inputMessage.value.trim() === '') {
|
|
|
- button_state.value = true
|
|
|
+ buttonState.value = true
|
|
|
return;
|
|
|
}
|
|
|
messages.push({
|
|
|
sender: 'user',
|
|
|
content: inputMessage.value
|
|
|
});
|
|
|
-
|
|
|
+ loadingButton.value = true
|
|
|
+ scrollToBottom(); // 滚动到底部
|
|
|
const message = {
|
|
|
sessionId: thisSessionId.value,
|
|
|
prompt: inputMessage.value,
|
|
|
@@ -200,8 +214,9 @@ function initHistoryMessage(sessionId) {
|
|
|
initHistorySession()
|
|
|
}
|
|
|
inputMessage.value = ''; // 清空输入框
|
|
|
+ loadingButton.value = false
|
|
|
if (thisSessionId.value != returnParams.sessionId) {
|
|
|
- button_state.value = true;
|
|
|
+ buttonState.value = true;
|
|
|
return
|
|
|
}
|
|
|
let content = ""
|
|
|
@@ -210,7 +225,6 @@ function initHistoryMessage(sessionId) {
|
|
|
sender: 'assistant',
|
|
|
content: content
|
|
|
});
|
|
|
- scrollToBottom(); // 滚动到底部
|
|
|
let i = 0
|
|
|
const charLength = 3 // 每次显示字数
|
|
|
const messageLength = returnParams.receiveContent.length
|
|
|
@@ -221,7 +235,7 @@ function initHistoryMessage(sessionId) {
|
|
|
i += charLength;
|
|
|
} else {
|
|
|
clearInterval(interval);
|
|
|
- button_state.value = true;
|
|
|
+ buttonState.value = true;
|
|
|
}
|
|
|
}, 50); // 50ms 一次
|
|
|
})
|
|
|
@@ -272,6 +286,13 @@ function initHistoryMessage(sessionId) {
|
|
|
word-wrap: break-word;
|
|
|
}
|
|
|
|
|
|
+.loading_button {
|
|
|
+ background-color: #ECECEC !important;
|
|
|
+}
|
|
|
+.loading_button::after {
|
|
|
+ border: 0px;
|
|
|
+}
|
|
|
+
|
|
|
.user-message {
|
|
|
background-color: #DCF8C6;
|
|
|
align-self: flex-end;
|
|
|
@@ -316,6 +337,53 @@ function initHistoryMessage(sessionId) {
|
|
|
.uni-fab__circle {
|
|
|
bottom: 100px !important;
|
|
|
}
|
|
|
+ .uni-fab__circle {
|
|
|
+ width: calc(55px + .5*(1rem - 16px)) !important;
|
|
|
+ height: calc(55px + .5*(1rem - 16px)) !important;
|
|
|
+
|
|
|
+ .uni-icons {
|
|
|
+ font-size: calc(32px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .drawer_container {
|
|
|
+ ::v-deep .list_container {
|
|
|
+ .uni-list-item__content {
|
|
|
+ .uni-list-item__content-title {
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .uni-icons {
|
|
|
+ font-size: calc(24px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .edit_popup {
|
|
|
+ ::v-deep .edit_session_container {
|
|
|
+ .uni-card__header {
|
|
|
+ .uni-card__header-content-title {
|
|
|
+ font-size: calc(15px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .uni-card__content {
|
|
|
+ .uni-forms-item {
|
|
|
+ .uni-forms-item__label {
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+ .uni-forms-item__content {
|
|
|
+ .uni-easyinput {
|
|
|
+ .uni-easyinput__content-textarea {
|
|
|
+ font-size: calc(14px + .5*(1rem - 16px)) !important;
|
|
|
+ min-width: 200px;
|
|
|
+ }
|
|
|
+ .uni-icons {
|
|
|
+ font-size: calc(24px + .5*(1rem - 16px)) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|