feat: Show prompt send to LLM for assistant answer #2098 (#2142)

### What problem does this PR solve?

feat: Show prompt send to LLM for assistant answer #2098
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

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",

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",

web/src/assets/svg/prompt.svg

@@ -0,0 +1,27 @@
+<svg t="1724834000421" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4296"
+    width="200" height="200">
+    <path
+        d="M509.952 260.864c-152.832 0-277.248 124.416-277.248 277.248 0 152.832 124.416 277.248 277.248 277.248 152.832 0 277.248-124.416 277.248-277.248C787.2 385.28 662.784 260.864 509.952 260.864zM509.952 746.24c-114.688 0-208.128-93.44-208.128-208.128 0-114.688 93.44-208.128 208.128-208.128s208.128 93.44 208.128 208.128C717.824 652.8 624.64 746.24 509.952 746.24z"
+        fill="#2c2c2c" p-id="4297"></path>
+    <path
+        d="M509.952 211.2c22.016 0 39.68-17.664 39.68-39.68L549.632 77.056c0-22.016-17.664-39.68-39.68-39.68s-39.68 17.664-39.68 39.68l0 94.464C470.272 193.28 487.936 211.2 509.952 211.2z"
+        fill="#2c2c2c" p-id="4298"></path>
+    <path
+        d="M134.144 538.88l-94.464 0c-22.016 0-39.68 17.664-39.68 39.68s17.664 39.68 39.68 39.68l94.464 0c22.016 0 39.68-17.664 39.68-39.68S155.904 538.88 134.144 538.88z"
+        fill="#2c2c2c" p-id="4299"></path>
+    <path
+        d="M984.32 538.88l-94.464 0c-22.016 0-39.68 17.664-39.68 39.68s17.664 39.68 39.68 39.68l94.464 0c22.016 0 39.68-17.664 39.68-39.68S1006.336 538.88 984.32 538.88z"
+        fill="#2c2c2c" p-id="4300"></path>
+    <path
+        d="M901.632 196.864c-15.616-15.616-40.704-15.616-56.064 0l-66.816 66.816c-15.616 15.616-15.616 40.704 0 56.064 7.68 7.68 17.92 11.52 28.16 11.52 10.24 0 20.224-3.84 28.16-11.52l66.816-66.816C916.992 237.568 916.992 212.224 901.632 196.864z"
+        fill="#2c2c2c" p-id="4301"></path>
+    <path
+        d="M241.152 263.424l-66.816-66.816c-15.616-15.616-40.704-15.616-56.064 0-15.616 15.616-15.616 40.704 0 56.064l66.816 66.816c7.68 7.68 17.92 11.52 28.16 11.52 10.24 0 20.224-3.84 28.16-11.52C256.768 304.128 256.768 279.04 241.152 263.424z"
+        fill="#2c2c2c" p-id="4302"></path>
+    <path
+        d="M605.184 866.56 414.72 866.56c-13.056 0-23.808 9.472-23.808 21.248s10.752 21.248 23.808 21.248l190.464 0c13.056 0 23.808-9.472 23.808-21.248S618.24 866.56 605.184 866.56z"
+        fill="#2c2c2c" p-id="4303"></path>
+    <path
+        d="M577.536 944.384l-135.168 0c-13.056 0-23.808 9.472-23.808 21.248s10.752 21.248 23.808 21.248l135.168 0c13.056 0 23.808-9.472 23.808-21.248S590.592 944.384 577.536 944.384z"
+        fill="#2c2c2c" p-id="4304"></path>
+</svg>

web/src/components/highlight-markdown/index.less

@@ -0,0 +1,3 @@
+.text {
+  .chunkText;
+}

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 (
     <Markdown
       remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeRaw]}
+      className={styles.text}
       components={
         {
           code(props: any) {

web/src/components/message-item/group-button.tsx

@@ -1,4 +1,5 @@
 import CopyToClipboard from '@/components/copy-to-clipboard';
+import { useSetModalState } from '@/hooks/common-hooks';
 import {
   DeleteOutlined,
   DislikeOutlined,
@@ -8,17 +9,29 @@ import {
 } from '@ant-design/icons';
 import { Radio } from 'antd';
 import { useCallback } from 'react';
+import SvgIcon from '../svg-icon';
 import FeedbackModal from './feedback-modal';
 import { useSendFeedback } from './hooks';
+import PromptModal from './prompt-modal';
 
 interface IProps {
   messageId: string;
   content: string;
+  prompt?: string;
 }
 
-export const AssistantGroupButton = ({ messageId, content }: IProps) => {
+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) => {
         <Radio.Button value="d" onClick={showModal}>
           <DislikeOutlined />
         </Radio.Button>
+        {prompt && (
+          <Radio.Button value="e" onClick={showPromptModal}>
+            <SvgIcon name={`prompt`} width={16}></SvgIcon>
+          </Radio.Button>
+        )}
       </Radio.Group>
       {visible && (
         <FeedbackModal
@@ -48,6 +66,13 @@ export const AssistantGroupButton = ({ messageId, content }: IProps) => {
           loading={loading}
         ></FeedbackModal>
       )}
+      {promptVisible && (
+        <PromptModal
+          visible={promptVisible}
+          hideModal={hidePromptModal}
+          prompt={prompt}
+        ></PromptModal>
+      )}
     </>
   );
 };

web/src/components/message-item/index.tsx

@@ -115,6 +115,7 @@ const MessageItem = ({
                 <AssistantGroupButton
                   messageId={item.id}
                   content={item.content}
+                  prompt={item.prompt}
                 ></AssistantGroupButton>
               ) : (
                 <UserGroupButton></UserGroupButton>

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<IFeedbackRequestBody> & { prompt?: string }) => {
+  return (
+    <Modal
+      title={
+        <Space>
+          <SvgIcon name={`prompt`} width={18}></SvgIcon>
+          Prompt
+        </Space>
+      }
+      width={'80%'}
+      open={visible}
+      onCancel={hideModal}
+      footer={null}
+    >
+      <HightLightMarkdown>{prompt}</HightLightMarkdown>
+    </Modal>
+  );
+};
+
+export default PromptModal;

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 {