@ensembleapp/client-sdk 0.0.21 → 0.0.23

package/dist/index.d.ts

@@ -83,8 +83,8 @@ type UseChatConfig = DeprecatedChatConfig & {
     /** additional context (anything) that needs to be passed to the LLM */
     dataContext?: unknown;
     onError?: (error: Error) => void;
-    /** Called when API returns 401/unauthorized (e.g., token expiry) */
-    onAuthError?: () => void;
+    /** Called when API returns 401/unauthorized (e.g., token expiry). Return a new token to retry the request. */
+    onAuthError?: () => Promise<string | null>;
     onFinish?: (message: any) => void;
     onData?: (data: any) => void;
     onMessage?: (message: UIMessage) => void;
@@ -315,18 +315,13 @@ type RegisterChatWidgetsParams = {
     api: ApiConfig;
     threadId: string;
     widgets: UIWidgetDefinition[];
+    /** Called when API returns 401/unauthorized. Return a new token to retry the request. */
+    onAuthError?: () => Promise<string | null>;
 };
 /**
  * Registers widget definitions for a specific thread so the server can render them.
  */
-declare function registerChatWidgets({ api, threadId, widgets, }: RegisterChatWidgetsParams): Promise<void>;
-
-interface ChatWidgetInstance {
-    updateProps: (props: Partial<ChatWidgetConfig>) => void;
-    updateTheme: (styles: ChatWidgetStyles) => void;
-    unmount: () => void;
-}
-declare const createChatWidget: (target: HTMLElement, props: ChatWidgetConfig) => ChatWidgetInstance;
+declare function registerChatWidgets({ api, threadId, widgets, onAuthError, }: RegisterChatWidgetsParams): Promise<void>;
 
 /**
  * Embeddable Chat Widget
@@ -351,7 +346,8 @@ declare global {
 }
 
 declare const defaultChatWidgets: UIWidgetDefinition[];
+declare const getVendorCardsWidget: (isProd?: boolean) => 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 EnrichedResults, 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 };
+export { type ApiConfig, type ChatContentItem, type ChatMessage, ChatWidget, type ChatWidgetFeedbackOptions, type ChatWidgetConfig as ChatWidgetProps, type ChatWidgetSpeechToTextOptions, type ChatWidgetStyles, type ChatWidgetVoiceOptions, type EmbeddableChatWidgetConfig, type EnrichedResults, 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, createWidget, defaultChatWidgets, getVendorCardsWidget, registerChatWidgets, useChat, useFeedback };

package/dist/index.js

@@ -18628,6 +18628,26 @@ var DefaultChatTransport = class extends HttpChatTransport {
 
 // lib/hooks/useChat.ts
 import { useEffect, useMemo, useRef, useState } from "react";
+function createAuthAwareFetch(tokenRef, onAuthError) {
+  return async (input, init) => {
+    const doFetch = (token) => fetch(input, {
+      ...init,
+      headers: {
+        ...init?.headers,
+        Authorization: `Bearer ${token}`
+      }
+    });
+    const response = await doFetch(tokenRef.current);
+    if (response.status === 401 && onAuthError) {
+      const newToken = await onAuthError();
+      if (newToken) {
+        tokenRef.current = newToken;
+        return doFetch(newToken);
+      }
+    }
+    return response;
+  };
+}
 function useChat({
   api,
   threadId,
@@ -18643,11 +18663,19 @@ function useChat({
   const { baseUrl, token, headers: customHeaders = {} } = api;
   const dataContextRef = useRef(dataContext);
   dataContextRef.current = dataContext;
+  const tokenRef = useRef(token);
+  tokenRef.current = token;
+  const onAuthErrorRef = useRef(onAuthError);
+  onAuthErrorRef.current = onAuthError;
+  const authFetch = useMemo(
+    () => createAuthAwareFetch(tokenRef, async () => onAuthErrorRef.current?.() ?? null),
+    []
+  );
   const transport = useMemo(() => new DefaultChatTransport({
     api: `${baseUrl}/chat`,
+    fetch: authFetch,
     headers: {
       "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
       "thread-id": threadId,
       ...agentId ? { "agent-id": agentId } : {},
       ...agentExecutionId ? { "agent-execution-id": agentExecutionId } : {},
@@ -18663,7 +18691,7 @@ function useChat({
         }
       };
     }
-  }), [baseUrl, token, threadId, agentId, agentExecutionId, customHeaders]);
+  }), [baseUrl, authFetch, threadId, agentId, agentExecutionId, customHeaders]);
   const {
     messages,
     status,
@@ -18688,17 +18716,13 @@ function useChat({
   useEffect(() => {
     const fetchInitialMessages = async () => {
       try {
-        const response = await fetch(`${baseUrl}/chat/messages`, {
+        const response = await authFetch(`${baseUrl}/chat/messages`, {
           method: "GET",
           headers: {
-            Authorization: `Bearer ${token}`,
             "thread-id": threadId
           }
         });
         if (!response.ok) {
-          if (response.status === 401) {
-            onAuthError?.();
-          }
           throw new Error(`Failed to fetch messages: ${response.statusText}`);
         }
         const data = await response.json();
@@ -18714,7 +18738,7 @@ function useChat({
       }
     };
     fetchInitialMessages();
-  }, [agentExecutionId, agentId, baseUrl, threadId, token]);
+  }, [agentExecutionId, agentId, authFetch, baseUrl, onError, setMessages, threadId]);
   useEffect(() => {
     if (!onMessage || messages.length === 0) return;
     const lastMessage = messages[messages.length - 1];
@@ -23666,7 +23690,8 @@ var toJsonSchema = zodToJsonSchema;
 async function registerChatWidgets({
   api,
   threadId,
-  widgets
+  widgets,
+  onAuthError
 }) {
   const widgetSchemas = widgets.map(({ widgetType, schema, enrich }) => {
     const extendedSchema = schema.extend({
@@ -23678,8 +23703,8 @@ async function registerChatWidgets({
       enrich
     };
   });
-  const { baseUrl, token, headers: customHeaders = {} } = api;
-  const response = await fetch(`${baseUrl}/chat/widgets`, {
+  const { baseUrl, headers: customHeaders = {} } = api;
+  const doFetch = (token) => fetch(`${baseUrl}/chat/widgets`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -23689,6 +23714,13 @@ async function registerChatWidgets({
     },
     body: JSON.stringify({ widgetSchemas })
   });
+  let response = await doFetch(api.token);
+  if (response.status === 401 && onAuthError) {
+    const newToken = await onAuthError();
+    if (newToken) {
+      response = await doFetch(newToken);
+    }
+  }
   if (!response.ok) {
     const message = await response.text().catch(() => response.statusText);
     throw new Error(`Failed to register chat widgets: ${response.status} ${message}`);
@@ -24625,12 +24657,12 @@ function ChatWidget({
     if (!widgets || widgets.length === 0) return;
     const alreadyRegistered = lastRegisteredRef.current.threadId === threadId && lastRegisteredRef.current.widgets === widgets;
     if (alreadyRegistered) return;
-    registerChatWidgets({ api, threadId, widgets }).then(() => {
+    registerChatWidgets({ api, threadId, widgets, onAuthError }).then(() => {
       lastRegisteredRef.current = { threadId, widgets };
     }).catch((err) => {
       console.error("Failed to register chat widgets", err);
     });
-  }, [api, threadId, widgets]);
+  }, [api, threadId, widgets, onAuthError]);
   return /* @__PURE__ */ jsxs5(
     "div",
     {
@@ -24834,45 +24866,6 @@ function PopupChatWidget({ anchor, ...props }) {
   ] });
 }
 
-// lib/createChatWidget.tsx
-import { createRoot } from "react-dom/client";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var createChatWidget = (target, props) => {
-  if (!target) {
-    throw new Error("createChatWidget requires a valid DOM element to mount into.");
-  }
-  const root2 = createRoot(target);
-  let currentProps = props;
-  const render = () => {
-    root2.render(/* @__PURE__ */ jsx7(ChatWidget, { ...currentProps }));
-  };
-  render();
-  const mergeStyles = (nextStyles) => ({
-    ...currentProps.styles,
-    ...nextStyles
-  });
-  return {
-    updateProps(nextProps) {
-      currentProps = {
-        ...currentProps,
-        ...nextProps,
-        styles: mergeStyles(nextProps.styles)
-      };
-      render();
-    },
-    updateTheme(nextStyles) {
-      currentProps = {
-        ...currentProps,
-        styles: mergeStyles(nextStyles)
-      };
-      render();
-    },
-    unmount() {
-      root2.unmount();
-    }
-  };
-};
-
 // lib/model.ts
 var createWidget = ({
   widgetType,
@@ -24887,7 +24880,7 @@ var createWidget = ({
 });
 
 // lib/widgets/VendorCards.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, 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({
@@ -24905,7 +24898,7 @@ var vendorCardsSchema = zod_default.object({
 }).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" });
+    return /* @__PURE__ */ jsx7("div", { children: "Outdated vendor-cards widget" });
   }
   const { vendorDetails, distanceMatrix } = enriched;
   const vendorData = vendorDetails?.data ?? {};
@@ -24914,7 +24907,7 @@ function VendorCards({ payload, enriched }) {
     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) => {
+  return /* @__PURE__ */ jsx7("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?.[0]?.value ?? "Unknown";
     const address = data?.location?.address;
@@ -24940,8 +24933,8 @@ function VendorCards({ payload, enriched }) {
           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: {
+          /* @__PURE__ */ jsx7("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+            /* @__PURE__ */ jsx7("div", { style: {
               width: "2rem",
               height: "2rem",
               borderRadius: "9999px",
@@ -24953,20 +24946,20 @@ function VendorCards({ payload, enriched }) {
               fontSize: "0.875rem",
               color: "#374151"
             }, children: name17.charAt(0).toUpperCase() }),
-            /* @__PURE__ */ jsx8("span", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827" }, children: name17 })
+            /* @__PURE__ */ jsx7("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__ */ jsx7("span", { style: { color: "#facc15" }, children: "\u2605" }),
+            /* @__PURE__ */ jsx7("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 }),
+          address && /* @__PURE__ */ jsx7("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__ */ jsx7("span", { children: "\u{1F4CD}" }),
             /* @__PURE__ */ jsxs7("span", { children: [
               distance,
               " from ",
@@ -24974,7 +24967,7 @@ function VendorCards({ payload, enriched }) {
             ] })
           ] }),
           hourlyRate && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280" }, children: [
-            /* @__PURE__ */ jsx8("span", { children: "\u{1F4B0}" }),
+            /* @__PURE__ */ jsx7("span", { children: "\u{1F4B0}" }),
             /* @__PURE__ */ jsxs7("span", { children: [
               "Rate: $",
               hourlyRate,
@@ -24982,9 +24975,9 @@ function VendorCards({ payload, enriched }) {
             ] })
           ] }),
           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__ */ jsx7("span", { style: { marginRight: "0.25rem" }, children: "\u2728" }),
+            /* @__PURE__ */ jsx7("strong", { children: "Recommendation notes" }),
+            /* @__PURE__ */ jsx7("div", { style: { marginLeft: "1.25rem", marginTop: "0.25rem", color: "#6b7280" }, children: v.notes })
           ] }),
           /* @__PURE__ */ jsxs7("div", { style: {
             display: "flex",
@@ -24995,19 +24988,19 @@ function VendorCards({ payload, enriched }) {
             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" }),
+              /* @__PURE__ */ jsx7("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" }),
+              /* @__PURE__ */ jsx7("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}" }),
+              /* @__PURE__ */ jsx7("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}" }),
+              /* @__PURE__ */ jsx7("span", { style: { fontSize: "0.875rem" }, children: "\u{1F464}" }),
               " Same Caregiver Available"
             ] })
           ] })
@@ -25019,7 +25012,7 @@ function VendorCards({ payload, enriched }) {
 }
 
 // lib/widgets/default-widgets.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var defaultChatWidgets = [
   createWidget({
     widgetType: "person-card",
@@ -25028,7 +25021,7 @@ var defaultChatWidgets = [
       photoUri: zod_default.string().optional().describe("URL to a photo of the person"),
       details: zod_default.record(zod_default.any()).optional()
     }).describe("showing a person card with name, photo and additional details"),
-    render: (payload) => /* @__PURE__ */ jsx9(
+    render: (payload) => /* @__PURE__ */ jsx8(
       "div",
       {
         style: {
@@ -25042,7 +25035,7 @@ var defaultChatWidgets = [
           boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
         },
         children: /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.75rem" }, children: [
-          payload.photoUri && /* @__PURE__ */ jsx9(
+          payload.photoUri && /* @__PURE__ */ jsx8(
             "img",
             {
               src: payload.photoUri,
@@ -25058,13 +25051,13 @@ var defaultChatWidgets = [
             }
           ),
           /* @__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__ */ 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__ */ 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__ */ jsx9("span", { style: { color: "#374151" }, children: String(value) })
+              /* @__PURE__ */ jsx8("span", { style: { color: "#374151" }, children: String(value) })
             ] }, key)) }) : null
           ] })
         ] })
@@ -25077,7 +25070,7 @@ var defaultChatWidgets = [
       uri: zod_default.string().url(),
       text: zod_default.string().optional()
     }).describe("rendering a clickable link"),
-    render: (payload) => /* @__PURE__ */ jsx9(
+    render: (payload) => /* @__PURE__ */ jsx8(
       "a",
       {
         href: payload.uri,
@@ -25109,45 +25102,51 @@ var defaultChatWidgets = [
         children: payload.text || payload.uri
       }
     )
-  }),
-  createWidget({
-    widgetType: "vendor-cards",
-    schema: vendorCardsSchema,
-    enrich: {
-      /** fetch vendor details from the list of IDs */
-      vendorDetails: {
-        toolId: "CPgsswom7FkUYvplmy6H",
-        inputs: {
-          vendorIds: "${vendors|map('vendor_id')|join(',')}"
+  })
+];
+var getVendorCardsWidget = (isProd) => {
+  const vendorDetailsToolId = isProd ? "86dc78e28f933225750d9bcff7c94b18-CPgsswom7FkUYvplmy6H" : "CPgsswom7FkUYvplmy6H";
+  const distanceMatrixToolId = isProd ? "86dc78e28f933225750d9bcff7c94b18-DwsbeKAxOctXSGgghvW8" : "DwsbeKAxOctXSGgghvW8";
+  return [
+    createWidget({
+      widgetType: "vendor-cards",
+      schema: vendorCardsSchema,
+      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')}"
+          }
         }
       },
-      /* calculate distance from user to each vendor */
-      distanceMatrix: {
-        toolId: "DwsbeKAxOctXSGgghvW8",
-        inputs: {
-          origin: "${fromCoordinates}",
-          destinations: "${vendors|map('vendorCoordinates')}"
+      render: (payload, enriched) => /* @__PURE__ */ jsx8(
+        VendorCards,
+        {
+          payload,
+          enriched
         }
-      }
-    },
-    render: (payload, enriched) => /* @__PURE__ */ jsx9(
-      VendorCards,
-      {
-        payload,
-        enriched
-      }
-    )
-  })
-];
+      )
+    })
+  ];
+};
 export {
   ChatWidget,
   PopupChatWidget,
   TagGroupDisplay,
   ToolCallDisplay,
   cn,
-  createChatWidget,
   createWidget,
   defaultChatWidgets,
+  getVendorCardsWidget,
   registerChatWidgets,
   useChat,
   useFeedback