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)
2024-08-28 19:05:15 +08:00
parent 527ebec2f5
commit 190e144a70
9 changed files with 232 additions and 2 deletions
--- a/web/src/assets/svg/prompt.svg
+++ b/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>
--- a/web/src/components/highlight-markdown/index.less
+++ b/web/src/components/highlight-markdown/index.less
@@ -0,0 +1,3 @@
+.text {
+  .chunkText;
+}
--- 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 (
    <Markdown
      remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeRaw]}
+      className={styles.text}
      components={
        {
          code(props: any) {
--- a/web/src/components/message-item/group-button.tsx
+++ b/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>
+      )}
    </>
  );
 };
--- a/web/src/components/message-item/index.tsx
+++ b/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>
--- a/web/src/components/message-item/prompt-modal.tsx
+++ 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<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;
--- 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 {