Add MessageEntry component for unified chatbot#3160
Add MessageEntry component for unified chatbot#3160openshift-merge-bot[bot] merged 1 commit intoopenshift-assisted:masterfrom
Conversation
WalkthroughAdds a new MessageEntry React component and props to the chatbot library, exports them from the package index, makes MsgAction a public type, introduces per-message action handling (downloads, cluster navigation) and feedback submission to /v1/feedback, and adds two package dependencies. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant ChatUI as Chat UI
participant MessageEntry as MessageEntry component
participant Parser as ToolCalls Parser
participant Browser as saveAs / Clipboard
participant App as openClusterDetails callback
participant API as /v1/feedback
User->>ChatUI: View conversation
ChatUI->>MessageEntry: Render message {message, avatar, openClusterDetails, onApiCall}
MessageEntry->>Parser: Parse message.additionalAttributes.toolCalls
Parser-->>MessageEntry: Actions [{title, url?, clusterId?}]
alt Click Download
User->>MessageEntry: Click "Download"
MessageEntry->>Browser: saveAs(url)
Browser-->>MessageEntry: Success / Error
end
alt Click Cluster action
User->>MessageEntry: Click "Open cluster details"
MessageEntry->>App: openClusterDetails(clusterId)
end
alt Feedback / Copy
User->>MessageEntry: Click Positive/Negative/Copy
MessageEntry->>Browser: copy answer to clipboard (on Copy)
MessageEntry->>API: POST /v1/feedback {conversation_id, user_question, user_feedback, llm_response, sentiment, category} (on submit)
API-->>MessageEntry: 200 OK / Error
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks (3 passed)✅ Passed checks (3 passed)
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
✨ Finishing Touches
🧪 Generate unit tests
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 |
openshift-ci
bot
added
approved
rawagner
force-pushed
the
unified_chatbot
branch
from
9b11b9d to
0f5c6ad
Compare
|
/cherry-pick releases/v0.1-chatbot |
|
@rawagner: once the present PR merges, I will cherry-pick it on top of DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
libs/chatbot/lib/components/ChatBot/MessageEntry.tsx (5)
25-38: Consider timeout/abort for the POST to improve resiliency.Add an AbortController with a reasonable timeout so stuck requests don’t hang the UI.
Apply this diff:
- const resp = await onApiCall('/v1/feedback', { + const controller = new AbortController(); + const timeoutId = window.setTimeout(() => controller.abort(), 15000); + const resp = await onApiCall('/v1/feedback', { method: 'POST', body: JSON.stringify({ @@ headers: { 'Content-Type': 'application/json', }, - }); + signal: controller.signal, + }); + window.clearTimeout(timeoutId);
46-46: Avoid “undefined undefined” timestamps when date is missing.Guard
message.date.Apply this diff:
- const messageDate = `${message.date?.toLocaleDateString()} ${message.date?.toLocaleTimeString()}`; + const messageDate = message.date + ? `${message.date.toLocaleDateString()} ${message.date.toLocaleTimeString()}` + : undefined;
95-97: Handle clipboard write failures.Older browsers or denied permissions can reject the promise.
Apply this diff:
- onClick: () => { - void navigator.clipboard.writeText(message.answer || ''); - }, + onClick: () => { + navigator.clipboard + .writeText(message.answer || '') + // eslint-disable-next-line no-console + .catch((e) => console.error('Copy failed:', e)); + },
111-113: Keep aria-label concise.Very long responses make the label noisy; truncate for SR usability.
Apply this diff:
- aria-label={`${message.role === 'user' ? 'Your message' : 'AI response'}: ${ - message.answer - }`} + aria-label={`${message.role === 'user' ? 'Your message' : 'AI response'}: ${ + message.answer?.slice(0, 120) ?? '' + }${message.answer && message.answer.length > 120 ? '…' : ''}`}
121-123: Use a more stable React key for actions.Avoid index keys to reduce reconciliation glitches.
Apply this diff:
- {actions.map(({ title, url, clusterId }, idx) => ( - <StackItem key={idx}> + {actions.map(({ title, url, clusterId }, idx) => ( + <StackItem key={`${title}-${url ?? clusterId ?? idx}`}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (4)
libs/chatbot/lib/components/ChatBot/MessageEntry.tsx(1 hunks)libs/chatbot/lib/components/ChatBot/helpers.ts(1 hunks)libs/chatbot/lib/index.ts(1 hunks)libs/chatbot/package.json(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- libs/chatbot/package.json
🚧 Files skipped from review as they are similar to previous changes (2)
- libs/chatbot/lib/components/ChatBot/helpers.ts
- libs/chatbot/lib/index.ts
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: celdrake
PR: openshift-assisted/assisted-installer-ui#3051
File: libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx:196-222
Timestamp: 2025-07-18T12:35:50.945Z
Learning: In the assisted-installer-ui chatbot feedback implementation, the onFeedbackSubmit callback requires access to the messages array to retrieve both the bot response content and the associated user question for the API call, making it necessary to include messages in the useCallback dependency array rather than passing message content as props to avoid duplicating potentially long message data.
🧬 Code graph analysis (1)
libs/chatbot/lib/components/ChatBot/MessageEntry.tsx (3)
libs/chatbot/lib/components/ChatBot/BotMessage.tsx (1)
FeedbackRequest(16-20)libs/chatbot/lib/components/ChatBot/types.ts (3)
StreamEvent(21-26)isToolArgStreamEvent(33-34)isToolResponseStreamEvent(36-37)libs/chatbot/lib/components/ChatBot/helpers.ts (2)
MsgAction(5-5)getToolAction(32-99)
⏰ 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). (1)
- GitHub Check: tests
🔇 Additional comments (2)
libs/chatbot/lib/components/ChatBot/MessageEntry.tsx (2)
6-7: Verify PF v6 component API usage.Imports are from
@patternfly-6/*. Please confirm the Buttoniconprop and other APIs match PF v6 in this repo’s env to avoid runtime prop warnings.
105-107: Good call disabling Markdown for user messages.Prevents user-supplied Markdown from rendering.
rawagner
force-pushed
the
unified_chatbot
branch
from
0f5c6ad to
ce01f81
Compare
celdrake
left a comment
celdrake
left a comment
There was a problem hiding this comment.
Looks good!
Just a small comment that maybe we could show the error in case the download is interrupted.
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: celdrake, rawagner The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
Thanks, I'll improve the err handling in a followup |
openshift-merge-bot
bot
merged commit bc6af0b
into
openshift-assisted:master
|
@rawagner: new pull request created: #3161 DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
3 participants
AssistedInstaller custom msg component that will be exported and loaded by console.redhat.com unified chatbot
Summary by CodeRabbit
New Features
Improvements