Add AutoGen Studio FE; Backend Adaptation; Heroku Deployment Support

.env.testing

@@ -8,5 +8,6 @@ AIRTABLE_BASE_ID=
 AIRTABLE_TABLE_ID=
 GOOGLE_CREDENTIALS=
 OPENAI_API_KEY=<your-openai-api-key>
+REDIS_TLS_URL=rediss://localhost:6379/1
 REDIS_URL=redis://localhost:6379/1
 SECRET_KEY=

.gitignore

@@ -164,3 +164,6 @@ cython_debug/
 settings.json
 
 .env
+
+# UI folder
+nalgonda/ui/*

Procfile

@@ -1,3 +1 @@
 web: gunicorn -w 1 -k uvicorn.workers.UvicornWorker --timeout 120 nalgonda.main:app
-
-#release: ./manage.py migrate --no-input

README.md

@@ -3,54 +3,71 @@
 ## Overview
 
 Project Nalgonda is an innovative platform for managing and executing AI-driven swarm agencies.
-It is built upon the foundational [OpenAI Assistants API](https://platform.openai.com/docs/assistants/overview)
-and extends its functionality through a suite of specialized tools and a sophisticated management system for AI agencies.
+Built upon the [OpenAI Assistants API](https://platform.openai.com/docs/assistants/overview),
+it extends functionality through specialized tools and a sophisticated management system for AI agencies.
+It combines robust FastAPI architecture, Firebase Firestore, and OpenAI's GPT models for dynamic agency
+and agent management.
 
 ## Key Components
 
-- **Agency Configuration Manager**: Manages configurations for AI agencies, ensuring they're loaded and saved properly.
-- **WebSocket Connection Manager**: Handles real-time WebSocket connections for interactive agency-client communication.
-- **Custom Tools**: A collection of tools including `SearchWeb`, `GenerateProposal`, `BuildDirectoryTree`, and more,
-providing specialized functionalities tailored to the needs of different agency roles.
-- **Data Persistence**: Utilizes JSON-based configurations to maintain agency states and preferences across sessions.
+- **Agency Configuration Manager**: Manages configurations for AI agencies.
+- **WebSocket Connection Manager**: Handles WebSocket connections for interactive agency-client communication.
+- **Custom Tools**: Includes tools like `SearchWeb`, `GenerateProposal`, `BuildDirectoryTree`, and more.
+- **Data Persistence**: Uses Firestore for storing tool, agent, and agency configurations.
+- **FastAPI Web Server**: For API routing, CORS middleware, Firebase initialization, and WebSocket communication.
+- **Data Models**: Pydantic models for agencies, agents, and tool configurations.
+- **Caching**: Redis for efficient caching of agency states.
 
 ## Features
 
-- **Agency Configuration**: Configure agencies with agents
-- **Tool Configuration**: Configure tools with custom parameters
-- **Tool Execution**: Execute tools and return results
-- **Agent Configuration**: Configure agents with their knowledge and tools
-- **User Management**: Manage users and their access to different agencies [TODO]
+- **Tool Configuration**: Configure tools with code and parameters.
+- **Agent Configuration**: Configure agents with knowledge and tools.
+- **Agency Configuration**: Set up agencies with agents.
+- **Tool Execution**: Execute tools for various tasks.
+- **User Management**: Manage user access to different agencies [TODO].
+- **API and WebSocket Routers**: Define API endpoints and WebSocket routes.
+- **Security**: Basic implementations of JWT authentication and authorization [TBD].
 
 ## Installation
 
-Ensure you have Python 3.11 or higher and follow these steps to get started:
+1. Ensure Python 3.11+ and Node.js 20.11+ are installed.
+2. Install Python dependencies (from `requirements.txt` or using Poetry).
+3. Set up environment variables in ".env", reference in ".env.testing".
+   - Use `cat ~/ai-in-hand-firebase-adminsdk-....json | jq -c .` for Google Credentials.
+4. In `frontend` directory, run:
+   - for local development: `npm install && npm run start`
+   - for production (builds to nalgonda/ui/ directory and is served by FastAPI):
+   `npm install -g gatsby-cli && npm install --global yarn && yarn install && yarn build`
 
-1. Install the required dependencies (from `requirements.txt` or using Poetry).
-2. Set up the necessary environment variables, including `OPENAI_API_KEY`.
-3. Use the provided JSON configuration files as templates to configure your own AI agencies.
-4. Start the FastAPI server (`uvicorn nalgonda.main:app --reload`) to interact with the system.
-
-Note: Refer to individual class and method docstrings for detailed instructions and usage.
+### Running the Application
+Start the FastAPI server: `uvicorn nalgonda.main:app --reload`
 
 ## Deployment to Heroku
 
-Follow these steps to deploy the app to Heroku:
-1. `poetry export -o requirements.txt --without dev --without-hashes` - update `requirements.txt`
-2. `heroku login`- log in to Heroku
-3. `heroku git:remote -a ainhand` - set up Heroku remote
-4. `git push heroku main` - deploy to Heroku
-5. `heroku ps:scale web=1` - scale up the app
-6. `heroku logs --tail` - view logs
+1. Update `requirements.txt` with `poetry export --without dev --without-hashes > requirements.txt`.
+2. Log in to Heroku with `heroku login`.
+3. Set up Heroku remote: `heroku git:remote -a ainhand`.
+4. Deploy: `git push heroku main`.
+5. Scale up: `heroku ps:scale web=1`.
+6. View logs: `heroku logs --tail`.
 
 ## Usage
 
 ### API Endpoints
-
-Send POST requests to endpoints such as `POST /v1/api/agency` and `POST /v1/api/agency/message` to perform operations
-like creating new agencies and sending messages to them.
+To interact with the platform, use the Postman collection, which includes all necessary routes and variables for testing.
 
 ### WebSocket Communication
+Connect to WebSocket endpoints (`/v1/ws/{agency_id}`, `/v1/ws/{agency_id}/{thread_id}`)
+for real-time communication with AI agencies.
 
-Connect to WebSocket endpoints (e.g., `/v1/ws/{agency_id}`, `/v1/ws/{agency_id}/{thread_id}`)
-to engage in real-time communication with configured AI agencies.
+## Key Components
+- Agency Configuration Manager: Manages configurations for AI agencies.
+- WebSocket Connection Manager: Handles WebSocket connections for interactive agency-client communication.
+- Custom Tools: Includes tools like SearchWeb, GenerateProposal, BuildDirectoryTree, and more.
+- Data Persistence: Uses JSON-based configurations and Firestore for maintaining agency states.
+- FastAPI Web Server: For API routing, CORS middleware, Firebase initialization, and WebSocket communication.
+- Data Models: Pydantic models for agencies, agents, and tool configurations.
+- Caching: Redis for efficient configuration management.
+
+## Areas for Improvement
+- Enhanced exception handling, security, documentation, testing, caching logic, and database interactions.

frontend/.env.default

@@ -0,0 +1,5 @@
+# use this for .env.development assuming your backend is running on port 8081
+GATSBY_API_URL=http://127.0.0.1:8081/api
+
+# use this .env.production assuming your backend is running on same port as frontend. Remember to remove these comments.
+GATSBY_API_URL=/api

frontend/.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+.cache/
+public/
+
+.env.development
+.env.production
+
+yarn.lock

frontend/README.md

@@ -0,0 +1,30 @@
+## 🚀 Running UI in Dev Mode
+
+Run the UI in dev mode (make changes and see them reflected in the browser with hotreloading):
+
+- npm install
+- npm run start
+
+This should start the server on port 8000.
+
+## Design Elements
+
+- **Gatsby**: The app is created in Gatsby. A guide on bootstrapping a Gatsby app can be found here - https://www.gatsbyjs.com/docs/quick-start/.
+  This provides an overview of the project file structure include functionality of files like `gatsby-config.js`, `gatsby-node.js`, `gatsby-browser.js` and `gatsby-ssr.js`.
+- **TailwindCSS**: The app uses TailwindCSS for styling. A guide on using TailwindCSS with Gatsby can be found here - https://tailwindcss.com/docs/guides/gatsby.https://tailwindcss.com/docs/guides/gatsby . This will explain the functionality in tailwind.config.js and postcss.config.js.
+
+## Modifying the UI, Adding Pages
+
+The core of the app can be found in the `src` folder. To add pages, add a new folder in `src/pages` and add a `index.js` file. This will be the entry point for the page. For example to add a route in the app like `/about`, add a folder `about` in `src/pages` and add a `index.tsx` file. You can follow the content style in `src/pages/index.tsx` to add content to the page.
+
+Core logic for each component should be written in the `src/components` folder and then imported in pages as needed.
+
+## connecting to front end
+
+the front end makes request to the backend api and expects it at /api on localhost port 8081
+
+## setting env variables for the UI
+
+- please look at env.default
+- make a copy of this file and name it `env.development`
+- set the values for the variables in this file

frontend/gatsby-browser.js

@@ -0,0 +1,6 @@
+import "antd/dist/reset.css";
+import "./src/styles/global.css";
+
+import AuthProvider from "./src/hooks/provider";
+
+export const wrapRootElement = AuthProvider;

frontend/gatsby-config.ts

@@ -0,0 +1,52 @@
+import type { GatsbyConfig } from "gatsby";
+
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+});
+
+const config: GatsbyConfig = {
+  pathPrefix: `${process.env.PREFIX_PATH_VALUE}`,
+  siteMetadata: {
+    title: `AI in Hand Builder Platform`,
+    description: `Build AI Teams`,
+    siteUrl: `http://tbd.place`,
+  },
+  flags: {
+    LAZY_IMAGES: true,
+    FAST_DEV: true,
+    DEV_SSR: false,
+  },
+  plugins: [
+    "gatsby-plugin-sass",
+    "gatsby-plugin-image",
+    "gatsby-plugin-sitemap",
+    "gatsby-plugin-postcss",
+    {
+      resolve: "gatsby-plugin-manifest",
+      options: {
+        icon: "src/images/icon.png",
+      },
+    },
+    "gatsby-plugin-mdx",
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "images",
+        path: "./src/images/",
+      },
+      __key: "images",
+    },
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "pages",
+        path: "./src/pages/",
+      },
+      __key: "pages",
+    },
+  ],
+};
+
+export default config;

frontend/gatsby-ssr.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const codeToRunOnClient = `(function() {
+  try {
+    var mode = localStorage.getItem('darkmode');
+    document.getElementsByTagName("html")[0].className === 'dark' ? 'dark' : 'light';
+  } catch (e) {}
+})();`;
+
+export const onRenderBody = ({ setHeadComponents }) =>
+  setHeadComponents([
+    <script
+      key="myscript"
+      dangerouslySetInnerHTML={{ __html: codeToRunOnClient }}
+    />,
+  ]);

frontend/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "ai-in-hand-platform-ui",
+  "version": "1.0.0",
+  "private": true,
+  "description": "AI in Hand Platform - Build and Test Your AI Workforce",
+  "author": "AI in Hand Team",
+  "keywords": [
+    "gatsby"
+  ],
+  "scripts": {
+    "develop": "gatsby clean && gatsby develop",
+    "dev": "npm run develop",
+    "start": "gatsby clean && gatsby develop",
+    "build": "gatsby clean && rm -rf ../nalgonda/ui  && PREFIX_PATH_VALUE='' gatsby build --prefix-paths && cp -r  public/ ../nalgonda/ui",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@ant-design/charts": "^2.0.3",
+    "@headlessui/react": "^1.7.16",
+    "@heroicons/react": "^2.0.18",
+    "@mdx-js/mdx": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@tailwindcss/line-clamp": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/react-syntax-highlighter": "^15.5.10",
+    "antd": "^5.12.8",
+    "autoprefixer": "^10.4.7",
+    "gatsby": "^4.25.8",
+    "gatsby-plugin-image": "^2.25.0",
+    "gatsby-plugin-manifest": "^4.25.0",
+    "gatsby-plugin-mdx": "^4.4.0",
+    "gatsby-plugin-postcss": "^5.25.0",
+    "gatsby-plugin-sass": "^5.25.0",
+    "gatsby-plugin-sharp": "^4.25.1",
+    "gatsby-plugin-sitemap": "^5.25.0",
+    "gatsby-source-filesystem": "^4.25.0",
+    "gatsby-transformer-sharp": "^4.25.0",
+    "jszip": "^3.10.1",
+    "lodash.debounce": "^4.0.8",
+    "postcss": "^8.4.13",
+    "react": "^18.2.0",
+    "react-contenteditable": "^3.3.6",
+    "react-dom": "^18.2.0",
+    "react-inner-image-zoom": "^3.0.2",
+    "react-markdown": "^8.0.7",
+    "react-resizable": "^3.0.5",
+    "react-router-dom": "^6.3.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^3.0.1",
+    "sass": "^1.51.0",
+    "tailwindcss": "^3.0.24",
+    "zustand": "^4.4.6"
+  },
+  "devDependencies": {
+    "@types/node": "^18.19.6",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/react-inner-image-zoom": "^3.0.0",
+    "@types/react-resizable": "^3.0.2",
+    "gh-pages": "^4.0.0",
+    "typescript": "^4.9.5"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,4 @@
+
+module.exports = () => ({
+  plugins: [require("tailwindcss")],
+})