feat(content-sidebar): added support for feedback tooltip in Box AI (#4059)

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

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.113.0",
+        "@box/box-ai-content-answers": "^0.120.0",
         "@box/cldr-data": "^34.2.0",
         "@box/combobox-with-api": "^0.28.4",
         "@box/frontend": "^11.0.0",
@@ -300,7 +300,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.113.0",
+        "@box/box-ai-content-answers": "^0.120.0",
         "@box/cldr-data": ">=34.2.0",
         "@box/combobox-with-api": "^0.28.4",
         "@box/item-icon": "^0.9.83",

src/elements/content-sidebar/BoxAISidebar.tsx

@@ -4,7 +4,7 @@
  */
 import * as React from 'react';
 import { useIntl } from 'react-intl';
-import {type ItemType, SuggestedQuestionType} from '@box/box-ai-content-answers';
+import { type FeedbackFormData, 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';
@@ -43,6 +43,7 @@ export interface BoxAISidebarProps {
     isCitationsEnabled: boolean;
     isDebugModeEnabled: boolean;
     isFeedbackEnabled: boolean;
+    isFeedbackFormEnabled: boolean;
     isIntelligentQueryMode: boolean;
     isMarkdownEnabled: boolean;
     isResetChatEnabled: boolean;
@@ -51,6 +52,7 @@ export interface BoxAISidebarProps {
     items: Array<ItemType>;
     itemSize?: string;
     localizedQuestions: Array<{ id: string; label: string; prompt: string }>;
+    onFeedbackFormSubmit?: (data: FeedbackFormData, onSuccess: () => void) => void;
     onUserInteraction?: () => void;
     recordAction: (params: RecordActionType) => void;
     setCacheValue: BoxAISidebarCacheSetter;
@@ -68,10 +70,12 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
         getSuggestedQuestions,
         isIntelligentQueryMode,
         isFeedbackEnabled,
+        isFeedbackFormEnabled,
         isStopResponseEnabled,
         items,
         itemSize,
         localizedQuestions,
+        onFeedbackFormSubmit,
         onUserInteraction,
         recordAction,
         setCacheValue,
@@ -88,9 +92,11 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
             elementId,
             fileExtension,
             isFeedbackEnabled,
+            isFeedbackFormEnabled,
             isStopResponseEnabled,
             items,
             itemSize,
+            onFeedbackFormSubmit,
             onUserInteraction,
             recordAction,
             setCacheValue,
@@ -102,9 +108,11 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
             elementId,
             fileExtension,
             isFeedbackEnabled,
+            isFeedbackFormEnabled,
             isStopResponseEnabled,
             items,
             itemSize,
+            onFeedbackFormSubmit,
             onUserInteraction,
             recordAction,
             setCacheValue,
@@ -156,7 +164,9 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
                     restoredSession={cache.encodedSession}
                     restoredShouldShowLandingPage={cache.shouldShowLandingPage}
                     shouldPreinitSession={shouldPreinitSession}
-                    suggestedQuestions={cache.suggestedQuestions.length > 0 ? cache.suggestedQuestions : suggestedQuestions}
+                    suggestedQuestions={
+                        cache.suggestedQuestions.length > 0 ? cache.suggestedQuestions : suggestedQuestions
+                    }
                     warningNotice={spreadsheetNotice}
                     warningNoticeAriaLabel={formatMessage(messages.welcomeMessageSpreadsheetNoticeAriaLabel)}
                     {...rest}

src/elements/content-sidebar/BoxAISidebarContent.tsx

@@ -61,9 +61,11 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps & { shouldShowLa
         elementId,
         fileExtension,
         isFeedbackEnabled,
+        isFeedbackFormEnabled,
         isStopResponseEnabled,
         items,
         itemSize,
+        onFeedbackFormSubmit,
         onUserInteraction,
         recordAction,
         setCacheValue,
@@ -207,9 +209,11 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps & { shouldShowLa
                         hostAppName={hostAppName}
                         isAIStudioAgentSelectorEnabled={isAIStudioAgentSelectorEnabled}
                         isFeedbackEnabled={isFeedbackEnabled}
+                        isFeedbackFormEnabled={isFeedbackFormEnabled}
                         isStopResponseEnabled={isStopResponseEnabled}
                         items={items}
                         questions={questions}
+                        onFeedbackFormSubmit={onFeedbackFormSubmit}
                         onUserIntentToUseAI={handleUserIntentToUseAI}
                         shouldShowLandingPage={cache.shouldShowLandingPage}
                         showLoadingIndicator={isLoading && shouldPreinitSession}
@@ -230,11 +234,13 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps & { shouldShowLa
                 hostAppName={hostAppName}
                 isAIStudioAgentSelectorEnabled={isAIStudioAgentSelectorEnabled}
                 isFeedbackEnabled={isFeedbackEnabled}
+                isFeedbackFormEnabled={isFeedbackFormEnabled}
                 isResetChatEnabled={isResetChatEnabled}
                 isStopResponseEnabled={isStopResponseEnabled}
                 items={items}
                 itemSize={itemSize}
                 onClearAction={onClearAction}
+                onFeedbackFormSubmit={onFeedbackFormSubmit}
                 onOpenChange={handleModalClose}
                 onSelectAgent={onSelectAgent}
                 onUserIntentToUseAI={handleUserIntentToUseAI}

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

@@ -112,11 +112,13 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
         isCitationsEnabled: true,
         isDebugModeEnabled: true,
         isFeedbackEnabled: true,
+        isFeedbackFormEnabled: true,
         isIntelligentQueryMode: true,
         isMarkdownEnabled: true,
         isResetChatEnabled: true,
         isStopResponseEnabled: true,
         isStreamingEnabled: true,
+        onFeedbackFormSubmit: jest.fn(),
         onUserInteraction: jest.fn(),
         recordAction: jest.fn(),
         sendQuestion: jest.fn(),
@@ -246,7 +248,7 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
     });
 
     test('should render cached custom suggested questions', async () => {
-        await renderComponent( {
+        await renderComponent({
             cache: {
                 encodedSession: '1234',
                 questions: [],

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import noop from 'lodash/noop';
 import { RecordActionType as AgentSelectorRecordActionType } from '@box/box-ai-agent-selector';
 import { RecordActionType as ContentAnswersRecordActionType } from '@box/box-ai-content-answers';
-import type { ItemType } from '@box/box-ai-content-answers';
+import type { FeedbackFormData, ItemType } from '@box/box-ai-content-answers';
 import type { BoxAISidebarCache, BoxAISidebarCacheSetter } from '../types/BoxAISidebarTypes';
 
 type BoxAISidebarRecordActionType =
@@ -20,9 +20,11 @@ export interface BoxAISidebarContextValues {
     elementId: string;
     fileExtension: string;
     isFeedbackEnabled: boolean;
+    isFeedbackFormEnabled: boolean;
     isStopResponseEnabled: boolean;
     items: Array<ItemType>;
     itemSize?: string;
+    onFeedbackFormSubmit?: (data: FeedbackFormData, onSuccess: () => void) => void;
     onUserInteraction?: () => void;
     recordAction: (params: BoxAISidebarRecordActionType) => void;
     setCacheValue: BoxAISidebarCacheSetter;
@@ -35,6 +37,7 @@ export const BoxAISidebarContext = React.createContext<BoxAISidebarContextValues
     elementId: '',
     fileExtension: '',
     isFeedbackEnabled: false,
+    isFeedbackFormEnabled: false,
     isStopResponseEnabled: false,
     items: [],
     recordAction: noop,

yarn.lock

@@ -1512,10 +1512,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.113.0":
-  version "0.113.0"
-  resolved "https://registry.yarnpkg.com/@box/box-ai-content-answers/-/box-ai-content-answers-0.113.0.tgz#6bd92abac22e06ea067983b7f42cd91d8ea35f8b"
-  integrity sha512-vY70YANv2RAwkSEEsIbhJBlEOTKxo3hP5SZ71fgpVb+7jMKLjDBranUN/18uu3orri6q998E2vOhN0BwRO2GfA==
+"@box/box-ai-content-answers@^0.120.0":
+  version "0.120.0"
+  resolved "https://registry.yarnpkg.com/@box/box-ai-content-answers/-/box-ai-content-answers-0.120.0.tgz#67f09757a90010be045bd00423a1416656a027cd"
+  integrity sha512-cgd6zf/8owgVQYE4eO/XPoPNF3iZQeJRsxKNsVRKAbQ/1UtaxIcBhDUMN5AhNu40qWGN1JdJ5YRjbvXZ15F8jw==
 
 "@box/cldr-data@^34.2.0":
   version "34.8.0"