@ensembleapp/client-sdk 0.0.14 → 0.0.16

package/dist/index.d.ts

@@ -5,42 +5,43 @@ import React$1, { ReactNode } from 'react';
 import z, { AnyZodObject } from 'zod';
 import { ClassValue } from 'clsx';
 
-/**
- * Version selector for tools. This should mirror VersionSelector on server-side
- * - 'latest': prefer draft (v0), fallback to last published
- * - 'published': prefer last published, fallback to draft
- * - number: specific version (1+)
- */
+/** @minimum 1 */
 type VersionSelector = 'latest' | 'published' | number;
 /**
- * Configuration for enriching widget data server-side by calling a tool.
- * Uses JEXL expressions to build tool inputs from the widget payload.
+ * fetch data via tool call.
  */
-type WidgetEnrichConfig = {
-    /** Tool ID to call for enrichment */
+type ToolCallConfig = {
     toolId: string;
     /**
-     * Tool version selector. Defaults to 'latest'.
-     * - 'latest': prefer draft, fallback to published
-     * - 'published': prefer published, fallback to draft
-     * - number: specific version (1+)
+     * Select the tool version (default to 'latest' if not provided).
+     * - 'latest': pick draft if exists, fallback to latest published version
+     * - 'published': pick latest published version, fallback to draft version
+     * - number: specific tool version (1+)
      */
     version?: VersionSelector;
     /**
-     * Maps tool input names to JEXL expressions.
-     * Expressions are evaluated with $ as the payload root (auto-normalized).
-     * Use ${...} syntax for JEXL expressions, or literal values.
-     *
-     * Examples:
-     * - "${vendors|map('id')|join(',')}" → "v1,v2,v3"
-     * - "${limit}" → 10
-     * - "static value" → "static value"
-     *
-     * If omitted, the entire payload is passed as tool input.
+     * Tool input can be literal or templated string with expressions
      */
     inputs?: Record<string, unknown>;
 };
-/** Enrichment result containing the full tool response. TThis should mirror ToolResult on server-side. */
+/**
+ * Widget enrichment configuration.
+ * Keys are used to access the enrichment results in the render function.
+ *
+ * Example:
+ * ```typescript
+ * enrich: {
+ *   vendorDetails: { toolId: 'vendor-tool', inputs: { ids: "${vendors}" } },
+ *   pricing: { toolId: 'pricing-tool', inputs: { ids: "${vendors}" } },
+ * },
+ * render: (payload, enriched) => {
+ *   const vendors = enriched?.vendorDetails?.data;
+ *   const pricing = enriched?.pricing?.data;
+ * }
+ * ```
+ */
+type WidgetEnrichConfig = Record<string, ToolCallConfig>;
+/** Enrichment result containing the full tool response. This should mirror ToolResult on server-side. */
 type EnrichmentResult$1 = {
     success: boolean;
     error?: {
@@ -55,8 +56,8 @@ type UIWidget = {
     widgetType: string;
     /** LLM-generated data based on the widget schema specified by the client */
     payload: unknown;
-    /** Server-injected enrichment result from tool call. This mirror ToolResult on server-side. */
-    enrichedResult?: EnrichmentResult$1;
+    /** Server-injected enrichment results from tool calls, keyed by enrichment name */
+    enriched?: Record<string, EnrichmentResult$1>;
 };
 
 type DeprecatedChatConfig = {
@@ -175,8 +176,7 @@ declare function useFeedback({ api, threadId, agentId, agentExecutionId, }: UseF
     error: Error | null;
 };
 
-/** Enrichment result containing the full tool response - this should mirror ToolResult
- * OR maybe we should declare ToolResult here? */
+/** Enrichment result containing the full tool response - this should mirror ToolResult */
 interface EnrichmentResult<TData = unknown> {
     success: boolean;
     error?: {
@@ -186,27 +186,32 @@ interface EnrichmentResult<TData = unknown> {
     data?: TData;
     metadata?: Record<string, unknown>;
 }
-/**
- * Props passed to widget render functions.
- * Contains both the validated payload and optional enriched result.
- */
-interface WidgetRenderProps<TPayload, TEnrichedData = unknown> {
-    /** The validated widget payload matching the schema */
-    payload: TPayload;
-    /** Server-injected enrichment result (only present if widget has enrich config) */
-    enrichedResult?: EnrichmentResult<TEnrichedData>;
-}
-interface UIWidgetDefinition<TSchema extends AnyZodObject = AnyZodObject, TEnrichedData = unknown> {
+/** Enriched results keyed by enrichment name */
+type EnrichedResults<T = unknown> = Record<string, EnrichmentResult<T>>;
+interface UIWidgetDefinition<TSchema extends AnyZodObject = AnyZodObject, TEnriched extends EnrichedResults = EnrichedResults> {
     widgetType: string;
     schema: TSchema;
     /**
-     * Optional enrichment config - if provided, server will call a tool to enrich the data.
-     * The enriched data is passed to the render function as `enrichedResult.data`.
+     * Optional enrichment config - if provided, server will call the tools to enrich the data.
+     * Keys are used to access results in the render function.
+     *
+     * Example:
+     * ```typescript
+     * enrich: {
+     *   vendorDetails: { toolId: 'vendor-tool', inputs: { ids: "${vendors}" } },
+     *   pricing: { toolId: 'pricing-tool', inputs: { ids: "${vendors}" } },
+     * }
+     * ```
      */
     enrich?: WidgetEnrichConfig;
-    render(props: WidgetRenderProps<z.infer<TSchema>, TEnrichedData>): ReactNode;
+    /**
+     * Render function that receives the payload and enriched results.
+     * @param payload - The LLM-generated data matching the schema
+     * @param enriched - Enrichment results keyed by name (empty object if no enrich config)
+     */
+    render(payload: z.infer<TSchema>, enriched: TEnriched): ReactNode;
 }
-declare const createWidget: <TSchema extends AnyZodObject, TEnrichedData = unknown>({ widgetType, schema, enrich, render, }: UIWidgetDefinition<TSchema, TEnrichedData>) => UIWidgetDefinition<TSchema, TEnrichedData>;
+declare const createWidget: <TSchema extends AnyZodObject, TEnriched extends EnrichedResults = EnrichedResults>({ widgetType, schema, enrich, render, }: UIWidgetDefinition<TSchema, TEnriched>) => UIWidgetDefinition<TSchema, TEnriched>;
 
 interface ChatWidgetStyles {
     primaryColor?: string;
@@ -353,4 +358,4 @@ declare const defaultChatWidgets: UIWidgetDefinition[];
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type ApiConfig, type ChatContentItem, type ChatMessage, ChatWidget, type ChatWidgetFeedbackOptions, type ChatWidgetInstance, type ChatWidgetConfig as ChatWidgetProps, type ChatWidgetSpeechToTextOptions, type ChatWidgetStyles, type ChatWidgetVoiceOptions, type EmbeddableChatWidgetConfig, type EnrichmentResult, type FeedbackRating, type FeedbackState, type MessageFeedback, type MessageSection, type PopupAnchorConfig, PopupChatWidget, type PopupChatWidgetProps, type SubmitFeedbackParams, type TagGroup, TagGroupDisplay, type TagGroupDisplayProps, type ToolCallContent, ToolCallDisplay, type ToolCallDisplayProps, type UIWidgetDefinition, type UseChatConfig, type UseFeedbackConfig, type WidgetEnrichConfig, type WidgetRenderProps, cn, createChatWidget, createWidget, defaultChatWidgets, registerChatWidgets, useChat, useFeedback };
+export { type ApiConfig, type ChatContentItem, type ChatMessage, ChatWidget, type ChatWidgetFeedbackOptions, type ChatWidgetInstance, type ChatWidgetConfig as ChatWidgetProps, type ChatWidgetSpeechToTextOptions, type ChatWidgetStyles, type ChatWidgetVoiceOptions, type EmbeddableChatWidgetConfig, type EnrichedResults, type EnrichmentResult, type FeedbackRating, type FeedbackState, type MessageFeedback, type MessageSection, type PopupAnchorConfig, PopupChatWidget, type PopupChatWidgetProps, type SubmitFeedbackParams, type TagGroup, TagGroupDisplay, type TagGroupDisplayProps, type ToolCallContent, ToolCallDisplay, type ToolCallDisplayProps, type UIWidgetDefinition, type UseChatConfig, type UseFeedbackConfig, type WidgetEnrichConfig, cn, createChatWidget, createWidget, defaultChatWidgets, registerChatWidgets, useChat, useFeedback };

package/dist/index.js

@@ -23670,12 +23670,12 @@ async function registerChatWidgets({
   widgets
 }) {
   const widgetSchemas = widgets.map(({ widgetType, schema, enrich }) => {
-    schema = schema.extend({
+    const extendedSchema = schema.extend({
       widgetType: zod_default.literal(widgetType)
     });
     return {
       widgetType,
-      schema: toJsonSchema(schema),
+      schema: toJsonSchema(extendedSchema),
       enrich
     };
   });
@@ -24273,7 +24273,7 @@ function MessageItemComponent({
         ] }, key);
       }
       const widget = item;
-      return /* @__PURE__ */ jsx5("div", { className: "chat-widget__widget", children: widgetDef.render({ payload: widget.payload, enrichedResult: widget.enrichedResult }) }, key);
+      return /* @__PURE__ */ jsx5("div", { className: "chat-widget__widget", children: widgetDef.render(widget.payload, widget.enriched ?? {}) }, key);
     }
     return null;
   };
@@ -24875,11 +24875,143 @@ var createWidget = ({
   widgetType,
   schema,
   enrich,
-  render: (props) => render(props)
+  render
 });
 
-// lib/widgets/default-widgets.tsx
+// lib/widgets/VendorCards.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var vendorCardsSchema = zod_default.object({
+  fromLocation: zod_default.string().describe("The location the user is searching for"),
+  fromCoordinates: zod_default.object({
+    latitude: zod_default.number(),
+    longitude: zod_default.number()
+  }).describe("The location's lat/lng coordinates. This must come from the previous geocoding tool as-is - do NOT guess"),
+  vendors: zod_default.array(zod_default.object({
+    vendor_id: zod_default.string(),
+    notes: zod_default.string().optional().describe("Why this vendor was recommended"),
+    vendorCoordinates: zod_default.object({
+      latitude: zod_default.number(),
+      longitude: zod_default.number()
+    }).describe("The lat/lng coordinates of this vendor. This must come from the vendor's location.coordinates from the previous vendor search tool - do NOT guess")
+  }))
+}).describe("displaying a list of vendor cards. Use this widget to represent data from CareNetwork vendor search tool.");
+function VendorCards({ payload, enriched }) {
+  if (!enriched || !enriched.vendorDetails || !enriched.distanceMatrix) {
+    return /* @__PURE__ */ jsx8("div", { children: "Outdated vendor-cards widget" });
+  }
+  const { vendorDetails, distanceMatrix } = enriched;
+  const vendorData = vendorDetails?.data ?? {};
+  const distances = distanceMatrix?.data ?? [];
+  const formatDistance = (meters) => {
+    const miles = meters / 1609.34;
+    return miles < 0.1 ? "< 0.1 mi" : `${miles.toFixed(1)} mi`;
+  };
+  return /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: payload.vendors.map((v, index) => {
+    const data = vendorData[v.vendor_id];
+    const name17 = data?.names?.find((n) => n.type === "org")?.value ?? "";
+    const address = data?.location?.address;
+    const distanceEntry = distances.find((d) => d.destinationIndex === index);
+    const distance = distanceEntry && distanceEntry.distanceMeters ? formatDistance(distanceEntry.distanceMeters) : void 0;
+    const hourlyRate = data?.financials?.fees?.find((f) => f.fee_type?.includes("Hourly"))?.amount;
+    const avgRating = data?.avg_rating;
+    const reviewCount = data?.review_count;
+    const booleans = data?.booleans;
+    const verification = data?.verification;
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.2rem",
+          padding: "1rem",
+          background: "#ffffff",
+          border: "1px solid #e5e7eb",
+          borderRadius: "0.5rem",
+          boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
+          fontSize: "0.875rem"
+        },
+        children: [
+          /* @__PURE__ */ jsx8("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+            /* @__PURE__ */ jsx8("div", { style: {
+              width: "2rem",
+              height: "2rem",
+              borderRadius: "9999px",
+              background: "#bfd1f5",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontWeight: 600,
+              fontSize: "0.875rem",
+              color: "#374151"
+            }, children: name17.charAt(0).toUpperCase() }),
+            /* @__PURE__ */ jsx8("span", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827" }, children: name17 })
+          ] }) }),
+          /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", color: "#6b7280" }, children: [
+            /* @__PURE__ */ jsx8("span", { style: { color: "#facc15" }, children: "\u2605" }),
+            /* @__PURE__ */ jsx8("span", { children: avgRating?.toFixed(1) ?? "\u2014" }),
+            /* @__PURE__ */ jsxs7("span", { style: { color: "#9ca3af" }, children: [
+              "(",
+              reviewCount ?? 0,
+              " reviews)"
+            ] })
+          ] }),
+          address && /* @__PURE__ */ jsx8("div", { style: { color: "#6b7280" }, children: address }),
+          distance && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280" }, children: [
+            /* @__PURE__ */ jsx8("span", { children: "\u{1F4CD}" }),
+            /* @__PURE__ */ jsxs7("span", { children: [
+              distance,
+              " from ",
+              payload.fromLocation
+            ] })
+          ] }),
+          hourlyRate && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280" }, children: [
+            /* @__PURE__ */ jsx8("span", { children: "\u{1F4B0}" }),
+            /* @__PURE__ */ jsxs7("span", { children: [
+              "Rate: $",
+              hourlyRate,
+              "/hr"
+            ] })
+          ] }),
+          v.notes && /* @__PURE__ */ jsxs7("div", { style: { color: "#374151", marginTop: "0.4rem" }, children: [
+            /* @__PURE__ */ jsx8("span", { style: { marginRight: "0.25rem" }, children: "\u2728" }),
+            /* @__PURE__ */ jsx8("strong", { children: "Recommendation notes" }),
+            /* @__PURE__ */ jsx8("div", { style: { marginLeft: "1.25rem", marginTop: "0.25rem", color: "#6b7280" }, children: v.notes })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { style: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "0.5rem",
+            marginTop: "0.25rem",
+            paddingTop: "0.5rem",
+            borderTop: "1px solid #f3f4f6"
+          }, children: [
+            verification?.verified && /* @__PURE__ */ jsxs7("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
+              /* @__PURE__ */ jsx8("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
+              " Verified"
+            ] }),
+            booleans?.is_agency_insured && /* @__PURE__ */ jsxs7("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
+              /* @__PURE__ */ jsx8("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
+              " Insured"
+            ] }),
+            booleans?.free_in_home_evaluation && /* @__PURE__ */ jsxs7("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#3b82f6", fontSize: "0.75rem" }, children: [
+              /* @__PURE__ */ jsx8("span", { style: { fontSize: "0.875rem" }, children: "\u{1F3E0}" }),
+              " Free In-Home Evaluation"
+            ] }),
+            booleans?.can_request_same_caregiver && /* @__PURE__ */ jsxs7("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280", fontSize: "0.75rem" }, children: [
+              /* @__PURE__ */ jsx8("span", { style: { fontSize: "0.875rem" }, children: "\u{1F464}" }),
+              " Same Caregiver Available"
+            ] })
+          ] })
+        ]
+      },
+      v.vendor_id
+    );
+  }) });
+}
+
+// lib/widgets/default-widgets.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var defaultChatWidgets = [
   createWidget({
     widgetType: "person-card",
@@ -24888,7 +25020,7 @@ var defaultChatWidgets = [
       profileUri: zod_default.string().optional(),
       details: zod_default.record(zod_default.any()).optional()
     }).describe("showing a person card with name, photo and additional details"),
-    render: ({ payload }) => /* @__PURE__ */ jsx8(
+    render: (payload) => /* @__PURE__ */ jsx9(
       "div",
       {
         style: {
@@ -24901,8 +25033,8 @@ var defaultChatWidgets = [
           borderRadius: "0.5rem",
           boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
         },
-        children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.75rem" }, children: [
-          payload.profileUri && /* @__PURE__ */ jsx8(
+        children: /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.75rem" }, children: [
+          payload.profileUri && /* @__PURE__ */ jsx9(
             "img",
             {
               src: payload.profileUri,
@@ -24917,14 +25049,14 @@ var defaultChatWidgets = [
               loading: "lazy"
             }
           ),
-          /* @__PURE__ */ jsxs7("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx8("div", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827", marginBottom: "0.25rem" }, children: payload.name }),
-            payload.details ? /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: Object.entries(payload.details).map(([key, value]) => /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "0.5rem", fontSize: "0.875rem" }, children: [
-              /* @__PURE__ */ jsxs7("span", { style: { color: "#6b7280", fontWeight: 500, minWidth: "fit-content" }, children: [
+          /* @__PURE__ */ jsxs8("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx9("div", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827", marginBottom: "0.25rem" }, children: payload.name }),
+            payload.details ? /* @__PURE__ */ jsx9("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: Object.entries(payload.details).map(([key, value]) => /* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: "0.5rem", fontSize: "0.875rem" }, children: [
+              /* @__PURE__ */ jsxs8("span", { style: { color: "#6b7280", fontWeight: 500, minWidth: "fit-content" }, children: [
                 key,
                 ":"
               ] }),
-              /* @__PURE__ */ jsx8("span", { style: { color: "#374151" }, children: String(value) })
+              /* @__PURE__ */ jsx9("span", { style: { color: "#374151" }, children: String(value) })
             ] }, key)) }) : null
           ] })
         ] })
@@ -24937,7 +25069,7 @@ var defaultChatWidgets = [
       uri: zod_default.string().url(),
       text: zod_default.string().optional()
     }).describe("rendering a clickable link"),
-    render: ({ payload }) => /* @__PURE__ */ jsx8(
+    render: (payload) => /* @__PURE__ */ jsx9(
       "a",
       {
         href: payload.uri,
@@ -24972,100 +25104,31 @@ var defaultChatWidgets = [
   }),
   createWidget({
     widgetType: "vendor-cards",
-    schema: zod_default.object({
-      vendors: zod_default.array(zod_default.object({
-        vendor_id: zod_default.string(),
-        rank: zod_default.number().optional().describe("ranking position of the vendor from 1 to N when applicable"),
-        reason: zod_default.string().optional().describe("reason for the vendor ranking when applicable")
-      }))
-    }).describe("displaying a list of vendor cards with rankings and reasons. Only use this widget when calling Care Network vendor search tools."),
+    schema: vendorCardsSchema,
     enrich: {
-      toolId: "CPgsswom7FkUYvplmy6H",
-      inputs: {
-        vendorIds: "${vendors|map('vendor_id')|join(',')}"
+      /** fetch vendor details from the list of IDs */
+      vendorDetails: {
+        toolId: "CPgsswom7FkUYvplmy6H",
+        inputs: {
+          vendorIds: "${vendors|map('vendor_id')|join(',')}"
+        }
+      },
+      /* calculate distance from user to each vendor */
+      distanceMatrix: {
+        toolId: "DwsbeKAxOctXSGgghvW8",
+        inputs: {
+          origin: "${fromCoordinates}",
+          destinations: "${vendors|map('vendorCoordinates')}"
+        }
       }
     },
-    render: ({ payload, enrichedResult }) => {
-      const typedPayload = payload;
-      const vendorData = enrichedResult?.data ?? {};
-      const formatLanguage = (code3) => {
-        const langMap = { en: "English", es: "Spanish", zh: "Chinese", fr: "French" };
-        return langMap[code3.trim()] || code3.trim();
-      };
-      return /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: typedPayload.vendors.map((v) => {
-        const data = vendorData[v.vendor_id];
-        const name17 = data?.names?.find((n) => n.type === "org")?.value ?? "Care Provider";
-        const languages = data?.languages ?? [];
-        const ageGroups = data?.details?.age_groups ?? [];
-        const services = data?.details?.services ?? [];
-        const address = data?.location?.formatted_address;
-        const hours = data?.scheduling?.hours;
-        return /* @__PURE__ */ jsxs7(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              gap: "0.5rem",
-              padding: "1rem",
-              background: "#ffffff",
-              border: "1px solid #e5e7eb",
-              borderRadius: "0.5rem",
-              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)"
-            },
-            children: [
-              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-                /* @__PURE__ */ jsxs7("span", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827" }, children: [
-                  v.rank ? `#${v.rank} ` : "",
-                  name17
-                ] }),
-                hours && /* @__PURE__ */ jsx8("span", { style: { fontSize: "0.75rem", color: "#6b7280" }, children: hours })
-              ] }),
-              address && /* @__PURE__ */ jsx8("div", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: address }),
-              services.length > 0 && /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.375rem" }, children: services.map((service) => /* @__PURE__ */ jsx8(
-                "span",
-                {
-                  style: {
-                    fontSize: "0.75rem",
-                    padding: "0.125rem 0.5rem",
-                    background: "#dbeafe",
-                    color: "#1e40af",
-                    borderRadius: "9999px"
-                  },
-                  children: service
-                },
-                service
-              )) }),
-              languages.length > 0 && /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.375rem" }, children: languages.map((lang) => /* @__PURE__ */ jsx8(
-                "span",
-                {
-                  style: {
-                    fontSize: "0.75rem",
-                    padding: "0.125rem 0.5rem",
-                    background: "#f3e8ff",
-                    color: "#7c3aed",
-                    borderRadius: "9999px"
-                  },
-                  children: formatLanguage(lang)
-                },
-                lang
-              )) }),
-              ageGroups.length > 0 && /* @__PURE__ */ jsxs7("div", { style: { fontSize: "0.75rem", color: "#6b7280" }, children: [
-                /* @__PURE__ */ jsx8("strong", { children: "Ages:" }),
-                " ",
-                ageGroups.join(", ")
-              ] }),
-              v.reason && /* @__PURE__ */ jsxs7("div", { style: { fontSize: "0.875rem", color: "#374151" }, children: [
-                /* @__PURE__ */ jsx8("strong", { children: "Why:" }),
-                " ",
-                v.reason
-              ] })
-            ]
-          },
-          v.vendor_id
-        );
-      }) });
-    }
+    render: (payload, enriched) => /* @__PURE__ */ jsx9(
+      VendorCards,
+      {
+        payload,
+        enriched
+      }
+    )
   })
 ];
 export {