feat(chat): support Marketplace feature flag (Issue #2223)

apps/chat/.env.development

@@ -72,7 +72,7 @@ DIAL_API_VERSION="2024-02-01"
 
 
 # Application UI settings
-ENABLED_FEATURES="conversations-section,prompts-section,top-settings,top-clear-conversation,top-chat-info,top-chat-model-settings,empty-chat-settings,header,footer,request-api-key,report-an-issue,likes,conversations-sharing,prompts-sharing,input-files,attachments-manager,conversations-publishing,prompts-publishing,custom-logo,input-links,custom-applications,message-templates"
+ENABLED_FEATURES="conversations-section,prompts-section,top-settings,top-clear-conversation,top-chat-info,top-chat-model-settings,empty-chat-settings,header,footer,request-api-key,report-an-issue,likes,conversations-sharing,prompts-sharing,input-files,attachments-manager,conversations-publishing,prompts-publishing,custom-logo,input-links,custom-applications,message-templates,marketplace"
 NEXT_PUBLIC_APP_NAME="Local Development APP Name"
 NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT=""
 NEXT_PUBLIC_DEFAULT_TEMPERATURE="1"

apps/chat/src/components/Chat/ConversationSettingsModels.tsx

@@ -15,6 +15,7 @@ import {
   ModelsActions,
   ModelsSelectors,
 } from '@/src/store/models/models.reducers';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 
 import { RECENT_MODELS_COUNT, REPLAY_AS_IS_MODEL } from '@/src/constants/chat';
 import { MarketplaceQueryParams } from '@/src/constants/marketplace';
@@ -25,6 +26,8 @@ import { ModelList } from './ModelList';
 import { PlaybackModelButton } from './Playback/PlaybackModelButton';
 import { ReplayAsIsButton } from './ReplayAsIsButton';
 
+import { Feature } from '@epam/ai-dial-shared';
+
 interface Props {
   modelId: string | undefined;
   conversation: Conversation;
@@ -54,6 +57,10 @@ export const ConversationSettingsModel = ({
     conversation.replay?.replayAsIs ?? false,
   );
 
+  const isMarketplaceEnabled = useAppSelector((state) =>
+    SettingsSelectors.isFeatureEnabled(state, Feature.Marketplace),
+  );
+
   useEffect(() => {
     setIsReplayAsIs(conversation.replay?.replayAsIs ?? false);
   }, [conversation.replay?.replayAsIs]);
@@ -132,18 +139,20 @@ export const ConversationSettingsModel = ({
           />
         </div>
       </div>
-      <button
-        disabled={isPlayback}
-        className="mt-3 inline text-left text-accent-primary disabled:cursor-not-allowed"
-        onClick={() =>
-          router.push(
-            `/marketplace?${MarketplaceQueryParams.fromConversation}=${ApiUtils.encodeApiUrl(conversation.id)}`,
-          )
-        }
-        data-qa="search-on-my-app"
-      >
-        {t('Search on My applications')}
-      </button>
+      {isMarketplaceEnabled && (
+        <button
+          disabled={isPlayback}
+          className="mt-3 inline text-left text-accent-primary disabled:cursor-not-allowed"
+          onClick={() =>
+            router.push(
+              `/marketplace?${MarketplaceQueryParams.fromConversation}=${ApiUtils.encodeApiUrl(conversation.id)}`,
+            )
+          }
+          data-qa="search-on-my-app"
+        >
+          {t('Search on My applications')}
+        </button>
+      )}
     </div>
   );
 };

apps/chat/src/components/Chatbar/Chatbar.tsx

@@ -47,22 +47,28 @@ const ChatActionsBlock = () => {
     SettingsSelectors.isFeatureEnabled(state, Feature.HideNewConversation),
   );
 
+  const isMarketplaceEnabled = useAppSelector((state) =>
+    SettingsSelectors.isFeatureEnabled(state, Feature.Marketplace),
+  );
+
   if (isNewConversationDisabled) {
     return null;
   }
 
   return (
     <>
-      <div className="flex px-2 py-1">
-        <button
-          className="flex shrink-0 grow cursor-pointer select-none items-center gap-3 rounded px-3 py-[5px] transition-colors duration-200 hover:bg-accent-primary-alpha disabled:cursor-not-allowed hover:disabled:bg-transparent"
-          onClick={() => router.push('/marketplace')}
-          data-qa="link-to-marketplace"
-        >
-          <IconApps className="text-secondary" width={24} height={24} />
-          {t('DIAL Marketplace')}
-        </button>
-      </div>
+      {isMarketplaceEnabled && (
+        <div className="flex px-2 py-1">
+          <button
+            className="flex shrink-0 grow cursor-pointer select-none items-center gap-3 rounded px-3 py-[5px] transition-colors duration-200 hover:bg-accent-primary-alpha disabled:cursor-not-allowed hover:disabled:bg-transparent"
+            onClick={() => router.push('/marketplace')}
+            data-qa="link-to-marketplace"
+          >
+            <IconApps className="text-secondary" width={24} height={24} />
+            {t('DIAL Marketplace')}
+          </button>
+        </div>
+      )}
       <div className="flex px-2 py-1">
         <button
           className="flex shrink-0 grow cursor-pointer select-none items-center gap-3 rounded px-3 py-[5px] transition-colors duration-200 hover:bg-accent-primary-alpha disabled:cursor-not-allowed hover:disabled:bg-transparent"

apps/chat/src/pages/marketplace/index.tsx

@@ -1,16 +1,37 @@
+import { useEffect } from 'react';
+
+import { useRouter } from 'next/router';
+
 import { getCommonPageProps } from '@/src/utils/server/get-common-page-props';
 
 import { useAppSelector } from '@/src/store/hooks';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 import { UISelectors } from '@/src/store/ui/ui.reducers';
 
+import Loader from '@/src/components/Common/Loader';
 import { UserMobile } from '@/src/components/Header/User/UserMobile';
 import MarketplaceView from '@/src/components/Marketplace/Marketplace';
 import MarketplaceFilterbar from '@/src/components/Marketplace/MarketplaceFilterbar';
 import MarketplaceHeader from '@/src/components/Marketplace/MarketplaceHeader';
 
+import { Feature } from '@epam/ai-dial-shared';
+
 export default function Marketplace() {
   const isProfileOpen = useAppSelector(UISelectors.selectIsProfileOpen);
 
+  const isMarketplaceEnabled = useAppSelector((state) =>
+    SettingsSelectors.isFeatureEnabled(state, Feature.Marketplace),
+  );
+
+  const router = useRouter();
+  useEffect(() => {
+    if (!isMarketplaceEnabled) {
+      router.push('/');
+    }
+  }, [isMarketplaceEnabled, router]);
+
+  if (!isMarketplaceEnabled) return <Loader />;
+
   return (
     <div className="flex size-full flex-col sm:pt-0">
       <MarketplaceHeader />

libs/shared/src/types/features.ts

@@ -22,6 +22,7 @@ export enum Feature {
   HideNewConversation = 'hide-new-conversation', // hide "New conversation" button
   CustomApplications = 'custom-applications', // custom applications
   MessageTemplates = 'message-templates', // message templates
+  Marketplace = 'marketplace', // Enable Marketplace
 }
 
 export const availableFeatures: Record<Feature, boolean> = {
@@ -48,4 +49,5 @@ export const availableFeatures: Record<Feature, boolean> = {
   [Feature.HideNewConversation]: true,
   [Feature.CustomApplications]: true,
   [Feature.MessageTemplates]: true,
+  [Feature.Marketplace]: true,
 };