feat(boxai-sidebar): Pass isStopResponseEnabled prop to BoxAiContentAnswers (#3808)

DanilaRubleuski · Danila Rubleuski · web-flow · commit b3afcd824521 · 2024-12-31T10:23:17.000-08:00
* feat(boxai-sidebar): Pass isStopResponseEnabled prop

* feat(boxai-sidebar): PR fix

---------

Co-authored-by: Danila Rubleuski &lt;drubleuski@box.com&gt;
diff --git a/src/elements/content-sidebar/BoxAISidebar.tsx b/src/elements/content-sidebar/BoxAISidebar.tsx
@@ -13,69 +13,74 @@ import { DOCUMENT_SUGGESTED_QUESTIONS, SPREADSHEET_FILE_EXTENSIONS } from '../co
 import messages from '../common/content-answers/messages';
 
 export interface BoxAISidebarContextValues {
-    cache: { encodedSession?: string | null, questions?: QuestionType[] },
-    contentName: string,
-    elementId: string,
-    recordAction: (params: RecordActionType) => void,
-    setCacheValue: (key: 'encodedSession' | 'questions', value: string | null | QuestionType[]) => void,
-    userInfo: { name: string, avatarUrl: string },
-};
+    cache: { encodedSession?: string | null; questions?: QuestionType[] };
+    contentName: string;
+    elementId: string;
+    isStopResponseEnabled: boolean;
+    recordAction: (params: RecordActionType) => void;
+    setCacheValue: (key: 'encodedSession' | 'questions', value: string | null | QuestionType[]) => void;
+    userInfo: { name: string; avatarUrl: string };
+}
 
 export const BoxAISidebarContext = React.createContext<BoxAISidebarContextValues>({
     cache: null,
     contentName: '',
     elementId: '',
+    isStopResponseEnabled: false,
     recordAction: noop,
     setCacheValue: noop,
-    userInfo: { name: '', avatarUrl: ''},
+    userInfo: { name: '', avatarUrl: '' },
 });
 
 export interface BoxAISidebarProps {
-    contentName: string,
-    cache: { encodedSession?: string | null, questions?: QuestionType[] },
-    createSessionRequest: (payload: Record<string, unknown>, itemID: string) => Promise<unknown>,
-    elementId: string,
+    contentName: string;
+    cache: { encodedSession?: string | null; questions?: QuestionType[] };
+    createSessionRequest: (payload: Record<string, unknown>, itemID: string) => Promise<unknown>;
+    elementId: string;
     fetchTimeout: Record<string, unknown>;
-    fileExtension: string,
-    fileID: string,
-    getAgentConfig: (payload: Record<string, unknown>) => Promise<unknown>,
-    getAIStudioAgents: () => Promise<unknown>,
-    getAnswer: (payload: Record<string, unknown>,
+    fileExtension: string;
+    fileID: string;
+    getAgentConfig: (payload: Record<string, unknown>) => Promise<unknown>;
+    getAIStudioAgents: () => Promise<unknown>;
+    getAnswer: (
+        payload: Record<string, unknown>,
         itemID?: string,
         itemIDs?: Array<string>,
-        state?: Record<string, unknown> ) => Promise<unknown>,
+        state?: Record<string, unknown>,
+    ) => Promise<unknown>;
     getAnswerStreaming: (
         payload: Record<string, unknown>,
         itemID?: string,
         itemIDs?: Array<string>,
         abortController?: AbortController,
         state?: Record<string, unknown>,
-    ) => Promise<unknown>,
-    getSuggestedQuestions: (itemID: string) => Promise<unknown> | null,
-    hostAppName: string,
-    isAgentSelectorEnabled: boolean,
-    isAIStudioAgentSelectorEnabled: boolean,
-    isCitationsEnabled: boolean,
-    isDebugModeEnabled: boolean,
-    isIntelligentQueryMode: boolean,
-    isMarkdownEnabled: boolean,
-    isResetChatEnabled: boolean,
-    isStopResponseEnabled: boolean,
-    isStreamingEnabled: boolean,
-    userInfo: { name: '', avatarUrl: ''},
-    recordAction: (params: RecordActionType) => void,
-    setCacheValue: (key: 'encodedSession' | 'questions', value: string | null | QuestionType[]) => void,
+    ) => Promise<unknown>;
+    getSuggestedQuestions: (itemID: string) => Promise<unknown> | null;
+    hostAppName: string;
+    isAgentSelectorEnabled: boolean;
+    isAIStudioAgentSelectorEnabled: boolean;
+    isCitationsEnabled: boolean;
+    isDebugModeEnabled: boolean;
+    isIntelligentQueryMode: boolean;
+    isMarkdownEnabled: boolean;
+    isResetChatEnabled: boolean;
+    isStopResponseEnabled?: boolean;
+    isStreamingEnabled: boolean;
+    userInfo: { name: ''; avatarUrl: '' };
+    recordAction: (params: RecordActionType) => void;
+    setCacheValue: (key: 'encodedSession' | 'questions', value: string | null | QuestionType[]) => void;
 }
 
 const BoxAISidebar = (props: BoxAISidebarProps) => {
     const {
         cache,
         contentName,
-        elementId, 
+        elementId,
         fileExtension,
         fileID,
         getSuggestedQuestions,
         isIntelligentQueryMode,
+        isStopResponseEnabled,
         recordAction,
         setCacheValue,
         userInfo,
@@ -84,9 +89,9 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
     const { questions } = cache;
     const { formatMessage } = useIntl();
     let questionsWithoutInProgress = questions;
-    if (questions.length > 0 && !questions[questions.length -1].isCompleted) {
+    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
-        questionsWithoutInProgress = questionsWithoutInProgress.slice(0,-1);
+        questionsWithoutInProgress = questionsWithoutInProgress.slice(0, -1);
     }
 
     const localizedQuestions = DOCUMENT_SUGGESTED_QUESTIONS.map(question => ({
@@ -107,19 +112,22 @@ 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, setCacheValue, recordAction, userInfo}}>
+        <BoxAISidebarContext.Provider
+            value={{ cache, contentName, elementId, isStopResponseEnabled, setCacheValue, recordAction, userInfo }}
+        >
             <BoxAISidebarContent
+                isStopResponseEnabled={isStopResponseEnabled}
                 itemID={fileID}
                 itemIDs={[fileID]}
-                restoredQuestions={questionsWithoutInProgress} 
+                restoredQuestions={questionsWithoutInProgress}
                 restoredSession={cache.encodedSession}
-                suggestedQuestions={getSuggestedQuestions === null? localizedQuestions : []}
+                suggestedQuestions={getSuggestedQuestions === null ? localizedQuestions : []}
                 warningNotice={spreadsheetNotice}
                 warningNoticeAriaLabel={formatMessage(messages.welcomeMessageSpreadsheetNoticeAriaLabel)}
-                {...rest} 
+                {...rest}
             />
         </BoxAISidebarContext.Provider>
     );
-}
+};
 
 export default BoxAISidebar;
diff --git a/src/elements/content-sidebar/BoxAISidebarContent.tsx b/src/elements/content-sidebar/BoxAISidebarContent.tsx
@@ -9,7 +9,7 @@ import { AgentsProvider, BoxAiAgentSelectorWithApi } from '@box/box-ai-agent-sel
 import { IconButton, Text } from '@box/blueprint-web';
 import { Trash } from '@box/blueprint-web-assets/icons/Line';
 // @ts-expect-error - TS2305 - Module '"@box/box-ai-content-answers"' has no exported member 'ApiWrapperProps'.
-import { BoxAiContentAnswers, withApiWrapper, type ApiWrapperProps } from '@box/box-ai-content-answers'
+import { BoxAiContentAnswers, withApiWrapper, type ApiWrapperProps } from '@box/box-ai-content-answers';
 import SidebarContent from './SidebarContent';
 import { withAPIContext } from '../common/api-context';
 import { withErrorBoundary } from '../common/error-boundary';
@@ -24,28 +24,28 @@ import sidebarMessages from './messages';
 
 import './BoxAISidebar.scss';
 
-
 const MARK_NAME_JS_READY: string = `${ORIGIN_BOXAI_SIDEBAR}_${EVENT_JS_READY}`;
 
 mark(MARK_NAME_JS_READY);
-    
+
 function BoxAISidebarContent(props: ApiWrapperProps) {
-    const { 
-        createSession, 
-        encodedSession, 
-        onClearAction, 
+    const {
+        createSession,
+        encodedSession,
+        onClearAction,
         getAIStudioAgents,
         hostAppName,
-        isAIStudioAgentSelectorEnabled, 
+        isAIStudioAgentSelectorEnabled,
         isResetChatEnabled,
-        onSelectAgent, 
+        onSelectAgent,
         questions,
-        sendQuestion, 
-        stopQuestion, 
-        ...rest 
+        sendQuestion,
+        stopQuestion,
+        ...rest
     } = props;
     const { formatMessage } = useIntl();
-    const { cache, contentName, elementId, recordAction, setCacheValue, userInfo } = React.useContext(BoxAISidebarContext);
+    const { cache, contentName, elementId, isStopResponseEnabled, recordAction, setCacheValue, userInfo } =
+        React.useContext(BoxAISidebarContext);
     const { questions: cacheQuestions } = cache;
 
     if (cache.encodedSession !== encodedSession) {
@@ -61,15 +61,15 @@ function BoxAISidebarContent(props: ApiWrapperProps) {
             createSession();
         }
 
-        if (cacheQuestions.length > 0 && cacheQuestions[cacheQuestions.length-1].isCompleted === false) {
+        if (cacheQuestions.length > 0 && cacheQuestions[cacheQuestions.length - 1].isCompleted === false) {
             // if we have cache with question that is not completed resend it to trigger an API
-            sendQuestion({prompt: cacheQuestions[cacheQuestions.length-1].prompt});
+            sendQuestion({ prompt: cacheQuestions[cacheQuestions.length - 1].prompt });
         }
 
         return () => {
             // stop API request on unmount (e.g. during switching to another tab)
             stopQuestion();
-        }
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -79,7 +79,7 @@ function BoxAISidebarContent(props: ApiWrapperProps) {
                 <Text as="h3" className="bcs-title">
                     {formatMessage(messages.sidebarBoxAITitle)}
                 </Text>
-                {isAIStudioAgentSelectorEnabled &&
+                {isAIStudioAgentSelectorEnabled && (
                     <BoxAiAgentSelectorWithApi
                         fetcher={getAIStudioAgents}
                         hostAppName={hostAppName}
@@ -89,28 +89,28 @@ function BoxAISidebarContent(props: ApiWrapperProps) {
                         // @ts-ignore variant will be available in higher version
                         variant="sidebar"
                     />
-                }
+                )}
             </div>
         );
     };
 
     const renderActions = () => (
         <>
-            { renderBoxAISidebarTitle() }
-            { isResetChatEnabled && 
+            {renderBoxAISidebarTitle()}
+            {isResetChatEnabled && (
                 <IconButton
                     aria-label={formatMessage(sidebarMessages.boxAISidebarClear)}
                     icon={Trash}
                     onClick={onClearAction}
                     size="x-small"
                 />
-            }
+            )}
         </>
     );
 
     return (
         <AgentsProvider>
-            <SidebarContent 
+            <SidebarContent
                 actions={renderActions()}
                 className="bcs-BoxAISidebar"
                 elementId={elementId}
@@ -123,13 +123,14 @@ function BoxAISidebarContent(props: ApiWrapperProps) {
                         contentType={formatMessage(messages.sidebarBoxAIContent)}
                         hostAppName={hostAppName}
                         isAIStudioAgentSelectorEnabled={isAIStudioAgentSelectorEnabled}
+                        isStopResponseEnabled={isStopResponseEnabled}
                         questions={questions}
                         stopQuestion={stopQuestion}
                         submitQuestion={sendQuestion}
                         userInfo={userInfo}
                         variant="sidebar"
                         recordAction={recordAction}
-                        {...rest} 
+                        {...rest}
                     />
                 </div>
             </SidebarContent>
