V0.2.0 (#236)

.gitignore

@@ -1,6 +1,6 @@
 # Byte-compiled / optimized / DLL files
 __pycache__/
-*.py[cod]
+*.py[ciod]
 *$py.class
 
 # C extensions

Dockerfile

@@ -23,4 +23,5 @@ RUN conda create --name fastapi python=3.10 -y && \
 EXPOSE 8000
 
 # 启动 FastAPI 服务
-CMD ["conda", "run", "--no-capture-output", "-n", "fastapi", "uvicorn", "mindsearch.app:app", "--host", "0.0.0.0", "--port", "8002"]
+ENTRYPOINT ["conda", "run", "--no-capture-output", "-n", "fastapi"]
+CMD ["python3", "-m", "mindsearch.app", "--asy", "--host", "0.0.0.0", "--port", "8002"]

README.md

@@ -39,7 +39,7 @@ mv .env.example .env
 Setup FastAPI Server.
 
 ```bash
-python -m mindsearch.app --lang en --model_format internlm_server --search_engine DuckDuckGoSearch
+python -m mindsearch.app --lang en --model_format internlm_server --search_engine DuckDuckGoSearch --asy 
 ```
 
 - `--lang`: language of the model, `en` for English and `cn` for Chinese.
@@ -52,8 +52,10 @@ python -m mindsearch.app --lang en --model_format internlm_server --search_engin
   - `BingSearch` for Bing search engine.
   - `BraveSearch` for Brave search web api engine.
   - `GoogleSearch` for Google Serper web search api engine.
+  - `TencentSearch` for Tencent search api engine.
   
-  Please set your Web Search engine API key as the `WEB_SEARCH_API_KEY` environment variable unless you are using `DuckDuckGo`.
+  Please set your Web Search engine API key as the `WEB_SEARCH_API_KEY` environment variable unless you are using `DuckDuckGo`, or `TencentSearch` that requires secret id as `TENCENT_SEARCH_SECRET_ID` and secret key as `TENCENT_SEARCH_SECRET_KEY`.
+- `--asy`: deploy asynchronous agents.
 
 ### Step4: Setup MindSearch Frontend
 
@@ -98,6 +100,7 @@ To use a different type of web search API, modify the `searcher_type` attribute
 - `DuckDuckGoSearch`
 - `BraveSearch`
 - `BingSearch`
+- `TencentSearch`
 
 For example, to change to the Brave Search API, you would configure it as follows:
 

backend_example.py

@@ -1,34 +1,37 @@
 import json
+
 import requests
 
 # Define the backend URL
-url = 'http://localhost:8002/solve'
-headers = {'Content-Type': 'application/json'}
+url = "http://localhost:8002/solve"
+headers = {"Content-Type": "application/json"}
+
 
 # Function to send a query to the backend and get the response
 def get_response(query):
     # Prepare the input data
-    data = {'inputs': [{'role': 'user', 'content': query}]}
-    
+    data = {"inputs": query}
+
     # Send the request to the backend
     response = requests.post(url, headers=headers, data=json.dumps(data), timeout=20, stream=True)
-    
+
     # Process the streaming response
-    for chunk in response.iter_lines(chunk_size=8192, decode_unicode=False, delimiter=b'\n'):
+    for chunk in response.iter_lines(chunk_size=8192, decode_unicode=False, delimiter=b"\n"):
         if chunk:
-            decoded = chunk.decode('utf-8')
-            if decoded == '\r':
+            decoded = chunk.decode("utf-8")
+            if decoded == "\r":
                 continue
-            if decoded[:6] == 'data: ':
+            if decoded[:6] == "data: ":
                 decoded = decoded[6:]
-            elif decoded.startswith(': ping - '):
+            elif decoded.startswith(": ping - "):
                 continue
             response_data = json.loads(decoded)
-            agent_return = response_data['response']
-            node_name = response_data['current_node']
+            agent_return = response_data["response"]
+            node_name = response_data["current_node"]
             print(f"Node: {node_name}, Response: {agent_return['response']}")
 
+
 # Example usage
-if __name__ == '__main__':
+if __name__ == "__main__":
     query = "What is the weather like today in New York?"
-    get_response(query)
+    get_response(query)

docker/msdl/__main__.py

@@ -55,8 +55,7 @@ def copy_backend_dockerfile(choice):
             "BACKEND_DOCKERFILE_COPIED",
             source_path=str(source_path),
             dest_path=str(dest_path),
-        )
-    )
+        ))
 
 
 def copy_frontend_dockerfile():
@@ -75,19 +74,30 @@ def copy_frontend_dockerfile():
             "FRONTEND_DOCKERFILE_COPIED",
             source_path=str(source_path),
             dest_path=str(dest_path),
-        )
-    )
+        ))
 
 
 def get_user_choices():
     backend_language_choices = [
-        {"name": t("CHINESE"), "value": "cn"},
-        {"name": t("ENGLISH"), "value": "en"},
+        {
+            "name": t("CHINESE"),
+            "value": "cn"
+        },
+        {
+            "name": t("ENGLISH"),
+            "value": "en"
+        },
     ]
 
     model_deployment_type = [
-        {"name": t("CLOUD_MODEL"), "value": CLOUD_LLM_DOCKERFILE},
-        {"name": t("LOCAL_MODEL"), "value": LOCAL_LLM_DOCKERFILE},
+        {
+            "name": t("CLOUD_MODEL"),
+            "value": CLOUD_LLM_DOCKERFILE
+        },
+        {
+            "name": t("LOCAL_MODEL"),
+            "value": LOCAL_LLM_DOCKERFILE
+        },
     ]
 
     backend_language = inquirer.select(
@@ -103,7 +113,10 @@ def get_user_choices():
     model_formats = get_model_formats(model)
     model_format = inquirer.select(
         message=t("MODEL_FORMAT_CHOICE"),
-        choices=[{"name": format, "value": format} for format in model_formats],
+        choices=[{
+            "name": format,
+            "value": format
+        } for format in model_formats],
     ).execute()
 
     # If the model is cloud_llm, ask for the API key
@@ -118,7 +131,8 @@ def get_user_choices():
 
         if existing_api_key:
             use_existing = inquirer.confirm(
-                message=t("CONFIRM_USE_EXISTING_API_KEY", ENV_VAR_NAME=env_var_name),
+                message=t(
+                    "CONFIRM_USE_EXISTING_API_KEY", ENV_VAR_NAME=env_var_name),
                 default=True,
             ).execute()
 
@@ -126,17 +140,16 @@ def get_user_choices():
                 return backend_language, model, model_format
             else:
                 print(
-                    t("CONFIRM_OVERWRITE_EXISTING_API_KEY", ENV_VAR_NAME=env_var_name)
-                )
+                    t("CONFIRM_OVERWRITE_EXISTING_API_KEY",
+                      ENV_VAR_NAME=env_var_name))
         else:
             print(t("PLEASE_INPUT_NEW_API_KEY", ENV_VAR_NAME=env_var_name))
 
         while True:
             api_key = inquirer.secret(
                 message=t(
-                    "PLEASE_INPUT_NEW_API_KEY_FROM_ZERO", ENV_VAR_NAME=env_var_name
-                )
-            ).execute()
+                    "PLEASE_INPUT_NEW_API_KEY_FROM_ZERO",
+                    ENV_VAR_NAME=env_var_name)).execute()
             cleaned_api_key = clean_api_key(api_key)
 
             if validate_api_key(cleaned_api_key, env_var_name, t):
@@ -145,8 +158,7 @@ def get_user_choices():
             else:
                 print(t("INVALID_API_KEY_FORMAT"))
                 retry = inquirer.confirm(
-                    message=t("RETRY_API_KEY_INPUT"), default=True
-                ).execute()
+                    message=t("RETRY_API_KEY_INPUT"), default=True).execute()
                 if not retry:
                     print(t("API_KEY_INPUT_CANCELLED"))
                     sys.exit(1)

docker/msdl/config.py

@@ -4,6 +4,7 @@ from pathlib import Path
 
 
 class FileSystemManager:
+
     @staticmethod
     def ensure_dir(dir_path):
         """Ensure the directory exists, create if it doesn't"""

docker/setup.py

@@ -1,4 +1,4 @@
-from setuptools import setup, find_packages
+from setuptools import find_packages, setup
 
 setup(
     name="msdl",

frontend/React/.gitignore

@@ -14,7 +14,12 @@
 
 # misc
 .DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+    

frontend/React/.prettierignore

@@ -4,4 +4,4 @@ values
 node_modules
 .gitignore
 .prettierignore
-.husky
+.husky

frontend/React/README.md

@@ -1,123 +1,181 @@
 # Notice
-问题回答过程中离开页面后再回到页面，会导致sse重连！
-# 开始
-## 请使用大于18.0.0的node版本
-## 准备node.js开发环境
-Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，允许你在服务器端运行 JavaScript。以下是在 Windows、Linux 和 macOS 上安装 Node.js 的详细步骤。
+- If you leave the page (Make the page invisible) and come back again, it will cause sse to reconnect.
+- the project requires Node.js version >= 18.0.0.
 
-### 在 Windows 上安装 Node.js
-- 步骤 1: 访问 Node.js 官网
+# Prepare your dev-environment for frontend
+[Node.js](https://nodejs.org/en)® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
 
-打开浏览器，访问 [Node.js](https://nodejs.org/zh-cn/download/prebuilt-installer) 官方网站。
+# Node.js Installation Guide (Windows, Linux, macOS)
+## Windows Installation
+- Step 1: Download Node.js
 
-- 步骤 2: 下载 Node.js 安装包
+  1. Open your web browser and visit the [Node.js official website](https://nodejs.org/en).
 
-选择你需要的nodejs版本，设备的类型，点击下载，示例如下图：
-![windows install](./windows-.png)
+  2. Navigate to the "Downloads" section.
 
-- 步骤 3: 安装 Node.js
+  3. Select the desired version (LTS recommended for long-term stability). As of August 2024, the latest LTS version might be v20.x.x.
 
-双击下载的安装包开始安装。
+  4. Click on the "Windows Installer (.msi)" link to download the installation package.
 
-跟随安装向导的指示进行安装。在安装过程中，你可以选择安装位置、是否将 Node.js 添加到系统 PATH 环境变量等选项。推荐选择“添加到 PATH”以便在任何地方都能通过命令行访问 Node.js。
-安装完成后，点击“Finish”结束安装。
+- Step 2: Install Node.js
 
-- 步骤 4: 验证安装
+  1. Double-click the downloaded .msi file to start the installation wizard.
 
-打开命令提示符（CMD）或 PowerShell。
-输入 node -v 并回车，如果系统返回了 Node.js 的版本号，说明安装成功。
-接着，输入 npm -v 并回车，npm 是 Node.js 的包管理器，如果返回了版本号，表示 npm 也已正确安装。
+  2. Click "Next" to proceed.
 
-### 在 Linux 上安装 Node.js
-注意： 由于 Linux 发行版众多，以下以 Ubuntu 为例说明，其他发行版（如 CentOS、Debian 等）的安装方式可能略有不同，可自行查询对应的安装办法。
+  3. Read and accept the license agreement by checking the "I accept the terms in the License Agreement" box.
 
-- 步骤 1: 更新你的包管理器
+  4. Click "Next" again and select the installation directory. It's recommended to change the default location to avoid installing in the C drive.
 
-打开终端。
+  5. Continue clicking "Next" to use the default settings until you reach the "Install" button.
 
-输入 sudo apt update 并回车，以更新 Ubuntu 的包索引。
+  6. Click "Install" to start the installation process.
 
-- 步骤 2: 安装 Node.js
+  7. Wait for the installation to complete and click "Finish" to exit the installation wizard.
 
-对于 Ubuntu 18.04 及更高版本，Node.js 可以直接从 Ubuntu 的仓库中安装。
-输入 sudo apt install nodejs npm 并回车。
-对于旧版本的 Ubuntu 或需要安装特定版本的 Node.js，你可能需要使用如 NodeSource 这样的第三方仓库。
+- Step 3: Verify Installation
+  1. Open the Command Prompt (cmd) by pressing `Win + R`, typing `cmd`, and pressing Enter.
+  2. Type `node -v` and press Enter. You should see the installed Node.js version displayed.
+  3. Type `npm -v`  and press Enter to verify the installed npm version. npm is the package manager that comes bundled with Node.js.
 
-- 步骤 3: 验证安装
+- Step 4: Configure npm Global Path (Optional)
+  If you want to change the default global installation path for npm, follow these steps:
 
-在终端中，输入 node -v 和 npm -v 来验证 Node.js 和 npm 是否已正确安装。
+1. Open the Command Prompt (cmd) as an administrator.
 
-### 在 macOS 上安装 Node.js
+2. Navigate to your Node.js installation directory (e.g., C:\Program Files\nodejs).
 
-#### 下载安装
-- 步骤 1: 访问 Node.js 官网
+3. Create two new folders named node_global and node_cache.
 
-打开浏览器，访问 Node.js 官方网站。
+4. Run the following commands to set the new paths:
 
-- 步骤 2: 下载 Node.js 安装包
+   ```bash
+   npm config set prefix "C:\Program Files\nodejs\node_global"  
+   npm config set cache "C:\Program Files\nodejs\node_cache"
+   ```
 
-在首页找到 macOS 对应的安装包（通常是 .pkg 文件），点击下载。
+5. Open the Environment Variables settings in the System Properties.
+6. Add `C:\Program Files\nodejs\node_global` to the `PATH` variable under User Variables.
+7. Optionally, create a new system variable named `NODE_PATH` and set its value to ` C:\Program Files\nodejs\node_global\node_modules`.
 
-- 步骤 3: 安装 Node.js
+## Linux Installation
+- Step 1: Update Your System
+  Before installing Node.js, ensure your Linux system is up-to-date:
 
-找到下载的 .pkg 文件，双击打开。
-跟随安装向导的指示进行安装。
-安装完成后，点击“Close”结束安装。
+  ```bash
+  sudo apt-get update  
+  sudo apt-get upgrade
+  ```
 
-- 步骤 4: 验证安装
+- Step 2: Install Dependencies
+  Node.js requires certain dependencies to function properly:
 
-打开终端。
+```bash
+sudo apt-get install build-essential libssl-dev
+```
 
-输入 node -v 和 npm -v 来验证 Node.js 和 npm 是否已正确安装。
+- Step 3: Download and Install Node.js
+  You can download the Node.js source code or use a package manager like `curl` or `wget` to download a pre-built binary. For simplicity, this guide assumes you're using a package manager.
 
-#### 使用HomeBrew安装
-前提条件：确保你的macOS上已经安装了Homebrew。如果尚未安装，可以通过以下命令进行安装（以终端操作为例）：
-```
-  /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-```
-按照提示输入密码以确认安装。安装过程中，可能需要你同意许可协议等。
+1. Navigate to the Node.js download page for package managers.
+   Follow the instructions for your Linux distribution. For example, on Ubuntu, you can use:
 
-- 打开终端：
-在macOS上找到并打开“终端”应用程序。
+   ```bash
+   curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -  
+   sudo apt-get install -y nodejs
+   ```
 
-- 使用Homebrew安装Node.js：
-在终端中输入以下命令来安装最新版本的Node.js
-```
-  brew install node
-```
-Homebrew会自动下载Node.js的安装包，并处理相关的依赖项和安装过程。你需要等待一段时间，直到安装完成。
+   Replace 20.x with the desired version number if you don't want the latest version.
 
-- 验证安装：
-安装完成后，你可以通过输入以下命令来验证Node.js是否成功安装：
-```
-  node -v
-```
-如果终端输出了Node.js的版本号，那么表示安装成功。同时，你也可以通过输入npm -v来验证npm（Node.js的包管理器）是否也成功安装。
+- Step 4: Verify Installation
+  1. Open a terminal.
+  2. Type `node -v` and press Enter to check the Node.js version.
+  3. Type `npm -v` and press Enter to verify the npm version.
+
+
+## Installing Node.js on macOS
+
+Installing Node.js on macOS is a straightforward process that can be accomplished using the official installer from the Node.js website or through package managers like Homebrew. This guide will cover both methods.
+
+### Method 1: Using the Official Installer
+- Visit the Node.js Website
+  - Open your web browser and navigate to https://nodejs.org/.
+- Download the Installer
+  - Scroll down to the "Downloads" section.
+  - Click on the "macOS Installer" button to download the .pkg file. Ensure you download the latest version, which as of August 2024, might be v20.x.x or higher.
+- Install Node.js
+  - Once the download is complete, locate the .pkg file in your Downloads folder.
+  - Double-click the file to start the installation process.
+  - Follow the on-screen instructions. Typically, you'll need to agree to the license agreement, select an installation location (the default is usually fine), and click "Continue" or "Install" until the installation is complete.
+- Verify the Installation
+  - Open the Terminal application by going to "Finder" > "Applications" > "Utilities" > "Terminal" or using Spotlight Search (press `Cmd + Space` and type "Terminal").
+  - Type `node -v` and press Enter. This command should display the installed version of Node.js.
+  - Type `npm -v` and press Enter to verify that npm, the Node.js package manager, is also installed.
+
+### Method 2: Using Homebrew
+If you prefer to use a package manager, Homebrew is a popular choice for macOS.
+
+- Install Homebrew (if not already installed)
 
-完成以上步骤后，你应该能在你的 Windows、Linux 或 macOS 系统上成功安装并运行 Node.js。
+  - Open the Terminal.
 
-### 更多
-如需了解更多，可参照：https://nodejs.org/en
+  - Copy and paste the following command into the Terminal and press Enter:
+    ```bash
+    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+    ```
 
-如环境已经准备好，跳转下一步
+  - Follow the on-screen instructions to complete the Homebrew installation.
+      
+- Install Node.js with Homebrew
+  - Once Homebrew is installed, update your package list by running brew update in the Terminal.
+  - To install Node.js, run the following command in the Terminal:
+  ```bash
+      brew install node
+  ```
+  - Homebrew will download and install the latest version of Node.js and npm.
+- Verify the Installation
+  - As with the official installer method, you can verify the installation by typing node -v and npm -v in the Terminal and pressing Enter.
+
+### Additional Configuration (Optional)
+- Configure npm's Global Installation Path (if desired):
+  - You may want to change the default location where globally installed npm packages are stored. Follow the steps outlined in the Node.js documentation or search for guides online to configure this.
+- Switch to a Different Node.js Version (if needed):
+  - If you need to switch between multiple Node.js versions, consider using a version manager like nvm (Node Version Manager). Follow the instructions on the nvm GitHub page to install and use it.
+
+
+By following these steps, you should be able to successfully install Node.js on your system. Remember to keep your Node.js and npm versions up-to-date to take advantage of the latest features and security updates.
 
-## 安装依赖
-进入前端项目根目录
+If your env has been prepared, you can 
+
+# Installation and Setup Instructions
+
+## Installation
 ```
   npm install
 ```
 
-## 启动
+## Start Server
 ```
   npm start
 ```
 
-启动成功后，界面将出现可访问的本地url
+## Visit Server
+```
+  http://localhost:8080
+```
+
+pay attention to the real port in your terminal.maybe it won`t be 8080.
 
-## 配置
-### 接口请求配置
-- 如您需要配置的服务支持跨域，可至/src/config/cgi.ts中修改请求链接，请求链接为http://ip:port/path;
-- 如您需要配置的服务不支持跨域，可至vite.config.ts中配置proxy，示例如下：
+# Config
+## How to modify the request URL
+- Open the file `/src/config/cgi.ts`
+- Modify the value of `GET_SSE_DATA`, be like:
+```
+  export const GET_SSE_DATA = `http://${ip}:${port}/${path}`
+```
+
+## you can also modify the proxy
+- Open the file `vite.config.ts`, modify server like:
 
   ```
     server: {
@@ -129,7 +187,4 @@ Homebrew会自动下载Node.js的安装包，并处理相关的依赖项和安
         }
       }
     }
-  ```
-
-## 知悉
-- 前端服务基于react开发，如需了解react相关知识，可参考：https://react.dev/
+  ```

frontend/React/README_zh-CN.md

@@ -0,0 +1,135 @@
+# Notice
+问题回答过程中离开页面后再回到页面，会导致sse重连！
+# 开始
+## 请使用大于18.0.0的node版本
+## 准备node.js开发环境
+Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，允许你在服务器端运行 JavaScript。以下是在 Windows、Linux 和 macOS 上安装 Node.js 的详细步骤。
+
+### 在 Windows 上安装 Node.js
+- 步骤 1: 访问 Node.js 官网
+
+打开浏览器，访问 [Node.js](https://nodejs.org/zh-cn/download/prebuilt-installer) 官方网站。
+
+- 步骤 2: 下载 Node.js 安装包
+
+选择你需要的nodejs版本，设备的类型，点击下载，示例如下图：
+![windows install](./windows-.png)
+
+- 步骤 3: 安装 Node.js
+
+双击下载的安装包开始安装。
+
+跟随安装向导的指示进行安装。在安装过程中，你可以选择安装位置、是否将 Node.js 添加到系统 PATH 环境变量等选项。推荐选择“添加到 PATH”以便在任何地方都能通过命令行访问 Node.js。
+安装完成后，点击“Finish”结束安装。
+
+- 步骤 4: 验证安装
+
+打开命令提示符（CMD）或 PowerShell。
+输入 node -v 并回车，如果系统返回了 Node.js 的版本号，说明安装成功。
+接着，输入 npm -v 并回车，npm 是 Node.js 的包管理器，如果返回了版本号，表示 npm 也已正确安装。
+
+### 在 Linux 上安装 Node.js
+注意： 由于 Linux 发行版众多，以下以 Ubuntu 为例说明，其他发行版（如 CentOS、Debian 等）的安装方式可能略有不同，可自行查询对应的安装办法。
+
+- 步骤 1: 更新你的包管理器
+
+打开终端。
+
+输入 sudo apt update 并回车，以更新 Ubuntu 的包索引。
+
+- 步骤 2: 安装 Node.js
+
+对于 Ubuntu 18.04 及更高版本，Node.js 可以直接从 Ubuntu 的仓库中安装。
+输入 sudo apt install nodejs npm 并回车。
+对于旧版本的 Ubuntu 或需要安装特定版本的 Node.js，你可能需要使用如 NodeSource 这样的第三方仓库。
+
+- 步骤 3: 验证安装
+
+在终端中，输入 node -v 和 npm -v 来验证 Node.js 和 npm 是否已正确安装。
+
+### 在 macOS 上安装 Node.js
+
+#### 下载安装
+- 步骤 1: 访问 Node.js 官网
+
+打开浏览器，访问 Node.js 官方网站。
+
+- 步骤 2: 下载 Node.js 安装包
+
+在首页找到 macOS 对应的安装包（通常是 .pkg 文件），点击下载。
+
+- 步骤 3: 安装 Node.js
+
+找到下载的 .pkg 文件，双击打开。
+跟随安装向导的指示进行安装。
+安装完成后，点击“Close”结束安装。
+
+- 步骤 4: 验证安装
+
+打开终端。
+
+输入 node -v 和 npm -v 来验证 Node.js 和 npm 是否已正确安装。
+
+#### 使用HomeBrew安装
+前提条件：确保你的macOS上已经安装了Homebrew。如果尚未安装，可以通过以下命令进行安装（以终端操作为例）：
+```
+  /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+```
+按照提示输入密码以确认安装。安装过程中，可能需要你同意许可协议等。
+
+- 打开终端：
+在macOS上找到并打开“终端”应用程序。
+
+- 使用Homebrew安装Node.js：
+在终端中输入以下命令来安装最新版本的Node.js
+```
+  brew install node
+```
+Homebrew会自动下载Node.js的安装包，并处理相关的依赖项和安装过程。你需要等待一段时间，直到安装完成。
+
+- 验证安装：
+安装完成后，你可以通过输入以下命令来验证Node.js是否成功安装：
+```
+  node -v
+```
+如果终端输出了Node.js的版本号，那么表示安装成功。同时，你也可以通过输入npm -v来验证npm（Node.js的包管理器）是否也成功安装。
+
+完成以上步骤后，你应该能在你的 Windows、Linux 或 macOS 系统上成功安装并运行 Node.js。
+
+### 更多
+如需了解更多，可参照：https://nodejs.org/en
+
+如环境已经准备好，跳转下一步
+
+## 安装依赖
+进入前端项目根目录
+```
+  npm install
+```
+
+## 启动
+```
+  npm start
+```
+
+启动成功后，界面将出现可访问的本地url
+
+## 配置
+### 接口请求配置
+- 如您需要配置的服务支持跨域，可至/src/config/cgi.ts中修改请求链接，请求链接为http://ip:port/path;
+- 如您需要配置的服务不支持跨域，可至vite.config.ts中配置proxy，示例如下：
+
+  ```
+    server: {
+      port: 8080,
+      proxy: {
+        "/solve": {
+          target: "https://example.com",
+          changeOrigin: true,
+        }
+      }
+    }
+  ```
+
+## 知悉
+- 前端服务基于react开发，如需了解react相关知识，可参考：https://react.dev/

frontend/React/package.json

@@ -5,7 +5,13 @@
 	"type": "module",
 	"scripts": {
 		"start": "vite --host --mode dev",
+		"start:dev": "vite --host --mode dev",
+		"start:staging": "vite --host --mode staging",
+		"start:prod": "vite --host --mode production",
 		"build": "tsc && vite build",
+		"build:dev": "tsc && vite build --mode dev",
+		"build:staging": "tsc && vite build --mode staging",
+		"build:prod": "tsc && vite build --mode production",
 		"preview": "vite preview",
 		"prettier": "prettier --write ."
 	},

frontend/React/src/App.module.less

@@ -8,12 +8,10 @@
 }
 
 .content {
-  padding-top: 64px;
+  padding: 64px 0 16px 0;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  // display: flex;
-  // justify-content: center;
 }
 
 .header {
@@ -51,4 +49,4 @@
     display: flex;
     align-items: center;
   }
-}
+}

frontend/React/src/App.tsx

@@ -1,7 +1,8 @@
 import style from "./App.module.less";
-import Logo from "@/assets/logo.svg";
+
 import { BrowserRouter } from "react-router-dom";
 import RouterRoutes from "@/routes/routes";
+import Logo from "@/assets/logo.svg";
 
 function App() {
   return (
@@ -12,6 +13,7 @@ function App() {
             <img src={Logo} />
           </div>
         </div>
+
         <div className={style.content}>
           <RouterRoutes />
         </div>

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

@@ -1,39 +0,0 @@
-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;
-  handleHistory: (info: any) => void;
-};
-
-const Answer = ({ renderData, isEnd, chatIsOver, response = '', draft = '', handleHistory }: IProps) => {
-  return <div className={styles.answer}>
-    {
-      renderData?.length > 0 ? <div className={styles.inner}>
-        <MindMapGraph isEnd={isEnd} renderData={renderData} handleHistory={handleHistory} />
-      </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;

frontend/React/src/components/chat-right/index.tsx

@@ -1,310 +0,0 @@
-import { useEffect, useState } from 'react';
-import styles from './index.module.less';
-import classNames from 'classnames';
-import ReactMarkdown from "react-markdown";
-import rehypeRaw from 'rehype-raw';
-import IconFont from '@/components/iconfont';
-import { replaceStr } from '@/utils/tools';
-import PackIcon from '@/assets/pack-up.svg';
-import { Tooltip } from 'antd';
-import Loading from '../loading';
-interface IProps {
-  nodeInfo: any;
-  stashInfo?: any;
-  historyNode?: any;
-  toggleRight?: () => void;
-};
-
-const ChatRight = ({ nodeInfo, stashInfo = null, historyNode = null, toggleRight }: IProps) => {
-  const [subQuestion, setSubQuestion] = useState('');
-  const [queries, setQuries] = useState<any>([]);
-  const [searchList, setSearchList] = useState<any>([]);
-  const [thought, setThought] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectedIds, setSelectedIds] = useState([]);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [conclusion, setConclusion] = useState('');
-  const [thinkingData, setThinking] = useState<any>(null);
-  const [readingData, setReading] = useState<any>(null);
-  // steps展开收起的信息
-  const [collapseInfo, setCollapseInfo] = useState<boolean[]>([true, true]);
-  const [currentNode, setCurrentNode] = useState<any>();
-  // 展开收起
-  const toggleCard = (index: number) => {
-    const arr = [...collapseInfo];
-    arr[index] = !arr[index];
-    setCollapseInfo(arr);
-  };
-  // 高亮searchList
-  const highLightSearchList = (ids: any) => {
-    // console.log('high light ids----------', ids);
-    const timeout = historyNode ? 0 : 3000;
-    setCurrentStep(1);
-    const highlightArr: any = [...searchList];
-    highlightArr.forEach((item: any) => {
-      if (ids.includes(Number(item.id))) {
-        item.highLight = true;
-      }
-    })
-    highlightArr.sort((item1: any, item2: any) => {
-      if (item1.highLight === item2.highLight) {
-        return 0;
-      }
-      // 如果item1是highlight，放在前面  
-      if (item1.highLight) {
-        return -1;
-      }
-      // 如果item2是highlight，放在后面  
-      return 1;
-    })
-    setSearchList(highlightArr);
-    setTimeout(() => {
-      setCurrentStep(2);
-    }, timeout);
-  };
-
-  const handleReceiveHistory = () => {
-    setThought(historyNode?.thinkingData?.thought);
-    setThinking(historyNode.thinkingData);
-    setConclusion(historyNode.conclusion);
-    setReading(historyNode.readingData);
-    setQuries(historyNode.queries);
-    setSearchList(historyNode.searchList);
-    setSelectedIds(historyNode.selectedIds);
-    setSubQuestion(historyNode.subQuestion);
-    setCurrentNode(2);
-    setCollapseInfo([true, true]);
-    setIsLoading(false);
-  };
-
-  const stashNodeInfo = () => {
-    // 已完成节点信息存储
-    const nodeInfo = {
-      thinkingData,
-      queries,
-      readingData,
-      searchList,
-      conclusion,
-      selectedIds,
-      subQuestion
-    };
-    const obj: any = JSON.parse(window.localStorage.getItem('nodesInfo') || '{}');
-    console.log('exsited history nodes-----', obj);
-    obj[currentNode] = nodeInfo;
-    window.localStorage.setItem('nodesInfo', JSON.stringify(obj));
-  };
-
-  const resetStatus = () => {
-    // 记录节点信息
-    stashNodeInfo();
-    // 初始化组件状态
-    console.log('reset status-------');
-    setThought('');
-    setCurrentStep(0);
-    setCollapseInfo([true, true]);
-    setSelectedIds([]);
-    setSearchList([]);
-    setThinking(null);
-    setReading(null);
-    setConclusion('');
-    setSubQuestion('');
-  };
-
-  useEffect(() => {
-    if (!historyNode) return;
-    handleReceiveHistory();
-  }, [historyNode]);
-
-  useEffect(() => {
-    if (!selectedIds.length) return;
-    highLightSearchList(selectedIds);
-  }, [selectedIds]);
-
-  useEffect(() => {
-    if (currentStep === 2) {
-      setCollapseInfo([false, false]);
-    } else {
-      setCollapseInfo([true, true]);
-    }
-  }, [conclusion, currentStep]);
-
-  useEffect(() => {
-    // 如果是response节点就不要处理了，跟右边没关系
-    if (nodeInfo?.current_node === 'response') return;
-    if (nodeInfo && !currentNode) {
-      setIsLoading(true);
-    }
-    if (nodeInfo?.current_node) {
-      setCurrentNode(nodeInfo?.current_node);
-    }
-    if (nodeInfo?.current_node !== currentNode) {
-      console.log('current node changed--------------', nodeInfo);
-    }
-    try {
-      if (!(nodeInfo?.current_node && nodeInfo?.response?.nodes?.[nodeInfo.current_node]?.detail)) return;
-      const nodeDetail = nodeInfo?.response?.nodes?.[nodeInfo.current_node]?.detail;
-      // console.log('nodeInfo-------', nodeDetail);
-      if (nodeDetail?.state === 0) {
-        console.log('node is end------', nodeInfo);
-        resetStatus();
-      }
-      if (nodeDetail?.state === 1) {
-        setThought(nodeDetail.response);
-        nodeDetail?.content && setSubQuestion(nodeDetail?.content);
-        // 如果返回thought的时候还没有searchlist，那就是第一步的思考
-        if (nodeDetail.actions?.[0]?.thought) {
-          setThinking({
-            thought: nodeDetail.actions?.[0]?.thought
-          })
-        }
-        // 第二步的思考
-        if (nodeDetail.actions?.[1]?.thought) {
-          setReading({
-            thought: nodeDetail.actions?.[1]?.thought
-          })
-        }
-        setIsLoading(false);
-        if (nodeDetail?.response && nodeDetail?.actions.length === 2) {
-          setConclusion(nodeDetail?.response);
-        }
-      } else {
-        setIsLoading(true);
-      }
-      if (nodeDetail?.actions?.length > 0) {
-        // 搜索词
-        if (nodeDetail.actions?.[0]?.args?.query?.length > 0) {
-          setQuries(nodeDetail.actions[0]?.args?.query);
-        }
-        // 搜索信息
-        if (nodeDetail.actions?.[0].result[0] && searchList.length === 0) {
-          const content = JSON.parse(nodeDetail.actions[0].result[0].content);
-          const arr: any = Object.keys(content).map(item => {
-            return { id: item, ...content[item] };
-          });
-          setSearchList(arr);
-        }
-        if (nodeDetail.actions?.[1]?.args?.select_ids && selectedIds.length === 0) {
-          setSelectedIds(nodeDetail.actions[1]?.args?.select_ids || []);
-        }
-      }
-    } catch (err) {
-      console.log('error from nodeinfo---');
-    }
-  }, [nodeInfo, currentNode]);
-
-  return <div className={styles.rightContent}>
-    {
-      subQuestion && <div className={styles.toggleIcon} onClick={toggleRight}>
-        <Tooltip placement="top" title="收起">
-          <img src={PackIcon} />
-        </Tooltip></div>
-    }
-    <div className={styles.titleNode}>{subQuestion}</div>
-    {
-      thought && <div className={classNames(
-        styles.steps
-      )}>
-        <div className={styles.title}>
-          <i></i>{"思考"}
-          <div className={styles.open} onClick={() => { toggleCard(0) }}>
-            <IconFont type={collapseInfo[0] ? "icon-shouqi" : "icon-xiangxiazhankai"} />
-          </div>
-        </div>
-        <div className={classNames(
-          styles.con,
-          !collapseInfo[0] ? styles.collapsed : ""
-        )}>
-          <div>
-            <ReactMarkdown rehypePlugins={[rehypeRaw]}>{replaceStr(thinkingData?.thought ? thinkingData?.thought : thought)}</ReactMarkdown>
-          </div>
-          {
-            queries.length > 0 && <div className={styles.query}>
-              <div className={styles.subTitle}><IconFont type="icon-SearchOutlined" />搜索关键词</div>
-              {queries.map((item: string, index: number) => (<div key={`query-item-${item}`} className={classNames(styles.queryItem, styles.fadeIn)}>
-                {item}
-              </div>))}
-            </div>
-          }
-          {
-            searchList.length > 0 && currentStep === 0 && <div className={styles.searchList}>
-              <div className={styles.subTitle}><IconFont type="icon-DocOutlined" />信息来源</div>
-              <div className={styles.scrollCon} style={(searchList.length > 5) ? { height: '300px' } : {}}>
-                <div className={styles.inner} style={(searchList.length > 5) ? {} : {}}>
-                  {
-                    searchList.map((item: any, num: number) => (
-                      <div className={classNames(
-                        styles.searchItem,
-                        item.highLight ? styles.highLight : ""
-                      )} key={`search-item-${item.url}`}>
-                        <p className={styles.summ}>{item.id}. {item?.title}</p>
-                        <p className={styles.url}>{item?.url}</p>
-                      </div>
-                    ))
-                  }
-                </div>
-              </div>
-            </div>
-          }
-        </div>
-      </div>
-    }
-    {
-      currentStep > 0 && <div className={classNames(
-        styles.steps
-      )}>
-        <div className={styles.title}>
-          <i></i>{"信息来源"}
-          <div className={styles.open} onClick={() => { toggleCard(1) }}>
-            <IconFont type={collapseInfo[1] ? "icon-shouqi" : "icon-xiangxiazhankai"} />
-          </div>
-        </div>
-        <div className={classNames(
-          styles.con,
-          !collapseInfo[1] ? styles.collapsed : ""
-        )}>
-          <div>
-            <ReactMarkdown rehypePlugins={[rehypeRaw]}>{replaceStr(readingData?.thought ? readingData?.thought : thought)}</ReactMarkdown>
-          </div>
-          {
-            searchList.length > 0 && <div className={styles.searchList}>
-              <div className={styles.subTitle}><IconFont type="icon-DocOutlined" />信息来源</div>
-              <div className={styles.scrollCon} style={(searchList.length > 5) ? { height: '300px' } : {}}>
-                <div className={styles.inner} style={(searchList.length > 5) ? {} : {}}>
-                  {
-                    searchList.map((item: any, num: number) => (
-                      <div className={classNames(
-                        styles.searchItem,
-                        item.highLight ? styles.highLight : ""
-                      )} key={`search-item-${item.url}`}>
-                        <p className={styles.summ}>{item.id}. {item?.title}</p>
-                        <p className={styles.url}>{item?.url}</p>
-                      </div>
-                    ))
-                  }
-                </div>
-              </div>
-            </div>
-          }
-        </div>
-      </div>
-    }
-    {
-      currentStep === 2 && <div className={classNames(
-        styles.steps
-      )}>
-        <div className={styles.title}>
-          <i></i>{"信息整合"}
-        </div>
-        <div className={styles.con}>
-          <ReactMarkdown rehypePlugins={[rehypeRaw]}>{replaceStr(conclusion)}</ReactMarkdown>
-        </div>
-      </div>
-    }
-
-    {
-      isLoading && <Loading />
-    }
-  </div>
-};
-
-export default ChatRight;

frontend/React/src/components/mind-map-item/index.module.less

@@ -1,117 +0,0 @@
-  article {
-    padding: 6px 16px;
-    border-radius: 8px;
-    height: 38px;
-    border: 1px solid transparent;
-    background: #FFF;
-    color: #121316;
-    text-align: center;
-    font-size: 14px;
-    line-height: 24px;
-    position: relative;
-    box-sizing: border-box;
-
-    &.loading {
-      line-height: 20px;
-      border-radius: 8px;
-      overflow: hidden;
-      border: 1px solid transparent;
-      padding: 4px;
-
-      span {
-        color: #2126C0;
-        background-color: #fff;
-        border-radius: 4px;
-        line-height: 24px;
-        padding: 2px 12px;
-      }
-
-      .looping {
-        --border-width: 4px;
-        --follow-panel-linear-border: linear-gradient(91deg,
-            #5551FF 0.58%,
-            #FF87DE 100.36%);
-
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: calc(100% + var(--border-width) * 2 - 8px);
-        height: calc(100%);
-        background: var(--follow-panel-linear-border);
-        background-size: 300% 300%;
-        background-position: 0 50%;
-        animation: moveGradient 4s alternate infinite;
-      }
-    }
-
-    &.disabled {
-      border-radius: 8px;
-      border: 1px solid #D7D8DD;
-      color: rgba(18, 19, 22, 0.35);
-    }
-
-    &.finished {
-      cursor: pointer;
-      border: 1px solid #2126C0;
-
-      .finishDot {
-        position: absolute;
-        top: 6px;
-        right: 6px;
-        width: 6px;
-        height: 6px;
-        background-color: #C9C0FE;
-        border-radius: 50%;
-      }
-    }
-
-    &.init {
-      border: 1px solid transparent;
-      cursor: auto;
-    }
-
-    span {
-      display: block;
-      white-space: nowrap;
-      max-width: 160px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      position: relative;
-      z-index: 20;
-    }
-
-    span.status {
-      color: #4082FE;
-    }
-
-  }
-
-  ul.onlyone {
-    &:before {
-      opacity: 0;
-    }
-
-    >li {
-      margin-left: 0px;
-    }
-
-    &>li:after {
-      opacity: 0;
-    }
-
-    &>li:before {
-      // left: 0;
-    }
-  }
-
-  .endLine {
-    border-bottom: 1px solid #D7D8DD;
-    width: 3000px;
-    transition: width 1s ease-in-out;
-  }
-
-  @keyframes moveGradient {
-    50% {
-      background-position: 100% 50%;
-    }
-  }

frontend/React/src/components/mind-map-item/index.tsx

@@ -1,50 +0,0 @@
-import { message } from 'antd';
-import styles from './index.module.less';
-import classNames from 'classnames';
-
-// 递归组件用于渲染mindMap中的节点  
-const MindMapItem = ({ item, isEnd, selectNode }: any) => {
-  // 递归渲染子节点  
-  const renderChildren = () => {
-    if (item.children && item.children.length > 0) {
-      return (
-        <ul className={item.children.length === 1 ? styles.onlyone : ''}>
-          {item.children.map((child: any) => (
-            <MindMapItem key={child.name} item={child} isEnd={isEnd} selectNode={selectNode} />
-          ))}
-        </ul>
-      );
-    }
-    return null;
-  };
-
-  const handleClick = () => {
-    if (item.state !== 3) {
-      message.warning('思考中，请稍后');
-      return;
-    }
-    selectNode(item.name);
-  };
-
-  return (
-    <li>
-      <article
-        onClick={handleClick}
-        className={
-          classNames(
-            item.state === 1 ? styles.loading : item.state === 2 ? styles.disabled : item.state === 3 ? styles.finished : "",
-            item.id === 0 ? styles.init : ''
-          )}>
-        <span>{item.name}</span>
-        {item.state === 1 && <div className={styles.looping}></div>}
-        {item.id !== 0 && <div className={styles.finishDot}></div>}
-      </article>
-      {item.children.length > 0 && renderChildren()}
-      {
-        isEnd && item.children?.length === 0 && <div className={classNames(styles.endLine, "endline")}></div>
-      }
-    </li>
-  );
-};
-
-export default MindMapItem;

frontend/React/src/config/cgi.ts

@@ -1,2 +0,0 @@
-export const mode = import.meta.env.MODE;
-export const GET_SSE_DATA = '/solve';

frontend/React/src/global.d.ts

@@ -1 +1 @@
-declare module 'event-source-polyfill';
+declare module 'event-source-polyfill';

frontend/React/src/index.less

@@ -8,8 +8,6 @@ html,
   font-family: "PingFang SC";
   font-size: 14px;
   line-height: 21px;
-  min-width: 1280px;
-  overflow-x: auto;
 }
 
 #global__message-container {
@@ -61,4 +59,4 @@ li> :nth-last-child(1).f {
   line-height: 14px;
   position: relative;
   top: -2px;
-}
+}

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

@@ -0,0 +1,110 @@
+.answer {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    width: 100%;
+
+    .avatar {
+        width: 32px;
+        height: 32px;
+        margin-right: 16px;
+        border-radius: 50%;
+        flex-shrink: 0;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    .reaponseAarea {
+        display: flex;
+        flex-direction: column;
+        width: calc(100% - 48px);
+        background-color: #F4F5F9;
+        padding: 12px 16px;
+        border-radius: 16px;
+        overflow-x: hidden;
+    }
+
+    .inner {
+        width: 100%;
+        overflow-x: hidden;
+        background-color: #fff;
+        border-radius: 16px;
+        border: 1px solid var(----line-2, #EBECF0);
+        box-sizing: border-box;
+        transition: all 0.5s ease;
+        margin-bottom: 16px;
+        position: relative;
+    }
+
+    .graphIcon {
+        padding: 2px 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 8px;
+        border: 1px solid var(----line-2, #EBECF0);
+        background: var(---fill-0, #FFF);
+        color: #121316CC;
+        font-size: 14px;
+        line-height: 24px;
+        cursor: pointer;
+
+        svg {
+            margin-left: 4px;
+        }
+
+        &:hover {
+            background-color: #D7D8DD;
+            color: #121316CC;
+
+            svg path {
+                fill: #121316CC;
+            }
+        }
+    }
+
+    .showGraph {
+        width: 118px;
+        margin-bottom: 16px;
+        border-radius: 8px;
+        border: 1px solid var(----line-2, #EBECF0);
+        background: var(---fill-0, #FFF);
+    }
+
+    .closeGraph {
+        position: absolute;
+        right: 12px;
+        bottom: 12px;
+    }
+
+    .reaponse {
+        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;
+    // }
+}
+
+.draft {
+    width: 100%;
+    white-space: wrap;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+}

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

@@ -0,0 +1,108 @@
+import styles from './index.module.less';
+import MindMapGraph from '../mind-map';
+import { MindsearchContext } from '../../provider/context';
+import MindSearchAvatar from '../../assets/mindsearch-avatar.svg';
+import CustomMarkdown from '../custom-markdown';
+import { useState, useEffect, useContext } from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    adjList: any;
+    isEnd: boolean;
+    response: string;
+    refList: any;
+    listId: number;
+    question: string;
+    handleNodeClick: (info: any, idx: number) => void;
+}
+
+const Answer = ({ refList = null, adjList, isEnd, response = '', listId, handleNodeClick, question = '' }: IProps) => {
+    const { chatIsOver } = useContext(MindsearchContext);
+    const [showGraph, setShowGraph] = useState(true);
+    // 整体的渲染树
+    const [renderData, setRenderData] = useState<any[]>([]);
+
+    const toggleGraph = () => {
+        setShowGraph(!showGraph);
+    };
+
+    const handleClick = (node: string) => {
+        handleNodeClick(node, listId);
+    };
+
+    const generateMapData = (arr: []) => {
+        const tempArr: any[] = arr.map((item: { name: string; id: number; state: number }) => {
+            if (item.name && adjList[item.name]) {
+                return {
+                    ...item,
+                    children: generateMapData(adjList?.[item.name]),
+                };
+            }
+        });
+        return tempArr;
+    };
+
+    const convertTreeData = () => {
+        const root: any = {
+            id: 0,
+            name: '原始问题',
+            state: 3,
+            children: generateMapData(adjList?.root || []),
+        };
+
+        // 返回包含根节点的数组
+        // console.log('renderData-----------', [root]);
+        setRenderData([root]);
+    };
+
+    useEffect(() => {
+        if (!adjList || Object.keys(adjList)?.length < 2) {
+            setRenderData([]);
+            return;
+        };
+        convertTreeData();
+    }, [adjList]);
+
+    return <div className={styles.answer}>
+        <div className={styles.avatar}>
+            <img src={MindSearchAvatar} alt="mindsearch-avatar" />
+        </div>
+        <div className={styles.reaponseAarea}>
+            {
+                showGraph ? <>
+                    {
+                        (renderData?.length > 0) && <div className={styles.inner}>
+                            <MindMapGraph
+                                listId={listId}
+                                isEnd={isEnd}
+                                renderData={renderData}
+                                handleNodeClick={handleClick}
+                                key={`graph-${question}`}
+                            />
+                            <div className={classNames(styles.graphIcon, styles.closeGraph)} onClick={toggleGraph}>
+                                收起
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                    <path fillRule="evenodd" clipRule="evenodd" d="M2.66667 2C2.29848 2 2 2.29848 2 2.66667V6C2 6.36819 2.29848 6.66667 2.66667 6.66667C3.03486 6.66667 3.33333 6.36819 3.33333 6V3.33333H6C6.36819 3.33333 6.66667 3.03486 6.66667 2.66667C6.66667 2.29848 6.36819 2 6 2H2.66667ZM13.3333 14C13.7015 14 14 13.7015 14 13.3333V10C14 9.63181 13.7015 9.33333 13.3333 9.33333C12.9651 9.33333 12.6667 9.63181 12.6667 10V12.6667H10C9.63181 12.6667 9.33333 12.9651 9.33333 13.3333C9.33333 13.7015 9.63181 14 10 14H13.3333ZM6.25519 9.38392C6.17658 9.35132 6.09039 9.33333 6 9.33333H2.66667C2.29848 9.33333 2 9.63181 2 10C2 10.3682 2.29848 10.6667 2.66667 10.6667H4.39052L2.19526 12.8619C1.93491 13.1223 1.93491 13.5444 2.19526 13.8047C2.45561 14.0651 2.87772 14.0651 3.13807 13.8047L5.33333 11.6095L5.33333 13.3333C5.33333 13.7015 5.63181 14 6 14C6.36819 14 6.66667 13.7015 6.66667 13.3333V10C6.66667 9.81812 6.59383 9.65325 6.47574 9.53297L6.46703 9.52426C6.40414 9.46249 6.33203 9.41571 6.25519 9.38392ZM10.6667 2.66667C10.6667 2.29848 10.3682 2 10 2C9.63181 2 9.33333 2.29848 9.33333 2.66667V6C9.33333 6.36819 9.63181 6.66667 10 6.66667L13.3333 6.66667C13.7015 6.66667 14 6.36819 14 6C14 5.63181 13.7015 5.33333 13.3333 5.33333L11.6095 5.33333L13.8047 3.13807C14.0651 2.87772 14.0651 2.45561 13.8047 2.19526C13.5444 1.93491 13.1223 1.93491 12.8619 2.19526L10.6667 4.39053V2.66667Z" fill="#121316" fillOpacity="0.8" />
+                                </svg>
+                            </div>
+                        </div>
+                    }
+                </>
+                    : <div className={classNames(styles.graphIcon, styles.showGraph)} onClick={toggleGraph}>
+                        查看思考节点
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                            <path fillRule="evenodd" clipRule="evenodd" d="M2.66667 2C2.29848 2 2 2.29848 2 2.66667V6C2 6.36819 2.29848 6.66667 2.66667 6.66667C3.03486 6.66667 3.33333 6.36819 3.33333 6V3.33333H6C6.36819 3.33333 6.66667 3.03486 6.66667 2.66667C6.66667 2.29848 6.36819 2 6 2H2.66667ZM13.3333 14C13.7015 14 14 13.7015 14 13.3333V10C14 9.63181 13.7015 9.33333 13.3333 9.33333C12.9651 9.33333 12.6667 9.63181 12.6667 10V12.6667H10C9.63181 12.6667 9.33333 12.9651 9.33333 13.3333C9.33333 13.7015 9.63181 14 10 14H13.3333ZM6.25519 9.38392C6.17658 9.35132 6.09039 9.33333 6 9.33333H2.66667C2.29848 9.33333 2 9.63181 2 10C2 10.3682 2.29848 10.6667 2.66667 10.6667H4.39052L2.19526 12.8619C1.93491 13.1223 1.93491 13.5444 2.19526 13.8047C2.45561 14.0651 2.87772 14.0651 3.13807 13.8047L5.33333 11.6095L5.33333 13.3333C5.33333 13.7015 5.63181 14 6 14C6.36819 14 6.66667 13.7015 6.66667 13.3333V10C6.66667 9.81812 6.59383 9.65325 6.47574 9.53297L6.46703 9.52426C6.40414 9.46249 6.33203 9.41571 6.25519 9.38392ZM10.6667 2.66667C10.6667 2.29848 10.3682 2 10 2C9.63181 2 9.33333 2.29848 9.33333 2.66667V6C9.33333 6.36819 9.63181 6.66667 10 6.66667L13.3333 6.66667C13.7015 6.66667 14 6.36819 14 6C14 5.63181 13.7015 5.33333 13.3333 5.33333L11.6095 5.33333L13.8047 3.13807C14.0651 2.87772 14.0651 2.45561 13.8047 2.19526C13.5444 1.93491 13.1223 1.93491 12.8619 2.19526L10.6667 4.39053V2.66667Z" fill="#121316" fillOpacity="0.8" />
+                        </svg>
+                    </div>
+            }
+
+            {response && (
+                <div className={styles.response}>
+                    <CustomMarkdown source={response} refList={chatIsOver ? refList : null} quoType="merge" />
+                </div>
+            )}
+        </div>
+    </div>
+};
+
+export default Answer;

frontend/React/src/{components/answer → pages/mindsearch/components/answer/loading-animation}/index.module.less

@@ -1,79 +1,10 @@
-.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 {
+.loading,
+.loading > div {
     position: relative;
     box-sizing: border-box;
-  }
+}
 
-  .loading {
+.loading {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -85,32 +16,32 @@
     border-radius: 50%;
     margin-right: 3px;
     flex-shrink: 0;
-  }
+    margin-top: 4px;
+}
 
-  .loading>div {
+.loading > div {
     display: inline-block;
     float: none;
     background-color: currentColor;
     border: 0 solid currentColor;
-  }
+}
 
-  .loading>div:nth-child(1) {
+.loading > div:nth-child(1) {
     animation-delay: -200ms;
-  }
+}
 
-  .loading>div:nth-child(2) {
+.loading > div:nth-child(2) {
     animation-delay: -100ms;
-  }
+}
 
-  .loading>div:nth-child(3) {
+.loading > div:nth-child(3) {
     animation-delay: 0ms;
-  }
+}
 
-  .loading>div {
+.loading > div {
     width: 3px;
     height: 3px;
     margin: 2px 1px;
     border-radius: 100%;
     animation: ball-pulse 1s ease infinite;
-  }
-}
+}

frontend/React/src/pages/mindsearch/components/answer/loading-animation/index.tsx

@@ -0,0 +1,13 @@
+import styles from './index.module.less';
+
+const LoadingAnimation = () => {
+    return (
+        <div className={styles.loading}>
+            <div />
+            <div />
+            <div />
+        </div>
+    );
+};
+
+export default LoadingAnimation;

frontend/React/src/pages/mindsearch/components/chat-right/components/empty-placeholder/index.module.less

@@ -0,0 +1,27 @@
+.emptyDiv {
+    width: 280px;
+    height: 100%;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    .pic {
+        margin-bottom: 8px;
+    }
+
+    p {
+        color: var(--80-text-4, rgba(18, 19, 22, 0.80));
+        text-align: center;
+        font-feature-settings: 'liga' off, 'clig' off;
+
+        /* 段落正文/常规text-1-paragraph-regular */
+        font-family: "PingFang SC";
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        /* 171.429% */
+    }
+}

frontend/React/src/pages/mindsearch/components/chat-right/components/empty-placeholder/index.tsx

@@ -0,0 +1,17 @@
+import styles from './index.module.less';
+import EmptyRightChatImg from '../../../../assets/empty-chat-right.svg';
+
+const EmptyPlaceHolder = () => {
+    return <>
+        <div className={styles.emptyDiv}>
+            <div className={styles.pic}>
+                <img src={EmptyRightChatImg} />
+            </div>
+            <p>
+                请在节点图中选择节点后查看哦~
+            </p>
+        </div>
+    </>
+};
+
+export default EmptyPlaceHolder;

frontend/React/src/pages/mindsearch/components/chat-right/components/query-item/index.module.less

@@ -0,0 +1,30 @@
+.query {
+    &-Item {
+        display: inline-flex;
+        padding: 6px 12px 6px 0;
+        margin-right: 12px;
+        margin-bottom: 8px;
+        color: rgba(18, 19, 22, 0.8);
+        font-size: 14px;
+        line-height: 24px;
+        box-sizing: border-box;
+        overflow: hidden;
+        position: relative;
+
+        &:last-child {
+            &::after {
+                display: none;
+            }
+        }
+
+        &::after {
+            position: absolute;
+            right: 0;
+            top: 10px;
+            width: 1px;
+            height: 16px;
+            border-right: 1px solid #ebecf0;
+            content: '';
+        }
+    }
+}

frontend/React/src/pages/mindsearch/components/chat-right/components/query-item/index.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './index.module.less';
+
+interface IQueryItemProps {
+    item: string;
+}
+const QueryItem = ({ item }: IQueryItemProps) => {
+    return <div className={classNames(styles.queryItem, styles.fadeIn)}>{item}</div>;
+};
+
+export default QueryItem;

frontend/React/src/pages/mindsearch/components/chat-right/components/search-item/index.module.less

@@ -0,0 +1,101 @@
+.searchItem {
+    border-radius: 12px;
+    margin-bottom: 4px;
+    padding: 8px;
+    transition: all 0.5s ease-in-out;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    cursor: pointer;
+
+    .inner {
+        width: 100%;
+        overflow: hidden;
+    }
+
+    &:hover {
+        background-color: #ebecf0;
+    }
+
+    .num {
+        color: var(--60-text-3, rgba(18, 19, 22, 0.6));
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 18px;
+        margin-right: 7px;
+    }
+
+    p {
+        white-space: wrap;
+        max-width: 95%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin: 0 !important;
+    }
+
+    // .origin {
+    //     display: flex;
+    //     justify-content: flex-start;
+    //     align-items: center;
+    //     margin-bottom: 2px;
+
+    //     .icon {
+    //         width: 16px;
+    //         height: 16px;
+    //         border-radius: 4px;
+    //         background-color: #6f7f9b;
+    //         margin-right: 2px;
+    //     }
+
+    //     span {
+    //         color: var(--60-text-3, rgba(18, 19, 22, 0.60));
+    //         font-size: 12px;
+    //         font-weight: 400;
+    //         line-height: 18px;
+    //     }
+    // }
+
+    p.title {
+        overflow: hidden;
+        color: var(---Brand1-5, #3477eb);
+        text-overflow: ellipsis;
+        font-size: 14px;
+        line-height: 24px;
+        margin-bottom: 2px;
+        font-weight: normal;
+
+        a {
+            text-decoration: none;
+            color: var(---Brand1-5, #3477eb);
+            font-weight: normal;
+        }
+    }
+
+    p.url {
+        color: var(--60-text-3, rgba(18, 19, 22, 0.6));
+        font-size: 12px;
+        line-height: 18px;
+        height: 18px;
+        overflow: hidden;
+    }
+
+    p.summ {
+        color: rgba(18, 19, 22, 0.8);
+        font-size: 13px;
+        line-height: 20px;
+        white-space: wrap;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &.highLight {
+        background: var(--brand-11, #e6f2ff);
+
+        &:hover {
+            background-color: #b3d6ff;
+        }
+    }
+}

frontend/React/src/pages/mindsearch/components/chat-right/components/search-item/index.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames';
+import styles from './index.module.less';
+
+interface ISearchItemProps {
+    item: any;
+}
+
+const SearchItem = ({ item }: ISearchItemProps) => {
+    const openLink = (url: string) => {
+        window.open(url);
+    };
+    return (
+        <div
+            className={classNames(styles.searchItem, item.highLight ? styles.highLight : '')}
+            key={`search-item-${item.url}`}
+            onClick={() => {
+                openLink(item.url);
+            }}
+        >
+            <div className={styles.num}>{item.id}</div>
+            <div className={styles.inner}>
+                <p className={styles.url}>{item?.url}</p>
+                <p className={styles.title}>{item?.title}</p>
+                <p className={styles.summ}>{item?.summ}</p>
+            </div>
+        </div>
+    );
+};
+
+export default SearchItem;

frontend/React/src/{components → pages/mindsearch/components}/chat-right/index.module.less

@@ -1,28 +1,18 @@
 .rightContent {
   width: 44.44%;
+  max-width: 800px;
   flex-shrink: 0;
   box-sizing: border-box;
-  padding: 24px;
-  border-radius: 8px;
-  border: rgba(33, 38, 192, 0.10);
-  background: rgba(255, 255, 255, 0.80);
-  height: calc(100% - 24px);
-  overflow-y: auto;
+  padding: 24px 0 24px 24px;
+  border-radius: 16px;
+  border: 1px solid var(----line-2, #ebecf0);
+  background: var(---fill-0, #fff);
+  height: 100%;
+  overflow: hidden;
   position: relative;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: rgba(255, 255, 255, 0);
-    border-radius: 100px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0);
-    border-radius: 100px;
-  }
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
 
   .toggleIcon {
     position: absolute;
@@ -35,8 +25,33 @@
     color: #121316;
     font-size: 24px;
     font-weight: 600;
-    line-height: 36px;
-    margin-bottom: 24px;
+    line-height: 30px;
+    margin-bottom: 32px;
+    max-width: calc(100% - 40px);
+  }
+
+  .nodeInfo {
+    height: 100%;
+    overflow-y: auto;
+    padding-right: 24px;
+
+    &.forbidScroll {
+      overflow-y: hidden;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: rgba(255, 255, 255, 0);
+      border-radius: 100px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(255, 255, 255, 0);
+      border-radius: 100px;
+    }
   }
 
   .conclusion {
@@ -51,8 +66,6 @@
   }
 
   .steps {
-    margin-bottom: 24px;
-
     .title {
       color: var(--100-text-5, #121316);
       font-size: 20px;
@@ -68,10 +81,11 @@
         right: 0;
         font-size: 20px;
         font-weight: normal;
+        cursor: pointer;
 
         span {
           color: #121316;
-          opacity: 0.6;
+          // opacity: 0.6;
         }
       }
 
@@ -79,8 +93,8 @@
         width: 12px;
         height: 12px;
         border-radius: 50%;
-        background-color: #2126C0;
-        margin-right: 8px;
+        background-color: #3477EB;
+        margin-right: 12px;
       }
     }
 
@@ -93,23 +107,61 @@
       .searchList {
         margin-top: 0 !important;
         border-radius: 8px;
-        background: var(--fill-2, #F4F5F9);
+        background: var(--fill-2, #f4f5f9);
         padding: 8px;
       }
     }
 
     .con {
       margin-left: 5px;
-      padding-top: 8px;
+      padding-top: 12px;
       padding-left: 15px;
-      border-left: 1px solid rgba(33, 38, 192, 0.20);
+      margin-bottom: 24px;
+      border-left: 1px solid #D7D8DD;
       height: auto;
 
+      &.limitHeight {
+        max-height: calc(100vh - 320px);
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+          width: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background-color: rgba(255, 255, 255, 0);
+          border-radius: 100px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: rgba(255, 255, 255, 0);
+          border-radius: 100px;
+        }
+      }
+
+      .draft {
+        margin-bottom: 20px;
+      }
+
+      p {
+        margin: 0;
+        line-height: 24px;
+      }
+
       &.collapsed {
         overflow: hidden;
         height: 0;
+        padding-top: 24px;
+        margin-bottom: 0 !important;
+
+        // transition: all 1s;
+
+      }
+    }
+
+    &:last-child {
+      .collapsed {
         padding-top: 0;
-        transition: all 1s;
       }
     }
   }
@@ -125,41 +177,23 @@
     font-size: 14px;
     font-weight: 600;
     line-height: 24px;
-    margin-bottom: 4px;
+    margin-bottom: 12px;
 
     span {
       margin-right: 4px;
     }
   }
 
-  .query {
-    &-Item {
-      display: inline-flex;
-      padding: 4px 8px;
-      margin-right: 4px;
-      margin-bottom: 4px;
-      border-radius: 4px;
-      border: 1px solid #EBECF0;
-      color: rgba(18, 19, 22, 0.80);
-      font-size: 14px;
-      line-height: 24px;
-      height: 32px;
-      box-sizing: border-box;
-      overflow: hidden;
-      // animation: fadeIn linear 2s;
-    }
-  }
-
   .searchList {
     margin-top: 0 !important;
-    border-radius: 8px;
-    background: var(--fill-2, #F4F5F9);
+    border-radius: 16px;
+    background: var(--fill-2, #f4f5f9);
     padding: 8px;
   }
 
   .searchList {
     .thought {
-      color: rgba(18, 19, 22, 0.80);
+      color: rgba(18, 19, 22, 0.8);
       font-size: 14px;
       line-height: 24px;
       margin-bottom: 16px;
@@ -167,7 +201,8 @@
 
     .scrollCon {
       padding-right: 6px;
-      max-height: 300px;
+      height: auto;
+      max-height: 542px;
       overflow-y: auto;
       position: relative;
     }
@@ -182,53 +217,15 @@
     }
 
     .scrollCon::-webkit-scrollbar-thumb {
-      background-color: #d7d8dd;
-      border-radius: 100px;
+      background-color: #ebecf0;
+      border-radius: 20px;
     }
 
     .inner {
       width: 100%;
       border-radius: 8px;
-      background: var(--fill-2, #F4F5F9);
       transition: all 0.5s ease;
       box-sizing: border-box;
-      padding: 8px;
-    }
-
-    .searchItem {
-      border-radius: 8px;
-      background: var(---fill-0, #FFF);
-      margin-bottom: 6px;
-      padding: 4px 8px;
-      transition: all 0.5s ease-in-out;
-
-      &.highLight {
-        border: 1px solid var(---Success-6, #00B365);
-        background: linear-gradient(0deg, rgba(218, 242, 228, 0.40) 0%, rgba(218, 242, 228, 0.40) 100%), #FFF;
-      }
-
-      p {
-        white-space: nowrap;
-        max-width: 95%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin: 0;
-      }
-
-      p.summ {
-        color: rgba(18, 19, 22, 0.80);
-        font-size: 13px;
-        line-height: 20px;
-        margin-bottom: 2px;
-      }
-
-      p.url {
-        color: var(--60-text-3, rgba(18, 19, 22, 0.60));
-        font-size: 12px;
-        line-height: 18px;
-        padding-left: 20px;
-      }
     }
   }
-}
-
+}

frontend/React/src/pages/mindsearch/components/chat-right/index.tsx

@@ -0,0 +1,272 @@
+import { useEffect, useState, useRef } from 'react';
+import styles from './index.module.less';
+import classNames from 'classnames';
+import CustomMarkdown from '../custom-markdown';
+import IconFont from '../iconfont';
+import PackIcon from '../../assets/pack-up.svg';
+import PackDisableIcon from '../../assets/pack-up-disabled.svg';
+import { Tooltip } from 'antd';
+import QueryItem from './components/query-item';
+import SearchItem from './components/search-item';
+import Loading from '../loading';
+import EmptyPlaceHolder from './components/empty-placeholder';
+
+interface IProps {
+    nodeInfo: any;
+    stashInfo?: any;
+    historyNode?: any;
+    toggleRight: () => void;
+    chatIsOver?: Boolean;
+}
+
+const ChatRight = ({ nodeInfo, historyNode = null, toggleRight, chatIsOver = false }: IProps) => {
+    const [subQuestion, setSubQuestion] = useState('');
+    const [queries, setQuries] = useState<any>([]);
+    const [searchList, setSearchList] = useState<any>([]);
+    const [conclusionRef, setConclusionRef] = useState<any>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [selectedIds, setSelectedIds] = useState([]);
+    const [currentStep, setCurrentStep] = useState(0);
+    const [conclusion, setConclusion] = useState('');
+    const [thinkingData, setThinking] = useState<any>(null);
+    const [readingData, setReading] = useState<any>(null);
+    const [isOutputing, setIsOutputing] = useState(false);
+
+    // steps展开收起的信息
+    const [collapseInfo, setCollapseInfo] = useState<boolean[]>([true, true, true]);
+    const [currentNode, setCurrentNode] = useState<any>();
+    // 展开收起
+    const toggleCard = (index: number) => {
+        const arr = [...collapseInfo];
+        arr[index] = !arr[index];
+        setCollapseInfo(arr);
+    };
+    // 高亮searchList
+    const highLightSearchList = (ids: any) => {
+        setCurrentStep(2);
+        const highlightArr: any = [...searchList];
+        highlightArr.forEach((item: any) => {
+            if (ids.includes(Number(item.id))) {
+                item.highLight = true;
+            }
+        });
+        highlightArr.sort((item1: any, item2: any) => {
+            if (item1.highLight === item2.highLight) {
+                return 0;
+            }
+            // 如果item1是highlight，放在前面
+            if (item1.highLight) {
+                return -1;
+            }
+            // 如果item2是highlight，放在后面
+            return 1;
+        });
+        setSearchList(highlightArr);
+        setCollapseInfo([false, false, true]);
+    };
+
+    const handleReceiveHistory = () => {
+        setCurrentNode(2);
+        setCollapseInfo([false, false, true]);
+        setIsLoading(false);
+        setThinking(historyNode.thinkingData);
+        setConclusion(historyNode.conclusion);
+        setReading(historyNode.readingData);
+        setQuries(historyNode.queries);
+        setSearchList(historyNode.searchList);
+        setConclusionRef(historyNode.conclusionRef);
+        setSelectedIds(historyNode.selectedIds);
+        setSubQuestion(historyNode.subQuestion);
+    };
+
+    const resetStatus = () => {
+        // 初始化组件状态
+        console.log('reset status-------');
+        setCurrentStep(0);
+        setCollapseInfo([true, true, true]);
+        setSelectedIds([]);
+        setSearchList([]);
+        setConclusionRef(null);
+        setThinking(null);
+        setReading(null);
+        setConclusion('');
+        setSubQuestion('');
+    };
+
+    const hideRight = () => {
+        if (isOutputing) return;
+        toggleRight();
+    };
+
+    useEffect(() => {
+        if (!historyNode) return;
+        handleReceiveHistory();
+    }, [historyNode]);
+
+    useEffect(() => {
+        if (!selectedIds.length) return;
+        highLightSearchList(selectedIds);
+    }, [selectedIds]);
+
+    useEffect(() => {
+        if (historyNode) return; // 有历史记录，不处理
+        try {
+            if (nodeInfo?.current_node !== currentNode) {
+                setCurrentNode(nodeInfo?.current_node);
+                resetStatus();
+            }
+            setIsOutputing(nodeInfo?.outputing);
+            if (!subQuestion && nodeInfo?.subQuestion) {
+                setSubQuestion(nodeInfo.subQuestion);
+            }
+            if (nodeInfo?.thinkingData) {
+                setThinking(nodeInfo.thinkingData);
+            }
+            if (nodeInfo?.readingData) {
+                setReading(nodeInfo.readingData);
+            }
+            if (nodeInfo?.queries?.length) {
+                setQuries(nodeInfo.queries);
+            }
+            if (nodeInfo?.searchList && !searchList?.length) {
+                setSearchList(nodeInfo.searchList);
+                setCurrentStep(1);
+                setCollapseInfo([false, true, true]);
+            }
+            if (nodeInfo?.selectedIds && !selectedIds?.length) {
+                setSelectedIds(nodeInfo.selectedIds);
+            }
+            if (nodeInfo?.conclusion) {
+                setConclusion(nodeInfo.conclusion);
+            }
+            if (nodeInfo?.conclusionRef) {
+                setConclusionRef(nodeInfo.conclusionRef);
+            }
+        } catch (err) {
+            console.log('[chat right]--error from nodeinfo---', err);
+        }
+    }, [nodeInfo, currentStep]);
+
+    return <div className={styles.rightContent} id="rightContent">
+        <div className={styles.toggleIcon} onClick={hideRight}>
+            <img src={PackIcon} />
+        </div>
+        {
+            currentNode ? <>
+                <div className={styles.titleNode}>{subQuestion}</div>
+                <div className={classNames(
+                    styles.nodeInfo,
+                    isOutputing ? styles.forbidScroll : ''
+                )}>
+                    {thinkingData && (
+                        <div className={classNames(styles.steps)}>
+                            <div className={styles.title}>
+                                <i></i>思考
+                                <div
+                                    className={styles.open}
+                                    onClick={() => {
+                                        toggleCard(0);
+                                    }}
+                                >
+                                    <IconFont type={collapseInfo[0] ? 'icon-shouqi' : 'icon-xiangxiazhankai'} />
+                                </div>
+                            </div>
+                            <div className={classNames(styles.con, !collapseInfo[0] ? styles.collapsed : '')}>
+                                <div>
+                                    <CustomMarkdown source={thinkingData} />
+                                </div>
+                                {queries.length > 0 && (
+                                    <div className={styles.query}>
+                                        <div className={styles.subTitle}>
+                                            <IconFont type="icon-SearchOutlined" />
+                                            搜索关键词
+                                        </div>
+                                        {queries.map((item: string, index: number) => (
+                                            <QueryItem key={`query-item-${item}`} item={item} />
+                                        ))}
+                                    </div>
+                                )}
+                                {searchList.length > 0 && currentStep === 0 && (
+                                    <div className={styles.searchList}>
+                                        <div className={styles.subTitle}>
+                                            <IconFont type="icon-DocOutlined" />
+                                            信息来源
+                                        </div>
+                                        <div className={styles.scrollCon} style={searchList.length > 5 ? { height: '542px' } : {}}>
+                                            <div className={styles.inner} style={searchList.length > 5 ? {} : {}}>
+                                                {searchList.map((item: any) => (
+                                                    <SearchItem item={item} key={`search-item-${item.url}`} />
+                                                ))}
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    )}
+                    {currentStep > 0 && readingData && (
+                        <div className={classNames(styles.steps)}>
+                            <div className={styles.title}>
+                                <i></i>信息来源
+                                <div
+                                    className={styles.open}
+                                    onClick={() => {
+                                        toggleCard(1);
+                                    }}
+                                >
+                                    <IconFont type={collapseInfo[1] ? 'icon-shouqi' : 'icon-xiangxiazhankai'} />
+                                </div>
+                            </div>
+                            <div className={classNames(styles.con, !collapseInfo[1] ? styles.collapsed : '')}>
+                                <div className={styles.draft}>
+                                    <CustomMarkdown source={readingData} />
+                                </div>
+                                {searchList.length > 0 && (
+                                    <div className={styles.searchList}>
+                                        <div className={styles.scrollCon} style={searchList.length > 5 ? { height: '542px' } : {}}>
+                                            <div className={styles.inner} style={searchList.length > 5 ? {} : {}}>
+                                                {searchList.map((item: any) => (
+                                                    <SearchItem item={item} key={`search-item-${item.url}`} />
+                                                ))}
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    )}
+                    {
+                        conclusion && (
+                            <div className={classNames(styles.steps)}>
+                                <div className={styles.title}>
+                                    <i></i>信息整合
+                                    <div
+                                        className={styles.open}
+                                        onClick={() => {
+                                            toggleCard(2);
+                                        }}
+                                    >
+                                        <IconFont type={collapseInfo[2] ? 'icon-shouqi' : 'icon-xiangxiazhankai'} />
+                                    </div>
+                                </div>
+                                <div
+                                    id="nodeConclusionModule"
+                                    className={classNames(
+                                        styles.con,
+                                        !collapseInfo[2] ? styles.collapsed : '',
+                                        isOutputing ? styles.limitHeight : ''
+                                    )}
+                                >
+                                    <div id="conclusionInfo">
+                                        <CustomMarkdown source={conclusion} refList={chatIsOver ? conclusionRef : null} />
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    {isLoading && <Loading />}
+                </div></> : <EmptyPlaceHolder />
+        }
+    </div>
+};
+
+export default ChatRight;

frontend/React/src/pages/mindsearch/components/custom-markdown/index.module.less

@@ -0,0 +1,168 @@
+.markdownCon {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+
+    h1 {
+        font-size: 26px;
+    }
+
+    h2 {
+        font-size: 24px;
+    }
+
+    h3 {
+        font-size: 20px;
+    }
+
+    h4 {
+        font-size: 18px;
+    }
+
+    h5,
+    h6 {
+        font-size: 16px;
+    }
+
+    p {
+        color: rgba(18, 19, 22, 0.8);
+        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.8);
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 28px;
+
+        p {
+            margin-bottom: 4px;
+        }
+    }
+
+    >p:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.footerFlag {
+    width: 18px;
+    height: 18px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    background: var(--fill-2, #f4f5f9);
+    color: var(--35-text-2, rgba(18, 19, 22, 0.35));
+    font-size: 12px;
+    font-weight: 600;
+    margin-left: 2px;
+    cursor: pointer;
+    font-style: normal;
+
+    /* 150% */
+    &:hover {
+        background: var(---Brand1-5, #3477eb);
+        color: #fff;
+
+        svg path {
+            fill: #fff;
+            fill-opacity: 1;
+        }
+    }
+}
+
+// .mergeQuoLi {
+//     margin-bottom: 12px;
+// }
+
+li {
+    cursor: pointer;
+
+    .url {
+        color: var(--60-text-3, rgba(18, 19, 22, 0.6));
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 18px;
+        max-width: 100%;
+        height: 18px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .title {
+        color: var(---Brand1-5, #3477eb);
+        font-size: 14px;
+        line-height: 21px;
+    }
+
+    .summ {
+        white-space: wrap;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.line {
+    margin: 4px 8px;
+    border: 1px solid #ebecf0;
+    transform: scaleY(0.5);
+}
+
+:global {
+    .iQuoPopover {
+        max-width: 420px;
+    }
+
+    .mergeQuoPopover {
+        border-radius: 12px;
+        border: 1px solid var(----line-2, #ebecf0);
+        background: var(---fill-0, #fff);
+        box-shadow: 1px 3px 8px 0px rgba(0, 0, 0, 0.06);
+        max-height: 240px;
+        max-width: 420px;
+        overflow-y: auto;
+
+        .ant-popover-inner {
+            padding: 8px !important;
+        }
+
+        .ant-popover-inner-content .line:last-child {
+            display: none;
+        }
+
+        li {
+            border-radius: 8px;
+            padding: 8px;
+
+            &:hover {
+                background-color: #f4f5f9;
+            }
+        }
+    }
+
+    .mergeQuoPopover::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    .mergeQuoPopover::-webkit-scrollbar-track {
+        background-color: rgba(255, 255, 255, 0);
+        border-radius: 100px;
+    }
+
+    .mergeQuoPopover::-webkit-scrollbar-thumb {
+        background-color: #ebecf0;
+        border-radius: 20px;
+    }
+}

frontend/React/src/pages/mindsearch/components/custom-markdown/index.tsx

@@ -0,0 +1,116 @@
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import { replaceStr, mergeReplaceToDiv } from '../../utils/tools';
+import { Popover } from 'antd';
+import classNames from 'classnames';
+import styles from './index.module.less';
+import { useEffect } from 'react';
+
+interface IMarkdownProps {
+    source: string;
+    refList?: any;
+    quoType?: string;
+    chatIsOver?: boolean;
+}
+
+const CustomMarkdown = ({ source, refList = null, quoType = 'single', chatIsOver = false }: IMarkdownProps) => {
+    const linkToExtend = (url: string) => {
+        window.open(url);
+    };
+
+    const CustomI = ({ children, className, ...props }: any) => {
+        const content = refList
+            ? Object.keys(refList).map((item) => {
+                if (Number(item) === Number(children)) {
+                    return (
+                        <li
+                            key={`ref-item-${item}`}
+                            onClick={() => {
+                                linkToExtend(refList[item].url);
+                            }}
+                        >
+                            <div className={styles.url}>{refList[item].url}</div>
+                            <div className={styles.title}>{refList[item].title}</div>
+                            <div className={styles.summ}>{refList[item].summ}</div>
+                        </li>
+                    );
+                } else {
+                    return null;
+                }
+            })
+            : null;
+        return className.includes('custom') ? (
+            <Popover overlayClassName="iQuoPopover" content={content} arrow={false} key={`iQuoPopover-${children}`}>
+                <b className={styles.footerFlag}>{children}</b>
+            </Popover>
+        ) : (
+            <code>{children}</code>
+        );
+    };
+
+    const CustomDiv = ({ children, className, ...props }: any) => {
+        const list = props['data-ids'].split(',');
+        const content = refList
+            ? Object.keys(refList).map((item) => {
+                if (list.includes(String(item))) {
+                    return (
+                        <>
+                            <li
+                                className={styles.mergeQuoLi}
+                                key={`ref-item-${refList[item].title}`}
+                                onClick={() => {
+                                    linkToExtend(refList[item].url);
+                                }}
+                            >
+                                <div className={styles.url}>{refList[item].url}</div>
+                                <div className={styles.title}>{refList[item].title}</div>
+                            </li>
+                            <div className={classNames(styles.line, 'line')} />
+                        </>
+                    );
+                } else {
+                    return null;
+                }
+            })
+            : null;
+        return className.includes('mergeQuo') ? (
+            <Popover content={content} arrow={false} overlayClassName="mergeQuoPopover" key={`custom-dev-${props['data-ids']}`}>
+                <b className={styles.footerFlag}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M5.49491 2.65877C3.29849 4.06934 2.07828 5.71113 1.83428 7.58413C1.45443 10.4999 4.06198 11.9272 5.3832 10.6448C6.70443 9.36248 5.91243 7.73483 4.95574 7.28993C3.99904 6.84499 3.41399 6.99995 3.51604 6.40539C3.6181 5.81085 4.97919 4.16241 6.17496 3.39472C6.2543 3.32725 6.28448 3.19635 6.2081 3.09704C6.15784 3.03174 6.05929 2.90365 5.91243 2.71278C5.78401 2.54586 5.66099 2.55211 5.49491 2.65877Z"
+                            fill="#121316"
+                            fillOpacity="0.35"
+                        />
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M11.2801 2.65877C9.08366 4.06934 7.86344 5.71113 7.61943 7.58413C7.2396 10.4999 9.84715 11.9272 11.1684 10.6448C12.4896 9.36248 11.6976 7.73483 10.7409 7.28993C9.78421 6.84499 9.19913 6.99995 9.30121 6.40539C9.40327 5.81085 10.7644 4.16241 11.9601 3.39472C12.0395 3.32725 12.0697 3.19635 11.9932 3.09704C11.943 3.03174 11.8445 2.90365 11.6976 2.71278C11.5692 2.54586 11.4462 2.55211 11.2801 2.65877Z"
+                            fill="#121316"
+                            fillOpacity="0.35"
+                        />
+                    </svg>
+                </b>
+            </Popover>
+        ) : (
+            <code>{children}</code>
+        );
+    };
+
+    return (
+        <div className={styles.markdownCon}>
+            <ReactMarkdown rehypePlugins={[rehypeRaw]} components={refList && Object.keys(refList)?.length ? { i: CustomI, span: CustomDiv } : {}}>
+                {
+                    refList ?
+                        quoType === 'merge' ? mergeReplaceToDiv(source) :
+                            replaceStr(source) :
+                        source
+                }
+            </ReactMarkdown>
+        </div>
+    );
+};
+
+export default CustomMarkdown;

frontend/React/src/{components → pages/mindsearch/components}/iconfont/index.tsx

@@ -1,9 +1,9 @@
-import { createFromIconfontCN } from "@ant-design/icons";
+import { createFromIconfontCN } from '@ant-design/icons';
 
 // //at.alicdn.com/t/c/font_3858115_yl9vl04f0jc.js
 const IconFont = createFromIconfontCN({
-  // scriptUrl: "//static.openxlab.org.cn/cmg-animation-upload/iconfont.js",
-  scriptUrl: "//at.alicdn.com/t/c/font_3858115_p8dw9q83s0h.js"
+    // scriptUrl: "//static.openxlab.org.cn/cmg-animation-upload/iconfont.js",
+    scriptUrl: '//at.alicdn.com/t/c/font_3858115_p8dw9q83s0h.js',
 });
 
 export default IconFont;

frontend/React/src/{components → pages/mindsearch/components}/loading/index.module.less

@@ -3,42 +3,42 @@
     position: relative;
     width: 1px;
     height: 1px;
-  }
-  
-  .loading99:before,
-  .loading99:after {
+}
+
+.loading99:before,
+.loading99:after {
     position: absolute;
     display: inline-block;
     width: 15px;
     height: 15px;
-    content: "";
+    content: '';
     border-radius: 100%;
-    background-color: #5551FF;
-  }
-  
-  .loading99:before {
+    background-color: #5551ff;
+}
+
+.loading99:before {
     left: -15px;
     animation: ball-pulse infinite 0.75s -0.4s cubic-bezier(0.2, 0.68, 0.18, 1.08);
-  }
-  
-  .loading99:after {
+}
+
+.loading99:after {
     right: -15px;
     animation: ball-pulse infinite 0.75s cubic-bezier(0.2, 0.68, 0.18, 1.08);
-  }
-  
-  @keyframes ball-pulse {
+}
+
+@keyframes ball-pulse {
     0% {
-      transform: scale(1);
-      opacity: 1;
+        transform: scale(1);
+        opacity: 1;
     }
-  
+
     50% {
-      transform: scale(0.1);
-      opacity: 0.6;
+        transform: scale(0.1);
+        opacity: 0.6;
     }
-  
+
     100% {
-      transform: scale(1);
-      opacity: 1;
+        transform: scale(1);
+        opacity: 1;
     }
-  }
+}

frontend/React/src/{components → pages/mindsearch/components}/loading/index.tsx

@@ -1,6 +1,6 @@
 import styles from './index.module.less';
 
 const Loading = () => {
-    return <div className={styles.loading99}></div>
+    return <div className={styles.loading99} />;
 };
-export default Loading;
+export default Loading;

frontend/React/src/pages/mindsearch/components/mind-map-item/index.module.less

@@ -0,0 +1,150 @@
+article {
+    padding: 6px 16px;
+    border-radius: 8px;
+    height: 38px;
+    border: 1px solid transparent;
+    background: #fff;
+    color: #121316;
+    text-align: center;
+    font-size: 14px;
+    line-height: 24px;
+    position: relative;
+    box-sizing: border-box;
+
+    &.loading {
+        line-height: 20px;
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid transparent;
+        padding: 4px;
+
+        span {
+            color: #3477eb;
+            background-color: #fff;
+            border-radius: 4px;
+            line-height: 24px;
+            padding: 2px 12px;
+        }
+
+        .looping {
+            --border-width: 4px;
+            --follow-panel-linear-border: linear-gradient(90deg, #3477eb 0.58%, #FFB4BA 100.36%);
+
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: calc(100% + var(--border-width) * 3 - 8px);
+            height: 100%;
+            background: var(--follow-panel-linear-border);
+            background-size: 300% 300%;
+            background-position: 0 50%;
+            animation: moveGradient 4s linear infinite;
+        }
+    }
+
+    &.disabled {
+        border-radius: 8px;
+        border: 1px solid #d7d8dd;
+        color: rgba(18, 19, 22, 0.35);
+    }
+
+    &.finished {
+        cursor: pointer;
+        border: 1px solid #3477EB;
+
+        &:hover {
+            background-color: #E6F2FF;
+        }
+
+        .finishDot {
+            position: absolute;
+            top: 6px;
+            right: 6px;
+            width: 6px;
+            height: 6px;
+            background-color: #3477EB;
+            border-radius: 50%;
+        }
+    }
+
+    &.forbidden {
+        cursor: not-allowed;
+    }
+
+    &.emptyNode {
+        padding: 0 !important;
+        border: 0;
+    }
+
+    &.active {
+        border-radius: 8px;
+        border: 1px solid var(---Brand1-5, #3477EB);
+        background: var(---Brand1-5, #3477EB);
+        color: #fff;
+
+        &:hover {
+            border: 1px solid var(---Brand1-5, #3477EB);
+            background: var(---Brand1-5, #3477EB);
+            color: #fff;
+        }
+
+        .dot {
+            position: absolute;
+            top: 6px;
+            right: 6px;
+            width: 6px;
+            height: 6px;
+            background-color: #fff;
+            border-radius: 50%;
+        }
+    }
+
+    &.init {
+        border: 1px solid transparent;
+        cursor: auto;
+    }
+
+    span {
+        display: block;
+        white-space: nowrap;
+        max-width: 160px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        position: relative;
+        z-index: 20;
+    }
+
+    span.status {
+        color: #4082fe;
+    }
+}
+
+ul.onlyone {
+    &:before {
+        opacity: 0;
+    }
+
+    >li {
+        margin-left: 0px;
+    }
+
+    &>li:after {
+        opacity: 0;
+    }
+
+    &>li:before {
+        // left: 0;
+    }
+}
+
+.endLine {
+    border-bottom: 1px solid #d7d8dd;
+    width: 3000px;
+    transition: width 1s ease-in-out;
+}
+
+@keyframes moveGradient {
+    50% {
+        background-position: 100% 50%;
+    }
+}