Skip to content

Commit 9de71d4

Browse files
zhangdaiscottzhangdaiscott
committed
【3.6.3版本发布】ai助手对话组件
1 parent ee7ad58 commit 9de71d4

File tree

16 files changed

+4310
-927
lines changed

16 files changed

+4310
-927
lines changed

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@
4545
"intro.js": "^7.2.0",
4646
"lodash-es": "^4.17.21",
4747
"lodash.get": "^4.4.2",
48+
"markdown-it": "^14.0.0",
49+
"markdown-it-link-attributes": "^4.0.1",
50+
"@traptitech/markdown-it-katex": "^3.6.0",
51+
"event-source-polyfill": "^1.0.31",
52+
"highlight.js": "^11.9.0",
4853
"md5": "^2.3.0",
4954
"mockjs": "^1.1.0",
5055
"nprogress": "^0.2.0",

‎pnpm-lock.yaml‎

Lines changed: 1365 additions & 927 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/jeecg/AiChat/assets/avatar.jpg‎

5.03 KB
Loading

‎src/components/jeecg/AiChat/components/chat.vue‎

Lines changed: 445 additions & 0 deletions
Large diffs are not rendered by default.

‎src/components/jeecg/AiChat/components/chatMessage.vue‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<template>
2+
<div class="chat" :class="[inversion ? 'self' : 'chatgpt']">
3+
<div class="avatar">
4+
<img v-if="inversion" :src="avatar()" />
5+
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" width="1em" height="1em">
6+
<path
7+
d="M29.71,13.09A8.09,8.09,0,0,0,20.34,2.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,2.3,18.9,8,8,0,0,0,3,25.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,29.71,13.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,17.68,29.91ZM4.8,24.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V22.8a.09.09,0,0,1,0,.08L13,26.6A6,6,0,0,1,4.8,24.41ZM3.12,10.53A6,6,0,0,1,6.28,7.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L11.85,22.4a.14.14,0,0,1-.09,0L5.32,18.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52L20.16,9.6a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V16.56A1.06,1.06,0,0,0,25.25,15.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V9.2a.09.09,0,0,1,0-.09L19,5.4a6,6,0,0,1,8.91,6.21ZM11.08,17.15,8.38,15.6a.14.14,0,0,1-.05-.08V8.1a6,6,0,0,1,9.84-4.61L18,3.6,11.61,7.28a1,1,0,0,0-.53.91ZM12.54,14,16,12l3.47,2v4L16,20l-3.47-2Z"
8+
fill="currentColor"
9+
/>
10+
</svg>
11+
</div>
12+
<div class="content">
13+
<p class="date">{{ dateTime }}</p>
14+
<div class="msgArea">
15+
<chatText :text="text" :inversion="inversion" :error="error" :loading="loading"></chatText>
16+
</div>
17+
</div>
18+
</div>
19+
</template>
20+
21+
<script setup lang="ts">
22+
import chatText from './chatText.vue';
23+
import defaultAvatar from '../assets/avatar.jpg';
24+
import { useUserStore } from '/@/store/modules/user';
25+
const props = defineProps(['dateTime', 'text', 'inversion', 'error', 'loading']);
26+
const { userInfo } = useUserStore();
27+
const avatar = () => {
28+
return userInfo?.avatar || defaultAvatar;
29+
};
30+
</script>
31+
32+
<style lang="less" scoped>
33+
.chat {
34+
display: flex;
35+
margin-bottom: 1.5rem;
36+
&.self {
37+
flex-direction: row-reverse;
38+
.avatar {
39+
margin-right: 0;
40+
margin-left: 10px;
41+
}
42+
.msgArea {
43+
flex-direction: row-reverse;
44+
}
45+
.date {
46+
text-align: right;
47+
}
48+
}
49+
}
50+
.avatar {
51+
flex: none;
52+
margin-right: 10px;
53+
img {
54+
width: 34px;
55+
height: 34px;
56+
border-radius: 50%;
57+
overflow: hidden;
58+
}
59+
svg {
60+
font-size: 28px;
61+
}
62+
}
63+
.content {
64+
.date {
65+
color: #b4bbc4;
66+
font-size: 0.75rem;
67+
margin-bottom: 10px;
68+
}
69+
.msgArea {
70+
display: flex;
71+
}
72+
}
73+
</style>

‎src/components/jeecg/AiChat/components/chatText.vue‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<template>
2+
<div class="textWrap" :class="[inversion ? 'self' : 'chatgpt']" ref="textRef">
3+
<div v-if="!inversion">
4+
<div class="markdown-body" :class="{ 'markdown-body-generate': loading }" v-html="text" />
5+
</div>
6+
<div v-else class="msg" v-text="text" />
7+
</div>
8+
</template>
9+
10+
<script setup lang="ts">
11+
import { computed, onMounted, onUnmounted, onUpdated, ref } from 'vue';
12+
import MarkdownIt from 'markdown-it';
13+
import mdKatex from '@traptitech/markdown-it-katex';
14+
import mila from 'markdown-it-link-attributes';
15+
import hljs from 'highlight.js';
16+
17+
const props = defineProps(['dateTime', 'text', 'inversion', 'error', 'loading']);
18+
const textRef = ref();
19+
const mdi = new MarkdownIt({
20+
html: false,
21+
linkify: true,
22+
highlight(code, language) {
23+
const validLang = !!(language && hljs.getLanguage(language));
24+
if (validLang) {
25+
const lang = language ?? '';
26+
return highlightBlock(hljs.highlight(code, { language: lang }).value, lang);
27+
}
28+
return highlightBlock(hljs.highlightAuto(code).value, '');
29+
},
30+
});
31+
32+
mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } });
33+
mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' });
34+
35+
const text = computed(() => {
36+
const value = props.text ?? '';
37+
if (!props.inversion) return mdi.render(value);
38+
return value;
39+
});
40+
41+
function highlightBlock(str: string, lang?: string) {
42+
return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">复制代码</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`;
43+
}
44+
function addCopyEvents() {
45+
if (textRef.value) {
46+
const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy');
47+
copyBtn.forEach((btn) => {
48+
btn.addEventListener('click', () => {
49+
const code = btn.parentElement?.nextElementSibling?.textContent;
50+
if (code) {
51+
copyToClip(code).then(() => {
52+
btn.textContent = '复制成功';
53+
setTimeout(() => {
54+
btn.textContent = '复制代码';
55+
}, 1e3);
56+
});
57+
}
58+
});
59+
});
60+
}
61+
}
62+
63+
function removeCopyEvents() {
64+
if (textRef.value) {
65+
const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy');
66+
copyBtn.forEach((btn) => {
67+
btn.removeEventListener('click', () => {});
68+
});
69+
}
70+
}
71+
72+
onMounted(() => {
73+
addCopyEvents();
74+
});
75+
76+
onUpdated(() => {
77+
addCopyEvents();
78+
});
79+
80+
onUnmounted(() => {
81+
removeCopyEvents();
82+
});
83+
84+
function copyToClip(text: string) {
85+
return new Promise((resolve, reject) => {
86+
try {
87+
const input: HTMLTextAreaElement = document.createElement('textarea');
88+
input.setAttribute('readonly', 'readonly');
89+
input.value = text;
90+
document.body.appendChild(input);
91+
input.select();
92+
if (document.execCommand('copy')) document.execCommand('copy');
93+
document.body.removeChild(input);
94+
resolve(text);
95+
} catch (error) {
96+
reject(error);
97+
}
98+
});
99+
}
100+
</script>
101+
<style lang="less" scoped>
102+
.textWrap {
103+
border-radius: 0.375rem;
104+
padding-top: 0.5rem;
105+
padding-bottom: 0.5rem;
106+
padding-left: 0.75rem;
107+
padding-right: 0.75rem;
108+
font-size: 0.875rem;
109+
line-height: 1.25rem;
110+
}
111+
.self {
112+
// background-color: #d2f9d1;
113+
background-color: @primary-color;
114+
color: #fff;
115+
overflow-wrap: break-word;
116+
line-height: 1.625;
117+
min-width: 20px;
118+
}
119+
.chatgpt {
120+
background-color: #f4f6f8;
121+
122+
font-size: 0.875rem;
123+
line-height: 1.25rem;
124+
}
125+
</style>

0 commit comments

Comments
 (0)