UI Bug: Team Builder/Playground Blank in Chrome - Resolved by Hard Refresh

[usag1e]

What happened?

Describe the bug

• AutoGen Studio UI (Team Builder and Playground) initially fails to load in Google Chrome, displaying blank sections.
• The Gallery section loads correctly.
• A hard refresh (Ctrl+Shift+R) in Google Chrome resolves the issue. I guess this is a caching problem. The UI functions correctly in Microsoft Edge without requiring a hard refresh.
• Additionnaly, with version >=0.4.2.dev, after the hard refresh, there are issues on both Edge and Chrome when clicking on Team Builder or New team for example (see error below)

To Reproduce the caching problem
I tried with AGS version: 0.4.1.11 to 0.4.2.dev3
Default Browser: Google Chrome (Version 134.0.6998.89 (Official Build) (64-bit)).

• Team Builder and Playground are blank. Gallery loads.
• Hard refresh (Ctrl+Shift+R): Team Builder and Playground should load.
• Try creating a new team.

To Reproduce the error with creating a New Team
This issue appears to be specific to the 0.4.2.devX versions. AGS version 0.4.1.11 seems to function correctly after a hard refresh.
Using a version >=0.4.2.dev.

1. (After a hard refresh if using Chrome) Click on "Team Builder" or attempt to create a new team.
2. You should see an error in the terminal (see "Additional Context").

Expected behavior
All UI sections (Team Builder, Playground, and Gallery) should load correctly in Google Chrome on the initial load, without requiring a hard refresh. Creating new teams and interacting with the UI should function without errors.

Screenshots versions from 0.4.1.11 to 0.4.2.dev3
with Chrome without hard refresh

• Playground (same for Team Builder)

• Gallery

with Edge without hard refresh
Playground

Screenshots using a version >=0.4.2.dev
** with Chrome with hard refresh**

Additional context

• I believe this issue started after a recent Chrome update, although I cannot pinpoint the exact version when it began.
• For version >=0.4.2.dev before AND after hard refresh: this ERROR shows up in the Terminal when i click on Team Builder for example

2025-03-14 08:14:46.756 | INFO     | autogenstudio.web.app:lifespan:35 - Application startup complete. Navigate to http://127.0.0.1:8081
2025-03-14 08:15:05.031 | ERROR    | autogenstudio.database.db_manager:upsert:174 - Error while updating/creating Gallery: (builtins.TypeError) Object of type SecretStr is not JSON serializable
[SQL: INSERT INTO gallery (created_at, updated_at, user_id, version, config) VALUES (?, ?, ?, ?, ?)]
[parameters: [{'created_at': datetime.datetime(2025, 3, 14, 8, 15, 5, 29947), 'version': '0.0.1', 'user_id': 'guestuser@gmail.com', 'config': {'id': 'gallery_defaul ... (59702 characters truncated) ... NLY RETURN THE ROLE.", 'allow_repeated_speaker': True, 'max_selector_attempts': 3}}]}}, 'updated_at': datetime.datetime(2025, 3, 14, 8, 15, 5, 29947)}]]

Which packages was the bug in?

AutoGen Studio (autogensudio)

Operating system

Windows

[victordibia]

Hi @usag1e ,

Thanks for noting.
It seems there are two issues

• Caching (we use react useMemo optimzations in Teambuilder in a few places which may be causing issues each time the app structure changes and the browser loads a cached version). Will investigate more.
• Gallery serialization. The serialization issue is likely due to a recent agentchat update Use SecretStr type for api key #5939 .

[withsmilo]

Hi @victordibia .
I have a similar caching issue. After I modified something like a certain agent in the Gallery page, the Team Builder page should always be refreshed to apply those changes.

[victordibia]

Hi @withsmilo ,

Thanks for the note.
Why not modify the agent directly in your team in the the TeamBuilder?
In the current design, components in the Gallery are templates. Adding them your team will make a copy of that component..

If we explore a design where all changes in the gallery propagate to any team that uses it, this can have side effects (e.g., changing the behaviours of all existing teams that have imported that component).

[withsmilo]

Thanks for quick reply, @victordibia .
I understood what you said. However, in my opinion, the Gallery itself should be a template, not each component in the Gallery. I mean that all components and the gallery information should be copied to a new team to prevent confusion when users select a team from the From Gallery menu in the Team Builder page.

One question. Is it intended by the current design to work as below?

1. (Gallery page) modify some information of AssistantAgent
2. go to Team Builder page
3. (Team Builder page) refresh
4. (Team Builder page) register a new AssistantAgent to current team
5. You can find the AssistantAgent has some changes made by step 1.

[victordibia]

Yes.. what you have outlined is correct.
(We will need to improve AGS so that the current refresh in step3 should not be needed.)

I agree that the "From Gallery" could be improved. We can add some instructions.

Also, just to confirm, you can also modify the assistant agent in your current team directly.

• Click on the edit button on the assistant agent node (top right)

P.S Would you mind discussing this at the next office hours meeting?
Meeting details here - #4059