feat(boxai-sidebar): Cache custom suggested questions

src/elements/content-sidebar/BoxAISidebar.tsx

@@ -4,7 +4,7 @@
  */
 import * as React from 'react';
 import { useIntl } from 'react-intl';
-import { type ItemType } from '@box/box-ai-content-answers';
+import {type ItemType, SuggestedQuestionType} from '@box/box-ai-content-answers';
 import { AgentsProvider, RecordActionType } from '@box/box-ai-agent-selector';
 import BoxAISidebarContent from './BoxAISidebarContent';
 import { BoxAISidebarContext } from './context/BoxAISidebarContext';
@@ -133,17 +133,23 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
         spreadsheetNotice = formatMessage(messages.welcomeMessageSpreadsheetNotice);
     }
 
+    const handleSuggestedQuestionsFetched = (fetchedSuggestedQuestions: SuggestedQuestionType[]) => {
+        setCacheValue('suggestions', fetchedSuggestedQuestions);
+    };
+
     return (
         // BoxAISidebarContent is using withApiWrapper that is not passing all provided props,
         // that's why we need to use provider to pass other props
         <AgentsProvider value={cache.agents}>
             <BoxAISidebarContext.Provider value={contextValue}>
                 <BoxAISidebarContent
+                    cachedSuggestions={cache.suggestions}
                     getSuggestedQuestions={getSuggestedQuestions}
                     isOpen
                     isStopResponseEnabled={isStopResponseEnabled}
                     itemID={fileID}
                     itemIDs={[fileID]}
+                    onSuggestedQuestionsFetched={handleSuggestedQuestionsFetched}
                     restoredQuestions={questionsWithoutInProgress}
                     restoredSession={cache.encodedSession}
                     restoredShouldShowLandingPage={cache.shouldShowLandingPage}

src/elements/content-sidebar/BoxAISidebarContent.tsx

@@ -48,6 +48,7 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps & { shouldShowLa
         onSelectAgent,
         questions,
         shouldShowLandingPage,
+        suggestedQuestions,
         sendQuestion,
         stopQuestion,
         ...rest
@@ -211,10 +212,11 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps & { shouldShowLa
                         items={items}
                         questions={questions}
                         onUserIntentToUseAI={handleUserIntentToUseAI}
-                        stopQuestion={stopQuestion}
-                        submitQuestion={sendQuestion}
                         shouldShowLandingPage={shouldShowLandingPage}
                         showLoadingIndicator={isLoading && shouldPreinitSession}
+                        stopQuestion={stopQuestion}
+                        submitQuestion={sendQuestion}
+                        suggestedQuestions={cache.suggestions.length > 0 ? cache.suggestions : suggestedQuestions}
                         variant="sidebar"
                         recordAction={recordAction}
                         {...rest}
@@ -246,6 +248,7 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps & { shouldShowLa
                 stopPropagationOnEsc
                 stopQuestion={stopQuestion}
                 submitQuestion={sendQuestion}
+                suggestedQuestions={cache.suggestions.length > 0 ? cache.suggestions : suggestedQuestions}
                 variant="collapsible"
                 {...rest}
                 shouldRenderProviders={false}

src/elements/content-sidebar/SidebarPanels.js

@@ -142,6 +142,7 @@ class SidebarPanels extends React.Component<Props, State> {
         encodedSession: null,
         questions: [],
         shouldShowLandingPage: true,
+        suggestions: [],
     };
 
     componentDidMount() {
@@ -172,7 +173,7 @@ class SidebarPanels extends React.Component<Props, State> {
         }
     };
 
-    setBoxAiSidebarCacheValue = (key: 'agents' | 'encodedSession' | 'questions' | 'shouldShowLandingPage', value: any) => {
+    setBoxAiSidebarCacheValue = (key: 'agents' | 'encodedSession' | 'questions' | 'shouldShowLandingPage' | 'suggestions', value: any) => {
         this.boxAiSidebarCache[key] = value;
     };
 

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

@@ -69,6 +69,7 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
             questions: [],
             agents: mockAgents,
             shouldShowLandingPage: true,
+            suggestions: [],
         },
         createSessionRequest: jest.fn(() => ({ encodedSession: '1234' })),
         elementId: '123',
@@ -240,6 +241,28 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
         expect(screen.getByText('Welcome to Box AI', { exact: false })).toBeInTheDocument();
     });
 
+    test('should render cached custom suggested questions', async () => {
+        await renderComponent( {
+            cache: {
+                encodedSession: '1234',
+                questions: [],
+                agents: mockAgents,
+                suggestions: [
+                    {
+                        id: 'suggested-question-1',
+                        prompt: 'Summarize this document',
+                        label: 'Please summarize this document',
+                    },
+                ],
+            },
+            hasCustomSuggestedQuestions: true,
+            shouldShowLandingPage: true,
+        });
+
+        expect(screen.queryByText('Summarize this document', { exact: false })).toBeInTheDocument();
+        expect(screen.queryByText('Loading suggestions', { exact: false })).not.toBeInTheDocument();
+    });
+
     test('should not set questions that are in progress', async () => {
         await renderComponent({
             cache: {
@@ -258,6 +281,7 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
                 ],
                 agents: mockAgents,
                 shouldShowLandingPage: false,
+                suggestions: [],
             },
         });
 

src/elements/content-sidebar/types/BoxAISidebarTypes.ts

@@ -1,11 +1,12 @@
-import { type QuestionType } from '@box/box-ai-content-answers';
+import { type QuestionType , type SuggestedQuestionType } from '@box/box-ai-content-answers';
 import { type AgentState } from '@box/box-ai-agent-selector';
 
 export type BoxAISidebarCache = { 
     agents: AgentState,
     encodedSession: string | null,
     questions: QuestionType[],
     shouldShowLandingPage: boolean,
+    suggestions: SuggestedQuestionType[],
 };
 
-export type BoxAISidebarCacheSetter = (key: 'agents' | 'encodedSession' | 'questions' | 'shouldShowLandingPage', value: AgentState | QuestionType[] | string | boolean | null) => void;
+export type BoxAISidebarCacheSetter = (key: 'agents' | 'encodedSession' | 'questions' | 'shouldShowLandingPage' | 'suggestions', value: AgentState | QuestionType[] | SuggestedQuestionType[] | string | boolean | null) => void;