mirror of
https://github.com/OpenHands/OpenHands.git
synced 2025-12-26 05:48:36 +08:00
feat(frontend): set descriptive text for all options in the change agent button (#11732)
This commit is contained in:
Hiep Le
GitHub
parent
bc86796a67
commit
8c3f93ddc4
@ -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<HTMLButtonElement>) => 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"
|
||||
>
|
||||
<ContextMenuListItem
|
||||
testId="code-option"
|
||||
onClick={handleCodeClick}
|
||||
className={contextMenuListItemClassName}
|
||||
>
|
||||
<ContextMenuIconText
|
||||
<ContextMenuIconTextWithDescription
|
||||
icon={CodeTagIcon}
|
||||
text={t(I18nKey.COMMON$CODE)}
|
||||
className={contextMenuIconTextClassName}
|
||||
title={t(I18nKey.COMMON$CODE)}
|
||||
description={t(I18nKey.COMMON$CODE_AGENT_DESCRIPTION)}
|
||||
/>
|
||||
</ContextMenuListItem>
|
||||
<ContextMenuListItem
|
||||
@ -70,10 +65,10 @@ export function ChangeAgentContextMenu({
|
||||
onClick={handlePlanClick}
|
||||
className={contextMenuListItemClassName}
|
||||
>
|
||||
<ContextMenuIconText
|
||||
<ContextMenuIconTextWithDescription
|
||||
icon={LessonPlanIcon}
|
||||
text={t(I18nKey.COMMON$PLAN)}
|
||||
className={contextMenuIconTextClassName}
|
||||
title={t(I18nKey.COMMON$PLAN)}
|
||||
description={t(I18nKey.COMMON$PLAN_AGENT_DESCRIPTION)}
|
||||
/>
|
||||
</ContextMenuListItem>
|
||||
</ContextMenu>
|
||||
|
||||
@ -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 (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col gap-1 justify-center hover:bg-[#5C5D62] rounded p-2",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<ContextMenuIconText
|
||||
icon={icon}
|
||||
text={title}
|
||||
className="px-0"
|
||||
iconClassName={iconClassName}
|
||||
/>
|
||||
<Typography.Text className="text-[#A3A3A3] text-[10px] font-normal whitespace-pre-wrap break-words">
|
||||
{description}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -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",
|
||||
}
|
||||
|
||||
@ -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": "Окресліть цілі, структуруйте завдання та сплануйте наступні кроки."
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user