@burdenoff/microfe-botmanor 2026.821.1 → 2026.925.1

package/dist/botlit/pages/ChatPage.js

@@ -1,55 +1,52 @@
-import { useBotlit as e } from "../providers/BotlitProvider.js";
-import { useAgents as t } from "../hooks/useAgents.js";
-import { useSendMessage as n } from "../hooks/useConversations.js";
-import { cn as r } from "../utils/cn.js";
-import { PageLayout as i } from "../components/PageLayout.js";
-import { Card as a, CardContent as o } from "../components/Card.js";
-import { Button as s } from "../components/Button.js";
-import { Badge as c } from "../components/Badge.js";
-import { Textarea as l } from "../components/Input.js";
-import { QuotaExhaustedDialog as u } from "../components/QuotaExhaustedDialog.js";
-import { useEffect as d, useRef as f, useState as p } from "react";
-import { IllustratedEmptyState as m, PagePurpose as h } from "@burdenoff/fe-libs/ui";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { useNavigate as v, useParams as y } from "react-router";
-import { isQuotaExhaustedError as b } from "@burdenoff/fe-libs/shared/utils";
-import { ArrowLeft as x, Bot as S, Loader2 as C, RefreshCw as w, Send as T, Settings as E, User as D } from "lucide-react";
-import { useI18n as O } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useBotlit as t } from "../providers/BotlitProvider.js";
+import { useAgents as n } from "../hooks/useAgents.js";
+import { useSendMessage as r } from "../hooks/useConversations.js";
+import { cn as i } from "../utils/cn.js";
+import { PageLayout as a } from "../components/PageLayout.js";
+import { Card as o, CardContent as s } from "../components/Card.js";
+import { Button as c } from "../components/Button.js";
+import { Badge as l } from "../components/Badge.js";
+import { Textarea as u } from "../components/Input.js";
+import { QuotaExhaustedDialog as d } from "../components/QuotaExhaustedDialog.js";
+import { useEffect as f, useRef as p, useState as m } from "react";
+import { IllustratedEmptyState as h, PagePurpose as g } from "@burdenoff/fe-libs/ui";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useNavigate as y, useParams as b } from "react-router";
+import { isQuotaExhaustedError as x } from "@burdenoff/fe-libs/shared/utils";
+import { ArrowLeft as S, Bot as C, Loader2 as w, RefreshCw as T, Send as E, Settings as D, User as O } from "lucide-react";
 //#region src/botlit/pages/ChatPage.tsx
 var k = () => {
-	let { t: k } = O(), A = (e, t) => {
-		let n = k(e);
-		return n === e ? t : n;
-	}, { agentId: j } = y(), M = v(), { navigate: N } = e(), { data: P } = t(), { sendMessage: F, isSending: I } = n(), [L, R] = p(j || ""), [z, B] = p(""), [V, H] = p([]), [U, W] = p(), [G, K] = p(!1), q = f(null), J = () => {
-		if (N) {
-			N("/billing");
+	let k = e(), { agentId: A } = b(), j = y(), { navigate: M } = t(), { data: N } = n(), { sendMessage: P, isSending: F } = r(), [I, L] = m(A || ""), [R, z] = m(""), [B, V] = m([]), [H, U] = m(), [W, G] = m(!1), K = p(null), q = () => {
+		if (M) {
+			M("/billing");
 			return;
 		}
 		window.location.assign("/billing");
-	}, Y = () => {
-		q.current?.scrollIntoView({ behavior: "smooth" });
+	}, J = () => {
+		K.current?.scrollIntoView({ behavior: "smooth" });
 	};
-	d(() => {
-		Y();
-	}, [V]), d(() => {
-		j && R(j);
-	}, [j]);
-	let X = async () => {
-		if (!z.trim() || !L) return;
+	f(() => {
+		J();
+	}, [B]), f(() => {
+		A && L(A);
+	}, [A]);
+	let Y = async () => {
+		if (!R.trim() || !I) return;
 		let e = {
 			id: `user-${Date.now()}`,
 			role: "user",
-			content: z,
+			content: R,
 			createdAt: (/* @__PURE__ */ new Date()).toISOString()
 		};
-		H((t) => [...t, e]), B("");
+		V((t) => [...t, e]), z("");
 		try {
-			let e = await F({
-				conversationId: U,
-				agentId: L,
-				content: z
+			let e = await P({
+				conversationId: H,
+				agentId: I,
+				content: R
 			});
-			e.conversationId && W(e.conversationId);
+			e.conversationId && U(e.conversationId);
 			let t = {
 				id: `assistant-${e.executionId}`,
 				role: "assistant",
@@ -58,82 +55,82 @@ var k = () => {
 				model: e.model ?? void 0,
 				createdAt: (/* @__PURE__ */ new Date()).toISOString()
 			};
-			H((e) => [...e, t]);
+			V((e) => [...e, t]);
 		} catch (e) {
-			if (b(e)) {
-				K(!0);
+			if (x(e)) {
+				G(!0);
 				return;
 			}
 			let t = {
 				id: `error-${Date.now()}`,
 				role: "assistant",
-				content: `${A("botlit.chat.send.errorPrefix", "Error")}: ${e instanceof Error ? e.message : A("botlit.chat.send.errorFallback", "Failed to send message")}`,
+				content: `${k("botlit.chat.send.errorPrefix", "Error")}: ${e instanceof Error ? e.message : k("botlit.chat.send.errorFallback", "Failed to send message")}`,
 				createdAt: (/* @__PURE__ */ new Date()).toISOString()
 			};
-			H((e) => [...e, t]), console.error("Failed to send message:", e);
+			V((e) => [...e, t]), console.error("Failed to send message:", e);
 		}
-	}, Z = (e) => {
-		e.key === "Enter" && !e.shiftKey && (e.preventDefault(), X());
-	}, Q = () => {
-		H([]), W(void 0);
-	}, $ = P?.find((e) => e.id === L);
-	return /* @__PURE__ */ g(i, {
-		title: /* @__PURE__ */ _("div", {
+	}, X = (e) => {
+		e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Y());
+	}, Z = () => {
+		V([]), U(void 0);
+	}, Q = N?.find((e) => e.id === I);
+	return /* @__PURE__ */ _(a, {
+		title: /* @__PURE__ */ v("div", {
 			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ g(s, {
+			children: [/* @__PURE__ */ _(c, {
 				variant: "ghost",
 				size: "icon",
-				onClick: () => M(-1),
-				children: /* @__PURE__ */ g(x, { size: 20 })
-			}), $ ? /* @__PURE__ */ _("span", { children: [
-				A("botlit.chat.title.withAgent", "Chat with"),
+				onClick: () => j(-1),
+				children: /* @__PURE__ */ _(S, { size: 20 })
+			}), Q ? /* @__PURE__ */ v("span", { children: [
+				k("botlit.chat.title.withAgent", "Chat with"),
 				" ",
-				$.name
-			] }) : /* @__PURE__ */ g("span", { children: A("botlit.chat.title.default", "AI Chat") })]
+				Q.name
+			] }) : /* @__PURE__ */ _("span", { children: k("botlit.chat.title.default", "AI Chat") })]
 		}),
-		actions: /* @__PURE__ */ _("div", {
+		actions: /* @__PURE__ */ v("div", {
 			className: "flex gap-2",
-			children: [/* @__PURE__ */ g(s, {
+			children: [/* @__PURE__ */ _(c, {
 				variant: "outline",
 				size: "sm",
-				leftIcon: /* @__PURE__ */ g(w, { size: 14 }),
-				onClick: Q,
-				children: A("botlit.chat.actions.newChat", "New Chat")
-			}), L && /* @__PURE__ */ g(s, {
+				leftIcon: /* @__PURE__ */ _(T, { size: 14 }),
+				onClick: Z,
+				children: k("botlit.chat.actions.newChat", "New Chat")
+			}), I && /* @__PURE__ */ _(c, {
 				variant: "outline",
 				size: "sm",
-				leftIcon: /* @__PURE__ */ g(E, { size: 14 }),
-				children: /* @__PURE__ */ g("a", {
-					href: `/agents/${L}`,
-					children: A("botlit.chat.actions.agentSettings", "Agent Settings")
+				leftIcon: /* @__PURE__ */ _(D, { size: 14 }),
+				children: /* @__PURE__ */ _("a", {
+					href: `/agents/${I}`,
+					children: k("botlit.chat.actions.agentSettings", "Agent Settings")
 				})
 			})]
 		}),
-		children: /* @__PURE__ */ _("div", {
+		children: /* @__PURE__ */ v("div", {
 			className: "flex flex-col h-[calc(100vh-220px)] max-w-4xl mx-auto",
 			children: [
-				/* @__PURE__ */ g(h, {
+				/* @__PURE__ */ _(g, {
 					className: "mb-4",
-					icon: /* @__PURE__ */ g(S, { size: 18 }),
-					children: A("botlit.chat.purpose", "This is a live playground for talking to your agents. Pick an agent and chat with it exactly as a real user would — to sanity-check its answers, tone and tool use before you connect it to a bot or channel. Conversations here are throwaway tests, so experiment freely.")
+					icon: /* @__PURE__ */ _(C, { size: 18 }),
+					children: k("botlit.chat.purpose", "This is a live playground for talking to your agents. Pick an agent and chat with it exactly as a real user would — to sanity-check its answers, tone and tool use before you connect it to a bot or channel. Conversations here are throwaway tests, so experiment freely.")
 				}),
-				!j && /* @__PURE__ */ g(a, {
+				!A && /* @__PURE__ */ _(o, {
 					className: "mb-4",
-					children: /* @__PURE__ */ g(o, {
+					children: /* @__PURE__ */ _(s, {
 						className: "py-4",
-						children: /* @__PURE__ */ _("div", {
+						children: /* @__PURE__ */ v("div", {
 							className: "flex items-center gap-4",
-							children: [/* @__PURE__ */ g("label", {
+							children: [/* @__PURE__ */ _("label", {
 								className: "text-sm font-medium",
-								children: A("botlit.chat.selector.label", "Select Agent:")
-							}), /* @__PURE__ */ _("select", {
+								children: k("botlit.chat.selector.label", "Select Agent:")
+							}), /* @__PURE__ */ v("select", {
 								className: "flex h-10 flex-1 max-w-md rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
-								value: L,
-								onChange: (e) => R(e.target.value),
-								children: [/* @__PURE__ */ g("option", {
+								value: I,
+								onChange: (e) => L(e.target.value),
+								children: [/* @__PURE__ */ _("option", {
 									value: "",
-									children: A("botlit.chat.selector.placeholder", "Choose an agent...")
-								}), P?.filter((e) => e.status === "ACTIVE").map((e) => /* @__PURE__ */ g("option", {
+									children: k("botlit.chat.selector.placeholder", "Choose an agent...")
+								}), N?.filter((e) => e.status === "ACTIVE").map((e) => /* @__PURE__ */ _("option", {
 									value: e.id,
 									children: e.name
 								}, e.id))]
@@ -141,101 +138,101 @@ var k = () => {
 						})
 					})
 				}),
-				/* @__PURE__ */ g(a, {
+				/* @__PURE__ */ _(o, {
 					treatment: "glass",
 					glow: !0,
 					className: "flex-1 overflow-hidden",
-					children: /* @__PURE__ */ _(o, {
+					children: /* @__PURE__ */ v(s, {
 						className: "h-full flex flex-col p-0",
-						children: [/* @__PURE__ */ _("div", {
+						children: [/* @__PURE__ */ v("div", {
 							className: "flex-1 overflow-y-auto p-4 space-y-4",
 							children: [
-								V.length === 0 ? /* @__PURE__ */ g("div", {
+								B.length === 0 ? /* @__PURE__ */ _("div", {
 									className: "flex h-full items-center justify-center",
-									children: /* @__PURE__ */ g(m, {
+									children: /* @__PURE__ */ _(h, {
 										illustration: "onboarding",
-										title: A("botlit.chat.empty.title", "Start a Conversation"),
-										description: L ? `${A("botlit.chat.empty.withAgentPrefix", "Type a message below to start chatting with")} ${$?.name || A("botlit.chat.empty.withAgentFallbackName", "the agent")}.` : A("botlit.chat.empty.noAgent", "Select an agent above to start chatting.")
+										title: k("botlit.chat.empty.title", "Start a Conversation"),
+										description: I ? `${k("botlit.chat.empty.withAgentPrefix", "Type a message below to start chatting with")} ${Q?.name || k("botlit.chat.empty.withAgentFallbackName", "the agent")}.` : k("botlit.chat.empty.noAgent", "Select an agent above to start chatting.")
 									})
-								}) : V.map((e) => /* @__PURE__ */ _("div", {
-									className: r("flex gap-3", e.role === "user" ? "justify-end" : "justify-start"),
+								}) : B.map((e) => /* @__PURE__ */ v("div", {
+									className: i("flex gap-3", e.role === "user" ? "justify-end" : "justify-start"),
 									children: [
-										e.role !== "user" && /* @__PURE__ */ g("div", {
+										e.role !== "user" && /* @__PURE__ */ _("div", {
 											className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center flex-shrink-0",
-											children: /* @__PURE__ */ g(S, { size: 16 })
+											children: /* @__PURE__ */ _(C, { size: 16 })
 										}),
-										/* @__PURE__ */ _("div", {
-											className: r("max-w-[80%] rounded-lg px-4 py-3", e.role === "user" ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken"),
-											children: [/* @__PURE__ */ g("div", {
+										/* @__PURE__ */ v("div", {
+											className: i("max-w-[80%] rounded-lg px-4 py-3", e.role === "user" ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken"),
+											children: [/* @__PURE__ */ _("div", {
 												className: "whitespace-pre-wrap text-sm",
 												children: e.content
-											}), e.tokensUsed != null && e.tokensUsed > 0 && /* @__PURE__ */ _("div", {
+											}), e.tokensUsed != null && e.tokensUsed > 0 && /* @__PURE__ */ v("div", {
 												className: "mt-2 flex items-center gap-2 text-xs opacity-70",
-												children: [/* @__PURE__ */ _(c, {
+												children: [/* @__PURE__ */ v(l, {
 													variant: "outline",
 													className: "text-[10px]",
 													children: [
 														e.tokensUsed,
 														" ",
-														A("botlit.chat.tokensLabel", "tokens")
+														k("botlit.chat.tokensLabel", "tokens")
 													]
-												}), e.model && /* @__PURE__ */ g(c, {
+												}), e.model && /* @__PURE__ */ _(l, {
 													variant: "outline",
 													className: "text-[10px]",
 													children: e.model
 												})]
 											})]
 										}),
-										e.role === "user" && /* @__PURE__ */ g("div", {
+										e.role === "user" && /* @__PURE__ */ _("div", {
 											className: "w-8 h-8 rounded-full bg-secondary flex items-center justify-center flex-shrink-0",
-											children: /* @__PURE__ */ g(D, { size: 16 })
+											children: /* @__PURE__ */ _(O, { size: 16 })
 										})
 									]
 								}, e.id)),
-								I && /* @__PURE__ */ _("div", {
+								F && /* @__PURE__ */ v("div", {
 									className: "flex gap-3",
-									children: [/* @__PURE__ */ g("div", {
+									children: [/* @__PURE__ */ _("div", {
 										className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
-										children: /* @__PURE__ */ g(S, { size: 16 })
-									}), /* @__PURE__ */ g("div", {
+										children: /* @__PURE__ */ _(C, { size: 16 })
+									}), /* @__PURE__ */ _("div", {
 										className: "bg-bg-sunken rounded-lg px-4 py-3",
-										children: /* @__PURE__ */ g(C, { className: "h-5 w-5 animate-spin text-text-secondary" })
+										children: /* @__PURE__ */ _(w, { className: "h-5 w-5 animate-spin text-text-secondary" })
 									})]
 								}),
-								/* @__PURE__ */ g("div", { ref: q })
+								/* @__PURE__ */ _("div", { ref: K })
 							]
-						}), /* @__PURE__ */ _("div", {
+						}), /* @__PURE__ */ v("div", {
 							className: "border-t border-border-subtle p-4",
-							children: [/* @__PURE__ */ _("div", {
+							children: [/* @__PURE__ */ v("div", {
 								className: "flex gap-2",
-								children: [/* @__PURE__ */ g(l, {
-									placeholder: L ? A("botlit.chat.input.placeholder", "Type your message...") : A("botlit.chat.input.disabledPlaceholder", "Select an agent to start chatting"),
-									value: z,
-									onChange: (e) => B(e.target.value),
-									onKeyDown: Z,
-									disabled: !L || I,
+								children: [/* @__PURE__ */ _(u, {
+									placeholder: I ? k("botlit.chat.input.placeholder", "Type your message...") : k("botlit.chat.input.disabledPlaceholder", "Select an agent to start chatting"),
+									value: R,
+									onChange: (e) => z(e.target.value),
+									onKeyDown: X,
+									disabled: !I || F,
 									className: "min-h-[48px] max-h-[200px] resize-none",
 									rows: 1
-								}), /* @__PURE__ */ g(s, {
-									onClick: X,
-									disabled: !z.trim() || !L || I,
+								}), /* @__PURE__ */ _(c, {
+									onClick: Y,
+									disabled: !R.trim() || !I || F,
 									size: "icon",
 									className: "h-12 w-12",
-									children: I ? /* @__PURE__ */ g(C, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ g(T, { size: 20 })
+									children: F ? /* @__PURE__ */ _(w, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ _(E, { size: 20 })
 								})]
-							}), /* @__PURE__ */ g("p", {
+							}), /* @__PURE__ */ _("p", {
 								className: "text-xs text-text-secondary mt-2",
-								children: A("botlit.chat.input.helper", "Press Enter to send, Shift+Enter for new line")
+								children: k("botlit.chat.input.helper", "Press Enter to send, Shift+Enter for new line")
 							})]
 						})]
 					})
 				}),
-				/* @__PURE__ */ g(u, {
-					open: G,
-					title: A("botlit.usage.runQuota.title", "Bot Run Limit Reached"),
-					description: A("botlit.usage.runQuota.description", "You have reached your bot run limit for this month."),
-					onClose: () => K(!1),
-					onViewBilling: J
+				/* @__PURE__ */ _(d, {
+					open: W,
+					title: k("botlit.usage.runQuota.title", "Bot Run Limit Reached"),
+					description: k("botlit.usage.runQuota.description", "You have reached your bot run limit for this month."),
+					onClose: () => G(!1),
+					onViewBilling: q
 				})
 			]
 		})

package/dist/botlit/pages/ChatPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPage.js","names":[],"sources":["../../../src/botlit/pages/ChatPage.tsx"],"sourcesContent":["/**\n * Chat Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useState, useRef, useEffect } from 'react';\nimport { isQuotaExhaustedError } from '@burdenoff/fe-libs/shared/utils';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useParams, useNavigate } from 'react-router';\nimport { ArrowLeft, Send, Bot, User, Loader2, RefreshCw, Settings } from 'lucide-react';\nimport { PagePurpose, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { Card, CardContent } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Textarea } from '../components/Input';\nimport { Badge } from '../components/Badge';\nimport { QuotaExhaustedDialog } from '../components/QuotaExhaustedDialog';\nimport { useAgents } from '../hooks/useAgents';\nimport { useSendMessage } from '../hooks/useConversations';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport { cn } from '../utils/cn';\n\ninterface ChatMessage {\n  id: string;\n  role: 'user' | 'assistant';\n  content: string;\n  tokensUsed?: number;\n  model?: string;\n  createdAt: string;\n}\n\nexport const ChatPage: FC = () => {\n  const { t: translate } = useI18n();\n  const t = (key: string, fallback: string) => {\n    const value = translate(key);\n    return value === key ? fallback : value;\n  };\n  const { agentId } = useParams();\n  const navigate = useNavigate();\n  const { navigate: shellNavigate } = useBotlit();\n  const { data: agents } = useAgents();\n  const { sendMessage, isSending } = useSendMessage();\n\n  const [selectedAgentId, setSelectedAgentId] = useState(agentId || '');\n  const [inputValue, setInputValue] = useState('');\n  const [messages, setMessages] = useState<ChatMessage[]>([]);\n  const [conversationId, setConversationId] = useState<string | undefined>();\n  const [showQuotaDialog, setShowQuotaDialog] = useState(false);\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n\n  const handleViewBilling = () => {\n    if (shellNavigate) {\n      shellNavigate('/billing');\n      return;\n    }\n    window.location.assign('/billing');\n  };\n\n  const scrollToBottom = () => {\n    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n  };\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages]);\n\n  useEffect(() => {\n    if (agentId) {\n      setSelectedAgentId(agentId);\n    }\n  }, [agentId]);\n\n  const handleSend = async () => {\n    if (!inputValue.trim() || !selectedAgentId) return;\n\n    const userMessage: ChatMessage = {\n      id: `user-${Date.now()}`,\n      role: 'user',\n      content: inputValue,\n      createdAt: new Date().toISOString(),\n    };\n\n    setMessages((prev) => [...prev, userMessage]);\n    setInputValue('');\n\n    try {\n      const result = await sendMessage({\n        conversationId,\n        agentId: selectedAgentId,\n        content: inputValue,\n      });\n\n      // Track conversation ID for follow-up messages\n      if (result.conversationId) {\n        setConversationId(result.conversationId);\n      }\n\n      const assistantMessage: ChatMessage = {\n        id: `assistant-${result.executionId}`,\n        role: 'assistant',\n        content: result.message,\n        tokensUsed: result.tokensUsed ?? undefined,\n        model: result.model ?? undefined,\n        createdAt: new Date().toISOString(),\n      };\n\n      setMessages((prev) => [...prev, assistantMessage]);\n    } catch (error) {\n      if (isQuotaExhaustedError(error)) {\n        setShowQuotaDialog(true);\n        return;\n      }\n      // Add error message to chat\n      const errorMessage: ChatMessage = {\n        id: `error-${Date.now()}`,\n        role: 'assistant',\n        content: `${t('botlit.chat.send.errorPrefix', 'Error')}: ${error instanceof Error ? error.message : t('botlit.chat.send.errorFallback', 'Failed to send message')}`,\n        createdAt: new Date().toISOString(),\n      };\n      setMessages((prev) => [...prev, errorMessage]);\n      console.error('Failed to send message:', error);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      handleSend();\n    }\n  };\n\n  const handleReset = () => {\n    setMessages([]);\n    setConversationId(undefined);\n  };\n\n  const selectedAgent = agents?.find((a: { id: string }) => a.id === selectedAgentId);\n\n  return (\n    <PageLayout\n      title={\n        <div className=\"flex items-center gap-3\">\n          <Button variant=\"ghost\" size=\"icon\" onClick={() => navigate(-1)}>\n            <ArrowLeft size={20} />\n          </Button>\n          {selectedAgent ? (\n            <span>\n              {t('botlit.chat.title.withAgent', 'Chat with')} {selectedAgent.name}\n            </span>\n          ) : (\n            <span>{t('botlit.chat.title.default', 'AI Chat')}</span>\n          )}\n        </div>\n      }\n      actions={\n        <div className=\"flex gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            leftIcon={<RefreshCw size={14} />}\n            onClick={handleReset}\n          >\n            {t('botlit.chat.actions.newChat', 'New Chat')}\n          </Button>\n          {selectedAgentId && (\n            <Button variant=\"outline\" size=\"sm\" leftIcon={<Settings size={14} />}>\n              <a href={`/agents/${selectedAgentId}`}>\n                {t('botlit.chat.actions.agentSettings', 'Agent Settings')}\n              </a>\n            </Button>\n          )}\n        </div>\n      }\n    >\n      <div className=\"flex flex-col h-[calc(100vh-220px)] max-w-4xl mx-auto\">\n        <PagePurpose className=\"mb-4\" icon={<Bot size={18} />}>\n          {t(\n            'botlit.chat.purpose',\n            'This is a live playground for talking to your agents. Pick an agent and chat with it exactly as a real user would — to sanity-check its answers, tone and tool use before you connect it to a bot or channel. Conversations here are throwaway tests, so experiment freely.'\n          )}\n        </PagePurpose>\n\n        {/* Agent Selector */}\n        {!agentId && (\n          <Card className=\"mb-4\">\n            <CardContent className=\"py-4\">\n              <div className=\"flex items-center gap-4\">\n                <label className=\"text-sm font-medium\">\n                  {t('botlit.chat.selector.label', 'Select Agent:')}\n                </label>\n                <select\n                  className=\"flex h-10 flex-1 max-w-md rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                  value={selectedAgentId}\n                  onChange={(e) => setSelectedAgentId(e.target.value)}\n                >\n                  <option value=\"\">\n                    {t('botlit.chat.selector.placeholder', 'Choose an agent...')}\n                  </option>\n                  {agents\n                    ?.filter((a: { status: string }) => a.status === 'ACTIVE')\n                    .map((a: { id: string; name: string }) => (\n                      <option key={a.id} value={a.id}>\n                        {a.name}\n                      </option>\n                    ))}\n                </select>\n              </div>\n            </CardContent>\n          </Card>\n        )}\n\n        {/* Messages */}\n        <Card treatment=\"glass\" glow className=\"flex-1 overflow-hidden\">\n          <CardContent className=\"h-full flex flex-col p-0\">\n            <div className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n              {messages.length === 0 ? (\n                <div className=\"flex h-full items-center justify-center\">\n                  <IllustratedEmptyState\n                    illustration=\"onboarding\"\n                    title={t('botlit.chat.empty.title', 'Start a Conversation')}\n                    description={\n                      selectedAgentId\n                        ? `${t('botlit.chat.empty.withAgentPrefix', 'Type a message below to start chatting with')} ${selectedAgent?.name || t('botlit.chat.empty.withAgentFallbackName', 'the agent')}.`\n                        : t('botlit.chat.empty.noAgent', 'Select an agent above to start chatting.')\n                    }\n                  />\n                </div>\n              ) : (\n                messages.map((message) => (\n                  <div\n                    key={message.id}\n                    className={cn(\n                      'flex gap-3',\n                      message.role === 'user' ? 'justify-end' : 'justify-start'\n                    )}\n                  >\n                    {message.role !== 'user' && (\n                      <div className=\"w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center flex-shrink-0\">\n                        <Bot size={16} />\n                      </div>\n                    )}\n                    <div\n                      className={cn(\n                        'max-w-[80%] rounded-lg px-4 py-3',\n                        message.role === 'user'\n                          ? 'bg-action-primary-bg text-action-primary-text'\n                          : 'bg-bg-sunken'\n                      )}\n                    >\n                      <div className=\"whitespace-pre-wrap text-sm\">{message.content}</div>\n                      {message.tokensUsed != null && message.tokensUsed > 0 && (\n                        <div className=\"mt-2 flex items-center gap-2 text-xs opacity-70\">\n                          <Badge variant=\"outline\" className=\"text-[10px]\">\n                            {message.tokensUsed} {t('botlit.chat.tokensLabel', 'tokens')}\n                          </Badge>\n                          {message.model && (\n                            <Badge variant=\"outline\" className=\"text-[10px]\">\n                              {message.model}\n                            </Badge>\n                          )}\n                        </div>\n                      )}\n                    </div>\n                    {message.role === 'user' && (\n                      <div className=\"w-8 h-8 rounded-full bg-secondary flex items-center justify-center flex-shrink-0\">\n                        <User size={16} />\n                      </div>\n                    )}\n                  </div>\n                ))\n              )}\n\n              {isSending && (\n                <div className=\"flex gap-3\">\n                  <div className=\"w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n                    <Bot size={16} />\n                  </div>\n                  <div className=\"bg-bg-sunken rounded-lg px-4 py-3\">\n                    <Loader2 className=\"h-5 w-5 animate-spin text-text-secondary\" />\n                  </div>\n                </div>\n              )}\n\n              <div ref={messagesEndRef} />\n            </div>\n\n            {/* Input */}\n            <div className=\"border-t border-border-subtle p-4\">\n              <div className=\"flex gap-2\">\n                <Textarea\n                  placeholder={\n                    selectedAgentId\n                      ? t('botlit.chat.input.placeholder', 'Type your message...')\n                      : t(\n                          'botlit.chat.input.disabledPlaceholder',\n                          'Select an agent to start chatting'\n                        )\n                  }\n                  value={inputValue}\n                  onChange={(e) => setInputValue(e.target.value)}\n                  onKeyDown={handleKeyDown}\n                  disabled={!selectedAgentId || isSending}\n                  className=\"min-h-[48px] max-h-[200px] resize-none\"\n                  rows={1}\n                />\n                <Button\n                  onClick={handleSend}\n                  disabled={!inputValue.trim() || !selectedAgentId || isSending}\n                  size=\"icon\"\n                  className=\"h-12 w-12\"\n                >\n                  {isSending ? <Loader2 className=\"h-5 w-5 animate-spin\" /> : <Send size={20} />}\n                </Button>\n              </div>\n              <p className=\"text-xs text-text-secondary mt-2\">\n                {t('botlit.chat.input.helper', 'Press Enter to send, Shift+Enter for new line')}\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n        <QuotaExhaustedDialog\n          open={showQuotaDialog}\n          title={t('botlit.usage.runQuota.title', 'Bot Run Limit Reached')}\n          description={t(\n            'botlit.usage.runQuota.description',\n            'You have reached your bot run limit for this month.'\n          )}\n          onClose={() => setShowQuotaDialog(false)}\n          onViewBilling={handleViewBilling}\n        />\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ChatPage.js","names":[],"sources":["../../../src/botlit/pages/ChatPage.tsx"],"sourcesContent":["/**\n * Chat Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useState, useRef, useEffect } from 'react';\nimport { isQuotaExhaustedError } from '@burdenoff/fe-libs/shared/utils';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { useParams, useNavigate } from 'react-router';\nimport { ArrowLeft, Send, Bot, User, Loader2, RefreshCw, Settings } from 'lucide-react';\nimport { PagePurpose, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { Card, CardContent } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Textarea } from '../components/Input';\nimport { Badge } from '../components/Badge';\nimport { QuotaExhaustedDialog } from '../components/QuotaExhaustedDialog';\nimport { useAgents } from '../hooks/useAgents';\nimport { useSendMessage } from '../hooks/useConversations';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport { cn } from '../utils/cn';\n\ninterface ChatMessage {\n  id: string;\n  role: 'user' | 'assistant';\n  content: string;\n  tokensUsed?: number;\n  model?: string;\n  createdAt: string;\n}\n\nexport const ChatPage: FC = () => {\n  const t = useTr();\n  const { agentId } = useParams();\n  const navigate = useNavigate();\n  const { navigate: shellNavigate } = useBotlit();\n  const { data: agents } = useAgents();\n  const { sendMessage, isSending } = useSendMessage();\n\n  const [selectedAgentId, setSelectedAgentId] = useState(agentId || '');\n  const [inputValue, setInputValue] = useState('');\n  const [messages, setMessages] = useState<ChatMessage[]>([]);\n  const [conversationId, setConversationId] = useState<string | undefined>();\n  const [showQuotaDialog, setShowQuotaDialog] = useState(false);\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n\n  const handleViewBilling = () => {\n    if (shellNavigate) {\n      shellNavigate('/billing');\n      return;\n    }\n    window.location.assign('/billing');\n  };\n\n  const scrollToBottom = () => {\n    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n  };\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages]);\n\n  useEffect(() => {\n    if (agentId) {\n      setSelectedAgentId(agentId);\n    }\n  }, [agentId]);\n\n  const handleSend = async () => {\n    if (!inputValue.trim() || !selectedAgentId) return;\n\n    const userMessage: ChatMessage = {\n      id: `user-${Date.now()}`,\n      role: 'user',\n      content: inputValue,\n      createdAt: new Date().toISOString(),\n    };\n\n    setMessages((prev) => [...prev, userMessage]);\n    setInputValue('');\n\n    try {\n      const result = await sendMessage({\n        conversationId,\n        agentId: selectedAgentId,\n        content: inputValue,\n      });\n\n      // Track conversation ID for follow-up messages\n      if (result.conversationId) {\n        setConversationId(result.conversationId);\n      }\n\n      const assistantMessage: ChatMessage = {\n        id: `assistant-${result.executionId}`,\n        role: 'assistant',\n        content: result.message,\n        tokensUsed: result.tokensUsed ?? undefined,\n        model: result.model ?? undefined,\n        createdAt: new Date().toISOString(),\n      };\n\n      setMessages((prev) => [...prev, assistantMessage]);\n    } catch (error) {\n      if (isQuotaExhaustedError(error)) {\n        setShowQuotaDialog(true);\n        return;\n      }\n      // Add error message to chat\n      const errorMessage: ChatMessage = {\n        id: `error-${Date.now()}`,\n        role: 'assistant',\n        content: `${t('botlit.chat.send.errorPrefix', 'Error')}: ${error instanceof Error ? error.message : t('botlit.chat.send.errorFallback', 'Failed to send message')}`,\n        createdAt: new Date().toISOString(),\n      };\n      setMessages((prev) => [...prev, errorMessage]);\n      console.error('Failed to send message:', error);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      handleSend();\n    }\n  };\n\n  const handleReset = () => {\n    setMessages([]);\n    setConversationId(undefined);\n  };\n\n  const selectedAgent = agents?.find((a: { id: string }) => a.id === selectedAgentId);\n\n  return (\n    <PageLayout\n      title={\n        <div className=\"flex items-center gap-3\">\n          <Button variant=\"ghost\" size=\"icon\" onClick={() => navigate(-1)}>\n            <ArrowLeft size={20} />\n          </Button>\n          {selectedAgent ? (\n            <span>\n              {t('botlit.chat.title.withAgent', 'Chat with')} {selectedAgent.name}\n            </span>\n          ) : (\n            <span>{t('botlit.chat.title.default', 'AI Chat')}</span>\n          )}\n        </div>\n      }\n      actions={\n        <div className=\"flex gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            leftIcon={<RefreshCw size={14} />}\n            onClick={handleReset}\n          >\n            {t('botlit.chat.actions.newChat', 'New Chat')}\n          </Button>\n          {selectedAgentId && (\n            <Button variant=\"outline\" size=\"sm\" leftIcon={<Settings size={14} />}>\n              <a href={`/agents/${selectedAgentId}`}>\n                {t('botlit.chat.actions.agentSettings', 'Agent Settings')}\n              </a>\n            </Button>\n          )}\n        </div>\n      }\n    >\n      <div className=\"flex flex-col h-[calc(100vh-220px)] max-w-4xl mx-auto\">\n        <PagePurpose className=\"mb-4\" icon={<Bot size={18} />}>\n          {t(\n            'botlit.chat.purpose',\n            'This is a live playground for talking to your agents. Pick an agent and chat with it exactly as a real user would — to sanity-check its answers, tone and tool use before you connect it to a bot or channel. Conversations here are throwaway tests, so experiment freely.'\n          )}\n        </PagePurpose>\n\n        {/* Agent Selector */}\n        {!agentId && (\n          <Card className=\"mb-4\">\n            <CardContent className=\"py-4\">\n              <div className=\"flex items-center gap-4\">\n                <label className=\"text-sm font-medium\">\n                  {t('botlit.chat.selector.label', 'Select Agent:')}\n                </label>\n                <select\n                  className=\"flex h-10 flex-1 max-w-md rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                  value={selectedAgentId}\n                  onChange={(e) => setSelectedAgentId(e.target.value)}\n                >\n                  <option value=\"\">\n                    {t('botlit.chat.selector.placeholder', 'Choose an agent...')}\n                  </option>\n                  {agents\n                    ?.filter((a: { status: string }) => a.status === 'ACTIVE')\n                    .map((a: { id: string; name: string }) => (\n                      <option key={a.id} value={a.id}>\n                        {a.name}\n                      </option>\n                    ))}\n                </select>\n              </div>\n            </CardContent>\n          </Card>\n        )}\n\n        {/* Messages */}\n        <Card treatment=\"glass\" glow className=\"flex-1 overflow-hidden\">\n          <CardContent className=\"h-full flex flex-col p-0\">\n            <div className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n              {messages.length === 0 ? (\n                <div className=\"flex h-full items-center justify-center\">\n                  <IllustratedEmptyState\n                    illustration=\"onboarding\"\n                    title={t('botlit.chat.empty.title', 'Start a Conversation')}\n                    description={\n                      selectedAgentId\n                        ? `${t('botlit.chat.empty.withAgentPrefix', 'Type a message below to start chatting with')} ${selectedAgent?.name || t('botlit.chat.empty.withAgentFallbackName', 'the agent')}.`\n                        : t('botlit.chat.empty.noAgent', 'Select an agent above to start chatting.')\n                    }\n                  />\n                </div>\n              ) : (\n                messages.map((message) => (\n                  <div\n                    key={message.id}\n                    className={cn(\n                      'flex gap-3',\n                      message.role === 'user' ? 'justify-end' : 'justify-start'\n                    )}\n                  >\n                    {message.role !== 'user' && (\n                      <div className=\"w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center flex-shrink-0\">\n                        <Bot size={16} />\n                      </div>\n                    )}\n                    <div\n                      className={cn(\n                        'max-w-[80%] rounded-lg px-4 py-3',\n                        message.role === 'user'\n                          ? 'bg-action-primary-bg text-action-primary-text'\n                          : 'bg-bg-sunken'\n                      )}\n                    >\n                      <div className=\"whitespace-pre-wrap text-sm\">{message.content}</div>\n                      {message.tokensUsed != null && message.tokensUsed > 0 && (\n                        <div className=\"mt-2 flex items-center gap-2 text-xs opacity-70\">\n                          <Badge variant=\"outline\" className=\"text-[10px]\">\n                            {message.tokensUsed} {t('botlit.chat.tokensLabel', 'tokens')}\n                          </Badge>\n                          {message.model && (\n                            <Badge variant=\"outline\" className=\"text-[10px]\">\n                              {message.model}\n                            </Badge>\n                          )}\n                        </div>\n                      )}\n                    </div>\n                    {message.role === 'user' && (\n                      <div className=\"w-8 h-8 rounded-full bg-secondary flex items-center justify-center flex-shrink-0\">\n                        <User size={16} />\n                      </div>\n                    )}\n                  </div>\n                ))\n              )}\n\n              {isSending && (\n                <div className=\"flex gap-3\">\n                  <div className=\"w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center\">\n                    <Bot size={16} />\n                  </div>\n                  <div className=\"bg-bg-sunken rounded-lg px-4 py-3\">\n                    <Loader2 className=\"h-5 w-5 animate-spin text-text-secondary\" />\n                  </div>\n                </div>\n              )}\n\n              <div ref={messagesEndRef} />\n            </div>\n\n            {/* Input */}\n            <div className=\"border-t border-border-subtle p-4\">\n              <div className=\"flex gap-2\">\n                <Textarea\n                  placeholder={\n                    selectedAgentId\n                      ? t('botlit.chat.input.placeholder', 'Type your message...')\n                      : t(\n                          'botlit.chat.input.disabledPlaceholder',\n                          'Select an agent to start chatting'\n                        )\n                  }\n                  value={inputValue}\n                  onChange={(e) => setInputValue(e.target.value)}\n                  onKeyDown={handleKeyDown}\n                  disabled={!selectedAgentId || isSending}\n                  className=\"min-h-[48px] max-h-[200px] resize-none\"\n                  rows={1}\n                />\n                <Button\n                  onClick={handleSend}\n                  disabled={!inputValue.trim() || !selectedAgentId || isSending}\n                  size=\"icon\"\n                  className=\"h-12 w-12\"\n                >\n                  {isSending ? <Loader2 className=\"h-5 w-5 animate-spin\" /> : <Send size={20} />}\n                </Button>\n              </div>\n              <p className=\"text-xs text-text-secondary mt-2\">\n                {t('botlit.chat.input.helper', 'Press Enter to send, Shift+Enter for new line')}\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n        <QuotaExhaustedDialog\n          open={showQuotaDialog}\n          title={t('botlit.usage.runQuota.title', 'Bot Run Limit Reached')}\n          description={t(\n            'botlit.usage.runQuota.description',\n            'You have reached your bot run limit for this month.'\n          )}\n          onClose={() => setShowQuotaDialog(false)}\n          onViewBilling={handleViewBilling}\n        />\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}