@burdenoff/microfe-botmanor 2026.813.1

package/dist/botlit/pages/ChannelsPage.js

@@ -0,0 +1,304 @@
+import { useBotlit as e } from "../providers/BotlitProvider.js";
+import { formatRelativeTime as t } from "../utils/formatters.js";
+import { PageLayout as n } from "../components/PageLayout.js";
+import { Card as r, CardContent as i, CardDescription as a, CardHeader as o, CardTitle as s } from "../components/Card.js";
+import { Button as c } from "../components/Button.js";
+import { Badge as l, StatusBadge as u } from "../components/Badge.js";
+import { EmptyState as d } from "../components/EmptyState.js";
+import { Input as f } from "../components/Input.js";
+import { ErrorState as p } from "../components/ErrorState.js";
+import { routeMetadataString as m, useChannelConnectors as h, useChannelRoutes as g } from "../hooks/useChannels.js";
+import "../hooks/index.js";
+import { useMemo as _, useState as v } from "react";
+import { GlassCard as y, PagePurpose as b } from "@burdenoff/fe-libs/ui";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { Link as w } from "react-router";
+import { ArrowRight as T, Filter as E, Globe as D, Hash as O, MessageSquare as k, Plus as A, Search as j, Settings as M, Slack as N, Webhook as P } from "lucide-react";
+//#region src/botlit/pages/ChannelsPage.tsx
+var F = ({ type: e, className: t }) => {
+	switch (e) {
+		case "SLACK": return /* @__PURE__ */ S(N, { className: t });
+		case "DISCORD": return /* @__PURE__ */ S(O, { className: t });
+		case "TEAMS": return /* @__PURE__ */ S(k, { className: t });
+		case "WEB_WIDGET": return /* @__PURE__ */ S(D, { className: t });
+		case "WEBHOOK": return /* @__PURE__ */ S(P, { className: t });
+		default: return /* @__PURE__ */ S(k, { className: t });
+	}
+}, I = () => {
+	let { getPath: D } = e(), [O, N] = v(""), [P, I] = v("connectors"), { data: L, loading: R, error: z, refetch: B } = h(_(() => ({ search: O }), [O])), { data: V, loading: H, error: U, refetch: W } = g(), G = _(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of V) e.set(t.connectorId, (e.get(t.connectorId) ?? 0) + 1);
+		return e;
+	}, [V]);
+	return /* @__PURE__ */ S(n, {
+		title: "Channels",
+		description: "Connect agents to messaging platforms and configure routing",
+		actions: /* @__PURE__ */ C("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ S(c, {
+				variant: "outline",
+				children: /* @__PURE__ */ S(w, {
+					to: D("channels/routes"),
+					children: "View Routes"
+				})
+			}), /* @__PURE__ */ S(c, {
+				leftIcon: /* @__PURE__ */ S(A, { size: 16 }),
+				children: /* @__PURE__ */ S(w, {
+					to: D("channels/new"),
+					children: "Add Channel"
+				})
+			})]
+		}),
+		children: /* @__PURE__ */ C("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ S(b, {
+					icon: /* @__PURE__ */ S(k, { size: 18 }),
+					children: "Channels are where your bots actually talk to people. Connect a messaging platform — a website chat widget, Slack, Microsoft Teams, Discord, WhatsApp or a custom webhook — then add a route that points an incoming location at the bot that should answer. Use this page to manage those connectors and routing rules in one place."
+				}),
+				/* @__PURE__ */ C("div", {
+					className: "flex gap-1 border-b border-border-subtle",
+					children: [/* @__PURE__ */ C("button", {
+						onClick: () => I("connectors"),
+						className: `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${P === "connectors" ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
+						children: [
+							"Connectors (",
+							L.length,
+							")"
+						]
+					}), /* @__PURE__ */ C("button", {
+						onClick: () => I("routes"),
+						className: `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${P === "routes" ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
+						children: [
+							"Routes (",
+							V.length,
+							")"
+						]
+					})]
+				}),
+				/* @__PURE__ */ C("div", {
+					className: "flex items-center gap-4",
+					children: [/* @__PURE__ */ C("div", {
+						className: "relative flex-1 max-w-md",
+						children: [/* @__PURE__ */ S(j, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ S(f, {
+							placeholder: `Search ${P}...`,
+							value: O,
+							onChange: (e) => N(e.target.value),
+							className: "pl-9"
+						})]
+					}), /* @__PURE__ */ S(c, {
+						variant: "outline",
+						leftIcon: /* @__PURE__ */ S(E, { size: 16 }),
+						children: "Filters"
+					})]
+				}),
+				P === "connectors" && /* @__PURE__ */ S(x, { children: R ? /* @__PURE__ */ S("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: [
+						1,
+						2,
+						3
+					].map((e) => /* @__PURE__ */ S("div", { className: "h-48 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" }, e))
+				}) : z ? /* @__PURE__ */ S(p, {
+					resource: "channel connectors",
+					error: z,
+					onRetry: () => void B()
+				}) : L.length > 0 ? /* @__PURE__ */ S("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: L.map((e) => /* @__PURE__ */ S(w, {
+						to: D(`channels/${e.id}`),
+						children: /* @__PURE__ */ C(r, {
+							className: "h-full hover:border-primary/50 transition-colors cursor-pointer",
+							children: [/* @__PURE__ */ S(o, { children: /* @__PURE__ */ C("div", {
+								className: "flex items-start justify-between",
+								children: [/* @__PURE__ */ C("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ S("div", {
+										className: "p-2 bg-action-primary-bg/10 rounded-lg",
+										children: /* @__PURE__ */ S(F, {
+											type: e.type,
+											className: "h-5 w-5 text-primary"
+										})
+									}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S(s, {
+										className: "text-base",
+										children: e.name
+									}), /* @__PURE__ */ S(a, {
+										className: "text-xs",
+										children: e.description
+									})] })]
+								}), /* @__PURE__ */ S(u, { status: e.status })]
+							}) }), /* @__PURE__ */ S(i, { children: /* @__PURE__ */ C("div", {
+								className: "space-y-3",
+								children: [
+									/* @__PURE__ */ C("div", {
+										className: "flex items-center justify-between",
+										children: [/* @__PURE__ */ S("span", {
+											className: "text-sm text-text-secondary",
+											children: "Type"
+										}), /* @__PURE__ */ S(l, {
+											variant: "outline",
+											className: "capitalize",
+											children: e.type.toLowerCase().replace("_", " ")
+										})]
+									}),
+									/* @__PURE__ */ C("div", {
+										className: "flex items-center justify-between",
+										children: [/* @__PURE__ */ S("span", {
+											className: "text-sm text-text-secondary",
+											children: "Active Routes"
+										}), /* @__PURE__ */ S(l, {
+											variant: "secondary",
+											children: G.get(e.id) ?? 0
+										})]
+									}),
+									/* @__PURE__ */ C("div", {
+										className: "pt-3 border-t border-border-subtle text-xs text-text-secondary",
+										children: ["Created ", t(e.createdAt)]
+									})
+								]
+							}) })]
+						})
+					}, e.id))
+				}) : /* @__PURE__ */ S(d, {
+					illustration: "empty-notifications",
+					title: "No channel connectors",
+					description: "Connect messaging platforms to deploy agents across multiple channels.",
+					action: /* @__PURE__ */ S(c, {
+						leftIcon: /* @__PURE__ */ S(A, { size: 16 }),
+						children: /* @__PURE__ */ S(w, {
+							to: D("channels/new"),
+							children: "Add Channel"
+						})
+					})
+				}) }),
+				P === "routes" && /* @__PURE__ */ S(x, { children: H ? /* @__PURE__ */ S("div", {
+					className: "space-y-4",
+					children: [
+						1,
+						2,
+						3
+					].map((e) => /* @__PURE__ */ S("div", { className: "h-20 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" }, e))
+				}) : U ? /* @__PURE__ */ S(p, {
+					resource: "channel routes",
+					error: U,
+					onRetry: () => void W()
+				}) : V.length > 0 ? /* @__PURE__ */ S("div", {
+					className: "space-y-4",
+					children: V.map((e) => /* @__PURE__ */ S(r, { children: /* @__PURE__ */ S(i, {
+						className: "py-4",
+						children: /* @__PURE__ */ C("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ S("div", {
+								className: "flex items-center gap-4",
+								children: /* @__PURE__ */ C("div", {
+									className: "flex items-center gap-2 text-sm",
+									children: [
+										/* @__PURE__ */ S(l, {
+											variant: "outline",
+											children: m(e, "locationName") ?? e.locationId
+										}),
+										/* @__PURE__ */ S(T, {
+											size: 16,
+											className: "text-text-secondary"
+										}),
+										/* @__PURE__ */ S(l, {
+											variant: "secondary",
+											children: m(e, "appName") ?? e.appId ?? "—"
+										})
+									]
+								})
+							}), /* @__PURE__ */ C("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ S("span", {
+									className: "text-xs text-text-secondary",
+									children: t(e.createdAt)
+								}), /* @__PURE__ */ S(c, {
+									variant: "ghost",
+									size: "icon",
+									children: /* @__PURE__ */ S(M, { size: 16 })
+								})]
+							})]
+						})
+					}) }, e.id))
+				}) : /* @__PURE__ */ S(d, {
+					illustration: "empty-search",
+					title: "No routes configured",
+					description: "Create routes to connect channel locations to specific bots.",
+					action: /* @__PURE__ */ S(c, {
+						leftIcon: /* @__PURE__ */ S(A, { size: 16 }),
+						children: "Create Route"
+					})
+				}) }),
+				/* @__PURE__ */ C(y, {
+					treatment: "glass",
+					glow: !0,
+					className: "p-6",
+					children: [/* @__PURE__ */ C("div", {
+						className: "mb-4",
+						children: [/* @__PURE__ */ S("h2", {
+							className: "text-lg font-semibold tracking-tight text-text-primary",
+							children: "Available Integrations"
+						}), /* @__PURE__ */ S("p", {
+							className: "text-sm text-text-secondary",
+							children: "Connect to popular messaging platforms"
+						})]
+					}), /* @__PURE__ */ S("div", {
+						className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4",
+						children: [
+							{
+								type: "WEB_WIDGET",
+								name: "Web Widget",
+								desc: "Embed on websites"
+							},
+							{
+								type: "SLACK",
+								name: "Slack",
+								desc: "Workspace integration"
+							},
+							{
+								type: "TEAMS",
+								name: "MS Teams",
+								desc: "Teams app"
+							},
+							{
+								type: "DISCORD",
+								name: "Discord",
+								desc: "Bot integration"
+							},
+							{
+								type: "WHATSAPP",
+								name: "WhatsApp",
+								desc: "Business API"
+							},
+							{
+								type: "WEBHOOK",
+								name: "Webhook",
+								desc: "Custom integration"
+							}
+						].map((e) => /* @__PURE__ */ C("button", {
+							className: "p-4 text-center border border-border-subtle rounded-lg hover:bg-accent transition-colors",
+							children: [
+								/* @__PURE__ */ S(F, {
+									type: e.type,
+									className: "h-8 w-8 mx-auto text-text-secondary"
+								}),
+								/* @__PURE__ */ S("p", {
+									className: "mt-2 font-medium text-sm",
+									children: e.name
+								}),
+								/* @__PURE__ */ S("p", {
+									className: "text-xs text-text-secondary",
+									children: e.desc
+								})
+							]
+						}, e.type))
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { I as ChannelsPage };
+
+//# sourceMappingURL=ChannelsPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelsPage.js","names":[],"sources":["../../../src/botlit/pages/ChannelsPage.tsx"],"sourcesContent":["/**\n * Channels Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { Link } from 'react-router';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport {\n  Plus,\n  Search as SearchIcon,\n  Filter,\n  MessageSquare,\n  Globe,\n  Slack,\n  Hash,\n  Webhook,\n  ArrowRight,\n  Settings,\n} from 'lucide-react';\nimport { PagePurpose, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Input } from '../components/Input';\nimport { Badge, StatusBadge } from '../components/Badge';\nimport { EmptyState } from '../components/EmptyState';\nimport { ErrorState } from '../components/ErrorState';\nimport {\n  useChannelConnectors,\n  useChannelRoutes,\n  routeMetadataString,\n  type ChannelConnectorRecord,\n  type ChannelRouteRecord,\n} from '../hooks';\nimport { formatRelativeTime, MISSING_VALUE } from '../utils/formatters';\nimport type { ChannelType } from '../types';\n\nconst ChannelIcon: FC<{ type: string; className?: string }> = ({ type, className }) => {\n  switch (type) {\n    case 'SLACK':\n      return <Slack className={className} />;\n    case 'DISCORD':\n      return <Hash className={className} />;\n    case 'TEAMS':\n      return <MessageSquare className={className} />;\n    case 'WEB_WIDGET':\n      return <Globe className={className} />;\n    case 'WEBHOOK':\n      return <Webhook className={className} />;\n    default:\n      return <MessageSquare className={className} />;\n  }\n};\n\nexport const ChannelsPage: FC = () => {\n  const { getPath } = useBotlit();\n  const [search, setSearch] = useState('');\n  const [activeTab, setActiveTab] = useState<'connectors' | 'routes'>('connectors');\n  const connectorFilter = useMemo(() => ({ search }), [search]);\n  const {\n    data: connectors,\n    loading: loadingConnectors,\n    error: connectorsError,\n    refetch: refetchConnectors,\n  } = useChannelConnectors(connectorFilter);\n  const {\n    data: routes,\n    loading: loadingRoutes,\n    error: routesError,\n    refetch: refetchRoutes,\n  } = useChannelRoutes();\n\n  // Routes are keyed by connector, so the per-connector count is derived here\n  // rather than assuming a field the service does not return.\n  const routeCountByConnector = useMemo(() => {\n    const counts = new Map<string, number>();\n    for (const route of routes) {\n      counts.set(route.connectorId, (counts.get(route.connectorId) ?? 0) + 1);\n    }\n    return counts;\n  }, [routes]);\n\n  return (\n    <PageLayout\n      title=\"Channels\"\n      description=\"Connect agents to messaging platforms and configure routing\"\n      actions={\n        <div className=\"flex gap-2\">\n          <Button variant=\"outline\">\n            <Link to={getPath('channels/routes')}>View Routes</Link>\n          </Button>\n          <Button leftIcon={<Plus size={16} />}>\n            <Link to={getPath('channels/new')}>Add Channel</Link>\n          </Button>\n        </div>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<MessageSquare size={18} />}>\n          Channels are where your bots actually talk to people. Connect a messaging platform — a\n          website chat widget, Slack, Microsoft Teams, Discord, WhatsApp or a custom webhook — then\n          add a route that points an incoming location at the bot that should answer. Use this page\n          to manage those connectors and routing rules in one place.\n        </PagePurpose>\n\n        {/* Tabs */}\n        <div className=\"flex gap-1 border-b border-border-subtle\">\n          <button\n            onClick={() => setActiveTab('connectors')}\n            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${\n              activeTab === 'connectors'\n                ? 'border-primary text-primary'\n                : 'border-transparent text-text-secondary hover:text-text-primary'\n            }`}\n          >\n            Connectors ({connectors.length})\n          </button>\n          <button\n            onClick={() => setActiveTab('routes')}\n            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${\n              activeTab === 'routes'\n                ? 'border-primary text-primary'\n                : 'border-transparent text-text-secondary hover:text-text-primary'\n            }`}\n          >\n            Routes ({routes.length})\n          </button>\n        </div>\n\n        {/* Search */}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"relative flex-1 max-w-md\">\n            <SearchIcon className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n            <Input\n              placeholder={`Search ${activeTab}...`}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"pl-9\"\n            />\n          </div>\n          <Button variant=\"outline\" leftIcon={<Filter size={16} />}>\n            Filters\n          </Button>\n        </div>\n\n        {/* Connectors Tab */}\n        {activeTab === 'connectors' && (\n          <>\n            {loadingConnectors ? (\n              <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n                {[1, 2, 3].map((i) => (\n                  <div\n                    key={i}\n                    className=\"h-48 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\"\n                  />\n                ))}\n              </div>\n            ) : connectorsError ? (\n              <ErrorState\n                resource=\"channel connectors\"\n                error={connectorsError}\n                onRetry={() => void refetchConnectors()}\n              />\n            ) : connectors.length > 0 ? (\n              <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n                {connectors.map((connector: ChannelConnectorRecord) => (\n                  <Link key={connector.id} to={getPath(`channels/${connector.id}`)}>\n                    <Card className=\"h-full hover:border-primary/50 transition-colors cursor-pointer\">\n                      <CardHeader>\n                        <div className=\"flex items-start justify-between\">\n                          <div className=\"flex items-center gap-3\">\n                            <div className=\"p-2 bg-action-primary-bg/10 rounded-lg\">\n                              <ChannelIcon type={connector.type} className=\"h-5 w-5 text-primary\" />\n                            </div>\n                            <div>\n                              <CardTitle className=\"text-base\">{connector.name}</CardTitle>\n                              <CardDescription className=\"text-xs\">\n                                {connector.description}\n                              </CardDescription>\n                            </div>\n                          </div>\n                          <StatusBadge status={connector.status} />\n                        </div>\n                      </CardHeader>\n                      <CardContent>\n                        <div className=\"space-y-3\">\n                          {/* Type */}\n                          <div className=\"flex items-center justify-between\">\n                            <span className=\"text-sm text-text-secondary\">Type</span>\n                            <Badge variant=\"outline\" className=\"capitalize\">\n                              {connector.type.toLowerCase().replace('_', ' ')}\n                            </Badge>\n                          </div>\n\n                          {/* Routes */}\n                          <div className=\"flex items-center justify-between\">\n                            <span className=\"text-sm text-text-secondary\">Active Routes</span>\n                            <Badge variant=\"secondary\">\n                              {routeCountByConnector.get(connector.id) ?? 0}\n                            </Badge>\n                          </div>\n\n                          {/* Footer */}\n                          <div className=\"pt-3 border-t border-border-subtle text-xs text-text-secondary\">\n                            Created {formatRelativeTime(connector.createdAt)}\n                          </div>\n                        </div>\n                      </CardContent>\n                    </Card>\n                  </Link>\n                ))}\n              </div>\n            ) : (\n              <EmptyState\n                illustration=\"empty-notifications\"\n                title=\"No channel connectors\"\n                description=\"Connect messaging platforms to deploy agents across multiple channels.\"\n                action={\n                  <Button leftIcon={<Plus size={16} />}>\n                    <Link to={getPath('channels/new')}>Add Channel</Link>\n                  </Button>\n                }\n              />\n            )}\n          </>\n        )}\n\n        {/* Routes Tab */}\n        {activeTab === 'routes' && (\n          <>\n            {loadingRoutes ? (\n              <div className=\"space-y-4\">\n                {[1, 2, 3].map((i) => (\n                  <div\n                    key={i}\n                    className=\"h-20 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\"\n                  />\n                ))}\n              </div>\n            ) : routesError ? (\n              <ErrorState\n                resource=\"channel routes\"\n                error={routesError}\n                onRetry={() => void refetchRoutes()}\n              />\n            ) : routes.length > 0 ? (\n              <div className=\"space-y-4\">\n                {routes.map((route: ChannelRouteRecord) => (\n                  <Card key={route.id}>\n                    <CardContent className=\"py-4\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"flex items-center gap-4\">\n                          <div className=\"flex items-center gap-2 text-sm\">\n                            <Badge variant=\"outline\">\n                              {routeMetadataString(route, 'locationName') ?? route.locationId}\n                            </Badge>\n                            <ArrowRight size={16} className=\"text-text-secondary\" />\n                            <Badge variant=\"secondary\">\n                              {routeMetadataString(route, 'appName') ??\n                                route.appId ??\n                                MISSING_VALUE}\n                            </Badge>\n                          </div>\n                        </div>\n                        <div className=\"flex items-center gap-2\">\n                          <span className=\"text-xs text-text-secondary\">\n                            {formatRelativeTime(route.createdAt)}\n                          </span>\n                          <Button variant=\"ghost\" size=\"icon\">\n                            <Settings size={16} />\n                          </Button>\n                        </div>\n                      </div>\n                    </CardContent>\n                  </Card>\n                ))}\n              </div>\n            ) : (\n              <EmptyState\n                illustration=\"empty-search\"\n                title=\"No routes configured\"\n                description=\"Create routes to connect channel locations to specific bots.\"\n                action={<Button leftIcon={<Plus size={16} />}>Create Route</Button>}\n              />\n            )}\n          </>\n        )}\n\n        {/* Available Integrations */}\n        <GlassCard treatment=\"glass\" glow className=\"p-6\">\n          <div className=\"mb-4\">\n            <h2 className=\"text-lg font-semibold tracking-tight text-text-primary\">\n              Available Integrations\n            </h2>\n            <p className=\"text-sm text-text-secondary\">Connect to popular messaging platforms</p>\n          </div>\n          <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4\">\n            {[\n              {\n                type: 'WEB_WIDGET' as ChannelType,\n                name: 'Web Widget',\n                desc: 'Embed on websites',\n              },\n              { type: 'SLACK' as ChannelType, name: 'Slack', desc: 'Workspace integration' },\n              { type: 'TEAMS' as ChannelType, name: 'MS Teams', desc: 'Teams app' },\n              { type: 'DISCORD' as ChannelType, name: 'Discord', desc: 'Bot integration' },\n              { type: 'WHATSAPP' as ChannelType, name: 'WhatsApp', desc: 'Business API' },\n              { type: 'WEBHOOK' as ChannelType, name: 'Webhook', desc: 'Custom integration' },\n            ].map((integration) => (\n              <button\n                key={integration.type}\n                className=\"p-4 text-center border border-border-subtle rounded-lg hover:bg-accent transition-colors\"\n              >\n                <ChannelIcon\n                  type={integration.type}\n                  className=\"h-8 w-8 mx-auto text-text-secondary\"\n                />\n                <p className=\"mt-2 font-medium text-sm\">{integration.name}</p>\n                <p className=\"text-xs text-text-secondary\">{integration.desc}</p>\n              </button>\n            ))}\n          </div>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}

package/dist/botlit/pages/ChatPage.js

@@ -0,0 +1,247 @@
+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";
+//#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");
+			return;
+		}
+		window.location.assign("/billing");
+	}, Y = () => {
+		q.current?.scrollIntoView({ behavior: "smooth" });
+	};
+	d(() => {
+		Y();
+	}, [V]), d(() => {
+		j && R(j);
+	}, [j]);
+	let X = async () => {
+		if (!z.trim() || !L) return;
+		let e = {
+			id: `user-${Date.now()}`,
+			role: "user",
+			content: z,
+			createdAt: (/* @__PURE__ */ new Date()).toISOString()
+		};
+		H((t) => [...t, e]), B("");
+		try {
+			let e = await F({
+				conversationId: U,
+				agentId: L,
+				content: z
+			});
+			e.conversationId && W(e.conversationId);
+			let t = {
+				id: `assistant-${e.executionId}`,
+				role: "assistant",
+				content: e.message,
+				tokensUsed: e.tokensUsed ?? void 0,
+				model: e.model ?? void 0,
+				createdAt: (/* @__PURE__ */ new Date()).toISOString()
+			};
+			H((e) => [...e, t]);
+		} catch (e) {
+			if (b(e)) {
+				K(!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")}`,
+				createdAt: (/* @__PURE__ */ new Date()).toISOString()
+			};
+			H((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", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ g(s, {
+				variant: "ghost",
+				size: "icon",
+				onClick: () => M(-1),
+				children: /* @__PURE__ */ g(x, { size: 20 })
+			}), $ ? /* @__PURE__ */ _("span", { children: [
+				A("botlit.chat.title.withAgent", "Chat with"),
+				" ",
+				$.name
+			] }) : /* @__PURE__ */ g("span", { children: A("botlit.chat.title.default", "AI Chat") })]
+		}),
+		actions: /* @__PURE__ */ _("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ g(s, {
+				variant: "outline",
+				size: "sm",
+				leftIcon: /* @__PURE__ */ g(w, { size: 14 }),
+				onClick: Q,
+				children: A("botlit.chat.actions.newChat", "New Chat")
+			}), L && /* @__PURE__ */ g(s, {
+				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")
+				})
+			})]
+		}),
+		children: /* @__PURE__ */ _("div", {
+			className: "flex flex-col h-[calc(100vh-220px)] max-w-4xl mx-auto",
+			children: [
+				/* @__PURE__ */ g(h, {
+					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.")
+				}),
+				!j && /* @__PURE__ */ g(a, {
+					className: "mb-4",
+					children: /* @__PURE__ */ g(o, {
+						className: "py-4",
+						children: /* @__PURE__ */ _("div", {
+							className: "flex items-center gap-4",
+							children: [/* @__PURE__ */ g("label", {
+								className: "text-sm font-medium",
+								children: A("botlit.chat.selector.label", "Select Agent:")
+							}), /* @__PURE__ */ _("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: "",
+									children: A("botlit.chat.selector.placeholder", "Choose an agent...")
+								}), P?.filter((e) => e.status === "ACTIVE").map((e) => /* @__PURE__ */ g("option", {
+									value: e.id,
+									children: e.name
+								}, e.id))]
+							})]
+						})
+					})
+				}),
+				/* @__PURE__ */ g(a, {
+					treatment: "glass",
+					glow: !0,
+					className: "flex-1 overflow-hidden",
+					children: /* @__PURE__ */ _(o, {
+						className: "h-full flex flex-col p-0",
+						children: [/* @__PURE__ */ _("div", {
+							className: "flex-1 overflow-y-auto p-4 space-y-4",
+							children: [
+								V.length === 0 ? /* @__PURE__ */ g("div", {
+									className: "flex h-full items-center justify-center",
+									children: /* @__PURE__ */ g(m, {
+										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.")
+									})
+								}) : V.map((e) => /* @__PURE__ */ _("div", {
+									className: r("flex gap-3", e.role === "user" ? "justify-end" : "justify-start"),
+									children: [
+										e.role !== "user" && /* @__PURE__ */ g("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 })
+										}),
+										/* @__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", {
+												className: "whitespace-pre-wrap text-sm",
+												children: e.content
+											}), e.tokensUsed != null && e.tokensUsed > 0 && /* @__PURE__ */ _("div", {
+												className: "mt-2 flex items-center gap-2 text-xs opacity-70",
+												children: [/* @__PURE__ */ _(c, {
+													variant: "outline",
+													className: "text-[10px]",
+													children: [
+														e.tokensUsed,
+														" ",
+														A("botlit.chat.tokensLabel", "tokens")
+													]
+												}), e.model && /* @__PURE__ */ g(c, {
+													variant: "outline",
+													className: "text-[10px]",
+													children: e.model
+												})]
+											})]
+										}),
+										e.role === "user" && /* @__PURE__ */ g("div", {
+											className: "w-8 h-8 rounded-full bg-secondary flex items-center justify-center flex-shrink-0",
+											children: /* @__PURE__ */ g(D, { size: 16 })
+										})
+									]
+								}, e.id)),
+								I && /* @__PURE__ */ _("div", {
+									className: "flex gap-3",
+									children: [/* @__PURE__ */ g("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", {
+										className: "bg-bg-sunken rounded-lg px-4 py-3",
+										children: /* @__PURE__ */ g(C, { className: "h-5 w-5 animate-spin text-text-secondary" })
+									})]
+								}),
+								/* @__PURE__ */ g("div", { ref: q })
+							]
+						}), /* @__PURE__ */ _("div", {
+							className: "border-t border-border-subtle p-4",
+							children: [/* @__PURE__ */ _("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,
+									className: "min-h-[48px] max-h-[200px] resize-none",
+									rows: 1
+								}), /* @__PURE__ */ g(s, {
+									onClick: X,
+									disabled: !z.trim() || !L || I,
+									size: "icon",
+									className: "h-12 w-12",
+									children: I ? /* @__PURE__ */ g(C, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ g(T, { size: 20 })
+								})]
+							}), /* @__PURE__ */ g("p", {
+								className: "text-xs text-text-secondary mt-2",
+								children: A("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
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { k as ChatPage };
+
+//# sourceMappingURL=ChatPage.js.map

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

@@ -0,0 +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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"}