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

package/lib/components/MessageWidgets/MessageMedia.js

@@ -0,0 +1,91 @@
+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'
+  }
+};
+/**
+ * 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.
+ */
+const MessageMedia = props => {
+  const {
+    message,
+    index,
+    onMessageClick
+  } = props;
+  const {
+    attachment
+  } = message.propsConfiguration?.contents ?? {};
+  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 open = () => onMessageClick?.(message);
+  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"
+  }, React.createElement("div", {
+    className: "flex items-center gap-2 px-3 py-2 border-b border-gray-100 dark:border-gray-700"
+  }, 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"
+  }, title), attribution && React.createElement("span", {
+    className: "flex-shrink-0 text-[10px] 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'}`,
+    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"
+  }, 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"
+  }, 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", {
+    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"
+  })))));
+};export{MessageMedia};//# sourceMappingURL=MessageMedia.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IPost } from 'common';
+export interface IMessageServiceProps {
+    message: IPost;
+    index: number;
+    onMessageClick?: (ref: IPost) => void;
+}
+/**
+ * Service / System notification message — like system messages in Slack,
+ * info banners in VS Code, or notification toasts in chat apps.
+ */
+export declare const MessageService: (props: IMessageServiceProps) => React.JSX.Element;
+//# sourceMappingURL=MessageService.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageService.d.ts","sourceRoot":"","sources":["../../../src/components/MessageWidgets/MessageService.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAG/B,MAAM,WAAW,oBAAoB;IACjC,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CACzC;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,oBAAoB,sBAwEzD,CAAC"}

package/lib/components/MessageWidgets/MessageService.js

@@ -0,0 +1,74 @@
+import React from'react';import {FiInfo}from'@react-icons/all-files/fi/FiInfo.js';import {FiAlertTriangle}from'@react-icons/all-files/fi/FiAlertTriangle.js';import {FiAlertCircle}from'@react-icons/all-files/fi/FiAlertCircle.js';import {FiCheckCircle}from'@react-icons/all-files/fi/FiCheckCircle.js';import {FiExternalLink}from'@react-icons/all-files/fi/FiExternalLink.js';import parse from'html-react-parser';/**
+ * Service / System notification message — like system messages in Slack,
+ * info banners in VS Code, or notification toasts in chat apps.
+ */
+const MessageService = props => {
+  const {
+    message,
+    index
+  } = props;
+  const {
+    attachment
+  } = message.propsConfiguration?.contents ?? {};
+  if (!attachment) return null;
+  const severityConfig = {
+    info: {
+      icon: React.createElement(FiInfo, {
+        className: "w-5 h-5"
+      }),
+      border: 'border-l-blue-500',
+      bg: 'bg-blue-50 dark:bg-blue-900/20',
+      text: 'text-blue-700 dark:text-blue-300',
+      iconColor: 'text-blue-500'
+    },
+    warning: {
+      icon: React.createElement(FiAlertTriangle, {
+        className: "w-5 h-5"
+      }),
+      border: 'border-l-amber-500',
+      bg: 'bg-amber-50 dark:bg-amber-900/20',
+      text: 'text-amber-700 dark:text-amber-300',
+      iconColor: 'text-amber-500'
+    },
+    error: {
+      icon: React.createElement(FiAlertCircle, {
+        className: "w-5 h-5"
+      }),
+      border: 'border-l-red-500',
+      bg: 'bg-red-50 dark:bg-red-900/20',
+      text: 'text-red-700 dark:text-red-300',
+      iconColor: 'text-red-500'
+    },
+    success: {
+      icon: React.createElement(FiCheckCircle, {
+        className: "w-5 h-5"
+      }),
+      border: 'border-l-green-500',
+      bg: 'bg-green-50 dark:bg-green-900/20',
+      text: 'text-green-700 dark:text-green-300',
+      iconColor: 'text-green-500'
+    }
+  };
+  const cfg = severityConfig[attachment.severity] || severityConfig.info;
+  return React.createElement("div", {
+    key: `${index}`,
+    className: `my-2 mx-2 p-3 rounded-lg border-l-4 ${cfg.border} ${cfg.bg} flex items-start gap-3`
+  }, React.createElement("div", {
+    className: `flex-shrink-0 mt-0.5 ${cfg.iconColor}`
+  }, cfg.icon), React.createElement("div", {
+    className: "flex-1 min-w-0"
+  }, React.createElement("p", {
+    className: `text-sm font-medium ${cfg.text}`
+  }, attachment.isTitleHtml ? parse(attachment.title) : attachment.title), attachment.body && React.createElement("p", {
+    className: "mt-1 text-xs text-gray-600 dark:text-gray-400 whitespace-pre-wrap"
+  }, attachment.body), attachment.action && React.createElement("a", {
+    href: attachment.action.link,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "inline-flex items-center gap-1 mt-2 text-xs font-medium text-blue-600 dark:text-blue-400 hover:underline"
+  }, attachment.action.title, " ", React.createElement(FiExternalLink, {
+    className: "w-3 h-3"
+  })), attachment.timestamp && React.createElement("p", {
+    className: "mt-1 text-[10px] text-gray-400 dark:text-gray-500"
+  }, attachment.timestamp)));
+};export{MessageService};//# sourceMappingURL=MessageService.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageService.js","sources":["../../../src/components/MessageWidgets/MessageService.tsx"],"sourcesContent":[null],"names":[],"mappings":"yZAgBA;;;AAGG;AACI,MAAM,cAAc,GAAG,KAAC,IAA6B;AACxD,EAAA,MAAA;AACA,IAAA,OAAM;AAIN,IAAA;AAAiB,GAAA,GAAA,KAAA;AAEjB,EAAA,MAAA;AACI,IAAA;AACI,GAAA,GAAA,OAAA,CAAA,kBAAM,EAAA,QAAC,MAAO;AACd,EAAA,IAAA,CAAA,UAAA,SAAQ,IAAA;AACR,EAAA,MAAA,cAAI,GAAA;AACJ,IAAA,IAAA,EAAA;AACA,MAAA,IAAA,EAAA,KAAA,CAAA,aAAW,CAAA,MAAe,EAAA;AAC7B,QAAA,SAAA,EAAA;AACD,OAAA,CAAA;AACI,MAAA,MAAA,EAAA,mBAAM;AACN,MAAA,EAAA,EAAA,gCAA4B;AAC5B,MAAA,IAAA,EAAA,kCAAI;AACJ,MAAA,SAAA;AACA,KAAA;AACH,IAAA,OAAA,EAAA;AACD,MAAA,IAAA,EAAA,KAAO,CAAA,aAAA,CAAA,eAAA,EAAA;AACH,QAAA,WAAM;AACN,OAAA,CAAA;AACA,MAAA,MAAA,EAAE,oBAAE;AACJ,MAAA,EAAA,EAAA,kCAAM;AACN,MAAA,IAAA,EAAA,oCAAyB;AAC5B,MAAA,SAAA,EAAA;AACD,KAAA;AACI,IAAA,KAAA,EAAA;AACA,MAAA,IAAA,EAAA,KAAA,CAAM,aAAE,CAAA,aAAoB,EAAA;AAC5B,QAAA,SAAI,EAAA;AACJ,OAAA,CAAA;AACA,MAAA,MAAA,EAAA,kBAAW;AACd,MAAA,EAAA,EAAA,8BAAA;MACH,IAAA,EAAA,gCAAA;AAEF,MAAA,SAAS,EAAG;AAEZ,KAAA;WAKQ,EAAA;UACA,EAAA,KAAA,CAAA,aAAA,CAAA,aAAK;iBACD,EAAA;AAGC,OAAA,CAAA;YAKA,EAAA,oBACG;4CAM4B;;AAAE,MAAA,SAAA,EAAA;AAGjC;AAMjB,GAAE;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IPost } from 'common';
+export interface IMessageThinkingProps {
+    message: IPost;
+    index: number;
+    onMessageClick?: (ref: IPost) => void;
+}
+/**
+ * Thinking / Reasoning block — like Claude's extended thinking, DeepSeek's reasoning,
+ * or Kimi's "thought process" section. Expanded by default to show thought content.
+ */
+export declare const MessageThinking: (props: IMessageThinkingProps) => React.JSX.Element;
+//# sourceMappingURL=MessageThinking.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageThinking.d.ts","sourceRoot":"","sources":["../../../src/components/MessageWidgets/MessageThinking.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAG/B,MAAM,WAAW,qBAAqB;IAClC,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CACzC;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,qBAAqB,sBAmD3D,CAAC"}

package/lib/components/MessageWidgets/MessageThinking.js

@@ -0,0 +1,41 @@
+import React,{useState}from'react';import {FiChevronDown}from'@react-icons/all-files/fi/FiChevronDown.js';/**
+ * Thinking / Reasoning block — like Claude's extended thinking, DeepSeek's reasoning,
+ * or Kimi's "thought process" section. Expanded by default to show thought content.
+ */
+const MessageThinking = props => {
+  const {
+    message,
+    index
+  } = props;
+  const {
+    attachment
+  } = message.propsConfiguration?.contents ?? {};
+  const [expanded, setExpanded] = useState(true);
+  if (!attachment) return null;
+  const label = attachment.label || (attachment.isThinking ? 'Thinking...' : 'Thought process');
+  const formatDuration = ms => {
+    if (ms < 1000) return `${ms}ms`;
+    return `${(ms / 1000).toFixed(1)}s`;
+  };
+  return React.createElement("div", {
+    key: `${index}`,
+    className: "my-2 mx-2"
+  }, React.createElement("button", {
+    className: "flex items-center gap-2 w-full text-left px-3 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors group",
+    onClick: () => setExpanded(!expanded)
+  }, React.createElement(FiChevronDown, {
+    className: `w-3.5 h-3.5 text-gray-400 transition-transform ${expanded ? '' : '-rotate-90'}`
+  }), attachment.isThinking && React.createElement("span", {
+    className: "inline-block w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"
+  }), React.createElement("span", {
+    className: "text-xs font-medium text-gray-500 dark:text-gray-400 italic"
+  }, label), attachment.durationMs != null && !attachment.isThinking && React.createElement("span", {
+    className: "text-[10px] text-gray-400 dark:text-gray-500 ml-auto"
+  }, formatDuration(attachment.durationMs))), expanded && React.createElement("div", {
+    className: "ml-4 mt-1 pl-3 border-l-2 border-amber-200 dark:border-amber-800"
+  }, React.createElement("div", {
+    className: "text-xs text-gray-500 dark:text-gray-400 whitespace-pre-wrap leading-relaxed max-h-64 overflow-y-auto"
+  }, attachment.thought, attachment.isThinking && React.createElement("span", {
+    className: "inline-block w-1.5 h-3 ml-0.5 bg-amber-400 animate-pulse rounded-sm"
+  }))));
+};export{MessageThinking};//# sourceMappingURL=MessageThinking.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageThinking.js","sources":["../../../src/components/MessageWidgets/MessageThinking.tsx"],"sourcesContent":[null],"names":[],"mappings":"0GAWA;;;AAGG;AACI,MAAM,eAAe,GAAG,KAAC,IAA8B;AAC1D,EAAA,MAAA;AACA,IAAA,OAAM;IAIN;AAEA,GAAA,GAAA,KAAK;AAAY,EAAA,MAAA;AAEjB,IAAA;AAEA,GAAA,GAAA,OAAM,CAAA,kBAA8B,EAAE,QAAA,IAAA,EAAA;QAClC,CAAA,QAAS,EAAA,WAAI,CAAA,GAAA,QAAA,CAAA,IAAA,CAAA;iBAAE,EAAO,OAAK,IAAK;AAChC,EAAA,MAAA,KAAA,GAAO,UAAS,CAAA,KAAM,KAAO,UAAO,CAAA,UAAA,GAAA,aAAA,GAAA,iBAAA,CAAA;AACxC,EAAA,MAAE,cAAA,GAAA,EAAA,IAAA;IAEF,IAAA,EAAA,GACI,IAAA,EAAA,OAAA,CAAA,EAAA,EAAA,CAAA,EAAA,CAAA;AAEI,IAAA,OAAA,CAAA,EAAA,CAAA,EAAA,GAAA,IAAA,EAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAII,EAAA,CAAA;cAGC,CAAA,mBAAqB,EAAA;AAGtB,IAAA,GAAA,EAAA,CAAA,EAAA,KAAA,CAAA,CAAA;aACC,EAAA;AAQJ,GAAA,EAAA,KAAA,CAAA,aACG,CAAA,QAAA,EAAA;aACI,EAAA,kIAAe;AACV,IAAA,OAAA,EAAA,MAAA,WAAW,CAAA,CAAA,QAAO;AAClB,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,aAAqB,EAAA;AAQ9C,IAAE,SAAA,EAAA,CAAA,+CAAA,EAAA,QAAA,GAAA,EAAA,GAAA,YAAA,CAAA;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IPost } from 'common';
+export interface IMessageToolUseProps {
+    message: IPost;
+    index: number;
+    onMessageClick?: (ref: IPost) => void;
+}
+/**
+ * Tool Use / Function Call card — like VS Code Copilot agent tool calls,
+ * ChatGPT function calling, or Claude tool use. Shows tool name, status,
+ * input args, and output.
+ */
+export declare const MessageToolUse: (props: IMessageToolUseProps) => React.JSX.Element;
+//# sourceMappingURL=MessageToolUse.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageToolUse.d.ts","sourceRoot":"","sources":["../../../src/components/MessageWidgets/MessageToolUse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAG/B,MAAM,WAAW,oBAAoB;IACjC,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CACzC;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,oBAAoB,sBA6GzD,CAAC"}

package/lib/components/MessageWidgets/MessageToolUse.js

@@ -0,0 +1,92 @@
+import React,{useState}from'react';import {FiTool}from'@react-icons/all-files/fi/FiTool.js';import {FiChevronDown}from'@react-icons/all-files/fi/FiChevronDown.js';import {FiCheck}from'@react-icons/all-files/fi/FiCheck.js';import {FiAlertCircle}from'@react-icons/all-files/fi/FiAlertCircle.js';import {FiLoader}from'@react-icons/all-files/fi/FiLoader.js';/**
+ * Tool Use / Function Call card — like VS Code Copilot agent tool calls,
+ * ChatGPT function calling, or Claude tool use. Shows tool name, status,
+ * input args, and output.
+ */
+const MessageToolUse = props => {
+  const {
+    message,
+    index
+  } = props;
+  const {
+    attachment
+  } = message.propsConfiguration?.contents ?? {};
+  const [expanded, setExpanded] = useState(false);
+  if (!attachment) return null;
+  const statusConfig = {
+    pending: {
+      icon: React.createElement(FiLoader, {
+        className: "w-3.5 h-3.5 text-gray-400"
+      }),
+      label: 'Pending',
+      color: 'text-gray-500',
+      bg: 'bg-gray-100 dark:bg-gray-800'
+    },
+    running: {
+      icon: React.createElement(FiLoader, {
+        className: "w-3.5 h-3.5 text-blue-500 animate-spin"
+      }),
+      label: 'Running...',
+      color: 'text-blue-600 dark:text-blue-400',
+      bg: 'bg-blue-50 dark:bg-blue-900/20'
+    },
+    success: {
+      icon: React.createElement(FiCheck, {
+        className: "w-3.5 h-3.5 text-green-500"
+      }),
+      label: 'Success',
+      color: 'text-green-600 dark:text-green-400',
+      bg: 'bg-green-50 dark:bg-green-900/20'
+    },
+    error: {
+      icon: React.createElement(FiAlertCircle, {
+        className: "w-3.5 h-3.5 text-red-500"
+      }),
+      label: 'Error',
+      color: 'text-red-600 dark:text-red-400',
+      bg: 'bg-red-50 dark:bg-red-900/20'
+    }
+  };
+  const cfg = statusConfig[attachment.status] || statusConfig.pending;
+  const formatDuration = ms => {
+    if (ms < 1000) return `${ms}ms`;
+    return `${(ms / 1000).toFixed(1)}s`;
+  };
+  return React.createElement("div", {
+    key: `${index}`,
+    className: `my-2 mx-2 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden ${cfg.bg}`
+  }, React.createElement("button", {
+    className: "flex items-center gap-2 w-full text-left px-3 py-2 hover:bg-black/5 dark:hover:bg-white/5 transition-colors",
+    onClick: () => setExpanded(!expanded)
+  }, React.createElement(FiTool, {
+    className: "w-4 h-4 text-gray-500 flex-shrink-0"
+  }), React.createElement("span", {
+    className: "text-xs font-mono font-semibold text-gray-700 dark:text-gray-300 truncate"
+  }, attachment.toolName), attachment.description && React.createElement("span", {
+    className: "text-xs text-gray-400 dark:text-gray-500 truncate hidden sm:inline"
+  }, "\u2014 ", attachment.description), React.createElement("div", {
+    className: "ml-auto flex items-center gap-1.5 flex-shrink-0"
+  }, attachment.durationMs != null && React.createElement("span", {
+    className: "text-[10px] text-gray-400"
+  }, formatDuration(attachment.durationMs)), React.createElement("span", {
+    className: `flex items-center gap-1 text-xs ${cfg.color}`
+  }, cfg.icon, " ", cfg.label), React.createElement(FiChevronDown, {
+    className: `w-3.5 h-3.5 text-gray-400 transition-transform ${expanded ? '' : '-rotate-90'}`
+  }))), expanded && React.createElement("div", {
+    className: "px-3 pb-3 border-t border-gray-200 dark:border-gray-700"
+  }, attachment.input && Object.keys(attachment.input).length > 0 && React.createElement("div", {
+    className: "mt-2"
+  }, React.createElement("p", {
+    className: "text-[10px] font-medium text-gray-400 uppercase tracking-wide mb-1"
+  }, "Input"), React.createElement("pre", {
+    className: "text-xs font-mono bg-white dark:bg-gray-900 rounded p-2 overflow-x-auto text-gray-700 dark:text-gray-300 max-h-40 overflow-y-auto"
+  }, JSON.stringify(attachment.input, null, 2))), attachment.output && React.createElement("div", {
+    className: "mt-2"
+  }, React.createElement("p", {
+    className: "text-[10px] font-medium text-gray-400 uppercase tracking-wide mb-1"
+  }, "Output"), React.createElement("pre", {
+    className: "text-xs font-mono bg-white dark:bg-gray-900 rounded p-2 overflow-x-auto text-gray-700 dark:text-gray-300 max-h-40 overflow-y-auto whitespace-pre-wrap"
+  }, attachment.output)), attachment.error && React.createElement("div", {
+    className: "mt-2 text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded p-2"
+  }, attachment.error)));
+};export{MessageToolUse};//# sourceMappingURL=MessageToolUse.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageToolUse.js","sources":["../../../src/components/MessageWidgets/MessageToolUse.tsx"],"sourcesContent":[null],"names":[],"mappings":"kWAeA;;;;AAIG;AACI,MAAM,cAAc,GAAG,KAAC,IAA6B;AACxD,EAAA,MAAA;AACA,IAAA,OAAM;IAIN;AAEA,GAAA,GAAA,KAAK;AAAY,EAAA,MAAA;AAEjB,IAAA;AACI,GAAA,GAAA,OAAA,CAAA,kBAAS,EAAA,QAAA,IAAA,EAAA;AACL,EAAA,MAAA,CAAA,UAAM,WAAA,CAAA,GAAA,QAAC,CAAA;AACP,EAAA,IAAA,CAAA,UAAK,EAAE,OAAA,IAAS;AAChB,EAAA,MAAA,YAAO,GAAA;AACP,IAAA,OAAA,EAAA;AACH,MAAA,IAAA,EAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AACD,QAAA,SAAS,EAAA;AACL,OAAA,CAAA;AACA,MAAA,KAAA,EAAA,SAAO;AACP,MAAA,KAAA,EAAA,eAAO;AACP,MAAA,EAAA,EAAA;AACH,KAAA;AACD,IAAA,OAAA,EAAA;AACI,MAAA,IAAA,EAAA,MAAM,aAAA,CAAA,QAAC,EAAA;AACP,QAAA,SAAK,EAAE;AACP,OAAA,CAAA;AACA,MAAA,KAAA,EAAA,YAAI;AACP,MAAA,KAAA,EAAA,kCAAA;AACD,MAAA,EAAA,EAAA;AACI,KAAA;AACA,IAAA,OAAA,EAAA;AACA,MAAA,IAAA,EAAA,KAAK,cAAE,CAAA,OAAA,EAAA;AACP,QAAA,SAAI,EAAA;AACP,OAAA,CAAA;MACH,KAAA,EAAA,SAAA;AAEF,MAAA,KAAM,EAAG,oCAAkC;AAE3C,MAAA,EAAA,EAAM;;;AAEF,MAAA,IAAA,EAAA,KAAO,CAAG,aAAY,CAAA,aAAc,EAAA;AACxC,QAAE,SAAA,EAAA;AAEF,OAAA,CAAA;AAMQ,MAAA,KAAA,EAAA,OAAA;AAII,MAAA,KAAA,EAAA,gCAAQ;AACR,MAAA,EAAA,EAAA;AAGC;;0BAEoB,CAAC,UAAA,CAAW,MAEhC,CAAA,IAAA,YAAA,CAAA,OAAA;sBACD,GAAA,EAAA,IAAA;AACK,IAAA,IAAA,EAAA,GAAA,IAAA,EAAA,OAAU,CAAC,EAAA,EAAA,CAAA,EAAA,CAAA;AAGZ,IAAA,OAAA,CAAA,EAAA,CAAA,EAAA,GAAA,IAAA,EAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AACK,EAAA,CAAA;;;AAEL,IAAA,SAAA,EAAA,CAAA,iFACe,EAAA,GAAA,CAAA,EAAA,CAAA;AAMtB,GAAA,EAAA,KAAA,CAAA,aACG,CAAA,QAAA,EAAA;aAEK,EAAA,6GACwB;mBACjB,WAAA,CAAA,CAAA,QAAA;AACA,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAOP,IAAA,SAAA,EAAA;yBAEO,CAAA,MAAA,EAAA;;AAQP,GAAA,EAAA,UAAA,CAAA,QAAW,CAAA,EAAA,UACR,CAAA,WAAA,IAAA,KAAA,CAAA,cAAe,MAAA,EAAA;AAQvC,IAAE,SAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IPost } from 'common';
+export interface IMessageTravelProps {
+    message: IPost;
+    index: number;
+    /** Fired when the card is clicked — the consumer opens the travel side panel. */
+    onMessageClick?: (ref: IPost) => void;
+}
+/**
+ * Travel listings card — summary + property rows from yantra-resortifi connector results.
+ * Clicking opens the full results on the travel page (via `onMessageClick`).
+ */
+export declare const MessageTravel: (props: IMessageTravelProps) => React.JSX.Element;
+//# sourceMappingURL=MessageTravel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageTravel.d.ts","sourceRoot":"","sources":["../../../src/components/MessageWidgets/MessageTravel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAG/B,MAAM,WAAW,mBAAmB;IAChC,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CACzC;AAuBD;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,mBAAmB,sBAuHvD,CAAC"}

package/lib/components/MessageWidgets/MessageTravel.js

@@ -0,0 +1,110 @@
+import React from'react';import {FiMapPin}from'@react-icons/all-files/fi/FiMapPin.js';import {FiStar}from'@react-icons/all-files/fi/FiStar.js';import {FiChevronRight}from'@react-icons/all-files/fi/FiChevronRight.js';const LIST_PREVIEW = 5;
+const formatPrice = p => p.priceLabel ?? (typeof p.price === 'number' ? `$${Math.round(p.price)}` : undefined);
+const formatSource = source => {
+  if (!source) return undefined;
+  if (source === 'resortifi') return 'Resortifi';
+  return source.charAt(0).toUpperCase() + source.slice(1);
+};
+const priceRange = a => {
+  const prices = (a.properties ?? []).map(p => p.price).filter(n => typeof n === 'number' && Number.isFinite(n));
+  const from = a.priceFrom ?? (prices.length ? Math.min(...prices) : undefined);
+  const to = a.priceTo ?? (prices.length ? Math.max(...prices) : undefined);
+  if (from == null) return undefined;
+  return to != null && to !== from ? `$${Math.round(from)}–$${Math.round(to)}` : `$${Math.round(from)}`;
+};
+/**
+ * Travel listings card — summary + property rows from yantra-resortifi connector results.
+ * Clicking opens the full results on the travel page (via `onMessageClick`).
+ */
+const MessageTravel = props => {
+  const {
+    message,
+    onMessageClick
+  } = props;
+  const {
+    attachment
+  } = message.propsConfiguration?.contents ?? {};
+  if (!attachment || !Array.isArray(attachment.properties) || attachment.properties.length === 0) {
+    return null;
+  }
+  const properties = attachment.properties;
+  const count = attachment.totalCount ?? properties.length;
+  const city = attachment.city || properties.find(p => p.city)?.city;
+  const title = attachment.title || (city ? `Stays in ${city}` : 'Stays');
+  const range = priceRange(attachment);
+  const actionLabel = attachment.actionLabel || 'View stays';
+  const thumbs = properties.filter(p => p.imageUrl).slice(0, 4);
+  const listItems = properties.slice(0, LIST_PREVIEW);
+  const open = () => onMessageClick?.(message);
+  return React.createElement("div", {
+    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"
+  }, thumbs.length > 0 && React.createElement("div", {
+    className: "flex gap-0.5"
+  }, thumbs.map((p, i) =>
+  // eslint-disable-next-line @next/next/no-img-element
+  React.createElement("img", {
+    key: p.id ?? i,
+    src: p.imageUrl,
+    alt: p.title,
+    className: "h-24 flex-1 object-cover",
+    loading: "lazy"
+  }))), React.createElement("button", {
+    type: "button",
+    onClick: open,
+    className: "w-full text-left hover:bg-gray-50 dark:hover:bg-gray-800/80 transition-colors"
+  }, React.createElement("div", {
+    className: "flex items-center gap-3 p-3 border-b border-gray-100 dark:border-gray-700/80"
+  }, React.createElement("div", {
+    className: "flex-shrink-0 text-blue-500"
+  }, React.createElement(FiMapPin, {
+    className: "w-5 h-5"
+  })), React.createElement("div", {
+    className: "flex-1 min-w-0"
+  }, React.createElement("p", {
+    className: "text-sm font-semibold text-gray-900 dark:text-gray-100 truncate"
+  }, title), React.createElement("p", {
+    className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400"
+  }, count, " ", count === 1 ? 'stay' : 'stays', range ? ` · ${range}/night` : '')), React.createElement("span", {
+    className: "flex-shrink-0 inline-flex items-center gap-1 text-xs font-medium text-blue-600 dark:text-blue-400"
+  }, actionLabel, " ", React.createElement(FiChevronRight, {
+    className: "w-4 h-4"
+  })))), React.createElement("ul", {
+    className: "divide-y divide-gray-100 dark:divide-gray-700/80"
+  }, listItems.map((p, i) => {
+    const price = formatPrice(p);
+    const unit = p.priceUnit ?? 'night';
+    const source = formatSource(p.source);
+    return React.createElement("li", {
+      key: p.id ?? i
+    }, React.createElement("button", {
+      type: "button",
+      onClick: open,
+      className: "w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 dark:hover:bg-gray-800/80 transition-colors"
+    }, p.imageUrl ?
+    // eslint-disable-next-line @next/next/no-img-element
+    React.createElement("img", {
+      src: p.imageUrl,
+      alt: "",
+      className: "h-12 w-12 rounded-lg object-cover flex-shrink-0",
+      loading: "lazy"
+    }) : React.createElement("div", {
+      className: "h-12 w-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex-shrink-0"
+    }), React.createElement("div", {
+      className: "flex-1 min-w-0"
+    }, React.createElement("p", {
+      className: "text-sm font-medium text-gray-900 dark:text-gray-100 line-clamp-2"
+    }, p.title), React.createElement("p", {
+      className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-x-1.5 gap-y-0.5"
+    }, price ? React.createElement("span", {
+      className: "font-medium text-gray-700 dark:text-gray-300"
+    }, price, "/", unit) : null, typeof p.rating === 'number' ? React.createElement("span", {
+      className: "inline-flex items-center gap-0.5"
+    }, React.createElement(FiStar, {
+      className: "w-3 h-3 text-amber-400"
+    }), p.rating.toFixed(1)) : null, source ? React.createElement("span", null, "via ", source) : null))));
+  })), count > LIST_PREVIEW ? React.createElement("button", {
+    type: "button",
+    onClick: open,
+    className: "w-full py-2.5 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-800/80 border-t border-gray-100 dark:border-gray-700/80"
+  }, "View all ", count, " stays") : null);
+};export{MessageTravel};//# sourceMappingURL=MessageTravel.js.map

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

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IPost } from 'common';
+export interface IMessageWorkflowProps {
+    message: IPost;
+    index: number;
+    /** Fired when the card is clicked — the consumer opens the workflow in the side panel / editor. */
+    onMessageClick?: (ref: IPost) => void;
+}
+/**
+ * Workflow card — a compact summary of a cdecli-created workflow graph
+ * (node chips in flow order + step count). Reads the graph from
+ * message.propsConfiguration; clicking fires onMessageClick(message) so the
+ * consumer opens the full workflow in the side panel / editor. The graph
+ * persists on the message, so it lives with the chat.
+ */
+export declare const MessageWorkflow: (props: IMessageWorkflowProps) => React.JSX.Element;
+//# sourceMappingURL=MessageWorkflow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageWorkflow.d.ts","sourceRoot":"","sources":["../../../src/components/MessageWidgets/MessageWorkflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAI/B,MAAM,WAAW,qBAAqB;IAClC,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,mGAAmG;IACnG,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CACzC;AAgBD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,qBAAqB,sBAyE3D,CAAC"}

package/lib/components/MessageWidgets/MessageWorkflow.js

@@ -0,0 +1,82 @@
+import React from'react';import {FiGitBranch}from'@react-icons/all-files/fi/FiGitBranch.js';import {FiArrowRight}from'@react-icons/all-files/fi/FiArrowRight.js';import {FiExternalLink}from'@react-icons/all-files/fi/FiExternalLink.js';import {FiChevronRight}from'@react-icons/all-files/fi/FiChevronRight.js';import {workflowEditorUrl}from'./workflowUtils.js';/** A node chip in the mini-graph. */
+const NodeChip = ({
+  node
+}) => React.createElement("span", {
+  className: "inline-flex items-center rounded-md border px-2 py-1 text-xs font-medium whitespace-nowrap",
+  style: {
+    borderColor: (node.color || '#3b4567') + '66',
+    color: node.color || undefined
+  },
+  title: node.type
+}, node.label);
+/**
+ * Workflow card — a compact summary of a cdecli-created workflow graph
+ * (node chips in flow order + step count). Reads the graph from
+ * message.propsConfiguration; clicking fires onMessageClick(message) so the
+ * consumer opens the full workflow in the side panel / editor. The graph
+ * persists on the message, so it lives with the chat.
+ */
+const MessageWorkflow = props => {
+  const {
+    message,
+    onMessageClick
+  } = props;
+  const {
+    attachment
+  } = message.propsConfiguration?.contents ?? message.props ?? {};
+  if (!attachment || !Array.isArray(attachment.nodes) || attachment.nodes.length === 0) {
+    return null;
+  }
+  const nodes = attachment.nodes;
+  const title = attachment.title || attachment.slug || 'Workflow';
+  const count = nodes.length;
+  const href = workflowEditorUrl(attachment);
+  const actionLabel = attachment.actionLabel || 'Open workflow';
+  // Show up to 5 nodes inline; collapse the rest into a "+N" chip.
+  const shown = nodes.slice(0, 5);
+  const extra = count - shown.length;
+  const open = () => onMessageClick?.(message);
+  return React.createElement("button", {
+    type: "button",
+    onClick: open,
+    className: "my-2 mx-2 w-[calc(100%-1rem)] text-left rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/60 hover:border-indigo-400 dark:hover:border-indigo-500 hover:shadow-sm transition-colors overflow-hidden"
+  }, React.createElement("div", {
+    className: "flex items-center gap-3 px-3 pt-3"
+  }, React.createElement("div", {
+    className: "flex-shrink-0 text-indigo-500"
+  }, React.createElement(FiGitBranch, {
+    className: "w-5 h-5"
+  })), React.createElement("div", {
+    className: "flex-1 min-w-0"
+  }, React.createElement("p", {
+    className: "text-sm font-semibold text-gray-900 dark:text-gray-100 truncate"
+  }, title), React.createElement("p", {
+    className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400"
+  }, count, " ", count === 1 ? 'step' : 'steps', attachment.version ? ` · ${attachment.version}` : '')), React.createElement("span", {
+    className: "flex-shrink-0 inline-flex items-center gap-1 text-xs font-medium text-indigo-600 dark:text-indigo-400"
+  }, actionLabel, " ", React.createElement(FiChevronRight, {
+    className: "w-4 h-4"
+  }))), React.createElement("div", {
+    className: "flex items-center gap-1.5 overflow-x-auto px-3 py-3"
+  }, shown.map((node, i) => React.createElement(React.Fragment, {
+    key: node.nodeId || i
+  }, React.createElement(NodeChip, {
+    node: node
+  }), i < shown.length - 1 && React.createElement(FiArrowRight, {
+    className: "w-3.5 h-3.5 flex-shrink-0 text-gray-400"
+  }))), extra > 0 && React.createElement(React.Fragment, null, React.createElement(FiArrowRight, {
+    className: "w-3.5 h-3.5 flex-shrink-0 text-gray-400"
+  }), React.createElement("span", {
+    className: "text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"
+  }, "+", extra))), href && React.createElement("div", {
+    className: "border-t border-gray-100 dark:border-gray-700/60 px-3 py-2"
+  }, React.createElement("a", {
+    href: href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    onClick: e => e.stopPropagation(),
+    className: "inline-flex items-center gap-1 text-xs font-medium text-indigo-600 dark:text-indigo-400 hover:underline"
+  }, "Open in editor ", React.createElement(FiExternalLink, {
+    className: "w-3 h-3"
+  }))));
+};export{MessageWorkflow};//# sourceMappingURL=MessageWorkflow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageWorkflow.js","sources":["../../../src/components/MessageWidgets/MessageWorkflow.tsx"],"sourcesContent":[null],"names":["editorUrl"],"mappings":"sWAgBA;AACA,MAAM,QAAQ,GAAG,CAAC;;AAKN,CAAA,KAAA,KAAA,CAAA,aAAiB,OAAI,EAAA;WAEzB,EAAK,4FAIX;AAEF,EAAA,KAAA,EAAA;;;;;;AAMG;AACH;AACI;AACA;;AAKI;;AAGE,MAAA,eAAkB,QAAO,IAAA;QAC/B;AACA,IAAA,OAAM;AACN,IAAA;AACA,GAAA,GAAA;QACA;IACA;AACA,GAAA,GAAA,0BAA4B,UAAO,IAAA,OAAA,CAAA,KAAA,IAAA,EAAA;MAEnC,CAAA,UAAa,IAAG,CAAE,wBAAkB,CAAO,KAAE,CAAA,IAAA,UAAA,CAAA,KAAA,CAAA,MAAA,KAAA,CAAA,EAAA;AAE7C,IAAA,OAAO,IACH;;aAMQ,GAAA,UAAA,CAAA,KAAA;AACI,EAAA,MAAA,KAAA,GAAA,UAAA,CAAA,KAAA,IAAC,WAAW,IAAC,IAAA,UAAU;aAE3B,GAAA,KAAA,CAAA,MAAA;AACI,EAAA,MAAA,IAAA,GAAAA,iBAAA,CAAA,UAAA,CAAA;mBACA,GAAA,UAAA,CAAA,WAAG,IAAA,eAAU;;;qBACA,GAAA,KAAK,CAAK,MAAI;AACtB,EAAA,MAAA,IAAA,GAAA,MAAA,cAAW,GAAO,OAAG,CAAA;cAG9B,CAAA,aAAA,CAAA,QAAA,EAAA;kBACK;;AAAa,IAAA,SAAA,EAAA;UAItB,CAAA,aAAA,CAAA,KAAA,EAAA;aACK,EAAA;AAEO,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACC,IAAA,SAAA,EAAA;wBAGC,CAAI,WACV,EAAA;AACI,IAAA,SAAA,EAAA;0BACA,CAAA,KAAA,EAAA;;wBAA+E,CAAK,GAE3F,EACC;AAEL,IAAA,SAAI,EAAA;aAEG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;;iBAOmB,KAAA,KAAA,CAAA,GAAA,MAAC,GAAA,OAAA,EAAA,UAAe,CAAA,OAAU,GAAA,CAAA,GAAS,EAAA,UAKpE,CAAA,OAAA,CAAA,CAAA,GAAA,EAAA,CAAA,CAAA,EAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AACN,IAAE,SAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}