File size: 2,656 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 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>
);
}
|