xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-12-26 18:15:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat:chat style

Browse Source
This commit is contained in:
lqins
2024-12-11 09:36:12 +08:00
parent 1b7c7a0dc1
commit 710b008453
44 changed files with 2274 additions and 1312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
web/src/components/ChatReply.vue
View File

@@ -2,48 +2,54 @@
<div class="chat-line chat-line-reply-list" v-if="listStyle === 'list'">
<div class="chat-line-inner">
<div class="chat-icon">
<img :src="data.icon" alt="ChatGPT">
<img :src="data.icon" alt="ChatGPT" />
</div>
<div class="chat-item">
<div class="content" v-html="md.render(processContent(data.content))"></div>
<div
class="content"
v-html="md.render(processContent(data.content))"
></div>
<div class="bar" v-if="data.created_at">
<span class="bar-item"><el-icon><Clock/></el-icon> {{ dateFormat(data.created_at) }}</span>
<span class="bar-item">tokens: {{ data.tokens }}</span>
<span class="bar-item"
><el-icon><Clock /></el-icon>
{{ dateFormat(data.created_at) }}</span
>
<span class="bar-item">tokens: {{ data.tokens }}</span>
<span class="bar-item">
<el-tooltip
class="box-item"
effect="dark"
content="复制回答"
placement="bottom"
>
<el-icon class="copy-reply" :data-clipboard-text="data.content">
<DocumentCopy/>
</el-icon>
</el-tooltip>
</span>
<el-tooltip
class="box-item"
effect="dark"
content="复制回答"
placement="bottom"
>
<el-icon class="copy-reply" :data-clipboard-text="data.content">
<DocumentCopy />
</el-icon>
</el-tooltip>
</span>
<span v-if="!readOnly">
<span class="bar-item" @click="reGenerate(data.prompt)">
<el-tooltip
<el-tooltip
class="box-item"
effect="dark"
content="重新生成"
placement="bottom"
>
<el-icon><Refresh/></el-icon>
</el-tooltip>
</span>
>
<el-icon><Refresh /></el-icon>
</el-tooltip>
</span>
<span class="bar-item" @click="synthesis(data.content)">
<el-tooltip
<span class="bar-item" @click="synthesis(data.content)">
<el-tooltip
class="box-item"
effect="dark"
content="生成语音朗读"
placement="bottom"
>
<i class="iconfont icon-speaker"></i>
</el-tooltip>
</span>
>
<i class="iconfont icon-speaker"></i>
</el-tooltip>
</span>
</span>
<!-- <span class="bar-item">-->
<!-- <el-dropdown trigger="click">-->
@@ -65,49 +71,55 @@
<div class="chat-line chat-line-reply-chat" v-else>
<div class="chat-line-inner">
<div class="chat-icon">
<img :src="data.icon" alt="ChatGPT">
<img :src="data.icon" alt="ChatGPT" />
</div>
<div class="chat-item">
<div class="content-wrapper">
<div class="content" v-html="md.render(processContent(data.content))"></div>
<div
class="content"
v-html="md.render(processContent(data.content))"
></div>
</div>
<div class="bar" v-if="data.created_at">
<span class="bar-item"><el-icon><Clock/></el-icon> {{ dateFormat(data.created_at) }}</span>
<!-- <span class="bar-item">tokens: {{ data.tokens }}</span>-->
<span class="bar-item"
><el-icon><Clock /></el-icon>
{{ dateFormat(data.created_at) }}</span
>
<!-- <span class="bar-item">tokens: {{ data.tokens }}</span>-->
<span class="bar-item bg">
<el-tooltip
class="box-item"
effect="dark"
content="复制回答"
placement="bottom"
>
<el-icon class="copy-reply" :data-clipboard-text="data.content">
<DocumentCopy/>
</el-icon>
</el-tooltip>
</span>
<el-tooltip
class="box-item"
effect="dark"
content="复制回答"
placement="bottom"
>
<el-icon class="copy-reply" :data-clipboard-text="data.content">
<DocumentCopy />
</el-icon>
</el-tooltip>
</span>
<span v-if="!readOnly">
<span class="bar-item bg" @click="reGenerate(data.prompt)">
<el-tooltip
<el-tooltip
class="box-item"
effect="dark"
content="重新生成"
placement="bottom"
>
<el-icon><Refresh/></el-icon>
</el-tooltip>
</span>
>
<el-icon><Refresh /></el-icon>
</el-tooltip>
</span>
<span class="bar-item bg" @click="synthesis(data.content)">
<el-tooltip
<span class="bar-item bg" @click="synthesis(data.content)">
<el-tooltip
class="box-item"
effect="dark"
content="生成语音朗读"
placement="bottom"
>
<i class="iconfont icon-speaker"></i>
</el-tooltip>
</span>
>
<i class="iconfont icon-speaker"></i>
</el-tooltip>
</span>
</span>
</div>
</div>
@@ -116,9 +128,9 @@
</template>
<script setup>
import {Clock, DocumentCopy, Refresh} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {dateFormat, processContent} from "@/utils/libs";
import { Clock, DocumentCopy, Refresh } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { dateFormat, processContent } from "@/utils/libs";
import hl from "highlight.js";
// eslint-disable-next-line no-undef,no-unused-vars
const props = defineProps({
@@ -128,8 +140,8 @@ const props = defineProps({
icon: "",
content: "",
created_at: "",
tokens: 0,
},
tokens: 0
}
},
readOnly: {
type: Boolean,
@@ -137,53 +149,57 @@ const props = defineProps({
},
listStyle: {
type: String,
default: 'list',
},
})
default: "list"
}
});
const mathjaxPlugin = require('markdown-it-mathjax3')
const md = require('markdown-it')({
const mathjaxPlugin = require("markdown-it-mathjax3");
const md = require("markdown-it")({
breaks: true,
html: true,
linkify: true,
typographer: true,
highlight: function (str, lang) {
const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
const codeIndex =
parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
// 显示复制代码按钮
const copyBtn = `<span class="copy-code-btn" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(/<\/textarea>/g, '&lt;/textarea>')}</textarea>`
<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
/<\/textarea>/g,
"&lt;/textarea>"
)}</textarea>`;
if (lang && hl.getLanguage(lang)) {
const langHtml = `<span class="lang-name">${lang}</span>`
const langHtml = `<span class="lang-name">${lang}</span>`;
// 处理代码高亮
const preCode = hl.highlight(lang, str, true).value
const preCode = hl.highlight(lang, str, true).value;
// 将代码包裹在 pre 中
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`;
}
// 处理代码高亮
const preCode = md.utils.escapeHtml(str)
const preCode = md.utils.escapeHtml(str);
// 将代码包裹在 pre 中
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`;
}
});
md.use(mathjaxPlugin)
md.use(mathjaxPlugin);
const emits = defineEmits(['regen']);
const emits = defineEmits(["regen"]);
if (!props.data.icon) {
props.data.icon = "images/gpt-icon.png"
props.data.icon = "images/gpt-icon.png";
}
const synthesis = (text) => {
console.log(text)
ElMessage.info("语音合成功能暂不可用")
}
console.log(text);
ElMessage.info("语音合成功能暂不可用");
};
// 重新生成
const reGenerate = (prompt) => {
console.log(prompt)
emits('regen', prompt)
}
console.log(prompt);
emits("regen", prompt);
};
</script>
<style lang="stylus">
@@ -191,11 +207,12 @@ const reGenerate = (prompt) => {
.chat-page,.chat-export {
.chat-line-reply-list {
justify-content: center;
background-color: rgba(247, 247, 248, 1);
background-color: var(--chat-list-bg);
color:var(--theme-text-color-primary);
width 100%
padding-bottom: 1.5rem;
padding-top: 1.5rem;
border-bottom: 1px solid #d9d9e3;
border-bottom: 0.5px solid var(--el-border-color);
.chat-line-inner {
display flex;
@@ -209,7 +226,7 @@ const reGenerate = (prompt) => {
img {
width: 36px;
height: 36px;
border-radius: 10px;
border-radius: 50%;
padding: 1px;
}
}
@@ -224,7 +241,7 @@ const reGenerate = (prompt) => {
min-height 20px;
word-break break-word;
padding: 0
color #374151;
color:var(--theme-text-color-primary);
font-size: var(--content-font-size);
border-radius: 5px;
overflow auto;
@@ -238,7 +255,7 @@ const reGenerate = (prompt) => {
line-height 1.5
code {
color #374151
color:var(--theme-text-color-primary);
background-color #e7e7e8
padding 0 3px;
border-radius 5px;
@@ -296,7 +313,8 @@ const reGenerate = (prompt) => {
color #212529
border-collapse collapse;
border 1px solid #dee2e6;
background-color #ffffff
background-color:var(--chat-content-bg);
color:var(--theme-text-color-primary);
thead {
th {
@@ -396,10 +414,13 @@ const reGenerate = (prompt) => {
min-height 20px;
word-break break-word;
padding: 1rem
color #374151;
color var(--theme-text-primary);
font-size: var(--content-font-size);
overflow auto;
background-color #F5F5F5
// background-color #F5F5F5
background-color :var(--chat-content-bg);
border-radius: 0 10px 10px 10px;
img {
@@ -411,7 +432,7 @@ const reGenerate = (prompt) => {
line-height 1.5
code {
color #374151
color:var(--theme-text-color-primary);
background-color #e7e7e8
padding 0 3px;
border-radius 5px;
@@ -469,7 +490,8 @@ const reGenerate = (prompt) => {
color #212529
border-collapse collapse;
border 1px solid #dee2e6;
background-color #ffffff
background-color:var(--chat-content-bg);
color:var(--theme-text-color-primary);
thead {
th {
@@ -541,5 +563,4 @@ const reGenerate = (prompt) => {
}
}
</style>