@ensembleapp/client-sdk 0.0.38 → 0.0.39

package/dist/index.js

@@ -33,6 +33,40 @@ styleInject(':root[data-chat-widget],\n[data-chat-widget] {\n  --chat-primary: #
 import { Send, StopCircle } from "lucide-react";
 import { forwardRef, useCallback as useCallback6, useEffect as useEffect6, useImperativeHandle, useMemo as useMemo5, useRef as useRef5, useState as useState7 } from "react";
 
+// lib/api/invokeTool.ts
+function createInvokeTool(api, onAuthError) {
+  return async (toolId, request = {}) => {
+    const { baseUrl, headers: customHeaders = {} } = api;
+    const doFetch = (token) => fetch(`${baseUrl}/api/tools/${toolId}/invoke`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+        ...customHeaders
+      },
+      body: JSON.stringify(request)
+    });
+    let response = await doFetch(api.token);
+    if (response.status === 401 && onAuthError) {
+      const newToken = await onAuthError();
+      if (newToken) {
+        response = await doFetch(newToken);
+      }
+    }
+    if (!response.ok) {
+      return {
+        success: false,
+        error: {
+          message: `HTTP ${response.status}`,
+          details: [await response.text().catch(() => response.statusText)],
+          code: "HTTP_ERROR"
+        }
+      };
+    }
+    return response.json();
+  };
+}
+
 // ../../node_modules/.pnpm/@ai-sdk+provider@3.0.8/node_modules/@ai-sdk/provider/dist/index.mjs
 var marker = "vercel.ai.error";
 var symbol = Symbol.for(marker);
@@ -25982,7 +26016,7 @@ function renderError(container, message) {
   errorDiv.textContent = message;
   container.appendChild(errorDiv);
 }
-function WidgetRenderer({ widget, payload, enriched, messageContext }) {
+function WidgetRenderer({ widget, payload, enriched, messageContext, invokeTool }) {
   const containerRef = useRef4(null);
   const rootRef = useRef4(null);
   const customerReactDOMRef = useRef4(void 0);
@@ -26019,7 +26053,7 @@ function WidgetRenderer({ widget, payload, enriched, messageContext }) {
       }
       let element;
       try {
-        element = widget.render(payload, enriched, { messageContext });
+        element = widget.render(payload, enriched, { messageContext, invokeTool });
       } catch (error48) {
         console.error(`Widget "${widget.widgetType}" render function threw:`, error48);
         renderError(containerRef.current, `Widget render error: ${widget.widgetType}`);
@@ -26080,10 +26114,10 @@ To fix, add your ReactDOM to the widget config:
         renderError(containerRef.current, `Widget system error: ${widget.widgetType}`);
       }
     }
-  }, [isSdk, widget, payload, enriched, payloadHash, enrichedHash, messageContext]);
+  }, [isSdk, widget, payload, enriched, payloadHash, enrichedHash, messageContext, invokeTool]);
   if (isSdk) {
     try {
-      const element = widget.render(payload, enriched, { messageContext });
+      const element = widget.render(payload, enriched, { messageContext, invokeTool });
       return /* @__PURE__ */ jsx7(Fragment3, { children: element });
     } catch (error48) {
       console.error(`SDK widget "${widget.widgetType}" render threw:`, error48);
@@ -26111,7 +26145,8 @@ function MessageRenderer({
   displayMode = "brief",
   tagExpansion,
   className,
-  feedback
+  feedback,
+  invokeTool
 }) {
   const messageContext = useMemo4(() => {
     if (!feedback) return void 0;
@@ -26169,7 +26204,8 @@ function MessageRenderer({
                   widget: widgetDef,
                   payload: widget.payload,
                   enriched: widget.enriched ?? {},
-                  messageContext: messageContext ?? void 0
+                  messageContext: messageContext ?? void 0,
+                  invokeTool
                 }
               )
             },
@@ -26372,6 +26408,10 @@ var ChatWidget = forwardRef(function ChatWidget2({
     agentId,
     agentVersion
   });
+  const invokeTool = useMemo5(
+    () => createInvokeTool(api, onAuthError),
+    [api, onAuthError]
+  );
   const [tagExpansionState, setTagExpansionState] = useState7(/* @__PURE__ */ new Map());
   const handleTagToggle = useCallback6((messageId, tagId, currentlyExpanded) => {
     suppressScrollRef.current = true;
@@ -26553,7 +26593,8 @@ var ChatWidget = forwardRef(function ChatWidget2({
                               requireCommentForNegative: feedback?.requireCommentForNegative,
                               getFeedback: () => getFeedback(message.id),
                               submitFeedback: (params) => submitFeedback(message.id, params)
-                            } : void 0
+                            } : void 0,
+                            invokeTool
                           }
                         )
                       }
@@ -26727,60 +26768,41 @@ function PopupChatWidget({ anchor, ...props }) {
   ] });
 }
 
-// lib/chat/widgets/VendorCards.tsx
+// lib/chat/widgets/HybridVendorCards.tsx
 import { MessageSquare as MessageSquare3, MessageSquareText as MessageSquareText2, ThumbsDown as ThumbsDown2, ThumbsUp as ThumbsUp2 } from "lucide-react";
-import React8 from "react";
+import { useEffect as useEffect8, useMemo as useMemo7, useRef as useRef6, useState as useState9 } from "react";
 import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-var vendorCardsSchema = jsonSchema({
-  type: "object",
-  description: "displaying a list of vendor cards. Use this widget to represent data from CareNetwork vendor search tool.",
-  properties: {
-    // fromLocation: {
-    //   type: 'string',
-    //   description: 'The location the user is searching for',
-    // },
-    // fromCoordinates: {
-    //   type: 'object',
-    //   description: "The location's lat/lng coordinates. This must come from the previous geocoding tool as-is - do NOT guess",
-    //   properties: {
-    //     latitude: { type: 'number' },
-    //     longitude: { type: 'number' },
-    //   },
-    //   required: ['latitude', 'longitude'],
-    // },
-    vendors: {
-      type: "array",
-      items: {
-        type: "object",
-        properties: {
-          vendor_id: { type: "string" }
-          // notes: {
-          //   type: 'string',
-          //   description: 'Give 7-10 words on why this vendor was recommended. Only include the notes for the top 3 vendors',
-          // },
-          // vendorCoordinates: {
-          //   type: 'object',
-          //   description: "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",
-          //   properties: {
-          //     latitude: { type: 'number' },
-          //     longitude: { type: 'number' },
-          //   },
-          //   required: ['latitude', 'longitude'],
-          // },
-        },
-        required: ["vendor_id"]
-        // required: ['vendor_id', 'vendorCoordinates'],
-      }
-      // description: '5-7 vendors to display. With notes for the top 3 only',
-    }
-  },
-  required: ["vendors"]
-  // required: ['fromLocation', 'fromCoordinates', 'vendors'],
-});
-function VendorCards({ payload, enriched, onAddToList, onFeedback, existingFeedback }) {
-  const [feedbackState, setFeedbackState] = React8.useState({});
-  const initializedRef = React8.useRef(false);
-  React8.useEffect(() => {
+var vendorCardsHybridSchema = zod_default.object({
+  fromLocation: zod_default.string().describe("The location the user is searching from"),
+  fromCoordinates: zod_default.object({
+    latitude: zod_default.number(),
+    longitude: zod_default.number()
+  }).describe("The user's lat/lng coordinates from geocoding"),
+  vendors: zod_default.array(zod_default.object({
+    vendor_id: zod_default.string(),
+    notes: zod_default.string().optional().describe("7-10 words on why this vendor was recommended. Be brief and concise - do not include unecessary details such as vendor names.")
+  }))
+}).describe("Display vendor cards. Only vendor IDs needed - details enriched server-side, distances fetched client-side.");
+function HybridVendorCards({
+  payload,
+  serverEnriched,
+  distanceMatrixToolId,
+  invokeTool,
+  messageContext
+}) {
+  const [distanceMatrix, setDistanceMatrix] = useState9();
+  const [loadingDistance, setLoadingDistance] = useState9(true);
+  const [feedbackState, setFeedbackState] = useState9({});
+  const hasFetchedRef = useRef6(false);
+  const initializedRef = useRef6(false);
+  const vendorIds = useMemo7(
+    () => payload.vendors.map((v) => v.vendor_id).join(","),
+    [payload.vendors]
+  );
+  const originKey = `${payload.fromCoordinates.latitude},${payload.fromCoordinates.longitude}`;
+  const hasVendorDetails = serverEnriched.vendorDetails?.success ?? false;
+  const existingFeedback = messageContext?.getFeedback?.()?.notes;
+  useEffect8(() => {
     if (!initializedRef.current && existingFeedback && existingFeedback.length > 0) {
       initializedRef.current = true;
       const initialState = {};
@@ -26796,6 +26818,44 @@ function VendorCards({ payload, enriched, onAddToList, onFeedback, existingFeedb
       setFeedbackState(initialState);
     }
   }, [existingFeedback]);
+  useEffect8(() => {
+    if (hasFetchedRef.current) {
+      return;
+    }
+    if (!invokeTool || !hasVendorDetails) {
+      setLoadingDistance(false);
+      return;
+    }
+    const fetchDistance = async () => {
+      hasFetchedRef.current = true;
+      try {
+        const vendorDetails = serverEnriched.vendorDetails?.data;
+        const destinations = payload.vendors.map((v) => {
+          const detail = vendorDetails?.[v.vendor_id];
+          return detail?.location?.coordinates ?? null;
+        }).filter(Boolean);
+        if (destinations.length === 0) {
+          setLoadingDistance(false);
+          return;
+        }
+        const distanceResult = await invokeTool(distanceMatrixToolId, {
+          args: {
+            origin: payload.fromCoordinates,
+            destinations
+          }
+        });
+        setDistanceMatrix(
+          distanceResult.success ? { success: true, data: distanceResult.data } : { success: false }
+        );
+      } catch (error48) {
+        console.warn("[HybridVendorCards] Distance fetch failed:", error48);
+        setDistanceMatrix({ success: false });
+      } finally {
+        setLoadingDistance(false);
+      }
+    };
+    fetchDistance();
+  }, [invokeTool, vendorIds, originKey, hasVendorDetails, distanceMatrixToolId, payload, serverEnriched]);
   const getFeedbackState = (vendorId) => {
     return feedbackState[vendorId] || { rating: null, commentText: null, showComment: false };
   };
@@ -26807,51 +26867,62 @@ function VendorCards({ payload, enriched, onAddToList, onFeedback, existingFeedb
   };
   const removeFeedbackState = (vendorId) => {
     setFeedbackState((prev) => {
-      const { [vendorId]: _, ...rest } = prev;
+      const { [vendorId]: _removed, ...rest } = prev;
+      void _removed;
       return rest;
     });
   };
-  const { vendorDetails, distanceMatrix } = enriched || {};
-  const vendorData = vendorDetails?.data ?? {};
-  const distances = distanceMatrix?.data ?? [];
+  const handleFeedback = (noteId, feedbackPayload) => {
+    messageContext?.submitFeedback?.({
+      notes: [{
+        noteId,
+        ...feedbackPayload
+      }]
+    });
+  };
   const formatDistance = (meters) => {
     const miles = meters / 1609.34;
     return miles < 0.1 ? "< 0.1 mi" : `${miles.toFixed(1)} mi`;
   };
-  return /* @__PURE__ */ jsx11("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: payload.vendors.map((v, index) => {
-    const data = vendorData[v.vendor_id];
-    const name21 = data?.names?.[0]?.value ?? "Unknown";
-    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;
-    const cnScore = data?.quality_scores?.completeness_score;
-    const subtypes = data?.subtype ?? [];
-    const careLocationType = subtypes.includes("In-Home") ? "In-Home" : subtypes.includes("In-Center") ? "In-Center" : null;
-    const backgroundCheckStatus = data?.references_and_background_check?.background_check_status?.toLowerCase();
-    const hasBackgroundCheck = backgroundCheckStatus === "clear" || backgroundCheckStatus === "completed";
-    return /* @__PURE__ */ jsxs10(
-      "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",
-          position: "relative"
-        },
-        children: [
-          /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
-            /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+  if (!serverEnriched || !serverEnriched.vendorDetails) {
+    return /* @__PURE__ */ jsx11("div", { children: "Loading vendor details..." });
+  }
+  const vendorData = serverEnriched.vendorDetails?.data ?? {};
+  const distances = distanceMatrix?.data ?? [];
+  return /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+    loadingDistance && /* @__PURE__ */ jsx11("style", { children: `@keyframes hybrid-vendor-cards-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }` }),
+    payload.vendors.map((v, index) => {
+      const data = vendorData[v.vendor_id];
+      const name21 = data?.names?.[0]?.value ?? "Unknown";
+      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 verification = data?.verification;
+      const cnScore = data?.quality_scores?.completeness_score;
+      const subtypes = data?.subtype ?? [];
+      const careLocationType = subtypes.includes("In-Home") ? "In-Home" : subtypes.includes("In-Center") ? "In-Center" : null;
+      const backgroundCheckStatus = data?.references_and_background_check?.background_check_status?.toLowerCase();
+      const hasBackgroundCheck = backgroundCheckStatus === "clear" || backgroundCheckStatus === "completed";
+      return /* @__PURE__ */ jsxs10(
+        "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",
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ jsx11("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
               /* @__PURE__ */ jsx11("div", { style: {
                 width: "2rem",
                 height: "2rem",
@@ -26865,162 +26936,110 @@ function VendorCards({ payload, enriched, onAddToList, onFeedback, existingFeedb
                 color: "#374151"
               }, children: name21.charAt(0).toUpperCase() }),
               /* @__PURE__ */ jsx11("span", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827" }, children: name21 })
+            ] }) }),
+            (reviewCount != null || cnScore != null) && /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", color: "#6b7280" }, children: [
+              avgRating != null && /* @__PURE__ */ jsxs10(Fragment5, { children: [
+                /* @__PURE__ */ jsx11("span", { style: { color: "#facc15" }, children: "\u2605" }),
+                /* @__PURE__ */ jsx11("span", { children: avgRating.toFixed(1) }),
+                reviewCount != null && /* @__PURE__ */ jsxs10("span", { style: { color: "#9ca3af" }, children: [
+                  "(",
+                  reviewCount,
+                  " reviews)"
+                ] })
+              ] }),
+              avgRating != null && cnScore != null ? /* @__PURE__ */ jsx11("span", { style: { color: "#9ca3af" }, children: "\u2022" }) : null,
+              cnScore != null ? /* @__PURE__ */ jsxs10("span", { children: [
+                "CN Score: ",
+                cnScore
+              ] }) : null
             ] }),
-            onAddToList && /* @__PURE__ */ jsx11(
-              "button",
-              {
-                onClick: () => onAddToList(v.vendor_id),
-                style: {
-                  background: "none",
-                  border: "none",
-                  color: "#3b82f6",
-                  fontSize: "0.875rem",
-                  cursor: "pointer",
-                  padding: 0
-                },
-                children: "Add to list"
-              }
-            )
-          ] }),
-          (reviewCount != null || cnScore != null) && /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", color: "#6b7280" }, children: [
-            avgRating != null && /* @__PURE__ */ jsxs10(Fragment5, { children: [
-              /* @__PURE__ */ jsx11("span", { style: { color: "#facc15" }, children: "\u2605" }),
-              /* @__PURE__ */ jsx11("span", { children: avgRating.toFixed(1) }),
-              reviewCount != null && /* @__PURE__ */ jsxs10("span", { style: { color: "#9ca3af" }, children: [
-                "(",
-                reviewCount,
-                " reviews)"
+            careLocationType && /* @__PURE__ */ jsx11("div", { style: { color: "#6b7280" }, children: careLocationType }),
+            address && /* @__PURE__ */ jsx11("div", { style: { color: "#6b7280" }, children: address }),
+            /* @__PURE__ */ jsx11("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280", minHeight: "1.25rem" }, children: loadingDistance ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+              /* @__PURE__ */ jsx11("span", { children: "\u{1F4CD}" }),
+              /* @__PURE__ */ jsx11("span", { style: {
+                width: "100px",
+                height: "0.875rem",
+                background: "linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)",
+                backgroundSize: "200% 100%",
+                animation: "hybrid-vendor-cards-shimmer 1.5s infinite",
+                borderRadius: "0.25rem"
+              } })
+            ] }) : distance ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+              /* @__PURE__ */ jsx11("span", { children: "\u{1F4CD}" }),
+              /* @__PURE__ */ jsxs10("span", { children: [
+                distance,
+                " from ",
+                payload.fromLocation
+              ] })
+            ] }) : null }),
+            hourlyRate && /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280" }, children: [
+              /* @__PURE__ */ jsx11("span", { children: "\u{1F4B0}" }),
+              /* @__PURE__ */ jsxs10("span", { children: [
+                "Rate: $",
+                hourlyRate,
+                "/hr"
               ] })
             ] }),
-            avgRating != null && cnScore != null ? /* @__PURE__ */ jsx11("span", { style: { color: "#9ca3af" }, children: "\u2022" }) : null,
-            cnScore != null ? /* @__PURE__ */ jsxs10("span", { children: [
-              "CN Score: ",
-              cnScore
-            ] }) : null
-          ] }),
-          careLocationType && /* @__PURE__ */ jsx11("div", { style: { color: "#6b7280" }, children: careLocationType }),
-          address && /* @__PURE__ */ jsx11("div", { style: { color: "#6b7280" }, children: address }),
-          distance && /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280" }, children: [
-            /* @__PURE__ */ jsx11("span", { children: "\u{1F4CD}" }),
-            /* @__PURE__ */ jsxs10("span", { children: [
-              distance,
-              " from ",
-              payload.fromLocation
-            ] })
-          ] }),
-          hourlyRate && /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280" }, children: [
-            /* @__PURE__ */ jsx11("span", { children: "\u{1F4B0}" }),
-            /* @__PURE__ */ jsxs10("span", { children: [
-              "Rate: $",
-              hourlyRate,
-              "/hr"
-            ] })
-          ] }),
-          v.notes && /* @__PURE__ */ jsxs10("div", { style: { color: "#374151", marginTop: "0.4rem" }, children: [
-            /* @__PURE__ */ jsx11("span", { style: { marginRight: "0.25rem" }, children: "\u2728" }),
-            /* @__PURE__ */ jsx11("strong", { children: "Recommendation notes" }),
-            /* @__PURE__ */ jsx11("div", { style: { marginLeft: "1.25rem", marginTop: "0.25rem", color: "#6b7280" }, children: v.notes })
-          ] }),
-          (() => {
-            const state = getFeedbackState(v.vendor_id);
-            const isPositiveSelected = state.rating === "positive";
-            const isNegativeSelected = state.rating === "negative";
-            const handleRatingClick = (rating) => {
-              const currentState = getFeedbackState(v.vendor_id);
-              if (currentState.rating === rating) {
-                removeFeedbackState(v.vendor_id);
-                onFeedback?.(v.vendor_id, {});
-              } else {
-                updateFeedbackState(v.vendor_id, { rating });
-                onFeedback?.(v.vendor_id, { rating, vendorId: v.vendor_id, vendorName: name21 });
-              }
-            };
-            const handleCommentToggle = () => {
-              const currentState = getFeedbackState(v.vendor_id);
-              updateFeedbackState(v.vendor_id, { showComment: !currentState.showComment });
-            };
-            const handleCommentSubmit = () => {
-              const currentState = getFeedbackState(v.vendor_id);
-              const trimmedComment = currentState.commentText?.trim();
-              if (trimmedComment) {
-                updateFeedbackState(v.vendor_id, { showComment: false, commentText: trimmedComment });
-                onFeedback?.(v.vendor_id, { comment: trimmedComment, vendorId: v.vendor_id, vendorName: name21 });
-              }
-            };
-            return /* @__PURE__ */ jsxs10(Fragment5, { children: [
-              /* @__PURE__ */ jsxs10("div", { style: {
-                display: "flex",
-                flexWrap: "wrap",
-                gap: "0.5rem",
-                // marginTop: '0.25rem',
-                alignItems: "center",
-                minHeight: "1.75rem"
-              }, children: [
-                verification?.verified && /* @__PURE__ */ jsxs10("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
-                  /* @__PURE__ */ jsx11("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
-                  " Wellthy Verified"
-                ] }),
-                hasBackgroundCheck && /* @__PURE__ */ jsxs10("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
-                  /* @__PURE__ */ jsx11("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
-                  " Background check"
-                ] }),
-                onFeedback && /* @__PURE__ */ jsxs10("div", { style: {
-                  marginLeft: "auto",
+            v.notes && /* @__PURE__ */ jsxs10("div", { style: { color: "#374151", marginTop: "0.4rem" }, children: [
+              /* @__PURE__ */ jsx11("span", { style: { marginRight: "0.25rem" }, children: "\u2728" }),
+              /* @__PURE__ */ jsx11("strong", { children: "Recommendation notes" }),
+              /* @__PURE__ */ jsx11("div", { style: { marginLeft: "1.25rem", marginTop: "0.25rem", color: "#6b7280" }, children: v.notes })
+            ] }),
+            (() => {
+              const state = getFeedbackState(v.vendor_id);
+              const isPositiveSelected = state.rating === "positive";
+              const isNegativeSelected = state.rating === "negative";
+              const handleRatingClick = (rating) => {
+                const currentState = getFeedbackState(v.vendor_id);
+                if (currentState.rating === rating) {
+                  removeFeedbackState(v.vendor_id);
+                  handleFeedback(v.vendor_id, {});
+                } else {
+                  updateFeedbackState(v.vendor_id, { rating });
+                  handleFeedback(v.vendor_id, { rating, vendorId: v.vendor_id, vendorName: name21 });
+                }
+              };
+              const handleCommentToggle = () => {
+                const currentState = getFeedbackState(v.vendor_id);
+                updateFeedbackState(v.vendor_id, { showComment: !currentState.showComment });
+              };
+              const handleCommentSubmit = () => {
+                const currentState = getFeedbackState(v.vendor_id);
+                const trimmedComment = currentState.commentText?.trim();
+                if (trimmedComment) {
+                  updateFeedbackState(v.vendor_id, { showComment: false, commentText: trimmedComment });
+                  handleFeedback(v.vendor_id, { comment: trimmedComment, vendorId: v.vendor_id, vendorName: name21 });
+                }
+              };
+              return /* @__PURE__ */ jsxs10(Fragment5, { children: [
+                /* @__PURE__ */ jsxs10("div", { style: {
                   display: "flex",
-                  gap: "0.25rem",
-                  alignItems: "center"
+                  flexWrap: "wrap",
+                  gap: "0.5rem",
+                  alignItems: "center",
+                  minHeight: "1.75rem"
                 }, children: [
-                  /* @__PURE__ */ jsx11(
-                    "button",
-                    {
-                      onClick: () => handleRatingClick("positive"),
-                      style: {
-                        background: isPositiveSelected ? "rgba(34, 197, 94, 0.1)" : "transparent",
-                        border: "none",
-                        borderRadius: "0.35rem",
-                        padding: "0.25rem",
-                        cursor: "pointer",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        color: isPositiveSelected ? "#22c55e" : "#9ca3af",
-                        width: "1.75rem",
-                        height: "1.75rem"
-                      },
-                      title: "This vendor was helpful",
-                      children: /* @__PURE__ */ jsx11(ThumbsUp2, { style: { width: "1rem", height: "1rem" } })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx11(
-                    "button",
-                    {
-                      onClick: () => handleRatingClick("negative"),
-                      style: {
-                        background: isNegativeSelected ? "rgba(239, 68, 68, 0.1)" : "transparent",
-                        border: "none",
-                        borderRadius: "0.35rem",
-                        padding: "0.25rem",
-                        cursor: "pointer",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        color: isNegativeSelected ? "#ef4444" : "#9ca3af",
-                        width: "1.75rem",
-                        height: "1.75rem"
-                      },
-                      title: "This vendor was not helpful",
-                      children: /* @__PURE__ */ jsx11(ThumbsDown2, { style: { width: "1rem", height: "1rem" } })
-                    }
-                  ),
-                  (() => {
-                    const hasComment = !!state.commentText?.trim();
-                    const CommentIcon = hasComment ? MessageSquareText2 : MessageSquare3;
-                    return /* @__PURE__ */ jsx11(
+                  verification?.verified && /* @__PURE__ */ jsxs10("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
+                    /* @__PURE__ */ jsx11("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
+                    " Wellthy Verified"
+                  ] }),
+                  hasBackgroundCheck && /* @__PURE__ */ jsxs10("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
+                    /* @__PURE__ */ jsx11("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
+                    " Background check"
+                  ] }),
+                  messageContext && /* @__PURE__ */ jsxs10("div", { style: {
+                    marginLeft: "auto",
+                    display: "flex",
+                    gap: "0.25rem",
+                    alignItems: "center"
+                  }, children: [
+                    /* @__PURE__ */ jsx11(
                       "button",
                       {
-                        onClick: handleCommentToggle,
+                        onClick: () => handleRatingClick("positive"),
                         style: {
-                          background: state.showComment ? "rgba(0, 0, 0, 0.05)" : "transparent",
+                          background: isPositiveSelected ? "rgba(34, 197, 94, 0.1)" : "transparent",
                           border: "none",
                           borderRadius: "0.35rem",
                           padding: "0.25rem",
@@ -27028,96 +27047,190 @@ function VendorCards({ payload, enriched, onAddToList, onFeedback, existingFeedb
                           display: "flex",
                           alignItems: "center",
                           justifyContent: "center",
-                          color: hasComment ? "#3b82f6" : state.showComment ? "#6b7280" : "#9ca3af",
+                          color: isPositiveSelected ? "#22c55e" : "#9ca3af",
                           width: "1.75rem",
                           height: "1.75rem"
                         },
-                        title: hasComment ? "Edit comment" : "Add comment",
-                        children: /* @__PURE__ */ jsx11(CommentIcon, { style: { width: "1rem", height: "1rem" } })
+                        title: "This vendor was helpful",
+                        children: /* @__PURE__ */ jsx11(ThumbsUp2, { style: { width: "1rem", height: "1rem" } })
                       }
-                    );
-                  })()
-                ] })
-              ] }),
-              state.showComment && /* @__PURE__ */ jsx11("div", { style: {
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                right: 0,
-                background: "#ffffff",
-                borderTop: "1px solid #e5e7eb",
-                borderRadius: "0 0 0.5rem 0.5rem",
-                padding: "0.75rem 1rem",
-                boxShadow: "0 -2px 8px rgba(0, 0, 0, 0.1)"
-              }, children: /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "0.5rem", alignItems: "flex-start" }, children: [
-                /* @__PURE__ */ jsx11(
-                  "textarea",
-                  {
-                    placeholder: "Share your thoughts about this vendor...",
-                    value: state.commentText ?? "",
-                    onChange: (e) => updateFeedbackState(v.vendor_id, { commentText: e.target.value }),
-                    rows: 2,
-                    style: {
-                      flex: 1,
-                      padding: "0.5rem",
-                      border: "1px solid #e5e7eb",
-                      borderRadius: "0.35rem",
-                      fontSize: "0.875rem",
-                      fontFamily: "inherit",
-                      resize: "none",
-                      minHeight: "50px"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+                    ),
+                    /* @__PURE__ */ jsx11(
+                      "button",
+                      {
+                        onClick: () => handleRatingClick("negative"),
+                        style: {
+                          background: isNegativeSelected ? "rgba(239, 68, 68, 0.1)" : "transparent",
+                          border: "none",
+                          borderRadius: "0.35rem",
+                          padding: "0.25rem",
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: isNegativeSelected ? "#ef4444" : "#9ca3af",
+                          width: "1.75rem",
+                          height: "1.75rem"
+                        },
+                        title: "This vendor was not helpful",
+                        children: /* @__PURE__ */ jsx11(ThumbsDown2, { style: { width: "1rem", height: "1rem" } })
+                      }
+                    ),
+                    (() => {
+                      const hasComment = !!state.commentText?.trim();
+                      const CommentIcon = hasComment ? MessageSquareText2 : MessageSquare3;
+                      return /* @__PURE__ */ jsx11(
+                        "button",
+                        {
+                          onClick: handleCommentToggle,
+                          style: {
+                            background: state.showComment ? "rgba(0, 0, 0, 0.05)" : "transparent",
+                            border: "none",
+                            borderRadius: "0.35rem",
+                            padding: "0.25rem",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: hasComment ? "#3b82f6" : state.showComment ? "#6b7280" : "#9ca3af",
+                            width: "1.75rem",
+                            height: "1.75rem"
+                          },
+                          title: hasComment ? "Edit comment" : "Add comment",
+                          children: /* @__PURE__ */ jsx11(CommentIcon, { style: { width: "1rem", height: "1rem" } })
+                        }
+                      );
+                    })()
+                  ] })
+                ] }),
+                state.showComment && /* @__PURE__ */ jsx11("div", { style: {
+                  position: "absolute",
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  background: "#ffffff",
+                  borderTop: "1px solid #e5e7eb",
+                  borderRadius: "0 0 0.5rem 0.5rem",
+                  padding: "0.75rem 1rem",
+                  boxShadow: "0 -2px 8px rgba(0, 0, 0, 0.1)"
+                }, children: /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "0.5rem", alignItems: "flex-start" }, children: [
                   /* @__PURE__ */ jsx11(
-                    "button",
+                    "textarea",
                     {
-                      onClick: handleCommentSubmit,
-                      disabled: !state.commentText?.trim(),
+                      placeholder: "Share your thoughts about this vendor...",
+                      value: state.commentText ?? "",
+                      onChange: (e) => updateFeedbackState(v.vendor_id, { commentText: e.target.value }),
+                      rows: 2,
                       style: {
-                        padding: "0.35rem 0.75rem",
-                        fontSize: "0.75rem",
-                        fontWeight: 500,
-                        borderRadius: "0.3rem",
-                        cursor: state.commentText?.trim() ? "pointer" : "not-allowed",
-                        background: "#3b82f6",
-                        border: "none",
-                        color: "#ffffff",
-                        opacity: state.commentText?.trim() ? 1 : 0.5
-                      },
-                      children: "Save"
+                        flex: 1,
+                        padding: "0.5rem",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: "0.35rem",
+                        fontSize: "0.875rem",
+                        fontFamily: "inherit",
+                        resize: "none",
+                        minHeight: "50px"
+                      }
                     }
                   ),
-                  /* @__PURE__ */ jsx11(
-                    "button",
-                    {
-                      onClick: handleCommentToggle,
-                      style: {
-                        padding: "0.25rem 0.5rem",
-                        fontSize: "0.75rem",
-                        fontWeight: 500,
-                        background: "transparent",
-                        border: "none",
-                        color: "#9ca3af",
-                        cursor: "pointer"
-                      },
-                      children: "Cancel"
-                    }
-                  )
-                ] })
-              ] }) })
-            ] });
-          })()
-        ]
-      },
-      v.vendor_id
-    );
-  }) });
+                  /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+                    /* @__PURE__ */ jsx11(
+                      "button",
+                      {
+                        onClick: handleCommentSubmit,
+                        disabled: !state.commentText?.trim(),
+                        style: {
+                          padding: "0.35rem 0.75rem",
+                          fontSize: "0.75rem",
+                          fontWeight: 500,
+                          borderRadius: "0.3rem",
+                          cursor: state.commentText?.trim() ? "pointer" : "not-allowed",
+                          background: "#3b82f6",
+                          border: "none",
+                          color: "#ffffff",
+                          opacity: state.commentText?.trim() ? 1 : 0.5
+                        },
+                        children: "Save"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx11(
+                      "button",
+                      {
+                        onClick: handleCommentToggle,
+                        style: {
+                          padding: "0.25rem 0.5rem",
+                          fontSize: "0.75rem",
+                          fontWeight: 500,
+                          background: "transparent",
+                          border: "none",
+                          color: "#9ca3af",
+                          cursor: "pointer"
+                        },
+                        children: "Cancel"
+                      }
+                    )
+                  ] })
+                ] }) })
+              ] });
+            })()
+          ]
+        },
+        v.vendor_id
+      );
+    })
+  ] });
 }
 
+// lib/chat/widgets/VendorCards.tsx
+import { MessageSquare as MessageSquare4, MessageSquareText as MessageSquareText3, ThumbsDown as ThumbsDown3, ThumbsUp as ThumbsUp3 } from "lucide-react";
+import React9 from "react";
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var vendorCardsSchema = jsonSchema({
+  type: "object",
+  description: "displaying a list of vendor cards. Use this widget to represent data from CareNetwork vendor search tool.",
+  properties: {
+    fromLocation: {
+      type: "string",
+      description: "The location the user is searching for"
+    },
+    fromCoordinates: {
+      type: "object",
+      description: "The location's lat/lng coordinates. This must come from the previous geocoding tool as-is - do NOT guess",
+      properties: {
+        latitude: { type: "number" },
+        longitude: { type: "number" }
+      },
+      required: ["latitude", "longitude"]
+    },
+    vendors: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          vendor_id: { type: "string" },
+          notes: {
+            type: "string",
+            description: "Give 7-10 words on why this vendor was recommended"
+          },
+          vendorCoordinates: {
+            type: "object",
+            description: "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",
+            properties: {
+              latitude: { type: "number" },
+              longitude: { type: "number" }
+            },
+            required: ["latitude", "longitude"]
+          }
+        },
+        required: ["vendor_id", "vendorCoordinates"]
+      }
+    }
+  },
+  required: ["fromLocation", "fromCoordinates", "vendors"]
+});
+
 // lib/chat/widgets/default-widgets.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var defaultChatWidgets = [
   createSDKWidget({
     widgetType: "person-card",
@@ -27126,7 +27239,7 @@ var defaultChatWidgets = [
       photoUri: zod_default.string().optional().describe("URL to a photo of the person"),
       details: zod_default.record(zod_default.string(), zod_default.any()).optional()
     }).describe("showing a person card with name, photo and additional details"),
-    render: (payload) => /* @__PURE__ */ jsx12(
+    render: (payload) => /* @__PURE__ */ jsx13(
       "div",
       {
         style: {
@@ -27139,8 +27252,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__ */ jsxs11("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.75rem" }, children: [
-          payload.photoUri && /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.75rem" }, children: [
+          payload.photoUri && /* @__PURE__ */ jsx13(
             "img",
             {
               src: payload.photoUri,
@@ -27155,14 +27268,14 @@ var defaultChatWidgets = [
               loading: "lazy"
             }
           ),
-          /* @__PURE__ */ jsxs11("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx12("div", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827", marginBottom: "0.25rem" }, children: payload.name }),
-            payload.details ? /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: Object.entries(payload.details).map(([key, value]) => /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: "0.5rem", fontSize: "0.875rem" }, children: [
-              /* @__PURE__ */ jsxs11("span", { style: { color: "#6b7280", fontWeight: 500, minWidth: "fit-content" }, children: [
+          /* @__PURE__ */ jsxs12("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827", marginBottom: "0.25rem" }, children: payload.name }),
+            payload.details ? /* @__PURE__ */ jsx13("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: Object.entries(payload.details).map(([key, value]) => /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: "0.5rem", fontSize: "0.875rem" }, children: [
+              /* @__PURE__ */ jsxs12("span", { style: { color: "#6b7280", fontWeight: 500, minWidth: "fit-content" }, children: [
                 key,
                 ":"
               ] }),
-              /* @__PURE__ */ jsx12("span", { style: { color: "#374151" }, children: String(value) })
+              /* @__PURE__ */ jsx13("span", { style: { color: "#374151" }, children: String(value) })
             ] }, key)) }) : null
           ] })
         ] })
@@ -27175,7 +27288,7 @@ var defaultChatWidgets = [
       uri: zod_default.string().url(),
       text: zod_default.string().optional()
     }).describe("rendering a clickable link"),
-    render: (payload) => /* @__PURE__ */ jsx12(
+    render: (payload) => /* @__PURE__ */ jsx13(
       "a",
       {
         href: payload.uri,
@@ -27215,43 +27328,25 @@ var getVendorCardsWidget = (isProd) => {
   return [
     createSDKWidget({
       widgetType: "vendor-cards",
-      schema: vendorCardsSchema,
+      schema: vendorCardsHybridSchema,
+      // Server-side enrichment for vendor details (runs parallel to LLM)
       enrich: {
-        /** fetch vendor details from the list of IDs */
         vendorDetails: {
           toolId: vendorDetailsToolId,
           inputs: {
             vendorIds: "${vendors|map('vendor_id')|join(',')}"
           }
         }
-        /* calculate distance from user to each vendor */
-        // distanceMatrix: {
-        //   toolId: distanceMatrixToolId,
-        //   inputs: {
-        //     origin: "${fromCoordinates}",
-        //     destinations: "${vendors|map('vendorCoordinates')}",
-        //   },
-        // }
       },
-      render: (payload, enriched, { messageContext }) => /* @__PURE__ */ jsx12(
-        VendorCards,
+      // Client-side: fetch distance matrix progressively
+      render: (payload, enriched, { messageContext, invokeTool }) => /* @__PURE__ */ jsx13(
+        HybridVendorCards,
         {
           payload,
-          enriched,
-          existingFeedback: messageContext?.getFeedback?.()?.notes,
-          onAddToList: (vendorId) => {
-            window.dispatchEvent(new CustomEvent("vendor-selected", {
-              detail: { vendorId }
-            }));
-          },
-          onFeedback: (noteId, payload2) => {
-            messageContext?.submitFeedback?.({
-              notes: [{
-                noteId,
-                ...payload2
-              }]
-            });
-          }
+          serverEnriched: enriched,
+          distanceMatrixToolId,
+          invokeTool,
+          messageContext
         }
       )
     })