@px-ui/ai 1.0.0

package/dist/index.js

@@ -0,0 +1,773 @@
+import { t as __export } from "./chunk-BAz01cYq.js";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Avatar, Button, Dialog, FileIcon, SendIcon, StopIcon, Tooltip, toast } from "@px-ui/core";
+import ReactMarkdown from "react-markdown";
+
+//#region src/context/xandi-context.tsx
+const XandiContext = createContext(null);
+function XandiProvider({ api, userId, orgId, sessionId: initialSessionId, onFeedback, children }) {
+	const [sessionId, setSessionId] = useState(initialSessionId ?? null);
+	const [messages, setMessages] = useState([]);
+	const [isLoading, setIsLoading] = useState(false);
+	useEffect(() => {
+		if (!initialSessionId) setSessionId(crypto.randomUUID());
+	}, [initialSessionId]);
+	const sendMessage = async (text) => {
+		if (!text.trim() || isLoading) return;
+		const userMessage = {
+			id: crypto.randomUUID(),
+			role: "user",
+			content: text
+		};
+		setMessages((prev) => [...prev, userMessage]);
+		setIsLoading(true);
+		try {
+			const data = await (await fetch(api, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+					"x-org-id": orgId,
+					"x-user-id": userId
+				},
+				body: JSON.stringify({ message: text })
+			})).json();
+			if (data.success && data.response) {
+				const assistantMessage = {
+					id: crypto.randomUUID(),
+					role: "assistant",
+					content: data.response
+				};
+				setMessages((prev) => [...prev, assistantMessage]);
+			}
+		} catch (error) {
+			console.error("Failed to send message:", error);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	const value = {
+		messages,
+		isLoading,
+		sessionId,
+		sendMessage,
+		onFeedback
+	};
+	return /* @__PURE__ */ jsx(XandiContext.Provider, {
+		value,
+		children
+	});
+}
+function useXandi() {
+	const context = useContext(XandiContext);
+	if (!context) throw new Error("useXandi must be used within XandiProvider");
+	return context;
+}
+
+//#endregion
+//#region src/components/x-main-intake.tsx
+function XMainIntake({ placeholder = "Ask about jobs, candidates, timesheets, or anything workforce...", suggestions = [] }) {
+	const { isLoading, sendMessage } = useXandi();
+	const [input, setInput] = useState("");
+	const handleSubmit = (e) => {
+		e?.preventDefault();
+		if (input.trim() && !isLoading) {
+			sendMessage(input);
+			setInput("");
+		}
+	};
+	const handleSuggestionClick = (prompt) => {
+		setInput(prompt);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [/* @__PURE__ */ jsxs("form", {
+			onSubmit: handleSubmit,
+			className: "flex flex-col gap-2 rounded-2xl border border-ppx-neutral-5 bg-ppx-neutral-1 p-3",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: "uploads-section" }),
+				/* @__PURE__ */ jsx(XIntakeTextarea, {
+					value: input,
+					onChange: setInput,
+					onSubmit: handleSubmit,
+					placeholder,
+					disabled: isLoading
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "actions-section flex flex-row items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-sm",
+							disabled: isLoading,
+							children: /* @__PURE__ */ jsx(FileIcon, { width: 20 })
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "ml-auto text-ppx-xs text-ppx-neutral-10",
+							children: "Enter to send · Shift+Enter for new line"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							size: "icon-sm",
+							disabled: isLoading || !input.trim(),
+							className: "flex h-8 w-8 items-center justify-center rounded-full bg-ppx-green-5 text-white transition-all hover:bg-ppx-green-4 hover:shadow-[0_0_12px_rgba(40,182,116,0.6)] disabled:bg-ppx-neutral-5 disabled:text-ppx-neutral-10 disabled:shadow-none",
+							children: isLoading ? /* @__PURE__ */ jsx(StopIcon, { width: 14 }) : /* @__PURE__ */ jsx(SendIcon, { width: 16 })
+						})
+					]
+				})
+			]
+		}), suggestions.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap justify-center gap-2",
+			children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				onClick: () => handleSuggestionClick(suggestion.prompt),
+				className: "animate-[popUp_0.3s_ease-out_forwards] rounded-full opacity-0",
+				style: { animationDelay: `${index * .1}s` },
+				children: suggestion.label
+			}, suggestion.id))
+		})]
+	});
+}
+function XIntakeTextarea({ value, onChange, onSubmit, placeholder, disabled }) {
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			onSubmit();
+		}
+	};
+	return /* @__PURE__ */ jsx("textarea", {
+		className: "w-full resize-none border-none bg-transparent outline-none",
+		placeholder,
+		disabled,
+		value,
+		onChange: (e) => onChange(e.target.value),
+		onKeyDown: handleKeyDown
+	});
+}
+
+//#endregion
+//#region src/assets/icons/chat-icon.tsx
+function ChatIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "18",
+		height: "18",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+	});
+}
+
+//#endregion
+//#region src/assets/icons/check-icon.tsx
+function CheckIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+	});
+}
+
+//#endregion
+//#region src/assets/icons/close-icon.tsx
+function CloseIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "20",
+		height: "20",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+	});
+}
+
+//#endregion
+//#region src/assets/icons/copy-icon.tsx
+function CopyIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			width: "14",
+			height: "14",
+			x: "8",
+			y: "8",
+			rx: "2",
+			ry: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })]
+	});
+}
+
+//#endregion
+//#region src/assets/icons/debug-icon.tsx
+function DebugIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1" }), /* @__PURE__ */ jsx("path", { d: "M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" })]
+	});
+}
+
+//#endregion
+//#region src/assets/icons/menu-icon.tsx
+function MenuIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "20",
+		height: "20",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("line", {
+				x1: "4",
+				x2: "20",
+				y1: "12",
+				y2: "12"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: "4",
+				x2: "20",
+				y1: "6",
+				y2: "6"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: "4",
+				x2: "20",
+				y1: "18",
+				y2: "18"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/assets/icons/new-chat-icon.tsx
+function NewChatIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "20",
+		height: "20",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), /* @__PURE__ */ jsx("path", { d: "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" })]
+	});
+}
+
+//#endregion
+//#region src/assets/icons/sparkles-icon.tsx
+function SparklesIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "20",
+		height: "20",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }),
+			/* @__PURE__ */ jsx("path", { d: "M20 3v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M22 5h-4" }),
+			/* @__PURE__ */ jsx("path", { d: "M4 17v2" }),
+			/* @__PURE__ */ jsx("path", { d: "M5 18H3" })
+		]
+	});
+}
+
+//#endregion
+//#region src/assets/icons/thumbs-down-icon.tsx
+function ThumbsDownIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M17 14V2" }), /* @__PURE__ */ jsx("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" })]
+	});
+}
+
+//#endregion
+//#region src/assets/icons/thumbs-up-icon.tsx
+function ThumbsUpIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M7 10v12" }), /* @__PURE__ */ jsx("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" })]
+	});
+}
+
+//#endregion
+//#region src/components/x-message-actions.tsx
+var x_message_actions_exports = /* @__PURE__ */ __export({
+	Copy: () => Copy,
+	Debug: () => Debug,
+	Feedback: () => Feedback,
+	Root: () => Root
+});
+/**
+* Container for message actions. Use with composable children:
+* - XMessageActions.Feedback
+* - XMessageActions.Copy
+* - XMessageActions.Debug
+*/
+function Root({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-1",
+		children
+	});
+}
+function Feedback({ messageId }) {
+	const { onFeedback } = useXandi();
+	const [feedback, setFeedback] = useState(null);
+	const handleFeedback = (type) => {
+		const newFeedback = feedback === type ? null : type;
+		setFeedback(newFeedback);
+		onFeedback?.(messageId, newFeedback);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon-sm",
+		onClick: () => handleFeedback("up"),
+		className: `h-7 w-7 ${feedback === "up" ? "bg-ppx-green-2 text-ppx-green-5" : "text-ppx-neutral-10 hover:text-ppx-neutral-12"}`,
+		children: /* @__PURE__ */ jsx(ThumbsUpIcon, { className: feedback === "up" ? "fill-current" : "" })
+	}) }), /* @__PURE__ */ jsx(Tooltip.Content, { children: feedback === "up" ? "You found this helpful" : "Good response" })] }), /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon-sm",
+		onClick: () => handleFeedback("down"),
+		className: `h-7 w-7 ${feedback === "down" ? "bg-ppx-red-2 text-ppx-red-5" : "text-ppx-neutral-10 hover:text-ppx-neutral-12"}`,
+		children: /* @__PURE__ */ jsx(ThumbsDownIcon, { className: feedback === "down" ? "fill-current" : "" })
+	}) }), /* @__PURE__ */ jsx(Tooltip.Content, { children: feedback === "down" ? "You found this unhelpful" : "Bad response" })] })] });
+}
+function Copy({ content }) {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(content);
+			setCopied(true);
+			toast.add({
+				title: "Copied!",
+				description: "Message copied to clipboard",
+				type: "success"
+			});
+			setTimeout(() => setCopied(false), 2e3);
+		} catch {
+			toast.add({
+				title: "Failed to copy",
+				description: "Could not copy message to clipboard",
+				type: "error"
+			});
+		}
+	};
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon-sm",
+		onClick: handleCopy,
+		className: "h-7 w-7 text-ppx-neutral-10 hover:text-ppx-neutral-12",
+		children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-ppx-green-5" }) : /* @__PURE__ */ jsx(CopyIcon, {})
+	}) }), /* @__PURE__ */ jsx(Tooltip.Content, { children: copied ? "Copied!" : "Copy message" })] });
+}
+function Debug({ messageId, debugTrace }) {
+	const [debugOpen, setDebugOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		open: debugOpen,
+		onOpenChange: setDebugOpen,
+		children: [/* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Dialog.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-sm",
+			className: "h-7 w-7 text-ppx-neutral-10 hover:text-ppx-neutral-12",
+			children: /* @__PURE__ */ jsx(DebugIcon, {})
+		}) }) }), /* @__PURE__ */ jsx(Tooltip.Content, { children: "View debug trace" })] }), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
+			className: "max-w-2xl",
+			children: [
+				/* @__PURE__ */ jsxs(Dialog.Header, { children: [/* @__PURE__ */ jsx(Dialog.Title, { children: "Debug Trace" }), /* @__PURE__ */ jsxs(Dialog.Description, { children: ["Response debug information for message ", messageId] })] }),
+				/* @__PURE__ */ jsx("div", {
+					className: "max-h-96 overflow-auto rounded bg-ppx-neutral-2 p-4",
+					children: /* @__PURE__ */ jsx("pre", {
+						className: "whitespace-pre-wrap font-mono text-ppx-xs text-ppx-neutral-12",
+						children: JSON.stringify(debugTrace, null, 2)
+					})
+				}),
+				/* @__PURE__ */ jsx(Dialog.Footer, { children: /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					children: "Close"
+				}) }) })
+			]
+		})] })]
+	});
+}
+
+//#endregion
+//#region src/components/renderers/markdown-renderer.tsx
+function MarkdownRenderer({ message }) {
+	const isUser = message.role === "user";
+	const baseClass = `text-ppx-sm leading-relaxed ${isUser ? "text-white" : "text-ppx-neutral-13"}`;
+	const showActions = !isUser;
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+		className: baseClass,
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			components: {
+				p: ({ children }) => /* @__PURE__ */ jsx("p", {
+					className: "mb-2 last:mb-0",
+					children
+				}),
+				ul: ({ children }) => /* @__PURE__ */ jsx("ul", {
+					className: "mb-2 list-disc pl-4",
+					children
+				}),
+				ol: ({ children }) => /* @__PURE__ */ jsx("ol", {
+					className: "mb-2 list-decimal pl-4",
+					children
+				}),
+				li: ({ children }) => /* @__PURE__ */ jsx("li", {
+					className: "mb-1",
+					children
+				}),
+				a: ({ href, children }) => /* @__PURE__ */ jsx("a", {
+					href,
+					className: "underline",
+					target: "_blank",
+					rel: "noopener noreferrer",
+					children
+				}),
+				strong: ({ children }) => /* @__PURE__ */ jsx("strong", {
+					className: "font-semibold",
+					children
+				})
+			},
+			children: message.content
+		})
+	}), showActions && /* @__PURE__ */ jsx("div", {
+		className: "mt-2",
+		children: /* @__PURE__ */ jsxs(Root, { children: [
+			/* @__PURE__ */ jsx(Feedback, { messageId: message.id }),
+			/* @__PURE__ */ jsx(Copy, { content: message.content }),
+			message.debugTrace != null && /* @__PURE__ */ jsx(Debug, {
+				messageId: message.id,
+				debugTrace: message.debugTrace
+			})
+		] })
+	})] });
+}
+
+//#endregion
+//#region src/components/renderers/text-renderer.tsx
+function TextRenderer({ message }) {
+	const isUser = message.role === "user";
+	const showActions = !isUser;
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+		className: `text-ppx-sm leading-relaxed ${isUser ? "text-white" : "text-ppx-neutral-13"}`,
+		children: message.content
+	}), showActions && /* @__PURE__ */ jsx("div", {
+		className: "mt-2",
+		children: /* @__PURE__ */ jsxs(Root, { children: [
+			/* @__PURE__ */ jsx(Feedback, { messageId: message.id }),
+			/* @__PURE__ */ jsx(Copy, { content: message.content }),
+			message.debugTrace != null && /* @__PURE__ */ jsx(Debug, {
+				messageId: message.id,
+				debugTrace: message.debugTrace
+			})
+		] })
+	})] });
+}
+
+//#endregion
+//#region src/components/x-message-item.tsx
+/**
+* Router component that renders messages based on their type.
+* Defaults to markdown rendering if no type is specified.
+*/
+function XMessageItem({ message }) {
+	const isUser = message.role === "user";
+	const messageType = message.type ?? "markdown";
+	return /* @__PURE__ */ jsx("div", {
+		className: `flex ${isUser ? "justify-end" : "justify-start"}`,
+		children: isUser ? /* @__PURE__ */ jsx("div", {
+			className: "max-w-[90%] rounded-2xl rounded-br-sm bg-ppx-green-5 px-4 py-2.5",
+			children: /* @__PURE__ */ jsx(MessageRenderer, {
+				type: messageType,
+				message
+			})
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "max-w-[90%]",
+			children: /* @__PURE__ */ jsx(MessageRenderer, {
+				type: messageType,
+				message
+			})
+		})
+	});
+}
+/**
+* Switch component that selects the appropriate renderer based on message type.
+*/
+function MessageRenderer({ type, message }) {
+	switch (type) {
+		case "text": return /* @__PURE__ */ jsx(TextRenderer, { message });
+		case "markdown":
+		default: return /* @__PURE__ */ jsx(MarkdownRenderer, { message });
+	}
+}
+
+//#endregion
+//#region src/constants.ts
+const XANDI_AVATAR_URL = new URL("./assets/images/xandi-avatar.png", import.meta.url).href;
+
+//#endregion
+//#region src/components/x-typing-indicator.tsx
+function XTypingIndicator() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-4",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "animate-[popUp_0.3s_ease-out_forwards]",
+			children: /* @__PURE__ */ jsx(Avatar, {
+				imgSrc: XANDI_AVATAR_URL,
+				name: "Xandi",
+				variant: "rounded",
+				size: "48px",
+				hideTooltip: true,
+				className: "border-2 border-ppx-neutral-4"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex animate-[slideIn_0.3s_ease-out_0.2s_forwards] items-center gap-2 rounded-xl bg-ppx-neutral-2 px-[10px] pb-[5px] pt-[10px] opacity-0 shadow-sm",
+			children: [
+				/* @__PURE__ */ jsx("span", { className: "h-[12px] w-[12px] animate-bounce rounded-full bg-ppx-neutral-9 [animation-delay:-0.3s]" }),
+				/* @__PURE__ */ jsx("span", { className: "h-[12px] w-[12px] animate-bounce rounded-full bg-ppx-neutral-6 [animation-delay:-0.15s]" }),
+				/* @__PURE__ */ jsx("span", { className: "h-[12px] w-[12px] animate-bounce rounded-full bg-ppx-neutral-9" })
+			]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/x-message-container.tsx
+function XMessageContainer({ height = 400 }) {
+	const { messages, isLoading } = useXandi();
+	const containerRef = useRef(null);
+	useEffect(() => {
+		if (containerRef.current) containerRef.current.scrollTop = containerRef.current.scrollHeight;
+	}, [messages, isLoading]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "overflow-y-auto py-[10px]",
+		style: { height: typeof height === "number" ? `${height}px` : height },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-5 p-4",
+			children: [messages.map((message) => /* @__PURE__ */ jsx(XMessageItem, { message }, message.id)), isLoading && /* @__PURE__ */ jsx(XTypingIndicator, {})]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/x-welcome.tsx
+function XWelcome({ message }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center gap-4 py-12",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: "absolute -inset-1 rounded-full bg-gradient-to-b from-ppx-green-4 via-ppx-green-5/50 to-transparent" }),
+				/* @__PURE__ */ jsx("div", {
+					className: "relative rounded-full bg-ppx-neutral-18 p-1",
+					children: /* @__PURE__ */ jsx(Avatar, {
+						imgSrc: XANDI_AVATAR_URL,
+						name: "Xandi",
+						variant: "rounded",
+						size: "120px",
+						hideTooltip: true
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute -bottom-2 left-1/2",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex h-6 w-6 animate-[pulse-zoom_2s_ease-in-out_infinite] items-center justify-center rounded-full bg-ppx-green-5",
+						children: /* @__PURE__ */ jsx(SparklesIcon, { className: "text-white" })
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("h2", {
+			className: "text-ppx-xl font-semibold text-ppx-foreground",
+			children: message
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/xandi.tsx
+function Xandi({ welcomeMessage = "How can I help you today?", suggestions = [] }) {
+	const { messages, isLoading } = useXandi();
+	const isEmpty = messages.length === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col",
+		children: [isEmpty ? /* @__PURE__ */ jsx(XWelcome, { message: welcomeMessage }) : /* @__PURE__ */ jsx(XMessageContainer, {}), /* @__PURE__ */ jsx(XMainIntake, { suggestions: isEmpty ? suggestions : [] })]
+	});
+}
+
+//#endregion
+//#region src/components/x-header.tsx
+function XHeader({ title = "Xandi", onClose, onNewChat, onToggleHistory }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: "flex items-center justify-between border-b border-ppx-neutral-5 bg-ppx-neutral-2 px-3 py-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				onClick: onToggleHistory,
+				"aria-label": "Toggle chat history",
+				children: /* @__PURE__ */ jsx(MenuIcon, {})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Avatar, {
+					imgSrc: XANDI_AVATAR_URL,
+					name: "Xandi",
+					variant: "rounded",
+					size: "24px",
+					hideTooltip: true
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-medium text-ppx-foreground",
+					children: title
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				onClick: onNewChat,
+				"aria-label": "New chat",
+				children: /* @__PURE__ */ jsx(NewChatIcon, {})
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				onClick: onClose,
+				"aria-label": "Close",
+				children: /* @__PURE__ */ jsx(CloseIcon, {})
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/x-chat-history.tsx
+function XChatHistory({ groups = [], activeChatId, onSelectChat }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex-1 overflow-y-auto",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "px-3 py-2",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-ppx-sm font-medium text-ppx-foreground",
+				children: [/* @__PURE__ */ jsx(ChatIcon, {}), "Chats"]
+			})
+		}), groups.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "px-6 py-4 text-ppx-sm text-ppx-neutral-10",
+			children: "No chat history yet"
+		}) : groups.map((group) => /* @__PURE__ */ jsxs("div", {
+			className: "mb-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "px-6 py-2 text-ppx-xs font-medium text-ppx-neutral-10",
+				children: group.label
+			}), /* @__PURE__ */ jsx("div", {
+				className: "space-y-0.5",
+				children: group.items.map((item) => /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: () => onSelectChat?.(item.id),
+					className: `w-full justify-start truncate rounded-none px-6 ${activeChatId === item.id ? "bg-ppx-neutral-4 text-ppx-foreground" : "text-ppx-neutral-12"}`,
+					children: item.title
+				}, item.id))
+			})]
+		}, group.label))]
+	});
+}
+
+//#endregion
+//#region src/components/x-sidebar.tsx
+function XSidebar({ isOpen = true, chatHistory = [], activeChatId, onClose, onNewChat, onSelectChat }) {
+	if (!isOpen) return null;
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "flex h-full w-64 flex-col border-r border-ppx-neutral-5 bg-ppx-neutral-2",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-between border-b border-ppx-neutral-5 p-3",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-sm",
+					onClick: onClose,
+					"aria-label": "Close sidebar",
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "p-3",
+				children: /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					onClick: onNewChat,
+					className: "w-full justify-start gap-3",
+					children: [/* @__PURE__ */ jsx(NewChatIcon, { className: "h-5 w-5" }), "New chat"]
+				})
+			}),
+			/* @__PURE__ */ jsx(XChatHistory, {
+				groups: chatHistory,
+				activeChatId,
+				onSelectChat
+			})
+		]
+	});
+}
+
+//#endregion
+export { XChatHistory, XHeader, x_message_actions_exports as XMessageActions, XSidebar, Xandi, XandiProvider, useXandi };
+//# sourceMappingURL=index.js.map