reachat 0.0.1 → 1.0.0

package/dist/index.umd.cjs

@@ -1,9 +1,7 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react-textarea-autosize")) : typeof define === "function" && define.amd ? define(["exports", "react-textarea-autosize"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reablocks = {}, global.TextareaAutosize));
-})(this, function(exports2, TextareaAutosize) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("reablocks"), require("@radix-ui/react-slot"), require("framer-motion"), require("react-markdown"), require("remark-gfm"), require("highlight.js"), require("highlight.js/styles/atom-one-dark.css"), require("mdast-util-find-and-replace"), require("remark-youtube"), require("reakeys"), require("date-fns")) : typeof define === "function" && define.amd ? define(["exports", "reablocks", "@radix-ui/react-slot", "framer-motion", "react-markdown", "remark-gfm", "highlight.js", "highlight.js/styles/atom-one-dark.css", "mdast-util-find-and-replace", "remark-youtube", "reakeys", "date-fns"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reablocks = {}, global.reablocks, global.reactSlot, global.framerMotion, global.ReactMarkdown, global.remarkGfm, global.hljs, null, global.mdastUtilFindAndReplace, global.remarkYoutube, global.reakeys, global.dateFns));
+})(this, function(exports2, reablocks, reactSlot, framerMotion, ReactMarkdown, remarkGfm, hljs, atomOneDark_css, mdastUtilFindAndReplace, remarkYoutube, reakeys, dateFns) {
   "use strict";
-  const useLlm = (options) => {
-  };
   var jsxRuntime = { exports: {} };
   var reactJsxRuntime_production_min = {};
   var react = { exports: {} };
@@ -3092,11 +3090,30 @@
     jsxRuntime.exports = requireReactJsxRuntime_development();
   }
   var jsxRuntimeExports = jsxRuntime.exports;
-  const SessionInput = ({ onSendMessage, isLoading, inputPlaceholder, onStopMessage }) => {
+  const SvgSend = (props) => /* @__PURE__ */ reactExports.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-send-horizontal", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "m3 3 3 9-3 9 19-9Z" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M6 12h16" }));
+  const SvgStop = (props) => /* @__PURE__ */ reactExports.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-octagon-x", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "m15 9-6 6" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z" }), /* @__PURE__ */ reactExports.createElement("path", { d: "m9 9 6 6" }));
+  const SvgPaperclip = (props) => /* @__PURE__ */ reactExports.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-paperclip", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }));
+  const ChatContext = reactExports.createContext({
+    sessions: [],
+    activeSessionId: null
+  });
+  const ChatInput = ({
+    allowedFiles,
+    onSendMessage,
+    placeholder,
+    onStopMessage,
+    onFileUpload,
+    defaultValue,
+    sendIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(SvgSend, {}),
+    stopIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(SvgStop, {}),
+    attachIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(SvgPaperclip, {})
+  }) => {
+    const { theme, isLoading } = reactExports.useContext(ChatContext);
     const [message, setMessage] = reactExports.useState("");
+    const fileInputRef = reactExports.useRef(null);
     const handleSendMessage = () => {
       if (message.trim()) {
-        onSendMessage(message);
+        onSendMessage == null ? void 0 : onSendMessage(message);
         setMessage("");
       }
     };
@@ -3106,168 +3123,768 @@
         handleSendMessage();
       }
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "session-input mt-4", children: [
+    const handleFileUpload = (event) => {
+      var _a;
+      const file = (_a = event.target.files) == null ? void 0 : _a[0];
+      if (file && onFileUpload) {
+        onFileUpload(file);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: reablocks.cn(theme.input.base), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        TextareaAutosize,
+        reablocks.Textarea,
         {
-          className: "w-full p-2 border rounded",
-          minRows: 3,
+          containerClassName: reablocks.cn(theme.input.input),
+          minRows: 1,
           autoFocus: true,
           value: message,
           onChange: (e) => setMessage(e.target.value),
+          defaultValue,
           onKeyPress: handleKeyPress,
-          placeholder: inputPlaceholder,
+          placeholder,
           disabled: isLoading
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex space-x-2", children: [
+      (allowedFiles == null ? void 0 : allowedFiles.length) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
+          "input",
           {
-            className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700",
-            onClick: handleSendMessage,
-            disabled: isLoading,
-            children: "Send"
+            type: "file",
+            ref: fileInputRef,
+            className: "hidden",
+            accept: allowedFiles.join(","),
+            onChange: handleFileUpload
           }
         ),
-        isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          reablocks.Button,
           {
-            className: "px-4 py-2 bg-red-500 text-white rounded hover:bg-red-700",
-            onClick: onStopMessage,
-            children: "Stop"
+            title: "Upload",
+            className: reablocks.cn(theme.input.upload),
+            onClick: () => {
+              var _a;
+              return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+            },
+            children: attachIcon
           }
         )
-      ] })
+      ] }),
+      isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        reablocks.Button,
+        {
+          title: "Stop",
+          className: reablocks.cn(theme.input.stop),
+          onClick: onStopMessage,
+          children: stopIcon
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        reablocks.Button,
+        {
+          title: "Send",
+          className: reablocks.cn(theme.input.send),
+          onClick: handleSendMessage,
+          disabled: isLoading,
+          children: sendIcon
+        }
+      )
     ] });
   };
-  const SessionMessage = ({
+  const SessionEmpty = ({
+    children
+  }) => {
+    const { theme } = reactExports.useContext(ChatContext);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: reablocks.cn(theme.empty), children });
+  };
+  const SessionMessagesHeader = ({ children }) => {
+    const { activeSession, theme } = reactExports.useContext(ChatContext);
+    const Comp = children ? reactSlot.Slot : "header";
+    if (!activeSession) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Comp, { className: reablocks.cn(theme.messages.header), children: children || /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: reablocks.cn(theme.messages.title), children: /* @__PURE__ */ jsxRuntimeExports.jsx(reablocks.Ellipsis, { limit: 125, value: activeSession.title }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        reablocks.DateFormat,
+        {
+          className: reablocks.cn(theme.messages.date),
+          date: activeSession.createdAt
+        }
+      )
+    ] }) });
+  };
+  const SessionMessagePanel = ({ children }) => {
+    const { theme } = reactExports.useContext(ChatContext);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: reablocks.cn(theme.messages.base), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 h-full flex flex-col", children }) });
+  };
+  const SvgCopy = (props) => /* @__PURE__ */ reactExports.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-copy", ...props }, /* @__PURE__ */ reactExports.createElement("rect", { width: 14, height: 14, x: 8, y: 8, rx: 2, ry: 2 }), /* @__PURE__ */ reactExports.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }));
+  const SvgThumbsDown = (props) => /* @__PURE__ */ reactExports.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-thumbs-down", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M17 14V2" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" }));
+  const SvgThumbsUp = (props) => /* @__PURE__ */ reactExports.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-thumbs-up", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M7 10v12" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" }));
+  const SvgRefresh = (props) => /* @__PURE__ */ reactExports.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-refresh-ccw", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M3 3v5h5" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M16 16h5v5" }));
+  const CodeHighlighter = ({ className, children }) => {
+    const codeBlockRef = reactExports.useRef(null);
+    reactExports.useLayoutEffect(() => {
+      hljs.highlightElement(codeBlockRef.current);
+    }, []);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("code", { ref: codeBlockRef, className: reablocks.cn(className), children });
+  };
+  const TableComponent = ({ children, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("table", { ...props, children });
+  const TableHeaderCell = ({ children, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("th", { ...props, children });
+  const TableDataCell = ({ children, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("td", { ...props, children });
+  const Markdown = ({
+    children,
+    remarkPlugins = [remarkGfm]
+  }) => {
+    const { theme } = reactExports.useContext(ChatContext);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ReactMarkdown,
+      {
+        remarkPlugins,
+        components: {
+          code: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CodeHighlighter,
+            {
+              ...props,
+              className: reablocks.cn(theme.messages.message.markdown.code)
+            }
+          ),
+          table: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableComponent, { ...props, className: reablocks.cn(theme.messages.message.markdown.table) }),
+          th: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableHeaderCell, { ...props, className: reablocks.cn(theme.messages.message.markdown.th) }),
+          td: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableDataCell, { ...props, className: reablocks.cn(theme.messages.message.markdown.td) }),
+          a: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("a", { ...props, className: reablocks.cn(theme.messages.message.markdown.a) }),
+          p: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("p", { ...props, className: reablocks.cn(theme.messages.message.markdown.p) }),
+          li: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ...props, className: reablocks.cn(theme.messages.message.markdown.li) }),
+          ul: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ...props, className: reablocks.cn(theme.messages.message.markdown.ul) }),
+          ol: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { ...props, className: reablocks.cn(theme.messages.message.markdown.ol) })
+        },
+        children
+      }
+    );
+  };
+  const CVE_REGEX = /(CVE-(19|20)\d{2}-\d{4,7})/gi;
+  function remarkCve() {
+    return (tree, _file) => {
+      mdastUtilFindAndReplace.findAndReplace(tree, [[
+        CVE_REGEX,
+        replaceCve
+      ]]);
+    };
+    function replaceCve(value, id) {
+      return [
+        {
+          type: "link",
+          url: `https://cve.mitre.org/cgi-bin/cvename.cgi?name=${id}`,
+          children: [
+            { children: [{ type: "text", value: value.trim() }] }
+          ]
+        }
+      ];
+    }
+  }
+  const MessageQuestion = ({
     question,
+    children
+  }) => {
+    const { theme, remarkPlugins = [remarkGfm, remarkYoutube] } = reactExports.useContext(ChatContext);
+    const Comp = children ? reactSlot.Slot : "div";
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Comp, { className: reablocks.cn(theme.messages.message.question), children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { remarkPlugins, children: question }) });
+  };
+  const MessageResponse = ({
     response,
-    responseTransformers = []
+    isLoading,
+    children
   }) => {
-    const transformResponse = (response2) => {
-      const applyTransformers = (index, response3) => {
-        if (index >= responseTransformers.length) return response3;
-        const transformer = responseTransformers[index];
-        return transformer(response3, (transformedResponse) => applyTransformers(index + 1, transformedResponse));
-      };
-      return applyTransformers(0, response2);
-    };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "conversation mb-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "question font-semibold", children: question }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "response text-gray-700", children: transformResponse(response) })
-    ] });
+    const { theme, remarkPlugins = [remarkGfm, remarkYoutube] } = reactExports.useContext(ChatContext);
+    const Comp = children ? reactSlot.Slot : "div";
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Comp, { className: reablocks.cn(theme.messages.message.response), children: children || /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { remarkPlugins, children: response }),
+      isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        framerMotion.motion.div,
+        {
+          className: reablocks.cn(theme.messages.message.cursor),
+          animate: { opacity: [1, 0] },
+          transition: {
+            duration: 0.7,
+            repeat: Infinity,
+            repeatType: "reverse"
+          }
+        }
+      )
+    ] }) });
   };
-  const SessionMessages = ({
-    conversations,
-    responseTransformers
+  const SvgFile = (props) => /* @__PURE__ */ reactExports.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-file", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }));
+  const MessageFile = ({
+    name,
+    type,
+    url,
+    limit = 100,
+    fileIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(SvgFile, {})
   }) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "conversations mt-2", children: conversations.map((conversation) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      SessionMessage,
+    const { theme } = reactExports.useContext(ChatContext);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "figure",
       {
-        question: conversation.question,
-        response: conversation.response || "",
-        responseTransformers
-      },
-      conversation.id
-    )) });
+        className: reablocks.cn(theme.messages.message.files.file.base),
+        onClick: () => {
+          window.open(url, "_blank");
+        },
+        children: [
+          fileIcon,
+          (name || type) && /* @__PURE__ */ jsxRuntimeExports.jsx("figcaption", { children: name && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: reablocks.cn(theme.messages.message.files.file.name), children: /* @__PURE__ */ jsxRuntimeExports.jsx(reablocks.Ellipsis, { value: name, limit }) }) })
+        ]
+      }
+    );
   };
-  const SessionListItem = ({
-    session,
-    isActive,
-    onSelectSession,
-    onDeleteSession
-  }) => {
+  const MessageFiles = ({ files, children }) => {
+    const { theme } = reactExports.useContext(ChatContext);
+    const Comp = children ? reactSlot.Slot : MessageFile;
+    if (!files || files.length === 0) {
+      return null;
+    }
+    return files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: reablocks.cn(theme.messages.message.files.base), children: files.map((file, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(Comp, { ...file, children }, index)) });
+  };
+  const MessageSource = ({ title, url, image, limit = 50 }) => {
+    const { theme } = reactExports.useContext(ChatContext);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
+      "figure",
       {
-        className: `session border p-4 mb-4 rounded ${isActive ? "bg-blue-100" : "bg-white"} cursor-pointer`,
-        onClick: () => onSelectSession && onSelectSession(session.id),
+        className: reablocks.cn(theme.messages.message.sources.source.base),
+        onClick: () => {
+          if (url) {
+            window.open(url, "_blank");
+          }
+        },
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-bold", children: session.title }),
-          onDeleteSession && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              className: "mt-2 text-red-500 hover:text-red-700",
-              onClick: (e) => {
-                e.stopPropagation();
-                onDeleteSession(session.id);
-              },
-              children: "Delete"
-            }
-          )
+          image && /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: image, alt: title, className: reablocks.cn(theme.messages.message.sources.source.image) }),
+          (title || url) && /* @__PURE__ */ jsxRuntimeExports.jsxs("figcaption", { children: [
+            title && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: reablocks.cn(theme.messages.message.sources.source.title), children: /* @__PURE__ */ jsxRuntimeExports.jsx(reablocks.Ellipsis, { value: title, limit }) }),
+            url && /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: reablocks.cn(theme.messages.message.sources.source.url), children: url })
+          ] })
         ]
       }
     );
   };
-  const SessionsList = ({
-    sessions,
-    activeSessionId,
-    onSelectSession,
-    onDeleteSession
+  const MessageSources = ({
+    sources,
+    children
   }) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: sessions.map((session) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      SessionListItem,
-      {
-        session,
-        isActive: session.id === activeSessionId,
-        onSelectSession,
-        onDeleteSession
-      },
-      session.id
-    )) });
+    const { theme } = reactExports.useContext(ChatContext);
+    const Comp = children ? reactSlot.Slot : MessageSource;
+    if (!sources || sources.length === 0) {
+      return null;
+    }
+    return sources && sources.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: reablocks.cn(theme.messages.message.sources.base), children: sources.map((source, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(Comp, { ...source, children }, index)) });
+  };
+  const MessageActions = ({
+    children,
+    ...props
+  }) => {
+    const { theme } = reactExports.useContext(ChatContext);
+    const {
+      question,
+      response,
+      copyIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(SvgCopy, {}),
+      thumbsUpIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(SvgThumbsUp, {}),
+      thumbsDownIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(SvgThumbsDown, {}),
+      refreshIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(SvgRefresh, {}),
+      onCopy,
+      onUpvote,
+      onDownvote,
+      onRefresh
+    } = props;
+    const Comp = children ? reactSlot.Slot : "div";
+    const handleCopy = (text) => {
+      navigator.clipboard.writeText(text).then(() => {
+        console.log("Text copied to clipboard");
+      }).catch((err) => {
+        console.error("Could not copy text: ", err);
+      });
+    };
+    return (copyIcon || thumbsDownIcon || thumbsUpIcon || refreshIcon) && /* @__PURE__ */ jsxRuntimeExports.jsx(Comp, { className: reablocks.cn(theme.messages.message.footer.base), children: children || /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      copyIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        reablocks.IconButton,
+        {
+          variant: "text",
+          disablePadding: true,
+          title: "Copy question and response",
+          className: reablocks.cn(theme.messages.message.footer.copy),
+          onClick: onCopy ? onCopy : () => handleCopy(`${question}
+${response}`),
+          children: copyIcon
+        }
+      ),
+      thumbsUpIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        reablocks.IconButton,
+        {
+          variant: "text",
+          disablePadding: true,
+          title: "Upvote",
+          className: reablocks.cn(theme.messages.message.footer.upvote),
+          onClick: onUpvote,
+          children: thumbsUpIcon
+        }
+      ),
+      thumbsDownIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        reablocks.IconButton,
+        {
+          variant: "text",
+          disablePadding: true,
+          title: "Downvote",
+          className: reablocks.cn(theme.messages.message.footer.downvote),
+          onClick: onDownvote,
+          children: thumbsDownIcon
+        }
+      ),
+      refreshIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        reablocks.IconButton,
+        {
+          variant: "text",
+          disablePadding: true,
+          title: "Refresh",
+          className: reablocks.cn(theme.messages.message.footer.refresh),
+          onClick: onRefresh,
+          children: refreshIcon
+        }
+      )
+    ] }) });
+  };
+  const messageVariants = {
+    hidden: {
+      opacity: 0,
+      y: 20
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4
+      }
+    }
   };
-  const Sessions = ({
-    viewType,
+  const SessionMessage = ({
+    conversation,
+    isLast,
+    children
+  }) => {
+    const { theme, isLoading } = reactExports.useContext(ChatContext);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(framerMotion.motion.div, { variants: messageVariants, children: /* @__PURE__ */ jsxRuntimeExports.jsx(reablocks.Card, { className: reablocks.cn(theme.messages.message.base), children: children || /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(MessageFiles, { files: conversation.files }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(MessageQuestion, { question: conversation.question }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MessageResponse,
+        {
+          response: conversation.response,
+          isLoading: isLast && isLoading
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSources, { sources: conversation.sources }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MessageActions,
+        {
+          question: conversation.question,
+          response: conversation.response,
+          copyIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgCopy, {}),
+          thumbsUpIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgThumbsUp, {}),
+          thumbsDownIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgThumbsDown, {}),
+          refreshIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgRefresh, {})
+        }
+      )
+    ] }) }) }, conversation.id);
+  };
+  const containerVariants = {
+    hidden: {},
+    visible: {
+      transition: {
+        staggerChildren: 0.07
+      }
+    }
+  };
+  const SessionMessages = ({
+    children,
+    newSessionContent,
+    limit = 10,
+    showMoreText = "Show more"
+  }) => {
+    const { activeSession, theme, isLoading } = reactExports.useContext(ChatContext);
+    const contentRef = reactExports.useRef(null);
+    const [isAnimating, setIsAnimating] = reactExports.useState(true);
+    reactExports.useEffect(() => {
+      if (contentRef.current) {
+        requestAnimationFrame(
+          () => contentRef.current.scrollTop = contentRef.current.scrollHeight
+        );
+      }
+    }, [activeSession, isAnimating]);
+    function handleShowMore() {
+      showNext(10);
+      requestAnimationFrame(() => contentRef.current.scrollTop = 0);
+    }
+    const reversedConvos = reactExports.useMemo(
+      () => [...(activeSession == null ? void 0 : activeSession.conversations) ?? []].reverse(),
+      [activeSession]
+    );
+    const { data, hasMore, showNext } = reablocks.useInfinityList({
+      items: reversedConvos,
+      limit
+    });
+    const reReversedConvo = reactExports.useMemo(() => [...data].reverse(), [data]);
+    const convosToRender = limit ? reReversedConvo : activeSession == null ? void 0 : activeSession.conversations;
+    if (!activeSession) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(SessionEmpty, { children: newSessionContent });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: reablocks.cn(theme.messages.content), ref: contentRef, children: [
+      hasMore && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        reablocks.Button,
+        {
+          variant: "outline",
+          className: reablocks.cn(theme.messages.showMore),
+          fullWidth: true,
+          onClick: handleShowMore,
+          children: showMoreText
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        framerMotion.motion.div,
+        {
+          variants: containerVariants,
+          initial: "hidden",
+          animate: "visible",
+          onAnimationComplete: () => {
+            setIsAnimating(false);
+          },
+          children: children(convosToRender)
+        },
+        activeSession == null ? void 0 : activeSession.id
+      ) })
+    ] });
+  };
+  const chatTheme = {
+    base: "text-white",
+    console: "flex w-full gap-5 h-full",
+    companion: "p-4",
+    empty: "text-center flex-1",
+    sessions: {
+      base: "overflow-auto min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded",
+      group: "text-xs text-gray-400 mt-4",
+      create: "mb-4",
+      session: {
+        base: "",
+        active: " text-primary",
+        delete: "[&>svg]:w-4 [&>svg]:h-4 opacity-50"
+      }
+    },
+    messages: {
+      base: "flex flex-col flex-1 overflow-hidden",
+      title: "text-2xl font-bold",
+      date: "text-sm whitespace-nowrap pt-2",
+      content: "mt-2 flex-1 overflow-auto",
+      header: "flex justify-between items-start gap-2",
+      showMore: "mb-4",
+      message: {
+        base: "mb-6 flex flex-col p-5 rounded",
+        question: "font-semibold text-gray-400 mb-1",
+        response: "",
+        cursor: "inline-block w-1 h-4 bg-current",
+        files: {
+          base: "mb-2 flex gap-3",
+          file: {
+            base: "flex gap-2 border border-gray-700 p-2 rounded cursor-pointer",
+            name: "text-sm"
+          }
+        },
+        sources: {
+          base: "my-4 flex gap-3",
+          source: {
+            base: "flex gap-2 border border-gray-700 p-2 rounded cursor-pointer",
+            image: "w-6 h-6 rounded-md",
+            title: "text-md block",
+            url: "text-sm text-blue-700 underline"
+          }
+        },
+        markdown: {
+          p: "mb-2",
+          a: "text-blue-700 underline",
+          table: "table-auto w-full m-2",
+          th: "px-4 py-2 text-left font-bold border-b border-gray-500",
+          td: "px-4 py-2",
+          code: "m-2 rounded",
+          li: "mb-2 ml-6",
+          ul: "mb-4 list-disc",
+          ol: "mb-4 list-decimal"
+        },
+        footer: {
+          base: "mt-3 flex gap-3",
+          copy: "[&>svg]:w-4 [&>svg]:h-4 opacity-50",
+          upvote: "[&>svg]:w-4 [&>svg]:h-4 opacity-50",
+          downvote: "[&>svg]:w-4 [&>svg]:h-4 opacity-50",
+          refresh: "[&>svg]:w-4 [&>svg]:h-4 opacity-50"
+        }
+      }
+    },
+    input: {
+      base: "flex mt-4",
+      upload: "px-4 py-2 text-white",
+      input: "w-full",
+      send: "px-4 py-2 text-white",
+      stop: "px-4 py-2 bg-red-500 text-white rounded hover:bg-red-700"
+    }
+  };
+  const Chat = ({
+    children,
+    viewType = "console",
     sessions,
     onSelectSession,
     onDeleteSession,
     isLoading,
     activeSessionId,
-    responseTransformers = [],
-    inputPlaceholder = "Type your message here...",
-    onSendMessage,
-    onStopMessage
+    theme: customTheme = chatTheme,
+    onNewSession,
+    remarkPlugins,
+    style,
+    className
   }) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sessions-container ${viewType === "companion" ? "p-4" : "p-8"}`, children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center text-gray-500", children: "Loading..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        SessionsList,
-        {
-          sessions,
-          activeSessionId,
-          onSelectSession,
-          onDeleteSession
+    const theme = reablocks.useComponentTheme("chat", customTheme);
+    const [internalActiveSessionID, setInternalActiveSessionID] = reactExports.useState(activeSessionId);
+    reactExports.useEffect(() => {
+      setInternalActiveSessionID(activeSessionId);
+    }, [activeSessionId]);
+    const handleSelectSession = reactExports.useCallback(
+      (sessionId) => {
+        setInternalActiveSessionID(sessionId);
+        onSelectSession == null ? void 0 : onSelectSession(sessionId);
+      },
+      [onSelectSession]
+    );
+    const handleDeleteSession = reactExports.useCallback(
+      (sessionId) => {
+        setInternalActiveSessionID(void 0);
+        onDeleteSession == null ? void 0 : onDeleteSession(sessionId);
+      },
+      [onDeleteSession]
+    );
+    const handleCreateNewSession = reactExports.useCallback(() => {
+      setInternalActiveSessionID(void 0);
+      onNewSession == null ? void 0 : onNewSession();
+    }, [onNewSession]);
+    reakeys.useHotkeys([
+      {
+        name: "Create new session",
+        category: "Chat",
+        keys: "meta+shift+s",
+        callback: (event) => {
+          event.preventDefault();
+          handleCreateNewSession();
         }
-      ),
-      activeSessionId && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "active-session mt-4", children: sessions.filter((session) => session.id === activeSessionId).map((session) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold", children: session.title }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          SessionMessages,
-          {
-            conversations: session.conversations,
-            responseTransformers
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          SessionInput,
+      }
+    ]);
+    const activeSession = reactExports.useMemo(
+      () => sessions.find((session) => session.id === internalActiveSessionID),
+      [sessions, internalActiveSessionID]
+    );
+    const contextValue = reactExports.useMemo(
+      () => ({
+        sessions,
+        activeSession,
+        remarkPlugins,
+        theme,
+        isLoading,
+        activeSessionId: internalActiveSessionID,
+        selectSession: handleSelectSession,
+        deleteSession: handleDeleteSession,
+        createSession: handleCreateNewSession
+      }),
+      [
+        isLoading,
+        theme,
+        remarkPlugins,
+        sessions,
+        activeSession,
+        internalActiveSessionID,
+        handleSelectSession,
+        handleDeleteSession,
+        handleCreateNewSession
+      ]
+    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: reablocks.cn(className, theme.base, {
+          [theme.companion]: viewType === "companion",
+          [theme.console]: viewType === "console"
+        }),
+        style,
+        children
+      }
+    ) });
+  };
+  const SessionsList = ({ children }) => {
+    const { theme } = reactExports.useContext(ChatContext);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(reablocks.List, { className: reablocks.cn(theme.sessions.base), children });
+  };
+  const SvgTrash = (props) => /* @__PURE__ */ reactExports.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-trash-2", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M3 6h18" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }), /* @__PURE__ */ reactExports.createElement("line", { x1: 10, x2: 10, y1: 11, y2: 17 }), /* @__PURE__ */ reactExports.createElement("line", { x1: 14, x2: 14, y1: 11, y2: 17 }));
+  const SessionListItem = ({
+    children,
+    session,
+    deletable = true,
+    limit = 100,
+    deleteIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(SvgTrash, {})
+  }) => {
+    const { activeSessionId, selectSession, deleteSession, theme } = reactExports.useContext(ChatContext);
+    const Comp = children ? reactSlot.Slot : reablocks.ListItem;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Comp,
+      {
+        dense: true,
+        disableGutters: true,
+        active: session.id === activeSessionId,
+        className: reablocks.cn(theme.sessions.session.base, {
+          [theme.sessions.session.active]: session.id === activeSessionId
+        }),
+        onClick: () => selectSession == null ? void 0 : selectSession(session.id),
+        end: /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: deletable && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          reablocks.IconButton,
           {
-            inputPlaceholder,
-            isLoading,
-            onSendMessage,
-            onStopMessage
+            size: "small",
+            variant: "text",
+            onClick: (e) => {
+              e.stopPropagation();
+              deleteSession(session.id);
+            },
+            className: reablocks.cn(theme.sessions.session.delete),
+            children: deleteIcon
           }
-        )
-      ] }, session.id)) })
-    ] }) });
+        ) }),
+        children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(reablocks.Ellipsis, { value: session.title, limit })
+      }
+    );
+  };
+  const NewSessionButton = ({
+    children,
+    newSessionText = "New Session"
+  }) => {
+    const { theme, createSession } = reactExports.useContext(ChatContext);
+    const Comp = children ? reactSlot.Slot : reablocks.Button;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Comp,
+      {
+        fullWidth: true,
+        disableMargins: true,
+        color: "primary",
+        className: reablocks.cn(theme.sessions.create),
+        onClick: createSession,
+        children: children || newSessionText
+      }
+    );
+  };
+  const sortOrder = [
+    "Today",
+    "Yesterday",
+    "Last Week",
+    "Last Month",
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+    "Last Year"
+  ];
+  function groupSessionsByDate(sessions) {
+    const grouped = {};
+    sessions.forEach((session) => {
+      const createdAt = new Date(session.createdAt);
+      if (dateFns.isToday(createdAt)) {
+        if (!grouped["Today"]) grouped["Today"] = [];
+        grouped["Today"].push(session);
+      } else if (dateFns.isYesterday(createdAt)) {
+        if (!grouped["Yesterday"]) grouped["Yesterday"] = [];
+        grouped["Yesterday"].push(session);
+      } else if (dateFns.isThisWeek(createdAt)) {
+        if (!grouped["Last Week"]) grouped["Last Week"] = [];
+        grouped["Last Week"].push(session);
+      } else if (dateFns.isThisMonth(createdAt)) {
+        if (!grouped["Last Month"]) grouped["Last Month"] = [];
+        grouped["Last Month"].push(session);
+      } else if (dateFns.isThisYear(createdAt)) {
+        const monthName = dateFns.format(createdAt, "MMMM");
+        if (!grouped[monthName]) grouped[monthName] = [];
+        grouped[monthName].push(session);
+      } else {
+        if (!grouped["Last Year"]) grouped["Last Year"] = [];
+        grouped["Last Year"].push(session);
+      }
+    });
+    Object.keys(grouped).forEach((key) => {
+      if (grouped[key].length === 0) {
+        delete grouped[key];
+      }
+    });
+    const sortedGroups = Object.keys(grouped).sort(
+      (a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b)
+    );
+    return sortedGroups.map((heading) => ({
+      heading,
+      sessions: grouped[heading].sort(
+        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      )
+    }));
+  }
+  const SessionGroups = ({ children }) => {
+    const { sessions } = reactExports.useContext(ChatContext);
+    const groups = reactExports.useMemo(() => groupSessionsByDate(sessions), [sessions]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children(groups) });
+  };
+  const SessionsGroup = ({
+    heading,
+    children
+  }) => {
+    const { theme } = reactExports.useContext(ChatContext);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      heading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        reablocks.ListItem,
+        {
+          disableGutters: true,
+          disablePadding: true,
+          className: reablocks.cn(theme.sessions.group),
+          children: heading
+        }
+      ),
+      children
+    ] });
   };
-  exports2.SessionInput = SessionInput;
+  exports2.Chat = Chat;
+  exports2.ChatContext = ChatContext;
+  exports2.ChatInput = ChatInput;
+  exports2.CodeHighlighter = CodeHighlighter;
+  exports2.Markdown = Markdown;
+  exports2.MessageActions = MessageActions;
+  exports2.MessageFile = MessageFile;
+  exports2.MessageFiles = MessageFiles;
+  exports2.MessageQuestion = MessageQuestion;
+  exports2.MessageResponse = MessageResponse;
+  exports2.MessageSource = MessageSource;
+  exports2.MessageSources = MessageSources;
+  exports2.NewSessionButton = NewSessionButton;
+  exports2.SessionEmpty = SessionEmpty;
+  exports2.SessionGroups = SessionGroups;
   exports2.SessionListItem = SessionListItem;
   exports2.SessionMessage = SessionMessage;
+  exports2.SessionMessagePanel = SessionMessagePanel;
   exports2.SessionMessages = SessionMessages;
-  exports2.Sessions = Sessions;
+  exports2.SessionMessagesHeader = SessionMessagesHeader;
+  exports2.SessionsGroup = SessionsGroup;
   exports2.SessionsList = SessionsList;
-  exports2.useLlm = useLlm;
+  exports2.TableComponent = TableComponent;
+  exports2.TableDataCell = TableDataCell;
+  exports2.TableHeaderCell = TableHeaderCell;
+  exports2.chatTheme = chatTheme;
+  exports2.remarkCve = remarkCve;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
 //# sourceMappingURL=index.umd.cjs.map