reachat 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/index.d.ts

@@ -6,3 +6,5 @@ export * from './types';
 export * from './theme';
 export * from './Markdown';
 export * from './ChatContext';
+export * from './AppBar';
+export * from './ChatBubble';

package/dist/index.js

@@ -10,13 +10,15 @@
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-import { m, z, C, v, F, s, f, g, h, i, j, M, k, N, b, p, o, e, d, l, c, q, n, T, u, t, r, x, y, w } from "./index-9RlgGcc-.js";
+import { A, m, B, z, C, v, F, s, f, g, h, i, j, M, k, N, b, p, o, e, d, l, c, q, n, T, u, t, r, x, y, w } from "./index-B1krf7tH.js";
 import "react/jsx-runtime";
 import "react";
 import "reablocks";
 import "motion/react";
 export {
+  A as AppBar,
   m as Chat,
+  B as ChatBubble,
   z as ChatContext,
   C as ChatInput,
   v as CodeHighlighter,

package/dist/index.umd.cjs

@@ -11,8 +11,8 @@
   }
 })();
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("reablocks"), require("react"), require("motion/react"), require("@radix-ui/react-slot"), require("react-markdown"), require("react-syntax-highlighter"), require("rehype-katex"), require("mdast-util-find-and-replace"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "reablocks", "react", "motion/react", "@radix-ui/react-slot", "react-markdown", "react-syntax-highlighter", "rehype-katex", "mdast-util-find-and-replace", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.reablocks, global.React, global.react, global.reactSlot, global.ReactMarkdown, global.reactSyntaxHighlighter, global.rehypeKatex, global.mdastUtilFindAndReplace, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns));
-})(this, function(exports2, jsxRuntime, reablocks, React, react, reactSlot, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, mdastUtilFindAndReplace, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("reablocks"), require("react"), require("motion/react"), require("@radix-ui/react-slot"), require("react-markdown"), require("react-syntax-highlighter"), require("rehype-katex"), require("mdast-util-find-and-replace"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "reablocks", "react", "motion/react", "@radix-ui/react-slot", "react-markdown", "react-syntax-highlighter", "rehype-katex", "mdast-util-find-and-replace", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns", "react-dom"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.reablocks, global.React, global.react, global.reactSlot, global.ReactMarkdown, global.reactSyntaxHighlighter, global.rehypeKatex, global.mdastUtilFindAndReplace, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns, global.reactDom));
+})(this, function(exports2, jsxRuntime, reablocks, React, react, reactSlot, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, mdastUtilFindAndReplace, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns, reactDom) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -189,7 +189,10 @@
     ] }) });
   };
   const SvgBack = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-chevron-left", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "m15 18-6-6 6-6" }));
-  const SessionMessagePanel = ({ children }) => {
+  const SessionMessagePanel = ({
+    children,
+    allowBack = true
+  }) => {
     const { activeSessionId, theme, isCompact, selectSession, viewType } = React.useContext(ChatContext);
     const isVisible = isCompact && activeSessionId || viewType === "chat" || !isCompact;
     return isVisible && /* @__PURE__ */ jsxRuntime.jsx(
@@ -211,7 +214,7 @@
           [theme.messages.console]: !isCompact
         }),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.messages.inner), children: [
-          isCompact && viewType !== "chat" && /* @__PURE__ */ jsxRuntime.jsxs(
+          allowBack && isCompact && viewType !== "chat" && /* @__PURE__ */ jsxRuntime.jsxs(
             reablocks.Button,
             {
               variant: "text",
@@ -1899,6 +1902,7 @@ ${response}`),
     console: "flex w-full gap-4 h-full",
     companion: "w-full h-full overflow-hidden",
     empty: "text-center flex-1",
+    appbar: "flex p-5",
     sessions: {
       base: "overflow-auto",
       console: "min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl",
@@ -2139,31 +2143,6 @@ ${response}`),
       }
     ) }) });
   };
-  const SessionsList = ({ children }) => {
-    const { theme, isCompact, activeSessionId } = React.useContext(ChatContext);
-    const isVisible = isCompact && !activeSessionId;
-    return (!isCompact || isVisible) && /* @__PURE__ */ jsxRuntime.jsx(
-      react.motion.div,
-      {
-        initial: { translateX: "-100%" },
-        animate: {
-          translateX: "0%",
-          transition: {
-            type: "tween",
-            ease: "linear",
-            duration: 0.2,
-            when: "beforeChildren"
-          }
-        },
-        exit: { translateX: "-100%" },
-        className: reablocks.cn(theme.sessions.base, {
-          [theme.sessions.companion]: isCompact,
-          [theme.sessions.console]: !isCompact
-        }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(reablocks.List, { children })
-      }
-    );
-  };
   const SvgTrash = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { id: "Delete" }, /* @__PURE__ */ React__namespace.createElement("path", { id: "Vector", d: "M5.97905 1.16666C5.90859 1.16576 5.83895 1.18189 5.77605 1.21368C5.71316 1.24547 5.65888 1.29199 5.61783 1.34926C5.57677 1.40654 5.55016 1.47288 5.54025 1.54265C5.53034 1.61242 5.53743 1.68355 5.56092 1.75H4.27007C3.7342 1.75 3.2324 2.01817 2.93535 2.46435L2.24492 3.5H2.18738C2.12941 3.49918 2.07185 3.50989 2.01805 3.5315C1.96425 3.55312 1.91529 3.58522 1.874 3.62593C1.83271 3.66663 1.79993 3.71514 1.77755 3.76863C1.75518 3.82211 1.74365 3.87952 1.74365 3.9375C1.74365 3.99548 1.75518 4.05288 1.77755 4.10636C1.79993 4.15985 1.83271 4.20836 1.874 4.24907C1.91529 4.28977 1.96425 4.32187 2.01805 4.34349C2.07185 4.3651 2.12941 4.37582 2.18738 4.375H2.41012C2.44765 4.38067 2.48576 4.38143 2.52348 4.37727L3.24468 11.1084C3.33169 11.9199 4.02367 12.5417 4.83973 12.5417H9.15947C9.97553 12.5417 10.6675 11.9199 10.7545 11.1084L11.4763 4.37727C11.5133 4.38124 11.5506 4.38047 11.5874 4.375H11.8124C11.8704 4.37582 11.9279 4.3651 11.9817 4.34349C12.0355 4.32187 12.0845 4.28977 12.1258 4.24907C12.1671 4.20836 12.1998 4.15985 12.2222 4.10636C12.2446 4.05288 12.2561 3.99548 12.2561 3.9375C12.2561 3.87952 12.2446 3.82211 12.2222 3.76863C12.1998 3.71514 12.1671 3.66663 12.1258 3.62593C12.0845 3.58522 12.0355 3.55312 11.9817 3.5315C11.9279 3.50989 11.8704 3.49918 11.8124 3.5H11.7548L11.0644 2.46435C10.7671 2.01841 10.2654 1.75 9.7297 1.75H8.43885C8.46234 1.68355 8.46943 1.61242 8.45952 1.54265C8.44961 1.47288 8.423 1.40654 8.38194 1.34926C8.34089 1.29199 8.2866 1.24547 8.22371 1.21368C8.16082 1.18189 8.09118 1.16576 8.02072 1.16666H5.97905ZM4.27007 2.625H9.7297C9.97394 2.625 10.2009 2.74639 10.3364 2.9497L10.7033 3.5H3.29651L3.66338 2.9497L3.66395 2.94913C3.79913 2.74608 4.02543 2.625 4.27007 2.625ZM3.40361 4.375H10.5962L9.88465 11.015C9.8445 11.3894 9.53575 11.6667 9.15947 11.6667H4.83973C4.46345 11.6667 4.15527 11.3894 4.11512 11.015L3.40361 4.375Z", fill: "currentColor" })));
   const SvgChat = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M8 3C4.55375 3 1.75 5.23753 1.75 7.98828C1.75 9.70653 2.83659 11.2762 4.62109 12.188C4.11184 13.0465 3.62587 13.7378 3.62012 13.7461C3.50687 13.9071 3.49862 14.1196 3.59912 14.2891C3.69012 14.4418 3.8543 14.5342 4.0293 14.5342C4.0483 14.5342 4.06743 14.533 4.08643 14.5308C4.15168 14.5233 5.66214 14.3364 7.50439 12.9604C7.67239 12.9712 7.8385 12.9766 8 12.9766C11.4462 12.9766 14.25 10.739 14.25 7.98828C14.25 5.23753 11.4462 3 8 3ZM8 4C10.8948 4 13.25 5.78903 13.25 7.98828C13.25 10.1875 10.8948 11.9766 8 11.9766C7.8055 11.9766 7.60225 11.968 7.396 11.9497C7.271 11.9382 7.1454 11.9752 7.0459 12.0527C6.3589 12.5855 5.72033 12.9308 5.20508 13.1528C5.38383 12.8648 5.57691 12.5418 5.76416 12.2061C5.83416 12.0813 5.84705 11.9324 5.7998 11.7974C5.75255 11.6624 5.64983 11.5542 5.51758 11.5C3.81033 10.7993 2.75 9.45328 2.75 7.98828C2.75 5.78903 5.10525 4 8 4ZM5.5 7.25C5.08575 7.25 4.75 7.58575 4.75 8C4.75 8.41425 5.08575 8.75 5.5 8.75C5.91425 8.75 6.25 8.41425 6.25 8C6.25 7.58575 5.91425 7.25 5.5 7.25ZM8 7.25C7.58575 7.25 7.25 7.58575 7.25 8C7.25 8.41425 7.58575 8.75 8 8.75C8.41425 8.75 8.75 8.41425 8.75 8C8.75 7.58575 8.41425 7.25 8 7.25ZM10.5 7.25C10.0857 7.25 9.75 7.58575 9.75 8C9.75 8.41425 10.0857 8.75 10.5 8.75C10.9143 8.75 11.25 8.41425 11.25 8C11.25 7.58575 10.9143 7.25 10.5 7.25Z", fill: "currentColor" }));
   const SessionListItem = ({
@@ -2204,6 +2183,48 @@ ${response}`),
       }
     );
   };
+  const SessionsList = ({
+    children,
+    templates
+  }) => {
+    const { theme, isCompact, activeSessionId, createSession } = React.useContext(ChatContext);
+    const isVisible = isCompact && !activeSessionId;
+    return (!isCompact || isVisible) && /* @__PURE__ */ jsxRuntime.jsxs(
+      react.motion.div,
+      {
+        initial: { translateX: "-100%" },
+        animate: {
+          translateX: "0%",
+          transition: {
+            type: "tween",
+            ease: "linear",
+            duration: 0.2,
+            when: "beforeChildren"
+          }
+        },
+        exit: { translateX: "-100%" },
+        className: reablocks.cn(theme.sessions.base, {
+          [theme.sessions.companion]: isCompact,
+          [theme.sessions.console]: !isCompact
+        }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reablocks.List, { children }),
+          templates && !activeSessionId && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: templates.map((template) => /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => createSession == null ? void 0 : createSession(), children: /* @__PURE__ */ jsxRuntime.jsx(
+            SessionListItem,
+            {
+              session: {
+                id: template.id,
+                title: template.title,
+                conversations: []
+              },
+              chatIcon: template.icon,
+              deletable: false
+            }
+          ) }, template.id)) })
+        ]
+      }
+    );
+  };
   const SvgPlus = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: 17, height: 17, viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { id: "add" }, /* @__PURE__ */ React__namespace.createElement("path", { id: "Vector", d: "M13.1667 9.16658H9.16671V13.1666H7.83337V9.16658H3.83337V7.83325H7.83337V3.83325H9.16671V7.83325H13.1667V9.16658Z", fill: "currentColor" })));
   const NewSessionButton = ({
     children,
@@ -2311,7 +2332,156 @@ ${response}`),
     const groups = React.useMemo(() => groupSessionsByDate(sessions), [sessions]);
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children ? children(groups) : groups.map(({ heading, sessions: sessions2 }) => /* @__PURE__ */ jsxRuntime.jsx(SessionsGroup, { heading, children: sessions2.map((session) => /* @__PURE__ */ jsxRuntime.jsx(SessionListItem, { session }, session.id)) })) });
   };
+  const AppBar = ({
+    content,
+    theme: customTheme = chatTheme
+  }) => {
+    const theme = reablocks.useComponentTheme("chat", customTheme);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reablocks.cn(theme.appbar), children: content });
+  };
+  const defaultPositions = {
+    "bottom-left": "bottom-5 left-5",
+    "bottom-right": "bottom-5 right-5",
+    "top-left": "top-5 left-5",
+    "top-right": "top-5 right-5"
+  };
+  const ChatBubble = React.memo(
+    ({
+      children,
+      bubbleContent,
+      position = "bottom-left",
+      customPosition,
+      portalTarget = typeof document !== "undefined" ? document.body : null,
+      className
+    }) => {
+      const [isOpen, setIsOpen] = React.useState(false);
+      const bubbleRef = React.useRef(null);
+      const contentRef = React.useRef(null);
+      const [bubbleRect, setBubbleRect] = React.useState(null);
+      React.useEffect(() => {
+        if (bubbleRef.current) {
+          setBubbleRect(bubbleRef.current.getBoundingClientRect());
+        }
+      }, [isOpen]);
+      const handleClose = React.useCallback(() => {
+        setIsOpen(false);
+      }, []);
+      const handleToggle = React.useCallback(() => {
+        setIsOpen((prev) => !prev);
+      }, []);
+      const getContentPosition = () => {
+        if (!bubbleRect) return {};
+        const positions = {
+          "bottom-left": {
+            bottom: `calc(100vh - ${bubbleRect.top}px)`,
+            left: `${bubbleRect.right}px`
+          },
+          "bottom-right": {
+            bottom: `calc(100vh - ${bubbleRect.top}px)`,
+            right: `calc(100vw - ${bubbleRect.left}px)`
+          },
+          "top-left": {
+            top: `${bubbleRect.bottom}px`,
+            left: `${bubbleRect.right}px`
+          },
+          "top-right": {
+            top: `${bubbleRect.bottom}px`,
+            right: `calc(100vw - ${bubbleRect.left}px)`
+          }
+        };
+        return positions[position];
+      };
+      const content = React.useMemo(
+        () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: bubbleRef,
+              style: {
+                ...customPosition,
+                ...portalTarget ? { position: "absolute" } : {}
+              },
+              onClick: handleToggle,
+              className: reablocks.cn(
+                "z-[1000]",
+                !portalTarget && "fixed",
+                defaultPositions[position],
+                "cursor-pointer",
+                className
+              ),
+              role: "button",
+              tabIndex: 0,
+              "aria-label": "Open chat",
+              children: bubbleContent
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: children && isOpen && bubbleRect && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.motion.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 0.5 },
+                exit: { opacity: 0 },
+                className: "fixed inset-0 z-[998]",
+                onClick: handleClose
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.motion.div,
+              {
+                ref: contentRef,
+                initial: false,
+                animate: {
+                  opacity: 1,
+                  scale: 1,
+                  x: 0,
+                  pointerEvents: "auto"
+                },
+                exit: {
+                  opacity: 0,
+                  scale: 0.8,
+                  x: position.includes("right") ? 20 : -20,
+                  pointerEvents: "none"
+                },
+                transition: { type: "spring", duration: 0.5 },
+                className: reablocks.cn(
+                  "fixed z-[999]",
+                  position.includes("right") ? "origin-right" : "origin-left",
+                  position.includes("top") ? "origin-top" : "origin-bottom"
+                ),
+                style: getContentPosition(),
+                children
+              }
+            )
+          ] }) })
+        ] }),
+        [
+          children,
+          customPosition,
+          portalTarget,
+          position,
+          className,
+          bubbleContent,
+          isOpen,
+          handleClose,
+          handleToggle,
+          bubbleRect
+        ]
+      );
+      if (!portalTarget) {
+        return content;
+      }
+      try {
+        return reactDom.createPortal(content, portalTarget);
+      } catch (error) {
+        console.error("Failed to create portal for ChatBubble:", error);
+        return content;
+      }
+    }
+  );
+  exports2.AppBar = AppBar;
   exports2.Chat = Chat;
+  exports2.ChatBubble = ChatBubble;
   exports2.ChatContext = ChatContext;
   exports2.ChatInput = ChatInput;
   exports2.CodeHighlighter = CodeHighlighter;