![ChatGPT]()
@@ -69,42 +16,48 @@
AI 思考中
-
-
{{ dateFormat(data.created_at) }}
-
-
+
+ {{ dateFormat(data.created_at) }}
+
+
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
@@ -118,7 +71,7 @@
import { useSharedStore } from '@/store/sharedata'
import { httpPost } from '@/utils/http'
import { dateFormat, processContent } from '@/utils/libs'
-import { DocumentCopy, Refresh } from '@element-plus/icons-vue'
+import { DocumentCopy } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import hl from 'highlight.js'
import MarkdownIt from 'markdown-it'
@@ -141,13 +94,9 @@ const props = defineProps({
tokens: 0,
},
},
- readOnly: {
- type: Boolean,
- default: false,
- },
- listStyle: {
- type: String,
- default: 'list',
+ messageIndex: {
+ type: Number,
+ default: -1,
},
})
@@ -232,8 +181,8 @@ const stopSynthesis = () => {
}
// 重新生成
-const reGenerate = (messageId) => {
- emits('regen', messageId)
+const reGenerate = () => {
+ emits('regen', props.messageIndex)
}
// 添加代码块展开/收起功能
@@ -322,227 +271,6 @@ const setupCodeBlockEvents = () => {
sans-serif;
font-family: var(--font-family);
- .chat-line {
- .boxed {
- border: 1px solid var(--el-border-color);
- border-radius: 5px;
- padding: 0 5px;
- }
- .chat-item {
- .content-wrapper {
- img {
- max-width: 600px;
- border-radius: 10px;
- }
-
- p {
- line-height: 1.5;
-
- code {
- color: var(--theme-text-color-primary);
- font-weight: 600;
- }
- }
-
- p:last-child {
- margin-bottom: 0;
- }
-
- p:first-child {
- margin-top: 0;
- }
-
- .code-container {
- background-color: #2b2b2b;
- border-radius: 10px;
- position: relative;
-
- .hljs {
- border-radius: 10px;
- width: 100%;
- }
-
- .copy-code-btn {
- cursor: pointer;
- font-size: 12px;
- color: #c1c1c1;
-
- &:hover {
- color: #20a0ff;
- }
- }
- }
-
- // 添加代码块展开/收起样式
- .code-collapsed {
- .hljs {
- max-height: 200px;
- overflow: hidden;
- position: relative;
- transition: max-height 0.3s ease;
-
- &::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- height: 30px;
- background: linear-gradient(transparent, #2b2b2b);
- pointer-events: none;
- }
- }
- }
-
- .code-expanded {
- .hljs {
- max-height: none;
- overflow: auto;
- transition: max-height 0.3s ease;
-
- &::after {
- display: none;
- }
- }
- }
-
- .expand-btn {
- transition: color 0.2s ease;
-
- &:hover {
- color: #20a0ff !important;
- }
- }
-
- .lang-name {
- color: #00e0e0;
- }
-
- // 设置表格边框
-
- table {
- width: 100%;
- margin-bottom: 1rem;
- border-collapse: collapse;
- border: 1px solid #dee2e6;
- background-color: var(--chat-content-bg);
- color: var(--theme-text-color-primary);
-
- thead {
- th {
- border: 1px solid #dee2e6;
- vertical-align: bottom;
- border-bottom: 2px solid #dee2e6;
- padding: 10px;
- }
- }
-
- td {
- border: 1px solid #dee2e6;
- padding: 10px;
- }
- }
-
- // 代码快
-
- blockquote {
- margin: 0 0 0.8rem 0;
- background-color: var(--quote-bg-color);
- padding: 0.8rem 1.5rem;
- color: var(--quote-text-color);
- border-left: 0.4rem solid #6b50e1; /* 紫色边框 */
- font-size: 16px;
- line-height: 1.6;
- }
- }
- }
- }
-
- .chat-line-reply-list {
- justify-content: center;
- background-color: var(--chat-content-bg);
- color: var(--theme-text-color-primary);
- width: 100%;
- padding-bottom: 1.5rem;
- padding-top: 1.5rem;
- border: 1px solid var(--el-border-color);
- border-radius: 10px;
-
- .chat-line-inner {
- display: flex;
- width: 100%;
- max-width: 900px;
- padding-left: 10px;
-
- .chat-icon {
- margin-right: 20px;
-
- img {
- width: 36px;
- height: 36px;
- border-radius: 50%;
- padding: 1px;
- }
- }
-
- .chat-item {
- width: 100%;
- position: relative;
- padding: 0;
- overflow: hidden;
-
- .content-wrapper {
- min-height: 20px;
- word-break: break-word;
- padding: 0;
- color: var(--theme-text-color-primary);
- font-size: var(--content-font-size);
- border-radius: 5px;
- overflow: auto;
- }
-
- .bar {
- padding: 10px 10px 10px 0;
-
- .bar-item {
- margin-right: 10px;
- border-radius: 5px;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 26px;
-
- .voice-icon {
- width: 20px;
- height: 20px;
- }
-
- .el-icon {
- position: relative;
- top: 2px;
- cursor: pointer;
- }
- }
-
- .el-button {
- height: 20px;
- padding: 5px 2px;
- }
- }
- }
-
- .tool-box {
- font-size: 16px;
-
- .el-button {
- height: 20px;
- padding: 5px 2px;
- }
- }
- }
- }
-
.chat-line-reply-chat {
justify-content: center;
padding: 1.5rem;
@@ -584,42 +312,15 @@ const setupCodeBlockEvents = () => {
background-color: var(--chat-content-bg);
border-radius: 0 10px 10px 10px;
width: 100%;
- }
- }
- .bar {
- padding: 10px 10px 10px 0;
- display: flex;
-
- .bar-item {
- margin-right: 10px;
- border-radius: 5px;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 26px;
-
- .voice-icon {
- width: 20px;
- height: 20px;
+ p:first-child {
+ margin-top: 0;
}
- .el-icon {
- position: relative;
- top: 2px;
- cursor: pointer;
+ p:last-child {
+ margin-bottom: 0;
}
}
-
- .bar-item.bg {
- // background-color var( --gray-btn-bg)
- cursor: pointer;
- }
-
- .el-button {
- height: 20px;
- padding: 5px 2px;
- }
}
}
diff --git a/web/src/components/ChatReplyLine.vue b/web/src/components/ChatReplyLine.vue
new file mode 100644
index 00000000..854b0ece
--- /dev/null
+++ b/web/src/components/ChatReplyLine.vue
@@ -0,0 +1,450 @@
+
+
+
+
+
+
![ChatGPT]()
+
+
+
+
+
+ AI 思考中
+
+
+
+ {{ dateFormat(data.created_at) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/components/ChatSetting.vue b/web/src/components/ChatSetting.vue
index 3c24a4d5..59d3a3c6 100644
--- a/web/src/components/ChatSetting.vue
+++ b/web/src/components/ChatSetting.vue
@@ -8,21 +8,8 @@
title="聊天配置"
>
-
-
- {
- store.setChatListStyle(val)
- }
- "
- >
- 列表样式
- 对话样式
-
-
-
+
+
-
+
{{ v.name }}
@@ -51,7 +38,6 @@ import { computed, onMounted, ref } from 'vue'
const store = useSharedStore()
const data = ref({
- style: store.chatListStyle,
stream: store.chatStream,
ttsModel: store.ttsModel,
})
diff --git a/web/src/components/FileUpload.vue b/web/src/components/FileUpload.vue
new file mode 100644
index 00000000..ba360be2
--- /dev/null
+++ b/web/src/components/FileUpload.vue
@@ -0,0 +1,469 @@
+
+
+
+
+
+
+
+
![]()
+
+
+ {{ fileList[0].name }}
+
+
+ {{ GetFileType(getFileExt(fileList[0].name)) }} ·
+ {{ FormatFileSize(fileList[0].size || 0) }}
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
+
{{
+ file.name
+ }}
+
+ {{ GetFileType(getFileExt(file.name)) }} · {{ FormatFileSize(file.size || 0) }}
+
+
+
+
+
+
+
+
+
+
+
+ 拖拽文件到此处,或 点击上传
+
+
+ 支持 {{ accept }} 格式,最多上传 {{ maxCount }} 个,单个最大 {{ maxSize }}MB
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/components/FooterBar.vue b/web/src/components/FooterBar.vue
index 69bd2ed1..4c2255ec 100644
--- a/web/src/components/FooterBar.vue
+++ b/web/src/components/FooterBar.vue
@@ -2,10 +2,10 @@