Open
Conversation
Tejasri-Microsoft
requested review from
Avijit-Microsoft,
Prajwal-Microsoft,
Roopan-Microsoft,
Vinay-Microsoft,
aniaroramsft,
brittneek,
dgp10801,
nchandhi and
toherman-msft
as code owners
Tejasri-Microsoft
changed the title
Tejasri-Microsoft
changed the title
Tejasri-Microsoft
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the CKM-V2 frontend by extracting utilities out of configs/Utils.tsx, replacing the custom React context/reducer state with Redux Toolkit slices + thunks, and introducing a shared httpClient wrapper for API calls.
Changes:
- Introduces domain-specific utility modules (
jsonUtils,messageUtils,chartUtils,apiUtils,chatParsingUtils) with a barrel export and a deprecated shim inconfigs/Utils.tsx. - Migrates app state management from
AppProvider/AppReducerto Redux Toolkit (store, slices, selectors, typed hooks, async thunks). - Adds an interceptor-based
httpClientand refactorsapi.tsto use it; extracts chat API logic into hooks (useChatApi,useChatHistorySave,useAutoScroll, etc.).
Reviewed changes
Copilot reviewed 43 out of 49 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/App/src/utils/messageUtils.ts | Extracted UUID + conversation grouping utilities. |
| src/App/src/utils/jsonUtils.ts | Added safe JSON parse/stringify helpers. |
| src/App/src/utils/index.ts | Barrel re-exports for utils. |
| src/App/src/utils/chatParsingUtils.ts | Centralized streaming response parsing helpers. |
| src/App/src/utils/chartUtils.ts | Extracted chart config + layout helpers from old Utils. |
| src/App/src/utils/apiUtils.ts | Added retry/cache/throttle/debounce + error parsing utilities. |
| src/App/src/store/thunks/chatHistoryThunks.ts | Added async thunks for history CRUD operations. |
| src/App/src/store/store.ts | Configured Redux store + RootState/AppDispatch exports. |
| src/App/src/store/slices/dashboardsSlice.ts | Dashboard/filter/chart slice replacing context actions. |
| src/App/src/store/slices/citationSlice.ts | Citation panel state slice. |
| src/App/src/store/slices/chatSlice.ts | Chat message + streaming state slice. |
| src/App/src/store/slices/chatHistorySlice.ts | Conversation list + fetch state slice. |
| src/App/src/store/slices/appSlice.ts | App-level config + selected/generated conversation IDs slice. |
| src/App/src/store/selectors.ts | Added narrow selectors for component subscriptions. |
| src/App/src/store/hooks.ts | Added typed useAppDispatch/useAppSelector hooks. |
| src/App/src/state/useAppContext.tsx | Removed legacy context hook. |
| src/App/src/state/AppReducer.tsx | Removed legacy reducer implementation. |
| src/App/src/state/AppProvider.tsx | Removed legacy provider/context implementation. |
| src/App/src/state/ActionConstants.tsx | Removed legacy action constants. |
| src/App/src/logo.svg | Removed CRA default logo asset. |
| src/App/src/index.tsx | Switched root provider from AppProvider to Redux Provider. |
| src/App/src/hooks/useTextareaAutoResize.ts | Added textarea autoresize hook. |
| src/App/src/hooks/useDebounce.ts | Added generic debouncing hook. |
| src/App/src/hooks/useChatHistorySave.ts | Extracted “persist chat to DB” side-effect into a hook. |
| src/App/src/hooks/useChatApi.ts | Extracted/centralized chat + chart API streaming logic. |
| src/App/src/hooks/useAutoScroll.ts | Added scroll-to-bottom hook with sentinel ref. |
| src/App/src/hooks/index.ts | Barrel re-exports for hooks. |
| src/App/src/configs/Utils.tsx | Replaced implementation with deprecated re-export shim. |
| src/App/src/components/Citations/Citations.tsx | Migrated citations interactions from context to Redux. |
| src/App/src/components/Citations/AnswerParser.tsx | Simplified answer parsing (removed dead/legacy code). |
| src/App/src/components/CitationPanel/CitationPanel.tsx | Migrated close action to Redux; memoized markdown plugins. |
| src/App/src/components/ChatHistoryPanel/ChatHistoryPanel.tsx | Migrated history panel state reads to Redux selectors. |
| src/App/src/components/ChatHistoryListItemGroups/ChatHistoryListItemGroups.tsx | Migrated list grouping + fetching state to Redux. |
| src/App/src/components/ChatHistoryListItemCell/ChatHistoryListItemCell.tsx | Migrated delete/rename flows to thunks + Redux state. |
| src/App/src/components/ChatChart/ChatChart.tsx | Updated chart utils import path. |
| src/App/src/components/Chat/Chat.tsx | Major refactor: uses Redux + extracted hooks; removed inline API logic. |
| src/App/src/components/ChartFilter/ChartFilter.tsx | Migrated filters state to Redux; added debounced topic search. |
| src/App/src/components/Chart/Chart.tsx | Migrated fetch flags/data storage to Redux slice actions. |
| src/App/src/chartComponents/WordCloudChart.tsx | Updated chart utils imports. |
| src/App/src/chartComponents/TopicTable.tsx | Updated chart utils imports. |
| src/App/src/api/httpClient.ts | Added shared fetch wrapper with interceptors, timeout, retries. |
| src/App/src/api/api.ts | Refactored API calls to use httpClient + shared error response factory. |
| src/App/src/Assets/Reset-icon.svg | Removed reset icon asset. |
| src/App/src/App.tsx | Migrated top-level config + history actions to Redux. |
| src/App/package.json | Added Redux deps; minor dependency adjustments. |
| src/App/package-lock.json | Lockfile updates for new deps. |
Files not reviewed (1)
- src/App/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+64
to
+81
| let lastError: unknown; | ||
|
|
||
| for (let attempt = 0; attempt <= retries; attempt++) { | ||
| try { | ||
| return await fn(); | ||
| } catch (error) { | ||
| lastError = error; | ||
| if (attempt === retries || !shouldRetry(error, attempt)) break; | ||
|
|
||
| // Exponential delay + small random jitter (0 – 20 % of delay) | ||
| const delay = baseDelay * Math.pow(factor, attempt); | ||
| const jitter = delay * 0.2 * Math.random(); | ||
| await new Promise((r) => setTimeout(r, delay + jitter)); | ||
| } | ||
| } | ||
|
|
||
| throw lastError; | ||
| } |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the CKM-V2 UI by migrating state management from a custom React context/reducer to Redux Toolkit, extracting utilities into domain-focused modules, and introducing a shared HTTP client + reusable hooks to reduce duplication.
Changes:
- Replaced
AppProvider/custom reducer pattern with Redux Toolkit store, slices, selectors, and async thunks. - Split the former monolithic
configs/Utils.tsxintosrc/utils/*and added new parsing helpers for streaming chat responses. - Centralized API calls via a singleton
httpClientwith interceptors, timeouts, and optional retry behavior.
Reviewed changes
Copilot reviewed 43 out of 49 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/App/src/utils/messageUtils.ts | New message/history utilities (UUID + history bucketing). |
| src/App/src/utils/jsonUtils.ts | Adds safe JSON parse/stringify helpers. |
| src/App/src/utils/index.ts | New barrel exports for src/utils. |
| src/App/src/utils/chatParsingUtils.ts | Centralizes streaming answer/citations + chart parsing logic. |
| src/App/src/utils/chartUtils.ts | Extracts chart constants and layout helpers from old Utils. |
| src/App/src/utils/apiUtils.ts | Adds retry/cache/throttle/debounce + error parsing utilities. |
| src/App/src/store/thunks/chatHistoryThunks.ts | Introduces async thunks for chat history operations. |
| src/App/src/store/store.ts | Configures Redux store and exports RootState/AppDispatch types. |
| src/App/src/store/slices/dashboardsSlice.ts | New dashboards slice replacing reducer cases. |
| src/App/src/store/slices/citationSlice.ts | New citation slice replacing reducer cases. |
| src/App/src/store/slices/chatSlice.ts | New chat slice and extraReducers for history thunks. |
| src/App/src/store/slices/chatHistorySlice.ts | New chatHistory slice and thunk lifecycle handling. |
| src/App/src/store/slices/appSlice.ts | New app slice for config, IDs, selection, spinner. |
| src/App/src/store/selectors.ts | Adds narrow selectors for memoization-friendly access. |
| src/App/src/store/hooks.ts | Adds typed useAppDispatch/useAppSelector hooks. |
| src/App/src/state/useAppContext.tsx | Removes context hook (migration to Redux). |
| src/App/src/state/AppReducer.tsx | Removes legacy reducer (migration to Redux). |
| src/App/src/state/AppProvider.tsx | Removes legacy context provider (migration to Redux). |
| src/App/src/state/ActionConstants.tsx | Removes legacy action constants (migration to Redux). |
| src/App/src/logo.svg | Removes CRA default logo asset. |
| src/App/src/index.tsx | Wraps app with Redux <Provider store={store}>. |
| src/App/src/hooks/useTextareaAutoResize.ts | New hook for textarea auto-resize behavior. |
| src/App/src/hooks/useDebounce.ts | New hook for debounced values (used in filters). |
| src/App/src/hooks/useChatHistorySave.ts | Extracts “save chat history” side-effect into a hook. |
| src/App/src/hooks/useChatApi.ts | Extracts chat API streaming + chart flows into a hook. |
| src/App/src/hooks/useAutoScroll.ts | New hook for scroll-to-bottom behavior. |
| src/App/src/hooks/index.ts | Barrel exports for hooks. |
| src/App/src/configs/Utils.tsx | Deprecated shim re-exporting from new src/utils/*. |
| src/App/src/components/Citations/Citations.tsx | Migrates citation interactions from context to Redux. |
| src/App/src/components/Citations/AnswerParser.tsx | Simplifies answer parsing (returns answer + citations). |
| src/App/src/components/CitationPanel/CitationPanel.tsx | Migrates citation panel close action to Redux + memoizes plugins. |
| src/App/src/components/ChatHistoryPanel/ChatHistoryPanel.tsx | Migrates state reads to Redux selectors. |
| src/App/src/components/ChatHistoryListItemGroups/ChatHistoryListItemGroups.tsx | Uses Redux selectors + new segregateItems util. |
| src/App/src/components/ChatHistoryListItemCell/ChatHistoryListItemCell.tsx | Migrates delete/rename flows to thunks + Redux state. |
| src/App/src/components/ChatChart/ChatChart.tsx | Updates chart config import to new chartUtils. |
| src/App/src/components/Chat/Chat.tsx | Refactors monolithic chat logic into hooks + Redux usage. |
| src/App/src/components/ChartFilter/ChartFilter.tsx | Migrates filters to Redux and debounces topic search. |
| src/App/src/components/Chart/Chart.tsx | Migrates dashboards state/actions to Redux slice APIs. |
| src/App/src/chartComponents/WordCloudChart.tsx | Updates chart helper imports to new chartUtils. |
| src/App/src/chartComponents/TopicTable.tsx | Updates color imports to new chartUtils. |
| src/App/src/api/httpClient.ts | Adds shared HTTP client with interceptors, timeout, retry. |
| src/App/src/api/api.ts | Refactors API functions to use httpClient + helpers. |
| src/App/src/Assets/Reset-icon.svg | Removes unused reset icon asset. |
| src/App/src/App.tsx | Migrates app bootstrapping/data loading to Redux thunks/slices. |
| src/App/package.json | Adds RTK + react-redux; bumps lodash-es patch. |
| src/App/package-lock.json | Locks new Redux dependencies. |
Files not reviewed (1)
- src/App/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
src/App/src/components/Chat/Chat.tsx
Outdated
Comment on lines
+228
to
+230
| ? Array.isArray(msg.citations) && typeof msg.citations[0] === "string" | ||
| ? parseCitationFromMessage(msg.citations) | ||
| : msg.citations |
Comment on lines
+86
to
+91
| export function parseChartContent(runningText: string): ChartParseResult { | ||
| const splitRunningText = runningText.split("}{"); | ||
| const parsedChartResponse = safeParse<any>( | ||
| "{" + splitRunningText[splitRunningText.length - 1], | ||
| null | ||
| ); |
src/App/src/api/api.ts
Outdated
Comment on lines
+63
to
+66
| // /.auth/me is an absolute path outside the API base URL | ||
| const response = await httpClient.request<Response>("/.auth/me", { | ||
| rawResponse: true, | ||
| }); |
Comment on lines
+61
to
+66
| // Sort descending by updatedAt | ||
| items.sort( | ||
| (a, b) => | ||
| new Date(b.updatedAt ?? new Date()).getTime() - | ||
| new Date(a.updatedAt ?? new Date()).getTime() | ||
| ); |
Comment on lines
+66
to
+69
| const parseCitationFromMessage = useCallback((message: any) => { | ||
| const toolMessage = safeParse<{ citations?: string[] }>("{" + message, {}); | ||
| return toolMessage?.citations ?? []; | ||
| }, []); |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Tejasri-Microsoft
temporarily deployed
to
production
GitHub Actions
Inactive
|
@Tejasri-Microsoft please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
Contributor License AgreementContribution License AgreementThis Contribution License Agreement (“Agreement”) is agreed to by the party signing below (“You”),
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Purpose
This pull request introduces Redux Toolkit and react-redux into the project and refactors state management in the main
Dashboardcomponent to use Redux instead of the previous context-based approach. It also updates dependencies and cleans up the API layer to use a centralized HTTP client. The most significant changes are grouped below:State Management Refactor:
Migrated the
Dashboardcomponent inApp.tsxfrom using custom context (useAppContext) and manual dispatches to using Redux state and dispatch hooks (useAppDispatch,useAppSelector). All state updates and side effects (such as fetching chat history, loading conversations, and clearing chat history) are now handled via Redux slices and thunks. [1] [2] [3] [4] [5] [6] [7] [8]Replaced direct API calls and manual state updates in
Dashboardwith Redux async thunks (fetchChatHistory,loadConversation,clearAllChatHistory) and Redux actions (saveConfig,updateCitation). [1] [2] [3] [4] [5]Dependency and Package Updates:
Added
@reduxjs/toolkitandreact-reduxas dependencies in bothpackage.jsonandpackage-lock.json, along with their peer and sub-dependencies (redux,redux-thunk,reselect, etc.). [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]Updated
lodash-esto version^4.17.23.API Layer Improvements:
api.tsto use a centralizedhttpClientfor HTTP requests, improving error handling and consistency across API calls. [1] [2]General Code Cleanup:
App.tsx, such as old context-based code and commented-out sections.These changes lay the groundwork for more scalable and maintainable state management using Redux throughout the application.
Does this introduce a breaking change?
Golden Path Validation
Deployment Validation