[Chat] feat: update chat-header look & feel#11330
[Chat] feat: update chat-header look & feel#11330SuZhou-Joe merged 2 commits intoopensearch-project:mainfrom
Conversation
SuZhou-Joe
requested review from
AMoo-Miki,
BionIT,
Flyingliuhub,
LDrago27,
Maosaic,
TackAdam,
ZilongX,
abbyhu2000,
ananzh,
angle943,
ashwin-pc,
bandinib-amzn,
curq,
d-buckner,
huyaboo,
joshuali925,
joshuarrrr,
kavilla,
manasvinibs,
mengweieric,
ps48,
raintygao,
ruanyl,
sejli,
virajsanghvi,
wanglam,
xinruiba,
zengyan-amazon,
zhongnansu and
zhyuanqi
as code owners
SuZhou-Joe
requested review from
paulstn,
ruchidh and
sumukhswamy
as code owners
📝 WalkthroughWalkthroughThe pull request refactors the chat header component by removing layout mode state management and toggling functionality, replacing fixed title displays with an optional conversation name derived from chat history. SCSS styling is updated for improved spacing and visual hierarchy. The changes span header rendering logic, button behavior simplification, and comprehensive tests for conversation name extraction. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
SuZhou-Joe
force-pushed
the
feature/chat-header
branch
from
ced1582 to
609e232
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/plugins/chat/public/components/chat_header.tsx`:
- Around line 31-40: Replace nonstandard OUI icon names used in the chat header
components: update the EuiIcon instance using type="chatLeft" (in the ChatHeader
render) to a valid OUI icon name (e.g., "chat" or another supported chat-related
icon) and update the EuiButtonIcon usage that uses "documentEdit" to either
"document" or "edit" (or split into separate icons) or register a custom icon if
you require a combined glyph; ensure you change the type prop on the EuiIcon and
EuiButtonIcon elements (referenced as EuiIcon and EuiButtonIcon in this file) to
valid OUI icon names or to a custom-registered icon name so the icons render
correctly.
In `@src/plugins/chat/public/components/chat_window_conversation_name.test.tsx`:
- Around line 233-267: The test fails because reuse of the same mockChatService
doesn't retrigger the restoreTimeline effect (dependencies chatService and
eventHandler are stable), so changing mockChatService.getCurrentMessages on
rerender won't populate timeline or conversationName; to fix, simulate a real
timeline update instead of swapping the mock return: in the test after mocking
messages, invoke the same event/handler that restoreTimeline subscribes to (or
directly call the setTimeline/eventHandler callback used by restoreTimeline) so
the component updates its timeline and recomputes conversationName (refer to
restoreTimeline, useMemo -> conversationName, setTimeline, and ChatWindow to
locate the logic to call).
🧹 Nitpick comments (2)
src/plugins/chat/public/components/chat_header.scss (1)
41-44: Dead CSS:__experimentalBadgeis no longer used.The
EuiBadgeand "Experimental" badge were removed fromchat_header.tsx, but these styles remain. Consider removing them to avoid confusion.🧹 Remove unused styles
- &__experimentalBadge { - font-size: 10px; - padding: 2px 6px; - }src/plugins/chat/public/components/chat_window_conversation_name.test.tsx (1)
44-70:anyusage in mock declarations.The coding guidelines advise avoiding
any. Whileas anyon mocks is pragmatic, you could use partial type utilities likePartial<ChatService>or more specific mock types to reduceanyusage.As per coding guidelines, "Use TypeScript for all new code; avoid
anytype (useunknownor generics instead)".
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
changelogs/fragments/11330.ymlsrc/plugins/chat/public/components/chat_header.scsssrc/plugins/chat/public/components/chat_header.tsxsrc/plugins/chat/public/components/chat_header_button.test.tsxsrc/plugins/chat/public/components/chat_header_button.tsxsrc/plugins/chat/public/components/chat_window.tsxsrc/plugins/chat/public/components/chat_window_conversation_name.test.tsx
💤 Files with no reviewable changes (1)
- src/plugins/chat/public/components/chat_header_button.test.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx,json,scss,css,html,yml,yaml}
📄 CodeRabbit inference engine (CLAUDE.md)
Use snake_case for all filenames
Files:
src/plugins/chat/public/components/chat_header_button.tsxchangelogs/fragments/11330.ymlsrc/plugins/chat/public/components/chat_header.scsssrc/plugins/chat/public/components/chat_window.tsxsrc/plugins/chat/public/components/chat_window_conversation_name.test.tsxsrc/plugins/chat/public/components/chat_header.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use TypeScript for all new code; avoidanytype (useunknownor generics instead)
Avoid non-null assertions (!.) and@ts-ignorecomments
HTML attributes:idanddata-test-subjvalues should be camelCase
Import.scssfiles at the top of the component file and use 3-letter prefix on class names for scoping (e.g.,plgComponent)
Prefer functional components in React and name action props ason<Subject><Change>
Files:
src/plugins/chat/public/components/chat_header_button.tsxsrc/plugins/chat/public/components/chat_window.tsxsrc/plugins/chat/public/components/chat_window_conversation_name.test.tsxsrc/plugins/chat/public/components/chat_header.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use named exports, not default exports
Use ES2015 import/export syntax; only import top-level module APIs, never reach into internal paths
Use single quotes for strings with 100-character print width and ES5 trailing commas (enforced by Prettier)
Files:
src/plugins/chat/public/components/chat_header_button.tsxsrc/plugins/chat/public/components/chat_window.tsxsrc/plugins/chat/public/components/chat_window_conversation_name.test.tsxsrc/plugins/chat/public/components/chat_header.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Unit tests must achieve 80%+ code coverage (enforced by Codecov); use react-testing-library for components, not enzyme snapshots
Files:
src/plugins/chat/public/components/chat_window_conversation_name.test.tsx
🧬 Code graph analysis (2)
src/plugins/chat/public/components/chat_header_button.tsx (2)
src/core/public/index.ts (1)
SIDECAR_DOCKED_MODE(230-230)src/plugins/chat/public/services/chat_service.ts (1)
isWindowOpen(126-131)
src/plugins/chat/public/components/chat_window_conversation_name.test.tsx (3)
src/plugins/chat/public/services/confirmation_service.ts (1)
ConfirmationService(27-139)src/plugins/chat/public/contexts/chat_context.tsx (1)
ChatProvider(26-37)src/plugins/chat/public/components/chat_window.tsx (1)
ChatWindow(43-45)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (67)
- GitHub Check: Run functional tests on Windows (ciGroup8)
- GitHub Check: Run functional tests on Windows (ciGroup5)
- GitHub Check: Run functional tests on Windows (ciGroup10)
- GitHub Check: Run functional tests on Windows (ciGroup12)
- GitHub Check: Run functional tests on Windows (ciGroup2)
- GitHub Check: Run functional tests on Windows (ciGroup13)
- GitHub Check: Run functional tests on Windows (ciGroup9)
- GitHub Check: Run functional tests on Windows (ciGroup11)
- GitHub Check: Run functional tests on Linux (ciGroup6)
- GitHub Check: Run functional tests on Windows (ciGroup3)
- GitHub Check: Run functional tests on Windows (ciGroup6)
- GitHub Check: Run functional tests on Linux (ciGroup2)
- GitHub Check: Run functional tests on Windows (ciGroup4)
- GitHub Check: Run functional tests on Linux (ciGroup12)
- GitHub Check: Run functional tests on Windows (ciGroup7)
- GitHub Check: Run functional tests on Linux (ciGroup10)
- GitHub Check: Run functional tests on Linux (ciGroup11)
- GitHub Check: Run functional tests on Linux (ciGroup8)
- GitHub Check: Run functional tests on Linux (ciGroup4)
- GitHub Check: Run functional tests on Linux (ciGroup9)
- GitHub Check: Run functional tests on Linux (ciGroup5)
- GitHub Check: Run functional tests on Linux (ciGroup13)
- GitHub Check: Run functional tests on Linux (ciGroup3)
- GitHub Check: Run functional tests on Linux (ciGroup7)
- GitHub Check: Run functional tests on Linux (ciGroup1)
- GitHub Check: Run functional tests on Windows (ciGroup1)
- GitHub Check: Build and Verify on Windows (ciGroup3)
- GitHub Check: Build and Verify on Linux (ciGroup2)
- GitHub Check: Build and Verify on Windows (ciGroup4)
- GitHub Check: Build and Verify on Linux (ciGroup4)
- GitHub Check: Build and Verify on Linux (ciGroup3)
- GitHub Check: Build and Verify on Windows (ciGroup1)
- GitHub Check: Build and Verify on Linux (ciGroup1)
- GitHub Check: Build min release artifacts on macOS ARM64
- GitHub Check: Build min release artifacts on Linux ARM64
- GitHub Check: Build and Verify on Windows (ciGroup2)
- GitHub Check: Build min release artifacts on macOS x64
- GitHub Check: Build min release artifacts on Windows x64
- GitHub Check: Build min release artifacts on Linux x64
- GitHub Check: Run cypress tests (osd:ciGroup1)
- GitHub Check: Lint and validate
- GitHub Check: bundle-analyzer
- GitHub Check: Run cypress tests (osd:ciGroup16Explore)
- GitHub Check: Run plugin functional tests on Linux
- GitHub Check: Run plugin functional tests on Windows
- GitHub Check: Run cypress tests (osd:ciGroup15Explore)
- GitHub Check: Run cypress tests (osd:ciGroup14)
- GitHub Check: Run cypress tests (osd:ciGroup14Explore)
- GitHub Check: Run cypress tests (osd:ciGroup10Slow)
- GitHub Check: Run cypress tests (osd:ciGroup7)
- GitHub Check: Run cypress tests (osd:ciGroup13)
- GitHub Check: Run cypress tests (osd:ciGroup10Fast)
- GitHub Check: Run cypress tests (osd:ciGroup8)
- GitHub Check: Run cypress tests (osd:ciGroup11)
- GitHub Check: Run cypress tests (osd:ciGroup17Explore)
- GitHub Check: Run cypress tests (osd:ciGroup3)
- GitHub Check: Run cypress tests (osd:ciGroup13Explore)
- GitHub Check: Run cypress tests (osd:ciGroup15)
- GitHub Check: Run cypress tests (osd:ciGroup12Explore)
- GitHub Check: Run cypress tests (osd:ciGroup2)
- GitHub Check: Run cypress tests (osd:ciGroup9)
- GitHub Check: Run cypress tests (osd:ciGroup10Explore)
- GitHub Check: Run cypress tests (osd:ciGroup12)
- GitHub Check: Run cypress tests (osd:ciGroup5)
- GitHub Check: Run cypress tests (osd:ciGroup6)
- GitHub Check: Run cypress tests (osd:ciGroup4)
- GitHub Check: lighthouse
🔇 Additional comments (9)
src/plugins/chat/public/components/chat_header.tsx (1)
10-15: Clean prop interface simplification.The removal of
layoutModeandonToggleLayoutin favor of an optionalconversationNamesimplifies this component's API surface nicely. The default value of''ensures the title section is not rendered when no conversation exists.src/plugins/chat/public/components/chat_header.scss (1)
1-32: Well-structured overflow handling for the title.The
min-width: 0on both__titleGroupand__titleContainer, combined withtext-overflow: ellipsison__title, correctly handles long conversation names in a flex layout.changelogs/fragments/11330.yml (1)
1-2: Changelog entry looks good.src/plugins/chat/public/components/chat_window.tsx (2)
357-378: Conversation name extraction logic is solid.The
useMemocorrectly iteratestimelineto find the first user message with meaningful text content, handling both string and array content types. Whitespace-only and binary-only messages are properly skipped.
385-392: Integration with ChatHeader looks correct.The
conversationNameis properly derived and passed down, replacing the previousonToggleLayoutprop.src/plugins/chat/public/components/chat_header_button.tsx (3)
66-86: Sidecar config simplification looks good.Hardcoding
SIDECAR_DOCKED_MODE.RIGHTand a fixed className removes unnecessary complexity from layout toggling. The dependency array is correctly trimmed.
117-126: Window state listener correctly simplified.Only tracking
isWindowOpennow thatwindowModeis no longer needed.
29-32: No action needed—ChatLayoutMode.FULLSCREENis actively used.The
FULLSCREENenum variant is referenced inchat_service.ts(line 145, where it's returned whenwindowModeis not 'sidecar') and validated inplugin.ts(line 34, as part of the window state validation). The enum should be retained.Likely an incorrect or invalid review comment.
src/plugins/chat/public/components/chat_window_conversation_name.test.tsx (1)
89-231: Good test coverage for the core extraction scenarios.The tests thoroughly cover string content, array content, binary-only messages, assistant-first timelines, and whitespace-only messages. The CSS truncation test (Lines 213-231) pragmatically verifies the class is applied without trying to assert computed styles.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| <EuiFlexItem grow={false}> | ||
| <EuiText size="m"> | ||
| <h3>Ask AI</h3> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiBadge color="warning" className="chatHeader__experimentalBadge"> | ||
| Experimental | ||
| </EuiBadge> | ||
| <EuiIcon type="chatLeft" size="m" className="chatHeader__chatIcon" /> | ||
| </EuiFlexItem> | ||
| {conversationName && ( | ||
| <EuiFlexItem grow={true} className="chatHeader__titleContainer"> | ||
| <EuiText size="m"> | ||
| <h3 className="chatHeader__title">{conversationName}</h3> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| )} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check the EUI version in package.json
find . -name "package.json" -path "*/package.json" | head -5 | xargs grep -l "@elastic/eui" | head -1 | xargs cat | grep -A2 "@elastic/eui"Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 359
🏁 Script executed:
# Search for chatLeft and documentEdit icon references
rg -n "chatLeft|documentEdit" --type=ts --type=tsx -g '!node_modules' | head -20Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 111
🏁 Script executed:
# Check if there are any custom icon definitions or registrations
rg -n "icon.*register|customIcon|registerIcon" --type=ts --type=tsx -g '!node_modules' | head -20Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 111
🏁 Script executed:
# Look at the chat_header.tsx file to see the full context
cat -n src/plugins/chat/public/components/chat_header.tsxRepository: opensearch-project/OpenSearch-Dashboards
Length of output: 2075
🏁 Script executed:
# Search for icon type definitions or icon lists in the codebase
rg "chatLeft|documentEdit" -i --max-count=20Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 299
🏁 Script executed:
# Check node_modules for OUI icon types (if available)
find . -path "*/node_modules/@opensearch-project/oui*" -name "*.d.ts" 2>/dev/null | grep -i icon | head -5Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 66
🏁 Script executed:
# Search for other icon usages in the codebase to see what's common
rg "type=\"[a-zA-Z]+" -o | sort | uniq -c | sort -rn | head -20Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 2856
🏁 Script executed:
# Look for the EuiIcon component definition or imports to understand its types
rg "EuiIcon" -A5 -B5 | head -40Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 4336
🏁 Script executed:
# Search for icon type definitions in the codebase
rg "iconType|type.*icon" -i | grep -E "(documentEdit|chatLeft)" | head -10Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 299
🏁 Script executed:
# Check if there are TypeScript errors or type definition files
find . -name "*.d.ts" -path "*/eui/*" -o -path "*/oui/*" | head -10Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 197
🏁 Script executed:
# Look for what icon types are typically used with EuiIcon and EuiButtonIcon
rg "iconType=\"[^\"]+\"|type=\"[^\"]+\"" -o --max-count=30 | sort | uniq -c | sort -rn | head -20Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 2989
🏁 Script executed:
# Check if there's a types file or definition for icon types
rg "chatLeft|documentEdit" --type ts -iRepository: opensearch-project/OpenSearch-Dashboards
Length of output: 299
🏁 Script executed:
# Check the EUI type definitions for icon types
cat -n ./typings/@elastic/eui/index.d.ts | head -100Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 1544
🏁 Script executed:
# Search for EuiIcon type definitions specifically
rg "EuiIcon|iconType" ./typings/@elastic/eui/index.d.ts -A5 -B5 | head -50Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 66
🏁 Script executed:
# Look for icon type definitions in the typings
grep -n "chatLeft\|documentEdit\|IconType" ./typings/@elastic/eui/index.d.tsRepository: opensearch-project/OpenSearch-Dashboards
Length of output: 66
🏁 Script executed:
# Check if there are test files for the chat_header component
find . -name "*chat_header*" -type f | grep -v node_modulesRepository: opensearch-project/OpenSearch-Dashboards
Length of output: 376
🏁 Script executed:
# Look for any OUI/EUI icon constants or enumerations
rg "export.*icon|icon.*=" --type ts | grep -i "type\|const" | head -20Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 2507
🏁 Script executed:
# Search for known icon types used in the codebase to understand the pattern
rg "iconType=\"[^\"]+\"" -o | sort | uniq | head -30Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 2742
🏁 Script executed:
# Check web for OUI 1.22.1 icon availability
# First, let's look for node_modules artifacts or documentation
ls -la node_modules/@opensearch-project/oui/ 2>/dev/null | head -20 || echo "node_modules not available"Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 66
🏁 Script executed:
# Check the test file for chat_header to see if there are any icon-related tests
cat -n ./src/plugins/chat/public/components/chat_header_button.test.tsx | head -50Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 2028
🏁 Script executed:
# Look at package.json to verify the exact OUI version and check if there's a changelog
grep -A2 "@opensearch-project/oui\|@elastic/eui" package.jsonRepository: opensearch-project/OpenSearch-Dashboards
Length of output: 359
🏁 Script executed:
# Search for common icon types in OUI to build a reference list
rg "iconType=\"(copy|edit|chat|document)" -o | sort | uniqRepository: opensearch-project/OpenSearch-Dashboards
Length of output: 2297
Use valid OUI icon types for EuiIcon and EuiButtonIcon.
The icon types chatLeft (line 32) and documentEdit (line 44) do not appear to be standard icons in OUI 1.22.1. The codebase uses separate icon types like document and edit individually, never combined. Consider using valid OUI icon types such as document or documentEdit if it's a legacy alias, or register custom icons if needed.
🤖 Prompt for AI Agents
In `@src/plugins/chat/public/components/chat_header.tsx` around lines 31 - 40,
Replace nonstandard OUI icon names used in the chat header components: update
the EuiIcon instance using type="chatLeft" (in the ChatHeader render) to a valid
OUI icon name (e.g., "chat" or another supported chat-related icon) and update
the EuiButtonIcon usage that uses "documentEdit" to either "document" or "edit"
(or split into separate icons) or register a custom icon if you require a
combined glyph; ensure you change the type prop on the EuiIcon and EuiButtonIcon
elements (referenced as EuiIcon and EuiButtonIcon in this file) to valid OUI
icon names or to a custom-registered icon name so the icons render correctly.
| it('should update conversation name when new messages are added', () => { | ||
| // Start with empty timeline | ||
| mockChatService.getCurrentMessages.mockReturnValue([]); | ||
|
|
||
| const { container, rerender } = renderWithContext(<ChatWindow onClose={jest.fn()} />); | ||
|
|
||
| // Initially no title | ||
| let titleElement = container.querySelector('.chatHeader__title'); | ||
| expect(titleElement).not.toBeInTheDocument(); | ||
|
|
||
| // Simulate adding a message | ||
| const messagesWithUser = [ | ||
| { id: '1', role: 'user' as const, content: 'New conversation started' }, | ||
| ]; | ||
| mockChatService.getCurrentMessages.mockReturnValue(messagesWithUser); | ||
|
|
||
| rerender( | ||
| <OpenSearchDashboardsContextProvider | ||
| services={{ core: mockCore, contextProvider: mockContextProvider }} | ||
| > | ||
| <ChatProvider | ||
| chatService={mockChatService} | ||
| suggestedActionsService={mockSuggestedActionsService} | ||
| confirmationService={mockConfirmationService} | ||
| > | ||
| <ChatWindow onClose={jest.fn()} /> | ||
| </ChatProvider> | ||
| </OpenSearchDashboardsContextProvider> | ||
| ); | ||
|
|
||
| // Now title should be present | ||
| titleElement = container.querySelector('.chatHeader__title'); | ||
| expect(titleElement).toBeInTheDocument(); | ||
| expect(titleElement?.textContent).toBe('New conversation started'); | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find the ChatWindow component file
fd -e tsx -e ts "chat_window" src/plugins/chat/public/components/ | grep -v testRepository: opensearch-project/OpenSearch-Dashboards
Length of output: 134
🏁 Script executed:
#!/bin/bash
# Once we find the file, search for the restoreTimeline effect and its dependencies
rg "restoreTimeline" src/plugins/chat/public/components/ -A 5 -B 5Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 1922
🏁 Script executed:
#!/bin/bash
# Search for conversationName derivation and related useMemo
rg "conversationName|useMemo" src/plugins/chat/public/components/ -A 3 -B 3Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 13132
🏁 Script executed:
#!/bin/bash
# Look at the useEffect with chatService as dependency
rg "useEffect.*chatService|eventHandler" src/plugins/chat/public/components/ -A 10 -B 2Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 8488
🏁 Script executed:
#!/bin/bash
# Read the test file to understand mock setup and test structure
head -100 src/plugins/chat/public/components/chat_window_conversation_name.test.tsxRepository: opensearch-project/OpenSearch-Dashboards
Length of output: 3711
🏁 Script executed:
#!/bin/bash
# Look at the renderWithContext function and how mocks are configured
rg "renderWithContext|mockChatService|mockCore|mockContextProvider" src/plugins/chat/public/components/chat_window_conversation_name.test.tsx -B 5 -A 10 | head -150Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 6026
🏁 Script executed:
#!/bin/bash
# Check if there's any setup in ChatProvider or its context that re-evaluates messages
rg "ChatProvider|useChatContext" src/plugins/chat/public/components/ -A 10 | grep -A 10 "getCurrentMessages"Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 1222
🏁 Script executed:
#!/bin/bash
# Look for any jest.act() or waitFor usage in the test file
rg "act\(|waitFor|flushPromises" src/plugins/chat/public/components/chat_window_conversation_name.test.tsx -B 2 -A 5Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 66
🏁 Script executed:
#!/bin/bash
# Get the specific test case mentioned in the review (lines 233-267)
sed -n '233,267p' src/plugins/chat/public/components/chat_window_conversation_name.test.tsxRepository: opensearch-project/OpenSearch-Dashboards
Length of output: 1457
🏁 Script executed:
#!/bin/bash
# Look for the specific test in the file
rg "should update conversation name when new messages are added" src/plugins/chat/public/components/chat_window_conversation_name.test.tsx -A 40Repository: opensearch-project/OpenSearch-Dashboards
Length of output: 1467
The rerender test does not trigger timeline update as expected due to stable dependency references.
The conversationName derives from timeline via useMemo, which is only populated by the restoreTimeline effect when its dependencies [chatService, eventHandler] change. Since the same mockChatService instance is reused throughout this test, the effect won't re-execute on rerender—leaving timeline empty and the title unrendered despite the mock returning new messages.
A more reliable approach would be to simulate sending a message (triggering setTimeline directly through event handling) rather than changing the mock return value across rerenders.
🤖 Prompt for AI Agents
In `@src/plugins/chat/public/components/chat_window_conversation_name.test.tsx`
around lines 233 - 267, The test fails because reuse of the same mockChatService
doesn't retrigger the restoreTimeline effect (dependencies chatService and
eventHandler are stable), so changing mockChatService.getCurrentMessages on
rerender won't populate timeline or conversationName; to fix, simulate a real
timeline update instead of swapping the mock return: in the test after mocking
messages, invoke the same event/handler that restoreTimeline subscribes to (or
directly call the setTimeline/eventHandler callback used by restoreTimeline) so
the component updates its timeline and recomputes conversationName (refer to
restoreTimeline, useMemo -> conversationName, setTimeline, and ChatWindow to
locate the logic to call).
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #11330 +/- ##
=======================================
Coverage 60.16% 60.16%
=======================================
Files 4652 4652
Lines 129576 129573 -3
Branches 22034 22031 -3
=======================================
+ Hits 77954 77956 +2
+ Misses 46067 46065 -2
+ Partials 5555 5552 -3
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
* feat: update chat-header look & feel Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * Changeset file for PR opensearch-project#11330 created/updated --------- Signed-off-by: SuZhou-Joe <suzhou@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
* feat: update chat-header look & feel Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * Changeset file for PR opensearch-project#11330 created/updated --------- Signed-off-by: SuZhou-Joe <suzhou@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Signed-off-by: Mark Boyd <mark.boyd@gsa.gov>
3 participants
Description
Update chat header look & feel.
Issues Resolved
Screenshot
20260212112608473.mp4
Testing the changes
Changelog
Check List
yarn test:jestyarn test:jest_integration