feat: 流式输出内容 (#93)

* feat: 流式输出内容

* fix: 修复异常状态

* feat: markdown 链接颜色
This commit is contained in:
Redon 2023-02-22 23:03:20 +08:00 committed by GitHub
parent ba83856173
commit 09359c3c46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 150 additions and 43 deletions

View File

@ -15,6 +15,7 @@
},
"scripts": {
"start": "esno ./src/index.ts",
"dev": "esno watch ./src/index.ts",
"prod": "esno ./build/index.js",
"build": "pnpm clean && tsup",
"clean": "rimraf build",

View File

@ -1,6 +1,6 @@
import * as dotenv from 'dotenv'
import 'isomorphic-fetch'
import type { ChatGPTAPI, SendMessageOptions } from 'chatgpt'
import type { ChatGPTAPI, ChatMessage, SendMessageOptions } from 'chatgpt'
import { ChatGPTUnofficialProxyAPI } from 'chatgpt'
import { sendResponse } from './utils'
@ -8,7 +8,7 @@ dotenv.config()
let apiModel: 'ChatGPTAPI' | 'ChatGPTUnofficialProxyAPI' | undefined
export interface ChatContext {
interface ChatContext {
conversationId?: string
parentMessageId?: string
}
@ -65,6 +65,34 @@ 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',
@ -76,4 +104,6 @@ async function chatConfig() {
})
}
export { chatReply, chatConfig }
export type { ChatContext, ChatMessage }
export { chatReply, chatReplyProcess, chatConfig }

View File

@ -1,6 +1,6 @@
import express from 'express'
import type { ChatContext } from './chatgpt'
import { chatConfig, chatReply } from './chatgpt'
import type { ChatContext, ChatMessage } from './chatgpt'
import { chatConfig, chatReply, chatReplyProcess } from './chatgpt'
const app = express()
const router = express.Router()
@ -26,6 +26,23 @@ 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()

View File

@ -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,21 @@ 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',

View File

@ -1,4 +1,4 @@
import type { AxiosResponse, GenericAbortSignal } from 'axios'
import type { AxiosProgressEvent, AxiosResponse, GenericAbortSignal } from 'axios'
import request from './axios'
export interface HttpOption {
@ -6,6 +6,7 @@ export interface HttpOption {
data?: any
method?: string
headers?: any
onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void
signal?: GenericAbortSignal
beforeRequest?: () => void
afterRequest?: () => void
@ -17,9 +18,11 @@ export interface Response<T = any> {
status: string
}
function http<T = any>({ url, data, method, headers, signal, beforeRequest, afterRequest }: HttpOption) {
function http<T = any>(
{ url, data, method, headers, onDownloadProgress, signal, beforeRequest, afterRequest }: HttpOption,
) {
const successHandler = (res: AxiosResponse<Response<T>>) => {
if (res.data.status === 'Success')
if (res.data.status === 'Success' || typeof res.data === 'string')
return res.data
return Promise.reject(res.data)
@ -37,17 +40,18 @@ function http<T = any>({ url, data, method, headers, signal, beforeRequest, afte
const params = Object.assign(typeof data === 'function' ? data() : data ?? {}, {})
return method === 'GET'
? request.get(url, { params, signal }).then(successHandler, failHandler)
: request.post(url, params, { headers, signal }).then(successHandler, failHandler)
? request.get(url, { params, signal, onDownloadProgress }).then(successHandler, failHandler)
: request.post(url, params, { headers, signal, onDownloadProgress }).then(successHandler, failHandler)
}
export function get<T = any>(
{ url, data, method = 'GET', signal, beforeRequest, afterRequest }: HttpOption,
{ url, data, method = 'GET', onDownloadProgress, signal, beforeRequest, afterRequest }: HttpOption,
): Promise<Response<T>> {
return http<T>({
url,
method,
data,
onDownloadProgress,
signal,
beforeRequest,
afterRequest,
@ -55,13 +59,14 @@ export function get<T = any>(
}
export function post<T = any>(
{ url, data, method = 'POST', headers, signal, beforeRequest, afterRequest }: HttpOption,
{ url, data, method = 'POST', headers, onDownloadProgress, signal, beforeRequest, afterRequest }: HttpOption,
): Promise<Response<T>> {
return http<T>({
url,
method,
data,
headers,
onDownloadProgress,
signal,
beforeRequest,
afterRequest,

View File

@ -15,7 +15,7 @@ const props = defineProps<Props>()
const wrapClass = computed(() => {
return [
'text-wrap',
'p-2',
'p-3',
'min-w-[20px]',
'rounded-md',
props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
@ -51,6 +51,9 @@ const text = computed(() => {
max-width: 100%;
vertical-align: middle;
}
a {
color: #2d5cf6
}
}
.hljs {

View File

@ -8,7 +8,7 @@ import { useChat } from './hooks/useChat'
import { HoverButton, SvgIcon } from '@/components/common'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { useChatStore } from '@/store'
import { fetchChatAPI } from '@/api'
import { fetchChatAPIProcess } from '@/api'
let controller = new AbortController()
@ -80,8 +80,19 @@ async function onConversation() {
)
scrollToBottom()
let offset = 0
try {
const { data } = await fetchChatAPI<Chat.ConversationResponse>(message, options, controller.signal)
await fetchChatAPIProcess<Chat.ConversationResponse>({
prompt: message,
options,
signal: controller.signal,
onDownloadProgress: ({ event }) => {
const xhr = event.target
const { responseText } = xhr
const chunk = responseText.substring(offset)
offset = responseText.length
try {
const data = JSON.parse(chunk)
updateChat(
+uuid,
dataSources.value.length - 1,
@ -97,6 +108,12 @@ async function onConversation() {
)
scrollToBottom()
}
catch (error) {
//
}
},
})
}
catch (error: any) {
let errorMessage = error?.message ?? 'Something went wrong, please try again later.'
@ -119,6 +136,7 @@ async function onConversation() {
scrollToBottom()
}
finally {
offset = 0
loading.value = false
}
}
@ -154,8 +172,19 @@ async function onRegenerate(index: number) {
},
)
let offset = 0
try {
const { data } = await fetchChatAPI<Chat.ConversationResponse>(message, options, controller.signal)
await fetchChatAPIProcess<Chat.ConversationResponse>({
prompt: message,
options,
signal: controller.signal,
onDownloadProgress: ({ event }) => {
const xhr = event.target
const { responseText } = xhr
const chunk = responseText.substring(offset)
offset = responseText.length
try {
const data = JSON.parse(chunk)
updateChat(
+uuid,
index,
@ -170,8 +199,14 @@ async function onRegenerate(index: number) {
},
)
}
catch (error) {
//
}
},
})
}
catch (error: any) {
let errorMessage = 'Something went wrong, please try again later.'
let errorMessage = error?.message ?? 'Something went wrong, please try again later.'
if (error.message === 'canceled')
errorMessage = 'Request canceled. Please try again.'
@ -192,6 +227,7 @@ async function onRegenerate(index: number) {
}
finally {
loading.value = false
offset = 0
}
}