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/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;