Skip to content

Commit 8c1cdda

Browse files
0xJacky0xJacky
committed
wip: entrance of ChatGPT
1 parent af1be98 commit 8c1cdda

File tree

8 files changed

+429
-249
lines changed

8 files changed

+429
-249
lines changed

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
"unplugin-vue-components": "^0.22.12",
4747
"vite": "^4.1.4",
4848
"vite-plugin-html": "^3.2.0",
49+
"vite-svg-loader": "^4.0.0",
4950
"vue-tsc": "^1.0.24"
5051
}
5152
}

‎frontend/src/assets/svg/ChatGPT_logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎frontend/src/components/ChatGPT/ChatGPT.vue‎

Lines changed: 80 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import {computed, ref, watch} from 'vue'
2+
import {computed, onMounted, ref, watch} from 'vue'
33
import {useGettext} from 'vue3-gettext'
44
import {useUserStore} from '@/pinia'
55
import {storeToRefs} from 'pinia'
@@ -10,12 +10,20 @@ import 'highlight.js/styles/vs2015.css'
1010
import {SendOutlined} from '@ant-design/icons-vue'
1111
import Template from '@/views/template/Template.vue'
1212
import openai from '@/api/openai'
13+
import ChatGPT_logo from '@/assets/svg/ChatGPT_logo.svg'
14+
import Icon from '@ant-design/icons-vue'
1315
1416
const {$gettext} = useGettext()
1517
1618
const props = defineProps(['content', 'path', 'history_messages'])
19+
const emit = defineEmits(['update:history_messages'])
20+
const history_messages = computed(() => props.history_messages)
1721
18-
watch(computed(() => props.history_messages), () => {
22+
onMounted(() => {
23+
messages.value = props.history_messages
24+
})
25+
26+
watch(history_messages, () => {
1927
messages.value = props.history_messages
2028
})
2129
@@ -99,6 +107,9 @@ async function request() {
99107
}
100108
101109
async function send() {
110+
if (!messages.value) {
111+
messages.value = []
112+
}
102113
if (messages.value.length === 0) {
103114
messages.value.push({
104115
role: 'user',
@@ -145,6 +156,7 @@ function clear_record() {
145156
messages: []
146157
})
147158
messages.value = []
159+
emit('update:history_messages', [])
148160
}
149161
150162
async function regenerate(index: number) {
@@ -154,73 +166,88 @@ async function regenerate(index: number) {
154166
}
155167
156168
const editing_idx = ref(-1)
169+
170+
const button_shape = computed(() => loading.value ? 'square' : 'circle')
157171
</script>
158172

159173
<template>
160-
<a-card title="ChatGPT">
174+
<a-card class="chatgpt" title="ChatGPT" v-if="messages?.length>1">
161175
<div class="chatgpt-container">
162-
<template v-if="messages?.length>0">
163-
<a-list
164-
class="chatgpt-log"
165-
item-layout="horizontal"
166-
:data-source="messages"
167-
>
168-
<template #renderItem="{ item, index }">
169-
<a-list-item>
170-
<a-comment :author="item.role" :avatar="item.avatar">
171-
<template #content>
172-
<div class="content" v-if="item.role==='assistant'||editing_idx!=index"
173-
v-html="marked.parse(item.content)"></div>
174-
<a-input style="padding: 0" v-else v-model:value="item.content"
175-
:bordered="false"/>
176-
</template>
177-
<template #actions>
176+
<a-list
177+
class="chatgpt-log"
178+
item-layout="horizontal"
179+
:data-source="messages"
180+
>
181+
<template #renderItem="{ item, index }">
182+
<a-list-item>
183+
<a-comment :author="item.role" :avatar="item.avatar">
184+
<template #content>
185+
<div class="content" v-if="item.role==='assistant'||editing_idx!=index"
186+
v-html="marked.parse(item.content)"></div>
187+
<a-input style="padding: 0" v-else v-model:value="item.content"
188+
:bordered="false"/>
189+
</template>
190+
<template #actions>
178191
<span v-if="item.role==='user'&&editing_idx!==index" @click="editing_idx=index">
179192
{{ $gettext('Modify') }}
180193
</span>
181-
<template v-else-if="editing_idx==index">
182-
<span @click="regenerate(index+1)">{{ $gettext('Save') }}</span>
183-
<span @click="editing_idx=-1">{{ $gettext('Cancel') }}</span>
184-
</template>
185-
<span v-else-if="!loading" @click="regenerate(index)" :disabled="loading">
194+
<template v-else-if="editing_idx==index">
195+
<span @click="regenerate(index+1)">{{ $gettext('Save') }}</span>
196+
<span @click="editing_idx=-1">{{ $gettext('Cancel') }}</span>
197+
</template>
198+
<span v-else-if="!loading" @click="regenerate(index)" :disabled="loading">
186199
{{ $gettext('Reload') }}
187200
</span>
188-
</template>
189-
</a-comment>
190-
</a-list-item>
191-
</template>
192-
</a-list>
193-
<div class="input-msg">
194-
<div class="control-btn">
195-
<a-space v-show="!loading">
196-
<a-popconfirm
197-
:cancelText="$gettext('No')"
198-
:okText="$gettext('OK')"
199-
:title="$gettext('Are you sure you want to clear the record of chat?')"
200-
@confirm="clear_record">
201-
<a-button type="text">{{ $gettext('Clear') }}</a-button>
202-
</a-popconfirm>
203-
<a-button type="text" @click="regenerate(messages?.length-1)">
204-
{{ $gettext('Regenerate response') }}
205-
</a-button>
206-
</a-space>
207-
</div>
208-
<a-textarea auto-size v-model:value="ask_buffer"/>
209-
<div class="sned-btn">
210-
<a-button size="small" type="text" :loading="loading" @click="send">
211-
<send-outlined/>
201+
</template>
202+
</a-comment>
203+
</a-list-item>
204+
</template>
205+
</a-list>
206+
<div class="input-msg">
207+
<div class="control-btn">
208+
<a-space v-show="!loading">
209+
<a-popconfirm
210+
:cancelText="$gettext('No')"
211+
:okText="$gettext('OK')"
212+
:title="$gettext('Are you sure you want to clear the record of chat?')"
213+
@confirm="clear_record">
214+
<a-button type="text">{{ $gettext('Clear') }}</a-button>
215+
</a-popconfirm>
216+
<a-button type="text" @click="regenerate(messages?.length-1)">
217+
{{ $gettext('Regenerate response') }}
212218
</a-button>
213-
</div>
219+
</a-space>
220+
</div>
221+
<a-textarea auto-size v-model:value="ask_buffer"/>
222+
<div class="sned-btn">
223+
<a-button size="small" type="text" :loading="loading" @click="send">
224+
<send-outlined/>
225+
</a-button>
214226
</div>
215-
</template>
216-
<template v-else>
217-
<a-button @click="send">{{ $gettext('Chat with ChatGPT') }}</a-button>
218-
</template>
227+
</div>
219228
</div>
220229
</a-card>
230+
<template v-else>
231+
<div class="chat-start">
232+
<a-button size="large" shape="circle" @click="send" :loading="loading">
233+
<Icon v-if="!loading" :component="ChatGPT_logo"/>
234+
</a-button>
235+
</div>
236+
</template>
221237
</template>
222238

223239
<style lang="less" scoped>
240+
.chatgpt {
241+
position: sticky;
242+
top: 78px;
243+
}
244+
245+
.chat-start {
246+
position: fixed !important;
247+
right: 36px;
248+
bottom: 78px;
249+
}
250+
224251
.chatgpt-container {
225252
margin: 0 auto;
226253
max-width: 800px;

‎frontend/src/views/domain/DomainEdit.vue‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -162,10 +162,13 @@ function on_change_enabled(checked: boolean) {
162162
disable()
163163
}
164164
}
165+
166+
const editor_md = computed(() => history_chatgpt_record?.value?.length > 1 ? 16 : 24)
167+
const chat_md = computed(() => history_chatgpt_record?.value?.length > 1 ? 8 : 24)
165168
</script>
166169
<template>
167170
<a-row :gutter="16">
168-
<a-col :xs="24" :sm="24" :md="16">
171+
<a-col :xs="24" :sm="24" :md="editor_md">
169172
<a-card :bordered="false">
170173
<template #title>
171174
<span style="margin-right: 10px">{{ interpolate($gettext('Edit %{n}'), {n: name}) }}</span>
@@ -225,9 +228,9 @@ function on_change_enabled(checked: boolean) {
225228
</a-card>
226229
</a-col>
227230

228-
<a-col class="col-right" :xs="24" :sm="24" :md="8">
229-
<chat-g-p-t class="chatgpt" :content="configText" :path="ngx_config.file_name"
230-
:history_messages="history_chatgpt_record"/>
231+
<a-col class="col-right" :xs="24" :sm="24" :md="chat_md">
232+
<chat-g-p-t :content="configText" :path="ngx_config.file_name"
233+
v-model:history_messages="history_chatgpt_record"/>
231234
</a-col>
232235

233236
<footer-tool-bar>
@@ -250,11 +253,6 @@ function on_change_enabled(checked: boolean) {
250253
<style lang="less" scoped>
251254
.col-right {
252255
position: relative;
253-
254-
.chatgpt {
255-
position: sticky;
256-
top: 78px;
257-
}
258256
}
259257
260258
.ant-card {

‎frontend/vite.config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {AntDesignVueResolver} from 'unplugin-vue-components/resolvers'
66
import {fileURLToPath, URL} from 'url'
77
import vueJsx from '@vitejs/plugin-vue-jsx'
88
import vitePluginBuildId from 'vite-plugin-build-id'
9+
import svgLoader from 'vite-svg-loader'
910

1011
// https://vitejs.dev/config/
1112
export default defineConfig({
@@ -25,7 +26,7 @@ export default defineConfig({
2526
'.less'
2627
]
2728
},
28-
plugins: [vue(), vueJsx(), vitePluginBuildId(),
29+
plugins: [vue(), vueJsx(), vitePluginBuildId(), svgLoader(),
2930
Components({
3031
resolvers: [AntDesignVueResolver({importStyle: false})],
3132
directoryAsNamespace: true

0 commit comments

Comments
 (0)