File size: 1,776 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 | import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";
import { ModalBackdrop } from "../modal-backdrop";
import { MODAL_MAX_WIDTH_VIEWPORT, modalWidthClassName } from "../modal-body";
import { cn } from "#/utils/utils";
import { SettingsForm } from "./settings-form";
import { Settings } from "#/types/settings";
import { DEFAULT_SETTINGS } from "#/services/settings";
import { HelpLink } from "#/ui/help-link";
import { modalTitleClassName } from "#/utils/modal-classes";
import { buildAgentCanvasPath } from "#/utils/base-path";
interface SettingsModalProps {
settings?: Settings;
onClose: () => void;
}
export function SettingsModal({ onClose, settings }: SettingsModalProps) {
const { t } = useTranslation("openhands");
return (
<ModalBackdrop>
<div
data-testid="ai-config-modal"
className={cn(
"bg-[var(--oh-surface)] m-4 p-6 rounded-xl flex flex-col gap-[17px] border border-[var(--oh-border)] api-configuration-modal",
modalWidthClassName("md"),
MODAL_MAX_WIDTH_VIEWPORT,
)}
>
<span className={modalTitleClassName}>
{t(I18nKey.AI_SETTINGS$TITLE)}
</span>
<HelpLink
testId="advanced-settings-link"
text={`${t(I18nKey.SETTINGS$DESCRIPTION)}. ${t(I18nKey.SETTINGS$FOR_OTHER_OPTIONS)} ${t(I18nKey.COMMON$SEE)}`}
linkText={t(I18nKey.COMMON$ADVANCED_SETTINGS)}
href={buildAgentCanvasPath("/settings")}
suffix="."
size="settings"
linkColor="white"
suffixClassName="text-white"
/>
<SettingsForm
settings={settings || DEFAULT_SETTINGS}
onClose={onClose}
/>
</div>
</ModalBackdrop>
);
}
|