fix(chat): fix Marketplace filters and navigation (Issue #3023, #3018) (

#3026)

apps/chat/src/components/Chat/TalkTo/TalkToModal.tsx

@@ -1,5 +1,5 @@
 import { IconSearch } from '@tabler/icons-react';
-import { useCallback, useMemo, useState } from 'react';
+import { MouseEvent, useCallback, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { useTranslation } from 'next-i18next';
@@ -269,6 +269,17 @@ const TalkToModalView = ({
     [setDeleteModel],
   );
 
+  const handleGoToWorkspace = useCallback(
+    (e: MouseEvent<HTMLAnchorElement>) => {
+      if (conversation.playback?.isPlayback) {
+        e.preventDefault();
+      } else {
+        dispatch(ConversationsActions.setTalkToConversationId(null));
+      }
+    },
+    [conversation.playback?.isPlayback, dispatch],
+  );
+
   return (
     <>
       <h3 className="text-base font-semibold">
@@ -304,11 +315,7 @@ const TalkToModalView = ({
         <Link
           href={`/marketplace?${MarketplaceQueryParams.fromConversation}=${ApiUtils.encodeApiUrl(conversation.id)}`}
           shallow
-          onClick={(e) =>
-            conversation.playback?.isPlayback
-              ? e.preventDefault()
-              : dispatch(ConversationsActions.setTalkToConversationId(null))
-          }
+          onClick={handleGoToWorkspace}
           className={classNames(
             'm-auto mt-4 text-accent-primary md:absolute md:bottom-6 md:right-6',
             conversation.playback?.isPlayback && 'cursor-not-allowed',

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

@@ -4,8 +4,7 @@ import { useRouter } from 'next/router';
 
 import { getCommonPageProps } from '@/src/utils/server/get-common-page-props';
 
-import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
-import { MarketplaceActions } from '@/src/store/marketplace/marketplace.reducers';
+import { useAppSelector } from '@/src/store/hooks';
 import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 import { UISelectors } from '@/src/store/ui/ui.reducers';
 
@@ -22,8 +21,6 @@ import { MarketplaceHeader } from '@/src/components/Marketplace/MarketplaceHeade
 import { Feature } from '@epam/ai-dial-shared';
 
 function Marketplace() {
-  const dispatch = useAppDispatch();
-
   const isProfileOpen = useAppSelector(UISelectors.selectIsProfileOpen);
 
   const isMarketplaceEnabled = useAppSelector((state) =>
@@ -37,10 +34,6 @@ function Marketplace() {
     }
   }, [isMarketplaceEnabled, router]);
 
-  useEffect(() => {
-    dispatch(MarketplaceActions.resetState());
-  }, [dispatch]);
-
   if (!isMarketplaceEnabled) return <Loader />;
 
   return (

apps/chat/src/store/marketplace/marketplace.epics.ts

@@ -13,7 +13,7 @@ import {
   SourceType,
 } from '@/src/constants/marketplace';
 
-import { ModelsSelectors } from '../models/models.reducers';
+import { ModelsActions, ModelsSelectors } from '../models/models.reducers';
 import { UIActions } from '../ui/ui.reducers';
 import {
   MarketplaceActions,
@@ -41,8 +41,25 @@ const addToQuery = (
   }
 };
 
+const initEpic: AppEpic = (action$, _state$) =>
+  action$.pipe(
+    filter(MarketplaceActions.init.match),
+    switchMap(() => {
+      const query = parse(window.location.search.slice(1));
+      const workSpaceTab =
+        query[MarketplaceQueryParams.fromConversation] ||
+        query[MarketplaceQueryParams.tab] === MarketplaceTabs.MY_WORKSPACE;
+      return of(
+        MarketplaceActions.setSelectedTab(
+          workSpaceTab ? MarketplaceTabs.MY_WORKSPACE : MarketplaceTabs.HOME,
+        ),
+      );
+    }),
+  );
+
 const setQueryParamsEpic: AppEpic = (action$, state$, { router }) =>
   action$.pipe(
+    filter(() => ModelsSelectors.selectIsModelsLoaded(state$.value)),
     filter(
       (action) =>
         MarketplaceActions.setSelectedTab.match(action) ||
@@ -168,7 +185,44 @@ const initQueryParamsEpic: AppEpic = (action$, state$) =>
     }),
   );
 
+const updateFiltersEpic: AppEpic = (action$, state$) =>
+  action$.pipe(
+    filter(
+      (action) =>
+        ModelsActions.deleteModels.match(action) ||
+        ModelsActions.updateModel.match(action),
+    ),
+    switchMap(() => {
+      const state = state$.value;
+
+      const existingTopics = ModelsSelectors.selectModelTopics(state);
+      const sourceTypes = MarketplaceSelectors.selectSourceTypes(state);
+      const filters = selectSelectedFilters(state);
+      const updatedFilters = { ...filters };
+      updatedFilters.Topics = filters.Topics.filter((topic) =>
+        existingTopics.includes(topic),
+      );
+      updatedFilters.Sources = filters.Sources.filter((source) =>
+        sourceTypes.includes(source as SourceType),
+      );
+      if (
+        updatedFilters.Topics.length !== filters.Topics.length ||
+        updatedFilters.Sources.length !== filters.Sources.length
+      ) {
+        return of(
+          MarketplaceActions.setState({
+            selectedFilters: updatedFilters,
+          }),
+        );
+      }
+
+      return EMPTY;
+    }),
+  );
+
 export const MarketplaceEpics = combineEpics(
+  initEpic,
   initQueryParamsEpic,
   setQueryParamsEpic,
+  updateFiltersEpic,
 );

apps/chat/src/store/marketplace/marketplace.reducers.ts

@@ -40,6 +40,7 @@ export const marketplaceSlice = createSlice({
   name: 'marketplace',
   initialState,
   reducers: {
+    init: () => initialState,
     initQueryParams: (state) => state,
     setState: (
       state,
@@ -62,9 +63,6 @@ export const marketplaceSlice = createSlice({
     setSelectedTab: (state, { payload }: PayloadAction<MarketplaceTabs>) => {
       state.selectedTab = payload;
     },
-    resetState: () => {
-      return initialState;
-    },
     setApplyModelStatus: (state, { payload }: PayloadAction<UploadStatus>) => {
       state.applyModelStatus = payload;
     },

apps/chat/src/store/settings/settings.epic.ts

@@ -25,6 +25,7 @@ import { AddonsActions } from '../addons/addons.reducers';
 import { AuthSelectors } from '../auth/auth.reducers';
 import { ConversationsActions } from '../conversations/conversations.reducers';
 import { FilesActions } from '../files/files.reducers';
+import { MarketplaceActions } from '../marketplace/marketplace.reducers';
 import { MigrationActions } from '../migration/migration.reducers';
 import { ModelsActions } from '../models/models.reducers';
 import { PromptsActions } from '../prompts/prompts.reducers';
@@ -48,6 +49,7 @@ const getInitActions = (page?: PageType): Observable<ActionInit>[] => {
         of(FilesActions.init()),
         of(PublicationActions.init()),
         of(ConversationsActions.initShare()),
+        of(MarketplaceActions.init()),
       ];
     case PageType.Chat:
     default: