🎨 Palette: Add tooltips to message branch navigation

[cungminh2710]

Add tooltips to the message branch navigation buttons to improve accessibility and discoverability. Includes unit tests for the new functionality.

---

PR created automatically by Jules for task 13855804824030503634 started by @cungminh2710

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
hyperlocalise	Ignored		May 31, 2026 11:51pm

[greptile-apps]

Greptile Summary

This PR adds Tooltip wrappers to MessageBranchPrevious and MessageBranchNext, displaying "Previous branch" / "Next branch" on hover via TooltipContent side="bottom". The implementation follows the same TooltipTrigger render={<Button>} pattern already used in MessageAction.

• message.tsx: Each branch navigation button is now wrapped in a Tooltip/TooltipTrigger using Base UI's render-prop pattern, keeping a single <button> element in the DOM.
• message.test.tsx: New tests use renderToStaticMarkup to assert the presence of the data-slot="tooltip-trigger" attribute, the correct aria-label values, and the absence of nested buttons.

Confidence Score: 5/5

Safe to merge — the change adds cosmetic tooltip wrappers with no impact on branch navigation logic.

The tooltip wrapping follows the exact same render-prop pattern already established by MessageAction, touches no navigation logic, and includes tests that validate the structural output. No regressions are introduced.

No files require special attention.

Important Files Changed

Filename	Overview
apps/hyperlocalise-web/src/components/ai-elements/message.tsx	Wraps MessageBranchPrevious and MessageBranchNext buttons in Tooltip/TooltipTrigger using the render-prop pattern, consistent with MessageAction's existing implementation.
apps/hyperlocalise-web/src/components/ai-elements/message.test.tsx	New unit tests using renderToStaticMarkup verify tooltip-trigger data-slot and aria-label attributes, and assert no nested buttons are produced by the render prop pattern.

Sequence Diagram

sequenceDiagram
    participant User
    participant TooltipTrigger
    participant Button
    participant TooltipContent

    User->>TooltipTrigger: mouseenter / focus
    TooltipTrigger->>Button: merged event handlers (render prop)
    TooltipTrigger->>TooltipContent: "opens popup (side=bottom)"
    TooltipContent-->>User: displays "Previous branch" / "Next branch"
    User->>Button: click (when enabled)
    Button->>Button: goToPrevious() / goToNext()

Loading

_{Reviews (2): Last reviewed commit: "🎨 Palette: Add tooltips to message bran..." | Re-trigger Greptile}

[greptile-apps]

Tests don't verify tooltip text content

The tests check for structural attributes (data-slot, aria-label) but never assert that the tooltip content strings "Previous branch" / "Next branch" are actually present in the output. If someone accidentally swaps the tooltip text between the two components or changes the strings, these tests would still pass. Since TooltipContent renders via TooltipPrimitive.Portal, its content is emitted inline by renderToStaticMarkup, so a check like expect(markup).toContain('>Previous branch<') would work and would catch regressions in the tooltip label.

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/hyperlocalise-web/src/components/ai-elements/message.test.tsx
Line: 17-22

Comment:
**Tests don't verify tooltip text content**

The tests check for structural attributes (`data-slot`, `aria-label`) but never assert that the tooltip content strings `"Previous branch"` / `"Next branch"` are actually present in the output. If someone accidentally swaps the tooltip text between the two components or changes the strings, these tests would still pass. Since `TooltipContent` renders via `TooltipPrimitive.Portal`, its content is emitted inline by `renderToStaticMarkup`, so a check like `expect(markup).toContain('>Previous branch<')` would work and would catch regressions in the tooltip label.

How can I resolve this? If you propose a fix, please make it concise.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!