Merge branch 'development' into feat/overlay-events-tests

apps/chat/src/components/Chat/ChatMessage/MessageSchema/FormSchema.tsx

@@ -75,6 +75,7 @@ export const ButtonsProperty = ({
       >
         {options?.map((option) => (
           <button
+            data-no-context-menu
             key={option.const}
             onClick={() => handleClick(option)}
             className={classNames('chat-button', buttonClassName, {
@@ -189,10 +190,7 @@ export const FormSchema = memo(function FormSchema({
   buttonClassName,
 }: FormSchemaProps) {
   return (
-    <div
-      data-no-context-menu
-      className={classNames('flex flex-col gap-2', wrapperClassName)}
-    >
+    <div className={classNames('flex flex-col gap-2', wrapperClassName)}>
       {Object.entries(schema.properties).map(([name, property]) => (
         <PropertyRenderer
           property={property}

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/components/Common/ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import { useId, useRef } from 'react';
+import { MouseEvent, useCallback, useId, useRef } from 'react';
 
 import { ModalState } from '@/src/types/modal';
 
@@ -29,6 +29,22 @@ export const ConfirmDialog = ({
 
   const descriptionId = useId();
 
+  const handleConfirm = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      onClose(true);
+    },
+    [onClose],
+  );
+
+  const handleCancel = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      onClose(false);
+    },
+    [onClose],
+  );
+
   return (
     <Modal
       portalId="theme-main"
@@ -58,20 +74,20 @@ export const ConfirmDialog = ({
         <div className="flex w-full items-center justify-end gap-3">
           {cancelLabel && (
             <button
+              data-no-context-menu
               className="button button-secondary"
-              onClick={() => {
-                onClose(false);
-              }}
+              onClick={handleCancel}
               data-qa="cancel-dialog"
             >
               {cancelLabel}
             </button>
           )}
           <button
+            data-no-context-menu
             ref={confirmLabelRef}
             autoFocus
             className="button button-primary"
-            onClick={() => onClose(true)}
+            onClick={handleConfirm}
             data-qa="confirm"
           >
             {confirmLabel}

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: