Use separate slice for embed configs

Author: ppsreejith

web/src/app/index.tsx

@@ -6,8 +6,9 @@ import ChakraContext from '../components/common/ChakraContext';
 import App from '../components/common/App';
 import { persistStore } from 'redux-persist';
 import { RootState, store } from '../state/store';
-import { setAppRecording, setIframeInfo, updateIsAppOpen, setEmbedConfigs } from '../state/settings/reducer';
+import { setAppRecording, setIframeInfo, updateIsAppOpen } from '../state/settings/reducer';
 import { dispatch } from '../state/dispatch';
+import { setEmbedConfigs } from '../state/configs/reducer';
 import { log, queryDOMMap, setMinusxMode, toggleMinusXRoot, queryURL, forwardToTab, gdocRead, gdocWrite, gdocImage, gdocReadSelected, captureVisibleTab, getPendingMessage, gsheetSetUserToken} from './rpc';
 import _, { get, isEqual, pick, set } from 'lodash';
 import { configs } from '../constants';

web/src/components/common/Markdown.tsx

@@ -12,7 +12,7 @@ import { getApp } from '../../helpers/app'
 import { processSQLWithCtesOrModels } from '../../helpers/catalogAsModels'
 import { getAllTemplateTagsInQuery, replaceLLMFriendlyIdentifiersInSqlWithModels } from 'apps'
 import type { MetabaseModel } from 'apps/types'
-import type { EmbedConfigs } from '../../state/settings/reducer'
+import { type EmbedConfigs } from '../../state/configs/reducer'
 import { Badge } from "@chakra-ui/react";
 import { CodeBlock } from './CodeBlock';
 import { BiChevronDown, BiChevronRight } from 'react-icons/bi';
@@ -239,9 +239,9 @@ export function Markdown({content, messageIndex}: {content: string, messageIndex
   const settings = useSelector((state: RootState) => ({
     selectedCatalog: state.settings.selectedCatalog,
     availableCatalogs: state.settings.availableCatalogs,
-    modelsMode: state.settings.modelsMode,
-    embed_configs: state.settings.embed_configs
+    modelsMode: state.settings.modelsMode
   }));
+  const embedConfigs = useSelector((state: RootState) => state.configs.embed);
   const mxModels = useSelector((state: RootState) => state.cache.mxModels);
 
   // Process template variables like {{MX_LAST_SQL_URL}}
@@ -261,7 +261,7 @@ export function Markdown({content, messageIndex}: {content: string, messageIndex
           // Get current database ID from app state
           const databaseId = toolContext?.dbId || null;
 
-          const questionURL = generateMetabaseQuestionURL(lastSQL, databaseId, settings.embed_configs);
+          const questionURL = generateMetabaseQuestionURL(lastSQL, databaseId, embedConfigs);
 
           return renderString(content, {
             'MX_LAST_SQL_URL': `\n\n --- \n\n Continue your analysis [here](${questionURL})`

web/src/state/configs/reducer.ts

@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+
+export interface EmbedConfigs {
+  embed_host?: string
+}
+
+interface ConfigsState {
+  embed: EmbedConfigs
+}
+
+const initialState: ConfigsState = {
+  embed: {}
+}
+
+export const configsSlice = createSlice({
+  name: 'configs',
+  initialState,
+  reducers: {
+    setEmbedConfigs: (state, action: PayloadAction<EmbedConfigs>) => {
+      state.embed = action.payload
+    },
+    clearEmbedConfigs: (state) => {
+      state.embed = {}
+    }
+  },
+})
+
+export const { setEmbedConfigs, clearEmbedConfigs } = configsSlice.actions
+
+export default configsSlice.reducer

web/src/state/settings/reducer.ts

@@ -99,9 +99,6 @@ export interface SaveCatalogPayload extends Omit<ContextCatalog, 'allowWrite'> {
   currentUserId: string
 }
 
-export interface EmbedConfigs {
-  embed_host?: string
-}
 
 interface Settings {
   isLocal: boolean,
@@ -140,7 +137,6 @@ interface Settings {
   manuallyLimitContext: boolean
   useV2States: boolean
   currentEmail?: string
-  embed_configs: EmbedConfigs
 }
 
 const initialState: Settings = {
@@ -182,7 +178,6 @@ const initialState: Settings = {
   metadataProcessingCache: {},
   manuallyLimitContext: false,
   useV2States: true,
-  embed_configs: {}
 }
 
 export const settingsSlice = createSlice({
@@ -417,9 +412,6 @@ export const settingsSlice = createSlice({
     setUseV2States: (state, action: PayloadAction<boolean>) => {
       state.useV2States = action.payload
     },
-    setEmbedConfigs: (state, action: PayloadAction<EmbedConfigs>) => {
-      state.embed_configs = action.payload
-    }
   },
 })
 
@@ -431,7 +423,7 @@ export const { updateIsLocal, updateUploadLogs,
   setIframeInfo, setConfirmChanges, setDemoMode, setAppRecording, setAiRules,
   applyTableDiff, setSelectedModels, setDRMode, setAnalystMode, setSelectedCatalog, saveCatalog, deleteCatalog, setMemberships,
   setGroupsEnabled, resetDefaultTablesDB, setModelsMode, setViewAllCatalogs, setEnableHighlightHelpers, setUseMemory, addMemory, setCustomCSS, setEnableStyleCustomization, setEnableUserDebugTools, setEnableReviews, setMetadataHash, setMetadataProcessingCache, clearMetadataProcessingCache,
-  updateManualContextSelection, setUseV2States, setCurrentEmail, setEmbedConfigs
+  updateManualContextSelection, setUseV2States, setCurrentEmail
 } = settingsSlice.actions
 
 export default settingsSlice.reducer

web/src/state/store.ts

@@ -14,6 +14,7 @@ import semanticLayer from './semantic-layer/reducer'
 import { catalogsListener } from './settings/availableCatalogsListener'
 import cache from './cache/reducer'
 import notifications from './notifications/reducer'
+import configsReducer from './configs/reducer'
 import { userStateApi } from '../app/api/userStateApi'
 import { get } from 'lodash'
 import { getParsedIframeInfo } from '../helpers/origin'
@@ -27,6 +28,7 @@ const combineReducerInput = {
   semanticLayer,
   cache,
   notifications,
+  configs: configsReducer,
   [userStateApi.reducerPath]: userStateApi.reducer
 }
 
@@ -38,7 +40,8 @@ const rootReducer = (state: any, action: any) => {
   switch (action.type) {
     case 'reset':
       updatedState = {
-        auth: state.auth
+        auth: state.auth,
+        configs: state.configs
       };
       break;