feat(content-sidebar): added onUserInteraction prop to BoxAISidebar (#4027)

* feat(content-sidebar): added onUserInteraction prop to BoxAISidebar

* feat(content-sidebar): added onUserInteraction prop to BoxAISidebar

Author: kkuliczkowski-box

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.109.4",
+        "@box/box-ai-content-answers": "^0.112.1",
         "@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.109.4",
+        "@box/box-ai-content-answers": "^0.112.1",
         "@box/cldr-data": ">=34.2.0",
         "@box/combobox-with-api": "^0.28.4",
         "@box/item-icon": "^0.9.58",

src/elements/content-sidebar/BoxAISidebar.tsx

@@ -51,6 +51,7 @@ export interface BoxAISidebarProps {
     items: Array<ItemType>;
     itemSize?: string;
     localizedQuestions: Array<{ id: string; label: string; prompt: string }>;
+    onUserInteraction?: () => void;
     recordAction: (params: RecordActionType) => void;
     setCacheValue: BoxAISidebarCacheSetter;
     shouldPreinitSession?: boolean;
@@ -71,6 +72,7 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
         items,
         itemSize,
         localizedQuestions,
+        onUserInteraction,
         recordAction,
         setCacheValue,
         shouldPreinitSession = true,
@@ -89,8 +91,9 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
             isStopResponseEnabled,
             items,
             itemSize,
-            setCacheValue,
+            onUserInteraction,
             recordAction,
+            setCacheValue,
             shouldPreinitSession,
         }),
         [
@@ -102,8 +105,9 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
             isStopResponseEnabled,
             items,
             itemSize,
-            setCacheValue,
+            onUserInteraction,
             recordAction,
+            setCacheValue,
             shouldPreinitSession,
         ],
     );

src/elements/content-sidebar/BoxAISidebarContent.tsx

@@ -14,7 +14,6 @@ import {
     ClearConversationButton,
     IntelligenceModal,
     withApiWrapper,
-    // @ts-expect-error - TS2305 - Module '"@box/box-ai-content-answers"' has no exported member 'ApiWrapperWithInjectedProps'.
     type ApiWrapperWithInjectedProps,
 } from '@box/box-ai-content-answers';
 import SidebarContent from './SidebarContent';
@@ -35,7 +34,7 @@ const MARK_NAME_JS_READY: string = `${ORIGIN_BOXAI_SIDEBAR}_${EVENT_JS_READY}`;
 
 mark(MARK_NAME_JS_READY);
 
-function BoxAISidebarContent(props: ApiWrapperWithInjectedProps) {
+function BoxAISidebarContent(props: ApiWrapperWithInjectedProps & { shouldShowLandingPage: boolean }) {
     const {
         createSession,
         encodedSession,
@@ -65,6 +64,7 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps) {
         isStopResponseEnabled,
         items,
         itemSize,
+        onUserInteraction,
         recordAction,
         setCacheValue,
         shouldPreinitSession,
@@ -88,11 +88,14 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps) {
         setCacheValue('agents', { agents, requestState, selectedAgent });
     }
 
-    const handleUserIntentToUseAI = () => {
+    const handleUserIntentToUseAI = (userHasInteracted: boolean = false) => {
         // Create session if not already created or loading
         if (!shouldPreinitSession && !encodedSession && !isLoading && createSession) {
             createSession(true, false);
         }
+        if (userHasInteracted && onUserInteraction) {
+            onUserInteraction();
+        }
     };
 
     const handleModalClose = () => {
@@ -199,6 +202,7 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps) {
                 <div className="bcs-BoxAISidebar-content">
                     <BoxAiContentAnswers
                         className="bcs-BoxAISidebar-contentAnswers"
+                        contentName={contentName}
                         contentType={formatMessage(messages.sidebarBoxAIContent)}
                         hostAppName={hostAppName}
                         isAIStudioAgentSelectorEnabled={isAIStudioAgentSelectorEnabled}

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

@@ -113,6 +113,7 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
         isResetChatEnabled: true,
         isStopResponseEnabled: true,
         isStreamingEnabled: true,
+        onUserInteraction: jest.fn(),
         recordAction: jest.fn(),
         sendQuestion: jest.fn(),
         setCacheValue: jest.fn(),
@@ -423,4 +424,14 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
             expect(mockSendQuestion).not.toHaveBeenCalled();
         },
     );
+
+    test('should call onUserInteraction when user takes action', async () => {
+        await renderComponent();
+
+        const input = screen.getByTestId('content-answers-question-input');
+        input.focus();
+        await userEvent.keyboard('foo');
+
+        expect(mockProps.onUserInteraction).toHaveBeenCalled();
+    });
 });

src/elements/content-sidebar/context/BoxAISidebarContext.ts

@@ -23,6 +23,7 @@ export interface BoxAISidebarContextValues {
     isStopResponseEnabled: boolean;
     items: Array<ItemType>;
     itemSize?: string;
+    onUserInteraction?: () => void;
     recordAction: (params: BoxAISidebarRecordActionType) => void;
     setCacheValue: BoxAISidebarCacheSetter;
     shouldPreinitSession: boolean;

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.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/box-ai-content-answers@^0.112.1":
+  version "0.112.1"
+  resolved "https://registry.yarnpkg.com/@box/box-ai-content-answers/-/box-ai-content-answers-0.112.1.tgz#1fd2b062e811ca20fd9911edd6b901c35e97abca"
+  integrity sha512-gMNi9CiJAEbtpttOpDLxqUJFKM6vMvIaaIpyZm3zNdri3nWuzF22X4c7WjND0ebm8Q9F1L0+NGLKdzyvH/avxw==
 
 "@box/cldr-data@^34.2.0":
   version "34.8.0"
@@ -22393,7 +22393,8 @@ string-replace-loader@^3.1.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -22411,15 +22412,6 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
@@ -22558,7 +22550,8 @@ stringify-package@^1.0.0, stringify-package@^1.0.1:
   resolved "https://registry.yarnpkg.com/stringify-package/-/stringify-package-1.0.1.tgz#e5aa3643e7f74d0f28628b72f3dad5cecfc3ba85"
   integrity sha512-sa4DUQsYciMP1xhKWGuFM04fB0LG/9DlluZoSVywUMRNvzid6XucHK0/90xGxRoHrAaROrcHK1aPKaijCtSrhg==
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -22586,13 +22579,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -24797,7 +24783,8 @@ worker-farm@^1.6.0, worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -24840,15 +24827,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"