@fayz-ai/plugin-conversations 0.9.4 → 0.10.0

package/dist/context.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type StoreApi } from 'zustand';
 import type { EntityLookup } from '@fayz-ai/admin';
+import type { EntityDef } from '@fayz-ai/core';
 import type { ConversationsUIState } from './store';
 /**
  * App-tunable knobs the inbox UI reads. Kept tiny on purpose: everything here
@@ -8,12 +9,12 @@ import type { ConversationsUIState } from './store';
  * never product policy.
  */
 export interface ResolvedConversationsConfig {
-    /** `people.kind` used when the compose modal creates a contact. */
+    /** `people.kind` the picker searches. */
     contactKind: string;
-    /** Per-vertical extension table linked by `person_id` (skipped when absent). */
-    contactExtensionTable?: string;
     /** Search source for the contact picker. Defaults to the person archetype. */
     contactLookup?: EntityLookup;
+    /** The app's own contact entity — "Create" opens ITS form. Agenda's twin is `clientEntityDef`. */
+    contactEntityDef?: EntityDef;
 }
 export declare const DEFAULT_CONVERSATIONS_CONFIG: ResolvedConversationsConfig;
 export declare function ConversationsContextProvider({ store, config, children, }: {

package/dist/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAA;IACnB,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,YAAY,CAAA;CAC7B;AAED,eAAO,MAAM,4BAA4B,EAAE,2BAE1C,CAAA;AAKD,wBAAgB,4BAA4B,CAAC,EAC3C,KAAK,EACL,MAAqC,EACrC,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAAA;IACrC,MAAM,CAAC,EAAE,2BAA2B,CAAA;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,qBAMA;AAED,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,CAAC,GAAG,CAAC,CAIxF;AAED,wBAAgB,sBAAsB,IAAI,2BAA2B,CAEpE"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C,yCAAyC;IACzC,WAAW,EAAE,MAAM,CAAA;IACnB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,YAAY,CAAA;IAC5B,kGAAkG;IAClG,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B;AAED,eAAO,MAAM,4BAA4B,EAAE,2BAE1C,CAAA;AAKD,wBAAgB,4BAA4B,CAAC,EAC3C,KAAK,EACL,MAAqC,EACrC,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAAA;IACrC,MAAM,CAAC,EAAE,2BAA2B,CAAA;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,qBAMA;AAED,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,CAAC,GAAG,CAAC,CAIxF;AAED,wBAAgB,sBAAsB,IAAI,2BAA2B,CAEpE"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import type { PluginManifest, PluginScope, VerticalId } from '@fayz-ai/core';
+import type { EntityDef, PluginManifest, PluginScope, VerticalId } from '@fayz-ai/core';
 import type { EntityLookup } from '@fayz-ai/admin';
 import type { ConversationsProvider } from './data/types';
 export interface ConversationsPluginOptions {
@@ -14,13 +14,13 @@ export interface ConversationsPluginOptions {
      * hence a knob rather than a hardcoded value. Default: 'contact'.
      */
     contactKind?: string;
-    /**
-     * Per-vertical extension table linked by `person_id` (e.g. 'clients'). Pools
-     * without it live off `public.people` alone — absent is not an error.
-     */
-    contactExtensionTable?: string;
     /** Custom search source for the picker. Defaults to the person archetype lookup. */
     contactLookup?: EntityLookup;
+    /**
+     * The app's contact entity, same definition its registry page uses. "Create"
+     * in the picker opens THAT form. Without it the picker searches only.
+     */
+    contactEntityDef?: EntityDef;
 }
 export declare function createConversationsPlugin(options?: ConversationsPluginOptions): PluginManifest;
 export type { ConversationsProvider } from './data/types';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAGlD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAkBzD,MAAM,WAAW,0BAA0B;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAA;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,YAAY,CAAC,EAAE,qBAAqB,CAAA;IAEpC;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,oFAAoF;IACpF,aAAa,CAAC,EAAE,YAAY,CAAA;CAC7B;AA2BD,wBAAgB,yBAAyB,CAAC,OAAO,CAAC,EAAE,0BAA0B,GAAG,cAAc,CA6G9F;AAED,YAAY,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACzD,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACtF,OAAO,EAAE,+BAA+B,EAAE,KAAK,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAC3F,OAAO,EACL,mCAAmC,EACnC,KAAK,2BAA2B,GACjC,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAEvF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAGlD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAkBzD,MAAM,WAAW,0BAA0B;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAA;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,YAAY,CAAC,EAAE,qBAAqB,CAAA;IAEpC;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oFAAoF;IACpF,aAAa,CAAC,EAAE,YAAY,CAAA;IAC5B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B;AA2BD,wBAAgB,yBAAyB,CAAC,OAAO,CAAC,EAAE,0BAA0B,GAAG,cAAc,CA8G9F;AAED,YAAY,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACzD,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACtF,OAAO,EAAE,+BAA+B,EAAE,KAAK,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAC3F,OAAO,EACL,mCAAmC,EACnC,KAAK,2BAA2B,GACjC,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -1,18 +1,18 @@
-import React3 from 'react';
+import React4 from 'react';
 import { registerTranslations, getSupabaseClientOptional, getActiveTenantId, useTranslation } from '@fayz-ai/core';
 import { useStore } from 'zustand';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { MessageSquare, Plus, Search, Inbox, ChevronLeft, Clock, Archive, PanelRight, Send, X, User, MapPin, Tag, StickyNote, Link2, Globe, Mail, Instagram, Phone } from 'lucide-react';
-import { cn, Button, Input, Skeleton, Modal, ModalContent, toast } from '@fayz-ai/ui';
-import { PermissionGate, useLimitGuard, ContactPicker, invalidateLimit } from '@fayz-ai/admin';
+import { SquarePen, MessageSquare, Globe, Mail, Instagram, Phone, Search, Inbox, ChevronLeft, Clock, Archive, PanelRight, Send, X, User, MapPin, Tag, StickyNote, Link2 } from 'lucide-react';
+import { PageHeaderActions, Button, cn, Input, Skeleton, toast } from '@fayz-ai/ui';
+import { PermissionGate, useLimitGuard, RightRailPage, ContactPicker, invalidateLimit } from '@fayz-ai/admin';
 import { createStore } from 'zustand/vanilla';
 
 // src/index.ts
 var DEFAULT_CONVERSATIONS_CONFIG = {
   contactKind: "contact"
 };
-var StoreContext = React3.createContext(null);
-var ConfigContext = React3.createContext(DEFAULT_CONVERSATIONS_CONFIG);
+var StoreContext = React4.createContext(null);
+var ConfigContext = React4.createContext(DEFAULT_CONVERSATIONS_CONFIG);
 function ConversationsContextProvider({
   store,
   config = DEFAULT_CONVERSATIONS_CONFIG,
@@ -21,12 +21,12 @@ function ConversationsContextProvider({
   return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(ConfigContext.Provider, { value: config, children }) });
 }
 function useConversationsStore(selector) {
-  const store = React3.useContext(StoreContext);
+  const store = React4.useContext(StoreContext);
   if (!store) throw new Error("useConversationsStore must be used within ConversationsPage");
   return useStore(store, selector);
 }
 function useConversationsConfig() {
-  return React3.useContext(ConfigContext);
+  return React4.useContext(ConfigContext);
 }
 
 // src/types.ts
@@ -54,10 +54,10 @@ var CHANNEL_ACCENT = {
   webchat: { color: "#f59e0b", badge: "bg-[#f59e0b]/12 text-[#b45309] dark:text-[#fcd34d]" }
 };
 function useMediaQuery(query) {
-  const [matches, setMatches] = React3.useState(
+  const [matches, setMatches] = React4.useState(
     () => typeof window !== "undefined" && window.matchMedia(query).matches
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     const onChange = () => setMatches(mql.matches);
@@ -130,144 +130,6 @@ function dayLabel(iso) {
   if (dayDiff < 7) return d.toLocaleDateString([], { weekday: "long" });
   return d.toLocaleDateString([], { month: "short", day: "numeric", year: now.getFullYear() === d.getFullYear() ? void 0 : "numeric" });
 }
-var CHANNELS = ["whatsapp", "sms", "instagram", "email", "webchat"];
-function personHandleFor(channel, contact) {
-  if (!contact) return "";
-  if (channel === "email") return contact.email ?? "";
-  if (channel === "sms" || channel === "whatsapp") return contact.phone ?? "";
-  return "";
-}
-var HANDLE_LABEL_KEY = {
-  whatsapp: "conversations.new.handleLabel.phone",
-  sms: "conversations.new.handleLabel.phone",
-  email: "conversations.new.handleLabel.email",
-  instagram: "conversations.new.handleLabel.instagram",
-  webchat: "conversations.new.handleLabel.webchat"
-};
-function NewConversationModal({
-  open,
-  onOpenChange
-}) {
-  const t = useTranslation();
-  const create = useConversationsStore((s) => s.create);
-  const config = useConversationsConfig();
-  const guardConversations = useLimitGuard("conversations_month");
-  const [channel, setChannel] = React3.useState("whatsapp");
-  const [contact, setContact] = React3.useState(null);
-  const [typedHandle, setTypedHandle] = React3.useState("");
-  const [creatingContact, setCreatingContact] = React3.useState(false);
-  const [firstMessage, setFirstMessage] = React3.useState("");
-  const [submitting, setSubmitting] = React3.useState(false);
-  const [pickerKey, setPickerKey] = React3.useState(0);
-  React3.useEffect(() => {
-    if (open) {
-      setChannel("whatsapp");
-      setContact(null);
-      setTypedHandle("");
-      setCreatingContact(false);
-      setFirstMessage("");
-      setSubmitting(false);
-      setPickerKey((k) => k + 1);
-    }
-  }, [open]);
-  const derivedHandle = personHandleFor(channel, contact);
-  const effectiveHandle = derivedHandle || typedHandle;
-  const handleLabel = t(HANDLE_LABEL_KEY[channel]);
-  const canSubmit = (contact?.name.trim().length ?? 0) > 0 && !submitting;
-  async function handleSubmit(e) {
-    e.preventDefault();
-    if (!canSubmit) return;
-    setSubmitting(true);
-    try {
-      if (await guardConversations() === "blocked") return;
-      await create({
-        channel,
-        contactName: contact.name.trim(),
-        contactPersonId: contact?.id,
-        contactHandle: effectiveHandle.trim() || void 0,
-        firstMessage: firstMessage.trim() || void 0
-      });
-      invalidateLimit("conversations_month");
-      onOpenChange(false);
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      toast.error(t("conversations.new.createFailed"), { description: message });
-    } finally {
-      setSubmitting(false);
-    }
-  }
-  return /* @__PURE__ */ jsx(Modal, { open, onOpenChange, children: /* @__PURE__ */ jsx(ModalContent, { size: "md", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground", children: t("conversations.new.title") }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-xs font-medium text-muted-foreground", children: t("conversations.new.channel") }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: CHANNELS.map((ch) => {
-        const Icon = CHANNEL_ICON[ch];
-        const active = channel === ch;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setChannel(ch),
-            "aria-pressed": active,
-            className: cn(
-              "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition-colors",
-              active ? "text-white" : "bg-muted text-muted-foreground hover:bg-muted/70"
-            ),
-            style: active ? { backgroundColor: CHANNEL_ACCENT[ch].color } : void 0,
-            children: [
-              /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" }),
-              CHANNEL_LABELS[ch]
-            ]
-          },
-          ch
-        );
-      }) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      ContactPicker,
-      {
-        value: contact,
-        onChange: setContact,
-        kind: config.contactKind,
-        extensionTable: config.contactExtensionTable,
-        lookup: config.contactLookup,
-        allowFreeText: true,
-        onCreatingChange: setCreatingContact,
-        autoFocus: true,
-        label: t("conversations.new.contactName"),
-        placeholder: t("conversations.new.contactNamePlaceholder"),
-        secondaryText: derivedHandle || void 0,
-        handleField: {
-          label: handleLabel,
-          derived: derivedHandle || void 0,
-          value: typedHandle,
-          onChange: setTypedHandle,
-          fieldLabel: t("conversations.new.handle"),
-          placeholder: t("conversations.new.handlePlaceholder")
-        }
-      },
-      pickerKey
-    ),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "conv-first-message", className: "mb-1.5 block text-xs font-medium text-muted-foreground", children: t("conversations.new.firstMessage") }),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          id: "conv-first-message",
-          value: firstMessage,
-          onChange: (e) => setFirstMessage(e.target.value),
-          rows: 3,
-          placeholder: t("conversations.new.firstMessagePlaceholder"),
-          className: "max-h-40 min-h-[64px] w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: t("conversations.new.cancel") }),
-      /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !canSubmit, children: submitting ? t("conversations.new.creating") : t("conversations.new.create") })
-    ] })
-  ] }) }) });
-}
 var FILTERS = ["all", "whatsapp", "sms", "instagram", "email", "webchat"];
 function ConversationList({ className }) {
   const t = useTranslation();
@@ -281,25 +143,8 @@ function ConversationList({ className }) {
     setChannelFilter,
     setSearch
   } = useConversationsStore((s) => s);
-  const [newOpen, setNewOpen] = React3.useState(false);
   return /* @__PURE__ */ jsxs("aside", { className: cn("w-full shrink-0 flex-col border-r border-border bg-card lg:w-[320px]", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-3 py-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: t("conversations.title") }),
-        /* @__PURE__ */ jsx(PermissionGate, { feature: "conversations", action: "create", children: /* @__PURE__ */ jsxs(
-          Button,
-          {
-            size: "sm",
-            onClick: () => setNewOpen(true),
-            "aria-label": t("conversations.list.new"),
-            "data-testid": "conversations-new",
-            children: [
-              /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5 sm:mr-1" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t("conversations.list.new") })
-            ]
-          }
-        ) })
-      ] }),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
         /* @__PURE__ */ jsx(
@@ -373,8 +218,7 @@ function ConversationList({ className }) {
           c.id
         );
       })
-    ] }),
-    /* @__PURE__ */ jsx(NewConversationModal, { open: newOpen, onOpenChange: setNewOpen })
+    ] })
   ] });
 }
 function buildRows(messages) {
@@ -397,9 +241,9 @@ function buildRows(messages) {
 function MessageThread({ selected, onTogglePanel, panelOpen, onBack, className }) {
   const t = useTranslation();
   const { messages, sending, send, setStatus } = useConversationsStore((s) => s);
-  const [draft, setDraft] = React3.useState("");
-  const threadRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const [draft, setDraft] = React4.useState("");
+  const threadRef = React4.useRef(null);
+  React4.useEffect(() => {
     threadRef.current?.scrollTo({ top: threadRef.current.scrollHeight, behavior: "smooth" });
   }, [messages.length, selected.id]);
   async function handleSend() {
@@ -409,7 +253,7 @@ function MessageThread({ selected, onTogglePanel, panelOpen, onBack, className }
     await send(body);
   }
   const accent = CHANNEL_ACCENT[selected.channel];
-  const rows = React3.useMemo(() => buildRows(messages), [messages]);
+  const rows = React4.useMemo(() => buildRows(messages), [messages]);
   return /* @__PURE__ */ jsxs("section", { className: cn("flex min-w-0 flex-1 flex-col bg-muted/20", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-card px-3 py-2.5 md:px-5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2 md:gap-3", children: [
@@ -556,52 +400,212 @@ function ContactPanel({ contact, onClose, className }) {
     /* @__PURE__ */ jsx(Section, { icon: Link2, title: t("conversations.contact.linkedRecords"), children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("conversations.contact.noLinkedRecords") }) })
   ] });
 }
+var CHANNELS = ["whatsapp", "sms", "instagram", "email", "webchat"];
+function personHandleFor(channel, contact) {
+  if (!contact) return "";
+  if (channel === "email") return contact.email ?? "";
+  if (channel === "sms" || channel === "whatsapp") return contact.phone ?? "";
+  return "";
+}
+var HANDLE_LABEL_KEY = {
+  whatsapp: "conversations.new.handleLabel.phone",
+  sms: "conversations.new.handleLabel.phone",
+  email: "conversations.new.handleLabel.email",
+  instagram: "conversations.new.handleLabel.instagram",
+  webchat: "conversations.new.handleLabel.webchat"
+};
+function NewConversationPanel({
+  open,
+  onOpenChange
+}) {
+  const t = useTranslation();
+  const create = useConversationsStore((s) => s.create);
+  const config = useConversationsConfig();
+  const guardConversations = useLimitGuard("conversations_month");
+  const [channel, setChannel] = React4.useState("whatsapp");
+  const [contact, setContact] = React4.useState(null);
+  const [typedHandle, setTypedHandle] = React4.useState("");
+  const [creatingContact, setCreatingContact] = React4.useState(false);
+  const [firstMessage, setFirstMessage] = React4.useState("");
+  const [submitting, setSubmitting] = React4.useState(false);
+  const [pickerKey, setPickerKey] = React4.useState(0);
+  React4.useEffect(() => {
+    if (open) {
+      setChannel("whatsapp");
+      setContact(null);
+      setTypedHandle("");
+      setCreatingContact(false);
+      setFirstMessage("");
+      setSubmitting(false);
+      setPickerKey((k) => k + 1);
+    }
+  }, [open]);
+  const derivedHandle = personHandleFor(channel, contact);
+  const effectiveHandle = derivedHandle || typedHandle;
+  const handleLabel = t(HANDLE_LABEL_KEY[channel]);
+  const canSubmit = (contact?.name.trim().length ?? 0) > 0 && !submitting;
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!canSubmit) return;
+    setSubmitting(true);
+    try {
+      if (await guardConversations() === "blocked") return;
+      await create({
+        channel,
+        contactName: contact.name.trim(),
+        contactPersonId: contact?.id,
+        contactHandle: effectiveHandle.trim() || void 0,
+        firstMessage: firstMessage.trim() || void 0
+      });
+      invalidateLimit("conversations_month");
+      onOpenChange(false);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      toast.error(t("conversations.new.createFailed"), { description: message });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    RightRailPage,
+    {
+      title: t("conversations.new.title"),
+      open,
+      onClose: () => onOpenChange(false),
+      width: "max-w-md",
+      children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 py-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-xs font-medium text-muted-foreground", children: t("conversations.new.channel") }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: CHANNELS.map((ch) => {
+            const Icon = CHANNEL_ICON[ch];
+            const active = channel === ch;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setChannel(ch),
+                "aria-pressed": active,
+                className: cn(
+                  "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition-colors",
+                  active ? "text-white" : "bg-muted text-muted-foreground hover:bg-muted/70"
+                ),
+                style: active ? { backgroundColor: CHANNEL_ACCENT[ch].color } : void 0,
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" }),
+                  CHANNEL_LABELS[ch]
+                ]
+              },
+              ch
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ContactPicker,
+          {
+            value: contact,
+            onChange: setContact,
+            kind: config.contactKind,
+            lookup: config.contactLookup,
+            createEntityDef: config.contactEntityDef,
+            allowFreeText: true,
+            onCreatingChange: setCreatingContact,
+            autoFocus: true,
+            label: t("conversations.new.contactName"),
+            placeholder: t("conversations.new.contactNamePlaceholder"),
+            secondaryText: derivedHandle || void 0,
+            handleField: {
+              label: handleLabel,
+              derived: derivedHandle || void 0,
+              value: typedHandle,
+              onChange: setTypedHandle,
+              fieldLabel: t("conversations.new.handle"),
+              placeholder: t("conversations.new.handlePlaceholder")
+            }
+          },
+          pickerKey
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "conv-first-message", className: "mb-1.5 block text-xs font-medium text-muted-foreground", children: t("conversations.new.firstMessage") }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              id: "conv-first-message",
+              value: firstMessage,
+              onChange: (e) => setFirstMessage(e.target.value),
+              rows: 3,
+              placeholder: t("conversations.new.firstMessagePlaceholder"),
+              className: "max-h-40 min-h-[64px] w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-auto pt-2", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !canSubmit, className: "w-full", children: submitting ? t("conversations.new.creating") : t("conversations.new.create") }) })
+      ] })
+    }
+  );
+}
 function InboxView() {
   const t = useTranslation();
   const { conversations, selectedId, deselect } = useConversationsStore((s) => s);
   const isWidePanel = useMediaQuery("(min-width: 1280px)");
-  const [panelOpen, setPanelOpen] = React3.useState(false);
+  const [panelOpen, setPanelOpen] = React4.useState(false);
+  const [newOpen, setNewOpen] = React4.useState(false);
   const selected = conversations.find((c) => c.id === selectedId) ?? null;
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     setPanelOpen(isWidePanel);
   }, [isWidePanel]);
-  return /* @__PURE__ */ jsxs("div", { className: "relative flex h-full min-h-0 overflow-hidden bg-background", children: [
-    /* @__PURE__ */ jsx(ConversationList, { className: cn(selected ? "hidden lg:flex" : "flex") }),
-    selected ? /* @__PURE__ */ jsx(
-      MessageThread,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PermissionGate, { feature: "conversations", action: "create", children: /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsxs(
+      Button,
       {
-        selected,
-        panelOpen,
-        onTogglePanel: () => setPanelOpen((v) => !v),
-        onBack: deselect,
-        className: "flex"
+        size: "sm",
+        onClick: () => setNewOpen(true),
+        "aria-label": t("conversations.list.new"),
+        "data-testid": "conversations-new",
+        children: [
+          /* @__PURE__ */ jsx(SquarePen, { className: "h-3.5 w-3.5 sm:mr-1.5" }),
+          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t("conversations.list.new") })
+        ]
       }
-    ) : /* @__PURE__ */ jsxs("section", { className: "hidden min-w-0 flex-1 flex-col items-center justify-center bg-muted/20 text-muted-foreground lg:flex", children: [
-      /* @__PURE__ */ jsx(MessageSquare, { className: "h-9 w-9" }),
-      /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm", children: t("conversations.empty.select") })
-    ] }),
-    selected && panelOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "absolute inset-0 z-10 bg-black/40 xl:hidden",
-          "aria-label": "Close details",
-          onClick: () => setPanelOpen(false)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        ContactPanel,
+    ) }) }),
+    /* @__PURE__ */ jsx(NewConversationPanel, { open: newOpen, onOpenChange: setNewOpen }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex h-full min-h-0 overflow-hidden bg-background", children: [
+      /* @__PURE__ */ jsx(ConversationList, { className: cn(selected ? "hidden lg:flex" : "flex") }),
+      selected ? /* @__PURE__ */ jsx(
+        MessageThread,
         {
-          contact: selected,
-          onClose: () => setPanelOpen(false),
-          className: "absolute inset-y-0 right-0 z-20 w-[340px] max-w-[88%] shadow-2xl xl:static xl:z-auto xl:w-[300px] xl:max-w-none xl:shadow-none"
+          selected,
+          panelOpen,
+          onTogglePanel: () => setPanelOpen((v) => !v),
+          onBack: deselect,
+          className: "flex"
         }
-      )
+      ) : /* @__PURE__ */ jsxs("section", { className: "hidden min-w-0 flex-1 flex-col items-center justify-center bg-muted/20 text-muted-foreground lg:flex", children: [
+        /* @__PURE__ */ jsx(MessageSquare, { className: "h-9 w-9" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm", children: t("conversations.empty.select") })
+      ] }),
+      selected && panelOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "absolute inset-0 z-10 bg-black/40 xl:hidden",
+            "aria-label": "Close details",
+            onClick: () => setPanelOpen(false)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ContactPanel,
+          {
+            contact: selected,
+            onClose: () => setPanelOpen(false),
+            className: "absolute inset-y-0 right-0 z-20 w-[340px] max-w-[88%] shadow-2xl xl:static xl:z-auto xl:w-[300px] xl:max-w-none xl:shadow-none"
+          }
+        )
+      ] })
     ] })
   ] });
 }
 function ConversationsPage({ store, config }) {
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     void store.getState().load();
   }, []);
   return /* @__PURE__ */ jsx(ConversationsContextProvider, { store, config, children: /* @__PURE__ */ jsx(InboxView, {}) });
@@ -1384,13 +1388,14 @@ function createConversationsPlugin(options) {
   const store = createConversationsStore(provider);
   const config = {
     contactKind: options?.contactKind ?? "contact",
-    contactExtensionTable: options?.contactExtensionTable,
-    contactLookup: options?.contactLookup
+    contactLookup: options?.contactLookup,
+    contactEntityDef: options?.contactEntityDef
   };
-  const PageComponent = () => React3.createElement(ConversationsPage, { store, config });
+  const PageComponent = () => React4.createElement(ConversationsPage, { store, config });
   PageComponent.displayName = "ConversationsPage";
   return {
     id: "conversations",
+    defaultAgentRole: "frontdesk",
     name: options?.navLabel ?? "Conversations",
     icon: "MessageCircle",
     version: "1.0.0",