refactor: UI refactoring by Shubhangi-Microsoft · Pull Request #768 · microsoft/content-generation-solution-accelerator

Shubhangi-Microsoft · 2026-03-13T10:31:51Z

This pull request updates the frontend dependencies for the project, primarily to introduce Redux state management capabilities. The most important changes are the addition of Redux-related libraries and their dependencies, as well as updates to package metadata to improve compatibility and peer dependency handling.

Redux integration

Added @reduxjs/toolkit and react-redux to the main dependencies in package.json and package-lock.json, enabling Redux-based state management in the frontend. [1] [2]
Added supporting Redux libraries: redux, redux-thunk, and reselect, as well as immer for immutable state updates. [1] [2] [3] [4]

Type and utility dependencies

Added @types/use-sync-external-store and @standard-schema/spec/@standard-schema/utils as dependencies required by the Redux ecosystem. [1] [2]

Peer dependency and metadata updates

Added "peer": true flags to multiple dependencies in package-lock.json, improving compatibility and signaling proper peer dependency relationships for packages like React, React DOM, and others. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16]

These changes collectively prepare the frontend for Redux-based state management and improve dependency handling for future development.## Purpose

...

Does this introduce a breaking change?

Yes
No

Golden Path Validation

I have tested the primary workflows (the "golden path") to ensure they function correctly without errors.

Deployment Validation

I have validated the deployment process successfully and all services are running as expected with this change.

What to Check

Verify that the following are valid

...

Other Information

Task 1: Centralize state with Redux Toolkit (4 slices, typed hooks, selectors) Task 2: Centralized HTTP client with interceptors (httpClient singleton) Task 3: Extract 18 reusable components from monolithic files Task 4: Wrap all components with React.memo + displayName, useCallback throughout Task 5: Extract business logic into 7 custom hooks (useChatOrchestrator, etc.) - App.tsx reduced from ~787 to ~85 lines - Zero raw fetch calls (except /.auth/me) - All console.log downgraded to console.debug - Build: 0 TypeScript errors

New utility modules in utils/: - messageUtils.ts: createMessage() factory, formatContentForClipboard() - contentParsing.ts: parseTextContent(), resolveImageUrl(), buildGeneratedContent() - sseParser.ts: parseSSEStream() — eliminates duplicated SSE decode loop - generationStages.ts: getGenerationStage() — pure progress-stage mapper - briefFields.ts: BRIEF_FIELD_LABELS, BRIEF_DISPLAY_ORDER, BRIEF_FIELD_KEYS - stringUtils.ts: escapeRegex(), createNameSwapper(), matchesAnyKeyword() - apiUtils.ts: retryRequest (exponential backoff), RequestCache, throttle - index.ts: barrel export for all utils Deduplicated code: - msg() helper was identical in 2 hooks → createMessage() in messageUtils - SSE stream parser was identical in 2 API functions → parseSSEStream() - GeneratedContent parsing was near-identical in 3 hooks → buildGeneratedContent() - Brief field constants duplicated in 2 components → shared briefFields - Keyword matching pattern repeated 3x → matchesAnyKeyword() Internal helpers marked non-exported: - rewriteBlobUrl() in contentParsing.ts - defaultShouldRetry(), sleep() in apiUtils.ts - plainDownload() in downloadImage.ts (already was) Build: 0 TypeScript errors

…hten utility exports

…ts and memoization

…lidation, hooks barrel

…mports

…ivial useMemo

…ontent, resolveImageUrl)

- Route fetch('/.auth/me') through platformClient (HttpClient with empty baseUrl) - Un-export parseTextContent/resolveImageUrl (module-internal only) - DRY userId || 'anonymous' x6 into normalizeUserId() helper - Remove redundant duplicate prompt field from WelcomeCard suggestions

…_LABELS

…dex.ts)

Copilot

Pull request overview

This pull request refactors the frontend to introduce Redux-based state management and extracts duplicated UI / utility logic into reusable modules, alongside dependency updates to support Redux Toolkit and React-Redux.

Changes:

Add Redux Toolkit store, slices, selectors, and typed hooks; wire the store into main.tsx.
Extract duplicated utilities/hooks/components (SSE parsing, message factory, brief field metadata, image download, compliance UI, etc.) into shared modules.
Update frontend dependencies (@reduxjs/toolkit, react-redux) and regenerate package-lock.json.

Reviewed changes

Copilot reviewed 72 out of 75 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/app/frontend/package.json	Adds Redux dependencies needed for new store architecture.
src/app/frontend/package-lock.json	Locks Redux ecosystem dependencies and peer metadata updates.
src/app/frontend/src/store/*	Introduces Redux store setup, slices, selectors, and typed hooks.
src/app/frontend/src/main.tsx	Wraps the app in `react-redux` Provider.
src/app/frontend/src/api/httpClient.ts	Adds a centralized HTTP client with interceptors/timeouts.
src/app/frontend/src/api/index.ts	Refactors API surface to multiple endpoints + SSE helpers.
src/app/frontend/src/hooks/*	New hooks for orchestration, generation, clipboard, resize, scroll.
src/app/frontend/src/utils/*	New shared utilities for parsing, errors, stages, SSE, etc.
src/app/frontend/src/components/*	Refactors UI into smaller memoized components and shared sections.
src/app/frontend/src/types/index.ts	Removes unused interfaces (Conversation, BrandGuidelines).
content-gen/src/app/frontend/src/**	Duplicates of the same frontend changes under `content-gen/`.

Files not reviewed (1)

src/app/frontend/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.

- httpClient: replace require() with ESM dynamic import() for store access - useConversationActions: pass explicit undefined to resetChat() - parseBrief: route to /chat endpoint (no /brief/parse backend route) - streamChat: use httpClient.post + yield instead of SSE (backend returns JSON) - selectProducts: route to /chat endpoint (no /products/select backend route) - streamRegenerateImage: use /chat + polling instead of non-existent /regenerate SSE - remove unused readSSEResponse helper and parseSSEStream import

… frontend-server to server

…dir before copy

…restructure)

Copilot

Pull request overview

This PR restructures and refactors the frontend into src/App, introduces Redux Toolkit–based state management, and adds a Node/Express static + proxy server for production deployments while updating build/deploy automation to match the new layout.

Changes:

Added Redux store, slices, selectors, and typed hooks; wired the app with react-redux Provider.
Refactored UI into reusable components/hooks/utils and centralized shared helpers (parsing, SSE/polling progress, error helpers, brief metadata, etc.).
Updated Docker/build/deploy tooling, docs, and CI paths to target the new src/App + src/App/server structure.

Reviewed changes

Copilot reviewed 96 out of 111 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/App/WebApp.Dockerfile	Updates Docker multi-stage build to build the Vite app and run the new Node proxy server.
src/App/vite.config.ts	Updates Vite build output directory and keeps local dev proxy configuration.
src/App/tsconfig.node.json	Adds TS config for Vite config typing/build tooling.
src/App/tsconfig.json	Adds strict TS config with path aliases and project references.
src/App/src/vite-env.d.ts	Adds asset module typings for images/SVGs used by components.
src/App/src/utils/stringUtils.ts	Extracts reusable string helpers (keyword matching, name swapping).
src/App/src/utils/sseParser.ts	Adds reusable SSE parsing helper (even if current API mostly polls).
src/App/src/utils/messageUtils.ts	Centralizes ChatMessage creation/error-message helpers.
src/App/src/utils/index.ts	Adds utils barrel export and shared UI constants.
src/App/src/utils/generationStages.ts	Adds polling progress-stage mapping used by generation flows.
src/App/src/utils/downloadImage.ts	Implements image download with optional banner compositing.
src/App/src/utils/contentParsing.ts	Centralizes raw API → `GeneratedContent` parsing and blob URL rewriting.
src/App/src/utils/contentErrors.ts	Adds content-filter detection and user-friendly error messages.
src/App/src/utils/briefFields.ts	Centralizes brief-field labels/order metadata shared by brief UIs.
src/App/src/types/index.ts	Updates domain types (removes unused interfaces, extends AgentResponse fields).
src/App/src/styles/images/firstprompt.png	Adds WelcomeCard prompt icon asset.
src/App/src/styles/images/secondprompt.png	Adds WelcomeCard prompt icon asset.
src/App/src/styles/images/contoso.svg	Adds Contoso logo asset used in the header.
src/App/src/store/store.ts	Adds Redux store configuration and exported RootState/AppDispatch types.
src/App/src/store/selectors.ts	Centralizes selectors and RootState import to avoid circular deps.
src/App/src/store/index.ts	Adds store barrel exports (actions/thunks/selectors/hooks/types).
src/App/src/store/hooks.ts	Adds typed `useAppDispatch` / `useAppSelector` hooks.
src/App/src/store/contentSlice.ts	Adds content slice (brief/products/generated content).
src/App/src/store/chatSlice.ts	Adds chat slice (conversation id/title, messages, clarification flow).
src/App/src/store/chatHistorySlice.ts	Adds chat-history slice with async thunks for CRUD operations.
src/App/src/store/appSlice.ts	Adds app slice (user/config/flags/loading/status) and async thunks.
src/App/src/main.tsx	Wraps the app in Redux Provider and keeps FluentProvider.
src/App/src/hooks/useWindowSize.ts	Adds responsive helper hook for window size.
src/App/src/hooks/useCopyToClipboard.ts	Adds clipboard helper hook with transient “copied” state.
src/App/src/hooks/useConversationActions.ts	Refactors conversation-level actions to Redux-backed hook.
src/App/src/hooks/useContentGeneration.ts	Refactors polling-based content generation to Redux-backed hook with abort.
src/App/src/hooks/useAutoScroll.ts	Adds scroll-to-bottom helper hook for chat UI.
src/App/src/hooks/index.ts	Adds hooks barrel export.
src/App/src/components/WelcomeCard.tsx	Adds new welcome experience with suggestion prompts.
src/App/src/components/ViolationCard.tsx	Adds reusable compliance-violation row UI.
src/App/src/components/TypingIndicator.tsx	Adds “thinking” indicator with optional Stop action.
src/App/src/components/SuggestionCard.tsx	Adds reusable suggestion card used by WelcomeCard.
src/App/src/components/SelectedProductView.tsx	Adds view showing selected products after generation.
src/App/src/components/ProductReview.tsx	Adds product selection UI with generate action.
src/App/src/components/ProductCard.tsx	Adds reusable product card used by product selection/summary.
src/App/src/components/MessageBubble.tsx	Adds message bubble with markdown rendering + copy action + disclaimers.
src/App/src/components/InlineContentPreview.tsx	Adds inline content preview with error handling and compliance section.
src/App/src/components/ImagePreviewCard.tsx	Adds image preview card with download overlay.
src/App/src/components/ConversationItem.tsx	Adds chat history row with rename/delete flows.
src/App/src/components/ConfirmedBriefView.tsx	Refactors confirmed brief UI to use shared brief metadata + memoization.
src/App/src/components/ComplianceSection.tsx	Adds compliance callouts, actions, and collapsible violations list.
src/App/src/components/ChatPanel.tsx	Composes chat UI (messages + inline stages + input).
src/App/src/components/ChatInput.tsx	Adds new input bar with send/new-chat actions and disclaimer.
src/App/src/components/BriefReview.tsx	Refactors brief review UI to use shared brief metadata + memoization.
src/App/src/components/AppHeader.tsx	Adds top-level header with logo, history toggle, and user avatar.
src/App/src/App.tsx	New top-level app composition using Redux-backed hooks and new UI layout.
src/App/src/api/index.ts	Introduces centralized API module using polling and the shared HttpClient.
src/App/src/api/httpClient.ts	Adds HttpClient wrapper with interceptors and platform client support.
src/App/server/server.js	Adds Express static server + API proxy with SSE-friendly timeouts.
src/App/server/package.json	Adds server package metadata and dependencies.
src/App/package.json	Adds Redux dependencies and updates Fluent UI icons version.
src/App/package-lock.json	Lockfile updates for Redux ecosystem + peer metadata.
src/App/microsoft.svg	Adds favicon asset.
src/App/index.html	Adds Vite HTML entrypoint for the relocated app.
src/App/.dockerignore	Updates ignored paths to align with new `server/` structure.
scripts/local_dev.sh	Updates local dev script paths to `src/App`.
scripts/local_dev.ps1	Updates local dev script paths to `src/App`.
scripts/deploy.sh	Updates deployment script paths and build artifact copy locations.
scripts/deploy.ps1	Updates deployment script paths and build artifact copy locations.
docs/TECHNICAL_GUIDE.md	Updates frontend directory references for local development.
docs/AZD_DEPLOYMENT.md	Updates build instructions to point at `src/App`.
src/app/frontend/src/components/WelcomeCard.tsx	Removes old WelcomeCard implementation from the previous frontend location.
src/app/frontend/src/components/SelectedProductView.tsx	Removes old SelectedProductView implementation from the previous frontend location.
src/app/frontend/src/components/ProductReview.tsx	Removes old ProductReview implementation from the previous frontend location.
src/app/frontend/src/api/index.ts	Removes old API implementation from the previous frontend location.
.gitignore	Updates ignored paths for new frontend/server layout.
.github/workflows/job-docker-build.yml	Updates Docker build context/file paths to `src/App`.
.github/workflows/docker-build.yml	Updates workflow path filters and Docker build context/file paths.
.github/dependabot.yml	Updates npm directories tracked by Dependabot to `src/App` and `src/App/server`.
content-gen/src/app/frontend/src/utils/stringUtils.ts	Adds duplicated utils under `content-gen/` tree.
content-gen/src/app/frontend/src/utils/sseParser.ts	Adds duplicated utils under `content-gen/` tree.
content-gen/src/app/frontend/src/utils/messageUtils.ts	Adds duplicated utils under `content-gen/` tree.
content-gen/src/app/frontend/src/utils/index.ts	Adds duplicated utils barrel under `content-gen/` tree.
content-gen/src/app/frontend/src/utils/generationStages.ts	Adds duplicated generation-stage helper under `content-gen/` tree.
content-gen/src/app/frontend/src/utils/downloadImage.ts	Adds duplicated download helper under `content-gen/` tree.
content-gen/src/app/frontend/src/utils/contentParsing.ts	Adds duplicated parsing helper under `content-gen/` tree.
content-gen/src/app/frontend/src/utils/contentErrors.ts	Adds duplicated error helper under `content-gen/` tree.
content-gen/src/app/frontend/src/utils/briefFields.ts	Adds duplicated brief metadata helper under `content-gen/` tree.
content-gen/src/app/frontend/src/store/store.ts	Adds duplicated Redux store under `content-gen/` tree.
content-gen/src/app/frontend/src/store/selectors.ts	Adds duplicated selectors under `content-gen/` tree.
content-gen/src/app/frontend/src/store/index.ts	Adds duplicated store barrel under `content-gen/` tree.
content-gen/src/app/frontend/src/store/hooks.ts	Adds duplicated typed hooks under `content-gen/` tree.
content-gen/src/app/frontend/src/store/contentSlice.ts	Adds duplicated content slice under `content-gen/` tree.
content-gen/src/app/frontend/src/store/chatSlice.ts	Adds duplicated chat slice under `content-gen/` tree.
content-gen/src/app/frontend/src/store/chatHistorySlice.ts	Adds duplicated chat history slice under `content-gen/` tree.
content-gen/src/app/frontend/src/store/appSlice.ts	Adds duplicated app slice under `content-gen/` tree.
content-gen/src/app/frontend/src/hooks/useWindowSize.ts	Adds duplicated hook under `content-gen/` tree.
content-gen/src/app/frontend/src/hooks/useCopyToClipboard.ts	Adds duplicated hook under `content-gen/` tree.
content-gen/src/app/frontend/src/hooks/useConversationActions.ts	Adds duplicated hook under `content-gen/` tree.
content-gen/src/app/frontend/src/hooks/useContentGeneration.ts	Adds duplicated hook under `content-gen/` tree.
content-gen/src/app/frontend/src/hooks/useAutoScroll.ts	Adds duplicated hook under `content-gen/` tree.
content-gen/src/app/frontend/src/hooks/index.ts	Adds duplicated hooks barrel under `content-gen/` tree.
content-gen/src/app/frontend/src/api/index.ts	Adds duplicated API module under `content-gen/` tree.
content-gen/src/app/frontend/src/api/httpClient.ts	Adds duplicated HttpClient under `content-gen/` tree.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…ntParsing docstring

…k, contentParsing docstring" This reverts commit f6722be.

revert: PR #768: UI refactoring

github-actions · 2026-04-13T05:39:54Z

🎉 This PR is included in version 2.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Shubhangi-Microsoft added 11 commits February 24, 2026 18:17

refactor(frontend): remove dead code, deduplicate error handling, tig…

8007ba0

…hten utility exports

refactor(frontend): dedup streamChat, remove dead code, tighten impor…

50bac33

…ts and memoization

refactor(frontend): GenerationStatus enum, delete dead code, dedup va…

3216286

…lidation, hooks barrel

refactor: clean up unused barrel exports and standardize httpClient i…

bfce2ef

…mports

refactor: extract AI_DISCLAIMER constant, remove dead selector and tr…

f336f3b

…ivial useMemo

chore: remove 3 unused barrel exports (setShowChatHistory, parseTextC…

ddf6a0c

…ontent, resolveImageUrl)

refactor: extract readSSEResponse helper, un-export GENERATION_STATUS…

8a7d3b4

…_LABELS

fix: wrap MessageBubble copy handler in useCallback

1650f11

Shubhangi-Microsoft requested review from Avijit-Microsoft, Prajwal-Microsoft, Roopan-Microsoft, Vinay-Microsoft, aniaroramsft, malrose07, nchandhi and toherman-msft as code owners March 13, 2026 10:31

merge: resolve conflicts with dev (keep refactored App.tsx and api/in…

3e54b33

…dex.ts)

Shubhangi-Microsoft temporarily deployed to production March 13, 2026 10:36 — with GitHub Actions Inactive

merge: resolve conflicts with restructured dev branch

0f57d1e

Shubhangi-Microsoft temporarily deployed to production March 13, 2026 11:30 — with GitHub Actions Inactive

Shubhangi-Microsoft requested a review from Copilot March 13, 2026 11:30

Copilot started reviewing on behalf of Shubhangi-Microsoft March 13, 2026 11:31 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

Comment thread src/App/src/api/httpClient.ts

Comment thread src/App/src/hooks/useConversationActions.ts

Comment thread src/App/src/api/index.ts

Comment thread src/App/src/api/index.ts

Comment thread src/App/src/api/index.ts

Comment thread src/App/src/api/index.ts

Shubhangi-Microsoft temporarily deployed to production March 13, 2026 11:42 — with GitHub Actions Inactive

Shubhangi-Microsoft added 2 commits April 1, 2026 12:58

refactor: restructure frontend folder - move contents to app/, rename…

14f61f8

… frontend-server to server

fix: address PR review - use npm ci --omit=dev, create server/static …

3d05925

…dir before copy

merge: integrate psl-uitemplatechng into psl-ui-refractoring (folder …

a5d6a5c

…restructure)

Shubhangi-Microsoft temporarily deployed to production April 3, 2026 11:00 — with GitHub Actions Inactive

Tejasri-Microsoft approved these changes Apr 3, 2026

View reviewed changes

refactor: rename src/app to src/App and update all path references

b9b95ef

Shubhangi-Microsoft temporarily deployed to production April 8, 2026 08:42 — with GitHub Actions Inactive

Tejasri-Microsoft requested a review from Copilot April 8, 2026 11:34

Copilot started reviewing on behalf of Tejasri-Microsoft April 8, 2026 11:37 View session

Copilot AI reviewed Apr 8, 2026

View reviewed changes

Comment thread src/App/src/components/ChatInput.tsx

Comment thread src/App/src/api/httpClient.ts

Comment thread content-gen/src/app/frontend/src/utils/index.ts

Comment thread src/App/src/utils/contentParsing.ts

fix: address PR review - ChatInput event type, userId fallback, conte…

f6722be

…ntParsing docstring

Shubhangi-Microsoft temporarily deployed to production April 8, 2026 12:04 — with GitHub Actions Inactive

Revert "fix: address PR review - ChatInput event type, userId fallbac…

06c7787

…k, contentParsing docstring" This reverts commit f6722be.

Shubhangi-Microsoft temporarily deployed to production April 8, 2026 12:19 — with GitHub Actions Inactive

Tejasri-Microsoft approved these changes Apr 9, 2026

View reviewed changes

Roopan-Microsoft approved these changes Apr 9, 2026

View reviewed changes

Roopan-Microsoft merged commit c77a108 into dev Apr 9, 2026
4 checks passed

Pavan-Microsoft added a commit that referenced this pull request Apr 10, 2026

Revert PR #768: UI refactoring

9af260a

Roopan-Microsoft added a commit that referenced this pull request Apr 10, 2026

Merge pull request #810 from microsoft/revert-pr-768

39dab72

revert: PR #768: UI refactoring

github-actions bot added the released label Apr 13, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: UI refactoring#768

refactor: UI refactoring#768
Roopan-Microsoft merged 20 commits intodevfrom
psl-ui-refractoring

Shubhangi-Microsoft commented Mar 13, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Apr 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

Shubhangi-Microsoft commented Mar 13, 2026

Redux integration

Type and utility dependencies

Peer dependency and metadata updates

Does this introduce a breaking change?

Golden Path Validation

Deployment Validation

What to Check

Other Information

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Apr 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants