feat(boxai-sidebar): Add is feedback enabled prop to box ai sidebar

package.json

@@ -123,9 +123,9 @@
         "@babel/template": "^7.24.7",
         "@babel/types": "^7.24.7",
         "@box/blueprint-web": "^7.36.3",
-        "@box/blueprint-web-assets": "^4.28.0",
+        "@box/blueprint-web-assets": "^4.31.0",
         "@box/box-ai-agent-selector": "^0.22.0",
-        "@box/box-ai-content-answers": "^0.85.2",
+        "@box/box-ai-content-answers": "^0.86.0",
         "@box/cldr-data": "^34.2.0",
         "@box/frontend": "^10.0.0",
         "@box/item-icon": "^0.9.58",
@@ -305,9 +305,9 @@
     },
     "peerDependencies": {
         "@box/blueprint-web": "^7.36.3",
-        "@box/blueprint-web-assets": "^4.28.0",
+        "@box/blueprint-web-assets": "^4.31.0",
         "@box/box-ai-agent-selector": "^0.22.0",
-        "@box/box-ai-content-answers": "^0.85.2",
+        "@box/box-ai-content-answers": "^0.86.0",
         "@box/cldr-data": ">=34.2.0",
         "@box/item-icon": "^0.9.58",
         "@box/metadata-editor": "^0.79.1",

src/elements/content-sidebar/BoxAISidebar.tsx

@@ -4,7 +4,7 @@
  */
 import * as React from 'react';
 import { useIntl } from 'react-intl';
-import { type QuestionType } from '@box/box-ai-content-answers';
+import { type ItemType, type QuestionType } from '@box/box-ai-content-answers';
 import { RecordActionType } from '@box/box-ai-agent-selector';
 import BoxAISidebarContent from './BoxAISidebarContent';
 import { BoxAISidebarContext } from './context/BoxAISidebarContext';
@@ -41,11 +41,13 @@ export interface BoxAISidebarProps {
     isAIStudioAgentSelectorEnabled: boolean;
     isCitationsEnabled: boolean;
     isDebugModeEnabled: boolean;
+    isFeedbackEnabled: boolean;
     isIntelligentQueryMode: boolean;
     isMarkdownEnabled: boolean;
     isResetChatEnabled: boolean;
     isStopResponseEnabled?: boolean;
     isStreamingEnabled: boolean;
+    items: Array<ItemType>;
     itemSize?: string;
     userInfo: { name: string; avatarURL: string };
     recordAction: (params: RecordActionType) => void;
@@ -61,7 +63,9 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
         fileID,
         getSuggestedQuestions,
         isIntelligentQueryMode,
+        isFeedbackEnabled,
         isStopResponseEnabled,
+        items,
         itemSize,
         recordAction,
         setCacheValue,
@@ -70,6 +74,35 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
     } = props;
     const { questions } = cache;
     const { formatMessage } = useIntl();
+    const contextValue = React.useMemo(
+        () => ({
+            cache,
+            contentName,
+            elementId,
+            fileExtension,
+            isFeedbackEnabled,
+            isStopResponseEnabled,
+            items,
+            itemSize,
+            setCacheValue,
+            recordAction,
+            userInfo,
+        }),
+        [
+            cache,
+            contentName,
+            elementId,
+            fileExtension,
+            isFeedbackEnabled,
+            isStopResponseEnabled,
+            items,
+            itemSize,
+            setCacheValue,
+            recordAction,
+            userInfo,
+        ],
+    );
+
     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
@@ -108,19 +141,7 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
     return (
         // BoxAISidebarContent is using withApiWrapper that is not passing all provided props,
         // that's why we need to use provider to pass other props
-        <BoxAISidebarContext.Provider
-            value={{
-                cache,
-                contentName,
-                elementId,
-                fileExtension,
-                isStopResponseEnabled,
-                itemSize,
-                setCacheValue,
-                recordAction,
-                userInfo,
-            }}
-        >
+        <BoxAISidebarContext.Provider value={contextValue}>
             <BoxAISidebarContent
                 getSuggestedQuestions={getSuggestedQuestions}
                 isOpen

src/elements/content-sidebar/BoxAISidebarContent.tsx

@@ -56,7 +56,9 @@ function BoxAISidebarContent(props: ApiWrapperProps) {
         contentName,
         elementId,
         fileExtension,
+        isFeedbackEnabled,
         isStopResponseEnabled,
+        items,
         itemSize,
         recordAction,
         setCacheValue,
@@ -145,11 +147,12 @@ function BoxAISidebarContent(props: ApiWrapperProps) {
                     <div className="bcs-BoxAISidebar-content">
                         <BoxAiContentAnswers
                             className="bcs-BoxAISidebar-contentAnswers"
-                            contentName={contentName}
                             contentType={formatMessage(messages.sidebarBoxAIContent)}
                             hostAppName={hostAppName}
                             isAIStudioAgentSelectorEnabled={isAIStudioAgentSelectorEnabled}
+                            isFeedbackEnabled={isFeedbackEnabled}
                             isStopResponseEnabled={isStopResponseEnabled}
+                            items={items}
                             questions={questions}
                             stopQuestion={stopQuestion}
                             submitQuestion={sendQuestion}
@@ -168,6 +171,7 @@ function BoxAISidebarContent(props: ApiWrapperProps) {
                     hostAppName={hostAppName}
                     isAIStudioAgentSelectorEnabled={isAIStudioAgentSelectorEnabled}
                     isStopResponseEnabled={isStopResponseEnabled}
+                    items={items}
                     itemSize={itemSize}
                     onModalClose={handleModalClose}
                     onOpenChange={handleModalClose}

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

@@ -78,6 +78,7 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
         isAIStudioAgentSelectorEnabled: true,
         isCitationsEnabled: true,
         isDebugModeEnabled: true,
+        isFeedbackEnabled: true,
         isIntelligentQueryMode: true,
         isMarkdownEnabled: true,
         isResetChatEnabled: true,

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

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import noop from 'lodash/noop';
 import { RecordActionType } from '@box/box-ai-agent-selector';
-import type { QuestionType } from '@box/box-ai-content-answers';
+import type { ItemType, QuestionType } from '@box/box-ai-content-answers';
 
 export interface BoxAISidebarContextValues {
     cache: { encodedSession?: string | null; questions?: QuestionType[] };
     contentName: string;
     elementId: string;
     fileExtension: string;
+    isFeedbackEnabled: boolean;
     isStopResponseEnabled: boolean;
+    items: Array<ItemType>;
     itemSize?: string;
     recordAction: (params: RecordActionType) => void;
     setCacheValue: (key: 'encodedSession' | 'questions', value: string | null | QuestionType[]) => void;
@@ -20,7 +22,9 @@ export const BoxAISidebarContext = React.createContext<BoxAISidebarContextValues
     contentName: '',
     elementId: '',
     fileExtension: '',
+    isFeedbackEnabled: false,
     isStopResponseEnabled: false,
+    items: [],
     recordAction: noop,
     setCacheValue: noop,
     userInfo: { name: '', avatarURL: '' },

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

@@ -40,11 +40,13 @@ export default {
             isAIStudioAgentSelectorEnabled: true,
             isCitationsEnabled: true,
             isDebugModeEnabled: true,
+            isFeedbackEnabled: true,
             isIntelligentQueryMode: false,
             isMarkdownEnabled: true,
             isResetChatEnabled: true,
             isStopResponseEnabled: true,
             isStreamingEnabled: false,
+            items: [{ id: '123', name: 'Document (PDF).pdf', type: 'file', fileType: 'pdf', status: 'supported' }],
             recordAction: () => ({}),
         },
     },

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

@@ -45,12 +45,14 @@ export default {
             isAgentSelectorEnabled: false,
             isAIStudioAgentSelectorEnabled: true,
             isCitationsEnabled: true,
+            isFeedbackEnabled: true,
             isDebugModeEnabled: true,
             isIntelligentQueryMode: false,
             isMarkdownEnabled: true,
             isResetChatEnabled: true,
             isStopResponseEnabled: true,
             isStreamingEnabled: false,
+            items: [{ id: '123', name: 'Document (PDF).pdf', type: 'file', fileType: 'pdf', status: 'supported' }],
             recordAction: () => ({}),
         },
     },

yarn.lock

@@ -1452,6 +1452,11 @@
   resolved "https://registry.yarnpkg.com/@box/blueprint-web-assets/-/blueprint-web-assets-4.28.0.tgz#c0ef88156ff2697e63de9ac12b6fc17b2bd7c981"
   integrity sha512-udRZAvhNbPIAPrNIPg8awV5lfU3g3LzAloaAAFdBiwCmPQxaU4JvuwJambOOXUqdftV6pCD6NmJvE90NxTcwmg==
 
+"@box/blueprint-web-assets@^4.31.0":
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/@box/blueprint-web-assets/-/blueprint-web-assets-4.31.1.tgz#d96bdc45c51c25cb63da309c4cb7305f5fa29989"
+  integrity sha512-OELdCEwZywyOkQa5HfW+WDsy7gS1xnpYAZsgFWLgzuWRQACiMrGINVjXfM1CySs7oFYMocg1v2E8/yh/dGLcPQ==
+
 "@box/blueprint-web@^7.36.3":
   version "7.36.3"
   resolved "https://registry.yarnpkg.com/@box/blueprint-web/-/blueprint-web-7.36.3.tgz#22c655820f2e6cfb8d6dc55d21662f2161605396"
@@ -1494,10 +1499,10 @@
   resolved "https://registry.yarnpkg.com/@box/box-ai-agent-selector/-/box-ai-agent-selector-0.22.0.tgz#d91e4270766a9f7e95166808c4ed735247d196c2"
   integrity sha512-eDj088pwuG9OIj+Ut4g7tz1jgdOcZjUDH+vt+hAazCIZJRBnzft6thDVUlrh4XeQ00cdoopIxfNkP1Un937SxA==
 
-"@box/box-ai-content-answers@^0.85.2":
-  version "0.85.2"
-  resolved "https://registry.yarnpkg.com/@box/box-ai-content-answers/-/box-ai-content-answers-0.85.2.tgz#f8cdc874aa4086870a940189f8fb8844d8d95b95"
-  integrity sha512-CLSZ+24cRKkUTJn1vQiy414DwP2/QbQWXnBsHsU1szOTJ1QNIRIsKY01lTtEmxurk9ax66xvbMGn5ShcfMZt4A==
+"@box/box-ai-content-answers@^0.86.0":
+  version "0.86.2"
+  resolved "https://registry.yarnpkg.com/@box/box-ai-content-answers/-/box-ai-content-answers-0.86.2.tgz#757143a6cb97447bfb12e797bccbd86b09921022"
+  integrity sha512-3Dlf10D36ZeM7uOokdiS/AyKj0rAa0HlrnNKFA+CEeJQS+2lv+ICRjd7fmE4lf5moix5zfPEKq+MDOQTQ7dyxA==
 
 "@box/cldr-data@^34.2.0":
   version "34.8.0"
@@ -22370,6 +22375,7 @@ string-replace-loader@^3.1.0:
     schema-utils "^3.0.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==
@@ -22526,6 +22532,7 @@ stringify-package@^1.0.0, stringify-package@^1.0.1:
   integrity sha512-sa4DUQsYciMP1xhKWGuFM04fB0LG/9DlluZoSVywUMRNvzid6XucHK0/90xGxRoHrAaROrcHK1aPKaijCtSrhg==
 
 "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==
@@ -24753,6 +24760,7 @@ worker-farm@^1.6.0, worker-farm@^1.7.0:
     errno "~0.1.7"
 
 "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==