mirror of
https://github.com/microsoft/autogen.git
synced 2025-07-17 05:51:36 +00:00
2f43005624
<!-- Thank you for your contribution! Please review https://microsoft.github.io/autogen/docs/Contribute before opening a pull request. --> <!-- Please add a reviewer to the assignee section when you create a PR. If you don't have the access to it, we will shortly find a reviewer and assign them to your PR. --> ## Why are these changes needed? Fixes the problem where Gallery items could only be modified via JSON This PR does the following - Refactor TeamBuilder to have modular component editor UI primarily focused on editing each component type. - Refactor the Gallery UX - improve layout to use tabs for each component type - enable editing of each component item by reusing the component editor - Enable switching between form editing and UI editing for coponent editor view This way, gallery items can be readily modified and then reused in the component library in team builder. It also implements an upate to the Gallery data structure to make it more intuitive - it has a components field that has teams, agents, models ... <img width="1598" alt="image" src="https://github.com/user-attachments/assets/3c3a228a-0bd2-4fc1-85ec-c9685c80bf72" /> <img width="1614" alt="image" src="https://github.com/user-attachments/assets/5b6ed840-9c48-47bc-8c17-2aa50c7dcb99" /> <!-- Please give a short summary of the change and the problem this solves. --> ## Related issue number <!-- For example: "Closes #1234" --> Closes #5465 Closes #5047 cc @nour-bouzid @balakreshnan @EItanya @joslat @IustinT @leonG7 ## Checks - [ ] I've included any doc changes needed for <https://microsoft.github.io/autogen/>. See <https://github.com/microsoft/autogen/blob/main/CONTRIBUTING.md> to build and test documentation locally. - [ ] I've added tests (if relevant) corresponding to the changes introduced in this PR. - [ ] I've made sure all auto checks have passed.
AutoGen Studio frontend
🚀 Running UI in Dev Mode
Run the UI in dev mode (make changes and see them reflected in the browser with hot reloading):
yarn install
yarn start # local development
yarn start --host 0.0.0.0 # in container (enables external access)
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.jsandgatsby-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 backend
The frontend makes requests 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
- The main variable here is
GATSBY_API_URLwhich should be set tohttp://localhost:8081/apifor local development. This tells the UI where to make requests to the backend.
- The main variable here is