@admin-layout/ai-chat-ext-browser 12.2.4-alpha.94 → 12.2.5-alpha.15

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { IPost } from 'common';
+import { TravelAttachmentsInterface } from '../../interfaces';
+import { FlightCardView, FlightSliceView, FlightSort } from '@admin-layout/client';
+export interface IMessageFlightsProps {
+    message: IPost;
+    attachment: TravelAttachmentsInterface;
+    /** Opens the full result set in the travel side panel. */
+    onMessageClick?: (ref: IPost) => void;
+}
+/** Soft monogram tile colours, indexed by `airlineTone`; shared by every result card. */
+export declare const TONES: string[];
+/**
+ * The route between the two times: duration above, a line with one amber dot
+ * per stop and the plane at the arrival end, stops below.
+ */
+export declare const RouteLine: ({ slice }: {
+    slice: FlightSliceView;
+}) => React.JSX.Element;
+export interface IFlightCardProps {
+    card: FlightCardView;
+    onOpen?: () => void;
+    fullWidth?: boolean;
+    /** Show the departure date on the card (offers on different dates, or a round trip). */
+    showDate?: boolean;
+    /** Briefly outlined, e.g. after a quick-pick chip jumped to it. */
+    highlighted?: boolean;
+}
+export declare const FlightCard: ({ card, onOpen, fullWidth, showDate, highlighted, }: IFlightCardProps) => React.JSX.Element;
+export interface IFlightCardListProps {
+    attachment: TravelAttachmentsInterface;
+    /** Fired by a card with no seller link; omit it to render such cards as plain content. */
+    onOpen?: () => void;
+    /** Ordering; `recommended` (default) keeps the agent's order. */
+    sort?: FlightSort;
+}
+/** Every flight as a full-width vertical list, for a side panel or a results page. */
+export declare const FlightCardList: ({ attachment, onOpen, sort }: IFlightCardListProps) => React.JSX.Element;
+/**
+ * Flight results as a swipeable row of cards: one card per offer, the next
+ * one peeking in so the row reads as scrollable. Above it, the route and date
+ * once, and quick picks (cheapest, fastest, best value) that jump to their
+ * card. Touch swipes and snaps; a pointer gets arrow buttons, since sideways
+ * scrolling is awkward with a mouse.
+ */
+export declare const MessageFlights: ({ message, attachment, onMessageClick }: IMessageFlightsProps) => React.JSX.Element;
+//# sourceMappingURL=MessageFlights.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageFlights.d.ts","sourceRoot":"","sources":["../../../src/components/MessageWidgets/MessageFlights.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAEH,cAAc,EACd,eAAe,EACf,UAAU,EAIb,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,oBAAoB;IACjC,OAAO,EAAE,KAAK,CAAC;IACf,UAAU,EAAE,0BAA0B,CAAC;IACvC,0DAA0D;IAC1D,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CACzC;AAED,yFAAyF;AACzF,eAAO,MAAM,KAAK,UASjB,CAAC;AA4BF;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,WAAW;IAAE,KAAK,EAAE,eAAe,CAAA;CAAE,sBAiC9D,CAAC;AAwCF,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,UAAU,GAAI,qDAMxB,gBAAgB,sBAmHlB,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACjC,UAAU,EAAE,0BAA0B,CAAC;IACvC,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,iEAAiE;IACjE,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,sFAAsF;AACtF,eAAO,MAAM,cAAc,GAAI,8BAA8C,oBAAoB,sBAchG,CAAC;AAIF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,yCAAyC,oBAAoB,sBA8J3F,CAAC"}

package/lib/components/MessageWidgets/MessageFlights.js

@@ -0,0 +1,328 @@
+import React,{useMemo,useRef,useState,useCallback,useEffect}from'react';import {FaPlane}from'@react-icons/all-files/fa/FaPlane.js';import {FiChevronLeft}from'@react-icons/all-files/fi/FiChevronLeft.js';import {FiChevronRight}from'@react-icons/all-files/fi/FiChevronRight.js';import {FiExternalLink}from'@react-icons/all-files/fi/FiExternalLink.js';import {toFlightCards,flightResultSummary,sortFlightCards}from'@admin-layout/client';/** Soft monogram tile colours, indexed by `airlineTone`; shared by every result card. */
+const TONES = ['bg-sky-100 text-sky-700 dark:bg-sky-500/20 dark:text-sky-300', 'bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-300', 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300', 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300', 'bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-300', 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300', 'bg-teal-100 text-teal-700 dark:bg-teal-500/20 dark:text-teal-300', 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300'];
+const BADGE = {
+  cheapest: {
+    label: 'Cheapest',
+    pill: 'bg-emerald-50 text-emerald-700 ring-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-300 dark:ring-emerald-500/30',
+    text: 'text-emerald-600 dark:text-emerald-400'
+  },
+  fastest: {
+    label: 'Fastest',
+    pill: 'bg-violet-50 text-violet-700 ring-violet-200 dark:bg-violet-500/15 dark:text-violet-300 dark:ring-violet-500/30',
+    text: 'text-violet-600 dark:text-violet-400'
+  },
+  best: {
+    label: 'Best value',
+    pill: 'bg-blue-50 text-blue-700 ring-blue-200 dark:bg-blue-500/15 dark:text-blue-300 dark:ring-blue-500/30',
+    text: 'text-blue-600 dark:text-blue-400'
+  }
+};
+const BadgePill = ({
+  badge
+}) => React.createElement("span", {
+  className: `inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-[11px] font-semibold leading-4 ring-1 ring-inset ${BADGE[badge].pill}`
+}, BADGE[badge].label);
+/**
+ * The route between the two times: duration above, a line with one amber dot
+ * per stop and the plane at the arrival end, stops below.
+ */
+const RouteLine = ({
+  slice
+}) => {
+  const stops = slice.stopCount ?? 0;
+  return React.createElement("div", {
+    className: "flex min-w-0 flex-col items-center self-center px-1",
+    "aria-hidden": "true"
+  }, React.createElement("p", {
+    className: "text-[11px] font-medium leading-4 text-gray-500 dark:text-gray-400"
+  }, slice.duration ?? ' '), React.createElement("div", {
+    className: "my-1 flex w-full items-center"
+  }, React.createElement("span", {
+    className: "h-1.5 w-1.5 shrink-0 rounded-full border border-gray-400 bg-white dark:border-gray-500 dark:bg-gray-800"
+  }), React.createElement("span", {
+    className: "relative h-px flex-1 bg-gray-300 dark:bg-gray-600"
+  }, Array.from({
+    length: stops
+  }, (_, i) => React.createElement("span", {
+    key: i,
+    className: "absolute top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400 ring-2 ring-white dark:ring-gray-800",
+    style: {
+      left: `${(i + 1) / (stops + 1) * 100}%`
+    }
+  }))), React.createElement(FaPlane, {
+    className: "ml-0.5 h-3 w-3 shrink-0 text-blue-500 dark:text-blue-400"
+  })), React.createElement("p", {
+    className: `text-[11px] font-medium leading-4 ${stops === 0 && slice.stops ? 'text-emerald-600 dark:text-emerald-400' : stops > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-gray-400'}`
+  }, slice.stops ?? ' '));
+};
+const SliceRow = ({
+  slice,
+  caption
+}) => React.createElement("div", null, caption ? React.createElement("p", {
+  className: "mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500"
+}, caption) : null, React.createElement("div", {
+  className: "grid grid-cols-[auto_1fr_auto] items-center gap-2"
+}, React.createElement("div", null, React.createElement("p", {
+  className: "text-[22px] font-bold leading-none tracking-tight tabular-nums text-gray-900 dark:text-gray-50"
+}, slice.departTime ?? '--:--'), React.createElement("p", {
+  className: "mt-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
+}, slice.origin)), React.createElement(RouteLine, {
+  slice: slice
+}), React.createElement("div", {
+  className: "text-right"
+}, React.createElement("p", {
+  className: "text-[22px] font-bold leading-none tracking-tight tabular-nums text-gray-900 dark:text-gray-50"
+}, slice.arriveTime ?? '--:--', slice.dayOffset ? React.createElement("sup", {
+  className: "ml-0.5 text-[11px] font-semibold text-amber-600 dark:text-amber-400"
+}, slice.dayOffset) : null), React.createElement("p", {
+  className: "mt-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
+}, slice.destination))));
+const CARD_CLASS = 'group/card relative flex flex-col rounded-2xl border bg-white p-4 text-left shadow-sm transition-all duration-200 ' + 'hover:-translate-y-0.5 hover:border-blue-300 hover:shadow-lg hover:shadow-blue-500/10 ' + 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ' + 'dark:bg-gray-800 dark:hover:border-blue-500/60 dark:hover:shadow-black/30 dark:focus-visible:ring-offset-gray-900';
+const IN_ROW = 'w-[min(20rem,85%)] shrink-0 snap-start';
+const FlightCard = ({
+  card,
+  onOpen,
+  fullWidth = false,
+  showDate = false,
+  highlighted = false
+}) => {
+  const className = `${CARD_CLASS} ${fullWidth ? 'w-full' : IN_ROW} ${highlighted ? 'border-blue-400 ring-2 ring-blue-500/40 dark:border-blue-400' : 'border-gray-200 dark:border-gray-700'}`;
+  const subtitle = [card.flightNumber, card.cabin].filter(Boolean).join(' · ') || (card.roundTrip ? 'Round trip' : 'One way');
+  const captionFor = (s, i) => {
+    if (card.roundTrip) return [i === 0 ? 'Outbound' : 'Return', s.date].filter(Boolean).join(' · ');
+    return showDate ? s.date : undefined;
+  };
+  const body = React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "flex items-center gap-2.5"
+  }, React.createElement("span", {
+    "aria-hidden": "true",
+    className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-[11px] font-bold tracking-wide ${TONES[card.airlineTone % TONES.length]}`
+  }, card.airlineCode), React.createElement("div", {
+    className: "min-w-0 flex-1"
+  }, React.createElement("p", {
+    className: "truncate text-sm font-semibold leading-5 text-gray-900 dark:text-gray-50"
+  }, card.airline ?? card.footer), React.createElement("p", {
+    className: "truncate text-xs leading-4 text-gray-500 dark:text-gray-400"
+  }, subtitle)), card.badges[0] ? React.createElement(BadgePill, {
+    badge: card.badges[0]
+  }) : null), React.createElement("div", {
+    className: "my-4 space-y-4"
+  }, card.slices.map((s, i) => React.createElement(SliceRow, {
+    key: i,
+    slice: s,
+    caption: captionFor(s, i)
+  }))), card.fareLine ? React.createElement("p", {
+    className: "-mt-1 mb-3 line-clamp-2 text-[11px] leading-4 text-gray-500 dark:text-gray-400",
+    "data-fare-line": ""
+  }, card.fareLine.split(' · ').map((part, i, parts) => React.createElement("span", {
+    key: i
+  }, React.createElement("span", {
+    className: "whitespace-nowrap"
+  }, part, i < parts.length - 1 ? ' ·' : ''), i < parts.length - 1 ? ' ' : ''))) : null, React.createElement("div", {
+    className: "mt-auto flex items-center justify-between gap-3 border-t border-gray-100 pt-3 dark:border-gray-700"
+  }, React.createElement("p", {
+    className: "min-w-0 truncate text-xs text-gray-500 dark:text-gray-400"
+  }, card.seller ? `via ${card.seller}` : card.roundTrip ? 'Round trip' : card.slices[0].stops ?? ''), React.createElement("span", {
+    className: "flex shrink-0 items-center gap-1.5"
+  }, card.price ? React.createElement("span", {
+    className: "text-lg font-bold leading-none tabular-nums text-gray-900 dark:text-white"
+  }, card.price) : null, card.url ? React.createElement(FiExternalLink, {
+    className: "h-3.5 w-3.5 text-gray-400 transition-colors group-hover/card:text-blue-500"
+  }) : null)));
+  // A bookable offer goes straight to the seller; without a link the card
+  // opens the full results in the side panel instead.
+  if (card.url) {
+    return React.createElement("a", {
+      href: card.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": card.accessibleLabel,
+      className: className,
+      "data-flight-card": "",
+      "data-flight-key": card.key
+    }, body);
+  }
+  if (!onOpen) {
+    // Nothing to open: plain content, not a button that does nothing.
+    return React.createElement("div", {
+      role: "group",
+      "aria-label": card.accessibleLabel,
+      className: className,
+      "data-flight-card": "",
+      "data-flight-key": card.key
+    }, body);
+  }
+  return React.createElement("button", {
+    type: "button",
+    onClick: onOpen,
+    "aria-label": card.accessibleLabel,
+    className: className,
+    "data-flight-card": "",
+    "data-flight-key": card.key
+  }, body);
+};
+/** Every flight as a full-width vertical list, for a side panel or a results page. */
+const FlightCardList = ({
+  attachment,
+  onOpen,
+  sort = 'recommended'
+}) => {
+  const cards = useMemo(() => toFlightCards(attachment), [attachment]);
+  const summary = useMemo(() => flightResultSummary(attachment, cards), [attachment, cards]);
+  const ordered = useMemo(() => sortFlightCards(cards, sort), [cards, sort]);
+  if (cards.length === 0) return null;
+  return React.createElement("ul", {
+    className: "space-y-3",
+    "aria-label": attachment.title || 'Flight options'
+  }, ordered.map(c => React.createElement("li", {
+    key: c.key
+  }, React.createElement(FlightCard, {
+    card: c,
+    onOpen: onOpen,
+    fullWidth: true,
+    showDate: !summary.sameDate
+  }))));
+};
+const HIGHLIGHT_MS = 1600;
+/**
+ * Flight results as a swipeable row of cards: one card per offer, the next
+ * one peeking in so the row reads as scrollable. Above it, the route and date
+ * once, and quick picks (cheapest, fastest, best value) that jump to their
+ * card. Touch swipes and snaps; a pointer gets arrow buttons, since sideways
+ * scrolling is awkward with a mouse.
+ */
+const MessageFlights = ({
+  message,
+  attachment,
+  onMessageClick
+}) => {
+  const cards = useMemo(() => toFlightCards(attachment), [attachment]);
+  const summary = useMemo(() => flightResultSummary(attachment, cards), [attachment, cards]);
+  const rowRef = useRef(null);
+  const [edges, setEdges] = useState({
+    atStart: true,
+    atEnd: true
+  });
+  const [highlighted, setHighlighted] = useState(null);
+  const measure = useCallback(() => {
+    const el = rowRef.current;
+    if (!el) return;
+    setEdges({
+      atStart: el.scrollLeft <= 1,
+      atEnd: el.scrollLeft + el.clientWidth >= el.scrollWidth - 1
+    });
+  }, []);
+  useEffect(() => {
+    measure();
+    const el = rowRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return undefined;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [measure, cards.length]);
+  useEffect(() => {
+    if (!highlighted) return undefined;
+    const t = setTimeout(() => setHighlighted(null), HIGHLIGHT_MS);
+    return () => clearTimeout(t);
+  }, [highlighted]);
+  if (cards.length === 0) return null;
+  const step = dir => {
+    const el = rowRef.current;
+    const card = el?.querySelector('[data-flight-card]');
+    if (!el || !card) return;
+    el.scrollBy({
+      left: dir * (card.offsetWidth + 12),
+      behavior: 'smooth'
+    });
+  };
+  const jumpTo = key => {
+    const el = rowRef.current;
+    const card = el?.querySelector(`[data-flight-key="${CSS.escape(key)}"]`);
+    if (!el || !card) return;
+    // 8px: the row's px-2, so the card lands where the first one sits.
+    el.scrollTo({
+      left: card.offsetLeft - 8,
+      behavior: 'smooth'
+    });
+    setHighlighted(key);
+  };
+  const open = () => onMessageClick?.(message);
+  const count = summary.count;
+  const title = summary.route ?? attachment.title ?? 'Flights';
+  const subtitle = [summary.date, `${count} ${count === 1 ? 'flight' : 'flights'}`, summary.fromPrice ? `from ${summary.fromPrice}` : undefined, summary.seller].filter(Boolean).join(' · ');
+  const picks = cards.length > 2 ? summary.picks : [];
+  // Arrows sit over the first and last visible card, so they show on hover or
+  // keyboard focus only; the next card peeking in already says the row scrolls.
+  const arrow = 'absolute top-1/2 z-10 hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full border border-gray-200 bg-white/95 text-gray-700 shadow-md transition hover:bg-white ' + 'opacity-0 group-hover/row:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none disabled:!opacity-0 [@media(pointer:fine)]:flex ' + 'dark:border-gray-600 dark:bg-gray-800/95 dark:text-gray-200';
+  return React.createElement("div", {
+    className: "my-2 w-full",
+    role: "group",
+    "aria-label": attachment.title || 'Flight options'
+  }, React.createElement("div", {
+    className: "mx-2 mb-2 flex items-center justify-between gap-3"
+  }, React.createElement("div", {
+    className: "flex min-w-0 items-center gap-2.5"
+  }, React.createElement("span", {
+    "aria-hidden": "true",
+    className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-600 dark:bg-blue-500/15 dark:text-blue-300"
+  }, React.createElement(FaPlane, {
+    className: "h-4 w-4"
+  })), React.createElement("div", {
+    className: "min-w-0"
+  }, React.createElement("p", {
+    className: "truncate text-sm font-semibold leading-5 text-gray-900 dark:text-gray-50"
+  }, title), React.createElement("p", {
+    className: "truncate text-xs leading-4 text-gray-500 dark:text-gray-400"
+  }, subtitle))), onMessageClick && count > 1 ? React.createElement("button", {
+    type: "button",
+    onClick: open,
+    className: "inline-flex shrink-0 items-center gap-0.5 rounded-full px-2.5 py-1 text-xs font-semibold text-blue-600 transition hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-500/10"
+  }, "View all ", count, React.createElement(FiChevronRight, {
+    className: "h-3.5 w-3.5"
+  })) : null), picks.length > 0 ? React.createElement("div", {
+    className: "mx-2 mb-2 flex flex-wrap gap-1.5",
+    "aria-label": "Quick picks"
+  }, picks.map(p => React.createElement("button", {
+    key: p.badge,
+    type: "button",
+    onClick: () => jumpTo(p.key),
+    className: "inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-white px-2.5 py-1 text-xs transition hover:border-blue-300 hover:bg-blue-50/60 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-500/60 dark:hover:bg-blue-500/10"
+  }, React.createElement("span", {
+    className: `font-semibold ${BADGE[p.badge].text}`
+  }, p.label), React.createElement("span", {
+    className: "font-semibold tabular-nums text-gray-900 dark:text-gray-50"
+  }, p.badge === 'fastest' ? p.duration ?? p.price : p.price), p.airline ? React.createElement("span", {
+    className: "truncate text-gray-500 dark:text-gray-400"
+  }, "\u00B7 ", p.airline) : null))) : null, React.createElement("div", {
+    className: "group/row relative"
+  }, React.createElement("div", {
+    ref: rowRef,
+    onScroll: measure,
+    // scroll-px-2 matches px-2: without it a snapped card sits flush
+    // against the edge while the first sits 8px in, and snapping
+    // nudges the row off 0 on load so "previous" looks enabled.
+    className: "flex snap-x snap-mandatory scroll-px-2 gap-3 overflow-x-auto scroll-smooth px-2 pb-2 pt-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+  }, cards.map(c => React.createElement(FlightCard, {
+    key: c.key,
+    card: c,
+    onOpen: open,
+    showDate: !summary.sameDate,
+    highlighted: highlighted === c.key
+  }))), React.createElement("button", {
+    type: "button",
+    "aria-label": "Previous flights",
+    onClick: () => step(-1),
+    disabled: edges.atStart,
+    className: `${arrow} left-0`
+  }, React.createElement(FiChevronLeft, {
+    className: "h-5 w-5"
+  })), React.createElement("button", {
+    type: "button",
+    "aria-label": "More flights",
+    onClick: () => step(1),
+    disabled: edges.atEnd,
+    className: `${arrow} right-0`
+  }, React.createElement(FiChevronRight, {
+    className: "h-5 w-5"
+  }))));
+};export{FlightCard,FlightCardList,MessageFlights,RouteLine,TONES};//# sourceMappingURL=MessageFlights.js.map

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

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

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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"}