@btst/stack 1.3.1 → 1.4.1

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

@@ -0,0 +1,135 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const button = require('../../../../../../ui/src/components/button.cjs');
+const sheet = require('../../../../../../ui/src/components/sheet.cjs');
+const lucideReact = require('lucide-react');
+const utils = require('../../../../../../ui/src/lib/utils.cjs');
+const chatSidebar = require('./chat-sidebar.cjs');
+const chatInterface = require('./chat-interface.cjs');
+
+function ChatLayout({
+  apiBaseURL,
+  apiBasePath,
+  conversationId,
+  layout = "full",
+  className,
+  showSidebar = true,
+  widgetHeight = "600px",
+  initialMessages,
+  onMessagesChange
+}) {
+  const [sidebarOpen, setSidebarOpen] = React.useState(true);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = React.useState(false);
+  const [chatResetKey, setChatResetKey] = React.useState(0);
+  const apiPath = `${apiBaseURL}${apiBasePath}/chat`;
+  const handleNewChat = React.useCallback(() => {
+    if (!conversationId) {
+      setChatResetKey((prev) => prev + 1);
+    }
+  }, [conversationId]);
+  if (layout === "widget") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn(
+          "flex flex-col w-full border rounded-xl overflow-hidden bg-background shadow-sm",
+          className
+        ),
+        style: { height: widgetHeight },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          chatInterface.ChatInterface,
+          {
+            apiPath,
+            id: conversationId,
+            variant: "widget",
+            initialMessages,
+            onMessagesChange
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex h-[calc(100vh-4rem)] w-full overflow-hidden",
+        className
+      ),
+      "data-testid": "chat-layout",
+      children: [
+        showSidebar && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(
+              "hidden md:flex transition-all duration-300 ease-in-out",
+              sidebarOpen ? "w-72" : "w-0"
+            ),
+            children: sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
+              chatSidebar.ChatSidebar,
+              {
+                currentConversationId: conversationId,
+                onNewChat: handleNewChat,
+                className: "w-72"
+              }
+            )
+          }
+        ),
+        /* @__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 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: [
+            showSidebar && /* @__PURE__ */ jsxRuntime.jsxs(sheet.Sheet, { open: mobileSidebarOpen, onOpenChange: setMobileSidebarOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(sheet.SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "md:hidden",
+                  "aria-label": "Open menu",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-5 w-5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(sheet.SheetContent, { side: "left", className: "p-0 w-72", children: /* @__PURE__ */ jsxRuntime.jsx(
+                chatSidebar.ChatSidebar,
+                {
+                  currentConversationId: conversationId,
+                  onNewChat: () => {
+                    handleNewChat();
+                    setMobileSidebarOpen(false);
+                  }
+                }
+              ) })
+            ] }),
+            showSidebar && /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "hidden md:flex",
+                onClick: () => setSidebarOpen(!sidebarOpen),
+                "aria-label": sidebarOpen ? "Close sidebar" : "Open sidebar",
+                children: sidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chatInterface.ChatInterface,
+            {
+              apiPath,
+              id: conversationId,
+              variant: "full",
+              initialMessages,
+              onMessagesChange
+            },
+            `chat-${conversationId ?? "new"}-${chatResetKey}`
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+exports.ChatLayout = ChatLayout;

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

@@ -0,0 +1,133 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { Button } from '../../../../../../ui/src/components/button.mjs';
+import { Sheet, SheetTrigger, SheetContent } from '../../../../../../ui/src/components/sheet.mjs';
+import { Menu, PanelLeftClose, PanelLeft } from 'lucide-react';
+import { cn } from '../../../../../../ui/src/lib/utils.mjs';
+import { ChatSidebar } from './chat-sidebar.mjs';
+import { ChatInterface } from './chat-interface.mjs';
+
+function ChatLayout({
+  apiBaseURL,
+  apiBasePath,
+  conversationId,
+  layout = "full",
+  className,
+  showSidebar = true,
+  widgetHeight = "600px",
+  initialMessages,
+  onMessagesChange
+}) {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [chatResetKey, setChatResetKey] = useState(0);
+  const apiPath = `${apiBaseURL}${apiBasePath}/chat`;
+  const handleNewChat = useCallback(() => {
+    if (!conversationId) {
+      setChatResetKey((prev) => prev + 1);
+    }
+  }, [conversationId]);
+  if (layout === "widget") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col w-full border rounded-xl overflow-hidden bg-background shadow-sm",
+          className
+        ),
+        style: { height: widgetHeight },
+        children: /* @__PURE__ */ jsx(
+          ChatInterface,
+          {
+            apiPath,
+            id: conversationId,
+            variant: "widget",
+            initialMessages,
+            onMessagesChange
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-[calc(100vh-4rem)] w-full overflow-hidden",
+        className
+      ),
+      "data-testid": "chat-layout",
+      children: [
+        showSidebar && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "hidden md:flex transition-all duration-300 ease-in-out",
+              sidebarOpen ? "w-72" : "w-0"
+            ),
+            children: sidebarOpen && /* @__PURE__ */ jsx(
+              ChatSidebar,
+              {
+                currentConversationId: conversationId,
+                onNewChat: handleNewChat,
+                className: "w-72"
+              }
+            )
+          }
+        ),
+        /* @__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 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: [
+            showSidebar && /* @__PURE__ */ jsxs(Sheet, { open: mobileSidebarOpen, onOpenChange: setMobileSidebarOpen, children: [
+              /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "md:hidden",
+                  "aria-label": "Open menu",
+                  children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "p-0 w-72", children: /* @__PURE__ */ jsx(
+                ChatSidebar,
+                {
+                  currentConversationId: conversationId,
+                  onNewChat: () => {
+                    handleNewChat();
+                    setMobileSidebarOpen(false);
+                  }
+                }
+              ) })
+            ] }),
+            showSidebar && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "hidden md:flex",
+                onClick: () => setSidebarOpen(!sidebarOpen),
+                "aria-label": sidebarOpen ? "Close sidebar" : "Open sidebar",
+                children: sidebarOpen ? /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(PanelLeft, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex-1" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChatInterface,
+            {
+              apiPath,
+              id: conversationId,
+              variant: "full",
+              initialMessages,
+              onMessagesChange
+            },
+            `chat-${conversationId ?? "new"}-${chatResetKey}`
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { ChatLayout };