From 8c3f93ddc4ba083654223e849ad872883c79d059 Mon Sep 17 00:00:00 2001 From: Hiep Le <69354317+hieptl@users.noreply.github.com> Date: Fri, 14 Nov 2025 00:10:15 +0700 Subject: [PATCH] feat(frontend): set descriptive text for all options in the change agent button (#11732) --- .../chat/change-agent-context-menu.tsx | 21 ++++------ ...ontext-menu-icon-text-with-description.tsx | 39 +++++++++++++++++++ frontend/src/i18n/declaration.ts | 2 + frontend/src/i18n/translation.json | 32 +++++++++++++++ 4 files changed, 81 insertions(+), 13 deletions(-) create mode 100644 frontend/src/components/features/context-menu/context-menu-icon-text-with-description.tsx diff --git a/frontend/src/components/features/chat/change-agent-context-menu.tsx b/frontend/src/components/features/chat/change-agent-context-menu.tsx index 6e88ce97d4..69961deae8 100644 --- a/frontend/src/components/features/chat/change-agent-context-menu.tsx +++ b/frontend/src/components/features/chat/change-agent-context-menu.tsx @@ -5,19 +5,14 @@ import CodeTagIcon from "#/icons/code-tag.svg?react"; import LessonPlanIcon from "#/icons/lesson-plan.svg?react"; import { ContextMenu } from "#/ui/context-menu"; import { ContextMenuListItem } from "../context-menu/context-menu-list-item"; -import { ContextMenuIconText } from "../context-menu/context-menu-icon-text"; +import { ContextMenuIconTextWithDescription } from "../context-menu/context-menu-icon-text-with-description"; import { useClickOutsideElement } from "#/hooks/use-click-outside-element"; import { cn } from "#/utils/utils"; -import { CONTEXT_MENU_ICON_TEXT_CLASSNAME } from "#/utils/constants"; const contextMenuListItemClassName = cn( "cursor-pointer p-0 h-auto hover:bg-transparent", - CONTEXT_MENU_ICON_TEXT_CLASSNAME, ); -const contextMenuIconTextClassName = - "gap-2 p-2 hover:bg-[#5C5D62] rounded h-[30px]"; - interface ChangeAgentContextMenuProps { onClose: () => void; onCodeClick?: (event: React.MouseEvent) => void; @@ -52,17 +47,17 @@ export function ChangeAgentContextMenu({ testId="change-agent-context-menu" position="top" alignment="left" - className="min-h-fit min-w-[195px] mb-2" + className="min-h-fit mb-2 min-w-[195px] max-w-[195px] gap-0" > - - diff --git a/frontend/src/components/features/context-menu/context-menu-icon-text-with-description.tsx b/frontend/src/components/features/context-menu/context-menu-icon-text-with-description.tsx new file mode 100644 index 0000000000..fd505fef58 --- /dev/null +++ b/frontend/src/components/features/context-menu/context-menu-icon-text-with-description.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import { ContextMenuIconText } from "./context-menu-icon-text"; +import { Typography } from "#/ui/typography"; +import { cn } from "#/utils/utils"; + +interface ContextMenuIconTextWithDescriptionProps { + icon: React.ComponentType<{ className?: string }>; + title: string; + description: string; + className?: string; + iconClassName?: string; +} + +export function ContextMenuIconTextWithDescription({ + icon, + title, + description, + className, + iconClassName, +}: ContextMenuIconTextWithDescriptionProps) { + return ( +
+ + + {description} + +
+ ); +} diff --git a/frontend/src/i18n/declaration.ts b/frontend/src/i18n/declaration.ts index 7fabded8df..52f0616575 100644 --- a/frontend/src/i18n/declaration.ts +++ b/frontend/src/i18n/declaration.ts @@ -944,4 +944,6 @@ export enum I18nKey { COMMON$ASK = "COMMON$ASK", COMMON$PLAN = "COMMON$PLAN", COMMON$LET_S_WORK_ON_A_PLAN = "COMMON$LET_S_WORK_ON_A_PLAN", + COMMON$CODE_AGENT_DESCRIPTION = "COMMON$CODE_AGENT_DESCRIPTION", + COMMON$PLAN_AGENT_DESCRIPTION = "COMMON$PLAN_AGENT_DESCRIPTION", } diff --git a/frontend/src/i18n/translation.json b/frontend/src/i18n/translation.json index 992bc69ca7..1a542fec6d 100644 --- a/frontend/src/i18n/translation.json +++ b/frontend/src/i18n/translation.json @@ -15102,5 +15102,37 @@ "tr": "Bir plan üzerinde çalışalım", "de": "Lassen Sie uns an einem Plan arbeiten", "uk": "Давайте розробимо план" + }, + "COMMON$CODE_AGENT_DESCRIPTION": { + "en": "Write, edit, and debug with AI assistance in real time.", + "ja": "AIの支援をリアルタイムで受けながら、コードの作成、編集、デバッグを行いましょう。", + "zh-CN": "实时在 AI 协助下编写、编辑和调试。", + "zh-TW": "即時在 AI 協助下編寫、編輯和除錯。", + "ko-KR": "AI의 지원을 받아 실시간으로 작성, 편집 및 디버깅하세요.", + "no": "Skriv, rediger og feilsøk med AI-assistanse i sanntid.", + "it": "Scrivi, modifica e esegui il debug con assistenza AI in tempo reale.", + "pt": "Escreva, edite e depure com assistência de IA em tempo real.", + "es": "Escribe, edita y depura con ayuda de IA en tiempo real.", + "ar": "اكتب وعدّل وصحّح الأخطاء بمساعدة الذكاء الاصطناعي في الوقت الفعلي.", + "fr": "Rédigez, modifiez et déboguez avec l’aide de l’IA en temps réel.", + "tr": "AI desteğiyle gerçek zamanlı olarak yazın, düzenleyin ve hata ayıklayın.", + "de": "Schreiben, bearbeiten und debuggen Sie mit KI-Unterstützung in Echtzeit.", + "uk": "Пишіть, редагуйте та налагоджуйте з підтримкою ШІ у реальному часі." + }, + "COMMON$PLAN_AGENT_DESCRIPTION": { + "en": "Outline goals, structure tasks, and map your next steps.", + "ja": "目標を明確にし、タスクを構造化し、次のステップを計画しましょう。", + "zh-CN": "概述目标、结构化任务，并规划下一步。", + "zh-TW": "概述目標、結構化任務，並規劃下一步。", + "ko-KR": "목표를 개요하고, 작업을 구조화하며, 다음 단계를 구상하세요.", + "no": "Skisser mål, strukturer oppgaver og planlegg dine neste steg.", + "it": "Definisci gli obiettivi, struttura le attività e pianifica i prossimi passi.", + "pt": "Esboce objetivos, estruture tarefas e trace seus próximos passos.", + "es": "Define objetivos, estructura tareas y planifica tus próximos pasos.", + "ar": "حدد الأهداف، نظم المهام، وارسم خطواتك التالية.", + "fr": "Dressez des objectifs, structurez vos tâches et planifiez vos prochaines étapes.", + "tr": "Hedefleri belirtin, görevleri yapılandırın ve sonraki adımlarınızı belirleyin.", + "de": "Umreißen Sie Ziele, strukturieren Sie Aufgaben und planen Sie Ihre nächsten Schritte.", + "uk": "Окресліть цілі, структуруйте завдання та сплануйте наступні кроки." } }