@btst/stack 1.3.0 → 1.4.0

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/chat-sidebar.mjs

@@ -0,0 +1,225 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Button } from '../../../../../../ui/src/components/button.mjs';
+import { Input } from '../../../../../../ui/src/components/input.mjs';
+import { ScrollArea } from '../../../../../../ui/src/components/scroll-area.mjs';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../../../../../ui/src/components/dropdown-menu.mjs';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '../../../../../../ui/src/components/alert-dialog.mjs';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../../../../../ui/src/components/dialog.mjs';
+import { MessageSquarePlus, MessageSquare, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
+import { cn } from '../../../../../../ui/src/lib/utils.mjs';
+import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { useConversations, useRenameConversation, useDeleteConversation } from '../hooks/chat-hooks.mjs';
+import { AI_CHAT_LOCALIZATION } from '../localization/index.mjs';
+
+function ChatSidebar({
+  currentConversationId,
+  onNewChat,
+  className
+}) {
+  const { navigate, localization: customLocalization } = usePluginOverrides("ai-chat", {});
+  const basePath = useBasePath();
+  const localization = { ...AI_CHAT_LOCALIZATION, ...customLocalization };
+  const { conversations, isLoading } = useConversations();
+  const renameMutation = useRenameConversation();
+  const deleteMutation = useDeleteConversation();
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [selectedConversation, setSelectedConversation] = useState(null);
+  const [newTitle, setNewTitle] = useState("");
+  const handleNewChat = () => {
+    if (navigate) {
+      navigate(`${basePath}/chat`);
+    }
+    if (onNewChat) {
+      onNewChat();
+    }
+  };
+  const handleConversationClick = (conversation) => {
+    if (navigate) {
+      navigate(`${basePath}/chat/${conversation.id}`);
+    }
+  };
+  const handleRenameClick = (conversation) => {
+    setSelectedConversation(conversation);
+    setNewTitle(conversation.title);
+    setRenameDialogOpen(true);
+  };
+  const handleDeleteClick = (conversation) => {
+    setSelectedConversation(conversation);
+    setDeleteDialogOpen(true);
+  };
+  const handleRenameConfirm = async () => {
+    if (selectedConversation && newTitle.trim()) {
+      await renameMutation.mutateAsync({
+        id: selectedConversation.id,
+        title: newTitle.trim()
+      });
+      setRenameDialogOpen(false);
+      setSelectedConversation(null);
+      setNewTitle("");
+    }
+  };
+  const handleDeleteConfirm = async () => {
+    if (selectedConversation) {
+      await deleteMutation.mutateAsync({ id: selectedConversation.id });
+      setDeleteDialogOpen(false);
+      setSelectedConversation(null);
+      if (selectedConversation.id === currentConversationId && navigate) {
+        navigate(`${basePath}/chat`);
+      }
+    }
+  };
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    const now = /* @__PURE__ */ new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 6e4);
+    const diffHours = Math.floor(diffMs / 36e5);
+    const diffDays = Math.floor(diffMs / 864e5);
+    if (diffMins < 1) return localization.TIME_JUST_NOW;
+    if (diffMins < 60)
+      return localization.TIME_MINUTES_AGO.replace("{count}", String(diffMins));
+    if (diffHours < 24)
+      return localization.TIME_HOURS_AGO.replace("{count}", String(diffHours));
+    if (diffDays === 1) return localization.TIME_YESTERDAY;
+    if (diffDays < 7)
+      return localization.TIME_DAYS_AGO.replace("{count}", String(diffDays));
+    return date.toLocaleDateString();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full bg-muted/30 border-r", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        onClick: handleNewChat,
+        className: "w-full justify-start gap-2",
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ jsx(MessageSquarePlus, { className: "h-4 w-4" }),
+          localization.SIDEBAR_NEW_CHAT
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-2", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: localization.CHAT_LOADING }) : conversations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: localization.SIDEBAR_NO_CONVERSATIONS }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: conversations.map((conversation) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-accent cursor-pointer transition-colors overflow-hidden",
+          currentConversationId === conversation.id && "bg-accent"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex-1 flex items-center gap-2 text-left min-w-0 overflow-hidden",
+              onClick: () => handleConversationClick(conversation),
+              children: [
+                /* @__PURE__ */ jsx(MessageSquare, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: conversation.title }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: formatDate(conversation.updatedAt) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity",
+                children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+              /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleRenameClick(conversation);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 mr-2" }),
+                    localization.CONVERSATION_RENAME
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleDeleteClick(conversation);
+                  },
+                  className: "text-destructive focus:text-destructive",
+                  children: [
+                    /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2" }),
+                    localization.CONVERSATION_DELETE
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ]
+      },
+      conversation.id
+    )) }) }) }),
+    /* @__PURE__ */ jsx(Dialog, { open: renameDialogOpen, onOpenChange: setRenameDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: localization.CONVERSATION_RENAME }) }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: newTitle,
+          onChange: (e) => setNewTitle(e.target.value),
+          placeholder: localization.CONVERSATION_RENAME_PLACEHOLDER,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              void handleRenameConfirm();
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            onClick: () => setRenameDialogOpen(false),
+            children: localization.CONVERSATION_RENAME_CANCEL
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleRenameConfirm,
+            disabled: !newTitle.trim() || renameMutation.isPending,
+            children: localization.CONVERSATION_RENAME_SAVE
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(AlertDialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: localization.CONVERSATION_DELETE_CONFIRM_TITLE }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { children: localization.CONVERSATION_DELETE_CONFIRM_DESCRIPTION })
+      ] }),
+      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx(AlertDialogCancel, { children: localization.CONVERSATION_DELETE_CANCEL }),
+        /* @__PURE__ */ jsx(
+          AlertDialogAction,
+          {
+            onClick: handleDeleteConfirm,
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            children: localization.CONVERSATION_DELETE_CONFIRM_BUTTON
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+export { ChatSidebar };

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/loading/chat-page-skeleton.cjs

@@ -0,0 +1,31 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const skeleton = require('../../../../../../../ui/src/components/skeleton.cjs');
+
+function ChatPageSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[calc(100vh-4rem)] w-full overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:flex w-72 flex-col border-r bg-muted/30", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-full" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 p-2 space-y-2", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-4 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-full" }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-20" })
+        ] })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2 border-b", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-9 md:hidden" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-9 hidden md:block" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 p-4 space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-3xl mx-auto w-full space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-full min-h-[300px]", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-48" }) }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-3xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-12 w-full rounded-lg" }) }) })
+    ] })
+  ] });
+}
+
+exports.ChatPageSkeleton = ChatPageSkeleton;

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/loading/chat-page-skeleton.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Skeleton } from '../../../../../../../ui/src/components/skeleton.mjs';
+
+function ChatPageSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-[calc(100vh-4rem)] w-full overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "hidden md:flex w-72 flex-col border-r bg-muted/30", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 p-2 space-y-2", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+        ] })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2 border-b", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9 md:hidden" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9 hidden md:block" }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 p-4 space-y-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-3xl mx-auto w-full space-y-4", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center h-full min-h-[300px]", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" }) }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "border-t p-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-3xl mx-auto", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full rounded-lg" }) }) })
+    ] })
+  ] });
+}
+
+export { ChatPageSkeleton };

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/loading/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const chatPageSkeleton = require('./chat-page-skeleton.cjs');
+
+function ChatLoading() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "chat-skeleton", children: /* @__PURE__ */ jsxRuntime.jsx(chatPageSkeleton.ChatPageSkeleton, {}) });
+}
+
+exports.ChatPageSkeleton = chatPageSkeleton.ChatPageSkeleton;
+exports.ChatLoading = ChatLoading;

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/loading/index.mjs

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { ChatPageSkeleton } from './chat-page-skeleton.mjs';
+
+function ChatLoading() {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "chat-skeleton", children: /* @__PURE__ */ jsx(ChatPageSkeleton, {}) });
+}
+
+export { ChatLoading, ChatPageSkeleton };

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/pages/404-page.cjs

@@ -0,0 +1,18 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const context = require('@btst/stack/context');
+const errorPlaceholder = require('../shared/error-placeholder.cjs');
+const index = require('../../localization/index.cjs');
+
+function NotFoundPage({ message }) {
+  const { localization } = context.usePluginOverrides("ai-chat", {
+    localization: index.AI_CHAT_LOCALIZATION
+  });
+  const title = localization?.CHAT_PAGE_NOT_FOUND_TITLE ?? index.AI_CHAT_LOCALIZATION.CHAT_PAGE_NOT_FOUND_TITLE;
+  const desc = message || (localization?.CHAT_PAGE_NOT_FOUND_DESCRIPTION ?? index.AI_CHAT_LOCALIZATION.CHAT_PAGE_NOT_FOUND_DESCRIPTION);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "404-page", className: "flex flex-col h-[calc(100vh-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(errorPlaceholder.ErrorPlaceholder, { title, message: desc }) });
+}
+
+exports.NotFoundPage = NotFoundPage;

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/pages/404-page.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { usePluginOverrides } from '@btst/stack/context';
+import { ErrorPlaceholder } from '../shared/error-placeholder.mjs';
+import { AI_CHAT_LOCALIZATION } from '../../localization/index.mjs';
+
+function NotFoundPage({ message }) {
+  const { localization } = usePluginOverrides("ai-chat", {
+    localization: AI_CHAT_LOCALIZATION
+  });
+  const title = localization?.CHAT_PAGE_NOT_FOUND_TITLE ?? AI_CHAT_LOCALIZATION.CHAT_PAGE_NOT_FOUND_TITLE;
+  const desc = message || (localization?.CHAT_PAGE_NOT_FOUND_DESCRIPTION ?? AI_CHAT_LOCALIZATION.CHAT_PAGE_NOT_FOUND_DESCRIPTION);
+  return /* @__PURE__ */ jsx("div", { "data-testid": "404-page", className: "flex flex-col h-[calc(100vh-4rem)]", children: /* @__PURE__ */ jsx(ErrorPlaceholder, { title, message: desc }) });
+}
+
+export { NotFoundPage };

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/pages/chat-page.cjs

@@ -0,0 +1,39 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const components = require('@btst/stack/client/components');
+const defaultError = require('../shared/default-error.cjs');
+const index = require('../loading/index.cjs');
+const _404Page = require('./404-page.cjs');
+
+const ChatPage = React.lazy(
+  () => import('./chat-page.internal.cjs').then((m) => ({ default: m.ChatPage }))
+);
+function ChatPageComponent({ conversationId }) {
+  const { onRouteError } = context.usePluginOverrides("ai-chat", {});
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: conversationId ? `/chat/${conversationId}` : "/chat",
+      PageComponent: ChatPage,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: index.ChatLoading,
+      NotFoundComponent: _404Page.NotFoundPage,
+      props: { conversationId },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError(conversationId ? "chatConversation" : "chat", error, {
+            path: conversationId ? `/chat/${conversationId}` : "/chat",
+            isSSR: typeof window === "undefined",
+            params: conversationId ? { id: conversationId } : void 0
+          });
+        }
+      }
+    }
+  );
+}
+
+exports.ChatPageComponent = ChatPageComponent;

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/pages/chat-page.internal.cjs

@@ -0,0 +1,22 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const chatLayout = require('../chat-layout.cjs');
+const context = require('@btst/stack/context');
+
+function ChatPage({ conversationId }) {
+  const { apiBaseURL, apiBasePath, mode } = context.usePluginOverrides("ai-chat", {});
+  const showSidebar = mode !== "public";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chatLayout.ChatLayout,
+    {
+      apiBaseURL: apiBaseURL ?? "",
+      apiBasePath: apiBasePath ?? "",
+      conversationId,
+      showSidebar
+    }
+  );
+}
+
+exports.ChatPage = ChatPage;

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/pages/chat-page.internal.mjs

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ChatLayout } from '../chat-layout.mjs';
+import { usePluginOverrides } from '@btst/stack/context';
+
+function ChatPage({ conversationId }) {
+  const { apiBaseURL, apiBasePath, mode } = usePluginOverrides("ai-chat", {});
+  const showSidebar = mode !== "public";
+  return /* @__PURE__ */ jsx(
+    ChatLayout,
+    {
+      apiBaseURL: apiBaseURL ?? "",
+      apiBasePath: apiBasePath ?? "",
+      conversationId,
+      showSidebar
+    }
+  );
+}
+
+export { ChatPage };

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/pages/chat-page.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { DefaultError } from '../shared/default-error.mjs';
+import { ChatLoading } from '../loading/index.mjs';
+import { NotFoundPage } from './404-page.mjs';
+
+const ChatPage = lazy(
+  () => import('./chat-page.internal.mjs').then((m) => ({ default: m.ChatPage }))
+);
+function ChatPageComponent({ conversationId }) {
+  const { onRouteError } = usePluginOverrides("ai-chat", {});
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path: conversationId ? `/chat/${conversationId}` : "/chat",
+      PageComponent: ChatPage,
+      ErrorComponent: DefaultError,
+      LoadingComponent: ChatLoading,
+      NotFoundComponent: NotFoundPage,
+      props: { conversationId },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError(conversationId ? "chatConversation" : "chat", error, {
+            path: conversationId ? `/chat/${conversationId}` : "/chat",
+            isSSR: typeof window === "undefined",
+            params: conversationId ? { id: conversationId } : void 0
+          });
+        }
+      }
+    }
+  );
+}
+
+export { ChatPageComponent };

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/shared/default-error.cjs

@@ -0,0 +1,18 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const errorPlaceholder = require('./error-placeholder.cjs');
+const context = require('@btst/stack/context');
+const index = require('../../localization/index.cjs');
+
+function DefaultError({ error }) {
+  const { localization } = context.usePluginOverrides("ai-chat", {
+    localization: index.AI_CHAT_LOCALIZATION
+  });
+  const title = localization?.CHAT_GENERIC_ERROR_TITLE ?? index.AI_CHAT_LOCALIZATION.CHAT_GENERIC_ERROR_TITLE;
+  const message = process.env.NODE_ENV === "production" ? localization?.CHAT_GENERIC_ERROR_MESSAGE ?? index.AI_CHAT_LOCALIZATION.CHAT_GENERIC_ERROR_MESSAGE : error?.message ?? localization?.CHAT_GENERIC_ERROR_MESSAGE ?? index.AI_CHAT_LOCALIZATION.CHAT_GENERIC_ERROR_MESSAGE;
+  return /* @__PURE__ */ jsxRuntime.jsx(errorPlaceholder.ErrorPlaceholder, { title, message });
+}
+
+exports.DefaultError = DefaultError;

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/shared/default-error.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ErrorPlaceholder } from './error-placeholder.mjs';
+import { usePluginOverrides } from '@btst/stack/context';
+import { AI_CHAT_LOCALIZATION } from '../../localization/index.mjs';
+
+function DefaultError({ error }) {
+  const { localization } = usePluginOverrides("ai-chat", {
+    localization: AI_CHAT_LOCALIZATION
+  });
+  const title = localization?.CHAT_GENERIC_ERROR_TITLE ?? AI_CHAT_LOCALIZATION.CHAT_GENERIC_ERROR_TITLE;
+  const message = process.env.NODE_ENV === "production" ? localization?.CHAT_GENERIC_ERROR_MESSAGE ?? AI_CHAT_LOCALIZATION.CHAT_GENERIC_ERROR_MESSAGE : error?.message ?? localization?.CHAT_GENERIC_ERROR_MESSAGE ?? AI_CHAT_LOCALIZATION.CHAT_GENERIC_ERROR_MESSAGE;
+  return /* @__PURE__ */ jsx(ErrorPlaceholder, { title, message });
+}
+
+export { DefaultError };

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/shared/error-placeholder.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+
+function ErrorPlaceholder({
+  title,
+  message
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex min-h-[400px] flex-col items-center justify-center gap-6 p-8",
+      "data-testid": "error-placeholder",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CloudAlert, { className: "size-16 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground max-w-md", children: message })
+        ] })
+      ]
+    }
+  );
+}
+
+exports.ErrorPlaceholder = ErrorPlaceholder;

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/shared/error-placeholder.mjs

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CloudAlert } from 'lucide-react';
+
+function ErrorPlaceholder({
+  title,
+  message
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-[400px] flex-col items-center justify-center gap-6 p-8",
+      "data-testid": "error-placeholder",
+      children: [
+        /* @__PURE__ */ jsx(CloudAlert, { className: "size-16 text-muted-foreground" }),
+        /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-md", children: message })
+        ] })
+      ]
+    }
+  );
+}
+
+export { ErrorPlaceholder };