feat(boxai-sidebar): Add logic to render remote sidebar from prop (#4106)

* feat: add and use remote sidebar component in sidebar props

* feat(boxai-sidebar): add unit test

* feat(boxai-sidebar): address some comments

* feat(boxai-sidebar): fix failed test

* fix(boxai-sidebar): pass itemsize in prop as optional

* feat(boxai-sidebar): refactor code based on comments

* feat(boxai-sidebar): fix unit tests and remove css import

* feat(boxai-sidebar): replace remoteModule prop with renderRemoteModule for improved flexibility

* fix(boxai-sidebar): simplify return statement for renderRemoteModule

---------

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

Author: fpan225

src/elements/content-sidebar/BoxAISidebar.tsx

@@ -10,7 +10,6 @@ import BoxAISidebarContent from './BoxAISidebarContent';
 import { BoxAISidebarContext } from './context/BoxAISidebarContext';
 import { SPREADSHEET_FILE_EXTENSIONS } from '../common/content-answers/constants';
 import type { BoxAISidebarCache, BoxAISidebarCacheSetter } from './types/BoxAISidebarTypes';
-
 import messages from '../common/content-answers/messages';
 
 export interface BoxAISidebarProps {
@@ -57,6 +56,7 @@ export interface BoxAISidebarProps {
     recordAction: (params: RecordActionType) => void;
     setCacheValue: BoxAISidebarCacheSetter;
     shouldFeedbackFormIncludeFeedbackText?: boolean;
+    renderRemoteModule?: (elementId: string) => React.ReactNode;
     shouldPreinitSession?: boolean;
     setHasQuestions: (hasQuestions: boolean) => void;
 }
@@ -79,6 +79,7 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
         onFeedbackFormSubmit,
         onUserInteraction,
         recordAction,
+        renderRemoteModule,
         setCacheValue,
         shouldFeedbackFormIncludeFeedbackText,
         shouldPreinitSession = true,
@@ -130,6 +131,10 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
         }
     }, [questions.length, setHasQuestions]);
 
+    if (renderRemoteModule) {
+        return renderRemoteModule(elementId);
+    }
+
     let questionsWithoutInProgress = questions;
     if (questions.length > 0 && !questions[questions.length - 1].isCompleted) {
         // pass only fully completed questions to not show loading indicator of question where we canceled API request

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

@@ -347,6 +347,26 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
         expect(screen.queryByTestId('content-answers-modal')).not.toBeInTheDocument();
     });
 
+    describe('remote sidebar component', () => {
+        const MockRemoteSidebar = jest.fn(() => <div data-testid="remote-sidebar" />);
+        const renderRemoteModule = jest.fn(() => <MockRemoteSidebar elementId={mockProps.elementId} />);
+
+        test('should render remote sidebar component when provided', async () => {
+            await renderComponent({ renderRemoteModule });
+
+            expect(renderRemoteModule).toHaveBeenCalledWith(mockProps.elementId);
+            expect(screen.getByTestId('remote-sidebar')).toBeInTheDocument();
+        });
+
+        test('should not render default sidebar when remote component is provided', async () => {
+            await renderComponent({ renderRemoteModule });
+
+            expect(screen.queryByTestId('boxai-sidebar-title')).not.toBeInTheDocument();
+            expect(screen.queryByTestId('sidebar-agent-selector')).not.toBeInTheDocument();
+            expect(screen.queryByRole('button', { name: 'Clear conversation' })).not.toBeInTheDocument();
+        });
+    });
+
     describe('given shouldPreinitSession = false, should create session on user intent', () => {
         test('agents list open', async () => {
             MockBoxAiAgentSelectorWithApi.mockImplementation(({ onAgentsListOpen }) => {