WIP chore(compass-assistant): add performance insights entry point

WIP pending tests, some tweaking, adding the same for queries without index.

Author: gagik

package-lock.json

@@ -60,6 +60,7 @@
     "@mongodb-js/atlas-service": "^0.55.0",
     "@mongodb-js/compass-app-registry": "^9.4.19",
     "@mongodb-js/compass-app-stores": "^7.56.0",
+    "@mongodb-js/compass-assistant": "^1.1.0",
     "@mongodb-js/compass-collection": "^4.69.0",
     "@mongodb-js/compass-components": "^1.48.0",
     "@mongodb-js/compass-connections": "^1.70.0",

packages/compass-aggregations/package.json

@@ -27,6 +27,7 @@ import {
   useIsAIFeatureEnabled,
 } from 'compass-preferences-model/provider';
 import { showInput as showAIInput } from '../../../modules/pipeline-builder/pipeline-ai';
+import { useAssistantActions } from '@mongodb-js/compass-assistant';
 
 const containerStyles = css({
   display: 'flex',
@@ -59,6 +60,8 @@ type PipelineActionsProps = {
 
   showCollectionScanInsight?: boolean;
   onCollectionScanInsightActionButtonClick: () => void;
+
+  stages: string[];
 };
 
 export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
@@ -80,12 +83,14 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
   onExplainAggregation,
   showCollectionScanInsight,
   onCollectionScanInsightActionButtonClick,
+  stages,
 }) => {
   const enableAggregationBuilderExtraOptions = usePreference(
     'enableAggregationBuilderExtraOptions'
   );
   const showInsights = usePreference('showInsights');
   const isAIFeatureEnabled = useIsAIFeatureEnabled();
+  const { tellMoreAboutProactiveInsights } = useAssistantActions();
 
   return (
     <div className={containerStyles}>
@@ -99,6 +104,14 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
               ...PerformanceSignals.get('aggregation-executed-without-index'),
               onPrimaryActionButtonClick:
                 onCollectionScanInsightActionButtonClick,
+              onAssistantButtonClick:
+                tellMoreAboutProactiveInsights &&
+                (() => {
+                  tellMoreAboutProactiveInsights({
+                    id: 'aggregation-executed-without-index',
+                    stages,
+                  });
+                }),
             }}
           ></SignalPopover>
         </div>
@@ -185,6 +198,7 @@ const mapState = (state: RootState) => {
     isUpdateViewButtonDisabled:
       !state.isModified || hasSyntaxErrors || isAIFetching,
     showCollectionScanInsight: state.insights.isCollectionScan,
+    stages: resultPipeline,
   };
 };
 

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx

@@ -24,18 +24,19 @@ interface FetchExplainPlanSuccessAction {
 }
 export type InsightsAction = FetchExplainPlanSuccessAction;
 
-const INITIAL_STATE = { isCollectionScan: false };
+const INITIAL_STATE = { isCollectionScan: false, explainPlan: null };
 
-const reducer: Reducer<{ isCollectionScan: boolean }, Action> = (
-  state = INITIAL_STATE,
-  action
-) => {
+const reducer: Reducer<
+  { isCollectionScan: boolean; explainPlan: ExplainPlan | null },
+  Action
+> = (state = INITIAL_STATE, action) => {
   if (
     isAction<FetchExplainPlanSuccessAction>(action, FETCH_EXPLAIN_PLAN_SUCCESS)
   ) {
     return {
       ...state,
       isCollectionScan: action.explainPlan.isCollectionScan,
+      explainPlan: action.explainPlan,
     };
   }
   if (

packages/compass-aggregations/src/modules/insights.ts

@@ -6,7 +6,11 @@ import { registerCompassPlugin } from '@mongodb-js/compass-app-registry';
 import { atlasServiceLocator } from '@mongodb-js/atlas-service/provider';
 import { DocsProviderTransport } from './docs-provider-transport';
 import { useDrawerActions } from '@mongodb-js/compass-components';
-import { buildExplainPlanPrompt } from './prompts';
+import {
+  buildExplainPlanPrompt,
+  buildProactiveInsightsPrompt,
+  type ProactiveInsightsContext,
+} from './prompts';
 import { usePreference } from 'compass-preferences-model/provider';
 
 export const ASSISTANT_DRAWER_ID = 'compass-assistant-drawer';
@@ -32,21 +36,27 @@ type AssistantActionsContextType = {
     namespace: string;
     explainPlan: string;
   }) => void;
+  tellMoreAboutProactiveInsights: ({
+    id,
+    stages,
+  }: ProactiveInsightsContext) => void;
 };
 export const AssistantActionsContext =
   createContext<AssistantActionsContextType>({
     interpretExplainPlan: () => {},
+    tellMoreAboutProactiveInsights: () => {},
   });
 
-export function useAssistantActions(): AssistantActionsContextType & {
-  isAssistantEnabled: boolean;
-} {
+export function useAssistantActions(): Partial<AssistantActionsContextType> {
   const isAssistantEnabled = usePreference('enableAIAssistant');
 
-  return {
-    ...useContext(AssistantActionsContext),
-    isAssistantEnabled,
-  };
+  const actions = useContext(AssistantActionsContext);
+
+  if (!isAssistantEnabled) {
+    return {};
+  }
+
+  return actions;
 }
 
 export const AssistantProvider: React.FunctionComponent<
@@ -70,6 +80,13 @@ export const AssistantProvider: React.FunctionComponent<
         {}
       );
     },
+    tellMoreAboutProactiveInsights: (context: ProactiveInsightsContext) => {
+      openDrawer(ASSISTANT_DRAWER_ID);
+      const { prompt } = buildProactiveInsightsPrompt(context);
+      void chat.sendMessage({
+        text: prompt,
+      });
+    },
   });
   const { openDrawer } = useDrawerActions();
 

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

@@ -1,13 +1,40 @@
+export type EntryPointMessage = {
+  prompt: string;
+  displayText?: string;
+};
+
 export const buildExplainPlanPrompt = ({
   explainPlan,
 }: {
   explainPlan: string;
-}) => {
+}): EntryPointMessage => {
   return {
     prompt: `Given the MongoDB explain plan output below, provide a concise human readable explanation that explains the query execution plan and highlights aspects of the plan that might impact query performance. Respond with as much concision and clarity as possible.
 If a clear optimization should be made, please suggest the optimization and describe how it can be accomplished in MongoDB Compass. Do not advise users to create indexes without weighing the pros and cons. 
 Explain output: 
 ${explainPlan}`,
-    displayText: 'Provide an explanation of this explain plan.',
+    displayText: 'Interpret this explain plan output for me.',
   };
 };
+
+export type ProactiveInsightsContext = {
+  id: 'aggregation-executed-without-index';
+  stages: string[];
+};
+
+export const buildProactiveInsightsPrompt = ({
+  id,
+  stages,
+}: ProactiveInsightsContext): EntryPointMessage => {
+  switch (id) {
+    case 'aggregation-executed-without-index':
+      return {
+        displayText:
+          'Help me understand the performance impact of running queries without an index.',
+        prompt: `What is the best index for this query?
+${stages.join('\n')}`,
+      };
+    default:
+      throw new Error(`Unsupported signal id: ${id}`);
+  }
+};

packages/compass-assistant/src/prompts.ts

@@ -24,6 +24,7 @@ type SignalTrackingHooks = {
   onSignalLinkClick(id: string): void;
   onSignalPrimaryActionClick(id: string): void;
   onSignalClose(id: string): void;
+  onAssistantButtonClick(): void;
 };
 
 const TrackingHooksContext = React.createContext<SignalTrackingHooks>({
@@ -42,6 +43,9 @@ const TrackingHooksContext = React.createContext<SignalTrackingHooks>({
   onSignalClose() {
     /** noop */
   },
+  onAssistantButtonClick() {
+    /** noop */
+  },
 });
 
 const SignalHooksProvider: React.FunctionComponent<
@@ -66,6 +70,7 @@ const SignalHooksProvider: React.FunctionComponent<
       onSignalClose(id: string) {
         hooksRef.current.onSignalClose?.(id);
       },
+      onAssistantButtonClick: hooksRef.current.onAssistantButtonClick,
     };
   }, []);
 
@@ -116,6 +121,11 @@ export type Signal = {
    * button click
    */
   onPrimaryActionButtonClick?: React.MouseEventHandler;
+
+  /**
+   * Optional, when provided will be called with a signal id and assistant context
+   */
+  onAssistantButtonClick?: React.MouseEventHandler;
 };
 
 type SignalPopoverProps = {
@@ -192,6 +202,7 @@ const SignalCard: React.FunctionComponent<
   primaryActionButtonIcon,
   primaryActionButtonVariant,
   primaryActionButtonLink,
+  onAssistantButtonClick,
   darkMode: _darkMode,
   onPrimaryActionButtonClick,
   hasMultiSignals,
@@ -216,7 +227,18 @@ const SignalCard: React.FunctionComponent<
         {title}
       </strong>
       <Body as="div" baseFontSize={13} className={signalCardDescriptionStyles}>
-        {description}
+        {description}{' '}
+        <Link
+          data-testid="insight-signal-link"
+          className={signalCardLearnMoreLinkStyles}
+          href={learnMoreLink}
+          target="_blank"
+          onClick={() => {
+            hooks.onSignalLinkClick(id);
+          }}
+        >
+          {learnMoreLabel ?? 'Learn more'}
+        </Link>
       </Body>
       <div className={signalCardActionGroupStyles}>
         {primaryActionButtonLabel && (
@@ -241,17 +263,20 @@ const SignalCard: React.FunctionComponent<
             {primaryActionButtonLabel}
           </Button>
         )}
-        <Link
-          data-testid="insight-signal-link"
-          className={signalCardLearnMoreLinkStyles}
-          href={learnMoreLink}
-          target="_blank"
-          onClick={() => {
-            hooks.onSignalLinkClick(id);
-          }}
-        >
-          {learnMoreLabel ?? 'Learn more'}
-        </Link>
+        {onAssistantButtonClick && (
+          <Button
+            size="small"
+            variant="default"
+            leftGlyph={
+              // TODO(COMPASS-9384): Will be replaced with Sparkle gradient icon once Leafygreen components are updated.
+              <Icon glyph="Sparkle" style={{ color: palette.green.dark1 }} />
+            }
+            data-testid="tell-me-more-button"
+            onClick={onAssistantButtonClick}
+          >
+            Tell me more
+          </Button>
+        )}
       </div>
     </div>
   );
@@ -658,6 +683,7 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
         )}
         <SignalCard
           {...currentSignal}
+          onAssistantButtonClick={currentSignal.onAssistantButtonClick}
           darkMode={darkMode}
           hasMultiSignals={multiSignals}
         ></SignalCard>

packages/compass-components/src/components/signal-popover.tsx

@@ -1,7 +1,16 @@
 import React from 'react';
 import type { Signal } from './signal-popover';
 
-const SIGNALS = [
+const SIGNALS: Pick<
+  Signal,
+  | 'id'
+  | 'title'
+  | 'description'
+  | 'learnMoreLink'
+  | 'primaryActionButtonLabel'
+  | 'primaryActionButtonLink'
+  | 'primaryActionButtonIcon'
+>[] = [
   {
     id: 'aggregation-executed-without-index',
     title: 'Aggregation executed without index',