feat(boxai-sidebar): Box AI Landing page cache (#4009)

* feat(boxai-sidebar): Box AI Landing page cache

* feat(boxai-sidebar): UT updated

* feat(boxai-sidebar): content-answers version bump

* feat(boxai-sidebar): Tests cleanup

* feat(boxai-sidebar): Tests cleanup

* feat(boxai-sidebar): Skip failing tests

* feat(boxai-sidebar): Landing page bump and tests adjustment

* feat(boxai-sidebar): Tests adjustment

Author: DanilaRubleuski

package.json

@@ -125,7 +125,7 @@
         "@box/blueprint-web": "^9.18.11",
         "@box/blueprint-web-assets": "4.36.0",
         "@box/box-ai-agent-selector": "^0.31.0",
-        "@box/box-ai-content-answers": "^0.106.0",
+        "@box/box-ai-content-answers": "^0.109.4",
         "@box/cldr-data": "^34.2.0",
         "@box/combobox-with-api": "^0.28.4",
         "@box/frontend": "^10.0.1",
@@ -308,7 +308,7 @@
         "@box/blueprint-web": "^9.18.11",
         "@box/blueprint-web-assets": "^4.36.0",
         "@box/box-ai-agent-selector": "^0.31.0",
-        "@box/box-ai-content-answers": "^0.106.0",
+        "@box/box-ai-content-answers": "^0.109.4",
         "@box/cldr-data": ">=34.2.0",
         "@box/combobox-with-api": "^0.28.4",
         "@box/item-icon": "^0.9.58",

src/elements/common/content-answers/__tests__/ContentAnswersModal.test.tsx

@@ -52,9 +52,19 @@ describe('elements/common/content-answers/ContentAnswersModal', () => {
         const submitButton = screen.getByRole('button', { name: 'Ask' });
         await userEvent.click(submitButton);
 
-        expect(mockApi.getIntelligenceAPI().ask).toBeCalledWith(mockQuestion, [{ id: mockFile.id, type: 'file' }], [], {
-            include_citations: true,
-        });
+        expect(mockApi.getIntelligenceAPI().ask).toBeCalledWith(
+            mockQuestion,
+            [
+                {
+                    id: mockFile.id,
+                    type: 'file',
+                },
+            ],
+            [],
+            {
+                include_citations: true,
+            },
+        );
 
         expect(onAskMock).toBeCalled();
         expect(screen.getByText(answer)).toBeInTheDocument();
@@ -70,7 +80,7 @@ describe('elements/common/content-answers/ContentAnswersModal', () => {
         const submitButton = screen.getByRole('button', { name: 'Ask' });
         await userEvent.click(submitButton);
 
-        expect(screen.getByText('The Box AI service was unavailable.')).toBeInTheDocument();
+        expect(screen.getByText('Box AI is having trouble generating a response right now. Please try again.')).toBeInTheDocument();
     });
 
     test('should render retry button when ask request fails', async () => {
@@ -136,17 +146,20 @@ describe('elements/common/content-answers/ContentAnswersModal', () => {
         );
     });
 
-    test('renders suggested questions when provided', () => {
-        const suggestedQuestions = [{ id: '1', label: 'Suggested Question 1', prompt: 'Prompt 1' }];
-        renderComponent(mockApi, { suggestedQuestions });
+    // Skipping those tests, since now suggested questions will be a part of a new landing page, which is turned off for ContentAnswersModal
+    describe.skip('should render suggested questions', () => {
+        test('renders suggested questions when provided', () => {
+            const suggestedQuestions = [{ id: '1', label: 'Suggested Question 1', prompt: 'Prompt 1' }];
+            renderComponent(mockApi, { suggestedQuestions });
 
-        expect(screen.getByText('Suggested Question 1')).toBeInTheDocument();
-    });
+            expect(screen.getByText('Suggested Question 1')).toBeInTheDocument();
+        });
 
-    test('renders localized questions when suggestedQuestions is not provided', () => {
-        renderComponent();
+        test('renders localized questions when suggestedQuestions is not provided', () => {
+            renderComponent();
 
-        expect(screen.getByText('Summarize this document')).toBeInTheDocument();
+            expect(screen.getByText('Summarize this document')).toBeInTheDocument();
+        });
     });
 
     test('should call onClearConversation when the conversation is cleared', async () => {

src/elements/content-preview/stories/tests/ContentPreview-visual.stories.js

@@ -24,13 +24,7 @@ export const basic = {
 
         const modal = within(dialog);
         expect(modal.getByText(/Welcome to Box AI/i)).toBeInTheDocument();
-        expect(modal.getByText('Ask Box AI')).toBeInTheDocument();
-        expect(modal.getByText('This chat will be cleared when you close this pdf')).toBeInTheDocument();
-
-        expect(modal.getByText('Summarize this document')).toBeInTheDocument();
-        expect(modal.getByText('What are the key takeaways?')).toBeInTheDocument();
-        expect(modal.getByText('How can this document be improved?')).toBeInTheDocument();
-        expect(modal.getByText('Are there any next steps defined?')).toBeInTheDocument();
+        expect(modal.getByText('Chat cleared when you close pdf')).toBeInTheDocument();
 
         expect(modal.getByText('Ask Box AI')).toBeInTheDocument();
     },
@@ -76,27 +70,6 @@ export const submitAnswer = {
     },
 };
 
-export const clickOnSuggestion = {
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const button = await canvas.findByRole('button', { name: 'Box AI' }, { timeout: WAIT_TIMEOUT });
-        expect(button).toBeInTheDocument();
-        await userEvent.click(button);
-
-        const dialog = await waitFor(() => document.querySelector('[role="dialog"]'));
-        expect(dialog).toBeInTheDocument();
-
-        const modal = within(dialog);
-        const suggestion = modal.getByText('Summarize this document');
-        await userEvent.click(suggestion);
-
-        const answer = await modal.findByText('Public APIs are important because of key and important reasons.');
-        expect(answer).toBeInTheDocument();
-
-        expect(modal.getByText('Based on:')).toBeInTheDocument();
-    },
-};
-
 export const hoverOverCitation = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
@@ -108,8 +81,11 @@ export const hoverOverCitation = {
 
         expect(dialog).toBeInTheDocument();
         const modal = within(dialog);
-        const suggestion = modal.getByText('Summarize this document');
-        await userEvent.click(suggestion);
+        const textInput = modal.getByRole('textbox', { name: 'Ask Box AI' });
+        expect(textInput).toBeInTheDocument();
+        textInput.focus();
+        await userEvent.keyboard('Why are public APIs important?');
+        await userEvent.click(modal.getByRole('button', { name: 'Ask' }), { pointerEventsCheck: 0 });
 
         const answer = await modal.findByText('Public APIs are important because of key and important reasons.');
         expect(answer).toBeInTheDocument();
@@ -146,8 +122,11 @@ export const citationDisabled = {
         expect(dialog).toBeInTheDocument();
 
         const modal = within(dialog);
-        const suggestion = modal.getByText('Summarize this document');
-        await userEvent.click(suggestion);
+        const textInput = modal.getByRole('textbox', { name: 'Ask Box AI' });
+        expect(textInput).toBeInTheDocument();
+        textInput.focus();
+        await userEvent.keyboard('Why are public APIs important?');
+        await userEvent.click(modal.getByRole('button', { name: 'Ask' }), { pointerEventsCheck: 0 });
 
         const answer = await modal.findByText('Public APIs are important because of key and important reasons.');
         expect(answer).toBeInTheDocument();
@@ -167,8 +146,11 @@ export const clearConversation = {
         expect(dialog).toBeInTheDocument();
 
         const modal = within(dialog);
-        const suggestion = modal.getByText('Summarize this document');
-        await userEvent.click(suggestion);
+        const textInput = modal.getByRole('textbox', { name: 'Ask Box AI' });
+        expect(textInput).toBeInTheDocument();
+        textInput.focus();
+        await userEvent.keyboard('Why are public APIs important?');
+        await userEvent.click(modal.getByRole('button', { name: 'Ask' }), { pointerEventsCheck: 0 });
 
         const answer = await modal.findByText('Public APIs are important because of key and important reasons.');
         expect(answer).toBeInTheDocument();

src/elements/content-sidebar/BoxAISidebar.tsx

@@ -142,6 +142,7 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
                     itemIDs={[fileID]}
                     restoredQuestions={questionsWithoutInProgress}
                     restoredSession={cache.encodedSession}
+                    restoredShouldShowLandingPage={cache.shouldShowLandingPage}
                     shouldPreinitSession={shouldPreinitSession}
                     suggestedQuestions={getSuggestedQuestions === null ? localizedQuestions : []}
                     warningNotice={spreadsheetNotice}

src/elements/content-sidebar/BoxAISidebarContent.tsx

@@ -48,6 +48,7 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps) {
         isResetChatEnabled,
         onSelectAgent,
         questions,
+        shouldShowLandingPage,
         sendQuestion,
         stopQuestion,
         ...rest
@@ -71,6 +72,10 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps) {
     const { agents, requestState, selectedAgent } = useAgents();
     const { questions: cacheQuestions } = cache;
 
+    if (cache.shouldShowLandingPage !== shouldShowLandingPage) {
+        setCacheValue('shouldShowLandingPage', shouldShowLandingPage);
+    }
+
     if (cache.encodedSession !== encodedSession) {
         setCacheValue('encodedSession', encodedSession);
     }
@@ -204,6 +209,7 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps) {
                         onUserIntentToUseAI={handleUserIntentToUseAI}
                         stopQuestion={stopQuestion}
                         submitQuestion={sendQuestion}
+                        shouldShowLandingPage={shouldShowLandingPage}
                         showLoadingIndicator={isLoading && shouldPreinitSession}
                         variant="sidebar"
                         recordAction={recordAction}
@@ -231,6 +237,7 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps) {
                 open={isModalOpen}
                 questions={questions}
                 recordAction={isModalOpen ? recordAction : undefined}
+                shouldShowLandingPage={shouldShowLandingPage}
                 showLoadingIndicator={false}
                 stopPropagationOnEsc
                 stopQuestion={stopQuestion}

src/elements/content-sidebar/SidebarPanels.js

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

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

@@ -68,6 +68,7 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
             encodedSession: '',
             questions: [],
             agents: mockAgents,
+            shouldShowLandingPage: true,
         },
         createSessionRequest: jest.fn(() => ({ encodedSession: '1234' })),
         elementId: '123',
@@ -205,6 +206,7 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
                     },
                 ],
                 agents: mockAgents,
+                shouldShowLandingPage: false,
             },
         });
 
@@ -254,6 +256,7 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
                     },
                 ],
                 agents: mockAgents,
+                shouldShowLandingPage: false,
             },
         });
 

src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx

@@ -16,8 +16,7 @@ export const basic: StoryObj<typeof BoxAISidebar> = {
         expect(clearButton).toBeInTheDocument();
 
         expect(await canvas.findByText(/Welcome to Box AI/i)).toBeInTheDocument();
-        expect(await canvas.findByText(/Ask questions about/i)).toBeInTheDocument();
-        expect(await canvas.findByText('This chat will be cleared when you close this content')).toBeInTheDocument();
+        expect(await canvas.findByText('Chat cleared when you close content')).toBeInTheDocument();
         expect(await canvas.findByPlaceholderText('Ask Box AI')).toBeInTheDocument();
         expect(await canvas.findByText('Summarize this document')).toBeInTheDocument();
         expect(await canvas.findByText('What are the key takeaways?')).toBeInTheDocument();

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

@@ -5,6 +5,7 @@ export type BoxAISidebarCache = {
     agents: AgentState,
     encodedSession: string | null,
     questions: QuestionType[],
+    shouldShowLandingPage: boolean,
 };
 
-export type BoxAISidebarCacheSetter = (key: 'agents' | 'encodedSession' | 'questions', value: AgentState | QuestionType[] | string | null) => void;
+export type BoxAISidebarCacheSetter = (key: 'agents' | 'encodedSession' | 'questions' | 'shouldShowLandingPage', value: AgentState | QuestionType[] | string | boolean | null) => void;

yarn.lock

@@ -1498,10 +1498,10 @@
   resolved "https://registry.yarnpkg.com/@box/box-ai-agent-selector/-/box-ai-agent-selector-0.31.0.tgz#a2ef6c3c7284529ae268b609d04b6000348bb294"
   integrity sha512-4+M/4g8LHJfZkP+7ISBKveQs2q5HeGvXv8B6/N8yFb9cpYuOjpKFxRvHyILdQWjwictHZbgY2XrNrpxbYGEXRQ==
 
-"@box/box-ai-content-answers@^0.106.0":
-  version "0.106.0"
-  resolved "https://registry.yarnpkg.com/@box/box-ai-content-answers/-/box-ai-content-answers-0.106.0.tgz#ee2ea313e13b5c156b32bb0bc1c73dc9f2f8f07b"
-  integrity sha512-mWPo6Ls/7rIXoI9UPkel0zexlsqktzFcfVbumXx1Ie1cP8F76bK7tUXVjTEyZarw8H5K9CuvY34WN2ds/28cHA==
+"@box/box-ai-content-answers@^0.109.4":
+  version "0.109.4"
+  resolved "https://registry.yarnpkg.com/@box/box-ai-content-answers/-/box-ai-content-answers-0.109.4.tgz#62aa53ddada3f60e308807035045b9e51185ca00"
+  integrity sha512-8p7km9MgODjIXYlDvlwsQ1+1pfqNVkdvVf5DtGhSHvwqoMccRNsbDSMk1vHg8dQ8BSD0eexKxUl2rzCUxyxS5A==
 
 "@box/cldr-data@^34.2.0":
   version "34.8.0"