From 7e01350d467dc9671ce899b3cc3692bfed8a5c6c Mon Sep 17 00:00:00 2001
From: YASAI03 <yasaijuice.0316@gmail.com>
Date: Tue, 4 Mar 2025 07:25:40 +0900
Subject: [PATCH] fix(studio): Fixed an issue where the app would crash if a
 team was not set when opening a playground page. (#5794)

<!-- 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?

<!-- Please give a short summary of the change and the problem this
solves. -->

(I'm not familiar with English, so I use Goggle translation a lot. So
please forgive me if I say something rude.)
I started autogen-studio and opened the page in the browser, nothing was
rendered.
I checked using the Developer tool, the following error appeared:
```
TypeError: Cannot read properties of null (reading 'label')
at editor.tsx:114:42
```
I check the implementation, it looks like `team.component` is `null`,
which seems to be caused during initialization process when the team is
not registered.
[source](https://github.com/microsoft/autogen/blob/78ff883d24b936ca3055df56ed2590e165fb44d2/python/packages/autogen-studio/frontend/src/components/views/playground/manager.tsx#L199)

So I fixed the issue where the gallery wasn't being retrieved which was
causing the issue.

### Reproduce bug

1. clone this repository
2. open devcontainer(`python/packages/autogen-studio`)
3. Running the application
```sh
cd frontend
yarn build
cd -
OPENAI_API_KEY="" autogenstudio ui --port 8081
```
4. Open `localhost:8081` in browser.

## Related issue number

<!-- For example: "Closes #1234" -->

Probably not found. (sorry if I had to raise an issue before PR)

## Checks

- [x] 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.
- [x] I've made sure all auto checks have passed.

Co-authored-by: Victor Dibia <victordibia@microsoft.com>
---
 .../frontend/src/components/views/playground/manager.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/python/packages/autogen-studio/frontend/src/components/views/playground/manager.tsx b/python/packages/autogen-studio/frontend/src/components/views/playground/manager.tsx
index e2b33152b29..a527cbbe6f3 100644
--- a/python/packages/autogen-studio/frontend/src/components/views/playground/manager.tsx
+++ b/python/packages/autogen-studio/frontend/src/components/views/playground/manager.tsx
@@ -27,7 +27,7 @@ export const SessionManager: React.FC = () => {
   const { user } = useContext(appContext);
   const { session, setSession, sessions, setSessions } = useConfigStore();
 
-  const defaultGallery = useGalleryStore((state) => state.getSelectedGallery());
+  const galleryStore = useGalleryStore();
 
   useEffect(() => {
     if (typeof window !== "undefined") {
@@ -196,6 +196,8 @@ export const SessionManager: React.FC = () => {
       if (teamsData.length > 0) {
         setTeams(teamsData);
       } else {
+        await galleryStore.fetchGalleries(user.email);
+        const defaultGallery = galleryStore.getSelectedGallery();
         const sampleTeam = defaultGallery?.config.components.teams[0];
         // If no teams, create a default team
         const defaultTeam = await teamAPI.createTeam(