chore(compass-assistant): fix content overflow and resizing of drawer COMPASS-9882 COMPASS-9883 COMPASS-9888 (#7373)

Author: gagik

packages/compass-assistant/src/compass-assistant-drawer.tsx

@@ -25,6 +25,20 @@ const assistantTitleStyles = css({
   justifyContent: 'space-between',
 });
 
+const assistantTitleTextWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  transition: 'transform 0.16s ease-in',
+
+  // Shrink the title text and badge when the drawer is narrow
+  '@container (width < 320px)': {
+    '&': {
+      transform: 'scale(0.8) translateX(-10%)',
+    },
+  },
+});
+
 const assistantTitleTextStyles = css({
   marginRight: spacing[200],
 });
@@ -55,7 +69,7 @@ export const CompassAssistantDrawer: React.FunctionComponent<{
       'data-testid': 'assistant-confirm-clear-chat-modal',
     });
     if (confirmed) {
-      clearChat?.();
+      await clearChat?.();
     }
   }, [clearChat]);
 
@@ -74,7 +88,7 @@ export const CompassAssistantDrawer: React.FunctionComponent<{
       id={ASSISTANT_DRAWER_ID}
       title={
         <div className={assistantTitleStyles}>
-          <div>
+          <div className={assistantTitleTextWrapperStyles}>
             <span className={assistantTitleTextStyles}>MongoDB Assistant</span>
             <Badge variant="blue">Preview</Badge>
           </div>

packages/compass-assistant/src/compass-assistant-provider.tsx

@@ -77,7 +77,7 @@ type AssistantActionsContextType = {
     connectionInfo: ConnectionInfo;
     error: Error;
   }) => void;
-  clearChat?: () => void;
+  clearChat?: () => Promise<void>;
   tellMoreAboutInsight?: (context: ProactiveInsightsContext) => void;
   ensureOptInAndSend?: (
     message: SendMessage,
@@ -98,7 +98,7 @@ export const AssistantActionsContext =
     interpretExplainPlan: () => {},
     interpretConnectionError: () => {},
     tellMoreAboutInsight: () => {},
-    clearChat: () => {},
+    clearChat: async () => {},
     ensureOptInAndSend: async () => {},
   });
 
@@ -215,7 +215,9 @@ export const AssistantProvider: React.FunctionComponent<
       'performance insights',
       buildProactiveInsightsPrompt
     ),
-    clearChat: () => {
+    clearChat: async () => {
+      await chat.stop();
+      chat.clearError();
       chat.messages = chat.messages.filter(
         (message) => message.metadata?.isPermanent
       );

packages/compass-assistant/src/components/assistant-chat.tsx

@@ -134,6 +134,8 @@ const messageFeedFixesStyles = css({
   display: 'flex',
   flexDirection: 'column-reverse',
   overflowY: 'auto',
+  width: '100%',
+  wordBreak: 'break-word',
   flex: 1,
   padding: spacing[400],
   gap: spacing[400],
@@ -161,6 +163,12 @@ const disclaimerTextStyles = css({
     fontSize: 'inherit',
   },
 });
+// On small screens, many components end up breaking words which we don't want.
+// This is a general temporary fix for all components that we want to prevent from wrapping.
+const noWrapFixesStyles = css({
+  whiteSpace: 'nowrap',
+});
+
 /** TODO(COMPASS-9751): This should be handled by Leafygreen's disclaimers update */
 const inputBarStyleFixes = css({
   width: '100%',
@@ -400,9 +408,15 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
                         onSubmitFeedback={(event, state) =>
                           handleFeedback({ message, state })
                         }
+                        className={noWrapFixesStyles}
+                      />
+                    )}
+                    {sources.length > 0 && (
+                      <Message.Links
+                        className={noWrapFixesStyles}
+                        links={sources}
                       />
                     )}
-                    {sources.length > 0 && <Message.Links links={sources} />}
                   </Message>
                 );
               })}
@@ -423,7 +437,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
                   size="large"
                   style={{ color: palette.green.dark1 }}
                 />
-                <span>MongoDB Assistant.</span>
+                <span>MongoDB Assistant</span>
               </h4>
               <p className={welcomeTextStyles}>
                 Welcome to the MongoDB Assistant!
@@ -446,6 +460,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
           <DisclaimerText className={disclaimerTextStyles}>
             AI can make mistakes. Review for accuracy.{' '}
             <Link
+              className={noWrapFixesStyles}
               hideExternalIcon={false}
               href={GEN_AI_FAQ_LINK}
               target="_blank"

packages/compass-components/src/components/drawer-portal.tsx

@@ -177,6 +177,9 @@ const drawerLayoutFixesStyles = css({
     // Anchor is currently rendered
     borderTop: 'none',
     borderBottom: 'none',
+
+    // Settings inline-size allows us to use @container queries inside the drawer section.
+    containerType: 'inline-size',
   },
 
   // drawer content > title content