@ensembleapp/client-sdk 0.0.38 → 0.0.40

package/dist/index.js

@@ -27,11 +27,77 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // lib/chat/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  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.chat-widget__collapsed {\n  position: relative;\n  margin-bottom: 0.25rem;\n}\n.chat-widget__collapsed-content {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 300ms ease-out;\n}\n.chat-widget__collapsed-content--expanded {\n  grid-template-rows: 1fr;\n}\n.chat-widget__collapsed-content-inner {\n  overflow: hidden;\n}\n.chat-widget__collapsed-preview {\n  position: relative;\n  max-height: 1.5em;\n  overflow: hidden;\n  opacity: 0.6;\n  pointer-events: none;\n  transition: opacity 300ms ease-out, max-height 300ms ease-out;\n}\n.chat-widget__collapsed-preview--hidden {\n  opacity: 0;\n  max-height: 0;\n  pointer-events: none;\n}\n.chat-widget__collapsed-gradient {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 70%;\n  height: 100%;\n  background:\n    linear-gradient(\n      to right,\n      transparent 0%,\n      var(--chat-background) 90%);\n  pointer-events: none;\n}\n.chat-widget__collapsed-toggle {\n  display: inline-block;\n  padding: 0;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--chat-primary);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n.chat-widget__collapsed-toggle:hover {\n  text-decoration: underline;\n}\n@keyframes chat-widget-slide-up {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n    max-height: 200px;\n  }\n  to {\n    opacity: 0.6;\n    transform: translateY(-8px);\n    max-height: 1.5em;\n  }\n}\n.chat-widget__collapsed--animating .chat-widget__collapsed-preview {\n  animation: chat-widget-slide-up 300ms ease-out forwards;\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-primary-subtle: rgba(59, 130, 246, 0.1);\n  --chat-background: #ffffff;\n  --chat-background-secondary: #f9fafb;\n  --chat-background-tertiary: #f3f4f6;\n  --chat-border: #e5e7eb;\n  --chat-border-light: #f3f4f6;\n  --chat-text: #111827;\n  --chat-text-secondary: #4b5563;\n  --chat-text-muted: #6b7280;\n  --chat-text-disabled: #9ca3af;\n  --chat-success: #22c55e;\n  --chat-success-bg: rgba(34, 197, 94, 0.1);\n  --chat-error: #ef4444;\n  --chat-error-bg: rgba(239, 68, 68, 0.1);\n  --chat-header-text: #ffffff;\n  --chat-user-text: #ffffff;\n  --chat-assistant-bg: transparent;\n  --chat-assistant-text: var(--chat-text);\n  --chat-input-bg: var(--chat-background);\n  --chat-input-text: var(--chat-text);\n  --chat-input-placeholder: var(--chat-text-muted);\n  --chat-thought-border: var(--chat-border);\n  --chat-font-family:\n    "Inter",\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif;\n  --chat-radius: 0.75rem;\n  --chat-font-size: 0.925rem;\n  --chat-thought-font-size: 0.75rem;\n  --chat-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);\n  --chat-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);\n  --chat-overlay-bg: rgba(0, 0, 0, 0.3);\n}\n.chat-widget {\n  position: relative;\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: var(--chat-shadow);\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: var(--chat-shadow);\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: var(--chat-shadow);\n  border-radius: 12px;\n  overflow: hidden;\n}\n.chat-widget__markdown a {\n  color: var(--chat-primary);\n  text-decoration: underline;\n}\n.chat-widget__markdown a:hover {\n  color: var(--chat-primary-hover);\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: var(--chat-text-muted);\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 var(--chat-border);\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: var(--chat-text-secondary);\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: var(--chat-text-disabled);\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: var(--chat-text-disabled);\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: var(--chat-text-disabled);\n  cursor: not-allowed;\n}\n.chat-widget__mic-button--active {\n  color: var(--chat-primary-hover);\n  background: var(--chat-primary-subtle);\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: var(--chat-border);\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: var(--chat-text-disabled);\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.chat-widget__collapsed {\n  position: relative;\n  margin-bottom: 0.25rem;\n}\n.chat-widget__collapsed-content {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 300ms ease-out;\n}\n.chat-widget__collapsed-content--expanded {\n  grid-template-rows: 1fr;\n}\n.chat-widget__collapsed-content-inner {\n  overflow: hidden;\n}\n.chat-widget__collapsed-preview {\n  position: relative;\n  max-height: 1.5em;\n  overflow: hidden;\n  opacity: 0.6;\n  pointer-events: none;\n  transition: opacity 300ms ease-out, max-height 300ms ease-out;\n}\n.chat-widget__collapsed-preview--hidden {\n  opacity: 0;\n  max-height: 0;\n  pointer-events: none;\n}\n.chat-widget__collapsed-gradient {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 70%;\n  height: 100%;\n  background:\n    linear-gradient(\n      to right,\n      transparent 0%,\n      var(--chat-background) 90%);\n  pointer-events: none;\n}\n.chat-widget__collapsed-toggle {\n  display: inline-block;\n  padding: 0;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--chat-primary);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n.chat-widget__collapsed-toggle:hover {\n  text-decoration: underline;\n}\n@keyframes chat-widget-slide-up {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n    max-height: 200px;\n  }\n  to {\n    opacity: 0.6;\n    transform: translateY(-8px);\n    max-height: 1.5em;\n  }\n}\n.chat-widget__collapsed--animating .chat-widget__collapsed-preview {\n  animation: chat-widget-slide-up 300ms ease-out forwards;\n}\n');
 
 // lib/chat/ChatWidget.tsx
 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";
+import { forwardRef, useCallback as useCallback6, useEffect as useEffect6, useImperativeHandle, useMemo as useMemo5, useRef as useRef5, useState as useState9 } from "react";
+
+// lib/api/fetchApprovalConfig.ts
+async function fetchApprovalConfig(options) {
+  const { api, agentId, agentVersion, toolName, args = {}, onAuthError } = options;
+  const { baseUrl, headers: customHeaders = {} } = api;
+  const doFetch = (token) => fetch(`${baseUrl}/chat/tools/${encodeURIComponent(toolName)}/approval-config`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+      "agent-id": agentId,
+      ...agentVersion !== void 0 ? { version: String(agentVersion) } : {},
+      ...customHeaders
+    },
+    body: JSON.stringify({ args })
+  });
+  let response = await doFetch(api.token);
+  if (response.status === 401 && onAuthError) {
+    const newToken = await onAuthError();
+    if (newToken) {
+      response = await doFetch(newToken);
+    }
+  }
+  if (!response.ok) {
+    console.error(
+      `[fetchApprovalConfig] Failed to fetch approval config for ${toolName}:`,
+      response.status
+    );
+    return null;
+  }
+  return response.json();
+}
+
+// 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";
@@ -20998,6 +21064,15 @@ var uiMessageChunkSchema = lazySchema(
     ])
   )
 );
+function isStaticToolUIPart(part) {
+  return part.type.startsWith("tool-");
+}
+function isDynamicToolUIPart(part) {
+  return part.type === "dynamic-tool";
+}
+function isToolUIPart(part) {
+  return isStaticToolUIPart(part) || isDynamicToolUIPart(part);
+}
 var originalGenerateId2 = createIdGenerator({
   prefix: "aitxt",
   size: 24
@@ -21417,6 +21492,46 @@ var DefaultChatTransport = class extends HttpChatTransport {
     );
   }
 };
+function lastAssistantMessageIsCompleteWithApprovalResponses({
+  messages
+}) {
+  const message = messages[messages.length - 1];
+  if (!message) {
+    return false;
+  }
+  if (message.role !== "assistant") {
+    return false;
+  }
+  const lastStepStartIndex = message.parts.reduce((lastIndex, part, index) => {
+    return part.type === "step-start" ? index : lastIndex;
+  }, -1);
+  const lastStepToolInvocations = message.parts.slice(lastStepStartIndex + 1).filter(isToolUIPart).filter((part) => !part.providerExecuted);
+  return (
+    // has at least one tool approval response
+    lastStepToolInvocations.filter((part) => part.state === "approval-responded").length > 0 && // all tool approvals must have a response
+    lastStepToolInvocations.every(
+      (part) => part.state === "output-available" || part.state === "output-error" || part.state === "approval-responded"
+    )
+  );
+}
+function lastAssistantMessageIsCompleteWithToolCalls({
+  messages
+}) {
+  const message = messages[messages.length - 1];
+  if (!message) {
+    return false;
+  }
+  if (message.role !== "assistant") {
+    return false;
+  }
+  const lastStepStartIndex = message.parts.reduce((lastIndex, part, index) => {
+    return part.type === "step-start" ? index : lastIndex;
+  }, -1);
+  const lastStepToolInvocations = message.parts.slice(lastStepStartIndex + 1).filter(isToolUIPart).filter((part) => !part.providerExecuted);
+  return lastStepToolInvocations.length > 0 && lastStepToolInvocations.every(
+    (part) => part.state === "output-available" || part.state === "output-error"
+  );
+}
 
 // lib/hooks/useChat.ts
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -21486,6 +21601,7 @@ function transformMessage(msg) {
 }
 
 // lib/hooks/useChat.ts
+var COLLECT_USER_INPUT_TOOL = "collect_user_input";
 function createAuthAwareFetch(tokenRef, onAuthError) {
   return async (input, init) => {
     const doFetch = (token) => fetch(input, {
@@ -21557,10 +21673,16 @@ function useChat({
     status,
     sendMessage,
     stop,
-    setMessages
+    setMessages,
+    addToolOutput,
+    addToolApprovalResponse
   } = useAIChat({
     id: threadId,
     transport,
+    // Automatically resubmit when:
+    // 1. Tool result is populated (collect_user_input use case)
+    // 2. Tool approval responses are complete (human-in-the-loop approval)
+    sendAutomaticallyWhen: ({ messages: messages2 }) => lastAssistantMessageIsCompleteWithToolCalls({ messages: messages2 }) || lastAssistantMessageIsCompleteWithApprovalResponses({ messages: messages2 }),
     onError: (error48) => {
       console.error("Chat error:", error48);
       onError?.(error48);
@@ -21609,13 +21731,56 @@ function useChat({
   const rtnMessages = useMemo(() => {
     return messages.map((msg) => transformMessage(msg));
   }, [messages]);
+  const pendingToolOutput = useMemo(() => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage || lastMessage.role !== "assistant") return null;
+    for (const part of lastMessage.parts ?? []) {
+      const isToolPart = part.type.startsWith("tool-") || part.type === "dynamic-tool";
+      if (!isToolPart) continue;
+      const toolName = "toolName" in part ? part.toolName : part.type.replace("tool-", "");
+      if (toolName !== COLLECT_USER_INPUT_TOOL) continue;
+      const state = "state" in part ? part.state : void 0;
+      if (state === "input-available") {
+        return {
+          toolCallId: part.toolCallId,
+          args: part.input
+        };
+      }
+    }
+    return null;
+  }, [messages]);
+  const pendingToolApproval = useMemo(() => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage || lastMessage.role !== "assistant") return null;
+    for (const part of lastMessage.parts ?? []) {
+      const isToolPart = part.type.startsWith("tool-") || part.type === "dynamic-tool";
+      if (!isToolPart) continue;
+      const state = "state" in part ? part.state : void 0;
+      if (state === "approval-requested") {
+        const toolName = "toolName" in part ? part.toolName : part.type.replace("tool-", "");
+        const approval = "approval" in part ? part.approval : null;
+        if (!approval?.id) continue;
+        return {
+          toolCallId: part.toolCallId,
+          toolName,
+          args: part.input ?? {},
+          approvalId: approval.id
+        };
+      }
+    }
+    return null;
+  }, [messages]);
   return {
     messages: rtnMessages,
     status,
     isLoadingInitial,
     sendMessage,
     stop,
-    setMessages
+    setMessages,
+    addToolOutput,
+    addToolApprovalResponse,
+    pendingToolOutput,
+    pendingToolApproval
   };
 }
 
@@ -21715,15 +21880,376 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// lib/chat/components/InputFormOverlay.css
+styleInject('@import "./input-fields/InputFields.css";\n.input-form-overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  pointer-events: none;\n}\n@keyframes slideUp {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n.input-form-overlay__content {\n  pointer-events: auto;\n  animation: slideUp 0.2s ease-out;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--chat-background);\n  border-top: 1px solid var(--chat-border);\n  border-radius: var(--chat-radius) var(--chat-radius) 0 0;\n  box-shadow: var(--chat-shadow-sm);\n  max-height: 80%;\n  font-family: var(--chat-font-family);\n}\n.input-form-overlay__title {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--chat-assistant-text);\n  margin: 0 0 0.375rem 0;\n}\n.input-form-overlay__description {\n  font-size: 0.8125rem;\n  color: var(--chat-input-placeholder);\n  margin: 0 0 1rem 0;\n  line-height: 1.4;\n}\n.input-form-overlay__form {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n}\n.input-form-overlay__scrollable {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n  padding: 1rem 1.25rem;\n}\n.input-form-overlay__fields {\n}\n.input-form-overlay__footer {\n  flex-shrink: 0;\n  padding: 0.5rem 1.25rem;\n  border-top: 1px solid var(--chat-border);\n}\n.input-form-overlay__actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  justify-content: flex-start;\n}\n.input-form-overlay__button {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  border-radius: calc(var(--chat-radius) * 0.5);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  border: none;\n}\n.input-form-overlay__button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.input-form-overlay__button--primary {\n  background-color: var(--chat-primary);\n  color: var(--chat-primary-text);\n}\n.input-form-overlay__button--primary:hover:not(:disabled) {\n  background-color: var(--chat-primary-hover);\n}\n.input-form-overlay__button--secondary {\n  background-color: var(--chat-border);\n  color: var(--chat-assistant-text);\n}\n.input-form-overlay__button--secondary:hover:not(:disabled) {\n  opacity: 0.8;\n}\n.input-form-overlay__freeform-toggle {\n  padding: 0.5rem 0;\n  font-size: 0.75rem;\n  color: var(--chat-input-placeholder);\n  background: none;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease-in-out;\n  white-space: nowrap;\n}\n.input-form-overlay__freeform-toggle:hover {\n  color: var(--chat-primary);\n  text-decoration: underline;\n}\n.input-form-overlay__freeform {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n}\n.input-form-overlay__freeform-body {\n  padding: 1rem 1.25rem;\n}\n.input-form-overlay__freeform-input {\n  flex: 1;\n  width: 100%;\n  padding: 0.625rem;\n  font-size: var(--chat-font-size);\n  line-height: 1.4;\n  color: var(--chat-input-text);\n  background-color: var(--chat-input-bg);\n  border: 1px solid var(--chat-border);\n  border-radius: calc(var(--chat-radius) * 0.5);\n  resize: vertical;\n  min-height: 5rem;\n  font-family: var(--chat-font-family);\n}\n.input-form-overlay__freeform-input:focus {\n  outline: none;\n  border-color: var(--chat-primary);\n  box-shadow: 0 0 0 2px var(--chat-primary-subtle);\n}\n');
+
+// lib/chat/components/InputFormOverlay.tsx
+import { useState as useState3 } from "react";
+
+// lib/chat/components/input-fields/CheckboxField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CheckboxField({ field, value, onChange }) {
+  const { name: name21, label } = field;
+  return /* @__PURE__ */ jsx("div", { className: "input-field input-field--checkbox", children: /* @__PURE__ */ jsxs("label", { className: "input-field__checkbox-wrapper", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        name: name21,
+        checked: value ?? false,
+        onChange: (e) => onChange(e.target.checked),
+        className: "input-field__checkbox"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "input-field__checkbox-label", children: label })
+  ] }) });
+}
+
+// lib/chat/components/input-fields/ChoicesField.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChoicesField({ field, value, onChange }) {
+  const { name: name21, label, options, multiSelect, required: required2 } = field;
+  if (multiSelect) {
+    const selectedValues = Array.isArray(value) ? value : value ? [value] : [];
+    const handleCheckboxChange = (optionValue, checked) => {
+      if (checked) {
+        onChange([...selectedValues, optionValue]);
+      } else {
+        onChange(selectedValues.filter((v) => v !== optionValue));
+      }
+    };
+    return /* @__PURE__ */ jsxs2("div", { className: "input-field input-field--choices", children: [
+      /* @__PURE__ */ jsxs2("label", { className: "input-field__label", children: [
+        label,
+        required2 && /* @__PURE__ */ jsx2("span", { className: "input-field__required", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "input-field__options input-field__options--checkbox", children: options.map((option) => /* @__PURE__ */ jsxs2("label", { className: "input-field__option", children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "checkbox",
+            name: name21,
+            value: option.value,
+            checked: selectedValues.includes(option.value),
+            onChange: (e) => handleCheckboxChange(option.value, e.target.checked),
+            className: "input-field__checkbox"
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { className: "input-field__option-content", children: [
+          /* @__PURE__ */ jsx2("span", { className: "input-field__option-label", children: option.label }),
+          option.description && /* @__PURE__ */ jsx2("span", { className: "input-field__option-description", children: option.description })
+        ] })
+      ] }, option.value)) })
+    ] });
+  }
+  const selectedValue = Array.isArray(value) ? value[0] : value;
+  return /* @__PURE__ */ jsxs2("div", { className: "input-field input-field--choices", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "input-field__label", children: [
+      label,
+      required2 && /* @__PURE__ */ jsx2("span", { className: "input-field__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "input-field__options input-field__options--radio", children: options.map((option) => /* @__PURE__ */ jsxs2("label", { className: "input-field__option", children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "radio",
+          name: name21,
+          value: option.value,
+          checked: selectedValue === option.value,
+          onChange: () => onChange(option.value),
+          className: "input-field__radio"
+        }
+      ),
+      /* @__PURE__ */ jsxs2("span", { className: "input-field__option-content", children: [
+        /* @__PURE__ */ jsx2("span", { className: "input-field__option-label", children: option.label }),
+        option.description && /* @__PURE__ */ jsx2("span", { className: "input-field__option-description", children: option.description })
+      ] })
+    ] }, option.value)) })
+  ] });
+}
+
+// lib/chat/components/input-fields/DateField.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function DateField({ field, value, onChange }) {
+  const { label, required: required2 } = field;
+  return /* @__PURE__ */ jsxs3("div", { className: "input-field input-field--date", children: [
+    /* @__PURE__ */ jsxs3("label", { className: "input-field__label", children: [
+      label,
+      required2 && /* @__PURE__ */ jsx3("span", { className: "input-field__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "date",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value),
+        className: "input-field__input"
+      }
+    )
+  ] });
+}
+
+// lib/chat/components/input-fields/NumberField.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function NumberField({ field, value, onChange }) {
+  const { label, min, max, required: required2 } = field;
+  const handleChange = (e) => {
+    const val = e.target.value;
+    if (val === "") {
+      onChange(void 0);
+    } else {
+      const num = parseFloat(val);
+      if (!isNaN(num)) {
+        onChange(num);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "input-field input-field--number", children: [
+    /* @__PURE__ */ jsxs4("label", { className: "input-field__label", children: [
+      label,
+      required2 && /* @__PURE__ */ jsx4("span", { className: "input-field__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      "input",
+      {
+        type: "number",
+        value: value ?? "",
+        onChange: handleChange,
+        min,
+        max,
+        className: "input-field__input"
+      }
+    )
+  ] });
+}
+
+// lib/chat/components/input-fields/TextField.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function TextField({ field, value, onChange }) {
+  const { label, placeholder, multiline, required: required2 } = field;
+  if (multiline) {
+    return /* @__PURE__ */ jsxs5("div", { className: "input-field input-field--text", children: [
+      /* @__PURE__ */ jsxs5("label", { className: "input-field__label", children: [
+        label,
+        required2 && /* @__PURE__ */ jsx5("span", { className: "input-field__required", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx5(
+        "textarea",
+        {
+          value: value ?? "",
+          onChange: (e) => onChange(e.target.value),
+          placeholder,
+          className: "input-field__textarea",
+          rows: 4
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "input-field input-field--text", children: [
+    /* @__PURE__ */ jsxs5("label", { className: "input-field__label", children: [
+      label,
+      required2 && /* @__PURE__ */ jsx5("span", { className: "input-field__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        type: "text",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        className: "input-field__input"
+      }
+    )
+  ] });
+}
+
+// lib/chat/components/input-fields/FieldRenderer.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function FieldRenderer({ field, value, onChange }) {
+  switch (field.type) {
+    case "choices":
+      return /* @__PURE__ */ jsx6(
+        ChoicesField,
+        {
+          field,
+          value,
+          onChange
+        }
+      );
+    case "text":
+      return /* @__PURE__ */ jsx6(
+        TextField,
+        {
+          field,
+          value,
+          onChange
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx6(
+        NumberField,
+        {
+          field,
+          value,
+          onChange
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ jsx6(
+        CheckboxField,
+        {
+          field,
+          value,
+          onChange
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ jsx6(
+        DateField,
+        {
+          field,
+          value,
+          onChange
+        }
+      );
+    default:
+      const _exhaustive = field;
+      return null;
+  }
+}
+
+// lib/chat/components/InputFormOverlay.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function InputFormOverlay({ args, onComplete }) {
+  const {
+    title,
+    description,
+    fields,
+    submitLabel = "Submit",
+    cancelLabel = "Cancel",
+    allowFreeformResponse = true
+  } = args;
+  const [values, setValues] = useState3(() => {
+    const initial = {};
+    for (const field of fields) {
+      if (field.defaultValue !== void 0) {
+        initial[field.name] = field.defaultValue;
+      }
+    }
+    return initial;
+  });
+  const [freeformText, setFreeformText] = useState3("");
+  const [showFreeform, setShowFreeform] = useState3(false);
+  const handleFieldChange = (name21, value) => {
+    setValues((prev) => ({ ...prev, [name21]: value }));
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onComplete({ values });
+  };
+  const handleCancel = () => {
+    onComplete({ cancelled: true });
+  };
+  const handleFreeformSubmit = () => {
+    if (freeformText.trim()) {
+      onComplete({ freeformResponse: freeformText.trim() });
+    }
+  };
+  const isFormValid = fields.every((field) => {
+    if (!("required" in field) || !field.required) return true;
+    const value = values[field.name];
+    if (value === void 0 || value === null || value === "") return false;
+    if (Array.isArray(value) && value.length === 0) return false;
+    return true;
+  });
+  return /* @__PURE__ */ jsx7("div", { className: "input-form-overlay", children: /* @__PURE__ */ jsx7("div", { className: "input-form-overlay__content", children: !showFreeform ? /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "input-form-overlay__form", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "input-form-overlay__scrollable", children: [
+      title && /* @__PURE__ */ jsx7("h3", { className: "input-form-overlay__title", children: title }),
+      description && /* @__PURE__ */ jsx7("p", { className: "input-form-overlay__description", children: description }),
+      /* @__PURE__ */ jsx7("div", { className: "input-form-overlay__fields", children: fields.map((field) => /* @__PURE__ */ jsx7(
+        FieldRenderer,
+        {
+          field,
+          value: values[field.name],
+          onChange: (v) => handleFieldChange(field.name, v)
+        },
+        field.name
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "input-form-overlay__footer", children: /* @__PURE__ */ jsxs6("div", { className: "input-form-overlay__actions", children: [
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "submit",
+          disabled: !isFormValid,
+          className: "input-form-overlay__button input-form-overlay__button--primary",
+          children: submitLabel
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          onClick: handleCancel,
+          className: "input-form-overlay__button input-form-overlay__button--secondary",
+          children: cancelLabel
+        }
+      ),
+      allowFreeformResponse && /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: "input-form-overlay__freeform-toggle",
+          onClick: () => setShowFreeform(true),
+          children: "Or type a response instead..."
+        }
+      )
+    ] }) })
+  ] }) : /* @__PURE__ */ jsxs6("div", { className: "input-form-overlay__freeform", children: [
+    /* @__PURE__ */ jsx7("div", { className: "input-form-overlay__freeform-body", children: /* @__PURE__ */ jsx7(
+      "textarea",
+      {
+        value: freeformText,
+        onChange: (e) => setFreeformText(e.target.value),
+        placeholder: "Type your response...",
+        className: "input-form-overlay__freeform-input",
+        autoFocus: true,
+        rows: 4
+      }
+    ) }),
+    /* @__PURE__ */ jsx7("div", { className: "input-form-overlay__footer", children: /* @__PURE__ */ jsxs6("div", { className: "input-form-overlay__actions", children: [
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          onClick: handleFreeformSubmit,
+          disabled: !freeformText.trim(),
+          className: "input-form-overlay__button input-form-overlay__button--primary",
+          children: "Send"
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowFreeform(false),
+          className: "input-form-overlay__button input-form-overlay__button--secondary",
+          children: "Back to form"
+        }
+      )
+    ] }) })
+  ] }) }) });
+}
+
 // lib/chat/components/SpeechToTextButton.tsx
 import { Mic, MicOff } from "lucide-react";
 import {
   useCallback as useCallback2,
   useEffect as useEffect2,
   useRef as useRef2,
-  useState as useState3
+  useState as useState4
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var getSpeechRecognitionCtor = () => {
   if (typeof window === "undefined") return null;
   const win = window;
@@ -21742,11 +22268,11 @@ function SpeechToTextButton({
   disabled,
   className
 }) {
-  const [isListening, setIsListening] = useState3(false);
-  const [isSupported, setIsSupported] = useState3(false);
-  const [countdown, setCountdown] = useState3(0);
+  const [isListening, setIsListening] = useState4(false);
+  const [isSupported, setIsSupported] = useState4(false);
+  const [countdown, setCountdown] = useState4(0);
   const recognitionRef = useRef2(null);
-  const [countdownActive, setCountdownActive] = useState3(false);
+  const [countdownActive, setCountdownActive] = useState4(false);
   const silenceTimer = useRef2(null);
   const finalTimer = useRef2(null);
   const finalTextRef = useRef2("");
@@ -21956,7 +22482,7 @@ function SpeechToTextButton({
   if (!isSupported) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs7(
     "button",
     {
       type: "button",
@@ -21970,8 +22496,8 @@ function SpeechToTextButton({
       "aria-pressed": isListening,
       "aria-label": "Toggle microphone",
       children: [
-        isListening ? /* @__PURE__ */ jsx(Mic, { className: "chat-widget__mic-icon" }) : /* @__PURE__ */ jsx(MicOff, { className: "chat-widget__mic-icon" }),
-        finalDelay > 0 && isListening && countdownActive && /* @__PURE__ */ jsx("span", { className: "chat-widget__mic-bar", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        isListening ? /* @__PURE__ */ jsx8(Mic, { className: "chat-widget__mic-icon" }) : /* @__PURE__ */ jsx8(MicOff, { className: "chat-widget__mic-icon" }),
+        finalDelay > 0 && isListening && countdownActive && /* @__PURE__ */ jsx8("span", { className: "chat-widget__mic-bar", "aria-hidden": "true", children: /* @__PURE__ */ jsx8(
           "span",
           {
             className: "chat-widget__mic-bar-fill",
@@ -21983,16 +22509,114 @@ function SpeechToTextButton({
   );
 }
 
+// lib/chat/components/ToolApprovalOverlay.css
+styleInject(".tool-approval-overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  background-color: var(--chat-overlay-bg);\n}\n@keyframes slideUp {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n.tool-approval-overlay__content {\n  animation: slideUp 0.2s ease-out;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--chat-background);\n  border-top: 1px solid var(--chat-border);\n  border-radius: var(--chat-radius) var(--chat-radius) 0 0;\n  box-shadow: var(--chat-shadow-sm);\n  max-height: 80%;\n  font-family: var(--chat-font-family);\n  transition: max-height 0.2s ease-out;\n}\n.tool-approval-overlay__content--loading {\n  max-height: 160px;\n}\n.tool-approval-overlay__scrollable {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n  padding: 1rem 1.25rem;\n}\n.tool-approval-overlay__title {\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--chat-assistant-text);\n  margin: 0 0 0.375rem 0;\n}\n.tool-approval-overlay__description {\n  font-size: 0.8125rem;\n  color: var(--chat-input-placeholder);\n  margin: 0 0 1rem 0;\n  line-height: 1.4;\n}\n.tool-approval-overlay__tool-name {\n  background-color: var(--chat-border);\n  padding: 0.125rem 0.375rem;\n  border-radius: 0.25rem;\n  font-size: 0.8125rem;\n}\n.tool-approval-overlay__args {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.tool-approval-overlay__arg {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.tool-approval-overlay__arg-label {\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: var(--chat-input-placeholder);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n.tool-approval-overlay__arg-value {\n  font-size: 0.875rem;\n  color: var(--chat-assistant-text);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.tool-approval-overlay__no-args {\n  font-size: 0.8125rem;\n  color: var(--chat-input-placeholder);\n  font-style: italic;\n}\n.tool-approval-overlay__footer {\n  flex-shrink: 0;\n  padding: 0.5rem 1.25rem;\n  border-top: 1px solid var(--chat-border);\n}\n.tool-approval-overlay__actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  justify-content: flex-start;\n}\n.tool-approval-overlay__button {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  border-radius: calc(var(--chat-radius) * 0.5);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  border: none;\n}\n.tool-approval-overlay__button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.tool-approval-overlay__button--primary {\n  background-color: var(--chat-primary);\n  color: var(--chat-primary-text);\n}\n.tool-approval-overlay__button--primary:hover:not(:disabled) {\n  background-color: var(--chat-primary-hover);\n}\n.tool-approval-overlay__button--secondary {\n  background-color: var(--chat-border);\n  color: var(--chat-assistant-text);\n}\n.tool-approval-overlay__button--secondary:hover:not(:disabled) {\n  opacity: 0.8;\n}\n.tool-approval-overlay__freeform-toggle {\n  padding: 0.5rem 0;\n  font-size: 0.75rem;\n  color: var(--chat-input-placeholder);\n  background: none;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease-in-out;\n  white-space: nowrap;\n}\n.tool-approval-overlay__freeform-toggle:hover {\n  color: var(--chat-primary);\n  text-decoration: underline;\n}\n.tool-approval-overlay__freeform {\n  display: flex;\n  flex-direction: column;\n}\n.tool-approval-overlay__freeform-body {\n  padding: 1rem 1.25rem;\n}\n.tool-approval-overlay__freeform-input {\n  width: 100%;\n  padding: 0.75rem;\n  font-size: 0.875rem;\n  font-family: var(--chat-font-family);\n  color: var(--chat-input-text);\n  background-color: var(--chat-input-bg);\n  border: 1px solid var(--chat-border);\n  border-radius: calc(var(--chat-radius) * 0.5);\n  resize: vertical;\n  min-height: 80px;\n  box-sizing: border-box;\n}\n.tool-approval-overlay__freeform-input:focus {\n  outline: none;\n  border-color: var(--chat-primary);\n  box-shadow: 0 0 0 2px var(--chat-primary-subtle);\n}\n.tool-approval-overlay__freeform-input::-moz-placeholder {\n  color: var(--chat-input-placeholder);\n}\n.tool-approval-overlay__freeform-input::placeholder {\n  color: var(--chat-input-placeholder);\n}\n.tool-approval-overlay__loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 160px;\n}\n.tool-approval-overlay__loading-spinner {\n  width: 24px;\n  height: 24px;\n  border: 2px solid var(--chat-border);\n  border-top-color: var(--chat-primary);\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
+
+// lib/chat/components/ToolApprovalOverlay.tsx
+import { useState as useState5 } from "react";
+import { Fragment, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function ToolApprovalOverlay({ approval, config: config2, configLoading, onApprove, onDeny }) {
+  const { toolName, args } = approval;
+  const [showFreeform, setShowFreeform] = useState5(false);
+  const [freeformText, setFreeformText] = useState5("");
+  const handleApprove = () => {
+    onApprove();
+  };
+  const handleDeny = () => {
+    onDeny();
+  };
+  const handleFreeformSubmit = () => {
+    if (freeformText.trim()) {
+      onDeny(freeformText.trim());
+    }
+  };
+  const entries = Object.entries(args);
+  const title = config2?.message || `Approve ${toolName} execution?`;
+  const approveLabel = config2?.approveLabel || "Approve";
+  const denyLabel = config2?.denyLabel || "Deny";
+  return /* @__PURE__ */ jsx9("div", { className: "tool-approval-overlay", children: /* @__PURE__ */ jsx9("div", { className: `tool-approval-overlay__content ${configLoading ? "tool-approval-overlay__content--loading" : ""}`, children: configLoading ? /* @__PURE__ */ jsx9("div", { className: "tool-approval-overlay__loading", children: /* @__PURE__ */ jsx9("div", { className: "tool-approval-overlay__loading-spinner" }) }) : !showFreeform ? /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsxs8("div", { className: "tool-approval-overlay__scrollable", children: [
+      /* @__PURE__ */ jsx9("h3", { className: "tool-approval-overlay__title", children: title }),
+      entries.length > 0 ? /* @__PURE__ */ jsx9("div", { className: "tool-approval-overlay__args", children: entries.map(([key, value]) => /* @__PURE__ */ jsxs8("div", { className: "tool-approval-overlay__arg", children: [
+        /* @__PURE__ */ jsx9("label", { className: "tool-approval-overlay__arg-label", children: key }),
+        /* @__PURE__ */ jsx9("div", { className: "tool-approval-overlay__arg-value", children: typeof value === "string" ? value : JSON.stringify(value, null, 2) })
+      ] }, key)) }) : /* @__PURE__ */ jsx9("p", { className: "tool-approval-overlay__no-args", children: "No inputs provided." })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "tool-approval-overlay__footer", children: /* @__PURE__ */ jsxs8("div", { className: "tool-approval-overlay__actions", children: [
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          onClick: handleApprove,
+          className: "tool-approval-overlay__button tool-approval-overlay__button--primary",
+          children: approveLabel
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          onClick: handleDeny,
+          className: "tool-approval-overlay__button tool-approval-overlay__button--secondary",
+          children: denyLabel
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowFreeform(true),
+          className: "tool-approval-overlay__freeform-toggle",
+          children: "Or type a response instead..."
+        }
+      )
+    ] }) })
+  ] }) : /* @__PURE__ */ jsxs8("div", { className: "tool-approval-overlay__freeform", children: [
+    /* @__PURE__ */ jsx9("div", { className: "tool-approval-overlay__freeform-body", children: /* @__PURE__ */ jsx9(
+      "textarea",
+      {
+        value: freeformText,
+        onChange: (e) => setFreeformText(e.target.value),
+        placeholder: "Tell the assistant what's wrong or what you'd like instead...",
+        className: "tool-approval-overlay__freeform-input",
+        autoFocus: true,
+        rows: 4
+      }
+    ) }),
+    /* @__PURE__ */ jsx9("div", { className: "tool-approval-overlay__footer", children: /* @__PURE__ */ jsxs8("div", { className: "tool-approval-overlay__actions", children: [
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          onClick: handleFreeformSubmit,
+          disabled: !freeformText.trim(),
+          className: "tool-approval-overlay__button tool-approval-overlay__button--primary",
+          children: "Send"
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowFreeform(false),
+          className: "tool-approval-overlay__button tool-approval-overlay__button--secondary",
+          children: "Back"
+        }
+      )
+    ] }) })
+  ] }) }) });
+}
+
 // lib/chat/display-modes/BriefDisplayMode.tsx
-import React2, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import React2, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState6 } from "react";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function CollapsedDisplay({
   collapsed,
   renderPart,
   itemKey
 }) {
-  const [isExpanded, setIsExpanded] = useState4(false);
-  const [isAnimating, setIsAnimating] = useState4(false);
+  const [isExpanded, setIsExpanded] = useState6(false);
+  const [isAnimating, setIsAnimating] = useState6(false);
   const contentRef = useRef3(null);
   const partsCountRef = useRef3(collapsed.parts.length);
   useEffect3(() => {
@@ -22010,19 +22634,19 @@ function CollapsedDisplay({
     "chat-widget__collapsed",
     isAnimating ? "chat-widget__collapsed--animating" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs2("div", { className: collapsedClasses, children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs9("div", { className: collapsedClasses, children: [
+    /* @__PURE__ */ jsx10(
       "div",
       {
         className: `chat-widget__collapsed-content ${isExpanded ? "chat-widget__collapsed-content--expanded" : ""}`,
-        children: /* @__PURE__ */ jsx2("div", { ref: contentRef, className: "chat-widget__collapsed-content-inner", children: collapsed.parts.map((part, idx) => /* @__PURE__ */ jsx2("div", { children: renderPart(part, `${itemKey}-expanded-${idx}`) }, `${itemKey}-expanded-${idx}`)) })
+        children: /* @__PURE__ */ jsx10("div", { ref: contentRef, className: "chat-widget__collapsed-content-inner", children: collapsed.parts.map((part, idx) => /* @__PURE__ */ jsx10("div", { children: renderPart(part, `${itemKey}-expanded-${idx}`) }, `${itemKey}-expanded-${idx}`)) })
       }
     ),
-    /* @__PURE__ */ jsxs2("div", { className: `chat-widget__collapsed-preview ${isExpanded ? "chat-widget__collapsed-preview--hidden" : ""}`, children: [
+    /* @__PURE__ */ jsxs9("div", { className: `chat-widget__collapsed-preview ${isExpanded ? "chat-widget__collapsed-preview--hidden" : ""}`, children: [
       renderPart(collapsed.lastPart, `${itemKey}-preview`),
-      /* @__PURE__ */ jsx2("div", { className: "chat-widget__collapsed-gradient" })
+      /* @__PURE__ */ jsx10("div", { className: "chat-widget__collapsed-gradient" })
     ] }),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -22117,9 +22741,9 @@ function BriefDisplayMode({
     () => computeCollapsedView(sections, messageId),
     [sections, messageId]
   );
-  return /* @__PURE__ */ jsx2(Fragment, { children: viewItems.map((viewItem) => {
+  return /* @__PURE__ */ jsx10(Fragment2, { children: viewItems.map((viewItem) => {
     if (viewItem.type === "collapsed") {
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx10(
         CollapsedDisplay,
         {
           collapsed: viewItem.collapsed,
@@ -22130,11 +22754,11 @@ function BriefDisplayMode({
       );
     }
     if (viewItem.type === "parts") {
-      return /* @__PURE__ */ jsx2(React2.Fragment, { children: viewItem.parts.map((part, idx) => /* @__PURE__ */ jsx2("div", { children: renderPart(part, `${viewItem.key}-part-${idx}`) }, `${viewItem.key}-part-${idx}`)) }, viewItem.key);
+      return /* @__PURE__ */ jsx10(React2.Fragment, { children: viewItem.parts.map((part, idx) => /* @__PURE__ */ jsx10("div", { children: renderPart(part, `${viewItem.key}-part-${idx}`) }, `${viewItem.key}-part-${idx}`)) }, viewItem.key);
     }
     if (viewItem.type === "group") {
-      const children = /* @__PURE__ */ jsxs2(Fragment, { children: [
-        viewItem.collapsedParts && /* @__PURE__ */ jsx2(
+      const children = /* @__PURE__ */ jsxs9(Fragment2, { children: [
+        viewItem.collapsedParts && /* @__PURE__ */ jsx10(
           CollapsedDisplay,
           {
             collapsed: viewItem.collapsedParts,
@@ -22142,7 +22766,7 @@ function BriefDisplayMode({
             itemKey: `${viewItem.key}-collapsed`
           }
         ),
-        viewItem.currentParts.map((part, idx) => /* @__PURE__ */ jsx2("div", { children: renderPart(part, `${viewItem.key}-current-${idx}`) }, `${viewItem.key}-current-${idx}`))
+        viewItem.currentParts.map((part, idx) => /* @__PURE__ */ jsx10("div", { children: renderPart(part, `${viewItem.key}-current-${idx}`) }, `${viewItem.key}-current-${idx}`))
       ] });
       return renderGroup(viewItem.groupName, viewItem.key, children);
     }
@@ -22152,22 +22776,22 @@ function BriefDisplayMode({
 
 // lib/chat/display-modes/FullDisplayMode.tsx
 import React3 from "react";
-import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11 } from "react/jsx-runtime";
 function FullDisplayMode({
   sections,
   messageId,
   renderPart,
   renderGroup
 }) {
-  return /* @__PURE__ */ jsx3(Fragment2, { children: sections.map((section, sectionIdx) => {
+  return /* @__PURE__ */ jsx11(Fragment3, { children: sections.map((section, sectionIdx) => {
     const sectionKey = `${messageId}-section-${sectionIdx}`;
     if (section.type === "step") {
-      return /* @__PURE__ */ jsx3(React3.Fragment, { children: section.parts.map((part, partIdx) => /* @__PURE__ */ jsx3("div", { children: renderPart(part, `${sectionKey}-part-${partIdx}`) }, `${sectionKey}-part-${partIdx}`)) }, sectionKey);
+      return /* @__PURE__ */ jsx11(React3.Fragment, { children: section.parts.map((part, partIdx) => /* @__PURE__ */ jsx11("div", { children: renderPart(part, `${sectionKey}-part-${partIdx}`) }, `${sectionKey}-part-${partIdx}`)) }, sectionKey);
     }
     if (section.type === "group") {
       const groupKey = `${messageId}-group-${section.groupName}`;
-      const children = section.parts.map((part, partIdx) => /* @__PURE__ */ jsx3("div", { children: renderPart(part, `${groupKey}-part-${partIdx}`) }, `${groupKey}-part-${partIdx}`));
-      return renderGroup(section.groupName, groupKey, /* @__PURE__ */ jsx3(Fragment2, { children }));
+      const children = section.parts.map((part, partIdx) => /* @__PURE__ */ jsx11("div", { children: renderPart(part, `${groupKey}-part-${partIdx}`) }, `${groupKey}-part-${partIdx}`));
+      return renderGroup(section.groupName, groupKey, /* @__PURE__ */ jsx11(Fragment3, { children }));
     }
     return null;
   }) });
@@ -25637,12 +26261,12 @@ function remarkGfm(options) {
 }
 
 // lib/chat/components/MessageFeedback.css
-styleInject(".chat-widget__feedback {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  margin-top: 0.35rem;\n}\n.chat-widget__feedback-button {\n  border: none;\n  background: transparent;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  color: #9ca3af;\n  cursor: pointer;\n  border-radius: 0.35rem;\n  transition: all 0.15s ease;\n}\n.chat-widget__feedback-button:hover:not(:disabled) {\n  background: rgba(0, 0, 0, 0.05);\n  color: #6b7280;\n}\n.chat-widget__feedback-button:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n.chat-widget__feedback-button--positive.chat-widget__feedback-button--selected {\n  color: #22c55e;\n  background: rgba(34, 197, 94, 0.1);\n}\n.chat-widget__feedback-button--negative.chat-widget__feedback-button--selected {\n  color: #ef4444;\n  background: rgba(239, 68, 68, 0.1);\n}\n.chat-widget__feedback-button--comment.chat-widget__feedback-button--selected {\n  background: rgba(0, 0, 0, 0.05);\n}\n.chat-widget__feedback-button--comment.chat-widget__feedback-button--has-content {\n  color: #3b82f6;\n}\n.chat-widget__feedback-icon {\n  width: 1rem;\n  height: 1rem;\n}\n.chat-widget__feedback-comment-section {\n  margin-top: 0.75rem;\n  background: var(--chat-background, #ffffff);\n  border: 1px solid var(--chat-border, #e5e7eb);\n  border-radius: 0.5rem;\n  padding: 0.75rem;\n  width: 100%;\n  max-width: 400px;\n}\n.chat-widget__feedback-comment-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.5rem;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  color: var(--chat-assistant-text, #111827);\n}\n.chat-widget__feedback-comment-required {\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: #ef4444;\n  background: rgba(239, 68, 68, 0.1);\n  padding: 0.125rem 0.375rem;\n  border-radius: 0.25rem;\n}\n.chat-widget__feedback-comment-body {\n  display: flex;\n  gap: 0.5rem;\n  align-items: flex-start;\n}\n.chat-widget__feedback-textarea {\n  flex: 1;\n  min-height: 60px;\n  padding: 0.625rem;\n  border: 1px solid var(--chat-border, #e5e7eb);\n  border-radius: 0.35rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  resize: vertical;\n  color: var(--chat-input-text, #111827);\n  background: var(--chat-input-bg, #ffffff);\n  line-height: 1.5;\n}\n.chat-widget__feedback-textarea:focus {\n  outline: none;\n  border-color: var(--chat-primary, #3b82f6);\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);\n}\n.chat-widget__feedback-textarea::-moz-placeholder {\n  color: var(--chat-input-placeholder, #6b7280);\n}\n.chat-widget__feedback-textarea::placeholder {\n  color: var(--chat-input-placeholder, #6b7280);\n}\n.chat-widget__feedback-actions {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n}\n.chat-widget__feedback-cancel,\n.chat-widget__feedback-submit {\n  padding: 0.35rem 0.75rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  border-radius: 0.3rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.chat-widget__feedback-cancel {\n  background: transparent;\n  border: none;\n  color: #9ca3af;\n  padding: 0.25rem 0.5rem;\n}\n.chat-widget__feedback-cancel:hover {\n  color: #6b7280;\n}\n.chat-widget__feedback-submit {\n  background: var(--chat-primary, #3b82f6);\n  border: none;\n  color: var(--chat-primary-text, #ffffff);\n}\n.chat-widget__feedback-submit:hover:not(:disabled) {\n  background: var(--chat-primary-hover, #2563eb);\n}\n.chat-widget__feedback-submit:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.chat-widget__feedback-wrapper {\n  position: relative;\n}\n");
+styleInject(".chat-widget__feedback {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  margin-top: 0.35rem;\n}\n.chat-widget__feedback-button {\n  border: none;\n  background: transparent;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  color: var(--chat-text-disabled);\n  cursor: pointer;\n  border-radius: 0.35rem;\n  transition: all 0.15s ease;\n}\n.chat-widget__feedback-button:hover:not(:disabled) {\n  background: var(--chat-primary-subtle);\n  color: var(--chat-text-muted);\n}\n.chat-widget__feedback-button:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n.chat-widget__feedback-button--positive.chat-widget__feedback-button--selected {\n  color: var(--chat-success);\n  background: var(--chat-success-bg);\n}\n.chat-widget__feedback-button--negative.chat-widget__feedback-button--selected {\n  color: var(--chat-error);\n  background: var(--chat-error-bg);\n}\n.chat-widget__feedback-button--comment.chat-widget__feedback-button--selected {\n  background: var(--chat-primary-subtle);\n}\n.chat-widget__feedback-button--comment.chat-widget__feedback-button--has-content {\n  color: var(--chat-primary);\n}\n.chat-widget__feedback-icon {\n  width: 1rem;\n  height: 1rem;\n}\n.chat-widget__feedback-comment-section {\n  margin-top: 0.75rem;\n  background: var(--chat-background);\n  border: 1px solid var(--chat-border);\n  border-radius: 0.5rem;\n  padding: 0.75rem;\n  width: 100%;\n  max-width: 400px;\n}\n.chat-widget__feedback-comment-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.5rem;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  color: var(--chat-text);\n}\n.chat-widget__feedback-comment-required {\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: var(--chat-error);\n  background: var(--chat-error-bg);\n  padding: 0.125rem 0.375rem;\n  border-radius: 0.25rem;\n}\n.chat-widget__feedback-comment-body {\n  display: flex;\n  gap: 0.5rem;\n  align-items: flex-start;\n}\n.chat-widget__feedback-textarea {\n  flex: 1;\n  min-height: 60px;\n  padding: 0.625rem;\n  border: 1px solid var(--chat-border);\n  border-radius: 0.35rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  resize: vertical;\n  color: var(--chat-input-text);\n  background: var(--chat-input-bg);\n  line-height: 1.5;\n}\n.chat-widget__feedback-textarea:focus {\n  outline: none;\n  border-color: var(--chat-primary);\n  box-shadow: 0 0 0 2px var(--chat-primary-subtle);\n}\n.chat-widget__feedback-textarea::-moz-placeholder {\n  color: var(--chat-input-placeholder);\n}\n.chat-widget__feedback-textarea::placeholder {\n  color: var(--chat-input-placeholder);\n}\n.chat-widget__feedback-actions {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n}\n.chat-widget__feedback-cancel,\n.chat-widget__feedback-submit {\n  padding: 0.35rem 0.75rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  border-radius: 0.3rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.chat-widget__feedback-cancel {\n  background: transparent;\n  border: none;\n  color: var(--chat-text-disabled);\n  padding: 0.25rem 0.5rem;\n}\n.chat-widget__feedback-cancel:hover {\n  color: var(--chat-text-muted);\n}\n.chat-widget__feedback-submit {\n  background: var(--chat-primary);\n  border: none;\n  color: var(--chat-primary-text);\n}\n.chat-widget__feedback-submit:hover:not(:disabled) {\n  background: var(--chat-primary-hover);\n}\n.chat-widget__feedback-submit:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.chat-widget__feedback-wrapper {\n  position: relative;\n}\n");
 
 // lib/chat/components/MessageFeedback.tsx
 import { MessageSquare, MessageSquareText, ThumbsDown, ThumbsUp } from "lucide-react";
-import { useCallback as useCallback4, useEffect as useEffect4, useState as useState5 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useEffect as useEffect4, useState as useState7 } from "react";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var classNames = {
   wrapper: "chat-widget__feedback-wrapper",
   container: "chat-widget__feedback",
@@ -25670,11 +26294,11 @@ var MessageFeedback = ({
   requireCommentForNegative = false,
   onSubmit
 }) => {
-  const [savedRating, setSavedRating] = useState5(existingRating ?? null);
-  const [savedComment, setSavedComment] = useState5(existingComment ?? "");
-  const [pendingRating, setPendingRating] = useState5(null);
-  const [showCommentBox, setShowCommentBox] = useState5(false);
-  const [commentText, setCommentText] = useState5(existingComment ?? "");
+  const [savedRating, setSavedRating] = useState7(existingRating ?? null);
+  const [savedComment, setSavedComment] = useState7(existingComment ?? "");
+  const [pendingRating, setPendingRating] = useState7(null);
+  const [showCommentBox, setShowCommentBox] = useState7(false);
+  const [commentText, setCommentText] = useState7(existingComment ?? "");
   useEffect4(() => {
     if (existingRating) {
       setSavedRating(existingRating);
@@ -25759,9 +26383,9 @@ var MessageFeedback = ({
   const hasComment = savedComment.length > 0;
   const canSubmitComment = (!isCommentRequired || commentText.trim().length > 0) && (displayRating || commentText.trim().length > 0 || hasComment);
   const CommentIcon = hasComment ? MessageSquareText : MessageSquare;
-  return /* @__PURE__ */ jsxs3("div", { className: classNames.wrapper, children: [
-    /* @__PURE__ */ jsxs3("div", { className: classNames.container, children: [
-      /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs10("div", { className: classNames.wrapper, children: [
+    /* @__PURE__ */ jsxs10("div", { className: classNames.container, children: [
+      /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -25770,10 +26394,10 @@ var MessageFeedback = ({
           disabled: isSubmitting,
           title: "Good response",
           "aria-label": "Mark as good response",
-          children: /* @__PURE__ */ jsx4(ThumbsUp, { className: classNames.icon })
+          children: /* @__PURE__ */ jsx12(ThumbsUp, { className: classNames.icon })
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -25782,10 +26406,10 @@ var MessageFeedback = ({
           disabled: isSubmitting,
           title: "Could be improved",
           "aria-label": "Mark as could be improved",
-          children: /* @__PURE__ */ jsx4(ThumbsDown, { className: classNames.icon })
+          children: /* @__PURE__ */ jsx12(ThumbsDown, { className: classNames.icon })
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -25794,14 +26418,14 @@ var MessageFeedback = ({
           disabled: isSubmitting,
           title: "Add comment",
           "aria-label": "Add comment",
-          children: /* @__PURE__ */ jsx4(CommentIcon, { className: classNames.icon })
+          children: /* @__PURE__ */ jsx12(CommentIcon, { className: classNames.icon })
         }
       )
     ] }),
-    showCommentBox && /* @__PURE__ */ jsxs3("div", { className: classNames.commentSection, children: [
-      /* @__PURE__ */ jsx4("div", { className: classNames.commentHeader, children: isCommentRequired && /* @__PURE__ */ jsx4("span", { className: classNames.commentRequired, children: "Required" }) }),
-      /* @__PURE__ */ jsxs3("div", { className: classNames.commentBody, children: [
-        /* @__PURE__ */ jsx4(
+    showCommentBox && /* @__PURE__ */ jsxs10("div", { className: classNames.commentSection, children: [
+      /* @__PURE__ */ jsx12("div", { className: classNames.commentHeader, children: isCommentRequired && /* @__PURE__ */ jsx12("span", { className: classNames.commentRequired, children: "Required" }) }),
+      /* @__PURE__ */ jsxs10("div", { className: classNames.commentBody, children: [
+        /* @__PURE__ */ jsx12(
           "textarea",
           {
             className: classNames.textarea,
@@ -25811,8 +26435,8 @@ var MessageFeedback = ({
             rows: 3
           }
         ),
-        /* @__PURE__ */ jsxs3("div", { className: classNames.actions, children: [
-          /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs10("div", { className: classNames.actions, children: [
+          /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
@@ -25822,7 +26446,7 @@ var MessageFeedback = ({
               children: "Save"
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
@@ -25838,19 +26462,19 @@ var MessageFeedback = ({
 };
 
 // lib/chat/components/TagGroupDisplay.css
-styleInject('.tag-group {\n  margin: 6px 0;\n}\n.tag-group-header {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: none;\n  border: none;\n  padding: 2px 6px 2px 2px;\n  cursor: pointer;\n  font-size: 13px;\n  color: #666;\n  border-radius: 4px;\n  transition: background-color 0.15s ease;\n}\n.tag-group-header:hover {\n  background: #f5f5f5;\n}\n.tag-group-chevron {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  transition: transform 0.15s ease;\n  color: #999;\n}\n.tag-group-chevron--expanded {\n  transform: rotate(90deg);\n}\n.tag-group-label {\n  font-weight: 500;\n  color: #555;\n}\n.tag-group-content {\n  margin-left: 7px;\n  padding-left: 12px;\n  border-left: 2px solid #e0e0e0;\n  margin-top: 4px;\n}\n.tag-group-item {\n  margin: 4px 0;\n  font-size: 13px;\n  color: #444;\n}\n.tag-group-item--text {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n}\n.tag-group-item--text::before {\n  content: "\\2022";\n  color: #999;\n  font-size: 14px;\n  line-height: 1.4;\n  flex-shrink: 0;\n}\n.tag-group-item .tool-call-item {\n  margin: 0;\n}\n.tag-group-item--widget {\n  display: block;\n  margin: 8px 0;\n}\n.tag-group-item .chat-widget__markdown {\n  margin: 0;\n}\n.tag-group-item .chat-widget__markdown p {\n  margin: 0;\n}\n');
+styleInject('.tag-group {\n  margin: 6px 0;\n}\n.tag-group-header {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: none;\n  border: none;\n  padding: 2px 6px 2px 2px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--chat-text-muted);\n  border-radius: 4px;\n  transition: background-color 0.15s ease;\n}\n.tag-group-header:hover {\n  background: var(--chat-background-secondary);\n}\n.tag-group-chevron {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  transition: transform 0.15s ease;\n  color: var(--chat-text-disabled);\n}\n.tag-group-chevron--expanded {\n  transform: rotate(90deg);\n}\n.tag-group-label {\n  font-weight: 500;\n  color: var(--chat-text-secondary);\n}\n.tag-group-content {\n  margin-left: 7px;\n  padding-left: 12px;\n  border-left: 2px solid var(--chat-border);\n  margin-top: 4px;\n}\n.tag-group-item {\n  margin: 4px 0;\n  font-size: 13px;\n  color: var(--chat-text-secondary);\n}\n.tag-group-item--text {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n}\n.tag-group-item--text::before {\n  content: "\\2022";\n  color: var(--chat-text-disabled);\n  font-size: 14px;\n  line-height: 1.4;\n  flex-shrink: 0;\n}\n.tag-group-item .tool-call-item {\n  margin: 0;\n}\n.tag-group-item--widget {\n  display: block;\n  margin: 8px 0;\n}\n.tag-group-item .chat-widget__markdown {\n  margin: 0;\n}\n.tag-group-item .chat-widget__markdown p {\n  margin: 0;\n}\n');
 
 // lib/chat/components/TagGroupDisplay.tsx
 import { ChevronRight } from "lucide-react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function TagGroupDisplay({
   tagId,
   isExpanded,
   onToggle,
   children
 }) {
-  return /* @__PURE__ */ jsxs4("div", { className: "tag-group", children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs11("div", { className: "tag-group", children: [
+    /* @__PURE__ */ jsxs11(
       "button",
       {
         className: "tag-group-header",
@@ -25858,33 +26482,33 @@ function TagGroupDisplay({
         "aria-expanded": isExpanded,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx13(
             ChevronRight,
             {
               className: `tag-group-chevron ${isExpanded ? "tag-group-chevron--expanded" : ""}`,
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsx5("span", { className: "tag-group-label", children: tagId })
+          /* @__PURE__ */ jsx13("span", { className: "tag-group-label", children: tagId })
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ jsx5("div", { className: "tag-group-content", role: "region", children })
+    isExpanded && /* @__PURE__ */ jsx13("div", { className: "tag-group-content", role: "region", children })
   ] });
 }
 
 // lib/chat/components/ToolCallDisplay.css
-styleInject(".tool-call-item {\n  font-size: 13px;\n  color: #666;\n  margin: 4px 0;\n}\n.tool-call-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n}\n.tool-call-spinner {\n  width: 12px;\n  height: 12px;\n  border: 2px solid #e0e0e0;\n  border-top-color: #666;\n  border-radius: 50%;\n  animation: tool-call-spin 0.8s linear infinite;\n  flex-shrink: 0;\n}\n@keyframes tool-call-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.tool-call-status-icon {\n  width: 12px;\n  height: 12px;\n  border: 2px solid #e0e0e0;\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tool-call-status-icon--error {\n  border-color: #dc2626;\n}\n.tool-call-status-icon__inner {\n  width: 8px;\n  height: 8px;\n}\n.tool-call-status-icon__inner--success {\n  color: #9ca3af;\n}\n.tool-call-status-icon__inner--error {\n  color: #dc2626;\n}\n.tool-call-label {\n  color: #888;\n}\n.tool-call-label code {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  font-size: 12px;\n  background: #f5f5f5;\n  padding: 2px 6px;\n  border-radius: 4px;\n  color: #555;\n}\n.tool-call-toggle {\n  font-size: 9px;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  color: #6b7280;\n  background: transparent;\n  border: 1px solid #d1d5db;\n  border-radius: 3px;\n  cursor: pointer;\n  padding: 2px 6px;\n  margin-left: 4px;\n  transition: all 0.15s ease;\n}\n.tool-call-toggle:hover {\n  color: #374151;\n  border-color: #9ca3af;\n  background: #f9fafb;\n}\n.tool-call-details {\n  margin-top: 8px;\n  margin-left: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.tool-call-section {\n  display: flex;\n  gap: 4px;\n}\n.tool-call-section-label {\n  flex-shrink: 0;\n  font-size: 10px;\n  font-weight: 600;\n  color: #6b7280;\n  width: 28px;\n  padding-top: 8px;\n  text-align: right;\n}\n.tool-call-section-content-wrapper {\n  flex: 1;\n  position: relative;\n  min-width: 0;\n}\n.tool-call-section-toggle {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  font-size: 9px;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  color: #6b7280;\n  background: rgba(255, 255, 255, 0.9);\n  border: 1px solid #d1d5db;\n  border-radius: 3px;\n  cursor: pointer;\n  padding: 2px 6px;\n  transition: all 0.15s ease;\n  opacity: 0;\n  z-index: 1;\n}\n.tool-call-section-content-wrapper:hover .tool-call-section-toggle {\n  opacity: 1;\n}\n.tool-call-section-toggle:hover {\n  color: #374151;\n  border-color: #9ca3af;\n  background: #f9fafb;\n}\n.tool-call-section-content {\n  padding: 8px 12px;\n  background: #f8f9fa;\n  border-radius: 6px;\n  border: 1px solid #e9ecef;\n  overflow-x: auto;\n}\n.tool-call-section-content.collapsed {\n  max-height: 2.4em;\n  overflow: hidden;\n  padding-top: 4px;\n  padding-bottom: 4px;\n}\n.tool-call-section-content.collapsed pre {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n  max-width: 100%;\n}\n.tool-call-section-content pre {\n  margin: 0;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  font-size: 11px;\n  color: #333;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.tool-call-error {\n  color: #dc2626;\n  font-weight: 600;\n  font-size: 9px;\n  letter-spacing: 0.5px;\n  margin-left: auto;\n}\n");
+styleInject(".tool-call-item {\n  font-size: 13px;\n  color: var(--chat-text-muted);\n  margin: 4px 0;\n}\n.tool-call-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n}\n.tool-call-spinner {\n  width: 12px;\n  height: 12px;\n  border: 2px solid var(--chat-border);\n  border-top-color: var(--chat-text-muted);\n  border-radius: 50%;\n  animation: tool-call-spin 0.8s linear infinite;\n  flex-shrink: 0;\n}\n@keyframes tool-call-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.tool-call-status-icon {\n  width: 12px;\n  height: 12px;\n  border: 2px solid var(--chat-border);\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tool-call-status-icon--error {\n  border-color: var(--chat-error);\n}\n.tool-call-status-icon__inner {\n  width: 8px;\n  height: 8px;\n}\n.tool-call-status-icon__inner--success {\n  color: var(--chat-text-disabled);\n}\n.tool-call-status-icon__inner--error {\n  color: var(--chat-error);\n}\n.tool-call-label {\n  color: var(--chat-text-muted);\n}\n.tool-call-label code {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  font-size: 12px;\n  background: var(--chat-background-secondary);\n  padding: 2px 6px;\n  border-radius: 4px;\n  color: var(--chat-text-secondary);\n}\n.tool-call-toggle {\n  font-size: 9px;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  color: var(--chat-text-muted);\n  background: transparent;\n  border: 1px solid var(--chat-border);\n  border-radius: 3px;\n  cursor: pointer;\n  padding: 2px 6px;\n  margin-left: 4px;\n  transition: all 0.15s ease;\n}\n.tool-call-toggle:hover {\n  color: var(--chat-text-secondary);\n  border-color: var(--chat-text-disabled);\n  background: var(--chat-background-secondary);\n}\n.tool-call-details {\n  margin-top: 8px;\n  margin-left: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.tool-call-section {\n  display: flex;\n  gap: 4px;\n}\n.tool-call-section-label {\n  flex-shrink: 0;\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--chat-text-muted);\n  width: 28px;\n  padding-top: 8px;\n  text-align: right;\n}\n.tool-call-section-content-wrapper {\n  flex: 1;\n  position: relative;\n  min-width: 0;\n}\n.tool-call-section-toggle {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  font-size: 9px;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  color: var(--chat-text-muted);\n  background: var(--chat-background);\n  border: 1px solid var(--chat-border);\n  border-radius: 3px;\n  cursor: pointer;\n  padding: 2px 6px;\n  transition: all 0.15s ease;\n  opacity: 0;\n  z-index: 1;\n}\n.tool-call-section-content-wrapper:hover .tool-call-section-toggle {\n  opacity: 1;\n}\n.tool-call-section-toggle:hover {\n  color: var(--chat-text-secondary);\n  border-color: var(--chat-text-disabled);\n  background: var(--chat-background-secondary);\n}\n.tool-call-section-content {\n  padding: 8px 12px;\n  background: var(--chat-background-secondary);\n  border-radius: 6px;\n  border: 1px solid var(--chat-border-light);\n  overflow-x: auto;\n}\n.tool-call-section-content.collapsed {\n  max-height: 2.4em;\n  overflow: hidden;\n  padding-top: 4px;\n  padding-bottom: 4px;\n}\n.tool-call-section-content.collapsed pre {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n  max-width: 100%;\n}\n.tool-call-section-content pre {\n  margin: 0;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  font-size: 11px;\n  color: var(--chat-text);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.tool-call-error {\n  color: var(--chat-error);\n  font-weight: 600;\n  font-size: 9px;\n  letter-spacing: 0.5px;\n  margin-left: auto;\n}\n");
 
 // lib/chat/components/ToolCallDisplay.tsx
-import { useState as useState6 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function CollapsibleSection({ label, content }) {
-  const [isCollapsed, setIsCollapsed] = useState6(false);
-  return /* @__PURE__ */ jsxs5("div", { className: "tool-call-section", children: [
-    /* @__PURE__ */ jsx6("div", { className: "tool-call-section-label", children: label }),
-    /* @__PURE__ */ jsxs5("div", { className: "tool-call-section-content-wrapper", children: [
-      /* @__PURE__ */ jsx6(
+  const [isCollapsed, setIsCollapsed] = useState8(false);
+  return /* @__PURE__ */ jsxs12("div", { className: "tool-call-section", children: [
+    /* @__PURE__ */ jsx14("div", { className: "tool-call-section-label", children: label }),
+    /* @__PURE__ */ jsxs12("div", { className: "tool-call-section-content-wrapper", children: [
+      /* @__PURE__ */ jsx14(
         "button",
         {
           className: "tool-call-section-toggle",
@@ -25893,40 +26517,42 @@ function CollapsibleSection({ label, content }) {
           children: isCollapsed ? "SHOW" : "HIDE"
         }
       ),
-      /* @__PURE__ */ jsx6("div", { className: `tool-call-section-content ${isCollapsed ? "collapsed" : ""}`, children: /* @__PURE__ */ jsx6("pre", { children: formatOutput(content) }) })
+      /* @__PURE__ */ jsx14("div", { className: `tool-call-section-content ${isCollapsed ? "collapsed" : ""}`, children: /* @__PURE__ */ jsx14("pre", { children: formatOutput(content) }) })
     ] })
   ] });
 }
 function ToolCallDisplay({ toolPart, className = "" }) {
-  const [isExpanded, setIsExpanded] = useState6(false);
+  const [isExpanded, setIsExpanded] = useState8(false);
   const toolName = "toolName" in toolPart ? toolPart.toolName : toolPart.type.replace("tool-", "");
   const state = "state" in toolPart ? toolPart.state : "pending";
   const hasOutput = state === "output-available" && "output" in toolPart && toolPart.output !== void 0;
   const isLoading = state === "input-streaming" || state === "input-available" || state === "approval-requested";
-  const hasError = state === "output-error" || state === "output-denied";
+  const hasError = state === "output-error";
+  const isDenied = state === "output-denied";
+  const hasFailed = hasError || isDenied;
   const input = "input" in toolPart ? toolPart.input : void 0;
   const output = "output" in toolPart ? toolPart.output : void 0;
   const hasInput = input !== void 0 && input !== null && !(typeof input === "object" && Object.keys(input).length === 0);
   const canExpand = hasInput || hasOutput;
   const renderStatusIcon = () => {
     if (isLoading) {
-      return /* @__PURE__ */ jsx6("span", { className: "tool-call-spinner" });
+      return /* @__PURE__ */ jsx14("span", { className: "tool-call-spinner" });
     }
-    const borderClass = hasError ? "tool-call-status-icon--error" : "";
-    return /* @__PURE__ */ jsx6("span", { className: `tool-call-status-icon ${borderClass}`, children: hasError ? /* @__PURE__ */ jsxs5("svg", { className: "tool-call-status-icon__inner tool-call-status-icon__inner--error", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
-      /* @__PURE__ */ jsx6("line", { x1: "5", y1: "5", x2: "11", y2: "11" }),
-      /* @__PURE__ */ jsx6("line", { x1: "11", y1: "5", x2: "5", y2: "11" })
-    ] }) : /* @__PURE__ */ jsx6("svg", { className: "tool-call-status-icon__inner tool-call-status-icon__inner--success", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("polyline", { points: "4,8 7,11 12,5" }) }) });
+    const borderClass = hasFailed ? "tool-call-status-icon--error" : "";
+    return /* @__PURE__ */ jsx14("span", { className: `tool-call-status-icon ${borderClass}`, children: hasFailed ? /* @__PURE__ */ jsxs12("svg", { className: "tool-call-status-icon__inner tool-call-status-icon__inner--error", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
+      /* @__PURE__ */ jsx14("line", { x1: "5", y1: "5", x2: "11", y2: "11" }),
+      /* @__PURE__ */ jsx14("line", { x1: "11", y1: "5", x2: "5", y2: "11" })
+    ] }) : /* @__PURE__ */ jsx14("svg", { className: "tool-call-status-icon__inner tool-call-status-icon__inner--success", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx14("polyline", { points: "4,8 7,11 12,5" }) }) });
   };
-  return /* @__PURE__ */ jsxs5("div", { className: `tool-call-item ${className}`, children: [
-    /* @__PURE__ */ jsxs5("div", { className: "tool-call-header", children: [
+  return /* @__PURE__ */ jsxs12("div", { className: `tool-call-item ${className}`, children: [
+    /* @__PURE__ */ jsxs12("div", { className: "tool-call-header", children: [
       renderStatusIcon(),
-      /* @__PURE__ */ jsxs5("span", { className: "tool-call-label", children: [
+      /* @__PURE__ */ jsxs12("span", { className: "tool-call-label", children: [
         isLoading ? "Calling" : "Called",
         " ",
-        /* @__PURE__ */ jsx6("code", { children: toolName })
+        /* @__PURE__ */ jsx14("code", { children: toolName })
       ] }),
-      canExpand && /* @__PURE__ */ jsx6(
+      canExpand && /* @__PURE__ */ jsx14(
         "button",
         {
           className: "tool-call-toggle",
@@ -25935,11 +26561,12 @@ function ToolCallDisplay({ toolPart, className = "" }) {
           children: isExpanded ? "HIDE" : "SHOW"
         }
       ),
-      hasError && /* @__PURE__ */ jsx6("span", { className: "tool-call-error", children: "ERROR" })
+      isDenied && /* @__PURE__ */ jsx14("span", { className: "tool-call-error", children: "DENIED" }),
+      hasError && /* @__PURE__ */ jsx14("span", { className: "tool-call-error", children: "ERROR" })
     ] }),
-    isExpanded && canExpand && /* @__PURE__ */ jsxs5("div", { className: "tool-call-details", children: [
-      hasInput && /* @__PURE__ */ jsx6(CollapsibleSection, { label: "IN", content: input }),
-      hasOutput && /* @__PURE__ */ jsx6(CollapsibleSection, { label: "OUT", content: output })
+    isExpanded && canExpand && /* @__PURE__ */ jsxs12("div", { className: "tool-call-details", children: [
+      hasInput && /* @__PURE__ */ jsx14(CollapsibleSection, { label: "IN", content: input }),
+      hasOutput && /* @__PURE__ */ jsx14(CollapsibleSection, { label: "OUT", content: output })
     ] })
   ] });
 }
@@ -25974,7 +26601,7 @@ function createSDKWidget(widget) {
 var createWidget = (widget) => widget;
 
 // lib/chat/components/WidgetRenderer.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function renderError(container, message) {
   container.innerHTML = "";
   const errorDiv = document.createElement("div");
@@ -25982,7 +26609,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 +26646,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,28 +26707,37 @@ 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 });
-      return /* @__PURE__ */ jsx7(Fragment3, { children: element });
+      const element = widget.render(payload, enriched, { messageContext, invokeTool });
+      return /* @__PURE__ */ jsx15(Fragment4, { children: element });
     } catch (error48) {
       console.error(`SDK widget "${widget.widgetType}" render threw:`, error48);
       const errorMessage = error48 instanceof Error ? error48.message : String(error48);
-      return /* @__PURE__ */ jsxs6("div", { className: "widget-error", title: errorMessage, children: [
+      return /* @__PURE__ */ jsxs13("div", { className: "widget-error", title: errorMessage, children: [
         "Widget error: ",
         widget.widgetType
       ] });
     }
   }
-  return /* @__PURE__ */ jsx7("div", { ref: containerRef, className: "widget-customer-root" });
+  return /* @__PURE__ */ jsx15("div", { ref: containerRef, className: "widget-customer-root" });
 }
 
 // lib/chat/renderers/MessageRenderer.tsx
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function FormattedMarkdownComponent({ children }) {
   const MarkdownComponent = ReactMarkdown;
-  return /* @__PURE__ */ jsx8(MarkdownComponent, { remarkPlugins: [remarkGfm], children: children.replace(/\n\n/gi, "\n\n \n\n") });
+  return /* @__PURE__ */ jsx16(
+    MarkdownComponent,
+    {
+      remarkPlugins: [remarkGfm],
+      components: {
+        a: ({ children: children2, href, ...props }) => /* @__PURE__ */ jsx16("a", { href, target: "_blank", rel: "noopener noreferrer", ...props, children: children2 })
+      },
+      children: children.replace(/\n\n/gi, "\n\n \n\n")
+    }
+  );
 }
 var FormattedMarkdown = React5.memo(FormattedMarkdownComponent);
 function MessageRenderer({
@@ -26111,7 +26747,8 @@ function MessageRenderer({
   displayMode = "brief",
   tagExpansion,
   className,
-  feedback
+  feedback,
+  invokeTool
 }) {
   const messageContext = useMemo4(() => {
     if (!feedback) return void 0;
@@ -26133,43 +26770,44 @@ function MessageRenderer({
       if (part.type === "text") {
         const trimmed = part.text?.trim();
         if (!trimmed) return null;
-        return /* @__PURE__ */ jsx8("div", { className: "chat-widget__markdown", children: /* @__PURE__ */ jsx8(FormattedMarkdown, { children: trimmed }) }, key);
+        return /* @__PURE__ */ jsx16("div", { className: "chat-widget__markdown", children: /* @__PURE__ */ jsx16(FormattedMarkdown, { children: trimmed }) }, key);
       }
       if (part.type.startsWith("tool-") || part.type === "dynamic-tool") {
-        return /* @__PURE__ */ jsx8(ToolCallDisplay, { toolPart: part }, key);
+        return /* @__PURE__ */ jsx16(ToolCallDisplay, { toolPart: part }, key);
       }
       if (part.type === "data-ui") {
         const dataPart = part;
         const uiWidgets = dataPart.data;
         if (!Array.isArray(uiWidgets)) return null;
         if (!widgets || widgets.length === 0) {
-          return /* @__PURE__ */ jsxs7("div", { className: "text-muted-foreground text-sm italic", children: [
+          return /* @__PURE__ */ jsxs14("div", { className: "text-muted-foreground text-sm italic", children: [
             "[UI Widget: ",
             uiWidgets.map((w) => w.widgetType || "unknown").join(", "),
             "]"
           ] }, key);
         }
-        return /* @__PURE__ */ jsx8(React5.Fragment, { children: uiWidgets.map((widget, idx) => {
+        return /* @__PURE__ */ jsx16(React5.Fragment, { children: uiWidgets.map((widget, idx) => {
           const widgetDef = widgets.find((w) => w.widgetType === widget.widgetType);
           if (!widgetDef) {
-            return /* @__PURE__ */ jsxs7("span", { children: [
+            return /* @__PURE__ */ jsxs14("span", { children: [
               "[Unknown widget: ",
               widget.widgetType,
               "]"
             ] }, `${key}-widget-${idx}`);
           }
-          return /* @__PURE__ */ jsx8(
+          return /* @__PURE__ */ jsx16(
             "div",
             {
               className: "chat-widget__widget",
               inert: readonly2 ? true : void 0,
-              children: /* @__PURE__ */ jsx8(
+              children: /* @__PURE__ */ jsx16(
                 WidgetRenderer,
                 {
                   widget: widgetDef,
                   payload: widget.payload,
                   enriched: widget.enriched ?? {},
-                  messageContext: messageContext ?? void 0
+                  messageContext: messageContext ?? void 0,
+                  invokeTool
                 }
               )
             },
@@ -26184,7 +26822,7 @@ function MessageRenderer({
   const renderGroup = useCallback5(
     (groupName, key, children) => {
       const isExpanded = tagExpansion?.state.get(key) ?? true;
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx16(
         TagGroupDisplay,
         {
           tagId: groupName,
@@ -26198,8 +26836,8 @@ function MessageRenderer({
     [tagExpansion]
   );
   const DisplayMode = displayMode === "brief" ? BriefDisplayMode : FullDisplayMode;
-  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx8("div", { className, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
+    /* @__PURE__ */ jsx16("div", { className, children: /* @__PURE__ */ jsx16(
       DisplayMode,
       {
         sections: message.sections,
@@ -26208,7 +26846,7 @@ function MessageRenderer({
         renderGroup
       }
     ) }),
-    !readonly2 && feedback && /* @__PURE__ */ jsx8(
+    !readonly2 && feedback && /* @__PURE__ */ jsx16(
       MessageFeedback,
       {
         messageId: message.id,
@@ -26223,7 +26861,7 @@ function MessageRenderer({
 }
 
 // lib/chat/ChatWidget.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var classNames2 = {
   container: "chat-widget",
   header: "chat-widget__header",
@@ -26255,15 +26893,23 @@ var classNames2 = {
   voiceControl: "chat-widget__voice",
   micButton: "chat-widget__mic-button"
 };
-var defaultTheme = {
+var lightTheme = {
+  theme: "light",
   primaryColor: "#3b82f6",
   primaryTextColor: "#ffffff",
   backgroundColor: "#ffffff",
+  backgroundSecondary: "#f9fafb",
+  backgroundTertiary: "#f3f4f6",
   borderColor: "#e5e7eb",
+  borderColorLight: "#f3f4f6",
   headerTextColor: "#ffffff",
   userBubbleTextColor: "#ffffff",
   assistantBubbleBackground: "transparent",
   assistantBubbleTextColor: "#111827",
+  textColor: "#111827",
+  textSecondary: "#4b5563",
+  textMuted: "#6b7280",
+  textDisabled: "#9ca3af",
   fontFamily: `'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif`,
   borderRadius: "0.75rem",
   inputBackground: "#ffffff",
@@ -26271,6 +26917,44 @@ var defaultTheme = {
   inputPlaceholderColor: "#6b7280",
   thoughtsBorderColor: "#d1d5db"
 };
+var darkTheme = {
+  theme: "dark",
+  primaryColor: "#3b82f6",
+  primaryTextColor: "#ffffff",
+  backgroundColor: "#1f2937",
+  backgroundSecondary: "#374151",
+  backgroundTertiary: "#4b5563",
+  borderColor: "#4b5563",
+  borderColorLight: "#374151",
+  headerTextColor: "#ffffff",
+  userBubbleTextColor: "#ffffff",
+  assistantBubbleBackground: "transparent",
+  assistantBubbleTextColor: "#f9fafb",
+  textColor: "#f9fafb",
+  textSecondary: "#d1d5db",
+  textMuted: "#9ca3af",
+  textDisabled: "#6b7280",
+  fontFamily: `'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif`,
+  borderRadius: "0.75rem",
+  inputBackground: "#374151",
+  inputTextColor: "#f9fafb",
+  inputPlaceholderColor: "#9ca3af",
+  thoughtsBorderColor: "#4b5563"
+};
+function detectDarkMode() {
+  if (typeof window === "undefined") return false;
+  const html2 = document.documentElement;
+  const body = document.body;
+  const dataTheme = html2.getAttribute("data-theme") || body.getAttribute("data-theme");
+  if (dataTheme === "dark") return true;
+  if (dataTheme === "light") return false;
+  if (html2.classList.contains("dark") || body.classList.contains("dark")) return true;
+  if (html2.classList.contains("light") || body.classList.contains("light")) return false;
+  const colorScheme = getComputedStyle(html2).colorScheme;
+  if (colorScheme === "dark") return true;
+  if (colorScheme === "light") return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
 var mixWithBlack = (hex3, ratio = 0.15) => {
   const normalized = hex3.replace("#", "");
   if (!/^[0-9a-fA-F]{6}$/.test(normalized)) return hex3;
@@ -26303,17 +26987,50 @@ var ChatWidget = forwardRef(function ChatWidget2({
   widgets,
   feedback
 }, ref) {
-  const theme = useMemo5(
-    () => ({ ...defaultTheme, ...styleProps || {} }),
-    [styleProps]
-  );
+  const [detectedDarkMode, setDetectedDarkMode] = useState9(false);
+  useEffect6(() => {
+    setDetectedDarkMode(detectDarkMode());
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => setDetectedDarkMode(detectDarkMode());
+    mediaQuery.addEventListener("change", handleChange);
+    const observer = new MutationObserver(() => {
+      setDetectedDarkMode(detectDarkMode());
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class"]
+    });
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class"]
+    });
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+      observer.disconnect();
+    };
+  }, []);
+  const theme = useMemo5(() => {
+    const themeMode = styleProps?.theme || "auto";
+    const isDark = themeMode === "dark" || themeMode === "auto" && detectedDarkMode;
+    const baseTheme = isDark ? darkTheme : lightTheme;
+    return { ...baseTheme, ...styleProps || {} };
+  }, [styleProps, detectedDarkMode]);
   const themeVariables = useMemo5(
     () => ({
       "--chat-primary": theme.primaryColor,
       "--chat-primary-text": theme.primaryTextColor,
       "--chat-primary-hover": mixWithBlack(theme.primaryColor, 0.2),
+      "--chat-primary-subtle": `${theme.primaryColor}1a`,
+      // 10% opacity
       "--chat-background": theme.backgroundColor,
+      "--chat-background-secondary": theme.backgroundSecondary,
+      "--chat-background-tertiary": theme.backgroundTertiary,
       "--chat-border": theme.borderColor,
+      "--chat-border-light": theme.borderColorLight,
+      "--chat-text": theme.textColor,
+      "--chat-text-secondary": theme.textSecondary,
+      "--chat-text-muted": theme.textMuted,
+      "--chat-text-disabled": theme.textDisabled,
       "--chat-header-text": theme.headerTextColor,
       "--chat-user-text": theme.userBubbleTextColor,
       "--chat-assistant-bg": theme.assistantBubbleBackground,
@@ -26327,9 +27044,9 @@ var ChatWidget = forwardRef(function ChatWidget2({
     }),
     [theme]
   );
-  const [input, setInput] = useState7("");
-  const [isMicActive, setIsMicActive] = useState7(false);
-  const [isSpeechPending, setIsSpeechPending] = useState7(false);
+  const [input, setInput] = useState9("");
+  const [isMicActive, setIsMicActive] = useState9(false);
+  const [isSpeechPending, setIsSpeechPending] = useState9(false);
   const messagesEndRef = useRef5(null);
   const scrollContainerRef = useRef5(null);
   const isAtBottomRef = useRef5(true);
@@ -26341,7 +27058,11 @@ var ChatWidget = forwardRef(function ChatWidget2({
     isLoadingInitial,
     sendMessage,
     stop,
-    setMessages
+    setMessages,
+    addToolOutput,
+    addToolApprovalResponse,
+    pendingToolOutput,
+    pendingToolApproval
   } = useChat({
     api,
     threadId,
@@ -26354,6 +27075,24 @@ var ChatWidget = forwardRef(function ChatWidget2({
     onFinish,
     onMessage
   });
+  const handleToolOutput = useCallback6((result) => {
+    if (pendingToolOutput && addToolOutput) {
+      addToolOutput({
+        tool: "collect_user_input",
+        toolCallId: pendingToolOutput.toolCallId,
+        output: result
+      });
+    }
+  }, [pendingToolOutput, addToolOutput]);
+  const handleToolApproval = useCallback6((approved, reason) => {
+    if (!pendingToolApproval) return;
+    addToolApprovalResponse({
+      id: pendingToolApproval.approvalId,
+      approved,
+      reason
+    });
+  }, [pendingToolApproval, addToolApprovalResponse]);
+  const isInputDisabled = status !== "ready" || !!pendingToolOutput || !!pendingToolApproval;
   useImperativeHandle(ref, () => ({
     sendMessage: (message) => {
       if (message.trim() && status === "ready") {
@@ -26372,7 +27111,36 @@ var ChatWidget = forwardRef(function ChatWidget2({
     agentId,
     agentVersion
   });
-  const [tagExpansionState, setTagExpansionState] = useState7(/* @__PURE__ */ new Map());
+  const invokeTool = useMemo5(
+    () => createInvokeTool(api, onAuthError),
+    [api, onAuthError]
+  );
+  const [tagExpansionState, setTagExpansionState] = useState9(/* @__PURE__ */ new Map());
+  const [approvalConfig, setApprovalConfig] = useState9(null);
+  const [approvalConfigLoading, setApprovalConfigLoading] = useState9(false);
+  useEffect6(() => {
+    if (!pendingToolApproval) {
+      setApprovalConfig(null);
+      setApprovalConfigLoading(false);
+      return;
+    }
+    setApprovalConfigLoading(true);
+    fetchApprovalConfig({
+      api,
+      agentId,
+      agentVersion,
+      toolName: pendingToolApproval.toolName,
+      args: pendingToolApproval.args,
+      onAuthError
+    }).then((config2) => {
+      setApprovalConfig(config2);
+    }).catch((err) => {
+      console.error("[ChatWidget] Failed to fetch approval config:", err);
+      setApprovalConfig(null);
+    }).finally(() => {
+      setApprovalConfigLoading(false);
+    });
+  }, [pendingToolApproval, api, agentId, agentVersion, onAuthError]);
   const handleTagToggle = useCallback6((messageId, tagId, currentlyExpanded) => {
     suppressScrollRef.current = true;
     setTagExpansionState((prev) => {
@@ -26455,11 +27223,11 @@ var ChatWidget = forwardRef(function ChatWidget2({
   }, [status]);
   const sendText = useCallback6((raw) => {
     const text4 = (raw ?? input).trim();
-    if (!text4 || status !== "ready") return false;
+    if (!text4 || isInputDisabled) return false;
     sendMessage({ text: text4 });
     setInput("");
     return true;
-  }, [input, status, sendMessage, setInput]);
+  }, [input, isInputDisabled, sendMessage, setInput]);
   const handleSendMessage = () => {
     sendText();
   };
@@ -26505,15 +27273,15 @@ var ChatWidget = forwardRef(function ChatWidget2({
       console.error("Failed to register chat widgets", err);
     });
   }, [api, threadId, widgets, onAuthError]);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: cn(classNames2.container, className),
       style: themeVariables,
       "data-chat-widget": "",
       children: [
-        title && /* @__PURE__ */ jsx9("div", { className: classNames2.header, children: /* @__PURE__ */ jsx9("h3", { className: classNames2.headerTitle, children: title }) }),
-        /* @__PURE__ */ jsxs8(
+        title && /* @__PURE__ */ jsx17("div", { className: classNames2.header, children: /* @__PURE__ */ jsx17("h3", { className: classNames2.headerTitle, children: title }) }),
+        /* @__PURE__ */ jsxs15(
           "div",
           {
             className: classNames2.messagesContainer,
@@ -26524,21 +27292,21 @@ var ChatWidget = forwardRef(function ChatWidget2({
                 const isUser = message.role === "user";
                 const isLastMessage = index === messages.length - 1;
                 const showFeedback = feedbackEnabled && !isUser && !(status === "streaming" && isLastMessage);
-                return /* @__PURE__ */ jsx9("div", { className: classNames2.messageWrapper, children: /* @__PURE__ */ jsx9(
+                return /* @__PURE__ */ jsx17("div", { className: classNames2.messageWrapper, children: /* @__PURE__ */ jsx17(
                   "div",
                   {
                     className: cn(
                       classNames2.messageRow,
                       isUser ? classNames2.userMessageRow : classNames2.assistantMessageRow
                     ),
-                    children: /* @__PURE__ */ jsx9(
+                    children: /* @__PURE__ */ jsx17(
                       "div",
                       {
                         className: cn(
                           classNames2.messageBubble,
                           isUser ? classNames2.userMessage : classNames2.assistantMessage
                         ),
-                        children: /* @__PURE__ */ jsx9(
+                        children: /* @__PURE__ */ jsx17(
                           MessageRenderer,
                           {
                             message,
@@ -26553,7 +27321,8 @@ var ChatWidget = forwardRef(function ChatWidget2({
                               requireCommentForNegative: feedback?.requireCommentForNegative,
                               getFeedback: () => getFeedback(message.id),
                               submitFeedback: (params) => submitFeedback(message.id, params)
-                            } : void 0
+                            } : void 0,
+                            invokeTool
                           }
                         )
                       }
@@ -26561,17 +27330,17 @@ var ChatWidget = forwardRef(function ChatWidget2({
                   }
                 ) }, message.id);
               }),
-              status === "streaming" && /* @__PURE__ */ jsx9("div", { className: classNames2.loadingContainer, children: /* @__PURE__ */ jsx9("div", { className: classNames2.loadingBubble, children: /* @__PURE__ */ jsxs8("div", { className: classNames2.loadingDots, children: [
-                /* @__PURE__ */ jsx9("div", { className: classNames2.loadingDot }),
-                /* @__PURE__ */ jsx9("div", { className: classNames2.loadingDot, "data-delay": "1" }),
-                /* @__PURE__ */ jsx9("div", { className: classNames2.loadingDot, "data-delay": "2" })
+              status === "streaming" && /* @__PURE__ */ jsx17("div", { className: classNames2.loadingContainer, children: /* @__PURE__ */ jsx17("div", { className: classNames2.loadingBubble, children: /* @__PURE__ */ jsxs15("div", { className: classNames2.loadingDots, children: [
+                /* @__PURE__ */ jsx17("div", { className: classNames2.loadingDot }),
+                /* @__PURE__ */ jsx17("div", { className: classNames2.loadingDot, "data-delay": "1" }),
+                /* @__PURE__ */ jsx17("div", { className: classNames2.loadingDot, "data-delay": "2" })
               ] }) }) }),
-              /* @__PURE__ */ jsx9("div", { ref: messagesEndRef })
+              /* @__PURE__ */ jsx17("div", { ref: messagesEndRef })
             ]
           }
         ),
-        /* @__PURE__ */ jsx9("div", { className: classNames2.inputContainer, children: /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: classNames2.inputForm, children: [
-          /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx17("div", { className: classNames2.inputContainer, children: /* @__PURE__ */ jsxs15("form", { onSubmit: handleSubmit, className: classNames2.inputForm, children: [
+          /* @__PURE__ */ jsx17(
             "textarea",
             {
               ref: textareaRef,
@@ -26579,12 +27348,12 @@ var ChatWidget = forwardRef(function ChatWidget2({
               onChange: (e) => setInput(e.target.value),
               onKeyDown: handleKeyDown,
               placeholder: inputPlaceholder,
-              disabled: status !== "ready",
+              disabled: isInputDisabled,
               rows: 1,
               className: classNames2.textarea
             }
           ),
-          /* @__PURE__ */ jsx9("div", { className: classNames2.toolbar, children: speechEnabled && /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx17("div", { className: classNames2.toolbar, children: speechEnabled && /* @__PURE__ */ jsx17(
             SpeechToTextButton,
             {
               className: classNames2.micButton,
@@ -26598,32 +27367,49 @@ var ChatWidget = forwardRef(function ChatWidget2({
               onListeningChange: setIsMicActive
             }
           ) }),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
               onClick: status === "streaming" ? stop : handleSendMessage,
-              disabled: status === "streaming" ? false : !input.trim() || status !== "ready",
+              disabled: status === "streaming" ? false : !input.trim() || isInputDisabled,
               className: classNames2.submitButton,
-              children: status === "streaming" ? /* @__PURE__ */ jsx9(StopCircle, { className: classNames2.sendIcon }) : /* @__PURE__ */ jsx9(Send, { className: classNames2.sendIcon })
+              children: status === "streaming" ? /* @__PURE__ */ jsx17(StopCircle, { className: classNames2.sendIcon }) : /* @__PURE__ */ jsx17(Send, { className: classNames2.sendIcon })
             }
           )
-        ] }) })
+        ] }) }),
+        pendingToolOutput && /* @__PURE__ */ jsx17(
+          InputFormOverlay,
+          {
+            args: pendingToolOutput.args,
+            onComplete: handleToolOutput
+          }
+        ),
+        pendingToolApproval && /* @__PURE__ */ jsx17(
+          ToolApprovalOverlay,
+          {
+            approval: pendingToolApproval,
+            config: approvalConfig,
+            configLoading: approvalConfigLoading,
+            onApprove: () => handleToolApproval(true),
+            onDeny: (reason) => handleToolApproval(false, reason)
+          }
+        )
       ]
     }
   );
 });
 
 // lib/chat/PopupChatWidget.css
-styleInject(".chat-popup__anchor {\n  position: fixed;\n  inset-block-end: 20px;\n  inset-inline-end: 20px;\n}\n.chat-popup--start {\n  inset-inline-end: auto;\n  inset-inline-start: 20px;\n}\n.chat-popup__anchor-button {\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-popup__anchor-button:hover {\n  background: var(--chat-primary-hover);\n}\n.chat-popup__anchor-icon {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n.chat-popup__panel {\n  position: fixed;\n  inset-block-end: 20px;\n  inset-inline-end: 20px;\n  z-index: 99998;\n  transition: opacity 0.15s ease, visibility 0.15s ease;\n}\n.chat-popup--start.chat-popup__panel {\n  inset-inline-end: auto;\n  inset-inline-start: 20px;\n}\n.chat-popup__panel--open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n.chat-popup__panel--closed {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n.chat-popup__panel-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: visible;\n  background: var(--chat-background);\n  border: 1px solid var(--chat-border);\n  position: relative;\n}\n.chat-popup__close {\n  position: absolute;\n  top: 0;\n  z-index: 10;\n  transform: translate(30%, -40%);\n}\n.chat-popup__close--end {\n  inset-inline-end: 0;\n}\n.chat-popup__close--start {\n  inset-inline-start: 0;\n}\n.chat-popup__close-button {\n  border: none;\n  background: var(--chat-primary);\n  color: var(--chat-primary-text);\n  width: 32px;\n  height: 32px;\n  border-radius: 999px;\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);\n}\n.chat-popup__close-button:hover {\n  background: var(--chat-primary-hover);\n}\n.chat-popup__close-icon {\n  width: 16px;\n  height: 16px;\n}\n");
+styleInject(".chat-popup__anchor {\n  position: fixed;\n  inset-block-end: 20px;\n  inset-inline-end: 20px;\n}\n.chat-popup--start {\n  inset-inline-end: auto;\n  inset-inline-start: 20px;\n}\n.chat-popup__anchor-button {\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: var(--chat-shadow);\n  cursor: pointer;\n  font-weight: 600;\n  z-index: 99999;\n}\n.chat-popup__anchor-button:hover {\n  background: var(--chat-primary-hover);\n}\n.chat-popup__anchor-icon {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n.chat-popup__panel {\n  position: fixed;\n  inset-block-end: 20px;\n  inset-inline-end: 20px;\n  z-index: 99998;\n  transition: opacity 0.15s ease, visibility 0.15s ease;\n}\n.chat-popup--start.chat-popup__panel {\n  inset-inline-end: auto;\n  inset-inline-start: 20px;\n}\n.chat-popup__panel--open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n.chat-popup__panel--closed {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n.chat-popup__panel-inner {\n  width: 384px;\n  max-width: calc(100vw - 40px);\n  height: 500px;\n  max-height: calc(100vh - 140px);\n  box-shadow: var(--chat-shadow);\n  border-radius: 12px;\n  overflow: visible;\n  background: var(--chat-background);\n  border: 1px solid var(--chat-border);\n  position: relative;\n}\n.chat-popup__close {\n  position: absolute;\n  top: 0;\n  z-index: 10;\n  transform: translate(30%, -40%);\n}\n.chat-popup__close--end {\n  inset-inline-end: 0;\n}\n.chat-popup__close--start {\n  inset-inline-start: 0;\n}\n.chat-popup__close-button {\n  border: none;\n  background: var(--chat-primary);\n  color: var(--chat-primary-text);\n  width: 32px;\n  height: 32px;\n  border-radius: 999px;\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n  box-shadow: var(--chat-shadow);\n}\n.chat-popup__close-button:hover {\n  background: var(--chat-primary-hover);\n}\n.chat-popup__close-icon {\n  width: 16px;\n  height: 16px;\n}\n");
 
 // lib/chat/PopupChatWidget.tsx
 import { MessageSquare as MessageSquare2, X } from "lucide-react";
-import { useEffect as useEffect7, useMemo as useMemo6, useState as useState8 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useMemo as useMemo6, useState as useState10 } from "react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function PopupChatWidget({ anchor, ...props }) {
-  const [isOpen, setIsOpen] = useState8(anchor?.initiallyOpen ?? false);
-  const [hasOpened, setHasOpened] = useState8(anchor?.initiallyOpen ?? false);
+  const [isOpen, setIsOpen] = useState10(anchor?.initiallyOpen ?? false);
+  const [hasOpened, setHasOpened] = useState10(anchor?.initiallyOpen ?? false);
   const openResolved = props.openOverride ?? isOpen;
   useEffect7(() => {
     if (props.openOverride === void 0) return;
@@ -26677,8 +27463,8 @@ function PopupChatWidget({ anchor, ...props }) {
       maxHeight: size.maxHeight ?? "calc(100vh - 140px)"
     };
   }, [props.popupSize]);
-  return /* @__PURE__ */ jsxs9("div", { style: themeStyle, children: [
-    /* @__PURE__ */ jsx10("div", { className: cn("chat-popup__anchor", anchorPositionClass), children: anchor?.render ? anchor.render({ isOpen: openResolved, toggle: handleToggle }) : !openResolved && /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs16("div", { style: themeStyle, children: [
+    /* @__PURE__ */ jsx18("div", { className: cn("chat-popup__anchor", anchorPositionClass), children: anchor?.render ? anchor.render({ isOpen: openResolved, toggle: handleToggle }) : !openResolved && /* @__PURE__ */ jsxs16(
       "button",
       {
         type: "button",
@@ -26687,12 +27473,12 @@ function PopupChatWidget({ anchor, ...props }) {
         "aria-expanded": isOpen,
         "aria-label": anchor?.label ?? "Open chat",
         children: [
-          /* @__PURE__ */ jsx10(MessageSquare2, { className: "chat-popup__anchor-icon" }),
-          /* @__PURE__ */ jsx10("span", { children: anchor?.label ?? "Chat" })
+          /* @__PURE__ */ jsx18(MessageSquare2, { className: "chat-popup__anchor-icon" }),
+          /* @__PURE__ */ jsx18("span", { children: anchor?.label ?? "Chat" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx18(
       "div",
       {
         className: cn(
@@ -26700,87 +27486,68 @@ function PopupChatWidget({ anchor, ...props }) {
           anchorPositionClass,
           openResolved ? "chat-popup__panel--open" : "chat-popup__panel--closed"
         ),
-        children: /* @__PURE__ */ jsxs9("div", { className: "chat-popup__panel-inner", style: popupStyle, children: [
-          showClose && /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsxs16("div", { className: "chat-popup__panel-inner", style: popupStyle, children: [
+          showClose && /* @__PURE__ */ jsx18(
             "div",
             {
               className: cn(
                 "chat-popup__close",
                 closeConfig?.position === "top-start" ? "chat-popup__close--start" : "chat-popup__close--end"
               ),
-              children: closeConfig?.render ? closeConfig.render({ toggle: handleToggle }) : /* @__PURE__ */ jsx10(
+              children: closeConfig?.render ? closeConfig.render({ toggle: handleToggle }) : /* @__PURE__ */ jsx18(
                 "button",
                 {
                   type: "button",
                   className: "chat-popup__close-button",
                   onClick: handleToggle,
                   "aria-label": "Close chat",
-                  children: /* @__PURE__ */ jsx10(X, { className: "chat-popup__close-icon" })
+                  children: /* @__PURE__ */ jsx18(X, { className: "chat-popup__close-icon" })
                 }
               )
             }
           ),
-          hasOpened && /* @__PURE__ */ jsx10(ChatWidget, { ...props })
+          hasOpened && /* @__PURE__ */ jsx18(ChatWidget, { ...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 { 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(() => {
+import { useEffect as useEffect8, useMemo as useMemo7, useRef as useRef6, useState as useState11 } from "react";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+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] = useState11();
+  const [loadingDistance, setLoadingDistance] = useState11(true);
+  const [feedbackState, setFeedbackState] = useState11({});
+  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 +27563,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,52 +27612,63 @@ 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: [
-              /* @__PURE__ */ jsx11("div", { style: {
+  if (!serverEnriched || !serverEnriched.vendorDetails) {
+    return /* @__PURE__ */ jsx19("div", { children: "Loading vendor details..." });
+  }
+  const vendorData = serverEnriched.vendorDetails?.data ?? {};
+  const distances = distanceMatrix?.data ?? [];
+  return /* @__PURE__ */ jsxs17("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+    loadingDistance && /* @__PURE__ */ jsx19("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__ */ jsxs17(
+        "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__ */ jsx19("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+              /* @__PURE__ */ jsx19("div", { style: {
                 width: "2rem",
                 height: "2rem",
                 borderRadius: "9999px",
@@ -26864,163 +27680,111 @@ function VendorCards({ payload, enriched, onAddToList, onFeedback, existingFeedb
                 fontSize: "0.875rem",
                 color: "#374151"
               }, children: name21.charAt(0).toUpperCase() }),
-              /* @__PURE__ */ jsx11("span", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827" }, children: name21 })
+              /* @__PURE__ */ jsx19("span", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827" }, children: name21 })
+            ] }) }),
+            (reviewCount != null || cnScore != null) && /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", color: "#6b7280" }, children: [
+              avgRating != null && /* @__PURE__ */ jsxs17(Fragment6, { children: [
+                /* @__PURE__ */ jsx19("span", { style: { color: "#facc15" }, children: "\u2605" }),
+                /* @__PURE__ */ jsx19("span", { children: avgRating.toFixed(1) }),
+                reviewCount != null && /* @__PURE__ */ jsxs17("span", { style: { color: "#9ca3af" }, children: [
+                  "(",
+                  reviewCount,
+                  " reviews)"
+                ] })
+              ] }),
+              avgRating != null && cnScore != null ? /* @__PURE__ */ jsx19("span", { style: { color: "#9ca3af" }, children: "\u2022" }) : null,
+              cnScore != null ? /* @__PURE__ */ jsxs17("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__ */ jsx19("div", { style: { color: "#6b7280" }, children: careLocationType }),
+            address && /* @__PURE__ */ jsx19("div", { style: { color: "#6b7280" }, children: address }),
+            /* @__PURE__ */ jsx19("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280", minHeight: "1.25rem" }, children: loadingDistance ? /* @__PURE__ */ jsxs17(Fragment6, { children: [
+              /* @__PURE__ */ jsx19("span", { children: "\u{1F4CD}" }),
+              /* @__PURE__ */ jsx19("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__ */ jsxs17(Fragment6, { children: [
+              /* @__PURE__ */ jsx19("span", { children: "\u{1F4CD}" }),
+              /* @__PURE__ */ jsxs17("span", { children: [
+                distance,
+                " from ",
+                payload.fromLocation
+              ] })
+            ] }) : null }),
+            hourlyRate && /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280" }, children: [
+              /* @__PURE__ */ jsx19("span", { children: "\u{1F4B0}" }),
+              /* @__PURE__ */ jsxs17("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__ */ jsxs17("div", { style: { color: "#374151", marginTop: "0.4rem" }, children: [
+              /* @__PURE__ */ jsx19("span", { style: { marginRight: "0.25rem" }, children: "\u2728" }),
+              /* @__PURE__ */ jsx19("strong", { children: "Recommendation notes" }),
+              /* @__PURE__ */ jsx19("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__ */ jsxs17(Fragment6, { children: [
+                /* @__PURE__ */ jsxs17("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__ */ jsxs17("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
+                    /* @__PURE__ */ jsx19("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
+                    " Wellthy Verified"
+                  ] }),
+                  hasBackgroundCheck && /* @__PURE__ */ jsxs17("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
+                    /* @__PURE__ */ jsx19("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
+                    " Background check"
+                  ] }),
+                  messageContext && /* @__PURE__ */ jsxs17("div", { style: {
+                    marginLeft: "auto",
+                    display: "flex",
+                    gap: "0.25rem",
+                    alignItems: "center"
+                  }, children: [
+                    /* @__PURE__ */ jsx19(
                       "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 +27792,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__ */ jsx19(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",
+                    ),
+                    /* @__PURE__ */ jsx19(
+                      "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__ */ jsx19(ThumbsDown2, { style: { width: "1rem", height: "1rem" } })
+                      }
+                    ),
+                    (() => {
+                      const hasComment = !!state.commentText?.trim();
+                      const CommentIcon = hasComment ? MessageSquareText2 : MessageSquare3;
+                      return /* @__PURE__ */ jsx19(
+                        "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__ */ jsx19(CommentIcon, { style: { width: "1rem", height: "1rem" } })
+                        }
+                      );
+                    })()
+                  ] })
+                ] }),
+                state.showComment && /* @__PURE__ */ jsx19("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__ */ jsxs17("div", { style: { display: "flex", gap: "0.5rem", alignItems: "flex-start" }, children: [
+                  /* @__PURE__ */ jsx19(
+                    "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__ */ jsxs17("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
+                    /* @__PURE__ */ jsx19(
+                      "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__ */ jsx19(
+                      "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 Fragment7, jsx as jsx20, jsxs as jsxs18 } 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 jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var defaultChatWidgets = [
   createSDKWidget({
     widgetType: "person-card",
@@ -27126,7 +27984,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__ */ jsx21(
       "div",
       {
         style: {
@@ -27139,8 +27997,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__ */ jsxs19("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.75rem" }, children: [
+          payload.photoUri && /* @__PURE__ */ jsx21(
             "img",
             {
               src: payload.photoUri,
@@ -27155,14 +28013,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__ */ jsxs19("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx21("div", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827", marginBottom: "0.25rem" }, children: payload.name }),
+            payload.details ? /* @__PURE__ */ jsx21("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: Object.entries(payload.details).map(([key, value]) => /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "0.5rem", fontSize: "0.875rem" }, children: [
+              /* @__PURE__ */ jsxs19("span", { style: { color: "#6b7280", fontWeight: 500, minWidth: "fit-content" }, children: [
                 key,
                 ":"
               ] }),
-              /* @__PURE__ */ jsx12("span", { style: { color: "#374151" }, children: String(value) })
+              /* @__PURE__ */ jsx21("span", { style: { color: "#374151" }, children: String(value) })
             ] }, key)) }) : null
           ] })
         ] })
@@ -27175,7 +28033,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__ */ jsx21(
       "a",
       {
         href: payload.uri,
@@ -27215,43 +28073,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__ */ jsx21(
+        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
         }
       )
     })
@@ -27272,6 +28112,7 @@ export {
   createSDKWidget,
   createWidget,
   defaultChatWidgets,
+  fetchApprovalConfig,
   getVendorCardsWidget,
   isSDKWidget,
   registerChatWidgets,