Skip to content

ECHO-429 ECHO-430 Upload audio btn tooltip fix, 'Upload Audio' button and modal click propagation fix#270

Merged
ussaama merged 4 commits intomainfrom
upload-audio-btn-tooltip-fx
Aug 21, 2025
Merged

ECHO-429 ECHO-430 Upload audio btn tooltip fix, 'Upload Audio' button and modal click propagation fix#270
ussaama merged 4 commits intomainfrom
upload-audio-btn-tooltip-fx

Conversation

@ussaama
Copy link
Copy Markdown
Contributor

@ussaama ussaama commented Aug 20, 2025

Summary by CodeRabbit

  • New Features

    • Hover tooltip for the Upload Conversations action moved to the upload button.
    • Added “Upload conversations” translations for en, de, es, fr, and nl.
  • Bug Fixes

    • Corrected authentication text in de and nl; adjusted Spanish failure label (“Failed” → “Error”).
  • Style

    • Simplified conversation header by rendering the upload control directly and removing extra wrapper/UI chrome.
  • Chores

    • Updated locale metadata and formatting; no behavioral changes.

@linear
Copy link
Copy Markdown

linear bot commented Aug 20, 2025

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Aug 20, 2025

Walkthrough

Moved the upload tooltip from ConversationAccordion into UploadConversationDropzone, added the "Upload conversations" i18n key, updated locale .po/.ts files and small translation tweaks. Public APIs and exported signatures unchanged.

Changes

Cohort / File(s) Summary
Conversation accordion UI
echo/frontend/src/components/conversation/ConversationAccordion.tsx
Removed surrounding Tooltip/div for the upload control; now renders UploadConversationDropzone directly and stops click propagation.
Dropzone upload UI
echo/frontend/src/components/dropzone/UploadConversationDropzone.tsx
Wrapped upload Button in a Tooltip with label t\Upload conversations``; preserved icon/text/behavior.
Locales (.po) additions/refs
echo/frontend/src/locales/*.po
Added “Upload conversations” entries and updated source references; minor Spanish "Failed" → "Error".
Locales (.ts) payload edits
echo/frontend/src/locales/*.ts
No API changes; minor translation text/format tweaks (de-DE punctuation, nl-NL auth string fix), trivial formatting edits.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective Addressed Explanation
Fix 'Upload Audio' button tooltip glitch (ECHO-429)

Assessment against linked issues: Out-of-scope changes

Code Change Explanation
German auth message punctuation changed (echo/frontend/src/locales/de-DE.ts) Translation punctuation tweak not related to tooltip behavior.
Dutch auth message text corrected (echo/frontend/src/locales/nl-NL.ts) Translation correction unrelated to tooltip fix.
Spanish "Failed" → "Error" change (echo/frontend/src/locales/es-ES.po) Generic status string adjustment outside tooltip objective.

Possibly related PRs

LGTM.

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch upload-audio-btn-tooltip-fx

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@ussaama ussaama requested a review from spashii August 20, 2025 13:08
@ussaama ussaama enabled auto-merge August 20, 2025 13:09
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 11

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
echo/frontend/src/components/dropzone/UploadConversationDropzone.tsx (1)

248-252: PropsWithChildren is unused here. Drop it for clarity.

This component never renders children; simplify the signature.

Apply this diff:

-export const UploadConversationDropzone = (
-  props: PropsWithChildren<{
-    projectId: string;
-  }>,
-) => {
+export const UploadConversationDropzone = (props: { projectId: string }) => {
📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 24728e0 and a579216.

📒 Files selected for processing (12)
  • echo/frontend/src/components/conversation/ConversationAccordion.tsx (1 hunks)
  • echo/frontend/src/components/dropzone/UploadConversationDropzone.tsx (1 hunks)
  • echo/frontend/src/locales/de-DE.po (27 hunks)
  • echo/frontend/src/locales/de-DE.ts (1 hunks)
  • echo/frontend/src/locales/en-US.po (27 hunks)
  • echo/frontend/src/locales/en-US.ts (1 hunks)
  • echo/frontend/src/locales/es-ES.po (27 hunks)
  • echo/frontend/src/locales/es-ES.ts (1 hunks)
  • echo/frontend/src/locales/fr-FR.po (27 hunks)
  • echo/frontend/src/locales/fr-FR.ts (1 hunks)
  • echo/frontend/src/locales/nl-NL.po (28 hunks)
  • echo/frontend/src/locales/nl-NL.ts (1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (5)
echo/frontend/src/components/conversation/ConversationAccordion.tsx (1)
echo/frontend/src/components/dropzone/UploadConversationDropzone.tsx (1)
  • UploadConversationDropzone (248-815)
echo/frontend/src/locales/de-DE.ts (2)
echo/frontend/src/locales/en-US.ts (1)
  • messages (1-1)
echo/frontend/src/locales/es-ES.ts (1)
  • messages (1-1)
echo/frontend/src/locales/en-US.ts (3)
echo/frontend/src/locales/de-DE.ts (1)
  • messages (1-1)
echo/frontend/src/locales/es-ES.ts (1)
  • messages (1-1)
echo/frontend/src/locales/nl-NL.ts (1)
  • messages (1-1)
echo/frontend/src/locales/nl-NL.ts (3)
echo/frontend/src/locales/en-US.ts (1)
  • messages (1-1)
echo/frontend/src/locales/de-DE.ts (1)
  • messages (1-1)
echo/frontend/src/locales/es-ES.ts (1)
  • messages (1-1)
echo/frontend/src/locales/es-ES.ts (1)
echo/frontend/src/locales/en-US.ts (1)
  • messages (1-1)
⏰ 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). (1)
  • GitHub Check: ci-check-server
🔇 Additional comments (13)
echo/frontend/src/locales/es-ES.ts (1)

1-1: Critical: Missing locale entries for “Upload conversations”

I see the t\Upload conversations`usage and the key4Fr6DAinUploadConversationDropzone.tsx, but no matching entry in any of the compiled locale catalogs (*.ts) or .po` files. Without these, translations will fall back or break in non‐default locales. Please:

• echo/frontend/src/locales/es-ES.ts
– Add "4Fr6DA": ["Subir conversaciones"],
• echo/frontend/src/locales/en-US.ts, de-DE.ts, fr-FR.ts, nl-NL.ts
– Add 4Fr6DA with the appropriate translations
• All .po files in echo/frontend/src/locales
– Include
msgid "Upload conversations"
msgstr "Subir conversaciones" (and equivalents for other languages)

After syncing, verify with:

rg -n '"4Fr6DA"' echo/frontend/src/locales/*.ts  
rg -n 'Upload conversations' echo/frontend/src/locales/*.po

Then drop a 🚀 and we’re good to ship. LGTM once fixed.

⛔ Skipped due to learnings
Learnt from: ussaama
PR: Dembrane/echo#180
File: echo/frontend/src/locales/es-ES.ts:1-1
Timestamp: 2025-06-06T05:43:44.935Z
Learning: When users indicate they have already addressed translation issues in locale files, verify the current state before assuming the issue persists. Translation files are often updated in bulk and previously flagged English text may have been properly localized.
echo/frontend/src/locales/de-DE.ts (1)

1-1: Summary mismatch: trailing period claimed, but not in code.

AI summary says “Sie sind nicht authentifiziert.” (with period). The code has “Sie sind nicht authentifiziert” (no period). Code is the source of truth—just flagging the discrepancy.

echo/frontend/src/locales/nl-NL.ts (1)

1-1: LGTM: Authentication string fixed (“Je bent niet ingelogd”) and “Upload conversations” is present (“Gesprekken uploaden”).

Tight and correct.

echo/frontend/src/locales/fr-FR.ts (1)

1-1: Review comment inaccurate: no punctuation mismatch detected in “Upload conversations” translation

Both fr-FR.ts and fr-FR.po use exactly “Télécharger des conversations” (no trailing period), so there’s no inconsistency to resolve.

[sf-100x LGTM]

Likely an incorrect or invalid review comment.

echo/frontend/src/locales/nl-NL.po (1)

3106-3109: Dropzone translations look tight. Placeholders preserved. LGTM.

  • New key “Upload conversations” → “Gesprekken uploaden” reads well and matches UI intent.
  • All Upload flow strings are consistent (“Upload Audio”, “Upload Files”, success/failure states).
  • Placeholder integrity maintained (e.g., {0}, {1}, {MAX_FILES}). Good.

Also applies to: 239-242, 480-483, 577-580, 581-584, 593-596, 884-887, 920-923, 1015-1018, 1173-1176, 1196-1199, 2215-2217, 2364-2367, 2445-2447, 2662-2664, 3099-3101, 3103-3105, 3118-3121, 3134-3137

echo/frontend/src/locales/fr-FR.po (1)

1076-1078: Global locale placeholder integrity verified – ready to merge!

All {0}, {1}, and {MAX_FILES} tokens are intact across de-DE, fr-FR, nl-NL, en-US, and es-ES locales. No ICU issues detected. LGTM 🚀

echo/frontend/src/locales/es-ES.po (1)

2853-2856: New key translation LGTM.

"Upload conversations" → "Subir conversaciones" is accurate and consistent with context.

echo/frontend/src/locales/de-DE.po (1)

2852-2855: Neue Tooltip-Übersetzung passt. LGTM.

"Upload conversations" → "Gespräche hochladen" is correct. No issues spotted across the related dropzone strings.

echo/frontend/src/components/dropzone/UploadConversationDropzone.tsx (3)

488-497: Tooltip addition LGTM, but verify label consistency vs button text.

Tooltip shows “Upload conversations” while the button reads “Upload Audio.” If intentional (conveying that multiple audio files become conversations), carry on. Otherwise, align the wording to reduce cognitive load and i18n churn.

Option A (align tooltip to button, minimal churn):

-<Tooltip label={t`Upload conversations`}>
+<Tooltip label={t`Upload Audio`}>

Option B (align button to tooltip, more explicit semantics):

-  {t`Upload Audio`}
+  {t`Upload conversations`}

488-497: Addresses the tooltip glitch cleanly.

Wrapping the Upload trigger with Mantine Tooltip is the right fix surface. Nicely scoped.


248-252: Summary inconsistency: children aren’t used by this component.

AI summary mentions passing a Plus icon as child via ConversationAccordion, but this component renders its own Button and ignores children. Your current approach is fine; just noting the mismatch to avoid confusion in future refactors.

Confirm that no caller relies on children rendering here. If any do, consider exposing a render prop or an optional “trigger” override.

echo/frontend/src/locales/en-US.ts (1)

1-1: Locale bundle regen LGTM.

New “Upload conversations” key present; no semantic regressions detected. Autogenerated file—no manual changes needed.

echo/frontend/src/locales/en-US.po (1)

216-219: LGTM: reference-only shifts from component relocation

All these are extractor-updated references after moving tooltip logic into UploadConversationDropzone. No string regressions introduced.

Also applies to: 424-427, 448-455, 521-528, 537-540, 832-835, 927-930, 943-947, 975-978, 1003-1006, 1085-1093, 1107-1111, 1581-1584, 1710-1714, 2144-2147, 2191-2193, 2195-2197, 2257-2259, 2291-2293, 2529-2532, 2926-2929, 2930-2933, 2942-2945, 2958-2961

@ussaama ussaama changed the title ECHO-429 Upload audio btn tooltip fx ECHO-429 ECHO-430 Upload audio btn tooltip fix, 'Upload Audio' button and modal click propagation fix Aug 20, 2025
@linear
Copy link
Copy Markdown

linear bot commented Aug 20, 2025

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between fdb1395 and 0d1446d.

📒 Files selected for processing (1)
  • echo/frontend/src/components/conversation/ConversationAccordion.tsx (1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
echo/frontend/src/components/conversation/ConversationAccordion.tsx (1)
echo/frontend/src/components/dropzone/UploadConversationDropzone.tsx (1)
  • UploadConversationDropzone (248-815)
🪛 Biome (2.1.2)
echo/frontend/src/components/conversation/ConversationAccordion.tsx

[error] 783-783: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)


[error] 783-783: Static Elements should not be interactive.

To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.

(lint/a11y/noStaticElementInteractions)

⏰ 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). (1)
  • GitHub Check: ci-check-server
🔇 Additional comments (1)
echo/frontend/src/components/conversation/ConversationAccordion.tsx (1)

783-785: Good catch: removed dead children from UploadConversationDropzone.

The header no longer renders a stray full “Upload Audio” button vs. a compact icon. UX restored, and the tooltip is now owned by the Dropzone. LGTM.

@ussaama ussaama added this pull request to the merge queue Aug 21, 2025
Merged via the queue into main with commit afd78bf Aug 21, 2025
12 checks passed
@ussaama ussaama deleted the upload-audio-btn-tooltip-fx branch August 21, 2025 07:09
spashii pushed a commit that referenced this pull request Nov 18, 2025
… and modal click propagation fix (#270)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- New Features
- Hover tooltip for the Upload Conversations action moved to the upload
button.
- Added “Upload conversations” translations for en, de, es, fr, and nl.

- Bug Fixes
- Corrected authentication text in de and nl; adjusted Spanish failure
label (“Failed” → “Error”).

- Style
- Simplified conversation header by rendering the upload control
directly and removing extra wrapper/UI chrome.

- Chores
  - Updated locale metadata and formatting; no behavioral changes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants