mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-05-18 20:08:19 +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:
136
src/components/forms/ai-form.tsx
Normal file
136
src/components/forms/ai-form.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import { Input } from '@/components/base/input/input';
|
||||
import { Select } from '@/components/base/select/select';
|
||||
import { TextArea } from '@/components/base/textarea/textarea';
|
||||
|
||||
// AI assistant form — mirrors AiConfig in
|
||||
// helix-engage-server/src/config/ai.defaults.ts. API keys stay in env vars
|
||||
// (true secrets, rotated at the infra level); everything the admin can safely
|
||||
// adjust lives here: provider choice, model, temperature, and an optional
|
||||
// system-prompt addendum appended to the hospital-specific prompts that the
|
||||
// WidgetChatService generates.
|
||||
|
||||
export type AiProvider = 'openai' | 'anthropic';
|
||||
|
||||
export type AiFormValues = {
|
||||
provider: AiProvider;
|
||||
model: string;
|
||||
temperature: string;
|
||||
systemPromptAddendum: string;
|
||||
};
|
||||
|
||||
export const emptyAiFormValues = (): AiFormValues => ({
|
||||
provider: 'openai',
|
||||
model: 'gpt-4o-mini',
|
||||
temperature: '0.7',
|
||||
systemPromptAddendum: '',
|
||||
});
|
||||
|
||||
const PROVIDER_ITEMS = [
|
||||
{ id: 'openai', label: 'OpenAI' },
|
||||
{ id: 'anthropic', label: 'Anthropic' },
|
||||
];
|
||||
|
||||
// Recommended model presets per provider. Admin can still type any model
|
||||
// string they want — these are suggestions, not the only options.
|
||||
export const MODEL_SUGGESTIONS: Record<AiProvider, string[]> = {
|
||||
openai: ['gpt-4o-mini', 'gpt-4o', 'gpt-4-turbo', 'gpt-3.5-turbo'],
|
||||
anthropic: ['claude-3-5-sonnet-latest', 'claude-3-5-haiku-latest', 'claude-3-opus-latest'],
|
||||
};
|
||||
|
||||
type AiFormProps = {
|
||||
value: AiFormValues;
|
||||
onChange: (value: AiFormValues) => void;
|
||||
};
|
||||
|
||||
export const AiForm = ({ value, onChange }: AiFormProps) => {
|
||||
const patch = (updates: Partial<AiFormValues>) => onChange({ ...value, ...updates });
|
||||
|
||||
const suggestions = MODEL_SUGGESTIONS[value.provider];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<section className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary">Provider & model</h3>
|
||||
<p className="mt-1 text-xs text-tertiary">
|
||||
Choose the AI vendor powering the website widget chat and call-summary features.
|
||||
Changing providers takes effect immediately.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
label="Provider"
|
||||
placeholder="Select provider"
|
||||
items={PROVIDER_ITEMS}
|
||||
selectedKey={value.provider}
|
||||
onSelectionChange={(key) => {
|
||||
const next = key as AiProvider;
|
||||
// When switching providers, also reset the model to the first
|
||||
// suggested model for that provider — saves the admin a second
|
||||
// edit step and avoids leaving an OpenAI model selected while
|
||||
// provider=anthropic.
|
||||
patch({
|
||||
provider: next,
|
||||
model: MODEL_SUGGESTIONS[next][0],
|
||||
});
|
||||
}}
|
||||
>
|
||||
{(item) => <Select.Item id={item.id} label={item.label} />}
|
||||
</Select>
|
||||
|
||||
<div>
|
||||
<Input
|
||||
label="Model"
|
||||
placeholder="Model identifier"
|
||||
value={value.model}
|
||||
onChange={(v) => patch({ model: v })}
|
||||
/>
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{suggestions.map((model) => (
|
||||
<button
|
||||
key={model}
|
||||
type="button"
|
||||
onClick={() => patch({ model })}
|
||||
className={`rounded-md border px-2 py-1 text-xs transition duration-100 ease-linear ${
|
||||
value.model === model
|
||||
? 'border-brand bg-brand-secondary text-brand-secondary'
|
||||
: 'border-secondary bg-primary text-tertiary hover:bg-secondary'
|
||||
}`}
|
||||
>
|
||||
{model}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Temperature"
|
||||
type="number"
|
||||
placeholder="0.7"
|
||||
hint="0 = deterministic, 1 = balanced, 2 = very creative"
|
||||
value={value.temperature}
|
||||
onChange={(v) => patch({ temperature: v })}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary">System prompt addendum</h3>
|
||||
<p className="mt-1 text-xs text-tertiary">
|
||||
Optional — gets appended to the hospital-specific prompts the widget generates
|
||||
automatically from your doctors and clinics. Use this to add tone guidelines,
|
||||
escalation rules, or topics the assistant should avoid. Leave blank for the default
|
||||
behaviour.
|
||||
</p>
|
||||
</div>
|
||||
<TextArea
|
||||
label="Additional instructions"
|
||||
placeholder="e.g. Always respond in the patient's language. Never quote specific medication dosages; refer them to a doctor for prescriptions."
|
||||
value={value.systemPromptAddendum}
|
||||
onChange={(v) => patch({ systemPromptAddendum: v })}
|
||||
rows={6}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
177
src/components/forms/telephony-form.tsx
Normal file
177
src/components/forms/telephony-form.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import { Input } from '@/components/base/input/input';
|
||||
|
||||
// Telephony form — covers Ozonetel cloud-call-center, the Ozonetel WebRTC
|
||||
// gateway, and Exotel REST API credentials. Mirrors the TelephonyConfig shape
|
||||
// in helix-engage-server/src/config/telephony.defaults.ts.
|
||||
//
|
||||
// Secrets (ozonetel.agentPassword, exotel.apiToken) come back from the GET
|
||||
// endpoint as the sentinel '***masked***' — the form preserves that sentinel
|
||||
// untouched unless the admin actually edits the field, in which case the
|
||||
// backend overwrites the stored value. This is the same convention used by
|
||||
// TelephonyConfigService.getMaskedConfig / updateConfig.
|
||||
|
||||
export type TelephonyFormValues = {
|
||||
ozonetel: {
|
||||
agentId: string;
|
||||
agentPassword: string;
|
||||
did: string;
|
||||
sipId: string;
|
||||
campaignName: string;
|
||||
};
|
||||
sip: {
|
||||
domain: string;
|
||||
wsPort: string;
|
||||
};
|
||||
exotel: {
|
||||
apiKey: string;
|
||||
apiToken: string;
|
||||
accountSid: string;
|
||||
subdomain: string;
|
||||
};
|
||||
};
|
||||
|
||||
export const emptyTelephonyFormValues = (): TelephonyFormValues => ({
|
||||
ozonetel: {
|
||||
agentId: '',
|
||||
agentPassword: '',
|
||||
did: '',
|
||||
sipId: '',
|
||||
campaignName: '',
|
||||
},
|
||||
sip: {
|
||||
domain: 'blr-pub-rtc4.ozonetel.com',
|
||||
wsPort: '444',
|
||||
},
|
||||
exotel: {
|
||||
apiKey: '',
|
||||
apiToken: '',
|
||||
accountSid: '',
|
||||
subdomain: 'api.exotel.com',
|
||||
},
|
||||
});
|
||||
|
||||
type TelephonyFormProps = {
|
||||
value: TelephonyFormValues;
|
||||
onChange: (value: TelephonyFormValues) => void;
|
||||
};
|
||||
|
||||
export const TelephonyForm = ({ value, onChange }: TelephonyFormProps) => {
|
||||
const patchOzonetel = (updates: Partial<TelephonyFormValues['ozonetel']>) =>
|
||||
onChange({ ...value, ozonetel: { ...value.ozonetel, ...updates } });
|
||||
const patchSip = (updates: Partial<TelephonyFormValues['sip']>) =>
|
||||
onChange({ ...value, sip: { ...value.sip, ...updates } });
|
||||
const patchExotel = (updates: Partial<TelephonyFormValues['exotel']>) =>
|
||||
onChange({ ...value, exotel: { ...value.exotel, ...updates } });
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
<section className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary">Ozonetel Cloud Agent</h3>
|
||||
<p className="mt-1 text-xs text-tertiary">
|
||||
Outbound dialing, SIP registration, and agent provisioning. Get these values from your
|
||||
Ozonetel dashboard under Admin → Users and Numbers.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="Agent ID"
|
||||
placeholder="e.g. agent001"
|
||||
value={value.ozonetel.agentId}
|
||||
onChange={(v) => patchOzonetel({ agentId: v })}
|
||||
/>
|
||||
<Input
|
||||
label="Agent password"
|
||||
type="password"
|
||||
placeholder="Leave '***masked***' to keep current"
|
||||
value={value.ozonetel.agentPassword}
|
||||
onChange={(v) => patchOzonetel({ agentPassword: v })}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="Default DID"
|
||||
placeholder="Primary hospital number"
|
||||
value={value.ozonetel.did}
|
||||
onChange={(v) => patchOzonetel({ did: v })}
|
||||
/>
|
||||
<Input
|
||||
label="SIP ID"
|
||||
placeholder="Softphone extension"
|
||||
value={value.ozonetel.sipId}
|
||||
onChange={(v) => patchOzonetel({ sipId: v })}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
label="Campaign name"
|
||||
placeholder="CloudAgent campaign for outbound dial"
|
||||
value={value.ozonetel.campaignName}
|
||||
onChange={(v) => patchOzonetel({ campaignName: v })}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary">SIP Gateway (WebRTC)</h3>
|
||||
<p className="mt-1 text-xs text-tertiary">
|
||||
Used by the staff portal softphone. Defaults work for most Indian Ozonetel tenants — only
|
||||
change if Ozonetel support instructs you to.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="SIP domain"
|
||||
placeholder="blr-pub-rtc4.ozonetel.com"
|
||||
value={value.sip.domain}
|
||||
onChange={(v) => patchSip({ domain: v })}
|
||||
/>
|
||||
<Input
|
||||
label="WebSocket port"
|
||||
placeholder="444"
|
||||
value={value.sip.wsPort}
|
||||
onChange={(v) => patchSip({ wsPort: v })}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary">Exotel (SMS + inbound numbers)</h3>
|
||||
<p className="mt-1 text-xs text-tertiary">
|
||||
Optional — only required if you use Exotel for SMS or want inbound number management from
|
||||
this portal.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="API key"
|
||||
placeholder="Exotel API key"
|
||||
value={value.exotel.apiKey}
|
||||
onChange={(v) => patchExotel({ apiKey: v })}
|
||||
/>
|
||||
<Input
|
||||
label="API token"
|
||||
type="password"
|
||||
placeholder="Leave '***masked***' to keep current"
|
||||
value={value.exotel.apiToken}
|
||||
onChange={(v) => patchExotel({ apiToken: v })}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="Account SID"
|
||||
placeholder="Exotel account SID"
|
||||
value={value.exotel.accountSid}
|
||||
onChange={(v) => patchExotel({ accountSid: v })}
|
||||
/>
|
||||
<Input
|
||||
label="Subdomain"
|
||||
placeholder="api.exotel.com"
|
||||
value={value.exotel.subdomain}
|
||||
onChange={(v) => patchExotel({ subdomain: v })}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
167
src/components/forms/widget-form.tsx
Normal file
167
src/components/forms/widget-form.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import { useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faPlus, faTrash } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { Input } from '@/components/base/input/input';
|
||||
import { Toggle } from '@/components/base/toggle/toggle';
|
||||
import { Button } from '@/components/base/buttons/button';
|
||||
|
||||
// Widget form — mirrors WidgetConfig from
|
||||
// helix-engage-server/src/config/widget.defaults.ts. The site key and site ID
|
||||
// are read-only (generated / rotated by the backend), the rest are editable.
|
||||
//
|
||||
// allowedOrigins is an origin allowlist — an empty list means "any origin"
|
||||
// which is useful for testing but should be tightened in production.
|
||||
|
||||
export type WidgetFormValues = {
|
||||
enabled: boolean;
|
||||
url: string;
|
||||
allowedOrigins: string[];
|
||||
embed: {
|
||||
loginPage: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
export const emptyWidgetFormValues = (): WidgetFormValues => ({
|
||||
enabled: true,
|
||||
url: '',
|
||||
allowedOrigins: [],
|
||||
embed: {
|
||||
loginPage: false,
|
||||
},
|
||||
});
|
||||
|
||||
type WidgetFormProps = {
|
||||
value: WidgetFormValues;
|
||||
onChange: (value: WidgetFormValues) => void;
|
||||
};
|
||||
|
||||
export const WidgetForm = ({ value, onChange }: WidgetFormProps) => {
|
||||
const [originDraft, setOriginDraft] = useState('');
|
||||
|
||||
const addOrigin = () => {
|
||||
const trimmed = originDraft.trim();
|
||||
if (!trimmed) return;
|
||||
if (value.allowedOrigins.includes(trimmed)) {
|
||||
setOriginDraft('');
|
||||
return;
|
||||
}
|
||||
onChange({ ...value, allowedOrigins: [...value.allowedOrigins, trimmed] });
|
||||
setOriginDraft('');
|
||||
};
|
||||
|
||||
const removeOrigin = (origin: string) => {
|
||||
onChange({ ...value, allowedOrigins: value.allowedOrigins.filter((o) => o !== origin) });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
<section className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary">Activation</h3>
|
||||
<p className="mt-1 text-xs text-tertiary">
|
||||
When disabled, widget.js returns an empty response and the script no-ops on the
|
||||
embedding page. Use this as a kill switch if something goes wrong in production.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-secondary bg-secondary p-4">
|
||||
<Toggle
|
||||
label="Website widget enabled"
|
||||
isSelected={value.enabled}
|
||||
onChange={(checked) => onChange({ ...value, enabled: checked })}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary">Hosting</h3>
|
||||
<p className="mt-1 text-xs text-tertiary">
|
||||
Public base URL where widget.js is served from. Leave blank to use the same origin as
|
||||
this sidecar (the common case).
|
||||
</p>
|
||||
</div>
|
||||
<Input
|
||||
label="Public URL"
|
||||
placeholder="https://widget.hospital.com"
|
||||
value={value.url}
|
||||
onChange={(v) => onChange({ ...value, url: v })}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary">Allowed origins</h3>
|
||||
<p className="mt-1 text-xs text-tertiary">
|
||||
Origins where the widget may be embedded. An empty list means any origin is accepted
|
||||
(test mode). In production, list every hospital website + staging environment
|
||||
explicitly.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
placeholder="https://hospital.com"
|
||||
value={originDraft}
|
||||
onChange={setOriginDraft}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
color="secondary"
|
||||
iconLeading={({ className }: { className?: string }) => (
|
||||
<FontAwesomeIcon icon={faPlus} className={className} />
|
||||
)}
|
||||
onClick={addOrigin}
|
||||
isDisabled={!originDraft.trim()}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
{value.allowedOrigins.length === 0 ? (
|
||||
<p className="rounded-lg border border-dashed border-secondary bg-secondary p-4 text-center text-xs text-tertiary">
|
||||
Any origin allowed — widget runs in test mode.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="flex flex-col gap-2 rounded-lg border border-secondary bg-secondary p-3">
|
||||
{value.allowedOrigins.map((origin) => (
|
||||
<li
|
||||
key={origin}
|
||||
className="flex items-center justify-between rounded-md bg-primary px-3 py-2 text-sm"
|
||||
>
|
||||
<span className="font-mono text-primary">{origin}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeOrigin(origin)}
|
||||
className="flex size-6 items-center justify-center rounded-md text-fg-quaternary hover:bg-secondary_hover hover:text-fg-error-primary"
|
||||
title="Remove origin"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrash} className="size-3" />
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary">Embed surfaces</h3>
|
||||
<p className="mt-1 text-xs text-tertiary">
|
||||
Where inside this application the widget should auto-render. Keep these off if you
|
||||
only plan to embed it on your public hospital website.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-secondary bg-secondary p-4">
|
||||
<Toggle
|
||||
label="Show on staff login page"
|
||||
hint="Useful for smoke-testing without a public landing page."
|
||||
isSelected={value.embed.loginPage}
|
||||
onChange={(checked) =>
|
||||
onChange({ ...value, embed: { ...value.embed, loginPage: checked } })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user