From fc3c36098594a185b60bd98d6406e80812f67d24 Mon Sep 17 00:00:00 2001 From: archer <545436317@qq.com> Date: Tue, 13 Jun 2023 10:45:07 +0800 Subject: [PATCH] fix: context menu --- client/package.json | 4 +- client/pnpm-lock.yaml | 4 +- .../components/Markdown/MermaidCodeBlock.tsx | 16 ++--- client/src/pages/chat/components/History.tsx | 18 ++++-- .../src/pages/chat/components/QuoteModal.tsx | 59 ++++++++++--------- .../pages/chat/components/ShareHistory.tsx | 18 ++++-- client/src/pages/chat/index.tsx | 1 - client/src/pages/chat/share.tsx | 2 +- client/src/pages/kb/components/Test.tsx | 3 +- 9 files changed, 71 insertions(+), 54 deletions(-) diff --git a/client/package.json b/client/package.json index 20cb90c80..75e58ed70 100644 --- a/client/package.json +++ b/client/package.json @@ -13,8 +13,8 @@ "@alicloud/openapi-client": "^0.4.5", "@alicloud/tea-util": "^1.4.5", "@chakra-ui/icons": "^2.0.17", - "@chakra-ui/react": "^2.7.0", - "@chakra-ui/system": "^2.5.8", + "@chakra-ui/react": "^2.5.1", + "@chakra-ui/system": "^2.5.5", "@dqbd/tiktoken": "^1.0.6", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml index cd2eb17c2..b2c7322e1 100644 --- a/client/pnpm-lock.yaml +++ b/client/pnpm-lock.yaml @@ -18,10 +18,10 @@ dependencies: specifier: ^2.0.17 version: registry.npmmirror.com/@chakra-ui/icons@2.0.17(@chakra-ui/system@2.5.8)(react@18.2.0) '@chakra-ui/react': - specifier: ^2.7.0 + specifier: ^2.5.1 version: registry.npmmirror.com/@chakra-ui/react@2.7.0(@emotion/react@11.10.6)(@emotion/styled@11.10.6)(@types/react@18.0.28)(framer-motion@9.0.6)(react-dom@18.2.0)(react@18.2.0) '@chakra-ui/system': - specifier: ^2.5.8 + specifier: ^2.5.5 version: registry.npmmirror.com/@chakra-ui/system@2.5.8(@emotion/react@11.10.6)(@emotion/styled@11.10.6)(react@18.2.0) '@dqbd/tiktoken': specifier: ^1.0.6 diff --git a/client/src/components/Markdown/MermaidCodeBlock.tsx b/client/src/components/Markdown/MermaidCodeBlock.tsx index 91304b729..0091b3b2d 100644 --- a/client/src/components/Markdown/MermaidCodeBlock.tsx +++ b/client/src/components/Markdown/MermaidCodeBlock.tsx @@ -24,9 +24,10 @@ mermaidAPI.initialize({ const MermaidBlock = ({ code }: { code: string }) => { const dom = useRef(null); const [svg, setSvg] = useState(''); + const [errorSvgCode, setErrorSvgCode] = useState(''); useEffect(() => { - try { + (async () => { const punctuationMap: Record = { '，': ',', '；': ';', @@ -50,13 +51,14 @@ const MermaidBlock = ({ code }: { code: string }) => { /([，；。：！？“”‘’【】（）《》、])/g, (match) => punctuationMap[match] ); - - mermaidAPI.render(`mermaid-${Date.now()}`, formatCode, (svgCode: string) => { + try { + const svgCode = await mermaidAPI.render(`mermaid-${Date.now()}`, formatCode); setSvg(svgCode); - }); - } catch (error) { - console.log(error); - } + } catch (error) { + setErrorSvgCode(formatCode); + console.log(error); + } + })(); }, [code]); const onclickExport = useCallback(() => { diff --git a/client/src/pages/chat/components/History.tsx b/client/src/pages/chat/components/History.tsx index ef4357e47..011550781 100644 --- a/client/src/pages/chat/components/History.tsx +++ b/client/src/pages/chat/components/History.tsx @@ -41,6 +41,7 @@ const PcSliderBar = ({ chatId: string; }; const ContextMenuRef = useRef(null); + const onclickContext = useRef(false); const theme = useTheme(); const { isPc } = useGlobalStore(); @@ -68,10 +69,16 @@ const PcSliderBar = ({ // close contextMenu useOutsideClick({ ref: ContextMenuRef, - handler: () => + handler: () => { setTimeout(() => { - setContextMenuData(undefined); - }, 10) + if (contextMenuData && !onclickContext.current) { + setContextMenuData(undefined); + } + }, 10); + setTimeout(() => { + onclickContext.current = false; + }, 10); + } }); const onclickContextMenu = useCallback( @@ -80,9 +87,10 @@ const PcSliderBar = ({ if (!isPc) return; + onclickContext.current = true; setContextMenuData({ - left: e.clientX + 15, - top: e.clientY + 10, + left: e.clientX, + top: e.clientY, history }); }, diff --git a/client/src/pages/chat/components/QuoteModal.tsx b/client/src/pages/chat/components/QuoteModal.tsx index a8246b43c..1493c4939 100644 --- a/client/src/pages/chat/components/QuoteModal.tsx +++ b/client/src/pages/chat/components/QuoteModal.tsx @@ -43,35 +43,6 @@ const QuoteModal = ({ isLoading } = useQuery(['getHistoryQuote'], () => getHistoryQuote({ historyId, chatId })); - /** - * click edit, get new kbDataItem - */ - const onclickEdit = useCallback( - async (item: QuoteItemType) => { - try { - setIsLoading(true); - const data = (await getKbDataItemById(item.id)) as QuoteItemType; - - if (!data) { - throw new Error('该数据已被删除'); - } - - setEditDataItem({ - dataId: data.id, - q: data.q, - a: data.a - }); - } catch (err) { - toast({ - status: 'warning', - title: getErrText(err) - }); - } - setIsLoading(false); - }, - [setIsLoading, toast] - ); - /** * update kbData, update mongo status and reload quotes */ @@ -98,6 +69,36 @@ const QuoteModal = ({ [chatId, historyId, refetch, setIsLoading, toast] ); + /** + * click edit, get new kbDataItem + */ + const onclickEdit = useCallback( + async (item: QuoteItemType) => { + try { + setIsLoading(true); + const data = (await getKbDataItemById(item.id)) as QuoteItemType; + + if (!data) { + updateQuoteStatus(item.id, '已删除'); + throw new Error('该数据已被删除'); + } + + setEditDataItem({ + dataId: data.id, + q: data.q, + a: data.a + }); + } catch (err) { + toast({ + status: 'warning', + title: getErrText(err) + }); + } + setIsLoading(false); + }, + [setIsLoading, toast, updateQuoteStatus] + ); + return ( <> diff --git a/client/src/pages/chat/components/ShareHistory.tsx b/client/src/pages/chat/components/ShareHistory.tsx index 8d8894cc5..de08d3e57 100644 --- a/client/src/pages/chat/components/ShareHistory.tsx +++ b/client/src/pages/chat/components/ShareHistory.tsx @@ -39,6 +39,7 @@ const PcSliderBar = ({ const { isPc } = useGlobalStore(); const ContextMenuRef = useRef(null); + const onclickContext = useRef(false); const [contextMenuData, setContextMenuData] = useState<{ left: number; @@ -51,10 +52,16 @@ const PcSliderBar = ({ // close contextMenu useOutsideClick({ ref: ContextMenuRef, - handler: () => + handler: () => { setTimeout(() => { - setContextMenuData(undefined); - }) + if (contextMenuData && !onclickContext.current) { + setContextMenuData(undefined); + } + }, 10); + setTimeout(() => { + onclickContext.current = false; + }, 10); + } }); const onclickContextMenu = useCallback( @@ -62,10 +69,11 @@ const PcSliderBar = ({ e.preventDefault(); // 阻止默认右键菜单 if (!isPc) return; + onclickContext.current = true; setContextMenuData({ - left: e.clientX + 15, - top: e.clientY + 10, + left: e.clientX, + top: e.clientY, history }); }, diff --git a/client/src/pages/chat/index.tsx b/client/src/pages/chat/index.tsx index 40253c43b..a991db6d6 100644 --- a/client/src/pages/chat/index.tsx +++ b/client/src/pages/chat/index.tsx @@ -78,7 +78,6 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { const [showHistoryQuote, setShowHistoryQuote] = useState(); const [showSystemPrompt, setShowSystemPrompt] = useState(''); const [messageContextMenuData, setMessageContextMenuData] = useState<{ - // message messageContextMenuData left: number; top: number; message: ChatSiteItemType; diff --git a/client/src/pages/chat/share.tsx b/client/src/pages/chat/share.tsx index 5e949da47..0a8d1ba97 100644 --- a/client/src/pages/chat/share.tsx +++ b/client/src/pages/chat/share.tsx @@ -235,7 +235,7 @@ const Chat = ({ shareId, historyId }: { shareId: string; historyId: string }) => { type: 'shareChatFinish', data: { - question: formatPrompts[0].value, + question: formatPrompts[formatPrompts.length - 2].value, answer: responseText } }, diff --git a/client/src/pages/kb/components/Test.tsx b/client/src/pages/kb/components/Test.tsx index ac71e6755..c7aa2a937 100644 --- a/client/src/pages/kb/components/Test.tsx +++ b/client/src/pages/kb/components/Test.tsx @@ -158,8 +158,7 @@ const Test = () => { 'repeat(1,1fr)', 'repeat(1,1fr)', 'repeat(1,1fr)', - 'repeat(2,1fr)', - 'repeat(3,1fr)' + 'repeat(2,1fr)' ]} gridGap={4} >