@handled-ai/design-system 0.20.0 → 0.20.2

package/dist/components/conversation-panel.d.ts

@@ -84,7 +84,7 @@ interface ConversationPanelProps {
     /** Deployment brand, used in the paused-playbook copy. */
     tenantName?: string;
     onSendReply?: (payload: ConversationReplyPayload) => void | Promise<void>;
-    onCreateGmailDraft?: (payload: ConversationReplyPayload) => void;
+    onCreateGmailDraft?: (payload: ConversationReplyPayload) => void | Promise<void>;
     onOpenInGmail?: (threadId: string) => void;
     /** Inline-open this thread initially (defaults to the first responded one). */
     defaultOpenThreadId?: string;

package/dist/components/conversation-panel.js

@@ -69,6 +69,248 @@ function escapeHtml(s) {
 function textToHtml(text) {
   return text.split(/\n{2,}/).map((p) => p.trim()).filter(Boolean).map((p) => `<p>${escapeHtml(p).replace(/\n/g, "<br>")}</p>`).join("");
 }
+const SPLITTABLE_BLOCK_TAGS = /* @__PURE__ */ new Set(["p", "div"]);
+const WHOLE_BLOCK_TAGS = /* @__PURE__ */ new Set(["blockquote", "table", "ul", "ol", "hr"]);
+const BLOCK_TAGS = /* @__PURE__ */ new Set([...SPLITTABLE_BLOCK_TAGS, ...WHOLE_BLOCK_TAGS]);
+const BR_TAG_RE = /<br\s*\/?>/gi;
+const HTML_BLOCK_START_RE = /<(p|div|blockquote|table|ul|ol|hr)\b[^>]*>/i;
+const SIGNATURE_DELIMITER_RE = /^--\s*$/;
+const SIGNOFF_RE = /^(?:thanks,|thank you,|best,|regards,|sincerely,)$/i;
+const DETAILS_START_RE = /^(?:confidentiality notice\b|this message and any attachments\b|this email and any attachments\b|the information contained in this message\b|this communication may contain\b|unsubscribe\b|manage your preferences\b)/i;
+const CONTACT_DETAIL_RE = /(?:@|https?:\/\/|www\.|\+?\d[\d\s().-]{6,}\d|\b(?:ceo|cfo|cto|coo|founder|co-founder|director|manager|vp|vice president|president|head of|sales|marketing|operations|account|customer success|success|support|engineer|consultant|partner|principal|advisor|associate)\b|\b(?:inc|llc|ltd|corp|corporation|company|co\.)\b)/i;
+function decodeHtmlText(value) {
+  const withoutTags = value.replace(BR_TAG_RE, "\n").replace(/<\/(p|div|blockquote|li|tr|table|ul|ol)>/gi, "\n").replace(/<[^>]*>/g, "");
+  if (typeof document !== "undefined") {
+    const textarea = document.createElement("textarea");
+    textarea.innerHTML = withoutTags;
+    return textarea.value;
+  }
+  return withoutTags.replace(/&nbsp;/gi, " ").replace(/&amp;/gi, "&").replace(/&lt;/gi, "<").replace(/&gt;/gi, ">").replace(/&quot;/gi, '"').replace(/&#39;|&apos;/gi, "'");
+}
+function htmlToVisibleText(html) {
+  return decodeHtmlText(html).replace(/\u00a0/g, " ").replace(/[ \t]+/g, " ").trim();
+}
+function serializeNode(node) {
+  const host = document.createElement("div");
+  host.appendChild(node.cloneNode(true));
+  return host.innerHTML;
+}
+function wrapHtmlLike(element, innerHtml) {
+  const clone = element.cloneNode(false);
+  clone.innerHTML = innerHtml;
+  return clone.outerHTML;
+}
+function hasDirectBr(nodes) {
+  return nodes.some((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === "br");
+}
+function hasDirectBlockChild(element) {
+  return Array.from(element.children).some((child) => {
+    const tagName = child.tagName.toLowerCase();
+    return tagName !== "br" && BLOCK_TAGS.has(tagName);
+  });
+}
+function makeHtmlSegment(html) {
+  const visibleText = htmlToVisibleText(html);
+  if (!html.trim() || !visibleText && !/<(?:img|hr)\b/i.test(html)) return null;
+  return { html, visibleText };
+}
+function splitInlineNodes(nodes, wrapper) {
+  const containsBr = hasDirectBr(nodes);
+  const chunks = [[]];
+  nodes.forEach((node) => {
+    var _a;
+    if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === "br") {
+      chunks.push([]);
+      return;
+    }
+    (_a = chunks[chunks.length - 1]) == null ? void 0 : _a.push(serializeNode(node));
+  });
+  return chunks.map((chunk) => chunk.join("")).map((innerHtml) => {
+    if (wrapper) return wrapHtmlLike(wrapper, innerHtml);
+    return containsBr ? `<div>${innerHtml}</div>` : innerHtml;
+  }).map(makeHtmlSegment).filter((segment) => Boolean(segment));
+}
+function splitElementSegment(element) {
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === "div" && hasDirectBlockChild(element)) {
+    const childSegments = splitHtmlNodes(Array.from(element.childNodes));
+    return childSegments.length ? childSegments : [makeHtmlSegment(element.outerHTML)].filter(Boolean);
+  }
+  if (SPLITTABLE_BLOCK_TAGS.has(tagName) && hasDirectBr(Array.from(element.childNodes)) && !hasDirectBlockChild(element)) {
+    return splitInlineNodes(Array.from(element.childNodes), element);
+  }
+  const segment = makeHtmlSegment(element.outerHTML);
+  return segment ? [segment] : [];
+}
+function splitHtmlNodes(nodes) {
+  const segments = [];
+  let inlineNodes = [];
+  const flushInline = () => {
+    if (!inlineNodes.length) return;
+    segments.push(...splitInlineNodes(inlineNodes));
+    inlineNodes = [];
+  };
+  nodes.forEach((node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node;
+      const tagName = element.tagName.toLowerCase();
+      if (BLOCK_TAGS.has(tagName)) {
+        flushInline();
+        segments.push(...splitElementSegment(element));
+        return;
+      }
+    }
+    inlineNodes.push(node);
+  });
+  flushInline();
+  return segments;
+}
+function findMatchingCloseTag(html, tagName, openTagEnd) {
+  if (tagName === "hr") return openTagEnd + 1;
+  const tagPattern = new RegExp(`</?${tagName}\\b[^>]*>`, "gi");
+  tagPattern.lastIndex = openTagEnd + 1;
+  let depth = 1;
+  let match;
+  while ((match = tagPattern.exec(html)) !== null) {
+    const rawTag = match[0];
+    if (/^<\//.test(rawTag)) depth -= 1;
+    else if (!/\/\s*>$/.test(rawTag)) depth += 1;
+    if (depth === 0) return tagPattern.lastIndex;
+  }
+  return html.length;
+}
+function splitHtmlSegmentsFallback(html) {
+  const segments = [];
+  let cursor = 0;
+  const pushInline = (inlineHtml) => {
+    const chunks = inlineHtml.split(BR_TAG_RE);
+    const hadBr = chunks.length > 1;
+    chunks.forEach((chunk) => {
+      const segment = makeHtmlSegment(hadBr ? `<div>${chunk}</div>` : chunk);
+      if (segment) segments.push(segment);
+    });
+  };
+  while (cursor < html.length) {
+    const rest = html.slice(cursor);
+    const match = HTML_BLOCK_START_RE.exec(rest);
+    if (!match || match.index === void 0) {
+      pushInline(rest);
+      break;
+    }
+    if (match.index > 0) pushInline(rest.slice(0, match.index));
+    const tagStart = cursor + match.index;
+    const rawOpen = match[0];
+    const tagName = match[1].toLowerCase();
+    const openTagEnd = tagStart + rawOpen.length - 1;
+    const segmentEnd = findMatchingCloseTag(html, tagName, openTagEnd);
+    const blockHtml = html.slice(tagStart, segmentEnd);
+    if (SPLITTABLE_BLOCK_TAGS.has(tagName) && BR_TAG_RE.test(blockHtml)) {
+      const openTag = rawOpen;
+      const closeTag = `</${tagName}>`;
+      const inner = blockHtml.replace(new RegExp(`^${rawOpen.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, "i"), "").replace(new RegExp(`${closeTag}$`, "i"), "");
+      inner.split(BR_TAG_RE).forEach((chunk) => {
+        const segment = makeHtmlSegment(`${openTag}${chunk}${closeTag}`);
+        if (segment) segments.push(segment);
+      });
+    } else {
+      const segment = makeHtmlSegment(blockHtml);
+      if (segment) segments.push(segment);
+    }
+    cursor = segmentEnd;
+  }
+  return segments;
+}
+function segmentHtmlMessage(html) {
+  if (typeof document === "undefined" || typeof Node === "undefined") {
+    return splitHtmlSegmentsFallback(html);
+  }
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  return splitHtmlNodes(Array.from(template.content.childNodes));
+}
+function segmentTextMessage(text) {
+  var _a;
+  const lines = (_a = text.match(/[^\n]*(?:\n|$)/g)) != null ? _a : [];
+  return lines.filter((line, index) => line.length > 0 && !(index === lines.length - 1 && line === "")).map((line) => ({ text: line, visibleText: line.replace(/\u00a0/g, " ").trim() }));
+}
+function firstVisibleLine(text) {
+  var _a, _b;
+  return (_b = (_a = text.replace(/\u00a0/g, " ").trimStart().split(/\r?\n/).find((line) => line.trim())) == null ? void 0 : _a.trim()) != null ? _b : "";
+}
+function isLikelySenderNameLine(line) {
+  if (!line || line.length > 60) return false;
+  if (/[,@:;!?]|https?:\/\/|www\.|\d/.test(line)) return false;
+  const words = line.split(/\s+/).filter(Boolean);
+  if (words.length < 1 || words.length > 4) return false;
+  return words.every((word) => /^[A-Z][A-Za-z'.-]*$/.test(word));
+}
+function nextVisibleSegmentText(segments, fromIndex) {
+  var _a, _b;
+  for (let index = fromIndex + 1; index < segments.length; index += 1) {
+    const text = firstVisibleLine((_b = (_a = segments[index]) == null ? void 0 : _a.visibleText) != null ? _b : "");
+    if (text) return text;
+  }
+  return "";
+}
+function isFooterBoundary(segments, index) {
+  var _a, _b;
+  const line = firstVisibleLine((_b = (_a = segments[index]) == null ? void 0 : _a.visibleText) != null ? _b : "");
+  if (!line) return false;
+  if (SIGNATURE_DELIMITER_RE.test(line) || DETAILS_START_RE.test(line)) return true;
+  const nextText = nextVisibleSegmentText(segments, index);
+  if (SIGNOFF_RE.test(line)) return Boolean(nextText && (isLikelySenderNameLine(nextText) || CONTACT_DETAIL_RE.test(nextText)));
+  return isLikelySenderNameLine(line) && CONTACT_DETAIL_RE.test(nextText);
+}
+function splitFooterSegments(segments) {
+  const visibleIndexes = segments.map((segment, index) => segment.visibleText ? index : -1).filter((index) => index >= 0);
+  const visibleCount = visibleIndexes.length;
+  if (visibleCount < 2) return { bodySegments: segments, detailsSegments: [] };
+  const trailingCount = Math.max(Math.ceil(visibleCount * 0.4), 8);
+  const firstTrailingOrdinal = Math.max(1, visibleCount - trailingCount);
+  for (let ordinal = firstTrailingOrdinal; ordinal < visibleCount; ordinal += 1) {
+    const index = visibleIndexes[ordinal];
+    if (ordinal > 0 && isFooterBoundary(segments, index)) {
+      return { bodySegments: segments.slice(0, index), detailsSegments: segments.slice(index) };
+    }
+  }
+  return { bodySegments: segments, detailsSegments: [] };
+}
+function splitMessageHtml(rawHtml) {
+  const sanitizedHtml = sanitizeHtml(rawHtml);
+  const { bodySegments, detailsSegments } = splitFooterSegments(segmentHtmlMessage(sanitizedHtml));
+  if (!detailsSegments.length) return { bodyHtml: sanitizedHtml, detailsHtml: "" };
+  return {
+    bodyHtml: bodySegments.map((segment) => {
+      var _a;
+      return (_a = segment.html) != null ? _a : "";
+    }).join(""),
+    detailsHtml: detailsSegments.map((segment) => {
+      var _a;
+      return (_a = segment.html) != null ? _a : "";
+    }).join("")
+  };
+}
+function splitMessageText(text) {
+  const { bodySegments, detailsSegments } = splitFooterSegments(segmentTextMessage(text));
+  if (!detailsSegments.length) return { bodyText: text, detailsText: "" };
+  return {
+    bodyText: bodySegments.map((segment) => {
+      var _a;
+      return (_a = segment.text) != null ? _a : "";
+    }).join(""),
+    detailsText: detailsSegments.map((segment) => {
+      var _a;
+      return (_a = segment.text) != null ? _a : "";
+    }).join("")
+  };
+}
+function messageBodySnippet(message, maxLength = 140) {
+  var _a, _b, _c;
+  if (message.bodyHtml) {
+    return htmlToTextSnippet(splitMessageHtml(message.bodyHtml).bodyHtml, maxLength);
+  }
+  return (_c = (_b = splitMessageText((_a = message.body) != null ? _a : "").bodyText.split("\n").find((line) => line.trim())) == null ? void 0 : _b.trim()) != null ? _c : "";
+}
 function GmailMark({ size = 14 }) {
   return (
     // eslint-disable-next-line @next/next/no-img-element
@@ -114,10 +356,11 @@ function MessageView({
   onToggle,
   me
 }) {
-  var _a, _b, _c;
+  var _a, _b;
   const [quoteOpen, setQuoteOpen] = React.useState(false);
-  const snippet = (_b = (_a = message.body) == null ? void 0 : _a.split("\n").find(Boolean)) != null ? _b : message.bodyHtml ? htmlToTextSnippet(message.bodyHtml, 140) : "";
+  const [detailsOpen, setDetailsOpen] = React.useState(false);
   if (!expanded) {
+    const snippet = messageBodySnippet(message, 140);
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -132,13 +375,16 @@ function MessageView({
             " \xB7 ",
             snippet
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 shrink-0 text-xs", children: (_c = message.ago) != null ? _c : message.date }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 shrink-0 text-xs", children: (_a = message.ago) != null ? _a : message.date }),
           /* @__PURE__ */ jsx(ChevronDown, { size: 13, className: "text-muted-foreground shrink-0" })
         ]
       }
     );
   }
   const toLabel = me && message.to.email === me.email ? "me" : firstName(message.to.name);
+  const htmlParts = message.bodyHtml ? splitMessageHtml(message.bodyHtml) : null;
+  const textParts = message.bodyHtml ? null : splitMessageText((_b = message.body) != null ? _b : "");
+  const hasDetails = Boolean((htmlParts == null ? void 0 : htmlParts.detailsHtml) || (textParts == null ? void 0 : textParts.detailsText));
   return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-message", className: "rounded-md border border-border bg-background", children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -173,8 +419,21 @@ function MessageView({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "px-3 pb-3", children: [
-      message.bodyHtml ? /* @__PURE__ */ jsx("div", { className: PROSE, dangerouslySetInnerHTML: { __html: sanitizeHtml(message.bodyHtml) } }) : /* @__PURE__ */ jsx("div", { className: cn(PROSE, "whitespace-pre-line"), children: message.body }),
+    /* @__PURE__ */ jsxs("div", { className: "px-3 pb-2.5", children: [
+      htmlParts ? /* @__PURE__ */ jsx("div", { "data-slot": "conv-message-body", className: PROSE, dangerouslySetInnerHTML: { __html: htmlParts.bodyHtml } }) : /* @__PURE__ */ jsx("div", { "data-slot": "conv-message-body", className: cn(PROSE, "whitespace-pre-line"), children: textParts == null ? void 0 : textParts.bodyText }),
+      hasDetails ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setDetailsOpen((v) => !v),
+            className: "text-muted-foreground hover:text-foreground hover:bg-muted rounded px-1.5 text-xs leading-5",
+            "aria-expanded": detailsOpen,
+            children: detailsOpen ? "Hide signature/details" : "Show signature/details"
+          }
+        ),
+        detailsOpen ? /* @__PURE__ */ jsx("div", { className: "border-border text-muted-foreground mt-1 border-l-2 pl-3 text-[13px]", children: htmlParts ? /* @__PURE__ */ jsx("div", { "data-slot": "conv-message-details", className: PROSE, dangerouslySetInnerHTML: { __html: htmlParts.detailsHtml } }) : /* @__PURE__ */ jsx("div", { "data-slot": "conv-message-details", className: cn(PROSE, "whitespace-pre-line"), children: textParts == null ? void 0 : textParts.detailsText }) }) : null
+      ] }) : null,
       message.quoted ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
         /* @__PURE__ */ jsx(
           "button",
@@ -224,6 +483,18 @@ function ReplyComposer({
       setSending(false);
     }
   };
+  const handleDraft = async () => {
+    setSending(true);
+    setSendError(null);
+    try {
+      await onDraft(body, sig);
+      setPreview(false);
+    } catch (error) {
+      setSendError(error instanceof Error ? error.message : "Could not create the Gmail draft. Please try again.");
+    } finally {
+      setSending(false);
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-reply", className: "border-border bg-muted/20 rounded-md border p-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
       me ? /* @__PURE__ */ jsx(PersonAvatar, { person: me }) : null,
@@ -340,10 +611,7 @@ function ReplyComposer({
           {
             type: "button",
             disabled: sending,
-            onClick: () => {
-              setPreview(false);
-              onDraft(body, sig);
-            },
+            onClick: handleDraft,
             className: "text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-[13px] disabled:pointer-events-none disabled:opacity-50",
             children: [
               /* @__PURE__ */ jsx(GmailMark, { size: 14 }),
@@ -393,7 +661,7 @@ function ThreadBody({
     return o;
   });
   const toggle = (id) => setExpanded((e) => __spreadProps(__spreadValues({}, e), { [id]: !e[id] }));
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-thread-body", className: "space-y-2", children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-thread-body", className: "space-y-1.5", children: [
     canReply && thread.paused ? /* @__PURE__ */ jsxs("div", { className: "border-status-pending-border bg-status-pending-bg text-status-pending-fg flex items-start gap-2 rounded-md border p-2.5 text-[12px]", children: [
       /* @__PURE__ */ jsx(Pause, { size: 13, className: "mt-0.5 shrink-0" }),
       /* @__PURE__ */ jsxs("span", { children: [
@@ -405,7 +673,7 @@ function ThreadBody({
         " or Gmail."
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: thread.messages.map((m) => /* @__PURE__ */ jsx(MessageView, { message: m, expanded: !!expanded[m.id], onToggle: () => toggle(m.id), me }, m.id)) }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: thread.messages.map((m) => /* @__PURE__ */ jsx(MessageView, { message: m, expanded: !!expanded[m.id], onToggle: () => toggle(m.id), me }, m.id)) }),
     !canReply ? /* @__PURE__ */ jsxs("div", { className: "border-border bg-muted/30 text-muted-foreground flex items-start gap-2 rounded-md border p-2.5 text-[12px]", children: [
       /* @__PURE__ */ jsx(Eye, { size: 14, className: "mt-0.5 shrink-0" }),
       /* @__PURE__ */ jsxs("span", { children: [
@@ -449,8 +717,8 @@ function ThreadBody({
           await (onSendReply == null ? void 0 : onSendReply({ threadId: thread.threadId, body, includeSignature, replyAll }));
           setMode("sent");
         },
-        onDraft: (body, includeSignature) => {
-          onCreateGmailDraft == null ? void 0 : onCreateGmailDraft({ threadId: thread.threadId, body, includeSignature, replyAll });
+        onDraft: async (body, includeSignature) => {
+          await (onCreateGmailDraft == null ? void 0 : onCreateGmailDraft({ threadId: thread.threadId, body, includeSignature, replyAll }));
           setMode("draft");
         }
       }
@@ -497,11 +765,10 @@ function ThreadRow({
   onCreateGmailDraft,
   onOpenInGmail
 }) {
-  var _a, _b;
   const status = effectiveStatus(thread);
   const last = thread.messages[thread.messages.length - 1];
   const who = (last == null ? void 0 : last.direction) === "inbound" ? firstName(last.from.name) : "You";
-  const lastSnippet = (_b = (_a = last == null ? void 0 : last.body) == null ? void 0 : _a.split("\n").find(Boolean)) != null ? _b : (last == null ? void 0 : last.bodyHtml) ? htmlToTextSnippet(last.bodyHtml, 120) : "";
+  const lastSnippet = last ? messageBodySnippet(last, 120) : "";
   const pill = STATUS_PILL[status];
   return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-thread", "data-open": open ? "true" : void 0, className: "border-border border-b last:border-b-0", children: [
     /* @__PURE__ */ jsxs(