From 86a0e7ce232c81a269458d7f87e9528fc0738f2a Mon Sep 17 00:00:00 2001 From: archer <545436317@qq.com> Date: Tue, 29 Aug 2023 17:59:24 +0800 Subject: [PATCH] perf: guide modules --- client/public/icon/logo.svg | 2 +- client/src/components/Avatar/index.tsx | 4 +- client/src/components/ChatBox/index.tsx | 22 ++++---- client/src/components/Layout/navbar.tsx | 8 ++- client/src/components/Markdown/chat/Guide.tsx | 53 ++++++++++--------- client/src/components/Markdown/constant.ts | 3 -- client/src/components/Markdown/img/Image.tsx | 1 + client/src/components/Markdown/index.tsx | 21 +++----- client/src/service/events/generateVector.ts | 4 +- client/src/utils/file.ts | 2 +- client/src/utils/plugin/eventbus.ts | 18 +++++++ 11 files changed, 79 insertions(+), 59 deletions(-) delete mode 100644 client/src/components/Markdown/constant.ts create mode 100644 client/src/utils/plugin/eventbus.ts diff --git a/client/public/icon/logo.svg b/client/public/icon/logo.svg index 2a4b1e7a9..ec5a08663 100644 --- a/client/public/icon/logo.svg +++ b/client/public/icon/logo.svg @@ -1,4 +1,4 @@ - + diff --git a/client/src/components/Avatar/index.tsx b/client/src/components/Avatar/index.tsx index ab45d8c0c..10fecc812 100644 --- a/client/src/components/Avatar/index.tsx +++ b/client/src/components/Avatar/index.tsx @@ -8,8 +8,8 @@ const Avatar = ({ w = '30px', ...props }: ImageProps) => { { + event.on('guideClick', ({ text }: { text: string }) => { + if (!text) return; + handleSubmit((data) => sendPrompt(data, text))(); + }); + + return () => { + event.off('guideClick'); + }; + }, [handleSubmit, sendPrompt]); useEffect(() => { const listen = () => { cancelBroadcast(); @@ -497,15 +507,7 @@ const ChatBox = ( {/* message */} - { - const val = e?.data; - if (e?.event !== EventNameEnum.guideClick || !val) return; - handleSubmit((data) => sendPrompt(data, val))(); - }} - /> + )} diff --git a/client/src/components/Layout/navbar.tsx b/client/src/components/Layout/navbar.tsx index 33741dbad..45db932f1 100644 --- a/client/src/components/Layout/navbar.tsx +++ b/client/src/components/Layout/navbar.tsx @@ -106,7 +106,13 @@ const Navbar = ({ unread }: { unread: number }) => { cursor={'pointer'} onClick={() => router.push('/account')} > - + {/* 导航列表 */} diff --git a/client/src/components/Markdown/chat/Guide.tsx b/client/src/components/Markdown/chat/Guide.tsx index a4288f3d8..de1447d72 100644 --- a/client/src/components/Markdown/chat/Guide.tsx +++ b/client/src/components/Markdown/chat/Guide.tsx @@ -4,13 +4,37 @@ import ReactMarkdown from 'react-markdown'; import RemarkGfm from 'remark-gfm'; import RemarkMath from 'remark-math'; import RehypeKatex from 'rehype-katex'; +import { event } from '@/utils/plugin/eventbus'; import 'katex/dist/katex.min.css'; import styles from '../index.module.scss'; -import { EventNameEnum } from '../constant'; +import Image from '../img/Image'; -const Guide = ({ text, onClick }: { text: string; onClick?: (e: any) => void }) => { - const formatText = useMemo(() => text.replace(/\[(.*?)\]/g, '[$1]()'), [text]); +function Link(e: any) { + const href = e.href; + const text = String(e.children); + return ( + + { + if (href) { + return window.open(href, '_blank'); + } + event.emit('guideClick', { text }); + }} + > + {text} + + + ); +} + +const Guide = ({ text }: { text: string }) => { + const formatText = useMemo(() => text.replace(/\[(.*?)\]($|\n)/g, '[$1]()\n'), [text]); return ( void }) remarkPlugins={[RemarkGfm, RemarkMath]} rehypePlugins={[RehypeKatex]} components={{ - a({ children }: any) { - return ( - - { - if (!onClick) return; - onClick({ - event: EventNameEnum.guideClick, - data: String(children) - }); - }} - > - {String(children)} - - - ); - } + a: Link, + img: Image }} > {formatText} diff --git a/client/src/components/Markdown/constant.ts b/client/src/components/Markdown/constant.ts deleted file mode 100644 index 3c35344a8..000000000 --- a/client/src/components/Markdown/constant.ts +++ /dev/null @@ -1,3 +0,0 @@ -export enum EventNameEnum { - guideClick = 'guideClick' -} diff --git a/client/src/components/Markdown/img/Image.tsx b/client/src/components/Markdown/img/Image.tsx index a71c95c34..16cecdae2 100644 --- a/client/src/components/Markdown/img/Image.tsx +++ b/client/src/components/Markdown/img/Image.tsx @@ -22,6 +22,7 @@ const MdImage = ({ src }: { src?: string }) => { fallbackStrategy={'onError'} cursor={succeed ? 'pointer' : 'default'} loading="eager" + objectFit={'contain'} onLoad={() => { setIsLoading(false); setSucceed(true); diff --git a/client/src/components/Markdown/index.tsx b/client/src/components/Markdown/index.tsx index edd310ba8..eaf37a06c 100644 --- a/client/src/components/Markdown/index.tsx +++ b/client/src/components/Markdown/index.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { useCallback, useMemo } from 'react'; import ReactMarkdown from 'react-markdown'; import RemarkGfm from 'remark-gfm'; import RemarkMath from 'remark-math'; @@ -15,7 +15,7 @@ const MermaidCodeBlock = dynamic(() => import('./img/MermaidCodeBlock')); const MdImage = dynamic(() => import('./img/Image')); const ChatGuide = dynamic(() => import('./chat/Guide')); -function Code({ inline, className, children, onClick }: any) { +function Code({ inline, className, children }: any) { const match = /language-(\w+)/.exec(className || ''); const codeType = match?.[1]; @@ -24,7 +24,7 @@ function Code({ inline, className, children, onClick }: any) { } if (codeType === 'guide') { - return ; + return ; } return ( @@ -33,28 +33,19 @@ function Code({ inline, className, children, onClick }: any) { ); } - function Image({ src }: { src?: string }) { return ; } -const Markdown = ({ - source, - isChatting = false, - onClick -}: { - source: string; - isChatting?: boolean; - onClick?: (e: any) => void; -}) => { +const Markdown = ({ source, isChatting = false }: { source: string; isChatting?: boolean }) => { const components = useMemo( () => ({ img: Image, pre: 'div', p: 'div', - code: (props: any) => + code: Code }), - [onClick] + [] ); return ( diff --git a/client/src/service/events/generateVector.ts b/client/src/service/events/generateVector.ts index bfd149b1d..a3ca70974 100644 --- a/client/src/service/events/generateVector.ts +++ b/client/src/service/events/generateVector.ts @@ -53,8 +53,8 @@ export async function generateVector(): Promise { dataItems = [ { - q: data.q.replace(/[\x00-\x1F]/g, ' '), - a: data.a.replace(/[\x00-\x1F]/g, ' ') + q: data.q.replace(/[\x00-\x08]/g, ' '), + a: data.a.replace(/[\x00-\x08]/g, ' ') } ]; diff --git a/client/src/utils/file.ts b/client/src/utils/file.ts index 432cdd556..8bb01f8d2 100644 --- a/client/src/utils/file.ts +++ b/client/src/utils/file.ts @@ -282,7 +282,7 @@ export const simpleText = (text: string) => { text = text.replace(/\n{2,}/g, '\n'); text = text.replace(/\s{2,}/g, ' '); - text = text.replace(/[\x00-\x1F]/g, ' '); + text = text.replace(/[\x00-\x08]/g, ' '); return text; }; diff --git a/client/src/utils/plugin/eventbus.ts b/client/src/utils/plugin/eventbus.ts new file mode 100644 index 000000000..e01e03174 --- /dev/null +++ b/client/src/utils/plugin/eventbus.ts @@ -0,0 +1,18 @@ +export enum EventNameEnum { + guideClick = 'guideClick' +} +type EventNameType = `${EventNameEnum}`; + +export const event = { + list: new Map(), + on: function (name: EventNameType, fn: Function) { + this.list.set(name, fn); + }, + emit: function (name: EventNameType, data: Record = {}) { + const fn = this.list.get(name); + fn && fn(data); + }, + off: function (name: EventNameType) { + this.list.delete(name); + } +};