feat: Add indexing status badge to chat view (#4429)

[hannesrudolph]

Fixes #4429

Description

This PR adds an indexing status badge to the chat view, providing users with real-time feedback on the status of codebase indexing. The badge indicates whether indexing is in progress, completed, or has failed, and includes a tooltip with more detailed information.

Changes Made

• webview-ui/src/components/chat/IndexingStatusBadge.tsx: Created a new component to display the indexing status. It includes a status dot, a progress ring for in-progress states, and a tooltip for detailed status messages.
• webview-ui/src/components/chat/ChatView.tsx: Integrated the IndexingStatusBadge into the chat text area.
• webview-ui/src/components/chat/ChatTextArea.tsx: Added the IndexingStatusDot component next to the other action buttons in the text area.
• webview-ui/src/App.tsx: Implemented the onNavigateToSettings handler to allow users to click the badge and be taken to the relevant experimental settings section.

Testing

• Manually tested the indexing status badge in the following states:
  • not_started
  • in_progress
  • done
  • failed
• Verified that the tooltip displays the correct information for each status.
• Confirmed that clicking the badge navigates to the 'Experimental' settings tab.

Checklist

• Code follows project style guidelines
• Self-review completed
• Comments added for complex logic
• Documentation updated (if needed)
• No breaking changes

indexing.notification.mp4

---

Important

Add indexing status badge to chat view with localization and testing support.

• UI Components:
  • Add IndexingStatusBadge.tsx to display indexing status with a dot, progress ring, and tooltip.
  • Integrate IndexingStatusBadge into ChatView.tsx and ChatTextArea.tsx.
• Functionality:
  • Implement onNavigateToSettings in App.tsx to navigate to settings on badge click.
  • Add IndexingStatus and IndexingStatusUpdateMessage interfaces in ExtensionMessage.ts.
• Testing:
  • Add tests for IndexingStatusBadge in IndexingStatusBadge.test.tsx.
  • Update ChatTextArea.test.tsx to clear mock calls related to IndexingStatusBadge.
• Localization:
  • Update chat.json in 20 language files to include indexing status translations.
• Misc:
  • Add useTooltip hook in useTooltip.ts for tooltip management.

^{This description was created by for fa460da. You can customize this summary. It will automatically update as commits are pushed.}

[daniel-lxs]

Looking at the changes in App.tsx, the onNavigateToSettings prop name suggests it could navigate to any settings section, but the implementation is hardcoded to navigate to the 'experimental' section. Consider either:

1. Renaming it to be more specific (e.g., onNavigateToExperimentalSettings), or
2. Making it more generic by accepting a section parameter: onNavigateToSettings={(section) => { switchTab('settings'); setCurrentSection(section); }}

This would make the component more reusable if other features need to navigate to different settings sections.

[hannesrudolph]

All review feedback addressed. Tests passing.

[hannesrudolph]

Fixed failing CI checks:

• Added missing translations for all locales (placeholder English values)
• All tests passing
• Translation check now passes

[hannesrudolph]

@daniel-lxs I think we've got it!?

[mrubens]

Hmm, it's very visually prominent in indexing mode and doesn't look that much like the rest of the UI. Think we can at least get rid of the yellow ring?

[daniel-lxs]

@mrubens
I removed the ring and the color:

Now the color of the status only appears on hover:

Let me know what you think

[hannesrudolph]

@daniel-lxs is not indexed does it show the color (without having to hover) while its indexing and the progress ring? How about when there is an error, does it show the color red without having to hover?

[daniel-lxs]

@hannesrudolph
It won't show any color if it's not hovered to make it less prominent.

But we could also pick less saturated colors.

What do you think?

[hannesrudolph]

Sure less saturated would work. I think its important that the user knows if indexing is working, not working, or in progress is all..

[daniel-lxs]

@hannesrudolph
Not hovered:

On hover:

[hannesrudolph]

I like that! and is there still a progress ring for when its yellow (indexing)?

[daniel-lxs]

@hannesrudolph

No ring at all, just a slightly pulsating yellow dot when it's indexing

[mrubens]

Nice!