@handled-ai/design-system 0.20.26 → 0.20.28

package/src/components/conversation-panel.tsx

@@ -126,7 +126,7 @@ export interface ConvMessage {
 export type ConvStatus = "responded" | "awaiting" | "viewing" | "draft"
 
 /**
- * A reply template offered in the in-composer "Apply template" picker (WIT-970).
+ * A follow-up template offered in the in-composer "Templates" picker (WIT-970).
  * Presentational: the consumer fills variables for THIS thread's recipient
  * before passing it in, so `body` is composer-ready text. `tags` (e.g. "Reply")
  * are shown as chips so reps can recognize the right template at a glance.
@@ -166,7 +166,7 @@ export interface ConversationThread {
   /** Signature text appended to replies (plain text). */
   signature?: string
   /**
-   * Reply templates offered in the composer's "Apply template" picker, already
+   * Follow-up templates offered in the composer's "Templates" picker, already
    * personalized for this thread's recipient (WIT-970). Omit/empty hides the
    * picker.
    */
@@ -561,6 +561,14 @@ type PreviewState = {
 
 const IDLE_PREVIEW: PreviewState = { loading: false, html: null, confirmationToken: null, error: null, local: false }
 
+/**
+ * Matches an author-declared manual-fill placeholder ({{personalize}},
+ * {{personalization_recent_news}}, …). These have no resolver and must be
+ * replaced by the rep before sending; the composer blocks send while any remain.
+ * Non-global so repeated `.test()` calls during render are stateless.
+ */
+const MANUAL_FILL_TOKEN_RE = /\{\{\s*personaliz(?:e|ation)(?:_[a-z0-9]+)*\s*\}\}/i
+
 function ReplyComposer({
   thread,
   me,
@@ -588,6 +596,10 @@ function ReplyComposer({
   const [appliedTemplate, setAppliedTemplate] = React.useState<string | null>(null)
   const [sig, setSig] = React.useState(true)
   const replyTemplates = thread.replyTemplates ?? []
+  // Manual-fill placeholders ({{personalize…}}) are author-required: the rep
+  // must replace them before sending. While any remain in the body we block
+  // send/preview so the personalization is never sent as a literal token.
+  const hasManualFillToken = MANUAL_FILL_TOKEN_RE.test(body)
 
   const applyTemplate = (template: ConversationReplyTemplate) => {
     setBody(template.body)
@@ -719,7 +731,7 @@ function ReplyComposer({
         onKeyDown={(e) => {
           if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
             e.preventDefault()
-            void openPreview()
+            if (!hasManualFillToken) void openPreview()
           }
         }}
       />
@@ -736,11 +748,11 @@ function ReplyComposer({
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button type="button" variant="outline" size="sm" disabled={sending} data-slot="conv-reply-template-trigger">
-                <FileText size={14} /> Apply template
+                <FileText size={14} /> Templates
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="max-w-xs">
-              <DropdownMenuLabel>Reply templates</DropdownMenuLabel>
+              <DropdownMenuLabel>Templates</DropdownMenuLabel>
               <DropdownMenuSeparator />
               {replyTemplates.map((template) => (
                 <DropdownMenuItem
@@ -773,16 +785,33 @@ function ReplyComposer({
         </div>
       ) : null}
 
+      {hasManualFillToken ? (
+        <p data-slot="conv-reply-manual-fill" role="alert" className="text-destructive mt-2 text-[12px]">
+          Fill in the personalize placeholder before sending. Replace each {"{{personalize}}"} with a real, account-specific line.
+        </p>
+      ) : null}
+
       <div className="mt-2 flex flex-wrap items-center gap-2">
         <RichTextToolbar />
         <label className="text-muted-foreground ml-auto inline-flex cursor-pointer items-center gap-1.5 text-[12px]">
           <Switch checked={sig} onCheckedChange={setSig} aria-label="Toggle signature" />
           Signature
         </label>
-        <Button type="button" variant="outline" size="sm" disabled={sending} onClick={() => void openPreview()}>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={sending || hasManualFillToken}
+          onClick={() => void openPreview()}
+        >
           <Eye size={14} /> Preview
         </Button>
-        <Button type="button" size="sm" disabled={sending} onClick={() => void openPreview()}>
+        <Button
+          type="button"
+          size="sm"
+          disabled={sending || hasManualFillToken}
+          onClick={() => void openPreview()}
+        >
           <Send size={14} /> Send
         </Button>
       </div>
@@ -795,7 +824,7 @@ function ReplyComposer({
             </DialogTitle>
             <DialogDescription>
               {previewState.local
-                ? "Local draft preview only — the server prepares the exact message on send."
+                ? "Local draft preview only. The server prepares the exact message on send."
                 : <>Stays on the {subject.replace(/^Re:\s*/i, "")} thread. Gmail keeps it threaded.</>}
             </DialogDescription>
           </DialogHeader>
@@ -855,7 +884,7 @@ function ReplyComposer({
               <Button
                 type="button"
                 size="sm"
-                disabled={sending || previewState.loading}
+                disabled={sending || previewState.loading || hasManualFillToken}
                 onClick={handleSend}
               >
                 <Send size={14} /> {sending ? "Sending..." : "Send now"}

package/src/components/suggested-actions.tsx

@@ -35,6 +35,7 @@ import { AccountContactsPopover, BrandIcon } from "./account-contacts-popover"
 
 export interface SuggestedActionsIconMap {
   gmail?: string
+  outlook?: string
   slack?: string
   zendesk?: string
   salesforce?: string
@@ -43,9 +44,11 @@ export interface SuggestedActionsIconMap {
 function getActionTypeIcon(type: string, className?: string, iconMap?: SuggestedActionsIconMap) {
   switch (type) {
     case "email":
-      return iconMap?.gmail
-        ? <BrandIcon src={iconMap.gmail} alt="Gmail" className={className} />
-        : <Mail className={className} />
+      return iconMap?.outlook
+        ? <BrandIcon src={iconMap.outlook} alt="Outlook" className={className} />
+        : iconMap?.gmail
+          ? <BrandIcon src={iconMap.gmail} alt="Gmail" className={className} />
+          : <Mail className={className} />
     case "slack":
       return iconMap?.slack
         ? <BrandIcon src={iconMap.slack} alt="Slack" className={className} />