diff --git a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationDetails.tsx b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationDetails.tsx index 553919982a..d8948dcc99 100644 --- a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationDetails.tsx +++ b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationDetails.tsx @@ -32,7 +32,7 @@ interface Props { onBookmarkClick: (entity: DialAIEntityModel) => void; } -const ApplicationDetails = ({ +export const ApplicationDetails = ({ entity, isMobileView, allEntities, @@ -96,5 +96,3 @@ const ApplicationDetails = ({ ); }; - -export default ApplicationDetails; diff --git a/apps/chat/src/components/Marketplace/TabRenderer.tsx b/apps/chat/src/components/Marketplace/TabRenderer.tsx index 89565f38e8..060f63cfa6 100644 --- a/apps/chat/src/components/Marketplace/TabRenderer.tsx +++ b/apps/chat/src/components/Marketplace/TabRenderer.tsx @@ -21,7 +21,10 @@ import { Translation } from '@/src/types/translation'; import { ApplicationActions } from '@/src/store/application/application.reducers'; import { useAppDispatch, useAppSelector } from '@/src/store/hooks'; -import { MarketplaceSelectors } from '@/src/store/marketplace/marketplace.reducers'; +import { + MarketplaceActions, + MarketplaceSelectors, +} from '@/src/store/marketplace/marketplace.reducers'; import { ModelsActions, ModelsSelectors, @@ -36,7 +39,7 @@ import { import { PublishModal } from '@/src/components/Chat/Publish/PublishWizard'; import { ApplicationWizard } from '@/src/components/Common/ApplicationWizard/ApplicationWizard'; import { ConfirmDialog } from '@/src/components/Common/ConfirmDialog'; -import ApplicationDetails from '@/src/components/Marketplace/ApplicationDetails/ApplicationDetails'; +import { ApplicationDetails } from '@/src/components/Marketplace/ApplicationDetails/ApplicationDetails'; import { CardsList } from '@/src/components/Marketplace/CardsList'; import { MarketplaceBanner } from '@/src/components/Marketplace/MarketplaceBanner'; import { SearchHeader } from '@/src/components/Marketplace/SearchHeader'; @@ -223,6 +226,8 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => { MarketplaceSelectors.selectTrimmedSearchTerm, ); const allModels = useAppSelector(ModelsSelectors.selectModels); + const detailsModel = useAppSelector(MarketplaceSelectors.selectDetailsModel); + const modelsMap = useAppSelector(ModelsSelectors.selectModelsMap); const [suggestedResults, setSuggestedResults] = useState( [], @@ -240,10 +245,6 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => { entity: ShareEntity & { iconUrl?: string }; action: PublishActions; }>(); - const [detailsModel, setDetailsModel] = useState<{ - entity: DialAIEntityModel; - isSuggested?: boolean; - }>(); const isSomeFilterNotEmpty = searchTerm.length || @@ -343,7 +344,7 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => { dispatch(ApplicationActions.delete(deleteModel.entity)); } - setDetailsModel(undefined); + dispatch(MarketplaceActions.setDetailsModel(undefined)); } setDeleteModel(undefined); @@ -375,22 +376,29 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => { ); const handleSetDetailsModel = useCallback( - (entity: DialAIEntityModel, isSuggested?: boolean) => { - setDetailsModel({ - entity, - isSuggested: !!isSuggested, - }); + (model: DialAIEntityModel, isSuggested?: boolean) => { + dispatch( + MarketplaceActions.setDetailsModel({ + reference: model.reference, + isSuggested: !!isSuggested, + }), + ); }, - [setDetailsModel], + [dispatch], ); const handleSetVersion = useCallback( - (entity: DialAIEntityModel) => { + (model: DialAIEntityModel) => { if (detailsModel) { - setDetailsModel({ ...detailsModel, entity }); + dispatch( + MarketplaceActions.setDetailsModel({ + ...detailsModel, + reference: model.reference, + }), + ); } }, - [setDetailsModel, detailsModel], + [detailsModel, dispatch], ); const handleCloseApplicationDialog = useCallback( @@ -399,8 +407,8 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => { ); const handleCloseDetailsDialog = useCallback( - () => setDetailsModel(undefined), - [setDetailsModel], + () => dispatch(MarketplaceActions.setDetailsModel(undefined)), + [dispatch], ); const handleBookmarkClick = useCallback( @@ -419,6 +427,8 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => { [dispatch, installedModelIds], ); + const currentDetailsModel = detailsModel && modelsMap[detailsModel.reference]; + return ( <>
@@ -460,11 +470,11 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => { cancelLabel={t('Cancel')} /> )} - {detailsModel && ( + {currentDetailsModel && ( overwrite: false, }) .pipe( - switchMap(() => - of(ApplicationActions.edit(updatedCustomApplication)), - ), + switchMap(() => { + return of(ApplicationActions.edit(updatedCustomApplication)); + }), catchError((err) => { console.error('Failed to update application:', err); return of( diff --git a/apps/chat/src/store/marketplace/marketplace.reducers.ts b/apps/chat/src/store/marketplace/marketplace.reducers.ts index b96b479b68..7eb702ce92 100644 --- a/apps/chat/src/store/marketplace/marketplace.reducers.ts +++ b/apps/chat/src/store/marketplace/marketplace.reducers.ts @@ -18,8 +18,8 @@ export interface MarketplaceState { }; searchTerm: string; selectedTab: MarketplaceTabs; - applyModelStatus: UploadStatus; + detailsModel: { reference: string; isSuggested: boolean } | undefined; } const DEFAULT_FILTERS = { @@ -34,6 +34,7 @@ const initialState: MarketplaceState = { searchTerm: '', selectedTab: MarketplaceTabs.HOME, applyModelStatus: UploadStatus.UNINITIALIZED, + detailsModel: undefined, }; export const marketplaceSlice = createSlice({ @@ -62,6 +63,14 @@ export const marketplaceSlice = createSlice({ setApplyModelStatus: (state, { payload }: PayloadAction) => { state.applyModelStatus = payload; }, + setDetailsModel: ( + state, + { + payload, + }: PayloadAction<{ reference: string; isSuggested: boolean } | undefined>, + ) => { + state.detailsModel = payload; + }, }, }); diff --git a/apps/chat/src/store/marketplace/marketplace.selectors.ts b/apps/chat/src/store/marketplace/marketplace.selectors.ts index 1810e77040..ec6651aa8f 100644 --- a/apps/chat/src/store/marketplace/marketplace.selectors.ts +++ b/apps/chat/src/store/marketplace/marketplace.selectors.ts @@ -38,3 +38,8 @@ export const selectIsApplyingModel = createSelector( applyModelStatus !== UploadStatus.UNINITIALIZED && applyModelStatus !== UploadStatus.FAILED, ); + +export const selectDetailsModel = createSelector( + [rootSelector], + (state) => state.detailsModel, +);