@admin-layout/tailwind-ui 12.2.4-alpha.62 → 12.2.4-alpha.66

package/lib/components/CharacterSlotPicker/CharacterSlotPicker.js

@@ -0,0 +1,249 @@
+import {jsx,jsxs}from'react/jsx-runtime';import*as React from'react';import {Star,X,Settings}from'lucide-react';import {Popover,PopoverTrigger,PopoverContent}from'../../shardui/popover.js';import {useCharacterPicker}from'../AIToolbar/hooks/useActiveCharacter.js';import {useCharacterSlots,SLOT_NUMBERS}from'../../hooks/characterSlotsPreference.js';import {useCharacterOverrides,setCharacterOverrides}from'../../hooks/characterOverrides.js';// helpers
+function findCharacterByFile(list, fileName) {
+  if (!fileName) return null;
+  return list.find(c => c.fileName === fileName) ?? null;
+}
+function SlotSettingsForm({
+  fileName,
+  characterName,
+  onClose
+}) {
+  const overrides = useCharacterOverrides(fileName);
+  const [voiceId, setVoiceId] = React.useState(overrides.voiceId);
+  const [addendum, setAddendum] = React.useState(overrides.addendum);
+  // Keep local state in sync if the popover re-opens for a different snapshot.
+  React.useEffect(() => {
+    setVoiceId(overrides.voiceId);
+    setAddendum(overrides.addendum);
+  }, [overrides.voiceId, overrides.addendum]);
+  const handleSave = () => {
+    setCharacterOverrides(fileName, {
+      voiceId: voiceId.trim(),
+      addendum: addendum.trim()
+    });
+    onClose();
+  };
+  return jsxs("div", {
+    className: "flex flex-col gap-2 p-1",
+    children: [jsx("div", {
+      className: "px-1 text-xs font-semibold text-foreground/80",
+      children: characterName
+    }), jsxs("label", {
+      className: "flex flex-col gap-1",
+      children: [jsx("span", {
+        className: "text-xs text-muted-foreground",
+        children: "TTS voice ID"
+      }), jsx("input", {
+        type: "text",
+        value: voiceId,
+        onChange: e => setVoiceId(e.target.value),
+        placeholder: "e.g. ElevenLabs voice id",
+        spellCheck: false,
+        className: "w-full rounded-md border border-border bg-background px-2 py-1 text-xs font-mono outline-none focus:border-primary"
+      })]
+    }), jsxs("label", {
+      className: "flex flex-col gap-1",
+      children: [jsx("span", {
+        className: "text-xs text-muted-foreground",
+        children: "Prompt addendum"
+      }), jsx("textarea", {
+        value: addendum,
+        onChange: e => setAddendum(e.target.value),
+        rows: 4,
+        placeholder: "Extra instructions appended to this character's persona\u2026",
+        className: "w-full resize-y rounded-md border border-border bg-background px-2 py-1 text-xs outline-none focus:border-primary"
+      })]
+    }), jsxs("div", {
+      className: "flex justify-end gap-2 pt-1",
+      children: [jsx("button", {
+        type: "button",
+        onClick: onClose,
+        className: "rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-muted",
+        children: "Cancel"
+      }), jsx("button", {
+        type: "button",
+        onClick: handleSave,
+        className: "rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground hover:opacity-90",
+        children: "Save"
+      })]
+    })]
+  });
+}
+function SlotTile({
+  slot,
+  fileName,
+  character,
+  isDefault,
+  onPick,
+  onClear,
+  onActivate,
+  onSetDefault,
+  candidates
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [settingsOpen, setSettingsOpen] = React.useState(false);
+  const filled = Boolean(fileName);
+  const handleTileClick = () => {
+    if (filled) onActivate(slot);else setOpen(true);
+  };
+  const handleContextMenu = e => {
+    if (!filled) return;
+    e.preventDefault();
+    onClear(slot);
+  };
+  return jsxs(Popover, {
+    open: open && !filled,
+    onOpenChange: setOpen,
+    children: [jsx(PopoverTrigger, {
+      asChild: true,
+      children: jsxs("button", {
+        type: "button",
+        onClick: handleTileClick,
+        onContextMenu: handleContextMenu,
+        title: filled ? `Slot ${slot} · ${character?.name ?? fileName} (click to activate, right-click to clear)` : `Slot ${slot} · empty (click to assign)`,
+        className: ['group relative aspect-square w-full overflow-hidden rounded-xl border bg-muted/30 transition', 'flex items-center justify-center', filled ? 'border-border hover:border-primary/60' : 'border-dashed border-border/60 hover:border-primary/50 hover:bg-muted/50', isDefault ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : ''].join(' '),
+        children: [jsx("span", {
+          className: "absolute left-1 top-1 z-10 rounded bg-background/80 px-1 text-xs font-semibold text-foreground/70",
+          children: slot
+        }), filled && character?.avatarSrc ? jsx("img", {
+          src: character.avatarSrc,
+          alt: character.name,
+          className: "h-full w-full object-cover"
+        }) : filled ? jsx("span", {
+          className: "px-2 text-center text-sm font-medium text-foreground/80",
+          children: character?.name ?? fileName
+        }) : jsx("span", {
+          className: "text-2xl text-muted-foreground/60",
+          children: "+"
+        }), filled && jsx("button", {
+          type: "button",
+          onClick: e => {
+            e.stopPropagation();
+            onSetDefault(slot);
+          },
+          title: isDefault ? 'Default slot' : 'Set as default',
+          className: ['absolute right-1 top-1 z-10 rounded-full p-0.5 transition', isDefault ? 'bg-primary text-primary-foreground' : 'bg-background/80 text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-foreground'].join(' '),
+          children: jsx(Star, {
+            className: "h-3 w-3",
+            fill: isDefault ? 'currentColor' : 'none'
+          })
+        }), filled && jsx("button", {
+          type: "button",
+          onClick: e => {
+            e.stopPropagation();
+            onClear(slot);
+          },
+          title: "Clear slot",
+          className: "absolute bottom-1 right-1 z-10 rounded-full bg-background/80 p-0.5 text-muted-foreground opacity-0 transition group-hover:opacity-100 hover:text-destructive",
+          children: jsx(X, {
+            className: "h-3 w-3"
+          })
+        }), filled && fileName && jsxs(Popover, {
+          open: settingsOpen,
+          onOpenChange: setSettingsOpen,
+          children: [jsx(PopoverTrigger, {
+            asChild: true,
+            children: jsx("button", {
+              type: "button",
+              onClick: e => {
+                e.stopPropagation();
+                setSettingsOpen(true);
+              },
+              title: "Slot settings (voice id & prompt addendum)",
+              className: "absolute bottom-1 left-1 z-10 rounded-full bg-background/80 p-0.5 text-muted-foreground opacity-0 transition group-hover:opacity-100 hover:text-foreground",
+              children: jsx(Settings, {
+                className: "h-3 w-3"
+              })
+            })
+          }), jsx(PopoverContent, {
+            align: "start",
+            sideOffset: 6,
+            className: "w-72 p-2",
+            onClick: e => e.stopPropagation(),
+            children: jsx(SlotSettingsForm, {
+              fileName: fileName,
+              characterName: character?.name ?? fileName,
+              onClose: () => setSettingsOpen(false)
+            })
+          })]
+        })]
+      })
+    }), jsx(PopoverContent, {
+      align: "start",
+      sideOffset: 6,
+      className: "w-56 p-1",
+      children: jsx("div", {
+        className: "max-h-64 overflow-y-auto",
+        children: candidates.length === 0 ? jsx("p", {
+          className: "px-2 py-4 text-center text-sm text-muted-foreground",
+          children: "No characters installed."
+        }) : candidates.map(c => jsxs("button", {
+          type: "button",
+          onClick: () => {
+            onPick(slot, c.name, c.fileName);
+            setOpen(false);
+          },
+          className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted",
+          children: [c.avatarSrc ? jsx("img", {
+            src: c.avatarSrc,
+            alt: "",
+            className: "h-6 w-6 rounded object-cover"
+          }) : jsx("span", {
+            className: "inline-block h-6 w-6 rounded bg-muted"
+          }), jsx("span", {
+            className: "truncate",
+            children: c.name
+          })]
+        }, c.fileName ?? c.name))
+      })
+    })]
+  });
+}
+function CharacterSlotPicker({
+  className
+}) {
+  const picker = useCharacterPicker();
+  const {
+    slots,
+    defaultSlot,
+    setSlot,
+    setDefaultSlot
+  } = useCharacterSlots();
+  const handlePick = React.useCallback((slot, name, fileName) => {
+    if (!fileName) return;
+    void setSlot(slot, fileName);
+  }, [setSlot]);
+  const handleClear = React.useCallback(slot => {
+    void setSlot(slot, null);
+  }, [setSlot]);
+  const handleActivate = React.useCallback(slot => {
+    const fileName = slots[slot];
+    const c = findCharacterByFile(picker.characters, fileName);
+    if (c?.name) picker.setActive(c.name);
+  }, [picker, slots]);
+  const handleSetDefault = React.useCallback(slot => {
+    void setDefaultSlot(slot);
+    // Also activate the default slot's character so the change is visible.
+    const fileName = slots[slot];
+    const c = findCharacterByFile(picker.characters, fileName);
+    if (c?.name) picker.setActive(c.name);
+  }, [picker, slots, setDefaultSlot]);
+  return jsx("div", {
+    className: ['grid grid-cols-3 gap-2', className ?? ''].join(' '),
+    children: SLOT_NUMBERS.map(slot => {
+      const fileName = slots[slot];
+      const character = findCharacterByFile(picker.characters, fileName);
+      return jsx(SlotTile, {
+        slot: slot,
+        fileName: fileName,
+        character: character,
+        isDefault: slot === defaultSlot,
+        onPick: handlePick,
+        onClear: handleClear,
+        onActivate: handleActivate,
+        onSetDefault: handleSetDefault,
+        candidates: picker.characters
+      }, slot);
+    })
+  });
+}export{CharacterSlotPicker};//# sourceMappingURL=CharacterSlotPicker.js.map

package/lib/components/CharacterSlotPicker/CharacterSlotPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharacterSlotPicker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/CharacterSlotPicker/index.d.ts

@@ -0,0 +1,3 @@
+export { CharacterSlotPicker } from './CharacterSlotPicker';
+export type { CharacterSlotPickerProps } from './CharacterSlotPicker';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/CharacterSlotPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CharacterSlotPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/components/Inbox/Channels/ChannelBar.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { type ChannelMeta } from './channelsMeta';
+import { type PairingTokenResult } from './ChannelConnectModal';
+export interface ChannelBarProps {
+    /** Override the default channel list (Telegram/Discord/Slack/WhatsApp/Teams) */
+    channels?: ChannelMeta[];
+    /** Ids of currently connected channels (controlled) */
+    connectedChannelIds?: string[];
+    /** Called when a disconnected channel is clicked. If onConnect returns a PairingTokenResult
+     *  (or a Promise that resolves to one), the modal switches to pairing mode and displays the
+     *  QR + deep-link. Return void to render the token-entry / placeholder modal. */
+    onConnect?: (channel: ChannelMeta) => void | PairingTokenResult | Promise<void | PairingTokenResult>;
+    /** Called when the modal submits a token (non-pairing flow). */
+    onSubmitToken?: (channel: ChannelMeta, token: string) => void | Promise<void>;
+    /** Called when a connected channel is clicked. */
+    onDisconnect?: (channel: ChannelMeta) => void | Promise<void>;
+    /** Called when the modal is closed (cancel/X/backdrop). */
+    onModalClose?: (channel: ChannelMeta) => void;
+    /** External loading flag for the modal (e.g. while a parent gateway call is in flight) */
+    loading?: boolean;
+    /** External error string for the modal */
+    error?: string;
+    /** When supplied while modal is open, modal renders in pairing mode (QR + deep link). */
+    pairing?: PairingTokenResult;
+    className?: string;
+}
+declare function ChannelBar({ channels, connectedChannelIds, onConnect, onSubmitToken, onDisconnect, onModalClose, loading, error, pairing, className, }: ChannelBarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChannelBar {
+    var displayName: string;
+}
+declare const _default: React.MemoExoticComponent<typeof ChannelBar>;
+export default _default;
+//# sourceMappingURL=ChannelBar.d.ts.map

package/lib/components/Inbox/Channels/ChannelBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelBar.d.ts","sourceRoot":"","sources":["../../../../src/components/Inbox/Channels/ChannelBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAA4B,EAAE,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIrF,MAAM,WAAW,eAAe;IAC5B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B;;qFAEiF;IACjF,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,GAAG,kBAAkB,GAAG,OAAO,CAAC,IAAI,GAAG,kBAAkB,CAAC,CAAC;IACrG,gEAAgE;IAChE,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9E,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yFAAyF;IACzF,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAID,iBAAS,UAAU,CAAC,EAChB,QAAmB,EACnB,mBAAmB,EACnB,SAAS,EACT,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,GACZ,EAAE,eAAe,2CA8FjB;kBAzGQ,UAAU;;;;AA6GnB,wBAAsC"}

package/lib/components/Inbox/Channels/ChannelBar.js

@@ -0,0 +1,79 @@
+import {jsxs,Fragment,jsx}from'react/jsx-runtime';import React__default,{useState,useMemo,useCallback}from'react';import {CHANNELS}from'./channelsMeta.js';import ChannelConnectModal from'./ChannelConnectModal.js';// main component
+function ChannelBar({
+  channels = CHANNELS,
+  connectedChannelIds,
+  onConnect,
+  onSubmitToken,
+  onDisconnect,
+  onModalClose,
+  loading,
+  error,
+  pairing,
+  className
+}) {
+  const [selected, setSelected] = useState(null);
+  const [internalPairing, setInternalPairing] = useState(null);
+  const [internalLoading, setInternalLoading] = useState(false);
+  const connectedSet = useMemo(() => new Set(connectedChannelIds ?? []), [connectedChannelIds]);
+  const handleClose = useCallback(() => {
+    const ch = selected;
+    setSelected(null);
+    setInternalPairing(null);
+    setInternalLoading(false);
+    if (ch) onModalClose?.(ch);
+  }, [selected, onModalClose]);
+  const handleClick = useCallback(async channel => {
+    if (connectedSet.has(channel.id)) {
+      await onDisconnect?.(channel);
+      return;
+    }
+    setSelected(channel);
+    setInternalPairing(null);
+    if (!onConnect) return;
+    setInternalLoading(true);
+    try {
+      const result = await onConnect(channel);
+      if (result && typeof result === 'object' && 'token' in result) {
+        setInternalPairing(result);
+      }
+    } finally {
+      setInternalLoading(false);
+    }
+  }, [connectedSet, onConnect, onDisconnect]);
+  const handleSubmitToken = useCallback(async token => {
+    if (!selected) return;
+    await onSubmitToken?.(selected, token);
+    handleClose();
+  }, [selected, onSubmitToken, handleClose]);
+  const effectivePairing = pairing ?? internalPairing ?? undefined;
+  const effectiveLoading = loading || internalLoading;
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      className: `flex items-center justify-center gap-1 mt-2 flex-wrap max-w-xs mx-auto ${className ?? ''}`,
+      children: channels.map(channel => {
+        const isConnected = connectedSet.has(channel.id);
+        return jsxs("button", {
+          type: "button",
+          onClick: () => handleClick(channel),
+          className: `relative group flex items-center justify-center w-8 h-8 rounded-lg transition-all ${isConnected ? 'text-green-600 bg-green-500/10 hover:bg-green-500/20' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100'}`,
+          title: `${channel.name}${isConnected ? ' (connected — click to disconnect)' : ''}`,
+          "aria-label": `Connect ${channel.name}`,
+          children: [channel.icon, isConnected && jsx("span", {
+            className: "absolute -bottom-0.5 -right-0.5 block w-3 h-3 rounded-full bg-green-500 ring-2 ring-white",
+            "aria-hidden": "true"
+          })]
+        }, channel.id);
+      })
+    }), selected && jsx(ChannelConnectModal, {
+      isOpen: !!selected,
+      channel: selected,
+      loading: effectiveLoading,
+      error: error,
+      pairing: effectivePairing,
+      onClose: handleClose,
+      onConnect: handleSubmitToken
+    })]
+  });
+}
+ChannelBar.displayName = 'ChannelBar';
+var ChannelBar_default = React__default.memo(ChannelBar);export{ChannelBar_default as default};//# sourceMappingURL=ChannelBar.js.map

package/lib/components/Inbox/Channels/ChannelBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelBar.js","sources":["../../../../src/components/Inbox/Channels/ChannelBar.tsx"],"sourcesContent":[null],"names":[],"mappings":";AAQI,SAAA,UAAW,CAAA;UACX,GAAA,QAAA;AACA,EAAA,mBAAA;AACA,EAAA,SAAA;;AAEiF,EAAA,YAAA;AACjF,EAAA,YAAU;SACV;AACA,EAAA,KAAA;SACA;AACA,EAAA;;QAEA,CAAA,QAAa,EAAE,WAAU,CAAA,GAAA,QAAW,CAAA;QACpC,CAAA,eAAA,EAAA,kBAAA,CAAA,GAAA,QAAA,CAAA,IAAA,CAAA;QACA,CAAA,eAAkB,EAAA,kBAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;QAClB,YAAA,GAAA,OAAA,CAAA,MAAA,IAAA,GAAA,CAAA,mBAA0C,IAAA,EAAA,CAAA,EAAA,CAAA,mBAAA,CAAA,CAAA;QAC1C,WAAe,GAAA,WAAA,CAAA,MAAA;IACf,MAAA,EAAA,GAAA,QAAA;IACA,WAAU,CAAA,IAAA,CAAA;IACV,kBAAkB,CAAC,IAAA,CAAA;AACtB,IAAA,kBAAA,CAAA,KAAA,CAAA;AAID,IAAA,IAAA,EAAA,EAAA,YAAS,GAAU,EAAC,CAChB;4BADe,CAAA,CAAA;;;;AA6GnB,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Inbox/Channels/ChannelConnectModal.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type ChannelMeta } from './channelsMeta';
+export interface PairingTokenResult {
+    token: string;
+    deepLink?: string;
+    expiresAt?: number;
+}
+export interface ChannelConnectModalProps {
+    isOpen: boolean;
+    channel: ChannelMeta;
+    loading?: boolean;
+    error?: string;
+    /** When present, modal renders QR + deep-link pairing UI instead of token entry. */
+    pairing?: PairingTokenResult;
+    onClose: () => void;
+    onConnect: (token: string) => Promise<void> | void;
+}
+declare function ChannelConnectModal({ isOpen, channel, loading, error, pairing, onClose, onConnect, }: ChannelConnectModalProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChannelConnectModal {
+    var displayName: string;
+}
+declare const _default: React.MemoExoticComponent<typeof ChannelConnectModal>;
+export default _default;
+//# sourceMappingURL=ChannelConnectModal.d.ts.map

package/lib/components/Inbox/Channels/ChannelConnectModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelConnectModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Inbox/Channels/ChannelConnectModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,wBAAwB;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CACtD;AAUD,iBAAS,mBAAmB,CAAC,EACzB,MAAM,EACN,OAAO,EACP,OAAO,EACP,KAAK,EACL,OAAO,EACP,OAAO,EACP,SAAS,GACZ,EAAE,wBAAwB,2CAuM1B;kBA/MQ,mBAAmB;;;;AAmN5B,wBAA+C"}

package/lib/components/Inbox/Channels/ChannelConnectModal.js

@@ -0,0 +1,177 @@
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import React__default,{useState,useEffect,useCallback}from'react';// helper functions
+function buildQrUrl(data) {
+  return `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(data)}`;
+}
+// main component
+function ChannelConnectModal({
+  isOpen,
+  channel,
+  loading,
+  error,
+  pairing,
+  onClose,
+  onConnect
+}) {
+  const [token, setToken] = useState('');
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    if (isOpen) {
+      setToken('');
+      setCopied(false);
+    }
+  }, [isOpen, channel.id]);
+  const handleSubmit = useCallback(e => {
+    e.preventDefault();
+    onConnect(token.trim());
+  }, [token, onConnect]);
+  const handleBackdropClick = useCallback(e => {
+    if (e.target === e.currentTarget && !loading) onClose();
+  }, [onClose, loading]);
+  const handleCopy = useCallback(() => {
+    if (!pairing?.token) return;
+    navigator.clipboard?.writeText(pairing.token).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }, [pairing]);
+  if (!isOpen) return null;
+  const inPairingMode = !!pairing;
+  const tokenRequired = !inPairingMode && channel.tokenLabel.length > 0;
+  const canSubmit = tokenRequired ? token.trim().length > 0 && !loading : !loading;
+  const qrPayload = pairing ? pairing.deepLink ?? pairing.token : '';
+  return jsx("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm px-4",
+    onClick: handleBackdropClick,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": "channel-connect-title",
+    children: jsx("div", {
+      className: "w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden",
+      children: jsxs("form", {
+        onSubmit: handleSubmit,
+        children: [jsxs("div", {
+          className: "px-6 py-5 border-b border-gray-100 flex items-center gap-3",
+          children: [jsx("div", {
+            className: "flex items-center justify-center w-10 h-10 rounded-lg bg-gray-50 text-gray-700",
+            children: channel.icon
+          }), jsxs("div", {
+            className: "flex-1 min-w-0",
+            children: [jsxs("h3", {
+              id: "channel-connect-title",
+              className: "text-base font-semibold text-gray-900 truncate",
+              children: ["Connect ", channel.name]
+            }), jsx("p", {
+              className: "text-xs text-gray-500 truncate",
+              children: channel.description
+            })]
+          }), jsx("button", {
+            type: "button",
+            onClick: onClose,
+            disabled: loading,
+            className: "text-gray-400 hover:text-gray-700 disabled:opacity-50",
+            "aria-label": "Close",
+            children: jsx("svg", {
+              width: 20,
+              height: 20,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: jsx("path", {
+                d: "M18 6L6 18M6 6l12 12"
+              })
+            })
+          })]
+        }), jsxs("div", {
+          className: "px-6 py-5 space-y-4",
+          children: [inPairingMode ? jsxs("div", {
+            className: "flex flex-col items-center gap-3",
+            children: [jsx("div", {
+              className: "flex items-center justify-center p-3 rounded-lg bg-white border border-gray-200",
+              children: jsx("img", {
+                src: buildQrUrl(qrPayload),
+                alt: `QR code to pair ${channel.name}`,
+                width: 200,
+                height: 200,
+                className: "block"
+              })
+            }), pairing?.deepLink && jsxs("a", {
+              href: pairing.deepLink,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700",
+              children: ["Open ", channel.name]
+            }), pairing?.token && jsx("button", {
+              type: "button",
+              onClick: handleCopy,
+              className: "text-xs text-gray-600 hover:text-gray-900 underline",
+              children: copied ? 'Copied!' : 'Copy pairing token'
+            }), jsxs("div", {
+              className: "flex items-center gap-2 text-xs text-gray-500",
+              children: [jsx("svg", {
+                className: "animate-spin",
+                width: 14,
+                height: 14,
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: jsx("path", {
+                  d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
+                })
+              }), "Waiting for pairing\u2026"]
+            })]
+          }) : tokenRequired ? jsxs("div", {
+            children: [jsx("label", {
+              htmlFor: "channel-token-input",
+              className: "block text-sm font-medium text-gray-700 mb-1.5",
+              children: channel.tokenLabel
+            }), jsx("input", {
+              id: "channel-token-input",
+              type: "text",
+              autoComplete: "off",
+              spellCheck: false,
+              value: token,
+              onChange: e => setToken(e.target.value),
+              placeholder: channel.tokenPlaceholder,
+              disabled: loading,
+              className: "w-full px-3 py-2 text-sm rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500 disabled:bg-gray-50"
+            })]
+          }) : jsx("div", {
+            className: "flex items-center justify-center h-32 rounded-lg border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-500",
+            children: loading ? 'Generating pairing token…' : 'Click Connect to start pairing.'
+          }), jsxs("p", {
+            className: "text-xs text-gray-500 leading-relaxed whitespace-pre-line",
+            children: [channel.tokenHelp, channel.docsLink && jsxs(Fragment, {
+              children: [' ', jsx("a", {
+                href: channel.docsLink,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "text-blue-600 hover:underline",
+                children: "Learn more"
+              })]
+            })]
+          }), error && jsx("div", {
+            className: "text-xs text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2",
+            children: error
+          })]
+        }), jsxs("div", {
+          className: "px-6 py-4 bg-gray-50 flex items-center justify-end gap-2",
+          children: [jsx("button", {
+            type: "button",
+            onClick: onClose,
+            className: "px-4 py-2 text-sm rounded-lg text-gray-700 hover:bg-gray-200",
+            children: inPairingMode ? 'Close' : 'Cancel'
+          }), !inPairingMode && jsx("button", {
+            type: "submit",
+            disabled: !canSubmit,
+            className: "px-4 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed",
+            children: loading ? 'Connecting…' : 'Connect'
+          })]
+        })]
+      })
+    })
+  });
+}
+ChannelConnectModal.displayName = 'ChannelConnectModal';
+var ChannelConnectModal$1 = React__default.memo(ChannelConnectModal);export{ChannelConnectModal$1 as default};//# sourceMappingURL=ChannelConnectModal.js.map

package/lib/components/Inbox/Channels/ChannelConnectModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelConnectModal.js","sources":["../../../../src/components/Inbox/Channels/ChannelConnectModal.tsx"],"sourcesContent":[null],"names":[],"mappings":"oHAKA;SACS,UAAS,CAAA,IAAA,EAAA;SACd,CAAA,8DAAkB,EAAA,kBAAA,CAAA,IAAA,CAAA,CAAA,CAAA;;AAErB;AAED,4BAAiB,CAAA;QACb;SACA;SACA;OACA;SACA;SACA;;AAEA,CAAA,EAAA;AACH,EAAA,MAAA,CAAA,KAAA,EAAA,QAAA,CAAA,GAAA,QAAA,CAAA,EAAA,CAAA;AAUD,EAAA,MAAA,CAAA,MAAA,EAAS,qBAAoB,CACzB,MAAM;kBADD;;;;AAmNT,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Inbox/Channels/channelsMeta.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export interface ChannelMeta {
+    id: string;
+    name: string;
+    description: string;
+    icon: ReactNode;
+    /** Backend channel-type identifier consumers can map to their own gateway (e.g. 'telegram-webhook'). */
+    channelType?: string;
+    /** Token field label (empty string => pairing-only flow with no manual token entry) */
+    tokenLabel: string;
+    tokenPlaceholder: string;
+    tokenHelp: string;
+    docsLink?: string;
+}
+export declare const CHANNELS: ChannelMeta[];
+//# sourceMappingURL=channelsMeta.d.ts.map

package/lib/components/Inbox/Channels/channelsMeta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"channelsMeta.d.ts","sourceRoot":"","sources":["../../../../src/components/Inbox/Channels/channelsMeta.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,WAAW;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,SAAS,CAAC;IAChB,wGAAwG;IACxG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uFAAuF;IACvF,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAkED,eAAO,MAAM,QAAQ,EAAE,WAAW,EA0DjC,CAAC"}