@ensembleapp/client-sdk 0.0.53 → 0.0.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +79 -2
- package/dist/index.d.ts +38 -14
- package/dist/index.js +192 -125
- package/dist/index.js.map +1 -1
- package/dist/widget/widget.global.js +51 -51
- package/dist/widget/widget.global.js.map +1 -1
- package/lib/chat/ChatWidget.css +15 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
// lib/chat/ChatWidget.css
|
|
24
|
-
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-widget-border-width: 1px;\n --chat-text: #111827;\n --chat-text-secondary: #4b5563;\n --chat-text-muted: #6b7280;\n --chat-text-disabled: #9ca3af;\n --chat-link: #2563eb;\n --chat-link-hover: #1d4ed8;\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: var(--chat-widget-border-width) solid var(--chat-border);\n border-radius: 0;\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--popup-content {\n border: 0;\n border-radius: inherit;\n box-shadow: none;\n min-height: 0;\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 overflow-x: hidden;\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n min-width: 0;\n}\n.chat-widget__message {\n display: flex;\n flex-direction: column;\n gap: 0;\n min-width: 0;\n}\n.chat-widget__message-row {\n display: flex;\n min-width: 0;\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 min-width: 0;\n overflow-x: hidden;\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 padding-left: 0.375rem;\n padding-right: 0.375rem;\n}\n.chat-widget__bubble--assistant {\n width: 90%;\n max-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 max-width: 100%;\n min-width: 0;\n overflow-x: hidden;\n}\n.widget-customer-root {\n width: 100%;\n max-width: 100%;\n min-width: 0;\n overflow-x: hidden;\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-link);\n text-decoration: underline;\n}\n.chat-widget__markdown a:hover {\n color: var(--chat-link-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');
|
|
24
|
+
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-widget-border-width: 1px;\n --chat-text: #111827;\n --chat-text-secondary: #4b5563;\n --chat-text-muted: #6b7280;\n --chat-text-disabled: #9ca3af;\n --chat-link: #2563eb;\n --chat-link-hover: #1d4ed8;\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: var(--chat-widget-border-width) solid var(--chat-border);\n border-radius: 0;\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--popup-content {\n border: 0;\n border-radius: inherit;\n box-shadow: none;\n min-height: 0;\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 overflow-x: hidden;\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n min-width: 0;\n}\n.chat-widget__message {\n display: flex;\n flex-direction: column;\n gap: 0;\n min-width: 0;\n}\n.chat-widget__message-row {\n display: flex;\n min-width: 0;\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 min-width: 0;\n overflow-x: hidden;\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 padding-left: 0.375rem;\n padding-right: 0.375rem;\n}\n.chat-widget__bubble--assistant {\n width: 90%;\n max-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 max-width: 100%;\n min-width: 0;\n overflow-x: hidden;\n}\n.widget-customer-root {\n width: 100%;\n max-width: 100%;\n min-width: 0;\n overflow-x: hidden;\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-link);\n text-decoration: underline;\n}\n.chat-widget__markdown a:hover {\n color: var(--chat-link-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__token-usage {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n padding: 0.25rem 0.25rem 0;\n font-size: 0.6875rem;\n line-height: 1.2;\n color: var(--chat-text-muted);\n}\n.chat-widget__token-usage-item {\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\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');
|
|
25
25
|
|
|
26
26
|
// lib/chat/ChatWidget.tsx
|
|
27
27
|
import { Send, StopCircle } from "lucide-react";
|
|
@@ -4217,6 +4217,15 @@ function createAuthAwareFetch(tokenRef, onAuthError) {
|
|
|
4217
4217
|
return response;
|
|
4218
4218
|
};
|
|
4219
4219
|
}
|
|
4220
|
+
function extractUsageData(dataPart) {
|
|
4221
|
+
if (dataPart && typeof dataPart === "object") {
|
|
4222
|
+
const part = dataPart;
|
|
4223
|
+
if (part.type === "data-usage" && part.data) {
|
|
4224
|
+
return part.data;
|
|
4225
|
+
}
|
|
4226
|
+
}
|
|
4227
|
+
return null;
|
|
4228
|
+
}
|
|
4220
4229
|
var EMPTY_HEADERS = {};
|
|
4221
4230
|
function useChat({
|
|
4222
4231
|
api,
|
|
@@ -4295,11 +4304,10 @@ function useChat({
|
|
|
4295
4304
|
},
|
|
4296
4305
|
onData: (dataPart) => {
|
|
4297
4306
|
onData?.(dataPart);
|
|
4298
|
-
|
|
4299
|
-
|
|
4300
|
-
|
|
4301
|
-
|
|
4302
|
-
}
|
|
4307
|
+
const usageData = extractUsageData(dataPart);
|
|
4308
|
+
if (usageData) {
|
|
4309
|
+
setUsage(usageData);
|
|
4310
|
+
onUsage?.(usageData);
|
|
4303
4311
|
}
|
|
4304
4312
|
}
|
|
4305
4313
|
});
|
|
@@ -4320,6 +4328,7 @@ function useChat({
|
|
|
4320
4328
|
[sendMessage]
|
|
4321
4329
|
);
|
|
4322
4330
|
const [isLoadingInitial, setIsLoadingInitial] = useState(true);
|
|
4331
|
+
const [usage, setUsage] = useState(null);
|
|
4323
4332
|
const hasFetchedRef = useRef(false);
|
|
4324
4333
|
useEffect(() => {
|
|
4325
4334
|
hasFetchedRef.current = false;
|
|
@@ -4416,7 +4425,8 @@ function useChat({
|
|
|
4416
4425
|
addToolOutput,
|
|
4417
4426
|
addToolApprovalResponse,
|
|
4418
4427
|
pendingToolOutput,
|
|
4419
|
-
pendingToolApproval
|
|
4428
|
+
pendingToolApproval,
|
|
4429
|
+
usage
|
|
4420
4430
|
};
|
|
4421
4431
|
}
|
|
4422
4432
|
|
|
@@ -5436,6 +5446,40 @@ function FullDisplayMode({
|
|
|
5436
5446
|
}) });
|
|
5437
5447
|
}
|
|
5438
5448
|
|
|
5449
|
+
// lib/chat/display-modes/HideToolsDisplayMode.tsx
|
|
5450
|
+
import { Fragment as Fragment4, jsx as jsx12 } from "react/jsx-runtime";
|
|
5451
|
+
function isToolCallPart(part) {
|
|
5452
|
+
return part.type.startsWith("tool-") || part.type === "dynamic-tool";
|
|
5453
|
+
}
|
|
5454
|
+
function HideToolsDisplayMode({
|
|
5455
|
+
sections,
|
|
5456
|
+
messageId,
|
|
5457
|
+
renderPart,
|
|
5458
|
+
renderGroup
|
|
5459
|
+
}) {
|
|
5460
|
+
return /* @__PURE__ */ jsx12(Fragment4, { children: sections.map((section, sectionIdx) => {
|
|
5461
|
+
const visibleParts = section.parts.filter((part) => !isToolCallPart(part));
|
|
5462
|
+
if (visibleParts.length === 0) return null;
|
|
5463
|
+
const sectionKey = `${messageId}-section-${sectionIdx}`;
|
|
5464
|
+
const children = visibleParts.map((part, partIdx) => /* @__PURE__ */ jsx12(
|
|
5465
|
+
"div",
|
|
5466
|
+
{
|
|
5467
|
+
className: "chat-widget__hide-tools-part",
|
|
5468
|
+
children: renderPart(part, `${sectionKey}-part-${partIdx}`)
|
|
5469
|
+
},
|
|
5470
|
+
`${sectionKey}-part-${partIdx}`
|
|
5471
|
+
));
|
|
5472
|
+
if (section.type === "step") {
|
|
5473
|
+
return /* @__PURE__ */ jsx12("div", { className: "chat-widget__hide-tools-section", children }, sectionKey);
|
|
5474
|
+
}
|
|
5475
|
+
if (section.type === "group") {
|
|
5476
|
+
const groupKey = `${messageId}-group-${section.groupName}`;
|
|
5477
|
+
return /* @__PURE__ */ jsx12("div", { className: "chat-widget__hide-tools-section", children: renderGroup(section.groupName, groupKey, /* @__PURE__ */ jsx12(Fragment4, { children })) }, sectionKey);
|
|
5478
|
+
}
|
|
5479
|
+
return null;
|
|
5480
|
+
}) });
|
|
5481
|
+
}
|
|
5482
|
+
|
|
5439
5483
|
// lib/chat/renderers/MessageRenderer.tsx
|
|
5440
5484
|
import React5, { useCallback as useCallback6, useMemo as useMemo4 } from "react";
|
|
5441
5485
|
import ReactMarkdown from "react-markdown";
|
|
@@ -8905,7 +8949,7 @@ styleInject(".chat-widget__feedback {\n display: flex;\n align-items: center;\
|
|
|
8905
8949
|
// lib/chat/components/MessageFeedback.tsx
|
|
8906
8950
|
import { MessageSquare, MessageSquareText, ThumbsDown, ThumbsUp } from "lucide-react";
|
|
8907
8951
|
import { useCallback as useCallback5, useEffect as useEffect4, useState as useState7 } from "react";
|
|
8908
|
-
import { jsx as
|
|
8952
|
+
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
8909
8953
|
var classNames = {
|
|
8910
8954
|
wrapper: "chat-widget__feedback-wrapper",
|
|
8911
8955
|
container: "chat-widget__feedback",
|
|
@@ -9024,7 +9068,7 @@ var MessageFeedback = ({
|
|
|
9024
9068
|
const CommentIcon = hasComment ? MessageSquareText : MessageSquare;
|
|
9025
9069
|
return /* @__PURE__ */ jsxs10("div", { className: classNames.wrapper, children: [
|
|
9026
9070
|
/* @__PURE__ */ jsxs10("div", { className: classNames.container, children: [
|
|
9027
|
-
/* @__PURE__ */
|
|
9071
|
+
/* @__PURE__ */ jsx13(
|
|
9028
9072
|
"button",
|
|
9029
9073
|
{
|
|
9030
9074
|
type: "button",
|
|
@@ -9033,10 +9077,10 @@ var MessageFeedback = ({
|
|
|
9033
9077
|
disabled: isSubmitting,
|
|
9034
9078
|
title: "Good response",
|
|
9035
9079
|
"aria-label": "Mark as good response",
|
|
9036
|
-
children: /* @__PURE__ */
|
|
9080
|
+
children: /* @__PURE__ */ jsx13(ThumbsUp, { className: classNames.icon })
|
|
9037
9081
|
}
|
|
9038
9082
|
),
|
|
9039
|
-
/* @__PURE__ */
|
|
9083
|
+
/* @__PURE__ */ jsx13(
|
|
9040
9084
|
"button",
|
|
9041
9085
|
{
|
|
9042
9086
|
type: "button",
|
|
@@ -9045,10 +9089,10 @@ var MessageFeedback = ({
|
|
|
9045
9089
|
disabled: isSubmitting,
|
|
9046
9090
|
title: "Could be improved",
|
|
9047
9091
|
"aria-label": "Mark as could be improved",
|
|
9048
|
-
children: /* @__PURE__ */
|
|
9092
|
+
children: /* @__PURE__ */ jsx13(ThumbsDown, { className: classNames.icon })
|
|
9049
9093
|
}
|
|
9050
9094
|
),
|
|
9051
|
-
/* @__PURE__ */
|
|
9095
|
+
/* @__PURE__ */ jsx13(
|
|
9052
9096
|
"button",
|
|
9053
9097
|
{
|
|
9054
9098
|
type: "button",
|
|
@@ -9057,14 +9101,14 @@ var MessageFeedback = ({
|
|
|
9057
9101
|
disabled: isSubmitting,
|
|
9058
9102
|
title: "Add comment",
|
|
9059
9103
|
"aria-label": "Add comment",
|
|
9060
|
-
children: /* @__PURE__ */
|
|
9104
|
+
children: /* @__PURE__ */ jsx13(CommentIcon, { className: classNames.icon })
|
|
9061
9105
|
}
|
|
9062
9106
|
)
|
|
9063
9107
|
] }),
|
|
9064
9108
|
showCommentBox && /* @__PURE__ */ jsxs10("div", { className: classNames.commentSection, children: [
|
|
9065
|
-
/* @__PURE__ */
|
|
9109
|
+
/* @__PURE__ */ jsx13("div", { className: classNames.commentHeader, children: isCommentRequired && /* @__PURE__ */ jsx13("span", { className: classNames.commentRequired, children: "Required" }) }),
|
|
9066
9110
|
/* @__PURE__ */ jsxs10("div", { className: classNames.commentBody, children: [
|
|
9067
|
-
/* @__PURE__ */
|
|
9111
|
+
/* @__PURE__ */ jsx13(
|
|
9068
9112
|
"textarea",
|
|
9069
9113
|
{
|
|
9070
9114
|
className: classNames.textarea,
|
|
@@ -9075,7 +9119,7 @@ var MessageFeedback = ({
|
|
|
9075
9119
|
}
|
|
9076
9120
|
),
|
|
9077
9121
|
/* @__PURE__ */ jsxs10("div", { className: classNames.actions, children: [
|
|
9078
|
-
/* @__PURE__ */
|
|
9122
|
+
/* @__PURE__ */ jsx13(
|
|
9079
9123
|
"button",
|
|
9080
9124
|
{
|
|
9081
9125
|
type: "button",
|
|
@@ -9085,7 +9129,7 @@ var MessageFeedback = ({
|
|
|
9085
9129
|
children: "Save"
|
|
9086
9130
|
}
|
|
9087
9131
|
),
|
|
9088
|
-
/* @__PURE__ */
|
|
9132
|
+
/* @__PURE__ */ jsx13(
|
|
9089
9133
|
"button",
|
|
9090
9134
|
{
|
|
9091
9135
|
type: "button",
|
|
@@ -9105,7 +9149,7 @@ styleInject('.tag-group {\n margin: 6px 0;\n}\n.tag-group-header {\n display:
|
|
|
9105
9149
|
|
|
9106
9150
|
// lib/chat/components/TagGroupDisplay.tsx
|
|
9107
9151
|
import { ChevronRight } from "lucide-react";
|
|
9108
|
-
import { jsx as
|
|
9152
|
+
import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
9109
9153
|
function TagGroupDisplay({
|
|
9110
9154
|
tagId,
|
|
9111
9155
|
isExpanded,
|
|
@@ -9121,18 +9165,18 @@ function TagGroupDisplay({
|
|
|
9121
9165
|
"aria-expanded": isExpanded,
|
|
9122
9166
|
type: "button",
|
|
9123
9167
|
children: [
|
|
9124
|
-
/* @__PURE__ */
|
|
9168
|
+
/* @__PURE__ */ jsx14(
|
|
9125
9169
|
ChevronRight,
|
|
9126
9170
|
{
|
|
9127
9171
|
className: `tag-group-chevron ${isExpanded ? "tag-group-chevron--expanded" : ""}`,
|
|
9128
9172
|
"aria-hidden": "true"
|
|
9129
9173
|
}
|
|
9130
9174
|
),
|
|
9131
|
-
/* @__PURE__ */
|
|
9175
|
+
/* @__PURE__ */ jsx14("span", { className: "tag-group-label", children: tagId })
|
|
9132
9176
|
]
|
|
9133
9177
|
}
|
|
9134
9178
|
),
|
|
9135
|
-
isExpanded && /* @__PURE__ */
|
|
9179
|
+
isExpanded && /* @__PURE__ */ jsx14("div", { className: "tag-group-content", role: "region", children })
|
|
9136
9180
|
] });
|
|
9137
9181
|
}
|
|
9138
9182
|
|
|
@@ -9141,13 +9185,13 @@ styleInject(".tool-call-item {\n font-size: 13px;\n color: var(--chat-text-mut
|
|
|
9141
9185
|
|
|
9142
9186
|
// lib/chat/components/ToolCallDisplay.tsx
|
|
9143
9187
|
import { useState as useState8 } from "react";
|
|
9144
|
-
import { jsx as
|
|
9188
|
+
import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
9145
9189
|
function CollapsibleSection({ label, content }) {
|
|
9146
9190
|
const [isCollapsed, setIsCollapsed] = useState8(false);
|
|
9147
9191
|
return /* @__PURE__ */ jsxs12("div", { className: "tool-call-section", children: [
|
|
9148
|
-
/* @__PURE__ */
|
|
9192
|
+
/* @__PURE__ */ jsx15("div", { className: "tool-call-section-label", children: label }),
|
|
9149
9193
|
/* @__PURE__ */ jsxs12("div", { className: "tool-call-section-content-wrapper", children: [
|
|
9150
|
-
/* @__PURE__ */
|
|
9194
|
+
/* @__PURE__ */ jsx15(
|
|
9151
9195
|
"button",
|
|
9152
9196
|
{
|
|
9153
9197
|
className: "tool-call-section-toggle",
|
|
@@ -9156,7 +9200,7 @@ function CollapsibleSection({ label, content }) {
|
|
|
9156
9200
|
children: isCollapsed ? "SHOW" : "HIDE"
|
|
9157
9201
|
}
|
|
9158
9202
|
),
|
|
9159
|
-
/* @__PURE__ */
|
|
9203
|
+
/* @__PURE__ */ jsx15("div", { className: `tool-call-section-content ${isCollapsed ? "collapsed" : ""}`, children: /* @__PURE__ */ jsx15("pre", { children: formatOutput(content) }) })
|
|
9160
9204
|
] })
|
|
9161
9205
|
] });
|
|
9162
9206
|
}
|
|
@@ -9175,13 +9219,13 @@ function ToolCallDisplay({ toolPart, className = "" }) {
|
|
|
9175
9219
|
const canExpand = hasInput || hasOutput;
|
|
9176
9220
|
const renderStatusIcon = () => {
|
|
9177
9221
|
if (isLoading) {
|
|
9178
|
-
return /* @__PURE__ */
|
|
9222
|
+
return /* @__PURE__ */ jsx15("span", { className: "tool-call-spinner" });
|
|
9179
9223
|
}
|
|
9180
9224
|
const borderClass = hasFailed ? "tool-call-status-icon--error" : "";
|
|
9181
|
-
return /* @__PURE__ */
|
|
9182
|
-
/* @__PURE__ */
|
|
9183
|
-
/* @__PURE__ */
|
|
9184
|
-
] }) : /* @__PURE__ */
|
|
9225
|
+
return /* @__PURE__ */ jsx15("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: [
|
|
9226
|
+
/* @__PURE__ */ jsx15("line", { x1: "5", y1: "5", x2: "11", y2: "11" }),
|
|
9227
|
+
/* @__PURE__ */ jsx15("line", { x1: "11", y1: "5", x2: "5", y2: "11" })
|
|
9228
|
+
] }) : /* @__PURE__ */ jsx15("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__ */ jsx15("polyline", { points: "4,8 7,11 12,5" }) }) });
|
|
9185
9229
|
};
|
|
9186
9230
|
return /* @__PURE__ */ jsxs12("div", { className: `tool-call-item ${className}`, children: [
|
|
9187
9231
|
/* @__PURE__ */ jsxs12("div", { className: "tool-call-header", children: [
|
|
@@ -9189,9 +9233,9 @@ function ToolCallDisplay({ toolPart, className = "" }) {
|
|
|
9189
9233
|
/* @__PURE__ */ jsxs12("span", { className: "tool-call-label", children: [
|
|
9190
9234
|
isLoading ? "Calling" : "Called",
|
|
9191
9235
|
" ",
|
|
9192
|
-
/* @__PURE__ */
|
|
9236
|
+
/* @__PURE__ */ jsx15("code", { children: toolName })
|
|
9193
9237
|
] }),
|
|
9194
|
-
canExpand && /* @__PURE__ */
|
|
9238
|
+
canExpand && /* @__PURE__ */ jsx15(
|
|
9195
9239
|
"button",
|
|
9196
9240
|
{
|
|
9197
9241
|
className: "tool-call-toggle",
|
|
@@ -9200,12 +9244,12 @@ function ToolCallDisplay({ toolPart, className = "" }) {
|
|
|
9200
9244
|
children: isExpanded ? "HIDE" : "SHOW"
|
|
9201
9245
|
}
|
|
9202
9246
|
),
|
|
9203
|
-
isDenied && /* @__PURE__ */
|
|
9204
|
-
hasError && /* @__PURE__ */
|
|
9247
|
+
isDenied && /* @__PURE__ */ jsx15("span", { className: "tool-call-error", children: "DENIED" }),
|
|
9248
|
+
hasError && /* @__PURE__ */ jsx15("span", { className: "tool-call-error", children: "ERROR" })
|
|
9205
9249
|
] }),
|
|
9206
9250
|
isExpanded && canExpand && /* @__PURE__ */ jsxs12("div", { className: "tool-call-details", children: [
|
|
9207
|
-
hasInput && /* @__PURE__ */
|
|
9208
|
-
hasOutput && /* @__PURE__ */
|
|
9251
|
+
hasInput && /* @__PURE__ */ jsx15(CollapsibleSection, { label: "IN", content: input }),
|
|
9252
|
+
hasOutput && /* @__PURE__ */ jsx15(CollapsibleSection, { label: "OUT", content: output })
|
|
9209
9253
|
] })
|
|
9210
9254
|
] });
|
|
9211
9255
|
}
|
|
@@ -9240,7 +9284,7 @@ function createSDKWidget(widget) {
|
|
|
9240
9284
|
var createWidget = (widget) => widget;
|
|
9241
9285
|
|
|
9242
9286
|
// lib/chat/components/WidgetRenderer.tsx
|
|
9243
|
-
import { Fragment as
|
|
9287
|
+
import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
9244
9288
|
function renderError(container, message) {
|
|
9245
9289
|
container.innerHTML = "";
|
|
9246
9290
|
const errorDiv = document.createElement("div");
|
|
@@ -9398,7 +9442,7 @@ To fix, add your ReactDOM to the widget config:
|
|
|
9398
9442
|
sendMessage,
|
|
9399
9443
|
sendStructuredMessage
|
|
9400
9444
|
});
|
|
9401
|
-
return /* @__PURE__ */
|
|
9445
|
+
return /* @__PURE__ */ jsx16(Fragment5, { children: element });
|
|
9402
9446
|
} catch (error) {
|
|
9403
9447
|
console.error(`SDK widget "${widget.widgetType}" render threw:`, error);
|
|
9404
9448
|
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
@@ -9408,19 +9452,19 @@ To fix, add your ReactDOM to the widget config:
|
|
|
9408
9452
|
] });
|
|
9409
9453
|
}
|
|
9410
9454
|
}
|
|
9411
|
-
return /* @__PURE__ */
|
|
9455
|
+
return /* @__PURE__ */ jsx16("div", { ref: containerRef, className: "widget-customer-root" });
|
|
9412
9456
|
}
|
|
9413
9457
|
|
|
9414
9458
|
// lib/chat/renderers/MessageRenderer.tsx
|
|
9415
|
-
import { Fragment as
|
|
9459
|
+
import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
9416
9460
|
function FormattedMarkdownComponent({ children }) {
|
|
9417
9461
|
const MarkdownComponent = ReactMarkdown;
|
|
9418
|
-
return /* @__PURE__ */
|
|
9462
|
+
return /* @__PURE__ */ jsx17(
|
|
9419
9463
|
MarkdownComponent,
|
|
9420
9464
|
{
|
|
9421
9465
|
remarkPlugins: [remarkGfm],
|
|
9422
9466
|
components: {
|
|
9423
|
-
a: ({ children: children2, href, ...props }) => /* @__PURE__ */
|
|
9467
|
+
a: ({ children: children2, href, ...props }) => /* @__PURE__ */ jsx17("a", { href, target: "_blank", rel: "noopener noreferrer", ...props, children: children2 })
|
|
9424
9468
|
},
|
|
9425
9469
|
children: children.replace(/\n\n/gi, "\n\n \n\n")
|
|
9426
9470
|
}
|
|
@@ -9460,10 +9504,10 @@ function MessageRenderer({
|
|
|
9460
9504
|
if (part.type === "text") {
|
|
9461
9505
|
const trimmed = part.text?.trim();
|
|
9462
9506
|
if (!trimmed) return null;
|
|
9463
|
-
return /* @__PURE__ */
|
|
9507
|
+
return /* @__PURE__ */ jsx17("div", { className: "chat-widget__markdown", children: /* @__PURE__ */ jsx17(FormattedMarkdown, { children: trimmed }) }, key);
|
|
9464
9508
|
}
|
|
9465
9509
|
if (part.type.startsWith("tool-") || part.type === "dynamic-tool") {
|
|
9466
|
-
return /* @__PURE__ */
|
|
9510
|
+
return /* @__PURE__ */ jsx17(ToolCallDisplay, { toolPart: part }, key);
|
|
9467
9511
|
}
|
|
9468
9512
|
if (part.type === "data-ui") {
|
|
9469
9513
|
const dataPart = part;
|
|
@@ -9476,7 +9520,7 @@ function MessageRenderer({
|
|
|
9476
9520
|
"]"
|
|
9477
9521
|
] }, key);
|
|
9478
9522
|
}
|
|
9479
|
-
return /* @__PURE__ */
|
|
9523
|
+
return /* @__PURE__ */ jsx17(React5.Fragment, { children: uiWidgets.map((widget, idx) => {
|
|
9480
9524
|
const widgetDef = widgets.find((w) => w.widgetType === widget.widgetType);
|
|
9481
9525
|
if (!widgetDef) {
|
|
9482
9526
|
return /* @__PURE__ */ jsxs14("span", { children: [
|
|
@@ -9485,12 +9529,12 @@ function MessageRenderer({
|
|
|
9485
9529
|
"]"
|
|
9486
9530
|
] }, `${key}-widget-${idx}`);
|
|
9487
9531
|
}
|
|
9488
|
-
return /* @__PURE__ */
|
|
9532
|
+
return /* @__PURE__ */ jsx17(
|
|
9489
9533
|
"div",
|
|
9490
9534
|
{
|
|
9491
9535
|
className: "chat-widget__widget",
|
|
9492
9536
|
inert: readonly ? true : void 0,
|
|
9493
|
-
children: /* @__PURE__ */
|
|
9537
|
+
children: /* @__PURE__ */ jsx17(
|
|
9494
9538
|
WidgetRenderer,
|
|
9495
9539
|
{
|
|
9496
9540
|
widget: widgetDef,
|
|
@@ -9515,7 +9559,7 @@ function MessageRenderer({
|
|
|
9515
9559
|
const renderGroup = useCallback6(
|
|
9516
9560
|
(groupName, key, children) => {
|
|
9517
9561
|
const isExpanded = tagExpansion?.state.get(key) ?? true;
|
|
9518
|
-
return /* @__PURE__ */
|
|
9562
|
+
return /* @__PURE__ */ jsx17(
|
|
9519
9563
|
TagGroupDisplay,
|
|
9520
9564
|
{
|
|
9521
9565
|
tagId: groupName,
|
|
@@ -9528,9 +9572,9 @@ function MessageRenderer({
|
|
|
9528
9572
|
},
|
|
9529
9573
|
[tagExpansion]
|
|
9530
9574
|
);
|
|
9531
|
-
const DisplayMode = displayMode === "brief" ? BriefDisplayMode : FullDisplayMode;
|
|
9532
|
-
return /* @__PURE__ */ jsxs14(
|
|
9533
|
-
/* @__PURE__ */
|
|
9575
|
+
const DisplayMode = displayMode === "brief" ? BriefDisplayMode : displayMode === "hide-tools" ? HideToolsDisplayMode : FullDisplayMode;
|
|
9576
|
+
return /* @__PURE__ */ jsxs14(Fragment6, { children: [
|
|
9577
|
+
/* @__PURE__ */ jsx17("div", { className, children: /* @__PURE__ */ jsx17(
|
|
9534
9578
|
DisplayMode,
|
|
9535
9579
|
{
|
|
9536
9580
|
sections: message.sections,
|
|
@@ -9539,7 +9583,7 @@ function MessageRenderer({
|
|
|
9539
9583
|
renderGroup
|
|
9540
9584
|
}
|
|
9541
9585
|
) }),
|
|
9542
|
-
!readonly && feedback && /* @__PURE__ */
|
|
9586
|
+
!readonly && feedback && /* @__PURE__ */ jsx17(
|
|
9543
9587
|
MessageFeedback,
|
|
9544
9588
|
{
|
|
9545
9589
|
messageId: message.id,
|
|
@@ -9554,12 +9598,14 @@ function MessageRenderer({
|
|
|
9554
9598
|
}
|
|
9555
9599
|
|
|
9556
9600
|
// lib/chat/ChatWidget.tsx
|
|
9557
|
-
import { jsx as
|
|
9601
|
+
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
9558
9602
|
var classNames2 = {
|
|
9559
9603
|
container: "chat-widget",
|
|
9560
9604
|
header: "chat-widget__header",
|
|
9561
9605
|
headerTitle: "chat-widget__title",
|
|
9562
9606
|
messagesContainer: "chat-widget__messages",
|
|
9607
|
+
tokenUsage: "chat-widget__token-usage",
|
|
9608
|
+
tokenUsageItem: "chat-widget__token-usage-item",
|
|
9563
9609
|
messageWrapper: "chat-widget__message",
|
|
9564
9610
|
messageRow: "chat-widget__message-row",
|
|
9565
9611
|
userMessageRow: "chat-widget__message-row--user",
|
|
@@ -9684,6 +9730,8 @@ var ChatWidget = forwardRef(function ChatWidget2({
|
|
|
9684
9730
|
onAuthError,
|
|
9685
9731
|
onFinish,
|
|
9686
9732
|
onMessage,
|
|
9733
|
+
onUsage,
|
|
9734
|
+
onData,
|
|
9687
9735
|
title,
|
|
9688
9736
|
initialAssistantMessage,
|
|
9689
9737
|
initialUserMessage,
|
|
@@ -9693,7 +9741,8 @@ var ChatWidget = forwardRef(function ChatWidget2({
|
|
|
9693
9741
|
voice,
|
|
9694
9742
|
speechToText,
|
|
9695
9743
|
widgets,
|
|
9696
|
-
feedback
|
|
9744
|
+
feedback,
|
|
9745
|
+
showTokenUsage = false
|
|
9697
9746
|
}, ref) {
|
|
9698
9747
|
const [detectedDarkMode, setDetectedDarkMode] = useState9(() => detectChatWidgetDarkMode());
|
|
9699
9748
|
useEffect6(() => {
|
|
@@ -9775,7 +9824,8 @@ var ChatWidget = forwardRef(function ChatWidget2({
|
|
|
9775
9824
|
addToolOutput,
|
|
9776
9825
|
addToolApprovalResponse,
|
|
9777
9826
|
pendingToolOutput,
|
|
9778
|
-
pendingToolApproval
|
|
9827
|
+
pendingToolApproval,
|
|
9828
|
+
usage
|
|
9779
9829
|
} = useChat({
|
|
9780
9830
|
api,
|
|
9781
9831
|
threadId,
|
|
@@ -9786,7 +9836,9 @@ var ChatWidget = forwardRef(function ChatWidget2({
|
|
|
9786
9836
|
onError,
|
|
9787
9837
|
onAuthError,
|
|
9788
9838
|
onFinish,
|
|
9789
|
-
onMessage
|
|
9839
|
+
onMessage,
|
|
9840
|
+
onUsage,
|
|
9841
|
+
onData
|
|
9790
9842
|
});
|
|
9791
9843
|
const handleToolOutput = useCallback7((result) => {
|
|
9792
9844
|
if (pendingToolOutput && addToolOutput) {
|
|
@@ -10017,7 +10069,7 @@ var ChatWidget = forwardRef(function ChatWidget2({
|
|
|
10017
10069
|
style: themeVariables,
|
|
10018
10070
|
"data-chat-widget": "",
|
|
10019
10071
|
children: [
|
|
10020
|
-
title && /* @__PURE__ */
|
|
10072
|
+
title && /* @__PURE__ */ jsx18("div", { className: classNames2.header, children: /* @__PURE__ */ jsx18("h3", { className: classNames2.headerTitle, children: title }) }),
|
|
10021
10073
|
/* @__PURE__ */ jsxs15(
|
|
10022
10074
|
"div",
|
|
10023
10075
|
{
|
|
@@ -10029,21 +10081,21 @@ var ChatWidget = forwardRef(function ChatWidget2({
|
|
|
10029
10081
|
const isUser = message.role === "user";
|
|
10030
10082
|
const isLastMessage = index === messages.length - 1;
|
|
10031
10083
|
const showFeedback = feedbackEnabled && !isUser && !(status === "streaming" && isLastMessage);
|
|
10032
|
-
return /* @__PURE__ */
|
|
10084
|
+
return /* @__PURE__ */ jsx18("div", { className: classNames2.messageWrapper, children: /* @__PURE__ */ jsx18(
|
|
10033
10085
|
"div",
|
|
10034
10086
|
{
|
|
10035
10087
|
className: cn(
|
|
10036
10088
|
classNames2.messageRow,
|
|
10037
10089
|
isUser ? classNames2.userMessageRow : classNames2.assistantMessageRow
|
|
10038
10090
|
),
|
|
10039
|
-
children: /* @__PURE__ */
|
|
10091
|
+
children: /* @__PURE__ */ jsx18(
|
|
10040
10092
|
"div",
|
|
10041
10093
|
{
|
|
10042
10094
|
className: cn(
|
|
10043
10095
|
classNames2.messageBubble,
|
|
10044
10096
|
isUser ? classNames2.userMessage : classNames2.assistantMessage
|
|
10045
10097
|
),
|
|
10046
|
-
children: /* @__PURE__ */
|
|
10098
|
+
children: /* @__PURE__ */ jsx18(
|
|
10047
10099
|
MessageRenderer,
|
|
10048
10100
|
{
|
|
10049
10101
|
message,
|
|
@@ -10078,17 +10130,29 @@ var ChatWidget = forwardRef(function ChatWidget2({
|
|
|
10078
10130
|
}
|
|
10079
10131
|
) }, message.id);
|
|
10080
10132
|
}),
|
|
10081
|
-
status === "streaming" && /* @__PURE__ */
|
|
10082
|
-
/* @__PURE__ */
|
|
10083
|
-
/* @__PURE__ */
|
|
10084
|
-
/* @__PURE__ */
|
|
10133
|
+
status === "streaming" && /* @__PURE__ */ jsx18("div", { className: classNames2.loadingContainer, children: /* @__PURE__ */ jsx18("div", { className: classNames2.loadingBubble, children: /* @__PURE__ */ jsxs15("div", { className: classNames2.loadingDots, children: [
|
|
10134
|
+
/* @__PURE__ */ jsx18("div", { className: classNames2.loadingDot }),
|
|
10135
|
+
/* @__PURE__ */ jsx18("div", { className: classNames2.loadingDot, "data-delay": "1" }),
|
|
10136
|
+
/* @__PURE__ */ jsx18("div", { className: classNames2.loadingDot, "data-delay": "2" })
|
|
10085
10137
|
] }) }) }),
|
|
10086
|
-
/* @__PURE__ */
|
|
10138
|
+
/* @__PURE__ */ jsx18("div", { ref: messagesEndRef })
|
|
10087
10139
|
]
|
|
10088
10140
|
}
|
|
10089
10141
|
),
|
|
10090
|
-
/* @__PURE__ */
|
|
10091
|
-
/* @__PURE__ */
|
|
10142
|
+
showTokenUsage && usage && /* @__PURE__ */ jsxs15("div", { className: classNames2.tokenUsage, "aria-label": "Token usage", children: [
|
|
10143
|
+
/* @__PURE__ */ jsxs15("span", { className: classNames2.tokenUsageItem, title: "Input tokens", children: [
|
|
10144
|
+
"\u2191 ",
|
|
10145
|
+
usage.inputTokens.toLocaleString(),
|
|
10146
|
+
" in"
|
|
10147
|
+
] }),
|
|
10148
|
+
/* @__PURE__ */ jsxs15("span", { className: classNames2.tokenUsageItem, title: "Output tokens", children: [
|
|
10149
|
+
"\u2193 ",
|
|
10150
|
+
usage.outputTokens.toLocaleString(),
|
|
10151
|
+
" out"
|
|
10152
|
+
] })
|
|
10153
|
+
] }),
|
|
10154
|
+
/* @__PURE__ */ jsx18("div", { className: classNames2.inputContainer, children: /* @__PURE__ */ jsxs15("form", { onSubmit: handleSubmit, className: classNames2.inputForm, children: [
|
|
10155
|
+
/* @__PURE__ */ jsx18(
|
|
10092
10156
|
"textarea",
|
|
10093
10157
|
{
|
|
10094
10158
|
ref: textareaRef,
|
|
@@ -10101,7 +10165,7 @@ var ChatWidget = forwardRef(function ChatWidget2({
|
|
|
10101
10165
|
className: classNames2.textarea
|
|
10102
10166
|
}
|
|
10103
10167
|
),
|
|
10104
|
-
/* @__PURE__ */
|
|
10168
|
+
/* @__PURE__ */ jsx18("div", { className: classNames2.toolbar, children: speechEnabled && /* @__PURE__ */ jsx18(
|
|
10105
10169
|
SpeechToTextButton,
|
|
10106
10170
|
{
|
|
10107
10171
|
className: classNames2.micButton,
|
|
@@ -10115,25 +10179,25 @@ var ChatWidget = forwardRef(function ChatWidget2({
|
|
|
10115
10179
|
onListeningChange: setIsMicActive
|
|
10116
10180
|
}
|
|
10117
10181
|
) }),
|
|
10118
|
-
/* @__PURE__ */
|
|
10182
|
+
/* @__PURE__ */ jsx18(
|
|
10119
10183
|
"button",
|
|
10120
10184
|
{
|
|
10121
10185
|
type: "button",
|
|
10122
10186
|
onClick: status === "streaming" ? stop : handleSendMessage,
|
|
10123
10187
|
disabled: status === "streaming" ? false : !input.trim() || isInputDisabled,
|
|
10124
10188
|
className: classNames2.submitButton,
|
|
10125
|
-
children: status === "streaming" ? /* @__PURE__ */
|
|
10189
|
+
children: status === "streaming" ? /* @__PURE__ */ jsx18(StopCircle, { className: classNames2.sendIcon }) : /* @__PURE__ */ jsx18(Send, { className: classNames2.sendIcon })
|
|
10126
10190
|
}
|
|
10127
10191
|
)
|
|
10128
10192
|
] }) }),
|
|
10129
|
-
pendingToolOutput && /* @__PURE__ */
|
|
10193
|
+
pendingToolOutput && /* @__PURE__ */ jsx18(
|
|
10130
10194
|
InputFormOverlay,
|
|
10131
10195
|
{
|
|
10132
10196
|
args: pendingToolOutput.args,
|
|
10133
10197
|
onComplete: handleToolOutput
|
|
10134
10198
|
}
|
|
10135
10199
|
),
|
|
10136
|
-
pendingToolApproval && /* @__PURE__ */
|
|
10200
|
+
pendingToolApproval && /* @__PURE__ */ jsx18(
|
|
10137
10201
|
ToolApprovalOverlay,
|
|
10138
10202
|
{
|
|
10139
10203
|
approval: pendingToolApproval,
|
|
@@ -10154,7 +10218,7 @@ styleInject(".chat-popup__anchor {\n position: fixed;\n inset-block-end: 20px;
|
|
|
10154
10218
|
// lib/chat/PopupChatWidget.tsx
|
|
10155
10219
|
import { MessageSquare as MessageSquare2, X } from "lucide-react";
|
|
10156
10220
|
import { useEffect as useEffect7, useMemo as useMemo6, useState as useState10 } from "react";
|
|
10157
|
-
import { jsx as
|
|
10221
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
10158
10222
|
function PopupChatWidget({ anchor, ...props }) {
|
|
10159
10223
|
const [isOpen, setIsOpen] = useState10(anchor?.initiallyOpen ?? false);
|
|
10160
10224
|
const [hasOpened, setHasOpened] = useState10(anchor?.initiallyOpen ?? false);
|
|
@@ -10238,7 +10302,7 @@ function PopupChatWidget({ anchor, ...props }) {
|
|
|
10238
10302
|
};
|
|
10239
10303
|
}, [props.popupSize]);
|
|
10240
10304
|
return /* @__PURE__ */ jsxs16("div", { style: themeStyle, children: [
|
|
10241
|
-
/* @__PURE__ */
|
|
10305
|
+
/* @__PURE__ */ jsx19("div", { className: cn("chat-popup__anchor", anchorPositionClass), children: anchor?.render ? anchor.render({ isOpen: openResolved, toggle: handleToggle }) : !openResolved && /* @__PURE__ */ jsxs16(
|
|
10242
10306
|
"button",
|
|
10243
10307
|
{
|
|
10244
10308
|
type: "button",
|
|
@@ -10247,12 +10311,12 @@ function PopupChatWidget({ anchor, ...props }) {
|
|
|
10247
10311
|
"aria-expanded": isOpen,
|
|
10248
10312
|
"aria-label": anchor?.label ?? "Open chat",
|
|
10249
10313
|
children: [
|
|
10250
|
-
/* @__PURE__ */
|
|
10251
|
-
/* @__PURE__ */
|
|
10314
|
+
/* @__PURE__ */ jsx19(MessageSquare2, { className: "chat-popup__anchor-icon" }),
|
|
10315
|
+
/* @__PURE__ */ jsx19("span", { children: anchor?.label ?? "Chat" })
|
|
10252
10316
|
]
|
|
10253
10317
|
}
|
|
10254
10318
|
) }),
|
|
10255
|
-
/* @__PURE__ */
|
|
10319
|
+
/* @__PURE__ */ jsx19(
|
|
10256
10320
|
"div",
|
|
10257
10321
|
{
|
|
10258
10322
|
className: cn(
|
|
@@ -10261,26 +10325,26 @@ function PopupChatWidget({ anchor, ...props }) {
|
|
|
10261
10325
|
openResolved ? "chat-popup__panel--open" : "chat-popup__panel--closed"
|
|
10262
10326
|
),
|
|
10263
10327
|
children: /* @__PURE__ */ jsxs16("div", { className: "chat-popup__panel-inner", style: popupStyle, children: [
|
|
10264
|
-
showClose && /* @__PURE__ */
|
|
10328
|
+
showClose && /* @__PURE__ */ jsx19(
|
|
10265
10329
|
"div",
|
|
10266
10330
|
{
|
|
10267
10331
|
className: cn(
|
|
10268
10332
|
"chat-popup__close",
|
|
10269
10333
|
closeConfig?.position === "top-start" ? "chat-popup__close--start" : "chat-popup__close--end"
|
|
10270
10334
|
),
|
|
10271
|
-
children: closeConfig?.render ? closeConfig.render({ toggle: handleToggle }) : /* @__PURE__ */
|
|
10335
|
+
children: closeConfig?.render ? closeConfig.render({ toggle: handleToggle }) : /* @__PURE__ */ jsx19(
|
|
10272
10336
|
"button",
|
|
10273
10337
|
{
|
|
10274
10338
|
type: "button",
|
|
10275
10339
|
className: "chat-popup__close-button",
|
|
10276
10340
|
onClick: handleToggle,
|
|
10277
10341
|
"aria-label": "Close chat",
|
|
10278
|
-
children: /* @__PURE__ */
|
|
10342
|
+
children: /* @__PURE__ */ jsx19(X, { className: "chat-popup__close-icon" })
|
|
10279
10343
|
}
|
|
10280
10344
|
)
|
|
10281
10345
|
}
|
|
10282
10346
|
),
|
|
10283
|
-
hasOpened && /* @__PURE__ */
|
|
10347
|
+
hasOpened && /* @__PURE__ */ jsx19(
|
|
10284
10348
|
ChatWidget,
|
|
10285
10349
|
{
|
|
10286
10350
|
...props,
|
|
@@ -10300,7 +10364,7 @@ import z10 from "zod";
|
|
|
10300
10364
|
import { MessageSquare as MessageSquare3, MessageSquareText as MessageSquareText2, ThumbsDown as ThumbsDown2, ThumbsUp as ThumbsUp2 } from "lucide-react";
|
|
10301
10365
|
import { useEffect as useEffect8, useMemo as useMemo7, useRef as useRef6, useState as useState11 } from "react";
|
|
10302
10366
|
import z9 from "zod";
|
|
10303
|
-
import { Fragment as
|
|
10367
|
+
import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
10304
10368
|
var vendorCardsHybridSchema = z9.object({
|
|
10305
10369
|
fromLocation: z9.string().describe("The location the user is searching from"),
|
|
10306
10370
|
fromCoordinates: z9.object({
|
|
@@ -10414,12 +10478,12 @@ function HybridVendorCards({
|
|
|
10414
10478
|
return miles < 0.1 ? "< 0.1 mi" : `${miles.toFixed(1)} mi`;
|
|
10415
10479
|
};
|
|
10416
10480
|
if (!serverEnriched || !serverEnriched.vendorDetails) {
|
|
10417
|
-
return /* @__PURE__ */
|
|
10481
|
+
return /* @__PURE__ */ jsx20("div", { children: "Loading vendor details..." });
|
|
10418
10482
|
}
|
|
10419
10483
|
const vendorData = serverEnriched.vendorDetails?.data ?? {};
|
|
10420
10484
|
const distances = distanceMatrix?.data ?? [];
|
|
10421
10485
|
return /* @__PURE__ */ jsxs17("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
|
|
10422
|
-
loadingDistance && /* @__PURE__ */
|
|
10486
|
+
loadingDistance && /* @__PURE__ */ jsx20("style", { children: `@keyframes hybrid-vendor-cards-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }` }),
|
|
10423
10487
|
payload.vendors.map((v, index) => {
|
|
10424
10488
|
const data = vendorData[v.vendor_id];
|
|
10425
10489
|
const name23 = data?.names?.[0]?.value ?? "Unknown";
|
|
@@ -10451,8 +10515,8 @@ function HybridVendorCards({
|
|
|
10451
10515
|
position: "relative"
|
|
10452
10516
|
},
|
|
10453
10517
|
children: [
|
|
10454
|
-
/* @__PURE__ */
|
|
10455
|
-
/* @__PURE__ */
|
|
10518
|
+
/* @__PURE__ */ jsx20("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
10519
|
+
/* @__PURE__ */ jsx20("div", { style: {
|
|
10456
10520
|
width: "2rem",
|
|
10457
10521
|
height: "2rem",
|
|
10458
10522
|
borderRadius: "9999px",
|
|
@@ -10464,29 +10528,29 @@ function HybridVendorCards({
|
|
|
10464
10528
|
fontSize: "0.875rem",
|
|
10465
10529
|
color: "#374151"
|
|
10466
10530
|
}, children: name23.charAt(0).toUpperCase() }),
|
|
10467
|
-
/* @__PURE__ */
|
|
10531
|
+
/* @__PURE__ */ jsx20("span", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827" }, children: name23 })
|
|
10468
10532
|
] }) }),
|
|
10469
10533
|
(reviewCount != null || cnScore != null) && /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", color: "#6b7280" }, children: [
|
|
10470
|
-
avgRating != null && /* @__PURE__ */ jsxs17(
|
|
10471
|
-
/* @__PURE__ */
|
|
10472
|
-
/* @__PURE__ */
|
|
10534
|
+
avgRating != null && /* @__PURE__ */ jsxs17(Fragment7, { children: [
|
|
10535
|
+
/* @__PURE__ */ jsx20("span", { style: { color: "#facc15" }, children: "\u2605" }),
|
|
10536
|
+
/* @__PURE__ */ jsx20("span", { children: avgRating.toFixed(1) }),
|
|
10473
10537
|
reviewCount != null && /* @__PURE__ */ jsxs17("span", { style: { color: "#9ca3af" }, children: [
|
|
10474
10538
|
"(",
|
|
10475
10539
|
reviewCount,
|
|
10476
10540
|
" reviews)"
|
|
10477
10541
|
] })
|
|
10478
10542
|
] }),
|
|
10479
|
-
avgRating != null && cnScore != null ? /* @__PURE__ */
|
|
10543
|
+
avgRating != null && cnScore != null ? /* @__PURE__ */ jsx20("span", { style: { color: "#9ca3af" }, children: "\u2022" }) : null,
|
|
10480
10544
|
cnScore != null ? /* @__PURE__ */ jsxs17("span", { children: [
|
|
10481
10545
|
"CN Score: ",
|
|
10482
10546
|
cnScore
|
|
10483
10547
|
] }) : null
|
|
10484
10548
|
] }),
|
|
10485
|
-
careLocationType && /* @__PURE__ */
|
|
10486
|
-
address && /* @__PURE__ */
|
|
10487
|
-
/* @__PURE__ */
|
|
10488
|
-
/* @__PURE__ */
|
|
10489
|
-
/* @__PURE__ */
|
|
10549
|
+
careLocationType && /* @__PURE__ */ jsx20("div", { style: { color: "#6b7280" }, children: careLocationType }),
|
|
10550
|
+
address && /* @__PURE__ */ jsx20("div", { style: { color: "#6b7280" }, children: address }),
|
|
10551
|
+
/* @__PURE__ */ jsx20("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280", minHeight: "1.25rem" }, children: loadingDistance ? /* @__PURE__ */ jsxs17(Fragment7, { children: [
|
|
10552
|
+
/* @__PURE__ */ jsx20("span", { children: "\u{1F4CD}" }),
|
|
10553
|
+
/* @__PURE__ */ jsx20("span", { style: {
|
|
10490
10554
|
width: "100px",
|
|
10491
10555
|
height: "0.875rem",
|
|
10492
10556
|
background: "linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)",
|
|
@@ -10494,8 +10558,8 @@ function HybridVendorCards({
|
|
|
10494
10558
|
animation: "hybrid-vendor-cards-shimmer 1.5s infinite",
|
|
10495
10559
|
borderRadius: "0.25rem"
|
|
10496
10560
|
} })
|
|
10497
|
-
] }) : distance ? /* @__PURE__ */ jsxs17(
|
|
10498
|
-
/* @__PURE__ */
|
|
10561
|
+
] }) : distance ? /* @__PURE__ */ jsxs17(Fragment7, { children: [
|
|
10562
|
+
/* @__PURE__ */ jsx20("span", { children: "\u{1F4CD}" }),
|
|
10499
10563
|
/* @__PURE__ */ jsxs17("span", { children: [
|
|
10500
10564
|
distance,
|
|
10501
10565
|
" from ",
|
|
@@ -10503,7 +10567,7 @@ function HybridVendorCards({
|
|
|
10503
10567
|
] })
|
|
10504
10568
|
] }) : null }),
|
|
10505
10569
|
hourlyRate && /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#6b7280" }, children: [
|
|
10506
|
-
/* @__PURE__ */
|
|
10570
|
+
/* @__PURE__ */ jsx20("span", { children: "\u{1F4B0}" }),
|
|
10507
10571
|
/* @__PURE__ */ jsxs17("span", { children: [
|
|
10508
10572
|
"Rate: $",
|
|
10509
10573
|
hourlyRate,
|
|
@@ -10511,9 +10575,9 @@ function HybridVendorCards({
|
|
|
10511
10575
|
] })
|
|
10512
10576
|
] }),
|
|
10513
10577
|
v.notes && /* @__PURE__ */ jsxs17("div", { style: { color: "#374151", marginTop: "0.4rem" }, children: [
|
|
10514
|
-
/* @__PURE__ */
|
|
10515
|
-
/* @__PURE__ */
|
|
10516
|
-
/* @__PURE__ */
|
|
10578
|
+
/* @__PURE__ */ jsx20("span", { style: { marginRight: "0.25rem" }, children: "\u2728" }),
|
|
10579
|
+
/* @__PURE__ */ jsx20("strong", { children: "Recommendation notes" }),
|
|
10580
|
+
/* @__PURE__ */ jsx20("div", { style: { marginLeft: "1.25rem", marginTop: "0.25rem", color: "#6b7280" }, children: v.notes })
|
|
10517
10581
|
] }),
|
|
10518
10582
|
(() => {
|
|
10519
10583
|
const state = getFeedbackState(v.vendor_id);
|
|
@@ -10541,7 +10605,7 @@ function HybridVendorCards({
|
|
|
10541
10605
|
handleFeedback(v.vendor_id, { comment: trimmedComment, vendorId: v.vendor_id, vendorName: name23 });
|
|
10542
10606
|
}
|
|
10543
10607
|
};
|
|
10544
|
-
return /* @__PURE__ */ jsxs17(
|
|
10608
|
+
return /* @__PURE__ */ jsxs17(Fragment7, { children: [
|
|
10545
10609
|
/* @__PURE__ */ jsxs17("div", { style: {
|
|
10546
10610
|
display: "flex",
|
|
10547
10611
|
flexWrap: "wrap",
|
|
@@ -10550,11 +10614,11 @@ function HybridVendorCards({
|
|
|
10550
10614
|
minHeight: "1.75rem"
|
|
10551
10615
|
}, children: [
|
|
10552
10616
|
verification?.verified && /* @__PURE__ */ jsxs17("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
|
|
10553
|
-
/* @__PURE__ */
|
|
10617
|
+
/* @__PURE__ */ jsx20("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
|
|
10554
10618
|
" Wellthy Verified"
|
|
10555
10619
|
] }),
|
|
10556
10620
|
hasBackgroundCheck && /* @__PURE__ */ jsxs17("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem", color: "#22c55e", fontSize: "0.75rem" }, children: [
|
|
10557
|
-
/* @__PURE__ */
|
|
10621
|
+
/* @__PURE__ */ jsx20("span", { style: { fontSize: "0.875rem" }, children: "\u2713" }),
|
|
10558
10622
|
" Background check"
|
|
10559
10623
|
] }),
|
|
10560
10624
|
messageContext && /* @__PURE__ */ jsxs17("div", { style: {
|
|
@@ -10563,7 +10627,7 @@ function HybridVendorCards({
|
|
|
10563
10627
|
gap: "0.25rem",
|
|
10564
10628
|
alignItems: "center"
|
|
10565
10629
|
}, children: [
|
|
10566
|
-
/* @__PURE__ */
|
|
10630
|
+
/* @__PURE__ */ jsx20(
|
|
10567
10631
|
"button",
|
|
10568
10632
|
{
|
|
10569
10633
|
onClick: () => handleRatingClick("positive"),
|
|
@@ -10581,10 +10645,10 @@ function HybridVendorCards({
|
|
|
10581
10645
|
height: "1.75rem"
|
|
10582
10646
|
},
|
|
10583
10647
|
title: "This vendor was helpful",
|
|
10584
|
-
children: /* @__PURE__ */
|
|
10648
|
+
children: /* @__PURE__ */ jsx20(ThumbsUp2, { style: { width: "1rem", height: "1rem" } })
|
|
10585
10649
|
}
|
|
10586
10650
|
),
|
|
10587
|
-
/* @__PURE__ */
|
|
10651
|
+
/* @__PURE__ */ jsx20(
|
|
10588
10652
|
"button",
|
|
10589
10653
|
{
|
|
10590
10654
|
onClick: () => handleRatingClick("negative"),
|
|
@@ -10602,13 +10666,13 @@ function HybridVendorCards({
|
|
|
10602
10666
|
height: "1.75rem"
|
|
10603
10667
|
},
|
|
10604
10668
|
title: "This vendor was not helpful",
|
|
10605
|
-
children: /* @__PURE__ */
|
|
10669
|
+
children: /* @__PURE__ */ jsx20(ThumbsDown2, { style: { width: "1rem", height: "1rem" } })
|
|
10606
10670
|
}
|
|
10607
10671
|
),
|
|
10608
10672
|
(() => {
|
|
10609
10673
|
const hasComment = !!state.commentText?.trim();
|
|
10610
10674
|
const CommentIcon = hasComment ? MessageSquareText2 : MessageSquare3;
|
|
10611
|
-
return /* @__PURE__ */
|
|
10675
|
+
return /* @__PURE__ */ jsx20(
|
|
10612
10676
|
"button",
|
|
10613
10677
|
{
|
|
10614
10678
|
onClick: handleCommentToggle,
|
|
@@ -10626,13 +10690,13 @@ function HybridVendorCards({
|
|
|
10626
10690
|
height: "1.75rem"
|
|
10627
10691
|
},
|
|
10628
10692
|
title: hasComment ? "Edit comment" : "Add comment",
|
|
10629
|
-
children: /* @__PURE__ */
|
|
10693
|
+
children: /* @__PURE__ */ jsx20(CommentIcon, { style: { width: "1rem", height: "1rem" } })
|
|
10630
10694
|
}
|
|
10631
10695
|
);
|
|
10632
10696
|
})()
|
|
10633
10697
|
] })
|
|
10634
10698
|
] }),
|
|
10635
|
-
state.showComment && /* @__PURE__ */
|
|
10699
|
+
state.showComment && /* @__PURE__ */ jsx20("div", { style: {
|
|
10636
10700
|
position: "absolute",
|
|
10637
10701
|
bottom: 0,
|
|
10638
10702
|
left: 0,
|
|
@@ -10643,7 +10707,7 @@ function HybridVendorCards({
|
|
|
10643
10707
|
padding: "0.75rem 1rem",
|
|
10644
10708
|
boxShadow: "0 -2px 8px rgba(0, 0, 0, 0.1)"
|
|
10645
10709
|
}, children: /* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: "0.5rem", alignItems: "flex-start" }, children: [
|
|
10646
|
-
/* @__PURE__ */
|
|
10710
|
+
/* @__PURE__ */ jsx20(
|
|
10647
10711
|
"textarea",
|
|
10648
10712
|
{
|
|
10649
10713
|
placeholder: "Share your thoughts about this vendor...",
|
|
@@ -10663,7 +10727,7 @@ function HybridVendorCards({
|
|
|
10663
10727
|
}
|
|
10664
10728
|
),
|
|
10665
10729
|
/* @__PURE__ */ jsxs17("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
|
|
10666
|
-
/* @__PURE__ */
|
|
10730
|
+
/* @__PURE__ */ jsx20(
|
|
10667
10731
|
"button",
|
|
10668
10732
|
{
|
|
10669
10733
|
onClick: handleCommentSubmit,
|
|
@@ -10682,7 +10746,7 @@ function HybridVendorCards({
|
|
|
10682
10746
|
children: "Save"
|
|
10683
10747
|
}
|
|
10684
10748
|
),
|
|
10685
|
-
/* @__PURE__ */
|
|
10749
|
+
/* @__PURE__ */ jsx20(
|
|
10686
10750
|
"button",
|
|
10687
10751
|
{
|
|
10688
10752
|
onClick: handleCommentToggle,
|
|
@@ -10713,7 +10777,7 @@ function HybridVendorCards({
|
|
|
10713
10777
|
// lib/chat/widgets/VendorCards.tsx
|
|
10714
10778
|
import { MessageSquare as MessageSquare4, MessageSquareText as MessageSquareText3, ThumbsDown as ThumbsDown3, ThumbsUp as ThumbsUp3 } from "lucide-react";
|
|
10715
10779
|
import React9 from "react";
|
|
10716
|
-
import { Fragment as
|
|
10780
|
+
import { Fragment as Fragment8, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
10717
10781
|
var vendorCardsSchema = jsonSchema({
|
|
10718
10782
|
type: "object",
|
|
10719
10783
|
description: "displaying a list of vendor cards. Use this widget to represent data from CareNetwork vendor search tool.",
|
|
@@ -10759,7 +10823,7 @@ var vendorCardsSchema = jsonSchema({
|
|
|
10759
10823
|
});
|
|
10760
10824
|
|
|
10761
10825
|
// lib/chat/widgets/default-widgets.tsx
|
|
10762
|
-
import { jsx as
|
|
10826
|
+
import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
10763
10827
|
var defaultChatWidgets = [
|
|
10764
10828
|
createSDKWidget({
|
|
10765
10829
|
widgetType: "person-card",
|
|
@@ -10768,7 +10832,7 @@ var defaultChatWidgets = [
|
|
|
10768
10832
|
photoUri: z10.string().optional().describe("URL to a photo of the person"),
|
|
10769
10833
|
details: z10.record(z10.string(), z10.any()).optional()
|
|
10770
10834
|
}).describe("showing a person card with name, photo and additional details"),
|
|
10771
|
-
render: (payload) => /* @__PURE__ */
|
|
10835
|
+
render: (payload) => /* @__PURE__ */ jsx22(
|
|
10772
10836
|
"div",
|
|
10773
10837
|
{
|
|
10774
10838
|
style: {
|
|
@@ -10782,7 +10846,7 @@ var defaultChatWidgets = [
|
|
|
10782
10846
|
boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
|
|
10783
10847
|
},
|
|
10784
10848
|
children: /* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.75rem" }, children: [
|
|
10785
|
-
payload.photoUri && /* @__PURE__ */
|
|
10849
|
+
payload.photoUri && /* @__PURE__ */ jsx22(
|
|
10786
10850
|
"img",
|
|
10787
10851
|
{
|
|
10788
10852
|
src: payload.photoUri,
|
|
@@ -10798,13 +10862,13 @@ var defaultChatWidgets = [
|
|
|
10798
10862
|
}
|
|
10799
10863
|
),
|
|
10800
10864
|
/* @__PURE__ */ jsxs19("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
10801
|
-
/* @__PURE__ */
|
|
10802
|
-
payload.details ? /* @__PURE__ */
|
|
10865
|
+
/* @__PURE__ */ jsx22("div", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827", marginBottom: "0.25rem" }, children: payload.name }),
|
|
10866
|
+
payload.details ? /* @__PURE__ */ jsx22("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: [
|
|
10803
10867
|
/* @__PURE__ */ jsxs19("span", { style: { color: "#6b7280", fontWeight: 500, minWidth: "fit-content" }, children: [
|
|
10804
10868
|
key,
|
|
10805
10869
|
":"
|
|
10806
10870
|
] }),
|
|
10807
|
-
/* @__PURE__ */
|
|
10871
|
+
/* @__PURE__ */ jsx22("span", { style: { color: "#374151" }, children: String(value) })
|
|
10808
10872
|
] }, key)) }) : null
|
|
10809
10873
|
] })
|
|
10810
10874
|
] })
|
|
@@ -10817,7 +10881,7 @@ var defaultChatWidgets = [
|
|
|
10817
10881
|
uri: z10.string().url(),
|
|
10818
10882
|
text: z10.string().optional()
|
|
10819
10883
|
}).describe("rendering a clickable link"),
|
|
10820
|
-
render: (payload) => /* @__PURE__ */
|
|
10884
|
+
render: (payload) => /* @__PURE__ */ jsx22(
|
|
10821
10885
|
"a",
|
|
10822
10886
|
{
|
|
10823
10887
|
href: payload.uri,
|
|
@@ -10868,7 +10932,7 @@ var getVendorCardsWidget = (isProd) => {
|
|
|
10868
10932
|
}
|
|
10869
10933
|
},
|
|
10870
10934
|
// Client-side: fetch distance matrix progressively
|
|
10871
|
-
render: (payload, enriched, { messageContext, invokeTool }) => /* @__PURE__ */
|
|
10935
|
+
render: (payload, enriched, { messageContext, invokeTool }) => /* @__PURE__ */ jsx22(
|
|
10872
10936
|
HybridVendorCards,
|
|
10873
10937
|
{
|
|
10874
10938
|
payload,
|
|
@@ -10887,6 +10951,8 @@ export {
|
|
|
10887
10951
|
ChatWidget,
|
|
10888
10952
|
FullDisplayMode,
|
|
10889
10953
|
FullDisplayMode as FullRenderer,
|
|
10954
|
+
HideToolsDisplayMode,
|
|
10955
|
+
HideToolsDisplayMode as HideToolsRenderer,
|
|
10890
10956
|
MessageRenderer,
|
|
10891
10957
|
PopupChatWidget,
|
|
10892
10958
|
SDK_WIDGET_MARKER,
|
|
@@ -10896,6 +10962,7 @@ export {
|
|
|
10896
10962
|
createSDKWidget,
|
|
10897
10963
|
createWidget,
|
|
10898
10964
|
defaultChatWidgets,
|
|
10965
|
+
extractUsageData,
|
|
10899
10966
|
fetchApprovalConfig,
|
|
10900
10967
|
getVendorCardsWidget,
|
|
10901
10968
|
isSDKWidget,
|