| import React from "react"; |
| import { useTranslation } from "react-i18next"; |
| import { I18nKey } from "#/i18n/declaration"; |
| 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 { ContextMenuIconTextWithDescription } from "../context-menu/context-menu-icon-text-with-description"; |
| import { useClickOutsideElement } from "#/hooks/use-click-outside-element"; |
| import { cn } from "#/utils/utils"; |
| import type { ConversationMode } from "#/stores/conversation-store"; |
|
|
| interface ChangeAgentContextMenuProps { |
| activeMode: ConversationMode; |
| onClose: () => void; |
| onCodeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void; |
| onPlanClick?: (event: React.MouseEvent<HTMLButtonElement>) => void; |
| } |
|
|
| export function ChangeAgentContextMenu({ |
| activeMode, |
| onClose, |
| onCodeClick, |
| onPlanClick, |
| }: ChangeAgentContextMenuProps) { |
| const { t } = useTranslation("openhands"); |
| const menuRef = useClickOutsideElement<HTMLUListElement>(onClose); |
|
|
| const handleCodeClick = (event: React.MouseEvent<HTMLButtonElement>) => { |
| event.preventDefault(); |
| event.stopPropagation(); |
| onCodeClick?.(event); |
| onClose(); |
| }; |
|
|
| const handlePlanClick = (event: React.MouseEvent<HTMLButtonElement>) => { |
| event.preventDefault(); |
| event.stopPropagation(); |
| onPlanClick?.(event); |
| onClose(); |
| }; |
|
|
| return ( |
| <ContextMenu |
| ref={menuRef} |
| testId="change-agent-context-menu" |
| position="top" |
| alignment="left" |
| className="min-h-fit mb-2 min-w-[195px] max-w-[195px]" |
| > |
| <ContextMenuListItem |
| testId="code-option" |
| onClick={handleCodeClick} |
| className={cn( |
| activeMode === "code" && "bg-[var(--oh-interactive-hover)]", |
| )} |
| > |
| <ContextMenuIconTextWithDescription |
| icon={CodeTagIcon} |
| title={t(I18nKey.COMMON$CODE)} |
| description={t(I18nKey.COMMON$CODE_AGENT_DESCRIPTION)} |
| isActive={activeMode === "code"} |
| /> |
| </ContextMenuListItem> |
| <ContextMenuListItem |
| testId="plan-option" |
| onClick={handlePlanClick} |
| className={cn( |
| activeMode === "plan" && "bg-[var(--oh-interactive-hover)]", |
| )} |
| > |
| <ContextMenuIconTextWithDescription |
| icon={LessonPlanIcon} |
| title={t(I18nKey.COMMON$PLAN)} |
| description={t(I18nKey.COMMON$PLAN_AGENT_DESCRIPTION)} |
| isActive={activeMode === "plan"} |
| /> |
| </ContextMenuListItem> |
| </ContextMenu> |
| ); |
| } |
|
|
