feat: support history (InternLM#139)

* feat: update fe readme

* feat: fe readme

* feat: click history and optimize ue

* feat: 优化代码组织

* feat: opt

* chore: del unused lock file

* feat: 注释掉代理

---------

Co-authored-by: fangfang <[email protected]>
Co-authored-by: 方芳 <[email protected]>
Co-authored-by: fff <fff>

frontend/React/README.md

@@ -1,4 +1,7 @@
+# Notice
+问题回答过程中离开页面后再回到页面，会导致sse重连！
 # 开始
+## 请使用大于18.0.0的node版本
 ## 准备node.js开发环境
 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，允许你在服务器端运行 JavaScript。以下是在 Windows、Linux 和 macOS 上安装 Node.js 的详细步骤。
 

frontend/React/src/components/answer/index.module.less

@@ -0,0 +1,116 @@
+.answer {
+  border-radius: 8px;
+  background: rgba(33, 38, 192, 0.10);
+  padding: 12px;
+
+  .inner {
+    width: 100%;
+    background-color: #fff;
+    border-radius: 4px;
+    padding: 8px;
+    box-sizing: border-box;
+    transition: all 0.5s ease;
+    margin-bottom: 18px;
+  }
+
+
+  .response {
+    color: #121316;
+    font-size: 14px;
+    line-height: 24px;
+    padding: 18px 42px;
+
+    h3 {
+      font-size: 24px;
+      font-weight: 600;
+      line-height: 36px;
+      margin: 0 0 16px 0;
+    }
+
+    h4 {
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 30px;
+      margin: 0 0 8px 0;
+    }
+
+    p {
+      color: rgba(18, 19, 22, 0.80);
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 28px;
+      margin: 0 0 16px 0;
+    }
+
+    ul {
+      margin-bottom: 8px;
+      padding-left: 22px;
+    }
+
+    li {
+      color: rgba(18, 19, 22, 0.80);
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 28px;
+
+      p {
+        margin-bottom: 4px;
+      }
+    }
+  }
+}
+
+.draft {
+  width: 100%;
+  white-space: wrap;
+  // display: flex;
+  // justify-content: flex-start;
+  // align-items: flex-start;
+
+  .loading,
+  .loading>div {
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0;
+    color: #fff;
+    background-color: #f90;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    margin-right: 3px;
+    flex-shrink: 0;
+  }
+
+  .loading>div {
+    display: inline-block;
+    float: none;
+    background-color: currentColor;
+    border: 0 solid currentColor;
+  }
+
+  .loading>div:nth-child(1) {
+    animation-delay: -200ms;
+  }
+
+  .loading>div:nth-child(2) {
+    animation-delay: -100ms;
+  }
+
+  .loading>div:nth-child(3) {
+    animation-delay: 0ms;
+  }
+
+  .loading>div {
+    width: 3px;
+    height: 3px;
+    margin: 2px 1px;
+    border-radius: 100%;
+    animation: ball-pulse 1s ease infinite;
+  }
+}

frontend/React/src/components/answer/index.tsx

@@ -0,0 +1,40 @@
+import styles from './index.module.less';
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from 'rehype-raw';
+import { replaceStr } from '@/utils/tools';
+import MindMapGraph from '../mind-map';
+
+interface IProps {
+  renderData: any;
+  isEnd: boolean;
+  response: string;
+  draft: string;
+  chatIsOver: boolean;
+  mapWidth: number;
+  handleHistory: (info: any) => void;
+};
+
+const Answer = ({ renderData, isEnd, chatIsOver, response = '', draft = '', mapWidth, handleHistory }: IProps) => {
+  return <div className={styles.answer}>
+    {
+      renderData?.length > 0 ? <div className={styles.inner}>
+        <MindMapGraph isEnd={isEnd} renderData={renderData} handleHistory={handleHistory} mapWidth={mapWidth} />
+      </div> : <></>
+    }
+    {
+      !response && <div className={styles.draft}>
+        {/* {!draftEnd && draft && <div className={styles.loading}>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>} */}
+        <ReactMarkdown rehypePlugins={[rehypeRaw]}>{replaceStr(draft)}</ReactMarkdown>
+      </div>
+    }
+    {response && <div className={styles.response}>
+      <ReactMarkdown rehypePlugins={[rehypeRaw]}>{response}</ReactMarkdown>
+    </div>}
+  </div>
+};
+
+export default Answer;