👐 refactor: Agents Accessibility and Gemini Error Handling (#5972)

* style: Enhance ControlCombobox with Carat Display, ClassName, and Disabled State

* refactor(ModelPanel): replace SelectDropdown with ControlCombobox for improved accessibility

* style: Adjust padding and positioning in ModelPanel for improved layout

* style(ControlCombobox): add containerClassName and iconSide props for enhanced customization

* style(ControlCombobox): add iconClassName prop for customizable icon styling

* refactor(AgentPanel): enhance layout with new button for creating agents and adjust structure for better alignment

* refactor(AgentSelect): replace SelectDropDown with ControlCombobox for improved accessibility and layout

* feat(translation): add new translation key for improved UI clarity

* style(AgentSwitcher, AssistantSwitcher): add iconClassName prop for customizable icon styling

* refactor(AgentPanelSkeleton): improve layout of skeleton components to match new visual structure

* style(AgentPanel, AgentPanelSkeleton): add margin to flex container for improved layout consistency

* a11y(AgentSelect, ControlCombobox): add selectId prop for preventing focus going to start to page after agent selection

* fix(AgentSelect): update SELECT_ID constant for improved clarity in component identification

* fix(GoogleClient): update type annotation, add abort handling for content generation requests, catch "uncaught" abort errors and GoogleGenerativeAI errors from `@google/generative-ai`
This commit is contained in:
Danny Avila 2025-02-21 15:02:07 -05:00 committed by GitHub
parent 1e625f7557
commit fc733d2b9e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 227 additions and 150 deletions

View file

@ -4,10 +4,16 @@ import { Skeleton } from '~/components/ui';
export default function AgentPanelSkeleton() {
return (
<div className="scrollbar-gutter-stable h-auto w-full flex-shrink-0 overflow-x-hidden">
{/* Agent Select and Button */}
<div className="mt-1 flex w-full gap-2">
<Skeleton className="h-[40px] w-4/5 rounded-lg" />
<Skeleton className="h-[40px] w-1/5 rounded-lg" />
<div className="mx-1 mt-2 flex w-full flex-wrap gap-2">
{/* Agent Select Dropdown */}
<div className="w-full">
<Skeleton className="h-[40px] w-full rounded-md" />
</div>
{/* Create and Select Buttons */}
<div className="flex w-full gap-2">
<Skeleton className="h-[40px] w-3/4 rounded-md" /> {/* Create Button */}
<Skeleton className="h-[40px] w-1/4 rounded-md" /> {/* Select Button */}
</div>
</div>
<div className="h-auto bg-white px-4 pb-8 pt-3 dark:bg-transparent">