setup(frontend): rename frontend-react

frontend-react/.browserslistrc

@@ -0,0 +1,5 @@
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10

frontend-react/.dockerignore

@@ -0,0 +1,31 @@
+.DS_Store
+
+.pnp
+.pnp.js
+.env.local
+.env.*.local
+.history
+*.log*
+
+node_modules/
+.yarn-integrity
+.pnpm-store/
+*.tsbuildinfo
+.eslintcache
+.changeset/pre.json
+
+dist/
+coverage/
+release/
+output/
+output_resource/
+log/
+
+.vscode/**/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+
+**/*/typings/auto-generated
+
+modern.config.local.*

frontend-react/.env.example

@@ -0,0 +1 @@
+API_BASE=http://127.0.0.1:8000

frontend-react/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@modern-js'],
+};

frontend-react/.gitignore

@@ -0,0 +1,32 @@
+.DS_Store
+.env
+
+.pnp
+.pnp.js
+.env.local
+.env.*.local
+.history
+*.log*
+
+node_modules/
+.yarn-integrity
+.pnpm-store/
+*.tsbuildinfo
+.eslintcache
+.changeset/pre.json
+
+dist/
+coverage/
+release/
+output/
+output_resource/
+log/
+
+.vscode/**/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+
+**/*/typings/auto-generated
+
+modern.config.local.*

frontend-react/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install lint-staged

frontend-react/.npmrc

@@ -0,0 +1,2 @@
+strict-peer-dependencies=false
+registry=https://registry.npmmirror.com/

frontend-react/.nvmrc

@@ -0,0 +1 @@
+lts/iron

frontend-react/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid"
+}

frontend-react/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:20-alpine AS base
+
+FROM base AS installer
+WORKDIR /app
+COPY package.json .npmrc ./
+RUN npm install
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=installer /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+FROM base AS runner
+WORKDIR /app
+EXPOSE 8080/tcp
+COPY .npmrc ./
+RUN npm install @modern-js/app-tools @modern-js/runtime --no-optional --no-shrinkwrap && mkdir src
+COPY modern.config.ts package.json ./
+COPY --from=builder /app/dist ./dist
+ENV API_BASE=
+CMD ["npm", "run", "serve"]

frontend-react/README.md

@@ -0,0 +1,39 @@
+# AgentCoord Frontend
+
+This is the frontend for the AgentCoord project. Root project is located [here](https://github.com/AgentCoord/AgentCoord)
+
+## Installation
+
+You can launch the frontend by simply using `docker-compose` in the root directory of the project.
+
+Or, you can launch the frontend manually by following the steps below.
+
+1. Install the dependencies by running `npm install`.
+
+```bash
+npm install
+```
+
+2. Build the frontend by running `npm run build`.
+
+```bash
+npm run build
+```
+
+3. Start the frontend by running `npm run serve`.
+
+```bash
+npm run serve
+```
+
+Then you can access the frontend by visiting `http://localhost:8080`.
+
+## Development
+
+You can run the frontend in development mode by running `npm run dev`.
+
+```bash
+npm run dev
+```
+
+The frontend website requires the backend server to be running. You can configure the backend server address by copying the `.env.example` file to `.env` and changing the `API_BASE` value to the backend server address.

frontend-react/modern.config.ts

@@ -0,0 +1,25 @@
+import { URL } from 'url';
+import { appTools, defineConfig } from '@modern-js/app-tools';
+
+const apiBase = new URL(process.env.API_BASE || 'http://localhost:8000');
+
+// https://modernjs.dev/en/configure/app/usage
+export default defineConfig({
+  bff: {
+    proxy: {
+      '/api': {
+        target: apiBase.origin,
+        changeOrigin: true,
+        pathRewrite: { '^/api': apiBase.pathname },
+      },
+    },
+  },
+  runtime: {
+    router: true,
+  },
+  plugins: [
+    appTools({
+      bundler: 'experimental-rspack',
+    }),
+  ],
+});

frontend-react/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "agent-coord-frontend",
+  "version": "0.0.1",
+  "scripts": {
+    "reset": "npx rimraf ./**/node_modules",
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "serve": "modern serve",
+    "new": "modern new",
+    "lint": "modern lint",
+    "prepare": "husky install",
+    "upgrade": "modern upgrade"
+  },
+  "engines": {
+    "node": ">=16.18.1"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@modern-js/runtime": "2.46.1",
+    "@mui/icons-material": "^5.15.6",
+    "@mui/material": "^5.15.6",
+    "@sttot/api-hooks": "^1.2.5",
+    "d3": "^7.8.5",
+    "localforage": "^1.10.0",
+    "lodash": "^4.17.21",
+    "mobx": "^6.12.0",
+    "mobx-react-lite": "^4.0.6",
+    "re-resizable": "^6.9.11",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "react-markdown": "^9.0.1",
+    "react-rnd": "^10.4.1",
+    "rehype-highlight": "^7.0.0",
+    "rehype-katex": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0"
+  },
+  "devDependencies": {
+    "@modern-js-app/eslint-config": "2.46.1",
+    "@modern-js/app-tools": "2.46.1",
+    "@modern-js/eslint-config": "2.46.1",
+    "@modern-js/tsconfig": "2.46.1",
+    "@types/d3": "^7.4.3",
+    "@types/jest": "~29.2.4",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "~16.11.7",
+    "@types/react": "~18.0.26",
+    "@types/react-dom": "~18.0.10",
+    "husky": "~8.0.1",
+    "lint-staged": "~13.1.0",
+    "prettier": "~2.8.1",
+    "rimraf": "~3.0.2",
+    "typescript": "~5.0.4"
+  }
+}

frontend-react/src/.eslintrc.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  root: true,
+  extends: ['@modern-js-app'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['../tsconfig.json'],
+  },
+};

frontend-react/src/apis/agent-select-modify.ts

@@ -0,0 +1,86 @@
+import { api } from '@sttot/api-hooks';
+import { IApiStepTask } from './generate-base-plan';
+
+export interface IAgentSelectModifyInitRequest {
+  goal: string;
+  stepTask: IApiStepTask;
+}
+
+export interface IAgentSelectModifyAddRequest {
+  aspects: string[];
+}
+
+export interface IScoreItem {
+  reason: string;
+  score: number;
+}
+
+type IRawAgentSelectModifyInitResponse = Record<
+  string,
+  Record<string, { Reason: string; Score: number }>
+>;
+
+export const agentSelectModifyInitApi = api<
+  IAgentSelectModifyInitRequest,
+  Record<string, Record<string, IScoreItem>>
+>(
+  ({ goal, stepTask }) => ({
+    baseURL: 'api',
+    url: '/agentSelectModify_init',
+    method: 'POST',
+    data: {
+      'General Goal': goal,
+      stepTask: {
+        StepName: stepTask.name,
+        TaskContent: stepTask.content,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        InputObject_List: stepTask.inputs,
+        OutputObject: stepTask.output,
+      },
+    },
+  }),
+  ({ data }: { data: IRawAgentSelectModifyInitResponse }) =>
+    Object.fromEntries(
+      Object.entries(data).map(([agent, reasons]) => [
+        agent,
+        Object.fromEntries(
+          Object.entries(reasons).map(([reason, score]) => [
+            reason,
+            {
+              reason: score.Reason,
+              score: score.Score,
+            },
+          ]),
+        ),
+      ]),
+    ),
+);
+
+export const agentSelectModifyAddApi = api<
+  IAgentSelectModifyAddRequest,
+  Record<string, Record<string, IScoreItem>>
+>(
+  data => ({
+    baseURL: 'api',
+    url: '/agentSelectModify_addAspect',
+    method: 'POST',
+    data: {
+      aspectList: data.aspects,
+    },
+  }),
+  ({ data }: { data: IRawAgentSelectModifyInitResponse }) =>
+    Object.fromEntries(
+      Object.entries(data).map(([agent, reasons]) => [
+        agent,
+        Object.fromEntries(
+          Object.entries(reasons).map(([reason, score]) => [
+            reason,
+            {
+              reason: score.Reason,
+              score: score.Score,
+            },
+          ]),
+        ),
+      ]),
+    ),
+);

frontend-react/src/apis/execute-plan.ts

@@ -0,0 +1,144 @@
+import { api } from '@sttot/api-hooks';
+import type { IGeneratedPlan } from './generate-base-plan';
+import { ActionType } from '@/storage/plan';
+
+export interface IExecutePlanRequest {
+  plan: IGeneratedPlan;
+  stepsToRun: number;
+  rehearsalLog: IExecuteNode[];
+}
+
+export enum ExecuteNodeType {
+  Step = 'step',
+  Object = 'object',
+}
+
+type IExecuteRawResponse = {
+  LogNodeType: string;
+  NodeId: string;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  InputName_List?: string[] | null;
+  OutputName?: string;
+  content?: string;
+  ActionHistory?: {
+    ID: string;
+    ActionType: string;
+    AgentName: string;
+    Description: string;
+    ImportantInput: string[];
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    Action_Result: string;
+  }[];
+};
+
+export interface IExecuteStepHistoryItem {
+  id: string;
+  type: ActionType;
+  agent: string;
+  description: string;
+  inputs: string[];
+  result: string;
+}
+
+export interface IExecuteStep {
+  type: ExecuteNodeType.Step;
+  id: string;
+  inputs: string[];
+  output: string;
+  history: IExecuteStepHistoryItem[];
+}
+
+export interface IExecuteObject {
+  type: ExecuteNodeType.Object;
+  id: string;
+  content: string;
+}
+
+export type IExecuteNode = IExecuteStep | IExecuteObject;
+
+export const executePlanApi = api<IExecutePlanRequest, IExecuteNode[]>(
+  ({ plan, stepsToRun, rehearsalLog }) => ({
+    baseURL: '/api',
+    url: '/executePlan',
+    method: 'POST',
+    timeout: Infinity,
+    data: {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      num_StepToRun: Number.isFinite(stepsToRun)
+        ? Math.max(stepsToRun, 1)
+        : null,
+      plan: {
+        'Initial Input Object': plan.inputs,
+        'General Goal': plan.goal,
+        'Collaboration Process': plan.process.map(step => ({
+          StepName: step.name,
+          TaskContent: step.content,
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          InputObject_List: step.inputs,
+          OutputObject: step.output,
+          AgentSelection: step.agents,
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          Collaboration_Brief_frontEnd: step.brief,
+          TaskProcess: step.process.map(action => ({
+            ActionType: action.type,
+            AgentName: action.agent,
+            Description: action.description,
+            ID: action.id,
+            ImportantInput: action.inputs,
+          })),
+        })),
+      },
+      RehearsalLog: rehearsalLog.map(h =>
+        h.type === ExecuteNodeType.Object
+          ? {
+              LogNodeType: 'object',
+              NodeId: h.id,
+              content: h.content,
+            }
+          : {
+              LogNodeType: 'step',
+              NodeId: h.id,
+              // eslint-disable-next-line @typescript-eslint/naming-convention
+              InputName_List: h.inputs,
+              OutputName: h.output,
+              chatLog: [],
+              // eslint-disable-next-line @typescript-eslint/naming-convention
+              inputObject_Record: [],
+              ActionHistory: h.history.map(item => ({
+                ID: item.id,
+                ActionType: item.type,
+                AgentName: item.agent,
+                Description: item.description,
+                ImportantInput: item.inputs,
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                Action_Result: item.result,
+              })),
+            },
+      ),
+    },
+  }),
+  ({ data }) =>
+    data.map((raw: IExecuteRawResponse) =>
+      raw.LogNodeType === 'step'
+        ? {
+            type: ExecuteNodeType.Step,
+            id: raw.NodeId,
+            inputs: raw.InputName_List || [],
+            output: raw.OutputName ?? '',
+            history:
+              raw.ActionHistory?.map(item => ({
+                id: item.ID,
+                type: item.ActionType,
+                agent: item.AgentName,
+                description: item.Description,
+                inputs: item.ImportantInput,
+                result: item.Action_Result,
+              })) || [],
+          }
+        : {
+            type: ExecuteNodeType.Object,
+            id: raw.NodeId,
+            content: raw.content || '',
+          },
+    ),
+);

frontend-react/src/apis/fill-agent-selection.ts

@@ -0,0 +1,61 @@
+import { api } from '@sttot/api-hooks';
+import { IApiStepTask, vec2Hsl, IRawStepTask } from './generate-base-plan';
+
+export interface IFillAgentSelectionRequest {
+  goal: string;
+  stepTask: IApiStepTask;
+  agents: string[];
+}
+
+export const fillAgentSelectionApi = api<
+  IFillAgentSelectionRequest,
+  IApiStepTask
+>(
+  ({ goal, stepTask, agents }) => ({
+    baseURL: 'api',
+    url: '/fill_stepTask_TaskProcess',
+    method: 'POST',
+    data: {
+      'General Goal': goal,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      stepTask_lackTaskProcess: {
+        StepName: stepTask.name,
+        TaskContent: stepTask.content,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        InputObject_List: stepTask.inputs,
+        OutputObject: stepTask.output,
+        AgentSelection: agents,
+      },
+    },
+  }),
+  ({ data }: { data: IRawStepTask }) => ({
+    name: data.StepName ?? '',
+    content: data.TaskContent ?? '',
+    inputs: data.InputObject_List ?? [],
+    output: data.OutputObject ?? '',
+    agents: data.AgentSelection ?? [],
+    brief: {
+      template: data.Collaboration_Brief_FrontEnd?.template ?? '',
+      data: Object.fromEntries(
+        Object.entries(data.Collaboration_Brief_FrontEnd?.data ?? {}).map(
+          ([key, value]) => [
+            key,
+            {
+              text: value.text,
+              style: {
+                background: vec2Hsl(value.color),
+              },
+            },
+          ],
+        ),
+      ),
+    },
+    process: data.TaskProcess.map(process => ({
+      id: process.ID,
+      type: process.ActionType,
+      agent: process.AgentName,
+      description: process.Description,
+      inputs: process.ImportantInput,
+    })),
+  }),
+);