Gitead/DentalManagementMH06
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add in-browser dial pad with Twilio Voice SDK

Browse Source 
- New DialPad component on Patient Connection page: clickable keypad,
  call/hangup/mute buttons, duration timer, keyboard input support
- Backend: POST /api/twilio/voice-token issues Access Token for browser
  Device; POST /api/twilio/webhook/voice-browser is the TwiML webhook
  Twilio calls to bridge the browser to the patient's phone
- TwiML App SID field added to Twilio Settings (stored in templates JSON)
- README: one-time Twilio Console setup instructions for the dial pad

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ff
2026-06-02 22:24:53 -04:00
parent be90966f6e
commit ddcc49b72c
9 changed files with 409 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/Frontend/src/components/settings/twilio-settings-card.tsx
View File

@@ -11,6 +11,7 @@ type TwilioSettings = {
authToken: string;
phoneNumber: string;
greetingMessage?: string | null;
twimlAppSid?: string | null;
};
export function TwilioSettingsCard() {
@@ -19,6 +20,7 @@ export function TwilioSettingsCard() {
const [authToken, setAuthToken] = useState("");
const [phoneNumber, setPhoneNumber] = useState("");
const [greetingMessage, setGreetingMessage] = useState("");
const [twimlAppSid, setTwimlAppSid] = useState("");
const [showAuthToken, setShowAuthToken] = useState(false);
const { data: settings, isLoading } = useQuery<TwilioSettings | null>({
@@ -36,6 +38,7 @@ export function TwilioSettingsCard() {
setAuthToken(settings.authToken ?? "");
setPhoneNumber(settings.phoneNumber ?? "");
setGreetingMessage(settings.greetingMessage ?? "");
setTwimlAppSid(settings.twimlAppSid ?? "");
}
}, [settings]);
@@ -60,7 +63,7 @@ export function TwilioSettingsCard() {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!accountSid.trim() || !authToken.trim() || !phoneNumber.trim()) return;
saveMutation.mutate({ accountSid: accountSid.trim(), authToken: authToken.trim(), phoneNumber: phoneNumber.trim(), greetingMessage: greetingMessage.trim() || null });
saveMutation.mutate({ accountSid: accountSid.trim(), authToken: authToken.trim(), phoneNumber: phoneNumber.trim(), greetingMessage: greetingMessage.trim() || null, twimlAppSid: twimlAppSid.trim() || null });
};
const isConfigured = !!(settings?.accountSid && settings?.authToken && settings?.phoneNumber);
@@ -144,6 +147,22 @@ export function TwilioSettingsCard() {
<p className="text-xs text-gray-500 mt-1">This message plays when a patient calls your Twilio number. Leave blank to use the default.</p>
</div>
<div>
<label className="block text-sm font-medium">TwiML App SID <span className="text-gray-400 font-normal">(for in-browser calling)</span></label>
<input
type="text"
value={twimlAppSid}
onChange={(e) => setTwimlAppSid(e.target.value)}
className="mt-1 p-2 border rounded w-full font-mono text-sm"
placeholder="APxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
/>
<p className="text-xs text-gray-500 mt-1">
In Twilio Console → TwiML Apps → create one → set Voice URL to{" "}
<code className="bg-gray-100 px-1 rounded text-xs">https://communitydentistsoflowell.mydentalofficemanagement.com/api/twilio/webhook/voice-browser</code>
{" "}then paste the App SID here. Required for the dial pad.
</p>
</div>
<div className="flex items-center gap-3 pt-1">
<button
type="submit"