Skip to content

Missing tooltips in ChatInterface header & input buttons #270

Description

@KiKaraage

When customizing Shelley, I noticed some buttons are missing tooltips, especially on the chat header and input area (New Conversation, menu button, attach files, voice record, Send). Then I also notice that Delete Conversation button for archived conversation uses browser tooltip instead of Shelley-styled tooltips.

Screencast.From.2026-08-22.14-20-25.webm

I consult and got some findings:

  • These buttons in ChatInterface, MessageInput, and ChatOverflowMenu has aria-label but not v-tooltip, which is required for Vue/PrimeVue. This seems to be unsolved during migration from React to Vue.
  • The "Restore" button in ConversationDrawerRow uses v-tooltip.top="ctx.t('restore')" and gets PrimeVue styling. The "Delete Permanently" button lives in the DeleteButton render function as a plain h() vnode with title: ctx.t("deletePermanently"), so it gets the browser's native tooltip instead.

I asked further and found more buttons that hasn't had v-tooltip covered, here's the full list (including the points above):

  • ChatInterface & MessageInput
    • ChatInterface.vue.btn-new (newConversation), hamburger (openConversations), overflow kebab trigger (moreOptions)
    • MessageInput.vue — attach, voice, send (both split-main and regular)
  • ConversationDrawer (for mobile header buttons)
    • newConversation button (line ~120)
    • closeConversations button (line ~136)
  • ConversationDrawerRow — DeleteButton render function
    • "Delete Permanently" trash button, plus the confirm-state delete/cancel buttons (all use raw title:)
  • MessageActionBar (though it uses data-tooltip="Copy" instead of v-tooltip)
    • Copy button (line ~9)
    • Fork conversation from here button (line ~44)
    • Details button (line ~68)
  • CommitPicker
    • Trigger button (line ~16)
    • Close button (line ~41)
  • Modal
    • Close modal button (line ~34)
  • All tool collapse/expand buttons (20 components)
    • Every tool component's Collapse/Expand toggle button — BashTool, GenericTool, ThinkingContent, SubagentTool, BrowserConsoleLogsTool, BrowserEmulateTool, BrowserEvalTool, BrowserNavigateTool, BrowserNetworkTool, BrowserProfileTool, BrowserResizeTool, BrowserScreencastTool, BrowserAccessibilityTool, ChangeDirTool, KeywordSearchTool, LLMOneShotTool, ReadImageTool, ScreenshotTool, WebSearchTool, SystemPromptView.
  • OutputIframeTool
    • Download button (line ~36)
    • "Open in new tab" button (line ~58)
  • PatchTool (renamed from DiffPatchTool?)
    • "Open in editor" button (line ~47)
    • Side-by-side/inline toggle (line ~70)

My own patch haven't covered the full list, only the chat header & input buttons, so feel free to implement it!

Also I've sent the email to David on CLA signing (for my current PR)...

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions