File size: 2,612 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 83 | import { useTranslation } from "react-i18next";
import { IoChevronDown, IoChevronForward } from "react-icons/io5";
import { I18nKey } from "#/i18n/declaration";
import { PluginSpec } from "#/api/conversation-service/agent-server-conversation-service.types";
import { Typography } from "#/ui/typography";
import { PluginLaunchParameterInput } from "./plugin-launch-parameter-input";
export interface PluginLaunchPluginSectionProps {
plugin: PluginSpec;
originalIndex: number;
isExpanded: boolean;
onToggle: () => void;
getPluginDisplayName: (plugin: PluginSpec) => string;
onParameterChange: (
pluginIndex: number,
paramKey: string,
value: unknown,
) => void;
}
export function PluginLaunchPluginSection({
plugin,
originalIndex,
isExpanded,
onToggle,
getPluginDisplayName,
onParameterChange,
}: PluginLaunchPluginSectionProps) {
const { t } = useTranslation("openhands");
const hasParams =
plugin.parameters && Object.keys(plugin.parameters).length > 0;
if (!hasParams) {
return null;
}
return (
<div className="rounded-lg border border-[var(--oh-border)] bg-tertiary">
<button
type="button"
onClick={onToggle}
className="flex w-full items-center justify-between px-4 py-3 text-left hover:bg-base-tertiary rounded-t-lg cursor-pointer"
data-testid={`plugin-section-${originalIndex}`}
>
<Typography.Text className="text-base font-normal">
{getPluginDisplayName(plugin)}
</Typography.Text>
{isExpanded ? (
<IoChevronDown className="h-5 w-5 text-white" />
) : (
<IoChevronForward className="h-5 w-5 text-white" />
)}
</button>
{isExpanded && (
<div className="border-t border-[var(--oh-border-subtle)] px-4 pb-3">
{plugin.ref && (
<div className="mb-2 text-sm text-white">
{t(I18nKey.LAUNCH$PLUGIN_REF)} {plugin.ref}
</div>
)}
{plugin.repo_path && (
<div className="mb-2 text-sm text-white">
{t(I18nKey.LAUNCH$PLUGIN_PATH)} {plugin.repo_path}
</div>
)}
<div className="flex flex-col gap-4">
{Object.entries(plugin.parameters || {}).map(([key, value]) => (
<PluginLaunchParameterInput
key={key}
pluginIndex={originalIndex}
paramKey={key}
paramValue={value}
onParameterChange={onParameterChange}
/>
))}
</div>
</div>
)}
</div>
);
}
|