Add better chat link prompt screen #290
Conversation
Also show a pointer cursor when hovering over messages with click events
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
WalkthroughThe changes update a React component to introduce a modal-based confirmation for click events. A new import is added for a modal function, and the click handler is modified to operate asynchronously. The component now supports an additional action type ("open_file") by prompting the user with options to either open a URL or copy the value to the clipboard. Style modifications are included to indicate clickable elements, and the return statement now joins CSS styles with a semicolon. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant FE as MessageFormatted Component
participant M as Options Modal
participant O as openURL Function
participant C as Clipboard API
U->>FE: Click on element with action (open_file)
FE->>M: Display modal with "Open" and "Copy" options
M-->>FE: Return selected option
alt If "Open" is selected
FE->>O: Call openURL(value)
else If "Copy" is selected
FE->>C: Use navigator.clipboard.writeText(value)
end
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Pro Plan! Simply use the command 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (6)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
PR Code Suggestions ✨Explore these optional code suggestions:
|
||||||||||||
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/react/MessageFormatted.tsx (1)
61-61:⚠️ Potential issueFix the unused @ts-expect-error directive.
The pipeline has detected an unused @ts-expect-error directive on this line.
- //@ts-expect-error todo + // TODO: Handle additional click event actions properly🧰 Tools
🪛 GitHub Check: build-and-deploy
[failure] 61-61:
Unused '@ts-expect-error' directive.🪛 GitHub Actions: CI
[error] 61-61: Unused '@ts-expect-error' directive.
🧹 Nitpick comments (3)
src/react/MessageFormatted.tsx (3)
82-85: Remove duplicate italic style application.The italic style is being applied twice in the applyStyles array.
italic && messageFormatStylesMap.italic, bold && messageFormatStylesMap.bold, - italic && messageFormatStylesMap.italic, underlined && messageFormatStylesMap.underlined,
64-66: Consider using consistent async/await pattern for clipboard operations.For consistency with the new implementation at line 56, consider updating this clipboard operation to use async/await.
- onClick () { - void navigator.clipboard.writeText(clickEvent.value) + async onClick () { + try { + await navigator.clipboard.writeText(clickEvent.value) + } catch (error) { + console.error('Failed to copy to clipboard:', error) + } }
48-57: Add error handling for clipboard operations.Consider adding error handling for the clipboard operation to provide better user feedback if the operation fails.
async onClick () { const promptMessageText = `Open "${clickEvent.value}"?` const confirm = await showOptionsModal(promptMessageText, ['Open', 'Copy'], { cancel: true }) if (confirm === 'Open') { openURL(clickEvent.value) } else if (confirm === 'Copy') { - void navigator.clipboard.writeText(clickEvent.value) + try { + await navigator.clipboard.writeText(clickEvent.value) + } catch (error) { + console.error('Failed to copy to clipboard:', error) + } } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/react/MessageFormatted.tsx(5 hunks)
🧰 Additional context used
🪛 GitHub Actions: CI
src/react/MessageFormatted.tsx
[error] 61-61: Unused '@ts-expect-error' directive.
🔇 Additional comments (6)
src/react/MessageFormatted.tsx (6)
9-9: Good addition of showOptionsModal import for the new feature.This import is necessary for implementing the new chat link prompt screen, which aligns with the PR objective.
46-46: Good enhancement to support the 'open_file' action type.This change extends the click handling to support file links in addition to URLs, which matches the vanilla client functionality mentioned in the PR objectives.
48-57: Nice implementation of the chat link prompt with multiple options.The async implementation with a modal offering both "Open" and "Copy" options provides a better user experience than a simple confirmation dialog. This matches the PR objective of adding a better chat link prompt screen.
80-80: Good addition of clickEvent style in the applyStyles array.This ensures that clickable elements in the chat display a pointer cursor, improving usability by indicating interactive elements to users.
90-90: Fix for style application by using semicolons instead of spaces.This change correctly joins CSS styles with semicolons instead of spaces, ensuring proper style application.
148-148: Good addition of the clickEvent style to messageFormatStylesMap.This style definition ensures that chat messages with click events display a pointer cursor, providing visual feedback that they're interactive.
| @@ -80,7 +86,7 @@ export const MessagePart = ({ part, ...props }: { part: MessageFormatPart } & Co | |||
| obfuscated && messageFormatStylesMap.obfuscated | |||
| ].filter(a => a !== false && a !== undefined).filter(Boolean) | |||
|
|
|||
| return <span title={hoverItemText} style={parseInlineStyle(applyStyles.join(' '))} {...clickProps} {...props}>{text}</span> | |||
There was a problem hiding this comment.
that makes sense for me, but wait, how did it work before then
There was a problem hiding this comment.
I don't thirk it did. Only one style should've been able to apply.
User description
This adds a chat link prompt screen with the same open and copy option that the Vanilla client offers.
Also show a pointer cursor when hovering over messages with click events in chat as well as allow open_file click event actions.
PR Type
Enhancement
Description
Added a chat link prompt screen with options.
Implemented pointer cursor for clickable chat messages.
Enhanced
clickEventhandling foropen_urlandopen_file.Improved styling and functionality for message parts.
Changes walkthrough 📝
MessageFormatted.tsx
Enhanced chat link handling and message interactivitysrc/react/MessageFormatted.tsx
showOptionsModalfor chat link prompts.clickEventhandling foropen_urlandopen_file.Summary by CodeRabbit