feat(compass-generative-ai): Add plugin to generative ai package to show opt-in for project setting in DE COMPASS-8378

packages/compass-generative-ai/src/atlas-ai-service.ts

@@ -10,7 +10,9 @@ import type { Document } from 'mongodb';
 import type { Logger } from '@mongodb-js/compass-logging';
 import { EJSON } from 'bson';
 import { signIntoAtlasWithModalPrompt } from './store/atlas-signin-reducer';
-import { getStore } from './store/atlas-signin-store';
+import { getStore } from './store/atlas-ai-store';
+import { optIntoGenAIWithModalPrompt } from './store/atlas-optin-reducer';
+import { throwIfNotOk } from '../../atlas-service/src/util';
 
 type GenerativeAiInput = {
   userInput: string;
@@ -329,6 +331,10 @@ export class AtlasAiService {
   async ensureAiFeatureAccess({ signal }: { signal?: AbortSignal } = {}) {
     // When the ai feature is attempted to be opened we make sure
     // the user is signed into Atlas and opted in.
+
+    if (this.apiURLPreset === 'cloud') {
+      return getStore().dispatch(optIntoGenAIWithModalPrompt({ signal }));
+    }
     return getStore().dispatch(signIntoAtlasWithModalPrompt({ signal }));
   }
 
@@ -437,6 +443,29 @@ export class AtlasAiService {
     );
   }
 
+  // optIn function w post request to set the user preference to true
+  async optIntoGenAIFeaturesAtlas() {
+    const res = await this.atlasService.authenticatedFetch(
+      this.atlasService.cloudEndpoint(
+        '/settings/optInDataExplorerGenAIFeatures'
+      ),
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          isEnabled: true,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+      }
+    );
+    await throwIfNotOk(res);
+    await this.preferences.savePreferences({
+      optInDataExplorerGenAIFeatures: true,
+    });
+  }
+
   private validateAIFeatureEnablementResponse(
     response: any
   ): asserts response is AIFeatureEnablement {

packages/compass-generative-ai/src/components/ai-optin-modal.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import {
+  Body,
+  Link,
+  MarketingModal,
+  css,
+  spacing,
+  useDarkMode,
+} from '@mongodb-js/compass-components';
+import { AISignInImageBanner } from './ai-signin-banner-image';
+import {
+  closeOptInModal,
+  optIn,
+  type AtlasOptInState,
+} from '../store/atlas-optin-reducer';
+
+const GEN_AI_FAQ_LINK = 'https://www.mongodb.com/docs/generative-ai-faq/';
+
+type OptInModalProps = {
+  isOptInModalVisible: boolean;
+  isOptInInProgress: boolean;
+  onOptInModalClose: () => void;
+  onOptInClick: () => void;
+};
+
+const titleStyles = css({
+  marginBottom: spacing[400],
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});
+
+const disclaimer = css({
+  padding: `0 ${spacing[900]}px`,
+});
+
+const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
+  isOptInModalVisible,
+  isOptInInProgress,
+  onOptInModalClose,
+  onOptInClick,
+}) => {
+  const darkMode = useDarkMode();
+
+  return (
+    <MarketingModal
+      darkMode={darkMode}
+      disclaimer={
+        <div className={disclaimer}>
+          This is a feature powered by generative AI, and may give inaccurate
+          responses. Please see our{' '}
+          <Link hideExternalIcon={false} href={GEN_AI_FAQ_LINK} target="_blank">
+            FAQ
+          </Link>{' '}
+          for more information.
+        </div>
+      }
+      graphic={<AISignInImageBanner></AISignInImageBanner>}
+      title={
+        <div className={titleStyles}>
+          Use natural language to generate queries and pipelines
+        </div>
+      }
+      open={isOptInModalVisible}
+      onClose={onOptInModalClose}
+      buttonText="Opt In to Generative AI Features"
+      onButtonClick={() => {
+        // We can't control buttons in marketing modal, so instead we just do
+        // nothing when button is clicked and sign in is in progress
+        if (isOptInInProgress) {
+          return;
+        }
+        onOptInClick();
+      }}
+      linkText="Cancel"
+      onLinkClick={onOptInModalClose}
+    >
+      <Body>
+        Atlas users can now quickly create queries and aggregations with
+        MongoDB&apos;s&nbsp; intelligent AI-powered feature, available today.
+      </Body>
+    </MarketingModal>
+  );
+};
+
+export default connect(
+  (state: AtlasOptInState) => {
+    return {
+      isOptInModalVisible: state.optInReducer.isModalOpen,
+      isOptInInProgress: state.state === 'in-progress',
+    };
+  },
+  { onOptInModalClose: closeOptInModal, onOptInClick: optIn }
+)(AIOptInModal);

packages/compass-generative-ai/src/components/atlas-signin/ai-signin-modal.tsx → packages/compass-generative-ai/src/components/ai-signin-modal.tsx

@@ -11,8 +11,8 @@ import {
   useDarkMode,
 } from '@mongodb-js/compass-components';
 import { AISignInImageBanner } from './ai-signin-banner-image';
-import type { AtlasSignInState } from '../../store/atlas-signin-reducer';
-import { closeSignInModal, signIn } from '../../store/atlas-signin-reducer';
+import type { AtlasSignInState } from '../store/atlas-signin-reducer';
+import { closeSignInModal, signIn } from '../store/atlas-signin-reducer';
 
 const GEN_AI_FAQ_LINK = 'https://www.mongodb.com/docs/generative-ai-faq/';
 
@@ -102,7 +102,7 @@ const AISignInModal: React.FunctionComponent<SignInModalProps> = ({
 export default connect(
   (state: AtlasSignInState) => {
     return {
-      isSignInModalVisible: state.isModalOpen,
+      isSignInModalVisible: state.signInReducer.isModalOpen,
       isSignInInProgress: state.state === 'in-progress',
     };
   },

packages/compass-generative-ai/src/components/index.ts

@@ -3,4 +3,4 @@ export {
   AIExperienceEntry,
   createAIPlaceholderHTMLPlaceholder,
 } from './ai-experience-entry';
-export { AtlasSignIn } from './atlas-signin';
+export { AtlasAiPlugin } from './plugin';

packages/compass-generative-ai/src/components/atlas-signin/index.tsx → packages/compass-generative-ai/src/components/plugin.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import AISignInModal from './ai-signin-modal';
+import AIOptInModal from './ai-optin-modal';
 import { ConfirmationModalArea } from '@mongodb-js/compass-components';
 
-export const AtlasSignIn = () => {
+
+export const AtlasAiPlugin = () => {
   return (
     <ConfirmationModalArea>
       <AISignInModal></AISignInModal>
+      <AIOptInModal></AIOptInModal>
     </ConfirmationModalArea>
   );
-};
+};

packages/compass-generative-ai/src/index.ts

@@ -1,17 +1,19 @@
 import { registerHadronPlugin } from 'hadron-app-registry';
 import { atlasAuthServiceLocator } from '@mongodb-js/atlas-service/provider';
 
-import { activatePlugin } from './store/atlas-signin-store';
-import { AtlasSignIn } from './components';
+import { activatePlugin } from './store/atlas-ai-store';
+import { AtlasAiPlugin } from './components';
+import { atlasAiServiceLocator } from './provider';
 
 export const CompassGenerativeAIPlugin = registerHadronPlugin(
   {
     name: 'CompassGenerativeAI',
-    component: AtlasSignIn,
+    component: AtlasAiPlugin,
     activate: activatePlugin,
   },
   {
     atlasAuthService: atlasAuthServiceLocator,
+    atlasAiService: atlasAiServiceLocator,
   }
 );
 

packages/compass-generative-ai/src/store/atlas-signin-store.ts → packages/compass-generative-ai/src/store/atlas-ai-store.ts

@@ -1,12 +1,15 @@
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, combineReducers } from 'redux';
 import thunk from 'redux-thunk';
-import reducer, {
+import signInReducer, {
   atlasServiceSignedOut,
   atlasServiceSignedIn,
-  atlasServiceTokenRefreshFailed,
+  atlasServiceSignInTokenRefreshFailed,
 } from './atlas-signin-reducer';
+import optInReducer from './atlas-optin-reducer';
 import type { AtlasAuthService } from '@mongodb-js/atlas-service/provider';
 import type { ActivateHelpers } from 'hadron-app-registry';
+import type { AtlasAiService } from '../atlas-ai-service';
+import type { PreferencesAccess } from 'compass-preferences-model';
 
 let store: CompassGenerativeAIServiceStore;
 export function getStore() {
@@ -15,17 +18,22 @@ export function getStore() {
   }
   return store;
 }
+const reducer = combineReducers({
+  signInReducer,
+  optInReducer,
+});
 
-export type CompassGenerativeAIPluginServices = {
+export type CompassGenerativeAIExtraArgs = {
   atlasAuthService: AtlasAuthService;
+  atlasAiService: AtlasAiService;
+  preferences: PreferencesAccess;
 };
 export function activatePlugin(
   _: Record<string, never>,
-  services: CompassGenerativeAIPluginServices,
+  services: CompassGenerativeAIExtraArgs,
   { cleanup }: ActivateHelpers
 ) {
   store = configureStore(services);
-
   services.atlasAuthService.on('signed-in', () => {
     void store.dispatch(atlasServiceSignedIn());
   });
@@ -35,18 +43,21 @@ export function activatePlugin(
   });
 
   services.atlasAuthService.on('token-refresh-failed', () => {
-    void store.dispatch(atlasServiceTokenRefreshFailed());
+    void store.dispatch(atlasServiceSignInTokenRefreshFailed());
   });
-
   return { store, deactivate: cleanup };
 }
 
 export function configureStore({
   atlasAuthService,
-}: CompassGenerativeAIPluginServices) {
+  atlasAiService,
+  preferences,
+}: CompassGenerativeAIExtraArgs) {
   const store = createStore(
     reducer,
-    applyMiddleware(thunk.withExtraArgument({ atlasAuthService }))
+    applyMiddleware(
+      thunk.withExtraArgument({ atlasAuthService, atlasAiService, preferences })
+    )
   );
   return store;
 }