From eca8b2c0d92f159848d0f9b5ec21f04a97573aa9 Mon Sep 17 00:00:00 2001 From: gagik Date: Wed, 24 Sep 2025 16:33:20 +0200 Subject: [PATCH 1/6] chore: remove dot --- packages/compass-assistant/src/components/assistant-chat.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compass-assistant/src/components/assistant-chat.tsx b/packages/compass-assistant/src/components/assistant-chat.tsx index b3fa99f467e..6025fda1440 100644 --- a/packages/compass-assistant/src/components/assistant-chat.tsx +++ b/packages/compass-assistant/src/components/assistant-chat.tsx @@ -423,7 +423,7 @@ export const AssistantChat: React.FunctionComponent = ({ size="large" style={{ color: palette.green.dark1 }} /> - MongoDB Assistant. + MongoDB Assistant

Welcome to the MongoDB Assistant! From 2aed7de0afd71881ed32f2260e1b87139624e5a9 Mon Sep 17 00:00:00 2001 From: gagik Date: Wed, 24 Sep 2025 17:31:49 +0200 Subject: [PATCH 2/6] chore: use break-word and width: 100 COMPASS-9882 COMPASS-9883 --- packages/compass-assistant/src/components/assistant-chat.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/compass-assistant/src/components/assistant-chat.tsx b/packages/compass-assistant/src/components/assistant-chat.tsx index 6025fda1440..1f143103729 100644 --- a/packages/compass-assistant/src/components/assistant-chat.tsx +++ b/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], From d15d664a329c2fbd6b3c963e4cec2de4db5d1082 Mon Sep 17 00:00:00 2001 From: gagik Date: Wed, 24 Sep 2025 17:32:02 +0200 Subject: [PATCH 3/6] chore: minimize better on small sizing --- .../src/compass-assistant-drawer.tsx | 18 ++++++++++++++++-- .../src/compass-assistant-provider.tsx | 7 ++++--- .../src/components/drawer-portal.tsx | 3 +++ 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/packages/compass-assistant/src/compass-assistant-drawer.tsx b/packages/compass-assistant/src/compass-assistant-drawer.tsx index f21ced59d11..fe0e0f0e107 100644 --- a/packages/compass-assistant/src/compass-assistant-drawer.tsx +++ b/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={

-
+
MongoDB Assistant Preview
diff --git a/packages/compass-assistant/src/compass-assistant-provider.tsx b/packages/compass-assistant/src/compass-assistant-provider.tsx index 2ab43362b28..49b9d17dcc2 100644 --- a/packages/compass-assistant/src/compass-assistant-provider.tsx +++ b/packages/compass-assistant/src/compass-assistant-provider.tsx @@ -77,7 +77,7 @@ type AssistantActionsContextType = { connectionInfo: ConnectionInfo; error: Error; }) => void; - clearChat?: () => void; + clearChat?: () => Promise; 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,8 @@ export const AssistantProvider: React.FunctionComponent< 'performance insights', buildProactiveInsightsPrompt ), - clearChat: () => { + clearChat: async () => { + await chat.stop(); chat.messages = chat.messages.filter( (message) => message.metadata?.isPermanent ); diff --git a/packages/compass-components/src/components/drawer-portal.tsx b/packages/compass-components/src/components/drawer-portal.tsx index 57c7a048acd..22c875018d4 100644 --- a/packages/compass-components/src/components/drawer-portal.tsx +++ b/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 From 561b2fd021ad3902669874a520ffa6585110ffc1 Mon Sep 17 00:00:00 2001 From: gagik Date: Wed, 24 Sep 2025 22:21:28 +0200 Subject: [PATCH 4/6] chore: clear error on chat clear --- packages/compass-assistant/src/compass-assistant-provider.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/compass-assistant/src/compass-assistant-provider.tsx b/packages/compass-assistant/src/compass-assistant-provider.tsx index 49b9d17dcc2..2f17904e6e0 100644 --- a/packages/compass-assistant/src/compass-assistant-provider.tsx +++ b/packages/compass-assistant/src/compass-assistant-provider.tsx @@ -217,6 +217,7 @@ export const AssistantProvider: React.FunctionComponent< ), clearChat: async () => { await chat.stop(); + chat.clearError(); chat.messages = chat.messages.filter( (message) => message.metadata?.isPermanent ); From ba989a51bbaca1c64a5665e20401cab80acc8347 Mon Sep 17 00:00:00 2001 From: gagik Date: Thu, 25 Sep 2025 11:01:58 +0200 Subject: [PATCH 5/6] chore: fix wrapping on small screens --- .../src/components/assistant-chat.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/compass-assistant/src/components/assistant-chat.tsx b/packages/compass-assistant/src/components/assistant-chat.tsx index 1f143103729..0b0035847b8 100644 --- a/packages/compass-assistant/src/components/assistant-chat.tsx +++ b/packages/compass-assistant/src/components/assistant-chat.tsx @@ -163,6 +163,15 @@ const disclaimerTextStyles = css({ fontSize: 'inherit', }, }); +// We do not want the "Learn More (Icon)" to end up split up across multiple lines. +const disclaimerLinkFixesStyles = css({ + whiteSpace: 'nowrap', +}); +// Submit button text should not wrap. +const messageActionsFixesStyles = css({ + whiteSpace: 'nowrap', +}); + /** TODO(COMPASS-9751): This should be handled by Leafygreen's disclaimers update */ const inputBarStyleFixes = css({ width: '100%', @@ -402,6 +411,7 @@ export const AssistantChat: React.FunctionComponent = ({ onSubmitFeedback={(event, state) => handleFeedback({ message, state }) } + className={messageActionsFixesStyles} /> )} {sources.length > 0 && } @@ -448,6 +458,7 @@ export const AssistantChat: React.FunctionComponent = ({ AI can make mistakes. Review for accuracy.{' '} Date: Thu, 25 Sep 2025 11:08:26 +0200 Subject: [PATCH 6/6] chore: apply nowrap to sources --- .../src/components/assistant-chat.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/compass-assistant/src/components/assistant-chat.tsx b/packages/compass-assistant/src/components/assistant-chat.tsx index 0b0035847b8..144c4c44b63 100644 --- a/packages/compass-assistant/src/components/assistant-chat.tsx +++ b/packages/compass-assistant/src/components/assistant-chat.tsx @@ -163,12 +163,9 @@ const disclaimerTextStyles = css({ fontSize: 'inherit', }, }); -// We do not want the "Learn More (Icon)" to end up split up across multiple lines. -const disclaimerLinkFixesStyles = css({ - whiteSpace: 'nowrap', -}); -// Submit button text should not wrap. -const messageActionsFixesStyles = css({ +// 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', }); @@ -411,10 +408,15 @@ export const AssistantChat: React.FunctionComponent = ({ onSubmitFeedback={(event, state) => handleFeedback({ message, state }) } - className={messageActionsFixesStyles} + className={noWrapFixesStyles} + /> + )} + {sources.length > 0 && ( + )} - {sources.length > 0 && } ); })} @@ -458,7 +460,7 @@ export const AssistantChat: React.FunctionComponent = ({ AI can make mistakes. Review for accuracy.{' '}