Conversation
📝 Walkthrough""" WalkthroughThe changes update the styling and structure of the speaker selector popover trigger in the transcript view, replacing a styled span with a Button component. Additionally, keyboard navigation within the transcript editor is enhanced, allowing users to move between speaker sections using the Up and Down arrow keys, with cyclic navigation and improved key handling. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TranscriptEditor
participant SpeakerSection
User->>TranscriptEditor: Press ArrowUp/ArrowDown
TranscriptEditor->>SpeakerSection: Identify current section and all speaker nodes
alt At section edge
TranscriptEditor->>SpeakerSection: Move selection to adjacent section (wrap if needed)
TranscriptEditor->>TranscriptEditor: Dispatch new selection and scroll into view
else Not at section edge
TranscriptEditor-->>User: No navigation, default behavior
end
Possibly related PRs
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ 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). (2)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/desktop/src/components/right-panel/views/transcript-view.tsx(1 hunks)packages/tiptap/src/transcript/extensions.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,ts,tsx,rs}
Instructions used from:
Sources:
⚙️ CodeRabbit Configuration File
🧬 Code Graph Analysis (2)
apps/desktop/src/components/right-panel/views/transcript-view.tsx (2)
packages/ui/src/components/ui/popover.tsx (2)
Popover(85-85)PopoverTrigger(85-85)packages/ui/src/components/ui/button.tsx (1)
Button(37-89)
packages/tiptap/src/transcript/extensions.ts (1)
packages/tiptap/src/transcript/nodes.ts (1)
SPEAKER_NODE_NAME(8-8)
⏰ 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). (2)
- GitHub Check: ci (windows, windows-latest)
- GitHub Check: ci (macos, macos-latest)
🔇 Additional comments (4)
packages/tiptap/src/transcript/extensions.ts (2)
159-160: LGTM! Clean navigation experience.Adding
!e.shiftKeyto the checkKey function is a good improvement. This prevents the navigation logic from interfering with Shift+Arrow selection behavior, which is the expected user experience.
114-116: Confirm section boundary detection handles nested contentThe logic at packages/tiptap/src/transcript/extensions.ts (lines 114–116) only checks the immediate parent’s offsets (
parentOffset === 0/parentOffset === parent.content.size). If speaker sections can contain nested nodes (e.g. inline marks, child blocks), this may miss edge cases where$fromis inside a deeper node.Please verify or extend the logic to cover nested boundaries—for example by comparing against the section’s absolute start/end positions (using
$from.start(depth)/$from.end(depth)or similar) or by walking up through ancestor offsets.apps/desktop/src/components/right-panel/views/transcript-view.tsx (2)
380-380: LGTM! Improved visual spacing.Increasing the margin from
mt-2tomt-4provides better visual separation for the speaker selector component.
382-392: Excellent improvement! Better semantics and accessibility.Replacing the styled span with a proper Button component significantly improves:
- Semantic HTML structure
- Accessibility (proper button role and keyboard navigation)
- Consistency with the design system
- User experience with proper hover/focus states
The use of
asChildprop with PopoverTrigger is correct, and preserving theonMouseDownhandler maintains the existing interaction behavior.
Modifies the transcript view component to enhance the user display and interaction. The key changes are: - Increases the top margin of the sticky header to 4 units (from 2) - Replaces the underlined span with a button component for better accessibility and styling - Adds a variant, size, and hover styles to the button for a more polished appearance - Prevents the default mouse down behavior on the button to maintain the Popover functionality These changes aim to improve the overall user experience and visual consistency of the transcript view.
This commit adds support for navigating between speaker sections using the up and down arrow keys. When the cursor is at the edge of a speaker section, pressing the up or down arrow key will move the cursor to the previous or next speaker section, respectively. This provides a more intuitive way to navigate long transcripts with multiple speakers.
ComputelessComputer
force-pushed
the
improve-transcript-view
branch
from
d1f3539 to
d4706ee
Compare
2 participants
Changes made: