Add Tooltip to hive chat

[tomsmith8]

Task

Opening a new chat on the /workspace page, there is a plus button near the top (next to where the Chat Title is.

Pressing this button opens a new chat but there is currently no Tooltip.

• we should add a tooltip on mouse over/hover
• it should follow same UI tooltips like the side bar (there is actually a new chat tooltip so maybe we should reuse that?)

@stakgraph

CodespaceURL

[stakgraph]

🤖 Processing your request... Stakwork run

I've received your message and started working on it. You'll receive a detailed response shortly.

[stakgraph]

Summary

Stakgraph will add a tooltip to the "plus" button on the /workspace page (next to the Chat Title) to improve usability and maintain UI consistency. The tooltip will appear on hover and match the style of existing sidebar tooltips, potentially reusing the "new chat" tooltip for consistency.

---

Planned Changes

• Add a tooltip to the "plus" button that opens a new chat on the /workspace page.
• Ensure the tooltip appears on mouse hover.
• Match the tooltip's style to existing sidebar tooltips.
• Reuse the existing "new chat" tooltip component if possible.

---

Files/Areas Affected

• /workspace/:uuid page (likely within the WorkspaceMission component or its children)
• Plus button component near the Chat Title
• Tooltip UI components (possibly shared or sidebar tooltip implementation)

---

Next Steps:
Identify the exact plus button component on the /workspace page and implement the tooltip as described above.

[stakgraph]

Summary

This update adds a tooltip to the "plus" button on the /workspace page (Hive Chat), which opens a new chat. The tooltip appears on mouse hover and follows the existing UI style used for tooltips elsewhere in the application, improving user experience and interface consistency.

---

Changes Made

• Tooltip Component

  • Introduced a new styled Tooltip component using styled-components.
  • Tooltip styling matches the sidebar tooltip style, including background color, border radius, font size, and a directional arrow.

• State Management

  • Added a new state variable isNewChatTooltipVisible to control the tooltip's visibility on hover.

• Button Integration

  • Wrapped the "plus" (Add) button in a div with position: relative to anchor the tooltip.
  • Added onMouseEnter and onMouseLeave handlers to the button to toggle the tooltip.
  • Rendered the tooltip with the label "New Chat" above the button when hovered.

---

Architecture Improvements

• UI Consistency

  • Tooltip styling and behavior are consistent with existing sidebar tooltips, ensuring a unified user experience.
  • The tooltip is implemented in a reusable way, making it easy to adapt or extend for similar UI elements in the future.

• Accessibility & Usability

  • Users now receive immediate feedback about the button's function, reducing ambiguity and improving discoverability.

---

Overall Impact:
This change enhances the /workspace chat interface by providing a clear, styled tooltip for the new chat button, aligning with established UI patterns and improving overall usability.

[stakgraph]

Application is live on the right hand side.

[stakgraph]

The code is now available—please review it here:

Code

• Password: UX8M9KMJaukx

[stakgraph]

The changes are ready for review.