Migrate from @fluentui/react (v8) to @fluentui/react-components (v9)

## Overview The frontend currently uses both Fluent UI packages: - `@fluentui/react` (v8) - 20 import locations - `@fluentui/react-components` (v9) - 6 import locations We should consider migrating fully to v9 (`@fluentui/react-components`) for several reasons: 1. **Official React 19 support** - v9 has proper peer dependencies for React 19, while v8 hasn't updated its declared peer deps yet 2. **Active development** - v9 is the actively maintained version with new features 3. **Modern patterns** - v9 uses more modern React patterns and CSS-in-JS via Griffel 4. **Reduced bundle size** - Using only one Fluent UI package would reduce duplication ## Current v8 usage Components imported from `@fluentui/react`: | Component | Files using it | |-----------|----------------| | `Stack` | Answer, AnswerError, AnswerLoading, HelpCallout, QuestionInput, Settings, ThoughtProcess, VectorSettings | | `Dropdown` | LanguagePicker, Settings, VectorSettings | | `TextField` | QuestionInput, Settings | | `Checkbox` | Settings, VectorSettings | | `Panel` | Chat, HistoryPanel | | `DefaultButton` | Chat, HelpCallout, HistoryItem, LoginButton | | `IconButton` | Answer, HelpCallout, MarkdownViewer, SpeechOutputAzure, SpeechOutputBrowser | | `PrimaryButton` | AnswerError | | `Callout` | HelpCallout, UploadFile | | `Label` | TokenClaimsDisplay, UploadFile | | `Text` | UploadFile | | `Pivot`, `PivotItem` | AnalysisPanel | | `Spinner` | HistoryPanel, MarkdownViewer | | `MessageBar` | MarkdownViewer | | `Link` | MarkdownViewer | | `initializeIcons` | index.tsx | ## Migration considerations ### Breaking changes - **No `Stack` component** - v9 expects direct use of CSS flexbox/grid - **Different props** - Component APIs differ between v8 and v9 - **Different styling** - v9 uses `makeStyles` from Griffel instead of `IStyleProps` - **Different theming** - Provider-based theming vs. global ### v9 equivalents | v8 Component | v9 Equivalent | |--------------|---------------| | `Stack` | Use CSS flexbox/grid directly | | `Dropdown` | `Dropdown` or `Combobox` | | `TextField` | `Input` or `Textarea` | | `Checkbox` | `Checkbox` | | `Panel` | `Drawer` | | `DefaultButton` | `Button` | | `IconButton` | `Button` with `icon` prop | | `PrimaryButton` | `Button appearance="primary"` | | `Callout` | `Popover` | | `Pivot` | `TabList` | | `Spinner` | `Spinner` | | `MessageBar` | `MessageBar` | | `initializeIcons` | Not needed (icons bundled differently) | ## Suggested approach 1. Migrate one component at a time, starting with simpler ones 2. Update styling to use Griffel's `makeStyles` 3. Replace `Stack` with semantic HTML + CSS 4. Run e2e tests after each component migration 5. Remove `@fluentui/react` dep and `legacy-peer-deps` setting once complete ## References - [Fluent UI v9 documentation](https://react.fluentui.dev/) - [v8 to v9 migration guide](https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8--page) - [React 19 support issue](https://github.com/microsoft/fluentui/issues/34768)