feat: office address, multi-template SMS manager, hardcoded defaults with auto-seed
- Add streetAddress/city/state/zipCode fields to OfficeContact (schema + storage + UI)
- Support {officeAddress} variable in batch reminder SMS
- Replace single SMS template field with full CRUD template list (add/rename/edit/delete)
- Store SMS template list under _sms_template_list; first template synced to batch reminder
- Hardcode all AI chat template defaults into codebase (reminder SMS, greetings, fallback)
- Add seed-templates.ts that auto-seeds default templates for all users on server boot
- Update README: note that templates are auto-configured on first boot
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gitead
@@ -5,11 +5,13 @@ import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { Bot, CalendarCheck, UserPlus, MessageCircle, Info, GitFork } from "lucide-react";
|
||||
import { Bot, CalendarCheck, UserPlus, MessageCircle, Info, GitFork, MessageSquare, Trash2, Plus } from "lucide-react";
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
type SmsTemplate = { id: string; name: string; body: string };
|
||||
|
||||
type AiChatTemplates = {
|
||||
reminderGreeting: string;
|
||||
newPatientGreeting: string;
|
||||
@@ -22,18 +24,39 @@ type OfficeContact = {
|
||||
|
||||
// ─── Defaults ─────────────────────────────────────────────────────────────────
|
||||
|
||||
const DEFAULT_REMINDER_SMS =
|
||||
"Hi {firstName}, this is a reminder from {officeName}. You have an appointment on {appointmentDate} at {appointmentTime}. Please come to our office at {officeAddress}. Please reply YES to confirm or NO to reschedule. Thank you!";
|
||||
|
||||
const DEFAULTS = {
|
||||
reminderGreeting:
|
||||
"Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can confirm or reschedule your appointment and answer general questions 24/7. I will reply your message at any time you need.",
|
||||
"Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can confirm or reschedule your appointment and answer general questions 24/7. I will reply you message at any time you need.",
|
||||
newPatientGreeting:
|
||||
"Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can help you schedule an appointment, check your insurance, and answer general questions 24/7. How can I help you today?",
|
||||
generalFallback: "How can I help you today?",
|
||||
generalFallback:
|
||||
"Hi! My name is Lisa, the dedicated AI assistant at {officeName}. How can I help you today?",
|
||||
};
|
||||
|
||||
const DEFAULT_SMS_TEMPLATES = [
|
||||
{
|
||||
id: "default-appt-reminder",
|
||||
name: "Appointment Reminder SMS",
|
||||
body: DEFAULT_REMINDER_SMS,
|
||||
},
|
||||
{
|
||||
id: "default-follow-up",
|
||||
name: "Follow up reminder",
|
||||
body: "Hi {firstName}, this is a follow-up from {officeName}. We wanted to check in with you after your recent appointment. Please don't hesitate to call us if you have any questions.",
|
||||
},
|
||||
];
|
||||
|
||||
function previewTemplate(text: string, officeName: string) {
|
||||
return text.replace(/\{officeName\}/g, officeName || "your dental office");
|
||||
}
|
||||
|
||||
function newId() {
|
||||
return Date.now().toString(36) + Math.random().toString(36).slice(2);
|
||||
}
|
||||
|
||||
// ─── LangGraph flow diagram (SVG) ─────────────────────────────────────────────
|
||||
|
||||
function LangGraphFlow() {
|
||||
@@ -503,6 +526,10 @@ export function AiChatSettingsCard() {
|
||||
const [generalFallback, setGeneralFallback] = useState(DEFAULTS.generalFallback);
|
||||
const initialized = useRef(false);
|
||||
|
||||
// ── SMS template list ──────────────────────────────────────────
|
||||
const [smsTemplates, setSmsTemplates] = useState<SmsTemplate[]>([]);
|
||||
const smsInitialized = useRef(false);
|
||||
|
||||
const { data: officeContact } = useQuery<OfficeContact | null>({
|
||||
queryKey: ["/api/office-contact"],
|
||||
queryFn: async () => {
|
||||
@@ -524,7 +551,18 @@ export function AiChatSettingsCard() {
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
|
||||
// Seed local state from server on first load only
|
||||
const { data: smsTemplateListData, isLoading: smsLoading } = useQuery<SmsTemplate[]>({
|
||||
queryKey: ["/api/twilio/sms-template-list"],
|
||||
queryFn: async () => {
|
||||
const res = await apiRequest("GET", "/api/twilio/sms-template-list");
|
||||
if (!res.ok) return [];
|
||||
return res.json();
|
||||
},
|
||||
staleTime: Infinity,
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
|
||||
// Seed AI chat templates
|
||||
useEffect(() => {
|
||||
if (templates && !initialized.current) {
|
||||
initialized.current = true;
|
||||
@@ -534,6 +572,18 @@ export function AiChatSettingsCard() {
|
||||
}
|
||||
}, [templates]);
|
||||
|
||||
// Seed SMS template list — fall back to the saved reminderSms if list is empty
|
||||
useEffect(() => {
|
||||
if (smsTemplateListData && !smsInitialized.current) {
|
||||
smsInitialized.current = true;
|
||||
if (smsTemplateListData.length > 0) {
|
||||
setSmsTemplates(smsTemplateListData);
|
||||
} else {
|
||||
setSmsTemplates(DEFAULT_SMS_TEMPLATES);
|
||||
}
|
||||
}
|
||||
}, [smsTemplateListData, templates]);
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: async (data: AiChatTemplates) => {
|
||||
const res = await apiRequest("PUT", "/api/ai/chat-templates", data);
|
||||
@@ -552,6 +602,24 @@ export function AiChatSettingsCard() {
|
||||
},
|
||||
});
|
||||
|
||||
const saveSmsListMutation = useMutation({
|
||||
mutationFn: async (list: SmsTemplate[]) => {
|
||||
const res = await apiRequest("PUT", "/api/twilio/sms-template-list", list);
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => null);
|
||||
throw new Error(err?.message || "Failed to save SMS templates");
|
||||
}
|
||||
return res.json();
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/twilio/sms-template-list"] });
|
||||
toast({ title: "SMS template saved" });
|
||||
},
|
||||
onError: (err: any) => {
|
||||
toast({ title: "Error", description: err?.message, variant: "destructive" });
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
saveMutation.mutate({
|
||||
@@ -561,6 +629,20 @@ export function AiChatSettingsCard() {
|
||||
});
|
||||
};
|
||||
|
||||
const updateSmsTemplate = (idx: number, field: "name" | "body", value: string) => {
|
||||
setSmsTemplates((prev) => prev.map((t, i) => i === idx ? { ...t, [field]: value } : t));
|
||||
};
|
||||
|
||||
const deleteSmsTemplate = (idx: number) => {
|
||||
const updated = smsTemplates.filter((_, i) => i !== idx);
|
||||
setSmsTemplates(updated);
|
||||
saveSmsListMutation.mutate(updated);
|
||||
};
|
||||
|
||||
const addSmsTemplate = () => {
|
||||
setSmsTemplates((prev) => [...prev, { id: newId(), name: "", body: "" }]);
|
||||
};
|
||||
|
||||
const officeName = officeContact?.officeName?.trim() || "";
|
||||
|
||||
const templateFields = [
|
||||
@@ -596,6 +678,113 @@ export function AiChatSettingsCard() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* ── Section 0: SMS Templates ─────────────────────────────── */}
|
||||
<Card>
|
||||
<CardContent className="py-6 space-y-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageSquare className="h-5 w-5 text-primary" />
|
||||
<h3 className="text-lg font-semibold">SMS Templates</h3>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="gap-1.5 text-xs"
|
||||
onClick={addSmsTemplate}
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
Add Template
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Available variables:{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{firstName}"}</code>{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{officeName}"}</code>{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{officeAddress}"}</code>{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{appointmentDate}"}</code>{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{appointmentTime}"}</code>
|
||||
</p>
|
||||
|
||||
{officeName && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 rounded px-3 py-2">
|
||||
<Info className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
<span>
|
||||
<span className="font-medium">{"{officeName}"}</span> will display as{" "}
|
||||
<span className="font-medium text-foreground">"{officeName}"</span>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{smsLoading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : smsTemplates.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground italic">
|
||||
No templates yet. Click "Add Template" to create one.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{smsTemplates.map((tpl, idx) => (
|
||||
<div key={tpl.id} className="border rounded-lg p-4 space-y-3">
|
||||
{/* Name row */}
|
||||
<div className="flex items-center gap-2">
|
||||
{idx === 0 && (
|
||||
<span className="text-xs bg-teal-100 text-teal-700 font-medium px-2 py-0.5 rounded-full whitespace-nowrap">
|
||||
Batch reminder
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
type="text"
|
||||
value={tpl.name}
|
||||
onChange={(e) => updateSmsTemplate(idx, "name", e.target.value)}
|
||||
className="flex-1 p-2 border rounded text-sm font-medium min-w-0"
|
||||
placeholder="Template name"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-red-500 hover:text-red-700 hover:bg-red-50 flex-shrink-0"
|
||||
onClick={() => deleteSmsTemplate(idx)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<Textarea
|
||||
value={tpl.body}
|
||||
onChange={(e) => updateSmsTemplate(idx, "body", e.target.value)}
|
||||
rows={3}
|
||||
className="text-sm resize-none"
|
||||
placeholder="Template content…"
|
||||
/>
|
||||
|
||||
{/* Live preview */}
|
||||
{officeName && tpl.body.includes("{officeName}") && (
|
||||
<p className="text-xs text-muted-foreground italic pl-1">
|
||||
Preview: {previewTemplate(tpl.body, officeName)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Save button */}
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
disabled={saveSmsListMutation.isPending}
|
||||
className="bg-teal-600 hover:bg-teal-700 text-white"
|
||||
onClick={() => saveSmsListMutation.mutate(smsTemplates)}
|
||||
>
|
||||
{saveSmsListMutation.isPending ? "Saving…" : "Save"}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* ── Section 1: Chat Templates ────────────────────────────── */}
|
||||
<Card>
|
||||
<CardContent className="py-6 space-y-5">
|
||||
|
||||
@@ -21,13 +21,13 @@ type OfficeContact = {
|
||||
|
||||
const DEFAULTS = {
|
||||
reminderSms:
|
||||
"Hi {firstName}, this is a reminder from {officeName}. You have an appointment on {appointmentDate} at {appointmentTime}. Please reply YES to confirm or NO to reschedule. Thank you!",
|
||||
"Hi {firstName}, this is a reminder from {officeName}. You have an appointment on {appointmentDate} at {appointmentTime}. Please come to our office at {officeAddress}. Please reply YES to confirm or NO to reschedule. Thank you!",
|
||||
reminderGreeting:
|
||||
"Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can confirm or reschedule your appointment and answer general questions 24/7. How can I help you today?",
|
||||
"Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can confirm or reschedule your appointment and answer general questions 24/7. I will reply you message at any time you need.",
|
||||
newPatientGreeting:
|
||||
"Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can help you schedule an appointment, check your insurance, and answer general questions 24/7. How can I help you today?",
|
||||
generalFallback:
|
||||
"How can I help you today?",
|
||||
"Hi! My name is Lisa, the dedicated AI assistant at {officeName}. How can I help you today?",
|
||||
rescheduleGreeting:
|
||||
"Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can help you find a new appointment time that works for you. Would you like to reschedule your appointment?",
|
||||
};
|
||||
|
||||
@@ -12,6 +12,10 @@ type OfficeContact = {
|
||||
phoneNumber?: string | null;
|
||||
email?: string | null;
|
||||
fax?: string | null;
|
||||
streetAddress?: string | null;
|
||||
city?: string | null;
|
||||
state?: string | null;
|
||||
zipCode?: string | null;
|
||||
};
|
||||
|
||||
export function OfficeContactCard() {
|
||||
@@ -23,6 +27,10 @@ export function OfficeContactCard() {
|
||||
const [phoneNumber, setPhoneNumber] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [fax, setFax] = useState("");
|
||||
const [streetAddress, setStreetAddress] = useState("");
|
||||
const [city, setCity] = useState("");
|
||||
const [state, setState] = useState("");
|
||||
const [zipCode, setZipCode] = useState("");
|
||||
|
||||
const { data: contact, isLoading } = useQuery<OfficeContact | null>({
|
||||
queryKey: ["/api/office-contact"],
|
||||
@@ -41,6 +49,10 @@ export function OfficeContactCard() {
|
||||
setPhoneNumber(contact.phoneNumber ?? "");
|
||||
setEmail(contact.email ?? "");
|
||||
setFax(contact.fax ?? "");
|
||||
setStreetAddress(contact.streetAddress ?? "");
|
||||
setCity(contact.city ?? "");
|
||||
setState(contact.state ?? "");
|
||||
setZipCode(contact.zipCode ?? "");
|
||||
}
|
||||
}, [contact]);
|
||||
|
||||
@@ -64,7 +76,7 @@ export function OfficeContactCard() {
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
saveMutation.mutate({ officeName, receptionistName, dentistName, phoneNumber, email, fax });
|
||||
saveMutation.mutate({ officeName, receptionistName, dentistName, phoneNumber, email, fax, streetAddress, city, state, zipCode });
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -149,6 +161,54 @@ export function OfficeContactCard() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<h4 className="text-sm font-semibold text-gray-700 mb-3">Office Address</h4>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium">Street Address</label>
|
||||
<input
|
||||
type="text"
|
||||
value={streetAddress}
|
||||
onChange={(e) => setStreetAddress(e.target.value)}
|
||||
className="mt-1 p-2 border rounded w-full text-sm"
|
||||
placeholder="e.g. 123 Main Street"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium">City</label>
|
||||
<input
|
||||
type="text"
|
||||
value={city}
|
||||
onChange={(e) => setCity(e.target.value)}
|
||||
className="mt-1 p-2 border rounded w-full text-sm"
|
||||
placeholder="e.g. Framingham"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium">State</label>
|
||||
<input
|
||||
type="text"
|
||||
value={state}
|
||||
onChange={(e) => setState(e.target.value)}
|
||||
className="mt-1 p-2 border rounded w-full text-sm"
|
||||
placeholder="e.g. MA"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium">ZIP Code</label>
|
||||
<input
|
||||
type="text"
|
||||
value={zipCode}
|
||||
onChange={(e) => setZipCode(e.target.value)}
|
||||
className="mt-1 p-2 border rounded w-full text-sm"
|
||||
placeholder="e.g. 01701"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-1">
|
||||
<button
|
||||
type="submit"
|
||||
|
||||
Reference in New Issue
Block a user