fix(ai-sidebar): Add callback for selected agent (#4115)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: marcoartaviaq

src/elements/content-sidebar/BoxAISidebarContent.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import flow from 'lodash/flow';
 import { useIntl } from 'react-intl';
 import classNames from 'classnames';
-import { BoxAiAgentSelectorWithApi, useAgents } from '@box/box-ai-agent-selector';
+import { BoxAiAgentSelectorWithApi, useAgents, type AgentType } from '@box/box-ai-agent-selector';
 import { IconButton, Tooltip } from '@box/blueprint-web';
 import { ArrowsExpand } from '@box/blueprint-web-assets/icons/Fill';
 import {
@@ -34,11 +34,17 @@ const MARK_NAME_JS_READY: string = `${ORIGIN_BOXAI_SIDEBAR}_${EVENT_JS_READY}`;
 
 mark(MARK_NAME_JS_READY);
 
-function BoxAISidebarContent(props: ApiWrapperWithInjectedProps & { shouldShowLandingPage: boolean }) {
+function BoxAISidebarContent(
+    props: ApiWrapperWithInjectedProps & {
+        onSelectedAgentCallback: (selectedAgent: AgentType) => void;
+        shouldShowLandingPage: boolean;
+    },
+) {
     const {
         createSession,
         encodedSession,
         onClearAction,
+        onSelectedAgentCallback,
         getAIStudioAgents,
         hasRequestInProgress,
         hostAppName,
@@ -155,6 +161,11 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps & { shouldShowLa
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [encodedSession]);
 
+    React.useEffect(() => {
+        onSelectedAgentCallback?.(selectedAgent);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedAgent?.id]);
+
     const renderBoxAISidebarTitle = () => {
         return (
             <div className="bcs-BoxAISidebar-title-part">

src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx

@@ -4,11 +4,15 @@ import { render, screen } from '../../../test-utils/testing-library';
 import BoxAISidebar, { BoxAISidebarProps } from '../BoxAISidebar';
 
 let MockBoxAiAgentSelectorWithApi: jest.Mock;
+let mockUseAgents: jest.Mock;
+
 jest.mock('@box/box-ai-agent-selector', () => {
     MockBoxAiAgentSelectorWithApi = jest.fn();
+    mockUseAgents = jest.fn();
     return {
         ...jest.requireActual('@box/box-ai-agent-selector'),
         BoxAiAgentSelectorWithApi: MockBoxAiAgentSelectorWithApi,
+        useAgents: mockUseAgents,
     };
 });
 
@@ -39,6 +43,7 @@ jest.mock('@box/box-ai-content-answers', () => ({
             onClearAction={mockOnClearAction}
             onCloseModal={jest.fn()}
             onSelectAgent={jest.fn()}
+            onSelectedAgentCallback={props.onSelectedAgentCallback}
             onSuggestedQuestionsFetched={props.onSuggestedQuestionsFetched}
             onAgentEditorToggle={jest.fn()}
             questions={props.restoredQuestions}
@@ -145,6 +150,12 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
 
     beforeEach(() => {
         MockBoxAiAgentSelectorWithApi.mockImplementation(() => <div data-testid="sidebar-agent-selector" />);
+        mockUseAgents.mockReturnValue({
+            agents: [],
+            selectedAgent: { id: '1', config: {}, name: 'Test Agent' },
+            setSelectedAgent: jest.fn(),
+            requestState: 'success',
+        });
     });
 
     afterEach(() => {
@@ -465,4 +476,14 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
 
         expect(mockProps.onUserInteraction).toHaveBeenCalled();
     });
+
+    test('Should call onSelectedAgentCallback on agent selected change', async () => {
+        const mockOnSelectedAgentCallback = jest.fn();
+
+        await renderComponent({
+            onSelectedAgentCallback: mockOnSelectedAgentCallback,
+        });
+
+        expect(mockOnSelectedAgentCallback).toHaveBeenCalled();
+    });
 });