Skip to content

Commit

Permalink
feat: v2.7.2 消息样式美化和优化代码 (#111)
Browse files Browse the repository at this point in the history
* perf: 优化代码

* feat: 美化消息,支持 markdown 全语法

* chore: version 2.7.2
  • Loading branch information
Chanzhaoyu authored Feb 24, 2023
1 parent 1e2f893 commit b6fd9ae
Show file tree
Hide file tree
Showing 14 changed files with 65 additions and 130 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
## v2.7.2

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

## v2.7.1

`2023-02-23`
Expand Down
4 changes: 2 additions & 2 deletions config/proxy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ export function createViteProxy(isOpenProxy: boolean, viteEnv: ImportMetaEnv) {

const proxy: Record<string, string | ProxyOptions> = {
'/api': {
target: viteEnv.VITE_GLOB_API_URL,
target: viteEnv.VITE_APP_API_BASE_URL,
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
rewrite: path => path.replace('/api/', '/'),
},
}

Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "chatgpt-web",
"version": "2.7.1",
"version": "2.7.2",
"private": false,
"description": "ChatGPT Web",
"author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
Expand All @@ -24,6 +24,7 @@
},
"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",
Expand Down
6 changes: 6 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

31 changes: 1 addition & 30 deletions service/src/chatgpt.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,35 +65,6 @@ 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',
Expand All @@ -107,4 +78,4 @@ async function chatConfig() {

export type { ChatContext, ChatMessage }

export { chatReply, chatReplyProcess, chatConfig }
export { chatReply, chatConfig }
22 changes: 2 additions & 20 deletions service/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import express from 'express'
import type { ChatContext, ChatMessage } from './chatgpt'
import { chatConfig, chatReply, chatReplyProcess } from './chatgpt'
import type { ChatContext } from './chatgpt'
import { chatConfig, chatReply } from './chatgpt'

const app = express()
const router = express.Router()
Expand All @@ -26,24 +26,6 @@ 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()
Expand Down
18 changes: 1 addition & 17 deletions src/api/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { AxiosProgressEvent, GenericAbortSignal } from 'axios'
import type { GenericAbortSignal } from 'axios'
import { post } from '@/utils/request'

export function fetchChatAPI<T = any>(
Expand All @@ -13,22 +13,6 @@ 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',
Expand Down
23 changes: 0 additions & 23 deletions src/directives/highlight.ts

This file was deleted.

7 changes: 1 addition & 6 deletions src/directives/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1 @@
import type { App } from 'vue'
import setupHighlightDirective from './highlight'

export function setupDirectives(app: App) {
setupHighlightDirective(app)
}
export function setupDirectives() {}
3 changes: 0 additions & 3 deletions src/main.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
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'
Expand All @@ -11,8 +10,6 @@ async function bootstrap() {

setupStore(app)

setupDirectives(app)

await setupRouter(app)

app.mount('#app')
Expand Down
1 change: 1 addition & 0 deletions src/plugins/assets.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'highlight.js/styles/xcode.css'
import 'github-markdown-css/github-markdown.css'
import '@/styles/global.css'

/** Tailwind's Preflight Style Override */
Expand Down
40 changes: 16 additions & 24 deletions src/views/chat/components/Message/Text.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
<script lang="ts" setup>
import { computed } from 'vue'
import { marked } from 'marked'
import includeCode from '@/utils/functions/includeCode'
import hljs from 'highlight.js'
const props = defineProps<Props>()
marked.setOptions({
renderer: new marked.Renderer(),
highlight(code) {
return hljs.highlightAuto(code).value
},
})
interface Props {
inversion?: boolean
Expand All @@ -10,8 +19,6 @@ interface Props {
loading?: boolean
}
const props = defineProps<Props>()
const wrapClass = computed(() => {
return [
'text-wrap',
Expand All @@ -24,11 +31,8 @@ const wrapClass = computed(() => {
})
const text = computed(() => {
if (props.text) {
if (!includeCode(props.text))
return marked.parse(props.text)
return props.text
}
if (props.text)
return marked(props.text)
return ''
})
</script>
Expand All @@ -39,25 +43,13 @@ const text = computed(() => {
<span class="w-[5px] h-[20px] block animate-blink" />
</template>
<template v-else>
<code v-if="includeCode(text)" v-highlight class="leading-relaxed" v-text="text" />
<div v-else class="leading-relaxed break-all" v-html="text" />
<div class="leading-relaxed break-all">
<div :class="[{ 'markdown-body': !inversion }]" v-html="text" />
</div>
</template>
</div>
</template>

<style lang="less">
.text-wrap{
img{
max-width: 100%;
vertical-align: middle;
}
a {
color: #2d5cf6
}
}
.hljs {
background-color: #fff0 !important;
white-space: break-spaces;
}
@import url(./style.less);
</style>
8 changes: 4 additions & 4 deletions src/views/chat/components/Message/index.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang='ts'>
import Avatar from './Avatar.vue'
import Text from './Text.vue'
import AvatarComponent from './Avatar.vue'
import TextComponent from './Text.vue'
import { SvgIcon } from '@/components/common'
interface Props {
Expand Down Expand Up @@ -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']"
>
<Avatar :image="inversion" />
<AvatarComponent :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']">
<Text
<TextComponent
:inversion="inversion"
:error="error"
:text="text"
Expand Down
22 changes: 22 additions & 0 deletions src/views/chat/components/Message/style.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
.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;
}
}

0 comments on commit b6fd9ae

Please sign in to comment.