chore: version 2.7.1

CHANGELOG.md

@@ -1,10 +1,3 @@
-## v2.7.2
-
-`2023-02-24`
-### Enhancement
-- 消息使用 [github-markdown-css](https://www.npmjs.com/package/github-markdown-css) 进行美化，现在支持全语法
-- 移除测试无用函数
-
 ## v2.7.1
 
 `2023-02-23`

config/proxy.ts

@@ -6,9 +6,9 @@ export function createViteProxy(isOpenProxy: boolean, viteEnv: ImportMetaEnv) {
 
   const proxy: Record<string, string | ProxyOptions> = {
     '/api': {
-      target: viteEnv.VITE_APP_API_BASE_URL,
+      target: viteEnv.VITE_GLOB_API_URL,
       changeOrigin: true,
-      rewrite: path => path.replace('/api/', '/'),
+      rewrite: path => path.replace(/^\/api/, ''),
     },
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-web",
-  "version": "2.7.2",
+  "version": "2.7.1",
   "private": false,
   "description": "ChatGPT Web",
   "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
@@ -24,7 +24,6 @@
   },
   "dependencies": {
     "@vueuse/core": "^9.13.0",
-    "github-markdown-css": "^5.2.0",
     "highlight.js": "^11.7.0",
     "marked": "^4.2.12",
     "naive-ui": "^2.34.3",

pnpm-lock.yaml

@@ -15,7 +15,6 @@ specifiers:
   axios: ^1.3.3
   crypto-js: ^4.1.1
   eslint: ^8.34.0
-  github-markdown-css: ^5.2.0
   highlight.js: ^11.7.0
   husky: ^8.0.3
   less: ^4.1.3
@@ -35,7 +34,6 @@ specifiers:
 
 dependencies:
   '@vueuse/core': 9.13.0_vue@3.2.47
-  github-markdown-css: 5.2.0
   highlight.js: 11.7.0
   marked: 4.2.12
   naive-ui: 2.34.3_vue@3.2.47
@@ -2526,10 +2524,6 @@ packages:
       through2: 4.0.2
     dev: true
 
-  /github-markdown-css/5.2.0:
-    resolution: {integrity: sha512-hq5RaCInSUZ48bImOZpkppW2/MT44StRgsbsZ8YA4vJFwLKB/Vo3k7R2t+pUGqO+ThG0QDMi96TewV/B3vyItg==}
-    dev: false
-
   /glob-parent/5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}

service/src/chatgpt.ts

@@ -65,6 +65,35 @@ async function chatReply(
   }
 }
 
+/**  实验性质的函数，用于处理聊天过程中的中间结果 */
+async function chatReplyProcess(
+  message: string,
+  lastContext?: { conversationId?: string; parentMessageId?: string },
+  process?: (chat: ChatMessage) => void,
+) {
+  if (!message)
+    return sendResponse({ type: 'Fail', message: 'Message is empty' })
+
+  try {
+    let options: SendMessageOptions = { timeoutMs }
+
+    if (lastContext)
+      options = { ...lastContext }
+
+    const response = await api.sendMessage(message, {
+      ...options,
+      onProgress: (partialResponse) => {
+        process?.(partialResponse)
+      },
+    })
+
+    return sendResponse({ type: 'Success', data: response })
+  }
+  catch (error: any) {
+    return sendResponse({ type: 'Fail', message: error.message })
+  }
+}
+
 async function chatConfig() {
   return sendResponse({
     type: 'Success',
@@ -78,4 +107,4 @@ async function chatConfig() {
 
 export type { ChatContext, ChatMessage }
 
-export { chatReply, chatConfig }
+export { chatReply, chatReplyProcess, chatConfig }

service/src/index.ts

@@ -1,6 +1,6 @@
 import express from 'express'
-import type { ChatContext } from './chatgpt'
+import type { ChatContext, ChatMessage } from './chatgpt'
-import { chatConfig, chatReply } from './chatgpt'
+import { chatConfig, chatReply, chatReplyProcess } from './chatgpt'
 
 const app = express()
 const router = express.Router()
@@ -26,6 +26,24 @@ router.post('/chat', async (req, res) => {
   }
 })
 
+/**  实验性质的函数，用于处理聊天过程中的中间结果 */
+router.post('/chat-process', async (req, res) => {
+  res.setHeader('Content-type', 'application/octet-stream')
+
+  try {
+    const { prompt, options = {} } = req.body as { prompt: string; options?: ChatContext }
+    await chatReplyProcess(prompt, options, (chat: ChatMessage) => {
+      res.write(JSON.stringify(chat))
+    })
+  }
+  catch (error) {
+    res.write(JSON.stringify(error))
+  }
+  finally {
+    res.end()
+  }
+})
+
 router.post('/config', async (req, res) => {
   try {
     const response = await chatConfig()

src/api/index.ts

@@ -1,4 +1,4 @@
-import type { GenericAbortSignal } from 'axios'
+import type { AxiosProgressEvent, GenericAbortSignal } from 'axios'
 import { post } from '@/utils/request'
 
 export function fetchChatAPI<T = any>(
@@ -13,6 +13,22 @@ export function fetchChatAPI<T = any>(
   })
 }
 
+/**  实验性质的函数，用于处理聊天过程中的中间结果 */
+export function fetchChatAPIProcess<T = any>(
+  params: {
+    prompt: string
+    options?: { conversationId?: string; parentMessageId?: string }
+    signal?: GenericAbortSignal
+    onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void },
+) {
+  return post<T>({
+    url: '/chat-process',
+    data: { prompt: params.prompt, options: params.options },
+    signal: params.signal,
+    onDownloadProgress: params.onDownloadProgress,
+  })
+}
+
 export function fetchChatConfig<T = any>() {
   return post<T>({
     url: '/config',

src/directives/highlight.ts

@@ -0,0 +1,23 @@
+import type { App, Directive } from 'vue'
+import hljs from 'highlight.js'
+import includeCode from '@/utils/functions/includeCode'
+
+hljs.configure({ ignoreUnescapedHTML: true })
+
+function highlightCode(el: HTMLElement) {
+  if (includeCode(el.textContent))
+    hljs.highlightBlock(el)
+}
+
+export default function setupHighlightDirective(app: App) {
+  const highLightDirective: Directive<HTMLElement> = {
+    mounted(el: HTMLElement) {
+      highlightCode(el)
+    },
+    updated(el: HTMLElement) {
+      highlightCode(el)
+    },
+  }
+
+  app.directive('highlight', highLightDirective)
+}

src/directives/index.ts

@@ -1 +1,6 @@
-export function setupDirectives() {}
+import type { App } from 'vue'
+import setupHighlightDirective from './highlight'
+
+export function setupDirectives(app: App) {
+  setupHighlightDirective(app)
+}

src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import { setupDirectives } from './directives'
 import { setupAssets } from '@/plugins'
 import { setupStore } from '@/store'
 import { setupRouter } from '@/router'
@@ -10,6 +11,8 @@ async function bootstrap() {
 
   setupStore(app)
 
+  setupDirectives(app)
+
   await setupRouter(app)
 
   app.mount('#app')

src/plugins/assets.ts

@@ -1,5 +1,4 @@
 import 'highlight.js/styles/xcode.css'
-import 'github-markdown-css/github-markdown.css'
 import '@/styles/global.css'
 
 /** Tailwind's Preflight Style Override */

src/views/chat/components/Message/Text.vue

@@ -1,16 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { marked } from 'marked'
-import hljs from 'highlight.js'
+import includeCode from '@/utils/functions/includeCode'
-
-const props = defineProps<Props>()
-
-marked.setOptions({
-  renderer: new marked.Renderer(),
-  highlight(code) {
-    return hljs.highlightAuto(code).value
-  },
-})
 
 interface Props {
   inversion?: boolean
@@ -19,6 +10,8 @@ interface Props {
   loading?: boolean
 }
 
+const props = defineProps<Props>()
+
 const wrapClass = computed(() => {
   return [
     'text-wrap',
@@ -31,8 +24,11 @@ const wrapClass = computed(() => {
 })
 
 const text = computed(() => {
-  if (props.text)
+  if (props.text) {
-    return marked(props.text)
+    if (!includeCode(props.text))
+      return marked.parse(props.text)
+    return props.text
+  }
   return ''
 })
 </script>
@@ -43,13 +39,25 @@ const text = computed(() => {
       <span class="w-[5px] h-[20px] block animate-blink" />
     </template>
     <template v-else>
-      <div class="leading-relaxed break-all">
+      <code v-if="includeCode(text)" v-highlight class="leading-relaxed" v-text="text" />
-        <div :class="[{ 'markdown-body': !inversion }]" v-html="text" />
+      <div v-else class="leading-relaxed break-all" v-html="text" />
-      </div>
     </template>
   </div>
 </template>
 
 <style lang="less">
-@import url(./style.less);
+.text-wrap{
+  img{
+    max-width: 100%;
+    vertical-align: middle;
+  }
+  a {
+    color: #2d5cf6
+  }
+}
+
+.hljs {
+  background-color: #fff0 !important;
+  white-space: break-spaces;
+}
 </style>

src/views/chat/components/Message/index.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import AvatarComponent from './Avatar.vue'
+import Avatar from './Avatar.vue'
-import TextComponent from './Text.vue'
+import Text from './Text.vue'
 import { SvgIcon } from '@/components/common'
 
 interface Props {
@@ -36,14 +36,14 @@ function handleRegenerate() {
       class="flex items-center justify-center rounded-full overflow-hidden w-[32px] h-[32px]"
       :class="[inversion ? 'ml-3' : 'mr-3']"
     >
-      <AvatarComponent :image="inversion" />
+      <Avatar :image="inversion" />
     </div>
     <div class="flex flex-col flex-1 text-sm" :class="[inversion ? 'items-end' : 'items-start']">
       <span class="text-xs text-[#b4bbc4]">
         {{ dateTime }}
       </span>
       <div class="flex items-end gap-2 mt-2" :class="[inversion ? 'flex-row-reverse' : 'flex-row']">
-        <TextComponent
+        <Text
           :inversion="inversion"
           :error="error"
           :text="text"

src/views/chat/components/Message/style.less

@@ -1,22 +0,0 @@
-.markdown-body {
-	background-color: transparent;
-	font-size: 14px;
-
-	ol {
-		list-style-type: decimal;
-	}
-
-	ul {
-		list-style-type: disc;
-	}
-
-	pre code,
-	pre tt {
-		line-height: 1.65;
-	}
-
-	.highlight pre,
-	pre {
-		background-color: #fff;
-	}
-}