@adatechnology/conversations-ui 0.0.0

package/dist/channel/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/chunk-ZDURDZTM.js

@@ -0,0 +1,199 @@
+// src/lib/whatsapp-formatting.tsx
+import { jsx } from "react/jsx-runtime";
+var MONOSPACE_REGEX = /```([\s\S]*?)```/g;
+function tokenize(text) {
+  const tokens = [];
+  let remaining = text;
+  const codeBlocks = [];
+  remaining = remaining.replace(MONOSPACE_REGEX, (_match, content, offset) => {
+    codeBlocks.push({ index: offset, content });
+    return "\0".repeat(_match.length);
+  });
+  let codeBlockIndex = 0;
+  let i = 0;
+  let buffer = "";
+  while (i < remaining.length) {
+    if (remaining[i] === "\0") {
+      if (buffer) {
+        tokens.push(...parseInlineTokens(buffer));
+        buffer = "";
+      }
+      const cb = codeBlocks[codeBlockIndex++];
+      tokens.push({ type: "codeblock", content: cb.content });
+      const skip = "```" + cb.content + "```";
+      i += skip.length;
+      continue;
+    }
+    const inlineMatch = remaining.slice(i).match(/^`([^`]+)`/);
+    if (inlineMatch && inlineMatch.index === 0) {
+      if (buffer) {
+        tokens.push(...parseInlineTokens(buffer));
+        buffer = "";
+      }
+      tokens.push({ type: "monospace", content: inlineMatch[1] });
+      i += inlineMatch[0].length;
+      continue;
+    }
+    buffer += remaining[i];
+    i++;
+  }
+  if (buffer) {
+    tokens.push(...parseInlineTokens(buffer));
+  }
+  return tokens;
+}
+function parseInlineTokens(text) {
+  const result = [];
+  let remaining = text;
+  while (remaining.length > 0) {
+    const boldMatch = remaining.match(/^\*([^*]+)\*/);
+    if (boldMatch) {
+      result.push({ type: "bold", content: boldMatch[1] });
+      remaining = remaining.slice(boldMatch[0].length);
+      continue;
+    }
+    const italicMatch = remaining.match(/^_([^_]+)_/);
+    if (italicMatch) {
+      result.push({ type: "italic", content: italicMatch[1] });
+      remaining = remaining.slice(italicMatch[0].length);
+      continue;
+    }
+    const strikeMatch = remaining.match(/^~([^~]+)~/);
+    if (strikeMatch) {
+      result.push({ type: "strikethrough", content: strikeMatch[1] });
+      remaining = remaining.slice(strikeMatch[0].length);
+      continue;
+    }
+    const nextSpecial = remaining.search(/[*_~`]/);
+    if (nextSpecial === -1) {
+      if (remaining) result.push({ type: "text", content: remaining });
+      break;
+    }
+    if (nextSpecial > 0) {
+      result.push({ type: "text", content: remaining.slice(0, nextSpecial) });
+    }
+    remaining = remaining.slice(nextSpecial);
+  }
+  return result;
+}
+function parseWhatsAppFormatting(text) {
+  const tokens = tokenize(text);
+  return tokens.map((token, index) => {
+    switch (token.type) {
+      case "bold":
+        return /* @__PURE__ */ jsx("strong", { children: token.content }, index);
+      case "italic":
+        return /* @__PURE__ */ jsx("em", { children: token.content }, index);
+      case "strikethrough":
+        return /* @__PURE__ */ jsx("del", { children: token.content }, index);
+      case "monospace":
+        return /* @__PURE__ */ jsx("code", { className: "bg-gray-100 px-1 py-0.5 rounded text-sm", children: token.content }, index);
+      case "codeblock":
+        return /* @__PURE__ */ jsx("pre", { className: "bg-gray-100 p-2 rounded text-sm overflow-x-auto my-1", children: /* @__PURE__ */ jsx("code", { children: token.content }) }, index);
+      default:
+        return /* @__PURE__ */ jsx("span", { children: token.content }, index);
+    }
+  });
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function unescapeHtml(text) {
+  return text.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&nbsp;/g, " ");
+}
+var CODE_TOKEN_MARK = String.fromCharCode(57344);
+var CODE_TOKEN_REGEX = new RegExp(`${CODE_TOKEN_MARK}(\\d+)${CODE_TOKEN_MARK}`, "g");
+function waToHTML(text) {
+  if (!text) return "";
+  const codeTokens = [];
+  let working = text.replace(/```([\s\S]*?)```/g, (_match, content) => {
+    codeTokens.push({ type: "block", content });
+    return `${CODE_TOKEN_MARK}${codeTokens.length - 1}${CODE_TOKEN_MARK}`;
+  });
+  working = working.replace(/`([^`\n]+)`/g, (_match, content) => {
+    codeTokens.push({ type: "inline", content });
+    return `${CODE_TOKEN_MARK}${codeTokens.length - 1}${CODE_TOKEN_MARK}`;
+  });
+  let html = escapeHtml(working);
+  html = html.replace(/\*([^*\n]+)\*/g, "<strong>$1</strong>");
+  html = html.replace(/_([^_\n]+)_/g, "<em>$1</em>");
+  html = html.replace(/~([^~\n]+)~/g, "<del>$1</del>");
+  html = html.replace(/\n/g, "<br>");
+  html = html.replace(CODE_TOKEN_REGEX, (_match, indexStr) => {
+    const token = codeTokens[Number(indexStr)];
+    const escaped = escapeHtml(token.content);
+    if (token.type === "block") {
+      return `<code data-wa="block" class="block bg-black/5 dark:bg-white/10 rounded px-1.5 py-0.5 font-mono text-sm whitespace-pre-wrap">${escaped.replace(/\n/g, "<br>")}</code>`;
+    }
+    return `<code data-wa="inline" class="bg-black/5 dark:bg-white/10 rounded px-0.5 font-mono text-sm">${escaped}</code>`;
+  });
+  return html;
+}
+function htmlToWA(html) {
+  if (!html) return "";
+  let text = html;
+  text = text.replace(/<code data-wa="block"[^>]*>([\s\S]*?)<\/code>/gi, (_match, inner) => `\`\`\`${unescapeHtml(inner.replace(/<br\s*\/?>/gi, "\n"))}\`\`\``);
+  text = text.replace(/<code data-wa="inline"[^>]*>([\s\S]*?)<\/code>/gi, (_match, inner) => `\`${unescapeHtml(inner)}\``);
+  text = text.replace(/<br\s*\/?>/gi, "\n").replace(/<div>/gi, "\n").replace(/<\/div>/gi, "").replace(/<\/p>/gi, "\n").replace(/<p[^>]*>/gi, "");
+  text = text.replace(/<strong>(.*?)<\/strong>/gi, "*$1*");
+  text = text.replace(/<b>(.*?)<\/b>/gi, "*$1*");
+  text = text.replace(/<em>(.*?)<\/em>/gi, "_$1_");
+  text = text.replace(/<i>(.*?)<\/i>/gi, "_$1_");
+  text = text.replace(/<del>(.*?)<\/del>/gi, "~$1~");
+  text = text.replace(/<s>(.*?)<\/s>/gi, "~$1~");
+  text = text.replace(/<code[^>]*>(.*?)<\/code>/gi, "`$1`");
+  text = text.replace(/<[^>]+>/g, "");
+  text = unescapeHtml(text);
+  return text.trim();
+}
+function waToHTMLInline(text) {
+  if (!text) return "";
+  return escapeHtml(text).replace(/\*([^*\n]+)\*/g, "<strong>$1</strong>").replace(/_([^_\n]+)_/g, "<em>$1</em>").replace(/~([^~\n]+)~/g, "<del>$1</del>").replace(/`([^`\n]+)`/g, "<code>$1</code>");
+}
+
+// src/useDarkMode.ts
+import { useState, useEffect, useCallback } from "react";
+var STORAGE_KEY = "conversations-ui-dark-mode";
+function getInitialDark() {
+  if (typeof window === "undefined") return false;
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored !== null) {
+    return stored === "true";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function useDarkMode() {
+  const [isDark, setIsDark] = useState(getInitialDark);
+  useEffect(() => {
+    const root = document.documentElement;
+    if (isDark) {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    localStorage.setItem(STORAGE_KEY, String(isDark));
+  }, [isDark]);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (event) => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored === null) {
+        setIsDark(event.matches);
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const toggle = useCallback(() => {
+    setIsDark((prev) => !prev);
+  }, []);
+  return { isDark, toggle };
+}
+
+export {
+  parseWhatsAppFormatting,
+  waToHTML,
+  htmlToWA,
+  waToHTMLInline,
+  useDarkMode
+};

package/dist/flows/index.d.ts

@@ -0,0 +1,246 @@
+import * as react from 'react';
+import { NodeProps } from '@xyflow/react';
+import { LucideIcon } from 'lucide-react';
+import { FlowConditionOperator, FlowGraphData, FlowNodeData, FlowNodeType, FlowQuestionType, FlowActionKind } from '@adatechnology/meta-whatsapp-contracts';
+export { FlowActionKind, FlowConditionOperator, FlowGraphData, FlowNodeData, FlowNodeNext, FlowNodeType, FlowQuestionType } from '@adatechnology/meta-whatsapp-contracts';
+
+declare const CONDITION_OPERATORS: FlowConditionOperator[];
+declare const BUILT_IN_ACTION_KINDS: {
+    readonly HANDOFF: "handoff";
+    readonly RATE_LIMITED_HANDOFF: "rate_limited_handoff";
+    readonly SEND_PRODUCT_LIST: "send_product_list";
+};
+declare const CROSS_FLOW_PREFIX = "flow:";
+declare const isCrossFlowTarget: (target: string) => boolean;
+declare const crossFlowKey: (target: string) => string;
+declare const NODE_CARD_WIDTH = 240;
+declare function estimateNodeHeight(node: FlowNodeData): number;
+declare const WHATSAPP_LIMITS: {
+    readonly MAX_BUTTONS: 3;
+    readonly MAX_LIST_ROWS: 10;
+    readonly BUTTON_TITLE_MAX: 20;
+    readonly LIST_ROW_TITLE_MAX: 24;
+    readonly BODY_MAX: 1024;
+};
+declare function rendersAsButtons(options: [string, string][] | undefined): boolean;
+declare function targetsOf(node: FlowNodeData): {
+    target: string;
+    optionId?: string;
+    isDefault?: boolean;
+}[];
+type GraphIssue = {
+    severity: 'error' | 'warning';
+    nodeId?: string;
+    message: string;
+};
+declare function validateGraph(graph: FlowGraphData, issueText: {
+    noStart: string;
+    brokenRef: (from: string, to: string) => string;
+    choiceWithoutOptions: (id: string) => string;
+    duplicatedOptionId: (id: string, optionId: string) => string;
+    optionWithoutTarget: (id: string, optionLabel: string) => string;
+    tooManyOptions: (id: string, count: number) => string;
+    buttonTitleTooLong: (id: string, label: string) => string;
+    listTitleTooLong: (id: string, label: string) => string;
+    bodyTooLong: (id: string) => string;
+    unreachable: (id: string) => string;
+    deadEndQuestion: (id: string) => string;
+    conditionIncomplete: (id: string) => string;
+    conditionBranchMissing: (id: string, branch: string) => string;
+}): GraphIssue[];
+declare function computeAutoLayout(graph: FlowGraphData): Record<string, {
+    x: number;
+    y: number;
+}>;
+declare function crossFlowTargetsOf(graph: FlowGraphData): string[];
+declare function computeFlowMapLayout(graphs: Record<string, FlowGraphData>, rootKey: string): Record<string, {
+    x: number;
+    y: number;
+}>;
+type CollectionChain = {
+    nodeIds: string[];
+    actionNodeId: string;
+};
+declare function findCollectionChains(graph: FlowGraphData): CollectionChain[];
+declare function slugifyNodeId(label: string, existing: Set<string>): string;
+
+interface FlowEditorLabels {
+    legend: Record<FlowNodeType, string>;
+    startNodeTooltip: string;
+    liveCountTooltip: (count: number) => string;
+    edgeFallbackLabel: string;
+    actionKindLabels: Record<string, string>;
+    conditionOperatorLabels: Record<FlowConditionOperator, string>;
+    questionTypeLabels: Record<FlowQuestionType, string>;
+    nodePanel: {
+        title: string;
+        contextKey: string;
+        questionType: string;
+        question: string;
+        options: string;
+        addOption: string;
+        optionId: string;
+        optionLabel: string;
+        next: string;
+        nextHint: string;
+        nextRowLabel: string;
+        otherFlowsGroup: string;
+        nextByAnswer: (id: string) => string;
+        nextDefault: string;
+        save: string;
+        cancel: string;
+        fixedLogicNotice: string;
+        actionNotice: string;
+        preview: string;
+        previewPlaceholder: string;
+        previewEmptyBody: string;
+        previewEmptyOption: string;
+        previewListButton: string;
+        previewModeButtons: string;
+        previewModeList: string;
+        delete: string;
+        deleteConfirm: string;
+        directMessage: string;
+        fallbackMessage: string;
+        conditionNotice: string;
+        conditionVariable: string;
+        conditionOperator: string;
+        conditionValue: string;
+        conditionTrue: string;
+        conditionFalse: string;
+        conditionVariableMissing: string;
+    };
+    palette: {
+        title: string;
+        question: string;
+        decision: string;
+        condition: string;
+        conditionHint: string;
+        action: string;
+    };
+    flowMap: {
+        nodeCount: (count: number) => string;
+        openFlow: string;
+    };
+    flowGroup: {
+        focus: string;
+        close: string;
+    };
+    crossFlowPortal: {
+        tooltip: string;
+        goesTo: (label: string) => string;
+    };
+}
+declare const DEFAULT_FLOW_EDITOR_LABELS: FlowEditorLabels;
+declare function mergeFlowEditorLabels(override?: Partial<FlowEditorLabels>): FlowEditorLabels;
+
+declare function nodeLabel(node: FlowNodeData | undefined, labels: FlowEditorLabels): string;
+type FlowNodeCardData = {
+    node: FlowNodeData;
+    liveCount: number;
+    isStart: boolean;
+    isSelected: boolean;
+    issues: GraphIssue[];
+    labels: FlowEditorLabels;
+    actionKindIcons?: Record<string, LucideIcon>;
+    onSelect: (id: string) => void;
+};
+declare function FlowNodeCard({ data }: NodeProps): react.JSX.Element;
+declare const flowNodeTypes: {
+    flowNode: typeof FlowNodeCard;
+};
+
+type FlowMapNodeData = {
+    label: string;
+    nodeCount: number;
+    isRoot: boolean;
+    labels: FlowEditorLabels;
+    onOpen: () => void;
+};
+declare function FlowMapNode({ data }: NodeProps): react.JSX.Element;
+declare const flowMapNodeTypes: {
+    flowMapNode: typeof FlowMapNode;
+};
+
+interface FlowMapCanvasProps {
+    graphs: Record<string, FlowGraphData>;
+    rootKey: string;
+    onOpenFlow: (key: string) => void;
+    labels?: Partial<FlowEditorLabels>;
+}
+declare function FlowMapCanvas({ graphs, rootKey, onOpenFlow, labels: labelsOverride }: FlowMapCanvasProps): react.JSX.Element;
+
+type FlowGroupFrameData = {
+    label: string;
+};
+declare function FlowGroupFrame({ data }: NodeProps): react.JSX.Element;
+declare const flowGroupFrameNodeTypes: {
+    flowGroupFrame: typeof FlowGroupFrame;
+};
+
+type FlowGroupHeaderData = {
+    label: string;
+    labels?: FlowEditorLabels;
+    onFocus: () => void;
+    onClose: () => void;
+};
+declare function FlowGroupHeader({ data }: NodeProps): react.JSX.Element;
+declare const flowGroupHeaderNodeTypes: {
+    flowGroupHeader: typeof FlowGroupHeader;
+};
+
+type FlowPortalNodeData = {
+    label: string;
+    labels?: FlowEditorLabels;
+    onNavigate: () => void;
+};
+declare function FlowPortalNode({ data }: NodeProps): react.JSX.Element;
+declare const flowPortalNodeTypes: {
+    flowPortal: typeof FlowPortalNode;
+};
+
+type NewNodeSpec = {
+    kind: 'question';
+    questionType: FlowQuestionType;
+} | {
+    kind: 'decision';
+} | {
+    kind: 'condition';
+} | {
+    kind: 'action';
+    actionKind: FlowActionKind;
+};
+interface FlowPaletteActionOption {
+    actionKind: FlowActionKind;
+    label: string;
+}
+interface FlowPaletteProps {
+    onAdd: (spec: NewNodeSpec) => void;
+    labels?: Partial<FlowEditorLabels>;
+    actionOptions?: FlowPaletteActionOption[];
+}
+declare function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }: FlowPaletteProps): react.JSX.Element;
+
+interface FlowNodePanelProps {
+    graph: FlowGraphData;
+    node: FlowNodeData;
+    issues: GraphIssue[];
+    otherFlows: {
+        key: string;
+        label: string;
+    }[];
+    onClose: () => void;
+    onChange: (updated: FlowNodeData) => void;
+    onDelete: (nodeId: string) => void;
+    labels?: Partial<FlowEditorLabels>;
+}
+declare function FlowNodePanel({ graph, node, issues, otherFlows, onClose, onChange, onDelete, labels: labelsOverride, }: FlowNodePanelProps): react.JSX.Element;
+
+interface FlowWhatsAppPreviewProps {
+    body: string;
+    options?: [string, string][];
+    labels?: FlowEditorLabels['nodePanel'];
+}
+declare function FlowWhatsAppPreview({ body, options, labels }: FlowWhatsAppPreviewProps): react.JSX.Element;
+
+export { BUILT_IN_ACTION_KINDS, CONDITION_OPERATORS, CROSS_FLOW_PREFIX, type CollectionChain, DEFAULT_FLOW_EDITOR_LABELS, type FlowEditorLabels, FlowGroupFrame, type FlowGroupFrameData, FlowGroupHeader, type FlowGroupHeaderData, FlowMapCanvas, type FlowMapCanvasProps, FlowMapNode, type FlowMapNodeData, FlowNodeCard, type FlowNodeCardData, FlowNodePanel, type FlowNodePanelProps, FlowPalette, type FlowPaletteActionOption, type FlowPaletteProps, FlowPortalNode, type FlowPortalNodeData, FlowWhatsAppPreview, type FlowWhatsAppPreviewProps, type GraphIssue, NODE_CARD_WIDTH, type NewNodeSpec, WHATSAPP_LIMITS, computeAutoLayout, computeFlowMapLayout, crossFlowKey, crossFlowTargetsOf, estimateNodeHeight, findCollectionChains, flowGroupFrameNodeTypes, flowGroupHeaderNodeTypes, flowMapNodeTypes, flowNodeTypes, flowPortalNodeTypes, isCrossFlowTarget, mergeFlowEditorLabels, nodeLabel, rendersAsButtons, slugifyNodeId, targetsOf, validateGraph };