feat(chat): implement direct Application links (issue #2950)

apps/chat/src/components/Layout.tsx

@@ -55,7 +55,7 @@ export default function Layout({
   );
 
   const shouldOverlayLogin = isOverlay && shouldLogin;
-  const handleStartRedirecting = useCallback(() => setLoading(true), []);
+  const handleStartRedirecting = useCallback(() => setLoading(false), []); // TODO: how show loader for page switching?
   const handleStopRedirecting = useCallback(() => setLoading(false), []);
 
   // EFFECTS  --------------------------------------------

apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationCopyLink.tsx

@@ -24,7 +24,7 @@ const ApplicationCopyLink: React.FC<ApplicationCopyLinkProps> = ({
   const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const link = useMemo(
     () =>
-      `${window.location.origin}/marketplace?${MarketplaceQueryParams.id}=${entity.reference}`,
+      `${window.location.origin}/marketplace?${MarketplaceQueryParams.model}=${entity.reference}`,
     [entity.reference],
   );
   const handleCopy = useCallback(

apps/chat/src/constants/marketplace.ts

@@ -1,6 +1,6 @@
 export enum MarketplaceQueryParams {
   fromConversation = 'fromConversation',
-  id = 'id',
+  model = 'model',
 }
 
 export enum FilterTypes {

apps/chat/src/store/index.ts

@@ -31,6 +31,7 @@ import { FilesEpics } from './files/files.epics';
 import { filesSlice } from './files/files.reducers';
 import { ImportExportEpics } from './import-export/importExport.epics';
 import { importExportSlice } from './import-export/importExport.reducers';
+import { MarketplaceEpics } from './marketplace/marketplace.epics';
 import { marketplaceSlice } from './marketplace/marketplace.reducers';
 import { MigrationEpics } from './migration/migration.epics';
 import { migrationSlice } from './migration/migration.reducers';
@@ -68,6 +69,7 @@ export const rootEpic = combineEpics(
   ApplicationEpics,
   CodeEditorEpics,
   ChatEpics,
+  MarketplaceEpics,
 );
 
 const reducer = combineReducers({

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

@@ -0,0 +1,67 @@
+import { EMPTY, filter, of, switchMap } from 'rxjs';
+
+import { combineEpics } from 'redux-observable';
+
+import { AppEpic } from '@/src/types/store';
+
+import { MarketplaceQueryParams } from '@/src/constants/marketplace';
+
+import { ModelsSelectors } from '../models/models.reducers';
+import { UIActions } from '../ui/ui.reducers';
+import { MarketplaceActions } from './marketplace.reducers';
+
+const setDetailsModelEpic: AppEpic = (action$, _, { router }) =>
+  action$.pipe(
+    filter(MarketplaceActions.setDetailsModel.match),
+    switchMap(({ payload }) => {
+      const reference = payload?.reference;
+      const query = router.query;
+      if (reference) {
+        router.push({
+          query: {
+            ...query,
+            [MarketplaceQueryParams.model]: reference,
+          },
+        });
+      } else {
+        delete query[MarketplaceQueryParams.model];
+        router.push({
+          query,
+        });
+      }
+      return EMPTY;
+    }),
+  );
+
+const initQueryParamsEpic: AppEpic = (action$, state$, { router }) =>
+  action$.pipe(
+    filter(MarketplaceActions.initQueryParams.match),
+    switchMap(() => {
+      const query = router.query;
+      const modelReference = query[MarketplaceQueryParams.model] as
+        | string
+        | undefined;
+      const modelsMap = ModelsSelectors.selectModelsMap(state$.value);
+      const model = modelReference ? modelsMap[modelReference] : undefined;
+
+      if (modelReference) {
+        if (model) {
+          return of(
+            MarketplaceActions.setDetailsModel({
+              reference: modelReference,
+              isSuggested: false,
+            }),
+          );
+        } else {
+          return of(UIActions.showErrorToast('Agent by this link not found'));
+        }
+      }
+
+      return EMPTY;
+    }),
+  );
+
+export const MarketplaceEpics = combineEpics(
+  initQueryParamsEpic,
+  setDetailsModelEpic,
+);

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

@@ -41,6 +41,7 @@ export const marketplaceSlice = createSlice({
   name: 'marketplace',
   initialState,
   reducers: {
+    initQueryParams: (state) => state,
     setSelectedFilters: (
       state,
       { payload }: PayloadAction<{ filterType: FilterTypes; value: string }>,

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

@@ -38,6 +38,7 @@ import { ApplicationActions } from '@/src/store/application/application.reducers
 
 import { DeleteType } from '@/src/constants/marketplace';
 
+import { MarketplaceActions } from '../marketplace/marketplace.reducers';
 import { PublicationActions } from '../publication/publication.reducers';
 import {
   SettingsActions,
@@ -156,6 +157,7 @@ const getModelsEpic: AppEpic = (action$, state$) =>
                 featureType: FeatureType.Application,
               }),
             ),
+            of(MarketplaceActions.initQueryParams()),
             ...continueUpdateActions,
           );
         }),