From 94408cd21f80adf79c5ca433276c7f91ae315b9b Mon Sep 17 00:00:00 2001
From: 0xJacky <me@jackyu.cn>
Date: Wed, 22 Mar 2023 09:10:00 +0800
Subject: [PATCH] enhance: ChatGPT stream reception

---
 frontend/components.d.ts                    |   1 -
 frontend/package.json                       |   2 +-
 frontend/src/components/ChatGPT/ChatGPT.vue |  44 ++++++++++++-----
 frontend/src/version.json                   |   2 +-
 frontend/src/views/config/ConfigEdit.vue    |  50 +++++++++++++-------
 frontend/version.json                       |   2 +-
 resources/demo/demo.db                      | Bin 53248 -> 53248 bytes
 server/api/config.go                        |   1 +
 8 files changed, 70 insertions(+), 32 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index df534f58..eded9875 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -56,7 +56,6 @@ declare module '@vue/runtime-core' {
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
-    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     BreadcrumbBreadcrumb: typeof import('./src/components/Breadcrumb/Breadcrumb.vue')['default']
     ChartAreaChart: typeof import('./src/components/Chart/AreaChart.vue')['default']
     ChartRadialBarChart: typeof import('./src/components/Chart/RadialBarChart.vue')['default']
diff --git a/frontend/package.json b/frontend/package.json
index 966c4d40..6f85c6f9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
     "name": "nginx-ui-frontend-next",
     "private": true,
-    "version": "1.7.7",
+    "version": "1.7.8",
     "type": "commonjs",
     "scripts": {
         "dev": "vite",
diff --git a/frontend/src/components/ChatGPT/ChatGPT.vue b/frontend/src/components/ChatGPT/ChatGPT.vue
index c7045801..2d172909 100644
--- a/frontend/src/components/ChatGPT/ChatGPT.vue
+++ b/frontend/src/components/ChatGPT/ChatGPT.vue
@@ -46,13 +46,15 @@ async function request() {
 
     console.log('fetching...')
 
+    messages.value.push(t.value)
+
+    emit('update:history_messages', messages.value)
+
     let res = await fetch(urlJoin(window.location.pathname, '/api/chat_gpt'), {
         method: 'POST',
         headers: {'Accept': 'text/event-stream', Authorization: token.value},
-        body: JSON.stringify({messages: messages.value})
+        body: JSON.stringify({messages: messages.value.slice(0, messages.value?.length - 1)})
     })
-
-    messages.value.push(t.value)
     // read body as stream
     console.log('reading...')
     let reader = res.body!.getReader()
@@ -62,6 +64,8 @@ async function request() {
 
     let buffer = ''
 
+    let hasCodeBlockIndicator = false
+
     while (true) {
         let {done, value} = await reader.read()
         if (done) {
@@ -78,17 +82,32 @@ async function request() {
         const decoder = new TextDecoder('utf-8')
         const raw = decoder.decode(input)
 
-        const regex = /{"content":"(.+?)"}/g
-        const matches = raw.match(regex)
+        // console.log(input, raw)
+
+        const line = raw.split('\n\n')
+
+        line?.forEach(v => {
+            const data = v.slice('event:message\ndata:'.length)
+            if (!data) {
+                return
+            }
+            const content = JSON.parse(data).content
+
+            if (!hasCodeBlockIndicator) {
+                hasCodeBlockIndicator = content.indexOf('`') > -1
+            }
 
-        matches?.forEach(v => {
-            const content = JSON.parse(v).content
             for (let c of content) {
                 buffer += c
-                if (isCodeBlockComplete(buffer)) {
-                    t.value.content = buffer
+                if (hasCodeBlockIndicator) {
+                    if (isCodeBlockComplete(buffer)) {
+                        t.value.content = buffer
+                        hasCodeBlockIndicator = false
+                    } else {
+                        t.value.content = buffer + '\n```'
+                    }
                 } else {
-                    t.value.content = buffer + '\n```'
+                    t.value.content = buffer
                 }
             }
         })
@@ -167,11 +186,12 @@ async function regenerate(index: number) {
 
 const editing_idx = ref(-1)
 
-const button_shape = computed(() => loading.value ? 'square' : 'circle')
+const show = computed(() => messages?.value?.length > 1)
+
 </script>
 
 <template>
-    <a-card class="chatgpt" title="ChatGPT" v-if="messages?.length>1">
+    <a-card class="chatgpt" title="ChatGPT" v-if="show">
         <div class="chatgpt-container">
             <a-list
                 class="chatgpt-log"
diff --git a/frontend/src/version.json b/frontend/src/version.json
index 50d11677..875520ce 100644
--- a/frontend/src/version.json
+++ b/frontend/src/version.json
@@ -1 +1 @@
-{"version":"1.7.7","build_id":85,"total_build":155}
\ No newline at end of file
+{"version":"1.7.8","build_id":86,"total_build":156}
\ No newline at end of file
diff --git a/frontend/src/views/config/ConfigEdit.vue b/frontend/src/views/config/ConfigEdit.vue
index af52aaf8..326b0e97 100644
--- a/frontend/src/views/config/ConfigEdit.vue
+++ b/frontend/src/views/config/ConfigEdit.vue
@@ -8,6 +8,7 @@ import {message} from 'ant-design-vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 import ngx from '@/api/ngx'
 import InspectConfig from '@/views/config/InspectConfig.vue'
+import ChatGPT from '@/components/ChatGPT/ChatGPT.vue'
 
 const {$gettext, interpolate} = gettext
 const route = useRoute()
@@ -23,16 +24,22 @@ const name = computed(() => {
 })
 
 const configText = ref('')
+const history_chatgpt_record = ref([])
+const file_path = ref('')
 
 function init() {
     if (name.value) {
         config.get(name.value).then(r => {
             configText.value = r.config
+            history_chatgpt_record.value = r.chatgpt_messages
+            file_path.value = r.file_path
         }).catch(r => {
             message.error(r.message ?? $gettext('Server error'))
         })
     } else {
         configText.value = ''
+        history_chatgpt_record.value = []
+        file_path.value = ''
     }
 }
 
@@ -58,28 +65,39 @@ function format_code() {
     })
 }
 
+const editor_md = computed(() => history_chatgpt_record?.value?.length > 1 ? 16 : 24)
+const chat_md = computed(() => history_chatgpt_record?.value?.length > 1 ? 8 : 24)
+
 </script>
 
 
 <template>
     <inspect-config ref="inspect_config"/>
+    <a-row :gutter="16">
+        <a-col :xs="24" :sm="24" :md="editor_md">
+            <a-card :title="$gettext('Edit Configuration')">
+                <code-editor v-model:content="configText"/>
+                <footer-tool-bar>
+                    <a-space>
+                        <a-button @click="$router.go(-1)">
+                            <translate>Back</translate>
+                        </a-button>
+                        <a-button @click="format_code">
+                            <translate>Format Code</translate>
+                        </a-button>
+                        <a-button type="primary" @click="save">
+                            <translate>Save</translate>
+                        </a-button>
+                    </a-space>
+                </footer-tool-bar>
+            </a-card>
+        </a-col>
 
-    <a-card :title="$gettext('Edit Configuration')">
-        <code-editor v-model:content="configText"/>
-        <footer-tool-bar>
-            <a-space>
-                <a-button @click="$router.go(-1)">
-                    <translate>Back</translate>
-                </a-button>
-                <a-button @click="format_code">
-                    <translate>Format Code</translate>
-                </a-button>
-                <a-button type="primary" @click="save">
-                    <translate>Save</translate>
-                </a-button>
-            </a-space>
-        </footer-tool-bar>
-    </a-card>
+        <a-col class="col-right" :xs="24" :sm="24" :md="chat_md">
+            <chat-g-p-t :content="configText" :path="file_path"
+                        v-model:history_messages="history_chatgpt_record"/>
+        </a-col>
+    </a-row>
 </template>
 
 <style lang="less" scoped>
diff --git a/frontend/version.json b/frontend/version.json
index 50d11677..875520ce 100644
--- a/frontend/version.json
+++ b/frontend/version.json
@@ -1 +1 @@
-{"version":"1.7.7","build_id":85,"total_build":155}
\ No newline at end of file
+{"version":"1.7.8","build_id":86,"total_build":156}
\ No newline at end of file
diff --git a/resources/demo/demo.db b/resources/demo/demo.db
index df64820a970892d69fca305772f5142aedd04c69..4cd437cb97544d575611424f588aed018eee2ddf 100644
GIT binary patch
delta 857
zcmZuvL2J}N7`5(FDuPuJMOx(RN~wyw3o1zML7~uAuw_-yLknh_Op@s)GjV3pY^Ay@
zy@;T#%(X%<>bWdZ{0FrN9!01J?|Sg!MMS^ZU33LQ5+;*x-uJ%uUSlKI*vPF7^z1$x
z9PioPbY9f=_f_}wRr`kffAoLfeE2EX{JQcW-@AG^pTGXxd|Mebmme3J^(T$JrqLWY
zUx_GD6k-a5gQjs35lul0@Msc=B_MEHNUtKPQjpPk#WXdapB83srjic96qR&DVbMHM
z%!QeN@fx^-`z%N$(M)t<`a*U<84v!4dufi(amR7Y(3@lC!=p21?e&p!QV0#@MIy^t
zmX&FZAVXSmMLagg0WZcqT5G>cNtocS`M3^~U4=#By2!p1iJ)_aN-5+W{B8r|qRcJx
zZunxW$oyJAX=Yyyn%=j^&C9J5W^_9=x3&+MFI)SDEh(AuGPbqP#nOeMpTs34+-j%M
zePnZR=V<>z5-cwyG*}LpznpM0x>Lx<q&8;Wzbn+S2ydL*j(-DHCoTo2YXAo_rbAc~
zsRWU6@I*`)2To#o7G3i|Q4Ko8Lsl#YJSM5D*<#B^yPps|o`vXD8|1H}K8xxU{lh<z
zaM5|M1T(@0ASBurk3<o0N<Ev1kRW7bs?zF7TB`}7^!Vges7PTohH1h{KqZ_~sT%@O
zwx~E!nLdpUDNUjXk!%ih$W$jM^*=!okO^5WSsAY3L>S2`7a1_$5@~lQd<pzi;!qOq
zrc~L4DL}v$N1_zNE*$l1Ddwh1i<sTBd9ynF8%)asfe%Sg33Zu|`9&eqWT^RbHFxDV
DmRLX>

delta 97
zcmV-n0G|JVpaX!Q1CSd5+mReY0o$=)rGE<zI{*zk2qh2u5B9Nv-2=1jgMI|FTe`9V
z2LJ#C<58CZlR%amlZ}WXvro9j0h2GL6SF$J0RabvLIea+ibaz^mK(E;h@t|s|BnGc
D0bL~x

diff --git a/server/api/config.go b/server/api/config.go
index 11c46024..9674b771 100644
--- a/server/api/config.go
+++ b/server/api/config.go
@@ -96,6 +96,7 @@ func GetConfig(c *gin.Context) {
 	c.JSON(http.StatusOK, gin.H{
 		"config":           string(content),
 		"chatgpt_messages": chatgpt.Content,
+		"file_path":        path,
 	})
 
 }