@ensembleapp/client-sdk 0.0.12 → 0.0.14

package/dist/index.js

@@ -18627,7 +18627,7 @@ var DefaultChatTransport = class extends HttpChatTransport {
 };
 
 // lib/hooks/useChat.ts
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 function useChat({
   api,
   threadId,
@@ -18641,6 +18641,29 @@ function useChat({
   onMessage
 }) {
   const { baseUrl, token, headers: customHeaders = {} } = api;
+  const dataContextRef = useRef(dataContext);
+  dataContextRef.current = dataContext;
+  const transport = useMemo(() => new DefaultChatTransport({
+    api: `${baseUrl}/chat`,
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+      "thread-id": threadId,
+      ...agentId ? { "agent-id": agentId } : {},
+      ...agentExecutionId ? { "agent-execution-id": agentExecutionId } : {},
+      ...customHeaders
+    },
+    // only send last message to server
+    prepareSendMessagesRequest({ messages: messages2, id }) {
+      return {
+        body: {
+          id,
+          message: messages2[messages2.length - 1],
+          dataContext: dataContextRef.current
+        }
+      };
+    }
+  }), [baseUrl, token, threadId, agentId, agentExecutionId, customHeaders]);
   const {
     messages,
     status,
@@ -18649,27 +18672,7 @@ function useChat({
     setMessages
   } = useAIChat({
     id: threadId,
-    transport: new DefaultChatTransport({
-      api: `${baseUrl}/chat`,
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${token}`,
-        "thread-id": threadId,
-        ...agentId ? { "agent-id": agentId } : {},
-        ...agentExecutionId ? { "agent-execution-id": agentExecutionId } : {},
-        ...customHeaders
-      },
-      // only send last message to server
-      prepareSendMessagesRequest({ messages: messages2, id }) {
-        return {
-          body: {
-            id,
-            message: messages2[messages2.length - 1],
-            dataContext
-          }
-        };
-      }
-    }),
+    transport,
     onError: (error40) => {
       console.error("Chat error:", error40);
       onError?.(error40);
@@ -18751,7 +18754,7 @@ function useChat({
       } else if (part.type === "data-ui") {
         part.data.forEach((widget) => addContent(widget));
       } else if (part.type === "data-thoughts") {
-        const thoughtOutputs = part.data.map((t) => t.output);
+        const thoughtOutputs = part.data.map((t) => t.output).filter((output) => output != null);
         thoughts.push(...thoughtOutputs);
       } else if (part.type === "data-transfer") {
       } else if (part.type === "step-start") {
@@ -18909,11 +18912,11 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // lib/components/ChatWidget.css
-styleInject(':root[data-chat-widget],\n[data-chat-widget] {\n  --chat-primary: #3b82f6;\n  --chat-primary-text: #ffffff;\n  --chat-primary-hover: #2563eb;\n  --chat-background: #ffffff;\n  --chat-border: #e5e7eb;\n  --chat-header-text: #ffffff;\n  --chat-user-text: #ffffff;\n  --chat-assistant-bg: transparent;\n  --chat-assistant-text: #111827;\n  --chat-font-family:\n    "Inter",\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif;\n  --chat-radius: 0.75rem;\n  --chat-input-bg: #ffffff;\n  --chat-input-text: #111827;\n  --chat-input-placeholder: #6b7280;\n  --chat-thought-border: #d1d5db;\n  --chat-font-size: 0.925rem;\n  --chat-thought-font-size: 0.75rem;\n}\n.chat-widget {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 24rem;\n  background: var(--chat-background);\n  border: 1px solid var(--chat-border);\n  border-radius: var(--chat-radius);\n  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);\n  overflow: hidden;\n  font-family: var(--chat-font-family);\n  color: var(--chat-assistant-text);\n}\n.chat-widget__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 40px;\n  padding: 0.75rem 1rem;\n  background: var(--chat-primary);\n  color: var(--chat-header-text);\n}\n.chat-widget__title {\n  margin: 0;\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n.chat-widget__messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.chat-widget__message {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n.chat-widget__message-row {\n  display: flex;\n}\n.chat-widget__message-row--user {\n  justify-content: flex-end;\n}\n.chat-widget__message-row--assistant {\n  justify-content: flex-start;\n}\n.chat-widget__bubble {\n  max-width: 90%;\n  padding: 0.5rem 0.25rem;\n  border-radius: calc(var(--chat-radius) * 0.65);\n  font-size: var(--chat-font-size);\n}\n.chat-widget__bubble--user {\n  background: var(--chat-primary);\n  color: var(--chat-user-text);\n  border-bottom-right-radius: 0.35rem;\n}\n.chat-widget__bubble--assistant {\n  background: var(--chat-assistant-bg);\n  color: var(--chat-assistant-text);\n  border-bottom-left-radius: 0.35rem;\n}\n.chat-widget__markdown {\n  white-space: normal;\n  font-size: var(--chat-font-size);\n}\n.chat-widget__markdown h1 {\n  font-size: calc(var(--chat-font-size) * 1.4);\n}\n.chat-widget__markdown h2 {\n  font-size: calc(var(--chat-font-size) * 1.25);\n}\n.chat-widget__markdown h3 {\n  font-size: calc(var(--chat-font-size) * 1.1);\n}\n.chat-widget__markdown h4 {\n  font-size: calc(var(--chat-font-size) * 1.05);\n}\n.chat-widget__markdown h5 {\n  font-size: calc(var(--chat-font-size) * 1);\n}\n.chat-widget__markdown h6 {\n  font-size: calc(var(--chat-font-size) * 0.95);\n}\n.chat-widget__anchor-button {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.65rem 0.85rem;\n  background: var(--chat-primary);\n  color: var(--chat-primary-text);\n  border: none;\n  border-radius: 999px;\n  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);\n  cursor: pointer;\n  font-weight: 600;\n  z-index: 99999;\n}\n.chat-widget__anchor-button:hover {\n  background: var(--chat-primary-hover);\n}\n.chat-widget__anchor--left {\n  right: auto;\n  left: 20px;\n}\n.chat-widget__anchor-icon {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n.chat-widget__popup {\n  position: fixed;\n  bottom: 80px;\n  right: 20px;\n  z-index: 99998;\n}\n.chat-widget__anchor--left.chat-widget__popup {\n  right: auto;\n  left: 20px;\n}\n.chat-widget__popup-inner {\n  width: 384px;\n  max-width: calc(100vw - 40px);\n  height: 500px;\n  max-height: calc(100vh - 140px);\n  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);\n  border-radius: 12px;\n  overflow: hidden;\n}\n.chat-widget__markdown table {\n  width: 100%;\n  border-collapse: collapse;\n  margin: 0.5rem 0;\n}\n.chat-widget__markdown th,\n.chat-widget__markdown td {\n  border: 1px solid var(--chat-border);\n  padding: 0.5rem;\n  text-align: left;\n  vertical-align: top;\n}\n.chat-widget__markdown thead th {\n  background: var(--chat-assistant-bg);\n  color: var(--chat-assistant-text);\n  font-weight: 600;\n}\n.chat-widget__thoughts {\n  min-width: 0;\n  --chat-font-size: var(--chat-thought-font-size);\n}\n.chat-widget__details {\n  border: 0;\n}\n.chat-widget__thoughts-summary {\n  list-style: none;\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  cursor: pointer;\n  color: #6b7280;\n  font-size: 0.8125rem;\n}\n.chat-widget__thoughts-summary:hover {\n  color: var(--chat-assistant-text);\n}\n.chat-widget__thoughts-icon-container {\n  display: flex;\n  border: 1px solid #d1d5db;\n  border-radius: 999px;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n}\n.chat-widget__thoughts-icon {\n  width: 0.75rem;\n  height: 0.75rem;\n  transition: transform 0.2s ease;\n}\n.chat-widget__details[open] .chat-widget__thoughts-icon {\n  transform: rotate(90deg);\n}\n.chat-widget__thoughts-content {\n  margin-top: 0.5rem;\n  margin-left: 0.4rem;\n  padding: 0.75rem;\n  border-left: 2px solid var(--chat-thought-border);\n  border-color: var(--chat-primary);\n  max-width: 100%;\n  overflow-x: auto;\n}\n.chat-widget__thoughts-text {\n  margin: 0;\n  line-height: 1.5;\n  color: #4b5563;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    "Liberation Mono",\n    "Courier New",\n    monospace;\n  white-space: pre-wrap;\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  display: block;\n}\n.chat-widget__loading {\n  display: flex;\n  justify-content: flex-start;\n}\n.chat-widget__loading-bubble {\n  background: var(--chat-assistant-bg);\n  color: var(--chat-assistant-text);\n  border-radius: calc(var(--chat-radius) * 0.65);\n  border-bottom-left-radius: 0.35rem;\n  padding: 0.5rem 0.75rem;\n}\n.chat-widget__loading-dots {\n  display: flex;\n  gap: 0.35rem;\n}\n.chat-widget__loading-dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 999px;\n  background: #9ca3af;\n  animation: chat-widget-bounce 1s infinite ease-in-out;\n}\n.chat-widget__loading-dot[data-delay="1"] {\n  animation-delay: 0.1s;\n}\n.chat-widget__loading-dot[data-delay="2"] {\n  animation-delay: 0.2s;\n}\n@keyframes chat-widget-bounce {\n  0%, 80%, 100% {\n    transform: scale(0.6);\n    opacity: 0.4;\n  }\n  40% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n.chat-widget__input {\n  border-top: 1px solid var(--chat-border);\n  padding: 0.25rem 0 0.75rem;\n  background: var(--chat-input-bg);\n}\n.chat-widget__form {\n  position: relative;\n}\n.chat-widget__textarea {\n  width: 100%;\n  border: 0;\n  padding: 0.75rem 5.25rem 0.75rem 0.75rem;\n  background: transparent;\n  font-size: 0.925rem;\n  resize: none;\n  color: var(--chat-input-text);\n  font-family: inherit;\n}\n.chat-widget__textarea::-moz-placeholder {\n  color: var(--chat-input-placeholder);\n}\n.chat-widget__textarea::placeholder {\n  color: var(--chat-input-placeholder);\n}\n.chat-widget__textarea:focus-visible {\n  outline: none;\n}\n.chat-widget__textarea:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.chat-widget__toolbar {\n  position: absolute;\n  top: 0;\n  right: 3.75rem;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-right: 1px solid var(--chat-border);\n}\n.chat-widget__submit {\n  position: absolute;\n  top: 50%;\n  right: 0.75rem;\n  transform: translateY(-50%);\n  background: transparent;\n  border: 0;\n  width: 2.5rem;\n  height: 2.5rem;\n  display: grid;\n  place-items: center;\n  color: var(--chat-primary);\n  cursor: pointer;\n}\n.chat-widget__submit:disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.chat-widget__submit:not(:disabled):hover {\n  color: var(--chat-primary-hover);\n}\n.chat-widget__send-icon {\n  width: 1.2rem;\n  height: 1.2rem;\n}\n.chat-widget__mic-button {\n  position: relative;\n  border: none;\n  background: transparent;\n  width: 2.25rem;\n  height: 2.25rem;\n  display: grid;\n  place-items: center;\n  color: var(--chat-primary);\n  cursor: pointer;\n  border-radius: 999px;\n}\n.chat-widget__mic-button:disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.chat-widget__mic-button--active {\n  color: var(--chat-primary-hover);\n  background: rgba(59, 130, 246, 0.08);\n}\n.chat-widget__mic-icon {\n  width: 1rem;\n  height: 1rem;\n}\n.chat-widget__mic-bar {\n  position: absolute;\n  bottom: 0.1rem;\n  left: 50%;\n  width: 16px;\n  height: 2px;\n  border-radius: 999px;\n  background: rgba(148, 163, 184, 0.4);\n  overflow: hidden;\n  display: block;\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n.chat-widget__mic-bar-fill {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: currentColor;\n  transform-origin: left;\n  transition: transform 0.12s linear;\n}\n.chat-widget__voice {\n  display: flex;\n  margin-top: 0.25rem;\n}\n.chat-widget__voice-button {\n  border: none;\n  background: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.1rem 0;\n  font-size: 0.8rem;\n  font-weight: 500;\n  color: var(--chat-primary);\n  cursor: pointer;\n}\n.chat-widget__voice-button:disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.chat-widget__voice-button--active {\n  color: var(--chat-primary-hover);\n}\n.chat-widget__voice-icon {\n  width: 0.95rem;\n  height: 0.95rem;\n}\n.chat-widget__voice-icon--spin {\n  animation: chat-widget-spin 1s linear infinite;\n}\n@keyframes chat-widget-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n');
+styleInject(':root[data-chat-widget],\n[data-chat-widget] {\n  --chat-primary: #3b82f6;\n  --chat-primary-text: #ffffff;\n  --chat-primary-hover: #2563eb;\n  --chat-background: #ffffff;\n  --chat-border: #e5e7eb;\n  --chat-header-text: #ffffff;\n  --chat-user-text: #ffffff;\n  --chat-assistant-bg: transparent;\n  --chat-assistant-text: #111827;\n  --chat-font-family:\n    "Inter",\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif;\n  --chat-radius: 0.75rem;\n  --chat-input-bg: #ffffff;\n  --chat-input-text: #111827;\n  --chat-input-placeholder: #6b7280;\n  --chat-thought-border: #d1d5db;\n  --chat-font-size: 0.925rem;\n  --chat-thought-font-size: 0.75rem;\n}\n.chat-widget {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 24rem;\n  background: var(--chat-background);\n  border: 1px solid var(--chat-border);\n  border-radius: var(--chat-radius);\n  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);\n  overflow: hidden;\n  font-family: var(--chat-font-family);\n  color: var(--chat-assistant-text);\n}\n.chat-widget__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 40px;\n  padding: 0.75rem 1rem;\n  background: var(--chat-primary);\n  color: var(--chat-header-text);\n}\n.chat-widget__title {\n  margin: 0;\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n.chat-widget__messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.chat-widget__message {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n.chat-widget__message-row {\n  display: flex;\n}\n.chat-widget__message-row--user {\n  justify-content: flex-end;\n}\n.chat-widget__message-row--assistant {\n  justify-content: flex-start;\n}\n.chat-widget__bubble {\n  max-width: 90%;\n  padding: 0.5rem 0.25rem;\n  border-radius: calc(var(--chat-radius) * 0.65);\n  font-size: var(--chat-font-size);\n}\n.chat-widget__bubble--user {\n  background: var(--chat-primary);\n  color: var(--chat-user-text);\n  border-bottom-right-radius: 0.35rem;\n}\n.chat-widget__bubble--assistant {\n  width: 90%;\n  background: var(--chat-assistant-bg);\n  color: var(--chat-assistant-text);\n  border-bottom-left-radius: 0.35rem;\n}\n.chat-widget__widget {\n  width: 100%;\n}\n.chat-widget__markdown {\n  white-space: normal;\n  font-size: var(--chat-font-size);\n}\n.chat-widget__markdown h1 {\n  font-size: calc(var(--chat-font-size) * 1.4);\n}\n.chat-widget__markdown h2 {\n  font-size: calc(var(--chat-font-size) * 1.25);\n}\n.chat-widget__markdown h3 {\n  font-size: calc(var(--chat-font-size) * 1.1);\n}\n.chat-widget__markdown h4 {\n  font-size: calc(var(--chat-font-size) * 1.05);\n}\n.chat-widget__markdown h5 {\n  font-size: calc(var(--chat-font-size) * 1);\n}\n.chat-widget__markdown h6 {\n  font-size: calc(var(--chat-font-size) * 0.95);\n}\n.chat-widget__anchor-button {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.65rem 0.85rem;\n  background: var(--chat-primary);\n  color: var(--chat-primary-text);\n  border: none;\n  border-radius: 999px;\n  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);\n  cursor: pointer;\n  font-weight: 600;\n  z-index: 99999;\n}\n.chat-widget__anchor-button:hover {\n  background: var(--chat-primary-hover);\n}\n.chat-widget__anchor--left {\n  right: auto;\n  left: 20px;\n}\n.chat-widget__anchor-icon {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n.chat-widget__popup {\n  position: fixed;\n  bottom: 80px;\n  right: 20px;\n  z-index: 99998;\n}\n.chat-widget__anchor--left.chat-widget__popup {\n  right: auto;\n  left: 20px;\n}\n.chat-widget__popup-inner {\n  width: 384px;\n  max-width: calc(100vw - 40px);\n  height: 500px;\n  max-height: calc(100vh - 140px);\n  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);\n  border-radius: 12px;\n  overflow: hidden;\n}\n.chat-widget__markdown table {\n  width: 100%;\n  border-collapse: collapse;\n  margin: 0.5rem 0;\n}\n.chat-widget__markdown th,\n.chat-widget__markdown td {\n  border: 1px solid var(--chat-border);\n  padding: 0.5rem;\n  text-align: left;\n  vertical-align: top;\n}\n.chat-widget__markdown thead th {\n  background: var(--chat-assistant-bg);\n  color: var(--chat-assistant-text);\n  font-weight: 600;\n}\n.chat-widget__thoughts {\n  min-width: 0;\n  --chat-font-size: var(--chat-thought-font-size);\n}\n.chat-widget__details {\n  border: 0;\n}\n.chat-widget__thoughts-summary {\n  list-style: none;\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  cursor: pointer;\n  color: #6b7280;\n  font-size: 0.8125rem;\n}\n.chat-widget__thoughts-summary:hover {\n  color: var(--chat-assistant-text);\n}\n.chat-widget__thoughts-icon-container {\n  display: flex;\n  border: 1px solid #d1d5db;\n  border-radius: 999px;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n}\n.chat-widget__thoughts-icon {\n  width: 0.75rem;\n  height: 0.75rem;\n  transition: transform 0.2s ease;\n}\n.chat-widget__details[open] .chat-widget__thoughts-icon {\n  transform: rotate(90deg);\n}\n.chat-widget__thoughts-content {\n  margin-top: 0.5rem;\n  margin-left: 0.4rem;\n  padding: 0.75rem;\n  border-left: 2px solid var(--chat-thought-border);\n  border-color: var(--chat-primary);\n  max-width: 100%;\n  overflow-x: auto;\n}\n.chat-widget__thoughts-text {\n  margin: 0;\n  line-height: 1.5;\n  color: #4b5563;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    "Liberation Mono",\n    "Courier New",\n    monospace;\n  white-space: pre-wrap;\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  display: block;\n}\n.chat-widget__loading {\n  display: flex;\n  justify-content: flex-start;\n}\n.chat-widget__loading-bubble {\n  background: var(--chat-assistant-bg);\n  color: var(--chat-assistant-text);\n  border-radius: calc(var(--chat-radius) * 0.65);\n  border-bottom-left-radius: 0.35rem;\n  padding: 0.5rem 0.75rem;\n}\n.chat-widget__loading-dots {\n  display: flex;\n  gap: 0.35rem;\n}\n.chat-widget__loading-dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 999px;\n  background: #9ca3af;\n  animation: chat-widget-bounce 1s infinite ease-in-out;\n}\n.chat-widget__loading-dot[data-delay="1"] {\n  animation-delay: 0.1s;\n}\n.chat-widget__loading-dot[data-delay="2"] {\n  animation-delay: 0.2s;\n}\n@keyframes chat-widget-bounce {\n  0%, 80%, 100% {\n    transform: scale(0.6);\n    opacity: 0.4;\n  }\n  40% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n.chat-widget__input {\n  border-top: 1px solid var(--chat-border);\n  padding: 0.25rem 0 0.75rem;\n  background: var(--chat-input-bg);\n}\n.chat-widget__form {\n  position: relative;\n}\n.chat-widget__textarea {\n  width: 100%;\n  border: 0;\n  padding: 0.75rem 5.25rem 0.75rem 0.75rem;\n  background: transparent;\n  font-size: 0.925rem;\n  resize: none;\n  color: var(--chat-input-text);\n  font-family: inherit;\n}\n.chat-widget__textarea::-moz-placeholder {\n  color: var(--chat-input-placeholder);\n}\n.chat-widget__textarea::placeholder {\n  color: var(--chat-input-placeholder);\n}\n.chat-widget__textarea:focus-visible {\n  outline: none;\n}\n.chat-widget__textarea:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.chat-widget__toolbar {\n  position: absolute;\n  top: 0;\n  right: 3.75rem;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-right: 1px solid var(--chat-border);\n}\n.chat-widget__submit {\n  position: absolute;\n  top: 50%;\n  right: 0.75rem;\n  transform: translateY(-50%);\n  background: transparent;\n  border: 0;\n  width: 2.5rem;\n  height: 2.5rem;\n  display: grid;\n  place-items: center;\n  color: var(--chat-primary);\n  cursor: pointer;\n}\n.chat-widget__submit:disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.chat-widget__submit:not(:disabled):hover {\n  color: var(--chat-primary-hover);\n}\n.chat-widget__send-icon {\n  width: 1.2rem;\n  height: 1.2rem;\n}\n.chat-widget__mic-button {\n  position: relative;\n  border: none;\n  background: transparent;\n  width: 2.25rem;\n  height: 2.25rem;\n  display: grid;\n  place-items: center;\n  color: var(--chat-primary);\n  cursor: pointer;\n  border-radius: 999px;\n}\n.chat-widget__mic-button:disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.chat-widget__mic-button--active {\n  color: var(--chat-primary-hover);\n  background: rgba(59, 130, 246, 0.08);\n}\n.chat-widget__mic-icon {\n  width: 1rem;\n  height: 1rem;\n}\n.chat-widget__mic-bar {\n  position: absolute;\n  bottom: 0.1rem;\n  left: 50%;\n  width: 16px;\n  height: 2px;\n  border-radius: 999px;\n  background: rgba(148, 163, 184, 0.4);\n  overflow: hidden;\n  display: block;\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n.chat-widget__mic-bar-fill {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: currentColor;\n  transform-origin: left;\n  transition: transform 0.12s linear;\n}\n.chat-widget__voice {\n  display: flex;\n  margin-top: 0.25rem;\n}\n.chat-widget__voice-button {\n  border: none;\n  background: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.1rem 0;\n  font-size: 0.8rem;\n  font-weight: 500;\n  color: var(--chat-primary);\n  cursor: pointer;\n}\n.chat-widget__voice-button:disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.chat-widget__voice-button--active {\n  color: var(--chat-primary-hover);\n}\n.chat-widget__voice-icon {\n  width: 0.95rem;\n  height: 0.95rem;\n}\n.chat-widget__voice-icon--spin {\n  animation: chat-widget-spin 1s linear infinite;\n}\n@keyframes chat-widget-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n');
 
 // lib/components/ChatWidget.tsx
 import { ChevronRight as ChevronRight2, Send, StopCircle } from "lucide-react";
-import React3, { useCallback as useCallback4, useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState6 } from "react";
+import React3, { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState6 } from "react";
 import ReactMarkdown from "react-markdown";
 
 // ../../node_modules/ccount/index.js
@@ -23884,7 +23887,7 @@ import { Mic, MicOff } from "lucide-react";
 import {
   useCallback as useCallback3,
   useEffect as useEffect3,
-  useRef,
+  useRef as useRef2,
   useState as useState4
 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -23909,13 +23912,13 @@ function SpeechToTextButton({
   const [isListening, setIsListening] = useState4(false);
   const [isSupported, setIsSupported] = useState4(false);
   const [countdown, setCountdown] = useState4(0);
-  const recognitionRef = useRef(null);
+  const recognitionRef = useRef2(null);
   const [countdownActive, setCountdownActive] = useState4(false);
-  const silenceTimer = useRef(null);
-  const finalTimer = useRef(null);
-  const finalTextRef = useRef("");
-  const countdownFrameRef = useRef(null);
-  const countdownEndRef = useRef(0);
+  const silenceTimer = useRef2(null);
+  const finalTimer = useRef2(null);
+  const finalTextRef = useRef2("");
+  const countdownFrameRef = useRef2(null);
+  const countdownEndRef = useRef2(0);
   const recognitionLanguage = language ?? "en-US";
   const clearSilenceTimer = useCallback3(() => {
     if (silenceTimer.current) {
@@ -24251,6 +24254,9 @@ function MessageItemComponent({
   onFeedbackSubmit
 }) {
   const renderContentItem = (item, key) => {
+    if (item == null) {
+      return null;
+    }
     if (typeof item === "string") {
       return /* @__PURE__ */ jsx5("div", { className: "chat-widget__markdown", children: /* @__PURE__ */ jsx5(FormattedMarkdown, { children: item }) }, key);
     }
@@ -24425,11 +24431,11 @@ function ChatWidget({
   widgets,
   feedback
 }) {
-  const theme = useMemo(
+  const theme = useMemo2(
     () => ({ ...defaultTheme, ...styleProps || {} }),
     [styleProps]
   );
-  const themeVariables = useMemo(
+  const themeVariables = useMemo2(
     () => ({
       "--chat-primary": theme.primaryColor,
       "--chat-primary-text": theme.primaryTextColor,
@@ -24452,11 +24458,11 @@ function ChatWidget({
   const [input, setInput] = useState6("");
   const [isMicActive, setIsMicActive] = useState6(false);
   const [isSpeechPending, setIsSpeechPending] = useState6(false);
-  const messagesEndRef = useRef2(null);
-  const scrollContainerRef = useRef2(null);
-  const isAtBottomRef = useRef2(true);
-  const textareaRef = useRef2(null);
-  const suppressScrollRef = useRef2(false);
+  const messagesEndRef = useRef3(null);
+  const scrollContainerRef = useRef3(null);
+  const isAtBottomRef = useRef3(true);
+  const textareaRef = useRef3(null);
+  const suppressScrollRef = useRef3(false);
   const {
     messages,
     status,
@@ -24501,7 +24507,7 @@ function ChatWidget({
       return next;
     });
   }, []);
-  const voiceConfig = useMemo(() => {
+  const voiceConfig = useMemo2(() => {
     if (!voice || voice.enabled === false || !voice.url) {
       return null;
     }
@@ -24603,7 +24609,7 @@ function ChatWidget({
       setIsMicActive(false);
     }
   }, [speechEnabled]);
-  const lastRegisteredRef = useRef2({
+  const lastRegisteredRef = useRef3({
     threadId: "",
     widgets: null
   });
@@ -24712,7 +24718,7 @@ styleInject(".chat-popup__anchor {\n  position: fixed;\n  inset-block-end: 20px;
 
 // lib/components/PopupChatWidget.tsx
 import { MessageSquare as MessageSquare2, X } from "lucide-react";
-import { useEffect as useEffect5, useMemo as useMemo2, useState as useState7 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo3, useState as useState7 } from "react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function PopupChatWidget({ anchor, ...props }) {
   const [isOpen, setIsOpen] = useState7(anchor?.initiallyOpen ?? false);
@@ -24737,7 +24743,7 @@ function PopupChatWidget({ anchor, ...props }) {
   const anchorPositionClass = anchor?.position === "bottom-start" ? "chat-popup--start" : "chat-popup--end";
   const closeConfig = anchor?.closeButton ?? props.closeButton;
   const showClose = closeConfig?.show !== false;
-  const themeStyle = useMemo2(() => {
+  const themeStyle = useMemo3(() => {
     const primary = props.styles?.primaryColor ?? "#3b82f6";
     const primaryText = props.styles?.primaryTextColor ?? "#ffffff";
     const background = props.styles?.backgroundColor ?? "#ffffff";
@@ -24761,7 +24767,7 @@ function PopupChatWidget({ anchor, ...props }) {
       "--chat-header-text": headerText
     };
   }, [props.styles]);
-  const popupStyle = useMemo2(() => {
+  const popupStyle = useMemo3(() => {
     const size = props.popupSize ?? {};
     return {
       width: size.width ?? "600px",
@@ -24968,21 +24974,32 @@ var defaultChatWidgets = [
     widgetType: "vendor-cards",
     schema: zod_default.object({
       vendors: zod_default.array(zod_default.object({
-        id: zod_default.string(),
-        rank: zod_default.number().describe("ranking position of the vendor from 1 to N"),
-        reason: zod_default.string().describe("reason for the vendor ranking")
+        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"),
+    }).describe("displaying a list of vendor cards with rankings and reasons. Only use this widget when calling Care Network vendor search tools."),
     enrich: {
-      toolId: "LEsUueB52QpakvN1n5HG",
+      toolId: "CPgsswom7FkUYvplmy6H",
       inputs: {
-        ids: "${vendors|map('id')|join(',')}"
+        vendorIds: "${vendors|map('vendor_id')|join(',')}"
       }
     },
     render: ({ payload, enrichedResult }) => {
+      const typedPayload = payload;
       const vendorData = enrichedResult?.data ?? {};
-      return /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: payload.vendors.map((v) => {
-        const data = vendorData[v.id];
+      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",
           {
@@ -24999,26 +25016,53 @@ var defaultChatWidgets = [
             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,
-                  " ",
-                  data?.name ?? `Vendor ${v.id}`
+                  v.rank ? `#${v.rank} ` : "",
+                  name17
                 ] }),
-                data?.rating && /* @__PURE__ */ jsxs7("span", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: [
-                  "\u2B50 ",
-                  data.rating.toFixed(1)
-                ] })
+                hours && /* @__PURE__ */ jsx8("span", { style: { fontSize: "0.75rem", color: "#6b7280" }, children: hours })
               ] }),
-              data?.description && /* @__PURE__ */ jsx8("div", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: data.description }),
-              /* @__PURE__ */ jsxs7("div", { style: { fontSize: "0.875rem", color: "#374151" }, children: [
+              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
-              ] }),
-              data?.address && /* @__PURE__ */ jsx8("div", { style: { fontSize: "0.75rem", color: "#9ca3af" }, children: data.address })
+              ] })
             ]
           },
-          v.id
+          v.vendor_id
         );
       }) });
     }