diff --git a/web/package-lock.json b/web/package-lock.json index e6128b5e316..510a8c46883 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -39,6 +39,7 @@ "react18-json-view": "^0.2.8", "reactflow": "^11.11.2", "recharts": "^2.12.4", + "rehype-raw": "^7.0.0", "remark-gfm": "^4.0.0", "umi": "^4.0.90", "umi-request": "^1.4.0", @@ -13955,11 +13956,82 @@ "node": ">= 0.4" } }, + "node_modules/hast-util-from-parse5": { + "version": "8.0.1", + "resolved": "https://registry.npmmirror.com/hast-util-from-parse5/-/hast-util-from-parse5-8.0.1.tgz", + "integrity": "sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==", + "dependencies": { + "@types/hast": "^3.0.0", + "@types/unist": "^3.0.0", + "devlop": "^1.0.0", + "hastscript": "^8.0.0", + "property-information": "^6.0.0", + "vfile": "^6.0.0", + "vfile-location": "^5.0.0", + "web-namespaces": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-from-parse5/node_modules/hast-util-parse-selector": { + "version": "4.0.0", + "resolved": "https://registry.npmmirror.com/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz", + "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==", + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-from-parse5/node_modules/hastscript": { + "version": "8.0.0", + "resolved": "https://registry.npmmirror.com/hastscript/-/hastscript-8.0.0.tgz", + "integrity": "sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==", + "dependencies": { + "@types/hast": "^3.0.0", + "comma-separated-tokens": "^2.0.0", + "hast-util-parse-selector": "^4.0.0", + "property-information": "^6.0.0", + "space-separated-tokens": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-parse-selector": { "version": "2.2.5", "resolved": "https://registry.npmmirror.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz", "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==" }, + "node_modules/hast-util-raw": { + "version": "9.0.4", + "resolved": "https://registry.npmmirror.com/hast-util-raw/-/hast-util-raw-9.0.4.tgz", + "integrity": "sha512-LHE65TD2YiNsHD3YuXcKPHXPLuYh/gjp12mOfU8jxSrm1f/yJpsb0F/KKljS6U9LJoP0Ux+tCe8iJ2AsPzTdgA==", + "dependencies": { + "@types/hast": "^3.0.0", + "@types/unist": "^3.0.0", + "@ungap/structured-clone": "^1.0.0", + "hast-util-from-parse5": "^8.0.0", + "hast-util-to-parse5": "^8.0.0", + "html-void-elements": "^3.0.0", + "mdast-util-to-hast": "^13.0.0", + "parse5": "^7.0.0", + "unist-util-position": "^5.0.0", + "unist-util-visit": "^5.0.0", + "vfile": "^6.0.0", + "web-namespaces": "^2.0.0", + "zwitch": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-to-jsx-runtime": { "version": "2.3.0", "resolved": "https://registry.npmmirror.com/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz", @@ -13982,6 +14054,24 @@ "vfile-message": "^4.0.0" } }, + "node_modules/hast-util-to-parse5": { + "version": "8.0.0", + "resolved": "https://registry.npmmirror.com/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz", + "integrity": "sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==", + "dependencies": { + "@types/hast": "^3.0.0", + "comma-separated-tokens": "^2.0.0", + "devlop": "^1.0.0", + "property-information": "^6.0.0", + "space-separated-tokens": "^2.0.0", + "web-namespaces": "^2.0.0", + "zwitch": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-whitespace": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", @@ -14229,6 +14319,15 @@ "resolved": "https://registry.npmmirror.com/html-url-attributes/-/html-url-attributes-3.0.0.tgz", "integrity": "sha512-/sXbVCWayk6GDVg3ctOX6nxaVj7So40FcFAnWlWGNAB1LpYKcV5Cd10APjPjW80O7zYW2MsjBV4zZ7IZO5fVow==" }, + "node_modules/html-void-elements": { + "version": "3.0.0", + "resolved": "https://registry.npmmirror.com/html-void-elements/-/html-void-elements-3.0.0.tgz", + "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/html-webpack-plugin": { "version": "5.5.0", "resolved": "https://registry.npmmirror.com/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz", @@ -20729,7 +20828,6 @@ "version": "7.1.2", "resolved": "https://registry.npmmirror.com/parse5/-/parse5-7.1.2.tgz", "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", - "dev": true, "dependencies": { "entities": "^4.4.0" } @@ -23751,6 +23849,20 @@ "node": ">= 0.4" } }, + "node_modules/rehype-raw": { + "version": "7.0.0", + "resolved": "https://registry.npmmirror.com/rehype-raw/-/rehype-raw-7.0.0.tgz", + "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==", + "dependencies": { + "@types/hast": "^3.0.0", + "hast-util-raw": "^9.0.0", + "vfile": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/relateurl": { "version": "0.2.7", "resolved": "https://registry.npmmirror.com/relateurl/-/relateurl-0.2.7.tgz", @@ -26790,6 +26902,19 @@ "vfile-message": "^4.0.0" } }, + "node_modules/vfile-location": { + "version": "5.0.3", + "resolved": "https://registry.npmmirror.com/vfile-location/-/vfile-location-5.0.3.tgz", + "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==", + "dependencies": { + "@types/unist": "^3.0.0", + "vfile": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/vfile-message": { "version": "4.0.2", "resolved": "https://registry.npmmirror.com/vfile-message/-/vfile-message-4.0.2.tgz", @@ -27310,6 +27435,15 @@ "minimalistic-assert": "^1.0.0" } }, + "node_modules/web-namespaces": { + "version": "2.0.1", + "resolved": "https://registry.npmmirror.com/web-namespaces/-/web-namespaces-2.0.1.tgz", + "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/web-streams-polyfill": { "version": "3.3.2", "resolved": "https://registry.npmmirror.com/web-streams-polyfill/-/web-streams-polyfill-3.3.2.tgz", diff --git a/web/package.json b/web/package.json index 4f792a9f75c..eae40b54824 100644 --- a/web/package.json +++ b/web/package.json @@ -50,6 +50,7 @@ "react18-json-view": "^0.2.8", "reactflow": "^11.11.2", "recharts": "^2.12.4", + "rehype-raw": "^7.0.0", "remark-gfm": "^4.0.0", "umi": "^4.0.90", "umi-request": "^1.4.0", diff --git a/web/src/assets/svg/prompt.svg b/web/src/assets/svg/prompt.svg new file mode 100644 index 00000000000..1a9388d95a5 --- /dev/null +++ b/web/src/assets/svg/prompt.svg @@ -0,0 +1,27 @@ + + + + + + + + + + \ No newline at end of file diff --git a/web/src/components/highlight-markdown/index.less b/web/src/components/highlight-markdown/index.less new file mode 100644 index 00000000000..4f5535eb428 --- /dev/null +++ b/web/src/components/highlight-markdown/index.less @@ -0,0 +1,3 @@ +.text { + .chunkText; +} diff --git a/web/src/components/highlight-markdown/index.tsx b/web/src/components/highlight-markdown/index.tsx index 7c393fa5c1f..5940ed881be 100644 --- a/web/src/components/highlight-markdown/index.tsx +++ b/web/src/components/highlight-markdown/index.tsx @@ -1,7 +1,10 @@ import Markdown from 'react-markdown'; import SyntaxHighlighter from 'react-syntax-highlighter'; +import rehypeRaw from 'rehype-raw'; import remarkGfm from 'remark-gfm'; +import styles from './index.less'; + const HightLightMarkdown = ({ children, }: { @@ -10,6 +13,8 @@ const HightLightMarkdown = ({ return ( { +export const AssistantGroupButton = ({ + messageId, + content, + prompt, +}: IProps) => { const { visible, hideModal, showModal, onFeedbackOk, loading } = useSendFeedback(messageId); + const { + visible: promptVisible, + hideModal: hidePromptModal, + showModal: showPromptModal, + } = useSetModalState(); const handleLike = useCallback(() => { onFeedbackOk({ thumbup: true }); @@ -39,6 +52,11 @@ export const AssistantGroupButton = ({ messageId, content }: IProps) => { + {prompt && ( + + + + )} {visible && ( { loading={loading} > )} + {promptVisible && ( + + )} ); }; diff --git a/web/src/components/message-item/index.tsx b/web/src/components/message-item/index.tsx index 17329b07b63..9e0fff79457 100644 --- a/web/src/components/message-item/index.tsx +++ b/web/src/components/message-item/index.tsx @@ -115,6 +115,7 @@ const MessageItem = ({ ) : ( diff --git a/web/src/components/message-item/prompt-modal.tsx b/web/src/components/message-item/prompt-modal.tsx new file mode 100644 index 00000000000..f5222e59bb1 --- /dev/null +++ b/web/src/components/message-item/prompt-modal.tsx @@ -0,0 +1,30 @@ +import { IModalProps } from '@/interfaces/common'; +import { IFeedbackRequestBody } from '@/interfaces/request/chat'; +import { Modal, Space } from 'antd'; +import HightLightMarkdown from '../highlight-markdown'; +import SvgIcon from '../svg-icon'; + +const PromptModal = ({ + visible, + hideModal, + prompt, +}: IModalProps & { prompt?: string }) => { + return ( + + + Prompt + + } + width={'80%'} + open={visible} + onCancel={hideModal} + footer={null} + > + {prompt} + + ); +}; + +export default PromptModal; diff --git a/web/src/interfaces/database/chat.ts b/web/src/interfaces/database/chat.ts index cadd0b8f05d..1ddcf8ca5cc 100644 --- a/web/src/interfaces/database/chat.ts +++ b/web/src/interfaces/database/chat.ts @@ -68,6 +68,8 @@ export interface Message { content: string; role: MessageType; doc_ids?: string[]; + prompt?: string; + id?: string; } export interface IReference { @@ -80,6 +82,8 @@ export interface IAnswer { answer: string; reference: IReference; conversationId?: string; + prompt?: string; + id?: string; } export interface Docagg {