reachat 0.0.1 → 1.0.0

package/dist/index.js

@@ -1,6 +1,14 @@
-import TextareaAutosize from "react-textarea-autosize";
-const useLlm = (options) => {
-};
+import { cn, Textarea, Button, Ellipsis, DateFormat, IconButton, Card, useInfinityList, useComponentTheme, List, ListItem } from "reablocks";
+import { Slot } from "@radix-ui/react-slot";
+import { motion, AnimatePresence } from "framer-motion";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import hljs from "highlight.js";
+import "highlight.js/styles/atom-one-dark.css";
+import { findAndReplace } from "mdast-util-find-and-replace";
+import remarkYoutube from "remark-youtube";
+import { useHotkeys } from "reakeys";
+import { isToday, isYesterday, isThisWeek, isThisMonth, isThisYear, format } from "date-fns";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 var react = { exports: {} };
@@ -378,38 +386,38 @@ function requireReact_development() {
           ReactSharedInternals.ReactDebugCurrentFrame = ReactDebugCurrentFrame;
           ReactSharedInternals.ReactCurrentActQueue = ReactCurrentActQueue;
         }
-        function warn(format) {
+        function warn(format2) {
           {
             {
               for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
                 args[_key - 1] = arguments[_key];
               }
-              printWarning("warn", format, args);
+              printWarning("warn", format2, args);
             }
           }
         }
-        function error(format) {
+        function error(format2) {
           {
             {
               for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
                 args[_key2 - 1] = arguments[_key2];
               }
-              printWarning("error", format, args);
+              printWarning("error", format2, args);
             }
           }
         }
-        function printWarning(level, format, args) {
+        function printWarning(level, format2, args) {
           {
             var ReactDebugCurrentFrame2 = ReactSharedInternals.ReactDebugCurrentFrame;
             var stack = ReactDebugCurrentFrame2.getStackAddendum();
             if (stack !== "") {
-              format += "%s";
+              format2 += "%s";
               args = args.concat([stack]);
             }
             var argsWithFormat = args.map(function(item) {
               return String(item);
             });
-            argsWithFormat.unshift("Warning: " + format);
+            argsWithFormat.unshift("Warning: " + format2);
             Function.prototype.apply.call(console[level], console, argsWithFormat);
           }
         }
@@ -2230,28 +2238,28 @@ function requireReactJsxRuntime_development() {
         return null;
       }
       var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-      function error(format) {
+      function error(format2) {
         {
           {
             for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
               args[_key2 - 1] = arguments[_key2];
             }
-            printWarning("error", format, args);
+            printWarning("error", format2, args);
           }
         }
       }
-      function printWarning(level, format, args) {
+      function printWarning(level, format2, args) {
         {
           var ReactDebugCurrentFrame2 = ReactSharedInternals.ReactDebugCurrentFrame;
           var stack = ReactDebugCurrentFrame2.getStackAddendum();
           if (stack !== "") {
-            format += "%s";
+            format2 += "%s";
             args = args.concat([stack]);
           }
           var argsWithFormat = args.map(function(item) {
             return String(item);
           });
-          argsWithFormat.unshift("Warning: " + format);
+          argsWithFormat.unshift("Warning: " + format2);
           Function.prototype.apply.call(console[level], console, argsWithFormat);
         }
       }
@@ -3089,11 +3097,30 @@ if (process.env.NODE_ENV === "production") {
   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("");
     }
   };
@@ -3103,168 +3130,768 @@ const SessionInput = ({ onSendMessage, isLoading, inputPlaceholder, onStopMessag
       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: cn(theme.input.base), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      TextareaAutosize,
+      Textarea,
       {
-        className: "w-full p-2 border rounded",
-        minRows: 3,
+        containerClassName: 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(
+        Button,
         {
-          className: "px-4 py-2 bg-red-500 text-white rounded hover:bg-red-700",
-          onClick: onStopMessage,
-          children: "Stop"
+          title: "Upload",
+          className: cn(theme.input.upload),
+          onClick: () => {
+            var _a;
+            return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+          },
+          children: attachIcon
         }
       )
-    ] })
+    ] }),
+    isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        title: "Stop",
+        className: cn(theme.input.stop),
+        onClick: onStopMessage,
+        children: stopIcon
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        title: "Send",
+        className: 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: cn(theme.empty), children });
+};
+const SessionMessagesHeader = ({ children }) => {
+  const { activeSession, theme } = reactExports.useContext(ChatContext);
+  const Comp = children ? Slot : "header";
+  if (!activeSession) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Comp, { className: cn(theme.messages.header), children: children || /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: cn(theme.messages.title), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Ellipsis, { limit: 125, value: activeSession.title }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      DateFormat,
+      {
+        className: cn(theme.messages.date),
+        date: activeSession.createdAt
+      }
+    )
+  ] }) });
+};
+const SessionMessagePanel = ({ children }) => {
+  const { theme } = reactExports.useContext(ChatContext);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: 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: 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: cn(theme.messages.message.markdown.code)
+          }
+        ),
+        table: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableComponent, { ...props, className: cn(theme.messages.message.markdown.table) }),
+        th: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableHeaderCell, { ...props, className: cn(theme.messages.message.markdown.th) }),
+        td: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableDataCell, { ...props, className: cn(theme.messages.message.markdown.td) }),
+        a: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("a", { ...props, className: cn(theme.messages.message.markdown.a) }),
+        p: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("p", { ...props, className: cn(theme.messages.message.markdown.p) }),
+        li: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ...props, className: cn(theme.messages.message.markdown.li) }),
+        ul: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ...props, className: cn(theme.messages.message.markdown.ul) }),
+        ol: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { ...props, className: cn(theme.messages.message.markdown.ol) })
+      },
+      children
+    }
+  );
+};
+const CVE_REGEX = /(CVE-(19|20)\d{2}-\d{4,7})/gi;
+function remarkCve() {
+  return (tree, _file) => {
+    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 ? Slot : "div";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Comp, { className: 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 ? Slot : "div";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Comp, { className: cn(theme.messages.message.response), children: children || /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { remarkPlugins, children: response }),
+    isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      motion.div,
+      {
+        className: 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: 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: cn(theme.messages.message.files.file.name), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Ellipsis, { value: name, limit }) }) })
+      ]
+    }
+  );
 };
-const SessionListItem = ({
-  session,
-  isActive,
-  onSelectSession,
-  onDeleteSession
-}) => {
+const MessageFiles = ({ files, children }) => {
+  const { theme } = reactExports.useContext(ChatContext);
+  const Comp = children ? Slot : MessageFile;
+  if (!files || files.length === 0) {
+    return null;
+  }
+  return files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: 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: 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: cn(theme.messages.message.sources.source.image) }),
+        (title || url) && /* @__PURE__ */ jsxRuntimeExports.jsxs("figcaption", { children: [
+          title && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn(theme.messages.message.sources.source.title), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Ellipsis, { value: title, limit }) }),
+          url && /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: 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 ? Slot : MessageSource;
+  if (!sources || sources.length === 0) {
+    return null;
+  }
+  return sources && sources.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: 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 ? 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: cn(theme.messages.message.footer.base), children: children || /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    copyIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      IconButton,
+      {
+        variant: "text",
+        disablePadding: true,
+        title: "Copy question and response",
+        className: cn(theme.messages.message.footer.copy),
+        onClick: onCopy ? onCopy : () => handleCopy(`${question}
+${response}`),
+        children: copyIcon
+      }
+    ),
+    thumbsUpIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      IconButton,
+      {
+        variant: "text",
+        disablePadding: true,
+        title: "Upvote",
+        className: cn(theme.messages.message.footer.upvote),
+        onClick: onUpvote,
+        children: thumbsUpIcon
+      }
+    ),
+    thumbsDownIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      IconButton,
+      {
+        variant: "text",
+        disablePadding: true,
+        title: "Downvote",
+        className: cn(theme.messages.message.footer.downvote),
+        onClick: onDownvote,
+        children: thumbsDownIcon
+      }
+    ),
+    refreshIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      IconButton,
+      {
+        variant: "text",
+        disablePadding: true,
+        title: "Refresh",
+        className: 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(motion.div, { variants: messageVariants, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: 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 } = 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: cn(theme.messages.content), ref: contentRef, children: [
+    hasMore && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        variant: "outline",
+        className: cn(theme.messages.showMore),
+        fullWidth: true,
+        onClick: handleShowMore,
+        children: showMoreText
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatePresence, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      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 = 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]);
+  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: 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(List, { className: 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 ? Slot : ListItem;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Comp,
+    {
+      dense: true,
+      disableGutters: true,
+      active: session.id === activeSessionId,
+      className: 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(
+        IconButton,
         {
-          inputPlaceholder,
-          isLoading,
-          onSendMessage,
-          onStopMessage
+          size: "small",
+          variant: "text",
+          onClick: (e) => {
+            e.stopPropagation();
+            deleteSession(session.id);
+          },
+          className: cn(theme.sessions.session.delete),
+          children: deleteIcon
         }
-      )
-    ] }, session.id)) })
-  ] }) });
+      ) }),
+      children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Ellipsis, { value: session.title, limit })
+    }
+  );
+};
+const NewSessionButton = ({
+  children,
+  newSessionText = "New Session"
+}) => {
+  const { theme, createSession } = reactExports.useContext(ChatContext);
+  const Comp = children ? Slot : Button;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Comp,
+    {
+      fullWidth: true,
+      disableMargins: true,
+      color: "primary",
+      className: 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 (isToday(createdAt)) {
+      if (!grouped["Today"]) grouped["Today"] = [];
+      grouped["Today"].push(session);
+    } else if (isYesterday(createdAt)) {
+      if (!grouped["Yesterday"]) grouped["Yesterday"] = [];
+      grouped["Yesterday"].push(session);
+    } else if (isThisWeek(createdAt)) {
+      if (!grouped["Last Week"]) grouped["Last Week"] = [];
+      grouped["Last Week"].push(session);
+    } else if (isThisMonth(createdAt)) {
+      if (!grouped["Last Month"]) grouped["Last Month"] = [];
+      grouped["Last Month"].push(session);
+    } else if (isThisYear(createdAt)) {
+      const monthName = 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(
+      ListItem,
+      {
+        disableGutters: true,
+        disablePadding: true,
+        className: cn(theme.sessions.group),
+        children: heading
+      }
+    ),
+    children
+  ] });
 };
 export {
-  SessionInput,
+  Chat,
+  ChatContext,
+  ChatInput,
+  CodeHighlighter,
+  Markdown,
+  MessageActions,
+  MessageFile,
+  MessageFiles,
+  MessageQuestion,
+  MessageResponse,
+  MessageSource,
+  MessageSources,
+  NewSessionButton,
+  SessionEmpty,
+  SessionGroups,
   SessionListItem,
   SessionMessage,
+  SessionMessagePanel,
   SessionMessages,
-  Sessions,
+  SessionMessagesHeader,
+  SessionsGroup,
   SessionsList,
-  useLlm
+  TableComponent,
+  TableDataCell,
+  TableHeaderCell,
+  chatTheme,
+  remarkCve
 };
 //# sourceMappingURL=index.js.map