mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-12 02:38:15 +00:00
feat(onboarding/phase-4): telephony, AI, widget config CRUD pages
Replaces the three remaining Pattern B placeholder routes (/settings/telephony, /settings/ai, /settings/widget) with real forms backed by the sidecar config endpoints introduced in Phase 1. Each page loads the current config on mount, round-trips edits via PUT, and supports reset-to-defaults. Changes take effect immediately since the TelephonyConfigService / AiConfigService / WidgetConfigService all keep in-memory caches that all consumers read through. - src/components/forms/telephony-form.tsx — Ozonetel + SIP + Exotel sections; honours the '***masked***' sentinel for secrets - src/components/forms/ai-form.tsx — provider/model/temperature/prompt with per-provider model suggestions - src/components/forms/widget-form.tsx — enabled/url/embed toggles plus an allowedOrigins chip list - src/pages/telephony-settings.tsx — loads masked config, marks the telephony wizard step complete when all required Ozonetel fields are filled - src/pages/ai-settings.tsx — clamps temperature to 0..2 on save, marks the ai wizard step complete on successful save - src/pages/widget-settings.tsx — uses the admin endpoint (/api/config/widget/admin), exposes rotate-key + copy-to-clipboard for the site key, and separates the read-only key card from the editable config card - src/main.tsx — swaps the three placeholder routes for the real pages - src/pages/settings-placeholder.tsx — removed; no longer referenced Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
159
src/pages/ai-settings.tsx
Normal file
159
src/pages/ai-settings.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faRobot, faRotateLeft } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { Button } from '@/components/base/buttons/button';
|
||||
import { TopBar } from '@/components/layout/top-bar';
|
||||
import {
|
||||
AiForm,
|
||||
emptyAiFormValues,
|
||||
type AiFormValues,
|
||||
type AiProvider,
|
||||
} from '@/components/forms/ai-form';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { notify } from '@/lib/toast';
|
||||
import { markSetupStepComplete } from '@/lib/setup-state';
|
||||
|
||||
// /settings/ai — Pattern B page for the AI assistant config. Backed by
|
||||
// /api/config/ai which is file-backed (data/ai.json) and hot-reloaded through
|
||||
// AiConfigService — no restart needed.
|
||||
//
|
||||
// Temperature is a string in the form for input UX (so users can partially
|
||||
// type '0.', '0.5', etc) then clamped to 0..2 on save.
|
||||
|
||||
type ServerAiConfig = {
|
||||
provider?: AiProvider;
|
||||
model?: string;
|
||||
temperature?: number;
|
||||
systemPromptAddendum?: string;
|
||||
};
|
||||
|
||||
const clampTemperature = (raw: string): number => {
|
||||
const n = Number(raw);
|
||||
if (Number.isNaN(n)) return 0.7;
|
||||
return Math.min(2, Math.max(0, n));
|
||||
};
|
||||
|
||||
export const AiSettingsPage = () => {
|
||||
const [values, setValues] = useState<AiFormValues>(emptyAiFormValues);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isResetting, setIsResetting] = useState(false);
|
||||
|
||||
const loadConfig = async () => {
|
||||
try {
|
||||
const data = await apiClient.get<ServerAiConfig>('/api/config/ai');
|
||||
setValues({
|
||||
provider: data.provider ?? 'openai',
|
||||
model: data.model ?? 'gpt-4o-mini',
|
||||
temperature: data.temperature != null ? String(data.temperature) : '0.7',
|
||||
systemPromptAddendum: data.systemPromptAddendum ?? '',
|
||||
});
|
||||
} catch {
|
||||
// toast already shown
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadConfig();
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!values.model.trim()) {
|
||||
notify.error('Model is required');
|
||||
return;
|
||||
}
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await apiClient.put('/api/config/ai', {
|
||||
provider: values.provider,
|
||||
model: values.model.trim(),
|
||||
temperature: clampTemperature(values.temperature),
|
||||
systemPromptAddendum: values.systemPromptAddendum,
|
||||
});
|
||||
notify.success('AI settings updated', 'Changes are live for new conversations.');
|
||||
markSetupStepComplete('ai').catch(() => {});
|
||||
await loadConfig();
|
||||
} catch (err) {
|
||||
console.error('[ai] save failed', err);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
if (!confirm('Reset AI settings to defaults? The system prompt addendum will be cleared.')) {
|
||||
return;
|
||||
}
|
||||
setIsResetting(true);
|
||||
try {
|
||||
await apiClient.post('/api/config/ai/reset');
|
||||
notify.info('AI reset', 'Provider, model, and prompt have been restored to defaults.');
|
||||
await loadConfig();
|
||||
} catch (err) {
|
||||
console.error('[ai] reset failed', err);
|
||||
} finally {
|
||||
setIsResetting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<TopBar title="AI Assistant" subtitle="Choose provider, model, and conversational guidelines" />
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-6 flex items-center gap-3 rounded-lg border border-secondary bg-primary p-4">
|
||||
<div className="flex size-10 items-center justify-center rounded-lg bg-brand-secondary">
|
||||
<FontAwesomeIcon icon={faRobot} className="size-5 text-fg-brand-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-primary">API keys live in environment variables</p>
|
||||
<p className="text-xs text-tertiary">
|
||||
The actual OPENAI_API_KEY and ANTHROPIC_API_KEY are set at deploy time and
|
||||
can't be edited here. If you change the provider, make sure the matching key
|
||||
is configured on the sidecar or the assistant will silently fall back to the
|
||||
other provider.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<p className="text-sm text-tertiary">Loading AI settings...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-xl border border-secondary bg-primary p-6 shadow-xs">
|
||||
<AiForm value={values} onChange={setValues} />
|
||||
|
||||
<div className="mt-8 flex items-center justify-between border-t border-secondary pt-4">
|
||||
<Button
|
||||
size="md"
|
||||
color="secondary"
|
||||
iconLeading={({ className }: { className?: string }) => (
|
||||
<FontAwesomeIcon icon={faRotateLeft} className={className} />
|
||||
)}
|
||||
onClick={handleReset}
|
||||
isLoading={isResetting}
|
||||
showTextWhileLoading
|
||||
>
|
||||
Reset to defaults
|
||||
</Button>
|
||||
<Button
|
||||
size="md"
|
||||
color="primary"
|
||||
onClick={handleSave}
|
||||
isLoading={isSaving}
|
||||
showTextWhileLoading
|
||||
>
|
||||
{isSaving ? 'Saving...' : 'Save changes'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,47 +0,0 @@
|
||||
import { useNavigate } from 'react-router';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faArrowLeft, faTools } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { Button } from '@/components/base/buttons/button';
|
||||
import { TopBar } from '@/components/layout/top-bar';
|
||||
|
||||
type SettingsPlaceholderProps = {
|
||||
title: string;
|
||||
description: string;
|
||||
phase: string;
|
||||
};
|
||||
|
||||
// Placeholder for settings pages that haven't been built yet. Used by routes
|
||||
// the Settings hub links to during Phase 2 — Phase 3 (Clinics, Doctors, Team
|
||||
// invite/role editor) and Phase 4 (Telephony, AI, Widget) replace these with
|
||||
// real CRUD pages.
|
||||
export const SettingsPlaceholder = ({ title, description, phase }: SettingsPlaceholderProps) => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<TopBar title={title} subtitle={description} />
|
||||
<div className="flex flex-1 items-center justify-center p-8">
|
||||
<div className="max-w-md rounded-xl border border-dashed border-secondary bg-secondary px-8 py-12 text-center">
|
||||
<div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-primary">
|
||||
<FontAwesomeIcon icon={faTools} className="size-5 text-brand-primary" />
|
||||
</div>
|
||||
<h2 className="text-base font-semibold text-primary">Coming in {phase}</h2>
|
||||
<p className="mt-2 text-sm text-tertiary">
|
||||
This page will let you manage <b>{title.toLowerCase()}</b> directly from the staff portal.
|
||||
It's not built yet — see the onboarding plan for delivery details.
|
||||
</p>
|
||||
<Button
|
||||
size="sm"
|
||||
color="secondary"
|
||||
className="mt-6"
|
||||
iconLeading={({ className }: { className?: string }) => (
|
||||
<FontAwesomeIcon icon={faArrowLeft} className={className} />
|
||||
)}
|
||||
onClick={() => navigate('/settings')}
|
||||
>
|
||||
Back to settings
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
162
src/pages/telephony-settings.tsx
Normal file
162
src/pages/telephony-settings.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faPhone, faRotateLeft } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { Button } from '@/components/base/buttons/button';
|
||||
import { TopBar } from '@/components/layout/top-bar';
|
||||
import {
|
||||
TelephonyForm,
|
||||
emptyTelephonyFormValues,
|
||||
type TelephonyFormValues,
|
||||
} from '@/components/forms/telephony-form';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { notify } from '@/lib/toast';
|
||||
import { markSetupStepComplete } from '@/lib/setup-state';
|
||||
|
||||
// /settings/telephony — Pattern B page against the sidecar's
|
||||
// /api/config/telephony endpoint. The sidecar masks secrets on GET (agent
|
||||
// password + Exotel API token become '***masked***') and treats that sentinel
|
||||
// as "no change" on PUT, so we just round-trip the form values directly.
|
||||
//
|
||||
// Changes take effect immediately — TelephonyConfigService keeps an in-memory
|
||||
// cache that all consumers read via getters, no restart required.
|
||||
|
||||
export const TelephonySettingsPage = () => {
|
||||
const [values, setValues] = useState<TelephonyFormValues>(emptyTelephonyFormValues);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isResetting, setIsResetting] = useState(false);
|
||||
|
||||
const loadConfig = async () => {
|
||||
try {
|
||||
const data = await apiClient.get<TelephonyFormValues>('/api/config/telephony');
|
||||
setValues({
|
||||
ozonetel: {
|
||||
agentId: data.ozonetel?.agentId ?? '',
|
||||
agentPassword: data.ozonetel?.agentPassword ?? '',
|
||||
did: data.ozonetel?.did ?? '',
|
||||
sipId: data.ozonetel?.sipId ?? '',
|
||||
campaignName: data.ozonetel?.campaignName ?? '',
|
||||
},
|
||||
sip: {
|
||||
domain: data.sip?.domain ?? 'blr-pub-rtc4.ozonetel.com',
|
||||
wsPort: data.sip?.wsPort ?? '444',
|
||||
},
|
||||
exotel: {
|
||||
apiKey: data.exotel?.apiKey ?? '',
|
||||
apiToken: data.exotel?.apiToken ?? '',
|
||||
accountSid: data.exotel?.accountSid ?? '',
|
||||
subdomain: data.exotel?.subdomain ?? 'api.exotel.com',
|
||||
},
|
||||
});
|
||||
} catch {
|
||||
// toast already shown
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadConfig();
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await apiClient.put('/api/config/telephony', {
|
||||
ozonetel: values.ozonetel,
|
||||
sip: values.sip,
|
||||
exotel: values.exotel,
|
||||
});
|
||||
notify.success('Telephony updated', 'Changes are live — no restart needed.');
|
||||
// Mark the wizard step complete if the required Ozonetel fields are
|
||||
// all filled in. Keeps the setup hub badges in sync with reality.
|
||||
const complete =
|
||||
!!values.ozonetel.agentId &&
|
||||
!!values.ozonetel.did &&
|
||||
!!values.ozonetel.sipId &&
|
||||
!!values.ozonetel.campaignName;
|
||||
if (complete) {
|
||||
markSetupStepComplete('telephony').catch(() => {});
|
||||
}
|
||||
await loadConfig();
|
||||
} catch (err) {
|
||||
console.error('[telephony] save failed', err);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
if (!confirm('Reset telephony settings to defaults? Your Ozonetel and Exotel credentials will be cleared.')) {
|
||||
return;
|
||||
}
|
||||
setIsResetting(true);
|
||||
try {
|
||||
await apiClient.post('/api/config/telephony/reset');
|
||||
notify.info('Telephony reset', 'All fields have been cleared.');
|
||||
await loadConfig();
|
||||
} catch (err) {
|
||||
console.error('[telephony] reset failed', err);
|
||||
} finally {
|
||||
setIsResetting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<TopBar title="Telephony" subtitle="Connect Ozonetel and Exotel for calls and SMS" />
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-6 flex items-center gap-3 rounded-lg border border-secondary bg-primary p-4">
|
||||
<div className="flex size-10 items-center justify-center rounded-lg bg-brand-secondary">
|
||||
<FontAwesomeIcon icon={faPhone} className="size-5 text-fg-brand-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-primary">Credentials are stored locally</p>
|
||||
<p className="text-xs text-tertiary">
|
||||
Values are written to the sidecar's data/telephony.json. API tokens are masked
|
||||
when loaded — leave the <code className="rounded bg-secondary px-1 py-0.5 font-mono">***masked***</code>{' '}
|
||||
placeholder to keep the existing value.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<p className="text-sm text-tertiary">Loading telephony settings...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-xl border border-secondary bg-primary p-6 shadow-xs">
|
||||
<TelephonyForm value={values} onChange={setValues} />
|
||||
|
||||
<div className="mt-8 flex items-center justify-between border-t border-secondary pt-4">
|
||||
<Button
|
||||
size="md"
|
||||
color="secondary"
|
||||
iconLeading={({ className }: { className?: string }) => (
|
||||
<FontAwesomeIcon icon={faRotateLeft} className={className} />
|
||||
)}
|
||||
onClick={handleReset}
|
||||
isLoading={isResetting}
|
||||
showTextWhileLoading
|
||||
>
|
||||
Reset to defaults
|
||||
</Button>
|
||||
<Button
|
||||
size="md"
|
||||
color="primary"
|
||||
onClick={handleSave}
|
||||
isLoading={isSaving}
|
||||
showTextWhileLoading
|
||||
>
|
||||
{isSaving ? 'Saving...' : 'Save changes'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
199
src/pages/widget-settings.tsx
Normal file
199
src/pages/widget-settings.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faGlobe, faCopy, faArrowsRotate } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { Button } from '@/components/base/buttons/button';
|
||||
import { TopBar } from '@/components/layout/top-bar';
|
||||
import {
|
||||
WidgetForm,
|
||||
emptyWidgetFormValues,
|
||||
type WidgetFormValues,
|
||||
} from '@/components/forms/widget-form';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { notify } from '@/lib/toast';
|
||||
|
||||
// /settings/widget — Pattern B page for the website widget config. Uses the
|
||||
// admin endpoint GET /api/config/widget/admin (the plain /api/config/widget
|
||||
// endpoint returns only the public subset and is used by the embed page).
|
||||
//
|
||||
// The site key and site ID are read-only here — generated and rotated by the
|
||||
// backend. The copy-to-clipboard button on the key helps the admin paste it
|
||||
// into their website's embed snippet.
|
||||
|
||||
type ServerWidgetConfig = {
|
||||
enabled: boolean;
|
||||
key: string;
|
||||
siteId: string;
|
||||
url: string;
|
||||
allowedOrigins: string[];
|
||||
embed: { loginPage: boolean };
|
||||
version?: number;
|
||||
updatedAt?: string;
|
||||
};
|
||||
|
||||
export const WidgetSettingsPage = () => {
|
||||
const [values, setValues] = useState<WidgetFormValues>(emptyWidgetFormValues);
|
||||
const [key, setKey] = useState<string>('');
|
||||
const [siteId, setSiteId] = useState<string>('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isRotating, setIsRotating] = useState(false);
|
||||
|
||||
const loadConfig = async () => {
|
||||
try {
|
||||
const data = await apiClient.get<ServerWidgetConfig>('/api/config/widget/admin');
|
||||
setValues({
|
||||
enabled: data.enabled,
|
||||
url: data.url ?? '',
|
||||
allowedOrigins: data.allowedOrigins ?? [],
|
||||
embed: {
|
||||
loginPage: data.embed?.loginPage ?? false,
|
||||
},
|
||||
});
|
||||
setKey(data.key ?? '');
|
||||
setSiteId(data.siteId ?? '');
|
||||
} catch {
|
||||
// toast already shown
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadConfig();
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await apiClient.put('/api/config/widget', {
|
||||
enabled: values.enabled,
|
||||
url: values.url,
|
||||
allowedOrigins: values.allowedOrigins,
|
||||
embed: values.embed,
|
||||
});
|
||||
notify.success('Widget updated', 'Changes take effect on next widget load.');
|
||||
await loadConfig();
|
||||
} catch (err) {
|
||||
console.error('[widget] save failed', err);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRotateKey = async () => {
|
||||
if (
|
||||
!confirm(
|
||||
'Rotate the widget key? Any website embed using the old key will stop working until you update it.',
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setIsRotating(true);
|
||||
try {
|
||||
await apiClient.post('/api/config/widget/rotate-key');
|
||||
notify.success('Key rotated', 'Update every embed snippet with the new key.');
|
||||
await loadConfig();
|
||||
} catch (err) {
|
||||
console.error('[widget] rotate failed', err);
|
||||
} finally {
|
||||
setIsRotating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyKey = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(key);
|
||||
notify.success('Copied', 'Widget key copied to clipboard.');
|
||||
} catch {
|
||||
notify.error('Copy failed', 'Select the key manually and copy it.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<TopBar title="Website Widget" subtitle="Configure the chat + booking widget for your hospital website" />
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-6 flex items-center gap-3 rounded-lg border border-secondary bg-primary p-4">
|
||||
<div className="flex size-10 items-center justify-center rounded-lg bg-brand-secondary">
|
||||
<FontAwesomeIcon icon={faGlobe} className="size-5 text-fg-brand-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-primary">One-line embed snippet</p>
|
||||
<p className="text-xs text-tertiary">
|
||||
Drop the script below into your hospital website's <code className="rounded bg-secondary px-1 py-0.5 font-mono"><head></code> to
|
||||
enable chat and appointment booking. Changing the key requires re-embedding.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<p className="text-sm text-tertiary">Loading widget settings...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Site key card — read-only with copy + rotate */}
|
||||
<div className="rounded-xl border border-secondary bg-primary p-5 shadow-xs">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary">Site key</h3>
|
||||
<p className="text-xs text-tertiary">
|
||||
Site ID: <span className="font-mono">{siteId || '—'}</span>
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
color="tertiary"
|
||||
iconLeading={({ className }: { className?: string }) => (
|
||||
<FontAwesomeIcon icon={faArrowsRotate} className={className} />
|
||||
)}
|
||||
onClick={handleRotateKey}
|
||||
isLoading={isRotating}
|
||||
showTextWhileLoading
|
||||
>
|
||||
Rotate
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 truncate rounded-lg border border-secondary bg-secondary px-3 py-2 font-mono text-xs text-primary">
|
||||
{key || '— no key yet —'}
|
||||
</code>
|
||||
<Button
|
||||
size="sm"
|
||||
color="secondary"
|
||||
iconLeading={({ className }: { className?: string }) => (
|
||||
<FontAwesomeIcon icon={faCopy} className={className} />
|
||||
)}
|
||||
onClick={handleCopyKey}
|
||||
isDisabled={!key}
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Editable config */}
|
||||
<div className="rounded-xl border border-secondary bg-primary p-6 shadow-xs">
|
||||
<WidgetForm value={values} onChange={setValues} />
|
||||
|
||||
<div className="mt-8 flex items-center justify-end border-t border-secondary pt-4">
|
||||
<Button
|
||||
size="md"
|
||||
color="primary"
|
||||
onClick={handleSave}
|
||||
isLoading={isSaving}
|
||||
showTextWhileLoading
|
||||
>
|
||||
{isSaving ? 'Saving...' : 'Save changes'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user