@admin-layout/ai-chat-ext-browser 12.2.4-alpha.103 → 12.2.4-alpha.116

package/lib/components/MessageWidgets/MessageMedia.d.ts

@@ -7,11 +7,13 @@ export interface IMessageMediaProps {
     onMessageClick?: (ref: IPost) => void;
 }
 /**
- * Media card — renders the image / video / audio a cdecli generation connector
- * (yantra-image-generation, yantra-video-generation, audio / TTS, …) returned,
- * inline in the chat. Shows the asset(s), the prompt as a caption, an
- * attribution line (connector · model), and open / download actions. The asset
- * URLs live on the message's propsConfiguration, so they persist with the chat.
+ * Media result card — renders the image / video / audio a cdecli generation
+ * connector (yantra-image-generation, yantra-video-generation, audio / TTS, …)
+ * returned, inline in the chat. Shows the asset(s) in a real player, a technical
+ * metadata row (kind · dimensions · duration · format · model) derived from the
+ * loaded asset, the prompt as a caption, and open / download / copy-link actions.
+ * The asset URLs live on the message's propsConfiguration, so they persist with
+ * the chat.
  */
 export declare const MessageMedia: (props: IMessageMediaProps) => React.JSX.Element;
 //# sourceMappingURL=MessageMedia.d.ts.map

package/lib/components/MessageWidgets/MessageMedia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageMedia.d.ts","sourceRoot":"","sources":["../../../src/components/MessageWidgets/MessageMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAI/B,MAAM,WAAW,kBAAkB;IAC/B,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CACzC;AAQD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,kBAAkB,sBAsFrD,CAAC"}
+{"version":3,"file":"MessageMedia.d.ts","sourceRoot":"","sources":["../../../src/components/MessageWidgets/MessageMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAa/B,MAAM,WAAW,kBAAkB;IAC/B,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CACzC;AAaD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,kBAAkB,sBAyIrD,CAAC"}

package/lib/components/MessageWidgets/MessageMedia.js

@@ -1,29 +1,28 @@
-import React from'react';import {FiImage}from'@react-icons/all-files/fi/FiImage.js';import {FiVideo}from'@react-icons/all-files/fi/FiVideo.js';import {FiMusic}from'@react-icons/all-files/fi/FiMusic.js';import {FiDownload}from'@react-icons/all-files/fi/FiDownload.js';import {FiExternalLink}from'@react-icons/all-files/fi/FiExternalLink.js';import {MediaAsset}from'@admin-layout/connector-widgets-browser';const KIND_META = {
-  image: {
-    icon: React.createElement(FiImage, {
-      className: "w-4 h-4"
-    }),
-    label: 'Image'
-  },
-  video: {
-    icon: React.createElement(FiVideo, {
-      className: "w-4 h-4"
-    }),
-    label: 'Video'
-  },
-  audio: {
-    icon: React.createElement(FiMusic, {
-      className: "w-4 h-4"
-    }),
-    label: 'Audio'
-  }
+import React,{useState}from'react';import {FiImage}from'@react-icons/all-files/fi/FiImage.js';import {FiVideo}from'@react-icons/all-files/fi/FiVideo.js';import {FiMusic}from'@react-icons/all-files/fi/FiMusic.js';import {FiDownload}from'@react-icons/all-files/fi/FiDownload.js';import {FiExternalLink}from'@react-icons/all-files/fi/FiExternalLink.js';import {FiCopy}from'@react-icons/all-files/fi/FiCopy.js';import {FiCheck}from'@react-icons/all-files/fi/FiCheck.js';import {MediaAsset}from'@admin-layout/connector-widgets-browser';import {deriveMediaItems,MEDIA_KIND_LABEL,formatAttribution,formatDimensions,formatDuration,formatMediaFormat}from'./mediaUtils.js';const KIND_ICON = {
+  image: React.createElement(FiImage, {
+    className: "w-3.5 h-3.5"
+  }),
+  video: React.createElement(FiVideo, {
+    className: "w-3.5 h-3.5"
+  }),
+  audio: React.createElement(FiMusic, {
+    className: "w-3.5 h-3.5"
+  })
 };
+/** One compact `·`-separated metadata cell. */
+const MetaCell = ({
+  children
+}) => React.createElement("span", {
+  className: "inline-flex items-center whitespace-nowrap"
+}, children);
 /**
- * Media card — renders the image / video / audio a cdecli generation connector
- * (yantra-image-generation, yantra-video-generation, audio / TTS, …) returned,
- * inline in the chat. Shows the asset(s), the prompt as a caption, an
- * attribution line (connector · model), and open / download actions. The asset
- * URLs live on the message's propsConfiguration, so they persist with the chat.
+ * Media result card — renders the image / video / audio a cdecli generation
+ * connector (yantra-image-generation, yantra-video-generation, audio / TTS, …)
+ * returned, inline in the chat. Shows the asset(s) in a real player, a technical
+ * metadata row (kind · dimensions · duration · format · model) derived from the
+ * loaded asset, the prompt as a caption, and open / download / copy-link actions.
+ * The asset URLs live on the message's propsConfiguration, so they persist with
+ * the chat.
  */
 const MessageMedia = props => {
   const {
@@ -34,58 +33,91 @@ const MessageMedia = props => {
   const {
     attachment
   } = message.propsConfiguration?.contents ?? {};
+  const [assetMeta, setAssetMeta] = useState({});
+  const [copied, setCopied] = useState(false);
   if (!attachment || !attachment.url) return null;
-  const items = attachment.items && attachment.items.length > 0 ? attachment.items : [{
-    kind: attachment.kind,
-    url: attachment.url,
-    title: attachment.title,
-    mimeType: attachment.mimeType,
-    posterUrl: attachment.posterUrl
-  }];
-  const meta = KIND_META[attachment.kind] ?? KIND_META.image;
-  const title = attachment.title || `${meta.label} generated`;
-  const attribution = [attachment.connector, attachment.model].filter(Boolean).join(' · ');
-  const isGrid = items.length > 1 && attachment.kind === 'image';
+  const items = deriveMediaItems(attachment);
+  if (items.length === 0) return null;
+  const kind = attachment.kind;
+  const kindLabel = MEDIA_KIND_LABEL[kind] ?? MEDIA_KIND_LABEL.image;
+  const kindIcon = KIND_ICON[kind] ?? KIND_ICON.image;
+  const title = attachment.title || `${kindLabel} generated`;
+  const attribution = formatAttribution(attachment);
+  const isImageGrid = items.length > 1 && kind === 'image';
+  // Technical metadata — dimensions/duration come from the loaded asset (single
+  // asset only; a grid has no one set of dimensions), format from the mime type.
+  const dimensions = !isImageGrid ? formatDimensions(assetMeta.width, assetMeta.height) : undefined;
+  const duration = !isImageGrid ? formatDuration(assetMeta.duration) : undefined;
+  const format = formatMediaFormat(attachment.mimeType, attachment.fileName);
+  const metaCells = [isImageGrid ? `${items.length} images` : undefined, dimensions, duration, format, attribution].filter(Boolean);
   const open = () => onMessageClick?.(message);
+  const copyLink = async () => {
+    try {
+      await navigator.clipboard?.writeText(attachment.url);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    } catch {
+      /* clipboard unavailable — no-op */
+    }
+  };
   return React.createElement("div", {
     key: `${index}`,
-    className: "my-2 mx-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/60 overflow-hidden"
+    className: "my-2 mx-2 w-[calc(100%-1rem)] rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/60 overflow-hidden"
   }, React.createElement("div", {
-    className: "flex items-center gap-2 px-3 py-2 border-b border-gray-100 dark:border-gray-700"
+    className: "flex items-center gap-2 px-3 py-2.5 border-b border-gray-100 dark:border-gray-700/80"
   }, React.createElement("span", {
-    className: "flex-shrink-0 text-blue-500"
-  }, meta.icon), React.createElement("p", {
-    className: "flex-1 min-w-0 text-sm font-semibold text-gray-900 dark:text-gray-100 truncate"
+    className: "flex-shrink-0 inline-flex items-center gap-1 rounded-md bg-blue-50 dark:bg-gray-700 px-1.5 py-0.5 text-[11px] font-medium text-blue-600 dark:text-blue-400"
+  }, kindIcon, kindLabel), React.createElement("p", {
+    className: "flex-1 min-w-0 text-sm font-semibold text-gray-900 dark:text-gray-100 truncate",
+    title: title
   }, title), attribution && React.createElement("span", {
-    className: "flex-shrink-0 text-[10px] text-gray-400 dark:text-gray-500 truncate max-w-[55%]"
+    className: "flex-shrink-0 text-[11px] text-gray-400 dark:text-gray-500 truncate max-w-[55%]"
   }, attribution)), React.createElement("div", {
-    className: `p-2 ${isGrid ? 'grid grid-cols-2 gap-2' : 'flex flex-col gap-2'}`,
+    className: `p-2 ${isImageGrid ? 'grid grid-cols-2 gap-2' : 'flex flex-col gap-2'}`,
     onClick: open,
     role: onMessageClick ? 'button' : undefined
   }, items.map((item, i) => React.createElement(MediaAsset, {
     key: (item.url ?? '') + i,
-    item: item
-  }))), React.createElement("div", {
-    className: "px-3 pb-3 pt-1"
+    item: item,
+    onMeta: items.length === 1 ? setAssetMeta : undefined
+  }))), metaCells.length > 0 && React.createElement("div", {
+    className: "px-3 pb-1 flex flex-wrap items-center gap-2 text-[11px] text-gray-500 dark:text-gray-400"
+  }, metaCells.map((cell, i) => React.createElement(React.Fragment, {
+    key: cell + i
+  }, i > 0 && React.createElement("span", {
+    className: "text-gray-300 dark:text-gray-600"
+  }, "\u00B7"), React.createElement(MetaCell, null, cell)))), React.createElement("div", {
+    className: "px-3 pb-3 pt-2"
   }, attachment.prompt && React.createElement("p", {
     className: "text-xs text-gray-500 dark:text-gray-400 line-clamp-2",
     title: attachment.prompt
   }, attachment.prompt), React.createElement("div", {
-    className: "mt-2 flex items-center gap-3"
+    className: "mt-2 flex flex-wrap items-center gap-2"
   }, React.createElement("a", {
     href: attachment.url,
     target: "_blank",
     rel: "noopener noreferrer",
     onClick: e => e.stopPropagation(),
-    className: "inline-flex items-center gap-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:underline"
-  }, "Open ", React.createElement(FiExternalLink, {
-    className: "w-3 h-3"
-  })), React.createElement("a", {
+    className: "inline-flex items-center gap-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 px-2.5 py-1.5 text-xs font-medium text-white transition-colors"
+  }, React.createElement(FiExternalLink, {
+    className: "w-3.5 h-3.5"
+  }), " Open"), React.createElement("a", {
     href: attachment.url,
     download: attachment.fileName || true,
     onClick: e => e.stopPropagation(),
-    className: "inline-flex items-center gap-1 text-xs font-medium text-gray-600 dark:text-gray-300 hover:underline"
-  }, "Download ", React.createElement(FiDownload, {
-    className: "w-3 h-3"
-  })))));
+    className: "inline-flex items-center gap-1.5 rounded-lg bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 transition-colors"
+  }, React.createElement(FiDownload, {
+    className: "w-3.5 h-3.5"
+  }), " Download"), React.createElement("button", {
+    type: "button",
+    onClick: e => {
+      e.stopPropagation();
+      void copyLink();
+    },
+    className: "inline-flex items-center gap-1.5 rounded-lg bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 transition-colors"
+  }, copied ? React.createElement(FiCheck, {
+    className: "w-3.5 h-3.5"
+  }) : React.createElement(FiCopy, {
+    className: "w-3.5 h-3.5"
+  }), copied ? 'Copied' : 'Copy link'))));
 };export{MessageMedia};//# sourceMappingURL=MessageMedia.js.map

package/lib/components/MessageWidgets/MessageMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageMedia.js","sources":["../../../src/components/MessageWidgets/MessageMedia.tsx"],"sourcesContent":[null],"names":[],"mappings":"qZAiBA,MAAM,SAAS,GAAwE;AACnF,EAAA,KAAA,EAAK;AACL,IAAA,IAAA,EAAK,KAAI,CAAA,uBAAO;AAChB,MAAA,SAAS,EAAI;KACf,CAAA;AAEF,IAAA,KAAA,EAAA;;;;;;AAMG,IAAA,KAAA,EAAA;AACH,GAAA;OACI,EAAA;AACA,IAAA,IAAA,EAAM,KAAE,CAAA,aAAgB,CAAA,OAAQ,EAAA;AAIhC,MAAA,SAAK,EAAA;AAA+B,KAAA,CAAA;AAEpC,IAAA,KAAA,EAAM;;AAGE,CAAA;AACM;;;;;;AAMC;AACH,MAAA,YAAA,GAAA,KAAA,IAAA;AAEZ,EAAA,MAAA;IACA,OAAM;IACN,KAAA;AACA,IAAA;MAEA,KAAM;QAEN;;AAOY,GAAA,GAAA,OAAA,CAAA,kBAAA,EAAA,QAAM;AACN,EAAA,IAAA,CAAA,UAAA,IAAA,CAAA,UAAA,CAAA,GAAA,EAAA,OAAG,IAAS;aAGX,GAAA,UAAW,CAAI,KACZ,IAAA,UAAA,CAAA,KAAA,CAAA,MAAM,GAAA,CAAA,GAAA;AAOd,IAAA,IAAA,EAAA,UAAA,CAAA,IAAA;SAWA,UAAA,CAAA,GAAA;AACK,IAAA,KAAA,EAAA,UAAA,CAAU,KAAC;YAKZ,EAAA,UAAA,CAAA,QAAA;AACI,IAAA,SAAA,EAAA,UAAA,CAAA;;AAOS,EAAA,MAAA,IAAA,GAAA,SAAA,CAAA,UAAA,CAAA,IAAC,cAAc,CAAA,KAAC;AAEzB,EAAA,MAAA,KAAA,GAAA,UAAA,CAAA,KAAA,IAAA,CAAA,EAAA,IACI,CAAA,KAAM,CAAA,UAAW,CAAA;;sBAKR,CAAA,MAAA,GAAA,CAAA,IAAA,UAAC,CAAA,IAAU,KAAC,OAAS;AAMtD,EAAE,MAAA,IAAA,GAAA,MAAA,cAAA,GAAA,OAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MessageMedia.js","sources":["../../../src/components/MessageWidgets/MessageMedia.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/lib/components/MessageWidgets/mediaUtils.d.ts

@@ -0,0 +1,21 @@
+import { MediaAttachmentsInterface, MediaItem } from '../../interfaces';
+export type MediaKind = MediaItem['kind'];
+/** Human label for each asset kind. */
+export declare const MEDIA_KIND_LABEL: Record<MediaKind, string>;
+/**
+ * Normalise an attachment into a flat list of assets. Agents emit two shapes:
+ * a single top-level `url`, or a nested `items[]` array — this tolerates both.
+ */
+export declare const deriveMediaItems: (attachment: MediaAttachmentsInterface) => MediaItem[];
+/** Seconds → `m:ss` (hours fold into minutes). `65` → `"1:05"`, `8` → `"0:08"`. */
+export declare const formatDuration: (seconds?: number) => string | undefined;
+/** Intrinsic dimensions → `"1920×1080"`; undefined until both are known. */
+export declare const formatDimensions: (width?: number, height?: number) => string | undefined;
+/**
+ * Short uppercase format label from the mime subtype, falling back to the file
+ * extension. `"video/mp4"` → `"MP4"`, `"image/png"` → `"PNG"`, `foo.webp` → `"WEBP"`.
+ */
+export declare const formatMediaFormat: (mimeType?: string, fileName?: string) => string | undefined;
+/** The attribution line: `connector · model`, omitting whichever is absent. */
+export declare const formatAttribution: (attachment: MediaAttachmentsInterface) => string | undefined;
+//# sourceMappingURL=mediaUtils.d.ts.map

package/lib/components/MessageWidgets/mediaUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediaUtils.d.ts","sourceRoot":"","sources":["../../../src/components/MessageWidgets/mediaUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAExE,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAE1C,uCAAuC;AACvC,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAItD,CAAC;AAuBF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,YAAY,yBAAyB,KAAG,SAAS,EAcjF,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,cAAc,GAAI,UAAU,MAAM,KAAG,MAAM,GAAG,SAM1D,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,EAAE,SAAS,MAAM,KAAG,MAAM,GAAG,SACtB,CAAC;AAUvD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,EAAE,WAAW,MAAM,KAAG,MAAM,GAAG,SAMjF,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,iBAAiB,GAAI,YAAY,yBAAyB,KAAG,MAAM,GAAG,SAGlF,CAAC"}

package/lib/components/MessageWidgets/mediaUtils.js

@@ -0,0 +1,76 @@
+/** Human label for each asset kind. */
+const MEDIA_KIND_LABEL = {
+  image: 'Image',
+  video: 'Video',
+  audio: 'Audio'
+};
+/** Extensions worth recognising when an item names no kind — the rest fall through to image. */
+const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'm4v', 'mkv'];
+const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'm4a', 'aac', 'flac'];
+/**
+ * The kind an item renders as. `MediaAsset` picks `<img>` for anything it does not
+ * recognise, so an item that names no kind renders a clip or a track as a broken
+ * image — hence the fallbacks: the attachment's own kind, then the mime type, then
+ * the URL's extension.
+ */
+const itemKind = (item, attachment) => {
+  if (item.kind) return item.kind;
+  if (attachment.kind) return attachment.kind;
+  const mime = item.mimeType?.split('/')[0]?.toLowerCase();
+  if (mime === 'video' || mime === 'audio' || mime === 'image') return mime;
+  const ext = item.url?.split(/[?#]/)[0]?.split('.').pop()?.toLowerCase() ?? '';
+  if (VIDEO_EXTENSIONS.includes(ext)) return 'video';
+  if (AUDIO_EXTENSIONS.includes(ext)) return 'audio';
+  return 'image';
+};
+/**
+ * Normalise an attachment into a flat list of assets. Agents emit two shapes:
+ * a single top-level `url`, or a nested `items[]` array — this tolerates both.
+ */
+const deriveMediaItems = attachment => {
+  if (Array.isArray(attachment.items) && attachment.items.length > 0) {
+    return attachment.items.map(item => ({
+      ...item,
+      kind: itemKind(item, attachment)
+    }));
+  }
+  if (!attachment.url) return [];
+  return [{
+    kind: itemKind(attachment, attachment),
+    url: attachment.url,
+    title: attachment.title,
+    mimeType: attachment.mimeType,
+    posterUrl: attachment.posterUrl
+  }];
+};
+/** Seconds → `m:ss` (hours fold into minutes). `65` → `"1:05"`, `8` → `"0:08"`. */
+const formatDuration = seconds => {
+  if (seconds == null || !Number.isFinite(seconds) || seconds < 0) return undefined;
+  const total = Math.round(seconds);
+  const minutes = Math.floor(total / 60);
+  const secs = total % 60;
+  return `${minutes}:${secs.toString().padStart(2, '0')}`;
+};
+/** Intrinsic dimensions → `"1920×1080"`; undefined until both are known. */
+const formatDimensions = (width, height) => width && height ? `${width}×${height}` : undefined;
+/** Common mime subtypes that read better under a short alias than raw. */
+const FORMAT_ALIASES = {
+  quicktime: 'MOV',
+  'x-matroska': 'MKV',
+  jpeg: 'JPG',
+  'svg+xml': 'SVG'
+};
+/**
+ * Short uppercase format label from the mime subtype, falling back to the file
+ * extension. `"video/mp4"` → `"MP4"`, `"image/png"` → `"PNG"`, `foo.webp` → `"WEBP"`.
+ */
+const formatMediaFormat = (mimeType, fileName) => {
+  const sub = mimeType?.split('/')[1]?.split(';')[0]?.trim().toLowerCase() || fileName?.split('.').pop()?.trim().toLowerCase();
+  if (!sub) return undefined;
+  return (FORMAT_ALIASES[sub] ?? sub).toUpperCase();
+};
+/** The attribution line: `connector · model`, omitting whichever is absent. */
+const formatAttribution = attachment => {
+  const parts = [attachment.connector, attachment.model].filter(Boolean);
+  return parts.length ? parts.join(' · ') : undefined;
+};export{MEDIA_KIND_LABEL,deriveMediaItems,formatAttribution,formatDimensions,formatDuration,formatMediaFormat};//# sourceMappingURL=mediaUtils.js.map

package/lib/components/MessageWidgets/mediaUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediaUtils.js","sources":["../../../src/components/MessageWidgets/mediaUtils.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@admin-layout/ai-chat-ext-browser",
-    "version": "12.2.4-alpha.103",
+    "version": "12.2.4-alpha.116",
     "description": "AI Chat extension for Messenger - supports AI assistant, thinking, code blocks, tool use, and service messages",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -21,7 +21,7 @@
         "watch": "npm run build:lib:watch"
     },
     "dependencies": {
-        "@admin-layout/connector-widgets-browser": "12.2.4-alpha.103",
+        "@admin-layout/connector-widgets-browser": "12.2.4-alpha.104",
         "html-react-parser": "^3.0.1"
     },
     "devDependencies": {
@@ -36,7 +36,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2fe65c48f3d39ef929660fd4c10535e48357f428",
+    "gitHead": "ebadf4007c67a8d0b0d6114c0fb0dde7f19ee5f7",
     "typescript": {
         "definition": "lib/index.d.ts"
     }