mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28: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:
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