bstp-agent-widget 0.2.20 → 0.2.22

package/dist/agent-widget.js

@@ -23740,162 +23740,176 @@ function JO({ ...e }) {
 //#endregion
 //#region src/components/AgentChat/AgentChatDrawer.tsx
 function YO({ opened: e, onClose: t, zIndex: n, withinPortal: r, messages: i, composerText: a, onComposerTextChange: o, isLoading: s, error: c, canSend: l, onSubmit: u, isListening: d, isVoiceSupported: f, onToggleVoice: p, drawerTitle: m, runtimeInfo: h, scrollViewportRef: g, drawerDraggable: _, drawerResizableWidth: v, drawerResizableHeight: y }) {
-	return /* @__PURE__ */ T(Y, {
-		style: {
-			position: "fixed",
-			top: 0,
-			right: 0,
-			bottom: 0,
-			width: e ? `${Math.max(280, 420 + v.offset)}px` : 0,
-			zIndex: n,
-			pointerEvents: e ? "auto" : "none",
-			..._.style
+	return /* @__PURE__ */ T(w, { children: /* @__PURE__ */ E(ub, {
+		opened: e,
+		onClose: t,
+		size: Math.max(280, 420 + v.offset),
+		zIndex: n,
+		withinPortal: r,
+		overlayProps: {
+			backgroundOpacity: .45,
+			blur: 6,
+			style: { zIndex: Math.max(1, n - 1) }
 		},
-		children: /* @__PURE__ */ E(ub, {
-			opened: e,
-			onClose: t,
-			size: Math.max(280, 420 + v.offset),
-			zIndex: n,
-			withinPortal: r,
-			title: /* @__PURE__ */ T(Y, { children: /* @__PURE__ */ E(kl, {
-				gap: "xs",
-				align: "center",
-				wrap: "nowrap",
-				children: [
-					m,
-					/* @__PURE__ */ T(Xd, {
-						size: "xs",
-						c: "dimmed",
-						children: h.customerId ? `#${h.customerId}` : "#-"
-					}),
-					/* @__PURE__ */ T(Xd, {
-						size: "xs",
-						c: h.hasCustomerToken ? "green" : "red",
-						children: h.hasCustomerToken ? "cust✓" : "cust✗"
-					}),
-					/* @__PURE__ */ T(Xd, {
-						size: "xs",
-						c: h.hasGenaiToken ? "green" : "red",
-						children: h.hasGenaiToken ? "genai✓" : "genai✗"
-					})
-				]
-			}) }),
+		styles: {
+			content: {
+				display: "flex",
+				flexDirection: "column",
+				backgroundColor: "var(--mantine-custom-color-surface-body-bg, #f8f9fa)"
+			},
+			header: {
+				padding: "16px",
+				borderBottom: "1px solid var(--mantine-color-gray-3)",
+				backgroundColor: "var(--mantine-custom-color-surface-default, #ffffff)"
+			},
+			body: {
+				padding: "16px",
+				backgroundColor: "var(--mantine-custom-color-surface-default, #ffffff)"
+			},
+			title: {
+				fontSize: "18px",
+				fontWeight: 700,
+				color: "var(--mantine-custom-color-text-default, #1f2937)"
+			}
+		},
+		title: /* @__PURE__ */ T(Y, { children: /* @__PURE__ */ E(kl, {
+			gap: "xs",
+			align: "center",
+			wrap: "nowrap",
 			children: [
-				/* @__PURE__ */ E(ub.Body, { children: [c && /* @__PURE__ */ T(Xd, {
+				m,
+				/* @__PURE__ */ T(Xd, {
 					size: "xs",
-					c: "red",
-					mb: "sm",
-					children: c
-				}), /* @__PURE__ */ T(uc, {
-					h: "100%",
-					type: "auto",
-					offsetScrollbars: !0,
-					viewportRef: g,
-					children: /* @__PURE__ */ E(zv, {
-						gap: "sm",
-						children: [i.map((e) => /* @__PURE__ */ T(Y, {
-							style: {
-								alignSelf: e.sentBy === "user" ? "flex-end" : "flex-start",
-								maxWidth: "90%",
-								padding: 12,
-								borderRadius: 12,
-								background: e.sentBy === "user" ? "var(--mantine-color-blue-light)" : "var(--mantine-color-gray-light)"
-							},
-							children: e.sentBy === "assistant" ? /* @__PURE__ */ T(VO, { content: e.text }) : /* @__PURE__ */ T(Xd, {
-								style: {
-									whiteSpace: "pre-wrap",
-									fontSize: "14px",
-									lineHeight: 1.5
-								},
-								children: e.text
-							})
-						}, e.id)), s && /* @__PURE__ */ T(Y, {
+					c: "dimmed",
+					children: h.customerId ? `#${h.customerId}` : "#-"
+				}),
+				/* @__PURE__ */ T(Xd, {
+					size: "xs",
+					c: h.hasCustomerToken ? "green" : "red",
+					children: h.hasCustomerToken ? "cust✓" : "cust✗"
+				}),
+				/* @__PURE__ */ T(Xd, {
+					size: "xs",
+					c: h.hasGenaiToken ? "green" : "red",
+					children: h.hasGenaiToken ? "genai✓" : "genai✗"
+				})
+			]
+		}) }),
+		children: [
+			/* @__PURE__ */ E(ub.Body, { children: [c && /* @__PURE__ */ T(Xd, {
+				size: "xs",
+				c: "red",
+				mb: "sm",
+				children: c
+			}), /* @__PURE__ */ T(uc, {
+				h: "100%",
+				type: "auto",
+				offsetScrollbars: !0,
+				viewportRef: g,
+				children: /* @__PURE__ */ E(zv, {
+					gap: "sm",
+					children: [i.map((e) => /* @__PURE__ */ T(Y, {
+						style: {
+							alignSelf: e.sentBy === "user" ? "flex-end" : "flex-start",
+							maxWidth: "90%",
+							padding: 12,
+							borderRadius: 12,
+							background: e.sentBy === "user" ? "var(--mantine-color-blue-light)" : "var(--mantine-color-gray-light)"
+						},
+						children: e.sentBy === "assistant" ? /* @__PURE__ */ T(VO, { content: e.text }) : /* @__PURE__ */ T(Xd, {
 							style: {
-								alignSelf: "flex-start",
-								maxWidth: "90%",
-								padding: 12,
-								borderRadius: 12,
-								background: "var(--mantine-color-gray-light)"
+								whiteSpace: "pre-wrap",
+								fontSize: "14px",
+								lineHeight: 1.5
 							},
-							children: /* @__PURE__ */ T(HO, { messages: [
-								"Thinking...",
-								"Analyzing your request...",
-								"Searching for information...",
-								"Processing data...",
-								"Preparing response...",
-								"Almost there..."
-							] })
-						})]
-					})
-				})] }),
-				/* @__PURE__ */ T(ub.Footer, { children: /* @__PURE__ */ T(Y, {
-					style: { position: "relative" },
-					children: /* @__PURE__ */ E(Y, {
+							children: e.text
+						})
+					}, e.id)), s && /* @__PURE__ */ T(Y, {
 						style: {
-							position: "relative",
-							width: "100%"
+							alignSelf: "flex-start",
+							maxWidth: "90%",
+							padding: 12,
+							borderRadius: 12,
+							background: "var(--mantine-color-gray-light)"
 						},
-						children: [/* @__PURE__ */ T(qO, {
-							composerText: a,
-							onComposerTextChange: o,
-							isLoading: s,
+						children: /* @__PURE__ */ T(HO, { messages: [
+							"Thinking...",
+							"Analyzing your request...",
+							"Searching for information...",
+							"Processing data...",
+							"Preparing response...",
+							"Almost there..."
+						] })
+					})]
+				})
+			})] }),
+			/* @__PURE__ */ T(ub.Footer, { children: /* @__PURE__ */ T(Y, {
+				style: { position: "relative" },
+				children: /* @__PURE__ */ E(Y, {
+					style: {
+						position: "relative",
+						width: "100%"
+					},
+					children: [/* @__PURE__ */ T(qO, {
+						composerText: a,
+						onComposerTextChange: o,
+						isLoading: s,
+						isListening: d,
+						isVoiceSupported: f,
+						onSubmit: u
+					}), /* @__PURE__ */ E(kl, {
+						gap: 4,
+						align: "center",
+						style: {
+							position: "absolute",
+							right: 8,
+							top: "50%",
+							transform: "translateY(-50%)"
+						},
+						children: [f && /* @__PURE__ */ T(KO, {
 							isListening: d,
-							isVoiceSupported: f,
-							onSubmit: u
-						}), /* @__PURE__ */ E(kl, {
-							gap: 4,
-							align: "center",
-							style: {
-								position: "absolute",
-								right: 8,
-								top: "50%",
-								transform: "translateY(-50%)"
-							},
-							children: [f && /* @__PURE__ */ T(KO, {
-								isListening: d,
-								isLoading: s,
-								onToggleVoice: p
-							}), /* @__PURE__ */ T(yl, {
-								onClick: u,
-								disabled: !l || s,
-								size: 32,
-								radius: "xl",
-								variant: "filled",
-								children: /* @__PURE__ */ T(JO, {
-									width: "18",
-									height: "18"
-								})
-							})]
+							isLoading: s,
+							onToggleVoice: p
+						}), /* @__PURE__ */ T(yl, {
+							onClick: u,
+							disabled: !l || s,
+							size: 32,
+							radius: "xl",
+							variant: "filled",
+							children: /* @__PURE__ */ T(JO, {
+								width: "18",
+								height: "18"
+							})
 						})]
-					})
-				}) }),
-				/* @__PURE__ */ T(Y, {
-					onPointerDown: y.handlePointerDown,
-					style: {
-						position: "absolute",
-						bottom: 0,
-						left: 0,
-						right: 0,
-						height: "8px",
-						...y.style,
-						zIndex: 10
-					}
-				}),
-				/* @__PURE__ */ T(Y, {
-					onPointerDown: v.handlePointerDown,
-					style: {
-						position: "absolute",
-						top: 0,
-						bottom: 0,
-						left: 0,
-						width: "8px",
-						...v.style,
-						zIndex: 10
-					}
+					})]
 				})
-			]
-		})
-	});
+			}) }),
+			/* @__PURE__ */ T(Y, {
+				onPointerDown: y.handlePointerDown,
+				style: {
+					position: "absolute",
+					bottom: 0,
+					left: 0,
+					right: 0,
+					height: "8px",
+					...y.style,
+					zIndex: 10
+				}
+			}),
+			/* @__PURE__ */ T(Y, {
+				onPointerDown: v.handlePointerDown,
+				style: {
+					position: "absolute",
+					top: 0,
+					bottom: 0,
+					left: 0,
+					width: "8px",
+					...v.style,
+					zIndex: 10
+				}
+			})
+		]
+	}) });
 }
 //#endregion
 //#region src/hooks/usePointerInteraction.ts