update
This commit is contained in:
ZacharyZhang-NY committed
1 parent
806200b3d1
commit
5547c29491
216 files changed
+5043
-3352
No files matched your search
@@ -1,12 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
FIELD_INPUT,
|
||||
FIELD_LABEL,
|
||||
FORM_BUTTON,
|
||||
FORM_BUTTON_SECONDARY,
|
||||
FORM_ERROR,
|
||||
FORM_FIELDSET,
|
||||
} from "./form-shared";
|
||||
import { ActionButton, Input } from "../../ui";
|
||||
import { useT } from "../../../i18n";
|
||||
|
||||
interface Props {
|
||||
connectorId: string;
|
||||
@@ -19,6 +13,7 @@ interface DeploymentEntry {
|
||||
}
|
||||
|
||||
export function AzureForm({ connectorId, onSaved }: Props) {
|
||||
const t = useT();
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
const [baseUrl, setBaseUrl] = useState("");
|
||||
const [resourceName, setResourceName] = useState("");
|
||||
@@ -33,7 +28,7 @@ export function AzureForm({ connectorId, onSaved }: Props) {
|
||||
const desktop = window.agentCompany;
|
||||
if (!desktop) return;
|
||||
if (apiKey.trim().length === 0) {
|
||||
setError("API key required.");
|
||||
setError(t("form.azure.errApiKeyRequired"));
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
@@ -70,112 +65,71 @@ export function AzureForm({ connectorId, onSaved }: Props) {
|
||||
event.preventDefault();
|
||||
void handleSubmit();
|
||||
}}
|
||||
className={FORM_FIELDSET}
|
||||
className="space-y-3"
|
||||
>
|
||||
<div>
|
||||
<label className={FIELD_LABEL}>API key</label>
|
||||
<input
|
||||
type="password"
|
||||
value={apiKey}
|
||||
onChange={(event) => setApiKey(event.target.value)}
|
||||
disabled={busy}
|
||||
className={FIELD_INPUT}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={FIELD_LABEL}>Base URL (optional)</label>
|
||||
<input
|
||||
type="url"
|
||||
value={baseUrl}
|
||||
onChange={(event) => setBaseUrl(event.target.value)}
|
||||
disabled={busy}
|
||||
className={FIELD_INPUT}
|
||||
placeholder="https://YOUR-RESOURCE.openai.azure.com/"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={FIELD_LABEL}>Resource name (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={resourceName}
|
||||
onChange={(event) => setResourceName(event.target.value)}
|
||||
disabled={busy}
|
||||
className={FIELD_INPUT}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={FIELD_LABEL}>API version (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={apiVersion}
|
||||
onChange={(event) => setApiVersion(event.target.value)}
|
||||
disabled={busy}
|
||||
className={FIELD_INPUT}
|
||||
placeholder="2024-08-01-preview"
|
||||
/>
|
||||
</div>
|
||||
<Input label={t("form.azure.apiKey")} type="password" value={apiKey} onChange={setApiKey} disabled={busy} />
|
||||
<Input label={t("form.azure.baseUrl")} type="url" value={baseUrl} onChange={setBaseUrl} disabled={busy} placeholder="https://YOUR-RESOURCE.openai.azure.com/" />
|
||||
<Input label={t("form.azure.resourceName")} value={resourceName} onChange={setResourceName} disabled={busy} />
|
||||
<Input label={t("form.azure.apiVersion")} value={apiVersion} onChange={setApiVersion} disabled={busy} placeholder="2024-08-01-preview" />
|
||||
<fieldset className="rounded-md border border-border/50 px-3 py-2">
|
||||
<legend className="px-1 text-[11px] font-medium text-muted-foreground">
|
||||
Deployment map (model id → deployment name)
|
||||
{t("form.azure.deploymentMap")}
|
||||
</legend>
|
||||
<div className="space-y-2">
|
||||
{deployments.map((entry, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={entry.modelId}
|
||||
placeholder="gpt-4o"
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
value={entry.modelId}
|
||||
placeholder="gpt-4o"
|
||||
disabled={busy}
|
||||
onChange={(newVal) =>
|
||||
setDeployments((prev) =>
|
||||
prev.map((p, i) => (i === index ? { ...p, modelId: newVal } : p)),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
value={entry.deploymentName}
|
||||
placeholder="my-gpt4-deployment"
|
||||
disabled={busy}
|
||||
onChange={(newVal) =>
|
||||
setDeployments((prev) =>
|
||||
prev.map((p, i) =>
|
||||
i === index ? { ...p, deploymentName: newVal } : p,
|
||||
),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<ActionButton
|
||||
label={t("form.azure.remove")}
|
||||
disabled={busy}
|
||||
className={FIELD_INPUT}
|
||||
onChange={(event) =>
|
||||
setDeployments((prev) =>
|
||||
prev.map((p, i) => (i === index ? { ...p, modelId: event.target.value } : p)),
|
||||
)
|
||||
}
|
||||
onClick={() => setDeployments((prev) => prev.filter((_, i) => i !== index))}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={entry.deploymentName}
|
||||
placeholder="my-gpt4-deployment"
|
||||
disabled={busy}
|
||||
className={FIELD_INPUT}
|
||||
onChange={(event) =>
|
||||
setDeployments((prev) =>
|
||||
prev.map((p, i) =>
|
||||
i === index ? { ...p, deploymentName: event.target.value } : p,
|
||||
),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy}
|
||||
onClick={() =>
|
||||
setDeployments((prev) => prev.filter((_, i) => i !== index))
|
||||
}
|
||||
className={FORM_BUTTON_SECONDARY}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
<ActionButton
|
||||
label={t("form.azure.addMapping")}
|
||||
disabled={busy}
|
||||
onClick={() =>
|
||||
setDeployments((prev) => [...prev, { modelId: "", deploymentName: "" }])
|
||||
}
|
||||
className={FORM_BUTTON_SECONDARY}
|
||||
>
|
||||
Add mapping
|
||||
</button>
|
||||
onClick={() => setDeployments((prev) => [...prev, { modelId: "", deploymentName: "" }])}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{error ? <div className={FORM_ERROR}>{error}</div> : null}
|
||||
<button type="submit" disabled={busy} className={FORM_BUTTON}>
|
||||
{busy ? "Saving…" : "Save"}
|
||||
</button>
|
||||
{error ? (
|
||||
<div role="alert" className="rounded-md border border-[color:var(--destructive)] bg-destructive-muted px-3 py-2 text-[11px] text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
<ActionButton
|
||||
type="submit"
|
||||
label={busy ? t("form.saving") : t("form.save")}
|
||||
tone="accent"
|
||||
disabled={busy}
|
||||
loading={busy}
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user