refactor: Add frontend code to DB-GPT (#912)

.gitignore

@@ -154,4 +154,29 @@ logswebserver.log.*
 /pilot/meta_data/alembic/versions/*
 /pilot/meta_data/*.db
 # Ignore for now
-thirdparty
+thirdparty
+
+#web
+# dependencies
+/web/node_modules
+
+.idea
+# next.js
+/web/.next/
+/web/out/
+
+# production
+/web/build
+
+# debug
+/web/npm-debug.log*
+/web/yarn-debug.log*
+/web/yarn-error.log*
+
+# local env files
+/web/.env.prod
+/web/.env
+
+# typescript
+*.tsbuildinfo
+/web/next-env.d.ts

docs/docs/quickstart.md

@@ -166,9 +166,18 @@ python pilot/server/dbgpt_server.py
 :::
 
 ## Visit website
-Open the browser and visit [`http://localhost:5000`](http://localhost:5000)
 
+#### 1. Production model:
+Open the browser and visit [`http://localhost:5000`](http://localhost:5000)
 
+#### 2. Development mode:
+```
+cd web & npm install
+cp .env.template .env
+// set the API_BASE_URL to your DB-GPT server address, it usually is http://localhost:5000
+npm run dev
+```
+Open the browser and visit [`http://localhost:3000`](http://localhost:3000)
 
 
 

scripts/build_web_static.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+cd ../web
+
+npm install
+npm run build
+
+rm -rf ../dbgpt/app/static/*
+
+cp -R ../web/out/* ../dbgpt/app/static

web/.env.template

@@ -0,0 +1 @@
+API_BASE_URL=http://127.0.0.1:5000

web/README.md

@@ -0,0 +1,109 @@
+
+<h1 align="center">
+  <a href="https://dbgpt.site"><img width="96" src="https://github.com/eosphoros-ai/DB-GPT-Web/assets/10321453/062ee3ea-fac2-4437-a392-f4bc5451d116" alt="DB-GPT"></a>
+  <br>
+  DB-GPT-Web
+</h1>
+
+_<p align="center">DB-GPT Chat UI, LLM to Vision.</p>_
+
+<p align="center">
+  <a href="https://github.com/eosphoros-ai/DB-GPT-Web/blob/main/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg?label=License&style=flat" />
+  </a>
+  <a href="https://github.com/eosphoros-ai/DB-GPT/releases">
+    <img alt="Release Notes" src="https://img.shields.io/github/release/eosphoros-ai/DB-GPT" />
+  </a>
+  <a href="https://github.com/eosphoros-ai/DB-GPT-Web/issues">
+    <img alt="Open Issues" src="https://img.shields.io/github/issues-raw/eosphoros-ai/DB-GPT-Web" />
+  </a>
+  <a href="https://discord.gg/7uQnPuveTY">
+    <img alt="Discord" src="https://dcbadge.vercel.app/api/server/7uQnPuveTY?compact=true&style=flat" />
+  </a>
+</p>
+
+---
+
+## 👋 Introduction
+
+***DB-GPT-Web*** is an **Open source chat UI** for [**DB-GPT**](https://github.com/eosphoros-ai/DB-GPT).
+Also, it is a **LLM to Vision** solution. 
+
+[DB-GPT-Web](https://dbgpt.site) is an Open source Tailwind and Next.js based chat UI for AI and GPT projects. It beautify a lot of markdown labels, such as `table`, `thead`, `th`, `td`, `code`, `h1`, `h2`, `ul`, `li`, `a`, `img`. Also it define some custom labels to adapted to AI-specific scenarios. Such as `plugin running`, `knowledge name`, `Chart view`, and so on.
+
+## 💪🏻 Getting Started
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) >= 16
+- [npm](https://npmjs.com/) >= 8
+- Supported OSes: Linux, macOS and Windows
+
+### Installation
+
+```sh
+# Install dependencies
+npm install
+```
+
+### Usage
+```sh
+cp .env.example .env
+```
+edit the `API_BASE_URL` to the real address
+
+```sh
+# development model
+npm run dev
+```
+
+## 🚀 Use In DB-GPT
+
+```sh
+npm run compile
+
+# copy compile file to DB-GPT static file dictory
+cp -r -f /Db-GPT-Web/out/* /DB-GPT/pilot/server/static/
+
+```
+
+## 📚 Documentation
+
+For full documentation, visit [document](https://db-gpt.readthedocs.io/en/latest/index.html).
+
+## 📺 Screenshots
+Run on an RTX 4090 GPU.
+
+#### Agent
+![Agent](./screenshots/agent.gif)
+#### ChatExcel
+![ChatExcel](./screenshots/chatexcel.gif)
+#### Knowledge
+![Knowledge](./screenshots/knowledge.gif)
+#### Models
+![models](./screenshots/models.gif)
+#### FastChat
+![FastChat](./screenshots/fastchat.gif)
+#### vllm
+![vllm](./screenshots/vllm.gif)
+
+## Usage
+
+  [react-markdown](https://github.com/remarkjs/react-markdown#readme) for markdown support.
+  [ant-design](https://github.com/ant-design/ant-design) for ui components.
+  [next.js](https://github.com/vercel/next.js) for server side rendering.
+  [@antv/g2](https://github.com/antvis/g2#readme) for charts.
+
+## License
+
+DB-GPT-Web is licensed under the [MIT License](LICENSE).
+
+---
+
+Enjoy using DB-GPT-Web to build stunning UIs for your AI and GPT projects.
+
+🌟 If you find it helpful, don't forget to give it a star on GitHub! Stars are like little virtual hugs that keep us going! We appreciate every single one we receive.
+
+For any queries or issues, feel free to open an [issue](https://github.com/eosphoros-ai/DB-GPT-Web/issues) on the repository.
+
+Happy coding! 😊

web/app/chat-context.tsx

@@ -0,0 +1,114 @@
+import { createContext, useEffect, useMemo, useState } from 'react';
+import { apiInterceptors, getDialogueList, getUsableModels } from '@/client/api';
+import { useRequest } from 'ahooks';
+import { ChatHistoryResponse, DialogueListResponse, IChatDialogueSchema } from '@/types/chat';
+import { useSearchParams } from 'next/navigation';
+
+interface IChatContext {
+  isContract?: boolean;
+  isMenuExpand?: boolean;
+  scene: IChatDialogueSchema['chat_mode'] | (string & {});
+  chatId: string;
+  model: string;
+  dbParam?: string;
+  modelList: Array<string>;
+  agentList: string[];
+  dialogueList?: DialogueListResponse;
+  setAgentList?: (val: string[]) => void;
+  setModel: (val: string) => void;
+  setIsContract: (val: boolean) => void;
+  setIsMenuExpand: (val: boolean) => void;
+  setDbParam: (val: string) => void;
+  queryDialogueList: () => void;
+  refreshDialogList: () => void;
+  currentDialogue?: DialogueListResponse[0];
+  history: ChatHistoryResponse;
+  setHistory: (val: ChatHistoryResponse) => void;
+  docId?: number;
+  setDocId: (docId: number) => void;
+}
+
+const ChatContext = createContext<IChatContext>({
+  scene: '',
+  chatId: '',
+  modelList: [],
+  model: '',
+  dbParam: undefined,
+  dialogueList: [],
+  agentList: [],
+  setAgentList: () => {},
+  setModel: () => {},
+  setIsContract: () => {},
+  setIsMenuExpand: () => {},
+  setDbParam: () => void 0,
+  queryDialogueList: () => {},
+  refreshDialogList: () => {},
+  history: [],
+  setHistory: () => {},
+  docId: undefined,
+  setDocId: () => {},
+});
+
+const ChatContextProvider = ({ children }: { children: React.ReactElement }) => {
+  const searchParams = useSearchParams();
+  const chatId = searchParams?.get('id') ?? '';
+  const scene = searchParams?.get('scene') ?? '';
+  const db_param = searchParams?.get('db_param') ?? '';
+  const [isContract, setIsContract] = useState(false);
+  const [model, setModel] = useState<string>('');
+  const [isMenuExpand, setIsMenuExpand] = useState<boolean>(scene !== 'chat_dashboard');
+  const [dbParam, setDbParam] = useState<string>(db_param);
+  const [agentList, setAgentList] = useState<string[]>([]);
+  const [history, setHistory] = useState<ChatHistoryResponse>([]);
+  const [docId, setDocId] = useState<number>();
+
+  const {
+    run: queryDialogueList,
+    data: dialogueList = [],
+    refresh: refreshDialogList,
+  } = useRequest(
+    async () => {
+      const [, res] = await apiInterceptors(getDialogueList());
+      return res ?? [];
+    },
+    {
+      manual: true,
+    },
+  );
+
+  const { data: modelList = [] } = useRequest(async () => {
+    const [, res] = await apiInterceptors(getUsableModels());
+    return res ?? [];
+  });
+  useEffect(() => {
+    setModel(modelList[0]);
+  }, [modelList, modelList?.length]);
+
+  const currentDialogue = useMemo(() => dialogueList.find((item: any) => item.conv_uid === chatId), [chatId, dialogueList]);
+  const contextValue = {
+    isContract,
+    isMenuExpand,
+    scene,
+    chatId,
+    modelList,
+    model,
+    dbParam: dbParam || db_param,
+    dialogueList,
+    agentList,
+    setAgentList,
+    setModel,
+    setIsContract,
+    setIsMenuExpand,
+    setDbParam,
+    queryDialogueList,
+    refreshDialogList,
+    currentDialogue,
+    history,
+    setHistory,
+    docId,
+    setDocId,
+  };
+  return <ChatContext.Provider value={contextValue}>{children}</ChatContext.Provider>;
+};
+
+export { ChatContext, ChatContextProvider };