chore: add feature flag and fix lint

Author: gagik

package-lock.json

@@ -51,7 +51,9 @@
   "dependencies": {
     "@ai-sdk/openai": "^2.0.4",
     "@mongodb-js/compass-components": "^1.30.5",
+    "@mongodb-js/compass-logging": "^1.7.10",
     "ai": "^5.0.5",
+    "compass-preferences-model": "^2.49.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "throttleit": "^2.1.0",

packages/compass-assistant/package.json

@@ -6,6 +6,10 @@ interface AsisstantChatProps {
   onSendMessage?: (message: string) => void;
 }
 
+/**
+ * This component is currently using placeholders as Leafygreen UI updates are not available yet.
+ * Before release, we will replace this with the actual Leafygreen chat components.
+ */
 export const AsisstantChat: React.FunctionComponent<AsisstantChatProps> = ({
   messages,
   onSendMessage,

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

@@ -3,6 +3,7 @@ import React, { type PropsWithChildren, useCallback, useRef } from 'react';
 import { type UIMessage, useChat } from './@ai-sdk/react/use-chat';
 import type { Chat } from './@ai-sdk/react/chat.react';
 import { AsisstantChat } from './assistant-chat';
+import { usePreference } from 'compass-preferences-model/provider';
 
 export const ASSISTANT_DRAWER_ID = 'compass-assistant-drawer';
 
@@ -22,6 +23,8 @@ export const AssistantProvider: React.FunctionComponent<
     chat?: Chat<UIMessage>;
   }>
 > = ({ chat, children }) => {
+  const enableAIAssistant = usePreference('enableAIAssistant');
+
   const { messages, sendMessage } = useChat({
     transport: docsProviderTransport,
     chat,
@@ -37,16 +40,25 @@ export const AssistantProvider: React.FunctionComponent<
     [sendMessage]
   );
 
+  if (!enableAIAssistant) {
+    return <>{children}</>;
+  }
+
   return (
     <AssistantActionsContext.Provider value={contextActions.current}>
-      <DrawerSection
-        id={ASSISTANT_DRAWER_ID}
-        title="MongoDB Assistant"
-        label="MongoDB Assistant"
-        glyph="Sparkle"
-      >
-        <AsisstantChat messages={messages} onSendMessage={handleMessageSend} />
-      </DrawerSection>
+      {enableAIAssistant && (
+        <DrawerSection
+          id={ASSISTANT_DRAWER_ID}
+          title="MongoDB Assistant"
+          label="MongoDB Assistant"
+          glyph="Sparkle"
+        >
+          <AsisstantChat
+            messages={messages}
+            onSendMessage={handleMessageSend}
+          />
+        </DrawerSection>
+      )}
       {children}
     </AssistantActionsContext.Provider>
   );

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

@@ -3,9 +3,9 @@ import { render } from '@mongodb-js/testing-library-compass';
 import { CompassAssistantProvider } from './index';
 
 describe('Compass Assistant', function () {
-  const Plugin = CompassAssistantProvider.withMockServices({});
+  const CompassAssistant = CompassAssistantProvider.withMockServices({});
 
   it('renders a Plugin', function () {
-    render(<Plugin></Plugin>);
+    render(<CompassAssistant></CompassAssistant>);
   });
 });

packages/compass-assistant/src/index.spec.tsx

@@ -28,6 +28,7 @@ export type FeatureFlags = {
   showIndexesGuidanceVariant: boolean;
   enableContextMenus: boolean;
   enableSearchActivationProgramP1: boolean;
+  enableAIAssistant: boolean;
 };
 
 export const featureFlags: Required<{
@@ -159,4 +160,14 @@ export const featureFlags: Required<{
       short: 'Enable interface to view and modify search indexes',
     },
   },
+
+  /**
+   * Feature flag for AI Assistant.
+   */
+  enableAIAssistant: {
+    stage: 'development',
+    description: {
+      short: 'Enable AI Assistant',
+    },
+  },
 };