From eb4093bd7446ee971df0f10b27dace67c0c6b044 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mert=20Bora=20=C4=B0nevi?= <bora.inevi@nmi-agro.nl>
Date: Mon, 22 Jun 2026 15:45:10 +0200
Subject: [PATCH] Add initial working saved replies

---
 .../blocks/helpdesk/message-composer.tsx      | 136 ++++++++---
 .../components/blocks/helpdesk/message.tsx    |  21 +-
 .../blocks/helpdesk/saved-reply-dialog.tsx    | 198 ++++++++++++++++
 .../blocks/helpdesk/saved-reply-schema.tsx    |  25 ++
 .../app/components/blocks/helpdesk/ticket.tsx |  11 +
 ...upport._ticketviewer.ticket.$ticket_id.tsx | 117 ++++++++--
 fdm-helpdesk/src/index.ts                     |   1 +
 fdm-helpdesk/src/saved-reply.test.ts          | 212 +++++++++++++++++
 fdm-helpdesk/src/saved-reply.ts               | 219 ++++++++++++++++++
 9 files changed, 886 insertions(+), 54 deletions(-)
 create mode 100644 fdm-app/app/components/blocks/helpdesk/saved-reply-dialog.tsx
 create mode 100644 fdm-app/app/components/blocks/helpdesk/saved-reply-schema.tsx
 create mode 100644 fdm-helpdesk/src/saved-reply.test.ts
 create mode 100644 fdm-helpdesk/src/saved-reply.ts

diff --git a/fdm-app/app/components/blocks/helpdesk/message-composer.tsx b/fdm-app/app/components/blocks/helpdesk/message-composer.tsx
index f8709413f..fd8b5c392 100644
--- a/fdm-app/app/components/blocks/helpdesk/message-composer.tsx
+++ b/fdm-app/app/components/blocks/helpdesk/message-composer.tsx
@@ -1,5 +1,9 @@
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useId } from "react"
+import type {
+    SavedReplyContext,
+    SavedReplySummary,
+} from "@nmi-agro/fdm-helpdesk"
+import { useEffect, useId } from "react"
 import { Controller, useWatch } from "react-hook-form"
 import { useFetcher } from "react-router"
 import { RemixFormProvider, useRemixForm } from "remix-hook-form"
@@ -25,7 +29,7 @@ import { Switch } from "~/components/ui/switch"
 import { Textarea } from "~/components/ui/textarea"
 import { Message } from "./message"
 import { MessageSchema } from "./message-schema"
-import type { HelpdeskUser } from "./types"
+import type { HelpdeskUser } from "./types.d"
 
 const formDefaultValues = {
     body: "",
@@ -37,16 +41,21 @@ export function MessageComposer({
     intent,
     principal,
     showAgentControls,
+    savedReplies,
+    savedReplyContext,
     defaultValues = { ...formDefaultValues },
     className,
 }: {
     intent: string
     principal: HelpdeskUser | null
     showAgentControls?: boolean
+    savedReplies?: SavedReplySummary[]
+    savedReplyContext?: SavedReplyContext
     defaultValues?: z.infer<typeof MessageSchema>
     className?: string
 }) {
     const fetcher = useFetcher()
+    const savedReplyFetcher = useFetcher()
 
     const form = useRemixForm({
         mode: "onTouched",
@@ -58,11 +67,28 @@ export function MessageComposer({
             ...defaultValues,
         },
     })
+
     const sender_role = useWatch({ name: "sender_role", control: form.control })
     const is_internal = useWatch({ name: "is_internal", control: form.control })
     const messageInputId = useId()
 
+    useEffect(() => {
+        if (typeof savedReplyFetcher.data?.body === "string") {
+            const current = form.getValues("body")
+            if (current) {
+                form.setValue(
+                    "body",
+                    `${current}\n\n${savedReplyFetcher.data.body}`,
+                )
+            } else {
+                form.setValue("body", savedReplyFetcher.data.body)
+            }
+        }
+    }, [form.getValues, form.setValue, savedReplyFetcher.data])
+
     const isSubmitting = fetcher.state !== "idle"
+    const isFetchingSavedReply = savedReplyFetcher.state !== "idle"
+    const isDisabled = isSubmitting || isFetchingSavedReply
 
     return (
         <RemixFormProvider {...form}>
@@ -77,7 +103,7 @@ export function MessageComposer({
                     isInternal={is_internal}
                     title={
                         <fieldset
-                            disabled={isSubmitting}
+                            disabled={isDisabled}
                             className="w-full flex flex-row items-center gap-2 md:gap-4"
                         >
                             <span className="min-w-0 flex-1">
@@ -118,7 +144,7 @@ export function MessageComposer({
                                                             field.onChange
                                                         }
                                                         className="mt-1"
-                                                        disabled={isSubmitting}
+                                                        disabled={isDisabled}
                                                     />
                                                 </div>
                                                 <FieldError
@@ -176,41 +202,87 @@ export function MessageComposer({
                         </fieldset>
                     }
                 >
-                    <fieldset disabled={isSubmitting}>
+                    <fieldset disabled={isDisabled}>
+                        {savedReplies && savedReplies.length > 0 ? (
+                            <Field orientation="horizontal">
+                                <FieldLabel>Gebruik een sjabloon: </FieldLabel>
+                                <Select
+                                    onValueChange={(reply_id) => {
+                                        const formData = new FormData()
+                                        formData.append(
+                                            "intent",
+                                            "apply_saved_reply",
+                                        )
+                                        formData.append("reply_id", reply_id)
+                                        for (const [k, v] of Object.entries(
+                                            savedReplyContext ?? {},
+                                        )) {
+                                            if (typeof v === "string")
+                                                formData.append(k, v)
+                                        }
+                                        savedReplyFetcher.submit(formData, {
+                                            method: "post",
+                                        })
+                                    }}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue />
+                                        <Spinner
+                                            className={cn(
+                                                !isFetchingSavedReply &&
+                                                    "invisible",
+                                            )}
+                                        />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {savedReplies.map((reply) => (
+                                            <SelectItem
+                                                key={reply.reply_id}
+                                                value={reply.reply_id}
+                                            >
+                                                {reply.title}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </Field>
+                        ) : undefined}
                         <Controller
                             name="body"
-                            render={({ field, fieldState }) => (
-                                <Field data-invalid={fieldState.invalid}>
-                                    <FieldContent>
-                                        <Textarea
-                                            {...field}
-                                            className="bg-card"
-                                            id={messageInputId}
-                                            placeholder={
-                                                "Schrijf uw bericht hier..."
-                                            }
-                                        />
-                                        <FieldDescription>
-                                            {showAgentControls
-                                                ? sender_role === "agent"
-                                                    ? is_internal
-                                                        ? "Intern bericht — alleen zichtbaar voor medewerkers."
-                                                        : "Dit bericht wordt als medewerker verstuurd en is zichtbaar voor de gebruiker."
-                                                    : "Dit bericht wordt verstuurd als de gebruiker."
-                                                : "Voeg aanvullende informatie toe of stel een vervolgvraag. U ontvangt een kopie per e-mail."}
-                                        </FieldDescription>
-                                        <FieldError
-                                            errors={[fieldState.error]}
-                                        />
-                                    </FieldContent>
-                                </Field>
-                            )}
+                            render={({ field, fieldState }) => {
+                                return (
+                                    <Field data-invalid={fieldState.invalid}>
+                                        <FieldContent>
+                                            <Textarea
+                                                {...field}
+                                                className="bg-card"
+                                                id={messageInputId}
+                                                placeholder={
+                                                    "Schrijf uw bericht hier..."
+                                                }
+                                            />
+                                            <FieldDescription>
+                                                {showAgentControls
+                                                    ? sender_role === "agent"
+                                                        ? is_internal
+                                                            ? "Intern bericht — alleen zichtbaar voor medewerkers."
+                                                            : "Dit bericht wordt als medewerker verstuurd en is zichtbaar voor de gebruiker."
+                                                        : "Dit bericht wordt verstuurd als de gebruiker."
+                                                    : "Voeg aanvullende informatie toe of stel een vervolgvraag. U ontvangt een kopie per e-mail."}
+                                            </FieldDescription>
+                                            <FieldError
+                                                errors={[fieldState.error]}
+                                            />
+                                        </FieldContent>
+                                    </Field>
+                                )
+                            }}
                         />
                     </fieldset>
                     <Button
                         type="submit"
                         className="block ms-auto min-w-0"
-                        disabled={isSubmitting}
+                        disabled={isDisabled}
                     >
                         Versturen
                         {isSubmitting && <Spinner />}
diff --git a/fdm-app/app/components/blocks/helpdesk/message.tsx b/fdm-app/app/components/blocks/helpdesk/message.tsx
index 7bce9e909..0321b3204 100644
--- a/fdm-app/app/components/blocks/helpdesk/message.tsx
+++ b/fdm-app/app/components/blocks/helpdesk/message.tsx
@@ -1,10 +1,14 @@
-import type { Message as MessageT } from "@nmi-agro/fdm-helpdesk"
+import type {
+    Message as MessageT,
+    SavedReplyContext,
+} from "@nmi-agro/fdm-helpdesk"
 import { formatDate, formatDistanceToNow } from "date-fns"
 import { nl } from "date-fns/locale"
 import type { ReactNode } from "react"
 import { cn } from "@/app/lib/utils"
 import { Card } from "~/components/ui/card"
 import { HelpdeskUserAvatar } from "./helpdesk-user"
+import { CreateSavedReplyDialog } from "./saved-reply-dialog"
 import type { HelpdeskUser } from "./types"
 
 export type MessageExtended = MessageT & { principal: HelpdeskUser | null }
@@ -17,6 +21,9 @@ export function Message({
     isInternal = false,
     className,
     children,
+    canSaveReply = false,
+    replyContext,
+    replyBody,
 }: {
     title?: ReactNode
     principal: HelpdeskUser | null
@@ -26,6 +33,9 @@ export function Message({
     isInternal?: boolean
     className?: string
     children: ReactNode
+    canSaveReply?: boolean
+    replyContext?: SavedReplyContext
+    replyBody?: string
 }) {
     const formattedDateTooltip = date
         ? formatDate(date, "PP HH:mm", { locale: nl })
@@ -37,7 +47,7 @@ export function Message({
     return (
         <Card
             className={cn(
-                "md:ms-10 px-2 py-4",
+                "group/message md:ms-10 px-2 py-4",
                 isInternal && "border-amber-100 bg-amber-100/35",
                 className,
             )}
@@ -57,6 +67,13 @@ export function Message({
                     </span>
                 )}
                 <div className="ms-auto">
+                    {canSaveReply && replyBody && (
+                        <CreateSavedReplyDialog
+                            body={replyBody}
+                            context={replyContext}
+                            isInternal={isInternal}
+                        />
+                    )}
                     {formattedDateTooltip && (
                         <span
                             className="text-sm"
diff --git a/fdm-app/app/components/blocks/helpdesk/saved-reply-dialog.tsx b/fdm-app/app/components/blocks/helpdesk/saved-reply-dialog.tsx
new file mode 100644
index 000000000..0b417a9df
--- /dev/null
+++ b/fdm-app/app/components/blocks/helpdesk/saved-reply-dialog.tsx
@@ -0,0 +1,198 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import type { SavedReplyContext } from "@nmi-agro/fdm-helpdesk"
+import { useEffect, useState } from "react"
+import { Controller, type Resolver } from "react-hook-form"
+import { Form, useFetcher, useNavigation } from "react-router"
+import { RemixFormProvider, useRemixForm } from "remix-hook-form"
+import z from "zod"
+import { Button } from "~/components/ui/button"
+import { Checkbox } from "~/components/ui/checkbox"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "~/components/ui/dialog"
+import {
+    Field,
+    FieldDescription,
+    FieldError,
+    FieldLabel,
+} from "~/components/ui/field"
+import { Input } from "~/components/ui/input"
+import { Spinner } from "~/components/ui/spinner"
+import { Textarea } from "~/components/ui/textarea"
+import { CreateSavedReplySchema } from "./saved-reply-schema"
+
+const FormSchema = CreateSavedReplySchema.extend({
+    intent: z.literal("create_saved_reply"),
+})
+
+export function CreateSavedReplyDialog({
+    body,
+    context,
+    isInternal,
+}: {
+    body: string
+    context?: SavedReplyContext
+    isInternal: boolean
+}) {
+    const makeSavedReplyFetcher = useFetcher()
+    const navigation = useNavigation()
+
+    const [dialogOpen, setDialogOpen] = useState(false)
+
+    const form = useRemixForm({
+        mode: "onTouched",
+        resolver: zodResolver(FormSchema) as Resolver<
+            z.infer<typeof FormSchema>
+        >,
+        stringifyAllValues: false,
+        defaultValues: {
+            intent: "create_saved_reply",
+            title: "",
+            body: "",
+        },
+    })
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: if a different message is rendered into the component, the dialog should close
+    useEffect(() => {
+        setDialogOpen(false)
+    }, [body])
+
+    useEffect(() => {
+        if (navigation.state === "loading") {
+            setDialogOpen(false)
+        }
+    })
+
+    useEffect(() => {
+        if (typeof makeSavedReplyFetcher.data?.body === "string") {
+            form.setValue("title", "")
+            form.setValue("body", makeSavedReplyFetcher.data.body)
+            setDialogOpen(true)
+        }
+    }, [form.setValue, makeSavedReplyFetcher.data])
+
+    const isSubmitting = navigation.state === "submitting"
+    const isMakingSavedReply = makeSavedReplyFetcher.state === "submitting"
+
+    return (
+        <>
+            <makeSavedReplyFetcher.Form method="post">
+                <input type="hidden" name="body" value={body} />
+                {Object.entries(context ?? {}).map(([key, value]) => (
+                    <input key={key} type="hidden" name={key} value={value} />
+                ))}
+                <Button
+                    type="submit"
+                    name="intent"
+                    value="make_saved_reply"
+                    variant="outline"
+                    disabled={isMakingSavedReply || isSubmitting}
+                    className="invisible group-hover/message:visible"
+                >
+                    Maak een sjabloon
+                    {isMakingSavedReply && <Spinner />}
+                </Button>
+            </makeSavedReplyFetcher.Form>
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent className="sm:max-w-lg space-y-4">
+                    <RemixFormProvider {...form}>
+                        <Form method="post" onSubmit={form.handleSubmit}>
+                            <fieldset
+                                disabled={isSubmitting}
+                                className="space-y-4"
+                            >
+                                <DialogHeader>
+                                    <DialogTitle>Nieuwe sjabloon</DialogTitle>
+                                    <DialogDescription>
+                                        Maak een nieuwe opgeslagen reactie aan
+                                        die je later kunt gebruiken bij het
+                                        beantwoorden van tickets.
+                                    </DialogDescription>
+                                </DialogHeader>
+                                {isInternal && (
+                                    <p className="rounded-lg border border-orange-200 dark:border-orange-900/40">
+                                        Let op: dit antwoord kan interne
+                                        notities bevatten. Zorg ervoor dat u
+                                        deze niet meeneemt wanneer u de sjabloon
+                                        gebruikt.
+                                    </p>
+                                )}
+                                <Controller
+                                    name="title"
+                                    render={({ field, fieldState }) => (
+                                        <Field>
+                                            <FieldLabel>Titel</FieldLabel>
+                                            <FieldDescription>
+                                                Geef een titel voor de sjabloon.
+                                            </FieldDescription>
+                                            <Input {...field} />
+                                            {fieldState.error ? (
+                                                <FieldError
+                                                    errors={[fieldState.error]}
+                                                />
+                                            ) : undefined}
+                                        </Field>
+                                    )}
+                                />
+                                <Controller
+                                    name="body"
+                                    render={({ field, fieldState }) => (
+                                        <Field>
+                                            <FieldLabel>
+                                                Sjabloontext
+                                            </FieldLabel>
+                                            <FieldDescription>
+                                                Je kunt de sjabloon hier
+                                                bewerken.
+                                                &#123;&#123;customer_name&#125;&#125;,
+                                                &#123;&#123;agent_name&#125;&#125;,
+                                                &#123;&#123;farm_name&#125;&#125;,
+                                                &#123;&#123;ticket_ref&#125;&#125;
+                                                kunnen als plaatsaanduidingen
+                                                voor de corresponderende waarden
+                                                worden gebruikt.
+                                            </FieldDescription>
+                                            <Textarea {...field} />
+                                            {fieldState.error ? (
+                                                <FieldError
+                                                    errors={[fieldState.error]}
+                                                />
+                                            ) : undefined}
+                                        </Field>
+                                    )}
+                                />
+                                <Controller
+                                    name="is_shared"
+                                    render={({ field, fieldState }) => (
+                                        <Field orientation="horizontal">
+                                            <FieldLabel>
+                                                Deel met andere medewerkers
+                                            </FieldLabel>
+                                            <Checkbox {...field} />
+                                            {fieldState.error ? (
+                                                <FieldError
+                                                    errors={[fieldState.error]}
+                                                />
+                                            ) : undefined}
+                                        </Field>
+                                    )}
+                                />
+                            </fieldset>
+                            <DialogFooter>
+                                <Button type="submit" disabled={isSubmitting}>
+                                    Opslaan
+                                    {isSubmitting && <Spinner />}
+                                </Button>
+                            </DialogFooter>
+                        </Form>
+                    </RemixFormProvider>
+                </DialogContent>
+            </Dialog>
+        </>
+    )
+}
diff --git a/fdm-app/app/components/blocks/helpdesk/saved-reply-schema.tsx b/fdm-app/app/components/blocks/helpdesk/saved-reply-schema.tsx
new file mode 100644
index 000000000..97e7542b6
--- /dev/null
+++ b/fdm-app/app/components/blocks/helpdesk/saved-reply-schema.tsx
@@ -0,0 +1,25 @@
+import z from "zod"
+
+export const SavedReplyContextSchema = z.object({
+    farm_name: z.string().optional(),
+    customer_name: z.string().optional(),
+    agent_name: z.string().optional(),
+    ticket_ref: z.string().optional(),
+})
+
+export type FdmSavedReplyContext = z.infer<typeof SavedReplyContextSchema>
+
+export const ApplySavedReplySchema = SavedReplyContextSchema.extend({
+    reply_id: z.string(),
+})
+
+export const MakeSavedReplySchema = SavedReplyContextSchema.extend({
+    body: z.string().min(1),
+})
+
+export const CreateSavedReplySchema = z.object({
+    intent: z.literal("create_saved_reply"),
+    title: z.string().min(1),
+    body: z.string().min(1),
+    is_shared: z.boolean().optional(),
+})
diff --git a/fdm-app/app/components/blocks/helpdesk/ticket.tsx b/fdm-app/app/components/blocks/helpdesk/ticket.tsx
index eb416cde1..1ddf2d5fb 100644
--- a/fdm-app/app/components/blocks/helpdesk/ticket.tsx
+++ b/fdm-app/app/components/blocks/helpdesk/ticket.tsx
@@ -2,6 +2,8 @@ import type {
     Agent,
     Message as MessageT,
     PriorityString,
+    SavedReplyContext,
+    SavedReplySummary,
     TagSummary,
     Ticket as TicketT,
 } from "@nmi-agro/fdm-helpdesk"
@@ -35,6 +37,8 @@ export function Ticket({
     todayDate,
     contextFarmName,
     principalLookup,
+    savedReplies,
+    savedReplyContext,
 }: {
     ticket: TicketT
     messages: MessageT[]
@@ -46,6 +50,8 @@ export function Ticket({
     todayDate: Date
     contextFarmName?: string | null
     principalLookup: Map<string, HelpdeskUser>
+    savedReplies?: SavedReplySummary[]
+    savedReplyContext?: SavedReplyContext
 }) {
     const navigation = useNavigation()
     const submit = useSubmit()
@@ -203,6 +209,9 @@ export function Ticket({
                         isInternal={msg.is_internal}
                         date={msg.created}
                         todayDate={todayDate}
+                        canSaveReply={isAgent}
+                        replyBody={msg.body}
+                        replyContext={savedReplyContext}
                     >
                         <p
                             className="whitespace-pre-wrap text-sm"
@@ -217,6 +226,8 @@ export function Ticket({
                         intent="add_message"
                         principal={principalLookup.get(principal_id) ?? null}
                         showAgentControls={isAgent}
+                        savedReplies={savedReplies}
+                        savedReplyContext={savedReplyContext}
                         defaultValues={{
                             sender_role: isAgent ? "agent" : "customer",
                             is_internal: false,
diff --git a/fdm-app/app/routes/support._ticketviewer.ticket.$ticket_id.tsx b/fdm-app/app/routes/support._ticketviewer.ticket.$ticket_id.tsx
index 5a0bf3c22..89b488dbd 100644
--- a/fdm-app/app/routes/support._ticketviewer.ticket.$ticket_id.tsx
+++ b/fdm-app/app/routes/support._ticketviewer.ticket.$ticket_id.tsx
@@ -2,15 +2,20 @@ import { getFarm, getPrincipals } from "@nmi-agro/fdm-core"
 import {
     addMessage,
     addTagToTicket,
+    applySavedReply,
     assignTicket,
     checkHelpdeskPermission,
+    createSavedReply,
     createTag,
     getAgents,
     getAssigneesForTickets,
     getMessagesForTicket,
+    getSavedReplies,
+    getSavedReply,
     getTags,
     getTagsForTickets,
     getTicket,
+    makeSavedReplyBodySimple,
     markTicketAsNotViewedByAll,
     markTicketAsViewed,
     removeTagFromTicket,
@@ -19,7 +24,7 @@ import {
     updateTicketStatus,
 } from "@nmi-agro/fdm-helpdesk"
 import { useLoaderData } from "react-router"
-import { dataWithSuccess } from "remix-toast"
+import { dataWithSuccess, dataWithWarning } from "remix-toast"
 import z from "zod"
 import { getSession } from "@/app/lib/auth.server"
 import { sendHelpdeskNewMessageEmail } from "@/app/lib/email.server"
@@ -29,6 +34,12 @@ import { extractFormValuesFromRequest } from "@/app/lib/form"
 import { AssigneeSchema } from "~/components/blocks/helpdesk/assignee-schema"
 import { makeHelpdeskUser } from "~/components/blocks/helpdesk/helpdesk-user"
 import { MessageSchema } from "~/components/blocks/helpdesk/message-schema"
+import {
+    ApplySavedReplySchema,
+    CreateSavedReplySchema,
+    type FdmSavedReplyContext,
+    MakeSavedReplySchema,
+} from "~/components/blocks/helpdesk/saved-reply-schema"
 import {
     TagSchema,
     TicketTagsSchema,
@@ -74,7 +85,12 @@ export async function loader({ params, request }: Args) {
             ])
 
         // If the user is able to change the agent stuff on the ticket, load the necessary data for forms
-        const agents = isAgent ? await getAgents(fdm, session.principal_id) : []
+        const [agents, savedReplies] = isAgent
+            ? await Promise.all([
+                  getAgents(fdm, session.principal_id),
+                  getSavedReplies(fdm, session.principal_id),
+              ])
+            : [[], []]
 
         // Message sender's profile pictures are shown
         const principal_ids = messages.map((msg) => msg.sender_id)
@@ -125,6 +141,36 @@ export async function loader({ params, request }: Args) {
             },
         )
 
+        const contextFarmName = ticket.context_farm_id
+            ? await (async () => {
+                  // This leaks the farm info to the agent, but it should be fine as long as the helpdesk permission checks are run properly.
+                  const principal_id = [session.principal_id]
+                  if (ticket.requester_id)
+                      principal_id.push(ticket.requester_id)
+                  try {
+                      const farm = await getFarm(
+                          fdm,
+                          principal_id,
+                          ticket.context_farm_id as string,
+                      )
+                      return farm.b_name_farm ?? null
+                  } catch {
+                      return null
+                  }
+              })()
+            : null
+
+        // We could also make it an empty object for non-agents but it doesn't matter.
+        const savedReplyContext: Partial<FdmSavedReplyContext> = {
+            farm_name: contextFarmName ?? undefined,
+            customer_name:
+                principalsSummarized.find(
+                    (p) => p.principal_id === ticket.requester_id,
+                )?.displayUserName ?? undefined,
+            agent_name: session.user.name ?? undefined,
+            ticket_ref: ticket.ticket_ref,
+        }
+
         return {
             principal_id: session.principal_id,
             ticket: ticket,
@@ -136,24 +182,9 @@ export async function loader({ params, request }: Args) {
             agents: agents,
             // To prevent hydration failed errors
             todayDate: new Date(),
-            contextFarmName: ticket.context_farm_id
-                ? await (async () => {
-                      // This leaks the farm info to the agent, but it should be fine as long as the helpdesk permission checks are run properly.
-                      const principal_id = [session.principal_id]
-                      if (ticket.requester_id)
-                          principal_id.push(ticket.requester_id)
-                      try {
-                          const farm = await getFarm(
-                              fdm,
-                              principal_id,
-                              ticket.context_farm_id as string,
-                          )
-                          return farm.b_name_farm ?? null
-                      } catch {
-                          return null
-                      }
-                  })()
-                : null,
+            contextFarmName: contextFarmName,
+            savedReplies: savedReplies,
+            savedReplyContext: savedReplyContext,
         }
     } catch (err) {
         throw handleLoaderError(err)
@@ -167,6 +198,9 @@ export const ActionSchema = z.discriminatedUnion("intent", [
         intent: z.literal("update_priority"),
         priority: TicketPrioritySchema,
     }),
+    MakeSavedReplySchema.extend({ intent: z.literal("make_saved_reply") }),
+    CreateSavedReplySchema.extend({ intent: z.literal("create_saved_reply") }),
+    ApplySavedReplySchema.extend({ intent: z.literal("apply_saved_reply") }),
     AssigneeSchema.extend({ intent: z.literal("change_assignment") }),
     MessageSchema.extend({ intent: z.literal("add_message") }),
     TagSchema.extend({ intent: z.literal("create_tag") }),
@@ -448,6 +482,49 @@ export async function action({ params, request }: Args) {
                 message: "Bericht ontvangen!",
             })
         }
+
+        if (formValues.intent === "make_saved_reply") {
+            const { intent, body, ...context } = formValues
+
+            return {
+                body: makeSavedReplyBodySimple(body, context),
+            }
+        }
+
+        if (formValues.intent === "create_saved_reply") {
+            console.log(formValues)
+            await createSavedReply(
+                fdm,
+                formValues.title,
+                formValues.body,
+                session.principal_id,
+                "generic",
+                formValues.is_shared,
+            )
+
+            return dataWithSuccess("Sjabloon is succesvol aangemaakt!", {
+                message: "Sjabloon is succesvol aangemaakt!",
+            })
+        }
+
+        if (formValues.intent === "apply_saved_reply") {
+            const { intent, reply_id, ...context } = formValues
+            const savedReply = await getSavedReply(
+                fdm,
+                session.principal_id,
+                reply_id,
+            )
+            const applied = applySavedReply(savedReply.body, context)
+            return dataWithWarning(
+                {
+                    body: applied,
+                },
+                {
+                    message:
+                        "Hier is jouw berichtstext. Wees voorzichtig dat wat automatisch-ingevuld info onjuist kan zijn.",
+                },
+            )
+        }
     } catch (err) {
         throw handleActionError(err)
     }
diff --git a/fdm-helpdesk/src/index.ts b/fdm-helpdesk/src/index.ts
index df14b86c0..d61f1750b 100644
--- a/fdm-helpdesk/src/index.ts
+++ b/fdm-helpdesk/src/index.ts
@@ -5,6 +5,7 @@ export type * from "./fdm-helpdesk.types"
 export type * from "./filter.types"
 export * from "./message"
 export * from "./migrate"
+export * from "./saved-reply"
 export * from "./tag"
 export * from "./ticket"
 export * from "./ticket-assignment"
diff --git a/fdm-helpdesk/src/saved-reply.test.ts b/fdm-helpdesk/src/saved-reply.test.ts
new file mode 100644
index 000000000..63304bbe8
--- /dev/null
+++ b/fdm-helpdesk/src/saved-reply.test.ts
@@ -0,0 +1,212 @@
+import { describe, expect } from "vitest"
+import { addAdminAgent, addAgent } from "./agent"
+import { createId } from "./id"
+import {
+    applySavedReply,
+    createSavedReply,
+    getSavedReplies,
+    getSavedReply,
+    makeSavedReplyBodySimple,
+} from "./saved-reply"
+import { test, truncateAllTables } from "./test-util"
+
+describe("createSavedReply", () => {
+    let agent_id: string
+
+    test.beforeEach(async ({ fdm }) => {
+        agent_id = createId()
+        await addAdminAgent(fdm, agent_id, "Test Admin Agent")
+    })
+
+    test("should create a saved reply", async ({ fdm }) => {
+        await createSavedReply(
+            fdm,
+            "Polite Response",
+            "Dear sir/madam,\n\nWe are thankful to you for working with our company. We wish you are pleasant day.\n\nKind regards,\n{agent_name}",
+            agent_id,
+        )
+    })
+})
+
+describe("getSavedReplies", () => {
+    let admin_id: string
+    let agent_id: string
+
+    let reply_id_1: string
+    let reply_id_2: string
+    let reply_id_3: string
+
+    test.beforeEach(async ({ fdm }) => {
+        await truncateAllTables(fdm)
+
+        admin_id = createId()
+        await addAdminAgent(fdm, admin_id, "Test Admin Agent")
+        agent_id = createId()
+        await addAgent(fdm, admin_id, agent_id, "Test Regular Agent")
+
+        // Admin's private saved reply
+        reply_id_1 = await createSavedReply(
+            fdm,
+            "Impolite Response",
+            "Hey,\n\nCheers bro it was great knowing you m8.\n\nSee ya! ^o^/",
+            admin_id,
+            "common",
+            false,
+        )
+        // Admin's shared saved reply
+        reply_id_2 = await createSavedReply(
+            fdm,
+            "Polite Response",
+            "Dear sir/madam,\n\nWe are thankful to you for working with our company. We wish you are pleasant day.\n\nKind regards,\n{{agent_name}}",
+            admin_id,
+            "common",
+            true,
+        )
+        // Agent's private saved reply. The admin can also see this.
+        reply_id_3 = await createSavedReply(
+            fdm,
+            "Escalation",
+            "Dear {{customer_name}},\n\nI will be escalating this to one of our admins. Thank you for your patience.\n\nSincerely,\n{{agent_name}}",
+            agent_id,
+            "common",
+            false,
+        )
+    })
+
+    test("admins can see all saved replies", async ({ fdm }) => {
+        const savedReplies = await getSavedReplies(fdm, admin_id)
+        expect(savedReplies).toHaveLength(3)
+        expect(savedReplies.some((r) => r.reply_id === reply_id_1)).toBe(true)
+        expect(savedReplies.some((r) => r.reply_id === reply_id_2)).toBe(true)
+        expect(savedReplies.some((r) => r.reply_id === reply_id_3)).toBe(true)
+    })
+})
+
+describe("getSavedReply", () => {
+    let admin_id: string
+    let agent_id: string
+
+    let reply_id_1: string
+    let reply_id_2: string
+    let reply_id_3: string
+
+    test.beforeEach(async ({ fdm }) => {
+        await truncateAllTables(fdm)
+
+        admin_id = createId()
+        await addAdminAgent(fdm, admin_id, "Test Admin Agent")
+        agent_id = createId()
+        await addAgent(fdm, admin_id, agent_id, "Test Regular Agent")
+
+        // Admin's private saved reply
+        reply_id_1 = await createSavedReply(
+            fdm,
+            "Impolite Response",
+            "Hey,\n\nCheers bro it was great knowing you m8.\n\nSee ya! ^o^/",
+            admin_id,
+            "common",
+            false,
+        )
+        // Admin's shared saved reply
+        reply_id_2 = await createSavedReply(
+            fdm,
+            "Polite Response",
+            "Dear sir/madam,\n\nWe are thankful to you for working with our company. We wish you are pleasant day.\n\nKind regards,\n{{agent_name}}",
+            admin_id,
+            "common",
+            true,
+        )
+        // Agent's private saved reply. The admin can also see this.
+        reply_id_3 = await createSavedReply(
+            fdm,
+            "Escalation",
+            "Dear {{customer_name}},\n\nI will be escalating this to one of our admins. Thank you for your patience.\n\nSincerely,\n{{agent_name}}",
+            agent_id,
+            "common",
+            false,
+        )
+    })
+
+    test("should get agent's own saved reply", async ({ fdm }) => {
+        const savedReply = await getSavedReply(fdm, agent_id, reply_id_3)
+        expect(savedReply).toBeDefined()
+        expect(savedReply?.reply_id).toBe(reply_id_3)
+    })
+
+    test("should get other agent's shared saved reply", async ({ fdm }) => {
+        const savedReply = await getSavedReply(fdm, agent_id, reply_id_2)
+        expect(savedReply).toBeDefined()
+        expect(savedReply?.reply_id).toBe(reply_id_2)
+    })
+
+    test("should throw an error when getting a private saved reply of another agent", async ({
+        fdm,
+    }) => {
+        await expect(getSavedReply(fdm, agent_id, reply_id_1)).rejects.toThrow()
+    })
+})
+
+describe("makeSavedReplyBodySimple", () => {
+    test("should find the substitution points", () => {
+        const context = {
+            customer_name: "Jane Doe",
+            agent_name: "Bond, James Bond",
+        }
+
+        const message = `Hello Jane Doe,
+I hope you are having a great day. I won't help you.
+
+Sincerely,
+Bond,
+James Bond`
+        const savedReply = makeSavedReplyBodySimple(message, context)
+
+        expect(savedReply).toBe(`Hello {{customer_name}},
+I hope you are having a great day. I won't help you.
+
+Sincerely,
+{{agent_name}}`)
+    })
+
+    test("should handle substitutions that are punctuation-only", () => {
+        const context = {
+            signature: ",,,",
+        }
+
+        const message = "Greetings,,,"
+
+        expect(makeSavedReplyBodySimple(message, context)).toBe("Greetings,,,")
+    })
+
+    test("should handle empty substitutions", () => {
+        const context = {
+            empty: "",
+        }
+
+        const message = "This is an empty substitution: "
+
+        expect(makeSavedReplyBodySimple(message, context)).toBe(
+            "This is an empty substitution: ",
+        )
+    })
+
+    test("should handle invalid keys", () => {
+        const context = {
+            "invalid-key": "value",
+        }
+        const message = "This is an invalid key: "
+
+        expect(() => makeSavedReplyBodySimple(message, context)).toThrow()
+    })
+})
+
+describe("applySavedReply", () => {
+    test("should replace the substitution points with the context values", () => {
+        const context = {
+            customer_name: "Jane Doe",
+        }
+        const savedReply = "Hello, {{customer_name}}!"
+
+        expect(applySavedReply(savedReply, context)).toBe("Hello, Jane Doe!")
+    })
+})
diff --git a/fdm-helpdesk/src/saved-reply.ts b/fdm-helpdesk/src/saved-reply.ts
new file mode 100644
index 000000000..5a117f930
--- /dev/null
+++ b/fdm-helpdesk/src/saved-reply.ts
@@ -0,0 +1,219 @@
+import { and, eq, inArray, or, sql } from "drizzle-orm"
+import { checkHelpdeskPermission } from "./authorization"
+import type { HelpdeskPrincipalId } from "./authorization.types"
+import * as schema from "./db/schema-helpdesk"
+import { handleError } from "./error"
+import type { FdmHelpdeskType } from "./fdm-helpdesk.types"
+import { createId } from "./id"
+
+export type SavedReply = schema.SavedReplyTypeSelect
+export type SavedReplySummary = Pick<SavedReply, "reply_id" | "title">
+export type SavedReplyVariable = string
+export type SavedReplyContext = Partial<{ [k in SavedReplyVariable]: string }>
+
+export async function createSavedReply(
+    fdm: FdmHelpdeskType,
+    title: schema.SavedReplyTypeInsert["title"],
+    body: schema.SavedReplyTypeInsert["body"],
+    createdBy: schema.SavedReplyTypeInsert["created_by"],
+    category?: schema.SavedReplyTypeInsert["category"],
+    isShared?: schema.SavedReplyTypeInsert["is_shared"],
+) {
+    try {
+        const reply_id = createId()
+        await fdm.insert(schema.savedReplies).values({
+            reply_id: reply_id,
+            title: title,
+            body: body,
+            created_by: createdBy,
+            category: category,
+            is_shared: isShared,
+        })
+        return reply_id
+    } catch (err) {
+        throw handleError(err, "Exception for createSavedReply", {
+            title,
+            createdBy,
+            category,
+            isShared,
+        })
+    }
+}
+
+export async function getSavedReplies(
+    fdm: FdmHelpdeskType,
+    principal_id: HelpdeskPrincipalId,
+    category?: schema.SavedReplyTypeSelect["category"],
+): Promise<SavedReplySummary[]> {
+    try {
+        await checkHelpdeskPermission(
+            fdm,
+            "helpdesk",
+            "read",
+            "",
+            principal_id,
+            "getSavedReplies",
+        )
+
+        const helpdeskWritePermission = await checkHelpdeskPermission(
+            fdm,
+            "helpdesk",
+            "write",
+            "",
+            principal_id,
+            "getSavedReplies",
+            false,
+        )
+
+        const principal_ids = Array.isArray(principal_id)
+            ? principal_id
+            : [principal_id]
+        return await fdm
+            .select({
+                reply_id: schema.savedReplies.reply_id,
+                title: schema.savedReplies.title,
+            })
+            .from(schema.savedReplies)
+            .where(
+                and(
+                    sql`TRUE`,
+                    !helpdeskWritePermission
+                        ? or(
+                              schema.savedReplies.is_shared,
+                              inArray(
+                                  schema.savedReplies.created_by,
+                                  principal_ids,
+                              ),
+                          )
+                        : undefined,
+                    typeof category === "string"
+                        ? eq(schema.savedReplies.category, category)
+                        : undefined,
+                ),
+            )
+    } catch (err) {
+        throw handleError(err, "Exception for getSavedReplies", { category })
+    }
+}
+
+export async function getSavedReply(
+    fdm: FdmHelpdeskType,
+    principal_id: string,
+    reply_id: string,
+) {
+    try {
+        await checkHelpdeskPermission(
+            fdm,
+            "saved_reply",
+            "read",
+            reply_id,
+            principal_id,
+            "getSavedReply",
+        )
+
+        return (
+            await fdm
+                .select()
+                .from(schema.savedReplies)
+                .where(and(eq(schema.savedReplies.reply_id, reply_id)))
+        )[0]
+    } catch (err) {
+        throw handleError(err, "Exception for getSavedReply", {
+            principal_id,
+            reply_id,
+        })
+    }
+}
+
+/**
+ * Ensures that the key is something that can be correctly substituted by replacing instances of {{key}} found
+ * in the saved reply body.
+ * @param expr Key to validate.
+ */
+function validateContextKey(expr: string) {
+    if (!/^[a-zA-Z0-9_]+$/.test(expr)) {
+        throw new Error(`Context key ${expr} is not in the expected format.`)
+    }
+}
+
+const punct = "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~"
+    .split("")
+    .map((x) => `\\${x}`)
+    .join("")
+
+/**
+ * Replaces values found in the saved reply context with saved reply substitution points eagerly using regular
+ * expressions.
+ * This is intended as a substitute for AI-based saved reply generation until that is implemented.
+ *
+ * @param replyBody Reply body that normally contains the phrases found in the context
+ * @param context What would be passed to `applySavedReply` to obtain the provided message body.
+ * @returns String with substitution points like {{key_of_context}}. Might not be accurate so the user should
+ * be allowed to adjust the result before saving.
+ */
+export function makeSavedReplyBodySimple(
+    replyBody: string,
+    context: SavedReplyContext,
+) {
+    for (const expr in context) {
+        validateContextKey(expr)
+    }
+
+    const entries = Object.entries(context)
+        .filter((a) => a[1] && a[1].trim().length > 1)
+        .map(([expr, value]) => {
+            const re = `([^\\s${punct}]+)`
+            // If the matched expression is like Hello, World, it should match something like Hello\nworld too.
+            const parts = (value as string)
+                .toLowerCase()
+                .match(new RegExp(re, "ig"))
+            if (!parts) return [expr, null]
+            const regExp = parts
+                .filter((x) => x.trim().length > 0)
+                .join(`(\\s|\\n|[${punct}])+`)
+            return [expr, regExp]
+        })
+        .filter((a) => a[1] !== null) as [string, string][]
+
+    // Try to find the longest substitutions first
+    entries.sort((a, b) => b[1].length - a[1].length)
+
+    let result = replyBody
+    for (const [expr, regExp] of entries) {
+        result = result.replaceAll(new RegExp(regExp, "ig"), `{{${expr}}}`)
+    }
+
+    return result
+}
+
+/**
+ * Replaces instances of {{key}} in a saved reply body with the substitutions found in the context object.
+ * @param replyBody Saved reply body that contains the substitution points like {{key}}.
+ * @param context Map of keys to their substitutions. It is encouraged to standardize the set of available
+ * keys across the application.
+ * @returns Reply body with the substitutions applied. It might not be what the user has intended therefore
+ * they should be prompted to verify that the substitutions are in place before submitting. Substitution
+ * points with no value provided will be left as-is.
+ * @throws if the library is refusing to substitute one of the keys. Keys must consist of English alphanumeric
+ * characters and underscores, without any whitespace.
+ */
+export function applySavedReply(
+    replyBody: string,
+    context: SavedReplyContext,
+): string {
+    try {
+        for (const expr in context) {
+            validateContextKey(expr)
+        }
+        let result = replyBody
+        for (const expr in context) {
+            result = result.replaceAll(
+                `{{${expr}}}`,
+                context[expr] ?? `{{${expr}}}`,
+            )
+        }
+        return result
+    } catch (err) {
+        throw handleError(err, "Exception for applySavedReply")
+    }
+}