reachat 2.1.0-alpha.1 → 2.1.0-alpha.11

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"), require("@floating-ui/react")) : 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", "@floating-ui/react"], 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.react$1));
-})(this, function(exports2, jsxRuntime, reablocks, React, react, reactSlot, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, mdastUtilFindAndReplace, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns, react$1) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("motion/react"), require("reablocks"), require("react"), require("reakeys"), require("remark-gfm"), require("remark-math"), require("remark-youtube"), require("@floating-ui/react"), require("react-syntax-highlighter"), require("react-markdown"), require("rehype-katex"), require("mdast-util-find-and-replace"), require("@radix-ui/react-slot"), require("date-fns")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "motion/react", "reablocks", "react", "reakeys", "remark-gfm", "remark-math", "remark-youtube", "@floating-ui/react", "react-syntax-highlighter", "react-markdown", "rehype-katex", "mdast-util-find-and-replace", "@radix-ui/react-slot", "date-fns"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.react, global.reablocks, global.React, global.reakeys, global.remarkGfm, global.remarkMath, global.remarkYoutube, global.react$1, global.reactSyntaxHighlighter, global.ReactMarkdown, global.rehypeKatex, global.mdastUtilFindAndReplace, global.reactSlot, global.dateFns));
+})(this, (function(exports2, jsxRuntime, react, reablocks, React, reakeys, remarkGfm, remarkMath, remarkYoutube, react$1, reactSyntaxHighlighter, ReactMarkdown, rehypeKatex, mdastUtilFindAndReplace, reactSlot, dateFns) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -31,13 +31,277 @@
     return Object.freeze(n);
   }
   const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-  const SvgSend = (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: "send" }, /* @__PURE__ */ React__namespace.createElement("path", { id: "Vector", d: "M14.6111 2.33327C14.5349 2.3339 14.4598 2.35194 14.3917 2.386L2.39168 8.386C2.31456 8.42456 2.24872 8.4824 2.20055 8.55391C2.15238 8.62543 2.12352 8.70818 2.11677 8.79414C2.11002 8.88009 2.12561 8.96634 2.16203 9.04449C2.19845 9.12264 2.25446 9.19005 2.32462 9.24017L4.52514 10.8124L5.47371 13.6581C5.50257 13.7447 5.55457 13.8217 5.62406 13.8808C5.69355 13.9399 5.7779 13.9789 5.86796 13.9935C5.95802 14.0082 6.05036 13.9979 6.13499 13.9638C6.21962 13.9297 6.2933 13.873 6.34806 13.8001L7.05249 12.8606L10.3207 15.2376C10.3843 15.2839 10.4579 15.3146 10.5355 15.3271C10.6132 15.3396 10.6927 15.3336 10.7676 15.3097C10.8425 15.2857 10.9107 15.2444 10.9667 15.1891C11.0226 15.1338 11.0647 15.0661 11.0896 14.9915L15.0896 2.99147C15.1148 2.91597 15.1216 2.83555 15.1094 2.7569C15.0972 2.67825 15.0665 2.60363 15.0197 2.53926C14.9729 2.47488 14.9114 2.42261 14.8403 2.38678C14.7693 2.35096 14.6907 2.33261 14.6111 2.33327ZM13.2478 5.35345L10.3565 14.0266L7.67293 12.0755L13.2478 5.35345ZM10.684 5.35801L4.934 9.87559L3.58113 8.90879L10.684 5.35801ZM11.2784 6.16205L6.56746 11.843C6.56681 11.8437 6.56616 11.8443 6.56551 11.845L6.56355 11.8476C6.55841 11.8538 6.55342 11.8601 6.54858 11.8665C6.54319 11.8733 6.53798 11.8802 6.53295 11.8873L6.12085 12.4361L5.53426 10.6751L11.2784 6.16205Z", fill: "currentColor" })));
-  const SvgStop = (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-octagon-x", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "m15 9-6 6" }), /* @__PURE__ */ React__namespace.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__ */ React__namespace.createElement("path", { d: "m9 9 6 6" }));
+  const chatTheme = {
+    base: "text-content-text-neutral-base",
+    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] bg-gradient-neutral-200 p-5 rounded-3xl",
+      companion: "w-full h-full",
+      group: "text-xs text-content-text-neutral-3 mt-4 hover:bg-transparent mb-1",
+      create: "relative mb-4 rounded-[10px] text-white",
+      session: {
+        base: "group my-1 rounded-[10px] p-2 text-content-text-neutral-1 border border-transparent",
+        active: "border-select-menu-items-color-item-stroke-row-hover [&_button]:opacity-100!",
+        delete: "[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:opacity-50!"
+      }
+    },
+    messages: {
+      base: "",
+      console: "flex flex-col mx-5 flex-1 overflow-hidden",
+      companion: "flex w-full h-full",
+      back: "self-start pl-0 my-2 ",
+      inner: "flex-1 h-full flex flex-col",
+      title: "text-base font-bold",
+      date: "text-xs whitespace-nowrap text-content-text-neutral-2",
+      content: "mt-2 flex-1 overflow-auto",
+      header: "flex justify-between items-center gap-2",
+      showMore: "mb-4",
+      message: {
+        base: "mt-4 mb-4 flex flex-col p-0 rounded-sm border-none bg-transparent",
+        question: "relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-(--background-neutral-raised-5) border-(--stroke-neutral-5)",
+        response: "relative data-[compact=false]:px-4 text-content-text-neutral-base",
+        overlay: "overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-linear-to-b after:from-transparent after:to-effects-shadows-base-2-xl",
+        cursor: "inline-block w-1 h-4 bg-current",
+        expand: "absolute bottom-0 right-1 z-10",
+        files: {
+          base: "mb-2 flex flex-wrap gap-3 ",
+          file: {
+            base: "flex items-center gap-2 border border-stroke-neutral-4 px-3 py-2 rounded-lg cursor-pointer",
+            name: "text-sm text-content-text-neutral-4"
+          }
+        },
+        sources: {
+          base: "my-4 flex flex-wrap gap-3",
+          source: {
+            base: "flex gap-2 border border-stroke-neutral-4 px-4 py-2 rounded-lg cursor-pointer",
+            companion: "flex-1 px-3 py-1.5",
+            image: "max-w-10 max-h-10 rounded-md w-full h-fit self-center",
+            title: "text-md block",
+            url: "text-sm text-buttons-colors-link-primary-text-resting underline"
+          }
+        },
+        markdown: {
+          hr: "my-4 border-t border-stroke-neutral-4",
+          copy: "sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50",
+          p: "mb-2",
+          a: "text-buttons-colors-link-primary-text-resting underline",
+          table: "table-auto w-full m-2",
+          th: "px-4 py-2 text-left font-bold border-b border-stroke-neutral-4",
+          td: "px-4 py-2",
+          code: "m-2 rounded-b relative",
+          toolbar: "text-xs flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gradient-neutral-500/50",
+          li: "mb-2 ml-6",
+          ul: "mb-4 list-disc",
+          ol: "mb-4 list-decimal"
+        },
+        csvPreview: {
+          base: "flex flex-col gap-2",
+          header: {
+            base: "flex justify-between items-center gap-4",
+            icon: "csv-icon flex items-center",
+            actions: "csv-actions flex items-center gap-6"
+          },
+          tableContainer: "flex justify-between",
+          dialog: {
+            base: "fixed inset-0 bg-background-neutral-canvas-base/70 flex justify-center items-center z-50",
+            container: "bg-background-neutral-canvas-base rounded-md w-11/12 h-5/6 overflow-auto"
+          }
+        },
+        footer: {
+          base: "mt-3 flex gap-1.5",
+          copy: "p-3 rounded-[10px] [&>svg]:size-4 opacity-50 hover:opacity-100!",
+          upvote: "p-3 rounded-[10px] [&>svg]:size-4 opacity-50 hover:opacity-100!",
+          downvote: "p-3 rounded-[10px] [&>svg]:size-4 opacity-50 hover:opacity-100!",
+          refresh: "p-3 rounded-[10px] [&>svg]:size-4 opacity-50 hover:opacity-100!"
+        }
+      }
+    },
+    input: {
+      base: "flex mt-4 relative",
+      upload: "px-5 py-2 size-10 text-content-text-neutral-2 hover:text-content-text-neutral-base",
+      input: "w-full border rounded-3xl px-3 py-2 pr-16 after:hidden after:mx-10! [&>textarea]:w-full [&>textarea]:flex-none [&>textarea]:outline-none [&>textarea]:resize-none",
+      actions: {
+        base: "absolute flex gap-2 items-center right-2 inset-y-1/2 -translate-y-1/2 z-10",
+        send: "px-3 py-3 hover:bg-primary-hover rounded-full size-8",
+        stop: "px-2 py-2 bg-content-assets-semantic-error-base text-white rounded-full hover:bg-content-assets-semantic-error-1 size-8"
+      }
+    }
+  };
+  const AppBar = ({ content, theme = chatTheme }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reablocks.cn(theme.appbar), children: content });
+  };
   const ChatContext = React.createContext({
     sessions: [],
     activeSessionId: null
   });
-  const SvgPaperclip = (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-paperclip", ...props }, /* @__PURE__ */ React__namespace.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 useDimensions = () => {
+    const [ref, setRef] = React.useState(null);
+    const [width, setWidth] = React.useState(void 0);
+    const observe = React.useCallback((element) => {
+      if (element) setRef(element);
+    }, []);
+    React.useEffect(() => {
+      if (!ref) return;
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          setWidth(entry.contentRect.width);
+        }
+      });
+      resizeObserver.observe(ref);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [ref]);
+    return { width, observe };
+  };
+  const Chat = ({
+    children,
+    viewType = "console",
+    sessions,
+    onSelectSession,
+    onDeleteSession,
+    onSendMessage,
+    onStopMessage,
+    onFileUpload,
+    isLoading,
+    activeSessionId,
+    theme = chatTheme,
+    onNewSession,
+    remarkPlugins = [remarkGfm, remarkYoutube, remarkMath],
+    disabled,
+    style,
+    className
+  }) => {
+    const [internalActiveSessionID, setInternalActiveSessionID] = React.useState(activeSessionId);
+    const { width, observe } = useDimensions();
+    const isCompact = viewType === "companion" || width && width < 767;
+    React.useEffect(() => {
+      setInternalActiveSessionID(activeSessionId);
+    }, [activeSessionId]);
+    const handleSelectSession = React.useCallback(
+      (sessionId) => {
+        setInternalActiveSessionID(sessionId);
+        onSelectSession?.(sessionId);
+      },
+      [onSelectSession]
+    );
+    const handleDeleteSession = React.useCallback(
+      (sessionId) => {
+        setInternalActiveSessionID(void 0);
+        onDeleteSession?.(sessionId);
+      },
+      [onDeleteSession]
+    );
+    const handleCreateNewSession = React.useCallback(() => {
+      setInternalActiveSessionID(void 0);
+      onNewSession?.();
+    }, [onNewSession]);
+    reakeys.useHotkeys([
+      {
+        name: "Create new session",
+        category: "Chat",
+        keys: "meta+shift+s",
+        callback: (event) => {
+          event.preventDefault();
+          handleCreateNewSession();
+        }
+      }
+    ]);
+    const activeSession = React.useMemo(
+      () => sessions.find((session) => session.id === internalActiveSessionID),
+      [sessions, internalActiveSessionID]
+    );
+    const contextValue = React.useMemo(
+      () => ({
+        sessions,
+        activeSession,
+        remarkPlugins,
+        theme,
+        disabled,
+        isLoading,
+        isCompact,
+        viewType,
+        activeSessionId: internalActiveSessionID,
+        selectSession: handleSelectSession,
+        deleteSession: handleDeleteSession,
+        createSession: handleCreateNewSession,
+        sendMessage: onSendMessage,
+        stopMessage: onStopMessage,
+        fileUpload: onFileUpload
+      }),
+      [
+        isLoading,
+        isCompact,
+        viewType,
+        disabled,
+        theme,
+        remarkPlugins,
+        sessions,
+        activeSession,
+        internalActiveSessionID,
+        handleSelectSession,
+        handleDeleteSession,
+        handleCreateNewSession,
+        onSendMessage,
+        onStopMessage,
+        onFileUpload
+      ]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: observe,
+        className: reablocks.cn(className, theme.base, {
+          [theme.companion]: isCompact,
+          [theme.console]: !isCompact
+        }),
+        style,
+        children
+      }
+    ) }) });
+  };
+  const ChatBubble = React.memo(
+    ({
+      children,
+      bubbleContent,
+      position = "right-end",
+      modifiers = [react$1.offset({ mainAxis: 0, crossAxis: -40 })],
+      className
+    }) => {
+      const [isOpen, setIsOpen] = React.useState(false);
+      const ref = React.useRef(null);
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reablocks.ConnectedOverlay,
+          {
+            placement: position,
+            modifiers,
+            reference: ref.current,
+            open: isOpen,
+            onOpen: () => setIsOpen(true),
+            onClose: () => setIsOpen(false),
+            content: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            className,
+            onClick: () => setIsOpen((prev) => !prev),
+            children: bubbleContent
+          }
+        )
+      ] });
+    }
+  );
+  const SvgSend = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M15.3451 0.654003C15.0011 0.310003 14.5001 0.191003 14.0401 0.339003L1.11712 4.493C0.626116 4.651 0.286116 5.067 0.230116 5.58C0.174116 6.092 0.417116 6.572 0.862116 6.831L5.43812 9.5L9.39112 5.546C9.68412 5.253 10.1591 5.253 10.4521 5.546C10.7451 5.839 10.7451 6.314 10.4521 6.607L6.49812 10.561L9.16712 15.137C9.40211 15.539 9.81712 15.776 10.2741 15.776C10.3221 15.776 10.3711 15.773 10.4201 15.768C10.9321 15.712 11.3491 15.372 11.5061 14.882L15.6611 1.96C15.8091 1.497 15.6881 0.997003 15.3451 0.654003Z", fill: "currentColor" }));
+  const SvgStop = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", width: "24px", height: "24px", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M 25 2 C 12.309534 2 2 12.309534 2 25 C 2 37.690466 12.309534 48 25 48 C 37.690466 48 48 37.690466 48 25 C 48 12.309534 37.690466 2 25 2 z M 25 4 C 36.609534 4 46 13.390466 46 25 C 46 36.609534 36.609534 46 25 46 C 13.390466 46 4 36.609534 4 25 C 4 13.390466 13.390466 4 25 4 z M 32.990234 15.986328 A 1.0001 1.0001 0 0 0 32.292969 16.292969 L 25 23.585938 L 17.707031 16.292969 A 1.0001 1.0001 0 0 0 16.990234 15.990234 A 1.0001 1.0001 0 0 0 16.292969 17.707031 L 23.585938 25 L 16.292969 32.292969 A 1.0001 1.0001 0 1 0 17.707031 33.707031 L 25 26.414062 L 32.292969 33.707031 A 1.0001 1.0001 0 1 0 33.707031 32.292969 L 26.414062 25 L 33.707031 17.707031 A 1.0001 1.0001 0 0 0 32.990234 15.986328 z", fill: "currentColor" }));
+  const SvgPaperclip = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", width: "24px", height: "24px", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M25.3,56.007c-3.409,0-6.818-1.297-9.414-3.893c-2.595-2.596-3.893-6.005-3.893-9.415c0-3.409,1.298-6.819,3.893-9.414 l20.4-20.4c1.847-1.847,4.302-2.864,6.914-2.864c2.611,0,5.067,1.017,6.914,2.864c3.812,3.813,3.812,10.016,0,13.829l-20.4,20.4 c-2.438,2.439-6.385,2.441-8.828,0c-2.434-2.435-2.434-6.395,0-8.829l13.7-13.7c0.781-0.781,2.047-0.781,2.828,0 c0.781,0.781,0.781,2.047,0,2.828l-13.7,13.7c-0.874,0.875-0.874,2.297,0.001,3.172c0.847,0.846,2.324,0.846,3.171,0l20.4-20.4 c2.252-2.253,2.252-5.919,0-8.172c-1.092-1.091-2.543-1.692-4.086-1.692c-1.544,0-2.994,0.601-4.086,1.692l-20.4,20.4 c-1.815,1.816-2.723,4.201-2.723,6.586c0,2.385,0.908,4.77,2.723,6.586c1.816,1.815,4.201,2.723,6.586,2.723 c2.385,0,4.771-0.907,6.586-2.723l12.7-12.7c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828l-12.7,12.7 C32.119,54.709,28.71,56.007,25.3,56.007z", fill: "currentColor" }));
   const FileInput = ({
     allowedFiles,
     onFileUpload,
@@ -70,1171 +334,1132 @@
           variant: "text",
           disabled: isLoading || disabled,
           className: reablocks.cn(theme.input.upload),
-          onClick: () => {
-            var _a;
-            return (_a = fileInputRef.current) == null ? void 0 : _a.click();
-          },
+          onClick: () => fileInputRef.current?.click(),
           children: attachIcon
         }
       )
     ] });
   };
-  const ChatInput = React.forwardRef(({
-    allowedFiles,
-    placeholder,
-    defaultValue,
-    sendIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgSend, {}),
-    stopIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgStop, {}),
-    attachIcon
-  }, ref) => {
-    const { theme, isLoading, disabled, sendMessage, stopMessage, fileUpload, activeSessionId } = React.useContext(ChatContext);
-    const [message, setMessage] = React.useState("");
-    const inputRef = React.useRef(null);
-    React.useEffect(() => {
-      if (inputRef.current) {
-        inputRef.current.focus();
-      }
-    }, [activeSessionId, inputRef]);
-    React.useImperativeHandle(ref, () => ({
-      focus: () => {
-        var _a;
-        (_a = inputRef.current) == null ? void 0 : _a.focus();
-      }
-    }));
-    const handleSendMessage = () => {
-      if (message.trim()) {
-        sendMessage == null ? void 0 : sendMessage(message);
-        setMessage("");
-      }
-    };
-    const handleKeyPress = (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        handleSendMessage();
-      }
-    };
-    const handleFileUpload = (event) => {
-      var _a;
-      const file = (_a = event.target.files) == null ? void 0 : _a[0];
-      if (file && fileUpload) {
-        fileUpload(file);
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.input.base), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reablocks.Textarea,
-        {
-          ref: inputRef,
-          containerClassName: reablocks.cn(theme.input.input),
-          minRows: 1,
-          autoFocus: true,
-          value: message,
-          defaultValue,
-          onKeyPress: handleKeyPress,
-          placeholder,
-          disabled: isLoading || disabled,
-          onChange: (e) => setMessage(e.target.value)
+  const ChatInput = React.forwardRef(
+    ({
+      allowedFiles,
+      placeholder,
+      defaultValue,
+      className,
+      message,
+      sendIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgSend, {}),
+      stopIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgStop, {}),
+      attachIcon,
+      onMessageChange
+    }, ref) => {
+      const {
+        theme,
+        isLoading,
+        disabled,
+        sendMessage,
+        stopMessage,
+        fileUpload,
+        activeSessionId
+      } = React.useContext(ChatContext);
+      const [internalMessage, setInternalMessage] = React.useState("");
+      const inputRef = React.useRef(null);
+      React.useEffect(() => {
+        setInternalMessage(message || "");
+      }, [message]);
+      React.useEffect(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.input.actions.base), children: [
-        (allowedFiles == null ? void 0 : allowedFiles.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          FileInput,
+      }, [activeSessionId, inputRef]);
+      const handleSendMessage = () => {
+        if (internalMessage.trim()) {
+          sendMessage?.(internalMessage);
+          setInternalMessage("");
+        }
+      };
+      React.useImperativeHandle(ref, () => ({
+        focus: () => {
+          inputRef.current?.focus();
+        },
+        send: () => {
+          handleSendMessage();
+        },
+        setValue: (value) => {
+          setInternalMessage(value);
+          onMessageChange?.(value);
+        },
+        getValue: () => {
+          return internalMessage;
+        }
+      }));
+      const handleKeyPress = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          handleSendMessage();
+        }
+      };
+      const handleFileUpload = (event) => {
+        const file = event.target.files?.[0];
+        if (file && fileUpload) {
+          fileUpload(file);
+        }
+      };
+      const handleMessageChange = React.useCallback(
+        (event) => {
+          setInternalMessage(event.target.value);
+          onMessageChange?.(event.target.value);
+        },
+        [onMessageChange]
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.input.base, className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reablocks.Textarea,
           {
-            allowedFiles,
-            onFileUpload: handleFileUpload,
-            isLoading,
-            disabled,
-            attachIcon
+            ref: inputRef,
+            containerClassName: reablocks.cn(theme.input.input),
+            minRows: 1,
+            autoFocus: true,
+            value: internalMessage,
+            defaultValue,
+            onKeyPress: handleKeyPress,
+            placeholder,
+            disabled: isLoading || disabled,
+            onChange: handleMessageChange
           }
         ),
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx(
-          reablocks.Button,
-          {
-            title: "Stop",
-            className: reablocks.cn(theme.input.actions.stop),
-            onClick: stopMessage,
-            disabled,
-            children: stopIcon
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reablocks.Button,
-          {
-            title: "Send",
-            className: reablocks.cn(theme.input.actions.send),
-            onClick: handleSendMessage,
-            disabled: isLoading || disabled,
-            children: sendIcon
-          }
-        )
-      ] })
-    ] });
-  });
-  const SessionEmpty = ({
-    children
-  }) => {
-    const { theme } = React.useContext(ChatContext);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reablocks.cn(theme.empty), children });
-  };
-  const SessionMessagesHeader = ({ children }) => {
-    const { activeSession, theme } = React.useContext(ChatContext);
-    const Comp = children ? reactSlot.Slot : "header";
-    if (!activeSession) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { className: reablocks.cn(theme.messages.header), children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: reablocks.cn(theme.messages.title), children: /* @__PURE__ */ jsxRuntime.jsx(reablocks.Ellipsis, { limit: 125, value: activeSession.title }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reablocks.DateFormat,
-        {
-          className: reablocks.cn(theme.messages.date),
-          date: activeSession.createdAt
-        }
-      )
-    ] }) });
-  };
-  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,
-    allowBack = true
-  }) => {
-    const { activeSessionId, theme, isCompact, selectSession, viewType } = React.useContext(ChatContext);
-    const isVisible = isCompact && activeSessionId || viewType === "chat" || !isCompact;
-    return isVisible && /* @__PURE__ */ jsxRuntime.jsx(
-      react.motion.div,
-      {
-        initial: { translateX: "200%" },
-        animate: {
-          translateX: "0%",
-          transition: {
-            type: "tween",
-            ease: "linear",
-            duration: 0.2,
-            when: "beforeChildren"
-          }
-        },
-        exit: { translateX: "200%" },
-        className: reablocks.cn(theme.messages.base, {
-          [theme.messages.companion]: isCompact,
-          [theme.messages.console]: !isCompact
-        }),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.messages.inner), children: [
-          allowBack && isCompact && viewType !== "chat" && /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.input.actions.base), children: [
+          allowedFiles?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            FileInput,
+            {
+              allowedFiles,
+              onFileUpload: handleFileUpload,
+              isLoading,
+              disabled,
+              attachIcon
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx(
             reablocks.Button,
             {
-              variant: "text",
-              size: "small",
-              onClick: () => selectSession(null),
-              className: reablocks.cn(theme.messages.back),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SvgBack, {}),
-                "Back"
-              ]
+              title: "Stop",
+              className: reablocks.cn(theme.input.actions.stop),
+              onClick: stopMessage,
+              disabled,
+              children: stopIcon
             }
           ),
-          children
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reablocks.Button,
+            {
+              title: "Send",
+              className: reablocks.cn(theme.input.actions.send),
+              onClick: handleSendMessage,
+              disabled: isLoading || disabled,
+              children: sendIcon
+            }
+          )
         ] })
-      }
-    );
-  };
-  const SvgCopy = (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-copy", ...props }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 14, height: 14, x: 8, y: 8, rx: 2, ry: 2 }), /* @__PURE__ */ React__namespace.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 SvgCopy = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M1.75 6C2.164 6 2.5 6.336 2.5 6.75V13.25C2.5 13.939 3.061 14.5 3.75 14.5H12.25C12.664 14.5 13 14.836 13 15.25C13 15.664 12.664 16 12.25 16H3.75C2.233 16 1 14.767 1 13.25V6.75C1 6.336 1.336 6 1.75 6ZM14.25 2C15.7688 2 17 3.23122 17 4.75V10.25C17 11.7688 15.7688 13 14.25 13H6.75C5.23122 13 4 11.7688 4 10.25V4.75C4 3.23122 5.23122 2 6.75 2H14.25Z", fill: "currentColor" }));
   const dark = {
     'code[class*="language-"]': {
-      "background": "#11111f",
-      "color": "#e2e8f0",
-      "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
-      "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
-      "direction": "ltr",
-      "textAlign": "left",
-      "whiteSpace": "pre",
-      "wordSpacing": "normal",
-      "wordBreak": "normal",
-      "lineHeight": "1.5",
-      "MozTabSize": "2",
-      "OTabSize": "2",
-      "tabSize": "2",
-      "WebkitHyphens": "none",
-      "MozHyphens": "none",
-      "msHyphens": "none",
-      "hyphens": "none"
+      background: "#11111f",
+      color: "#e2e8f0",
+      textShadow: "0 1px rgba(0, 0, 0, 0.3)",
+      fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+      direction: "ltr",
+      textAlign: "left",
+      whiteSpace: "pre",
+      wordSpacing: "normal",
+      wordBreak: "normal",
+      lineHeight: "1.5",
+      MozTabSize: "2",
+      OTabSize: "2",
+      tabSize: "2",
+      WebkitHyphens: "none",
+      MozHyphens: "none",
+      msHyphens: "none",
+      hyphens: "none"
     },
     'pre[class*="language-"]': {
-      "background": "#11111f",
-      "color": "#e2e8f0",
-      "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
-      "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
-      "direction": "ltr",
-      "textAlign": "left",
-      "whiteSpace": "pre",
-      "wordSpacing": "normal",
-      "wordBreak": "normal",
-      "lineHeight": "1.5",
-      "MozTabSize": "2",
-      "OTabSize": "2",
-      "tabSize": "2",
-      "WebkitHyphens": "none",
-      "MozHyphens": "none",
-      "msHyphens": "none",
-      "hyphens": "none",
-      "padding": "1em",
-      "margin": "0",
-      "overflow": "auto"
+      background: "#11111f",
+      color: "#e2e8f0",
+      textShadow: "0 1px rgba(0, 0, 0, 0.3)",
+      fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+      direction: "ltr",
+      textAlign: "left",
+      whiteSpace: "pre",
+      wordSpacing: "normal",
+      wordBreak: "normal",
+      lineHeight: "1.5",
+      MozTabSize: "2",
+      OTabSize: "2",
+      tabSize: "2",
+      WebkitHyphens: "none",
+      MozHyphens: "none",
+      msHyphens: "none",
+      hyphens: "none",
+      padding: "1em",
+      margin: "0",
+      overflow: "auto"
     },
     'code[class*="language-"]::-moz-selection': {
-      "background": "#1e293b",
-      "color": "inherit",
-      "textShadow": "none"
+      background: "#1e293b",
+      color: "inherit",
+      textShadow: "none"
     },
     'code[class*="language-"] *::-moz-selection': {
-      "background": "#1e293b",
-      "color": "inherit",
-      "textShadow": "none"
+      background: "#1e293b",
+      color: "inherit",
+      textShadow: "none"
     },
     'pre[class*="language-"] *::-moz-selection': {
-      "background": "#1e293b",
-      "color": "inherit",
-      "textShadow": "none"
+      background: "#1e293b",
+      color: "inherit",
+      textShadow: "none"
     },
     'code[class*="language-"]::selection': {
-      "background": "#1e293b",
-      "color": "inherit",
-      "textShadow": "none"
+      background: "#1e293b",
+      color: "inherit",
+      textShadow: "none"
     },
     'code[class*="language-"] *::selection': {
-      "background": "#1e293b",
-      "color": "inherit",
-      "textShadow": "none"
+      background: "#1e293b",
+      color: "inherit",
+      textShadow: "none"
     },
     'pre[class*="language-"] *::selection': {
-      "background": "#1e293b",
-      "color": "inherit",
-      "textShadow": "none"
+      background: "#1e293b",
+      color: "inherit",
+      textShadow: "none"
     },
     ':not(pre) > code[class*="language-"]': {
-      "padding": "0.2em 0.3em",
-      "borderRadius": "0.3em",
-      "whiteSpace": "normal"
+      padding: "0.2em 0.3em",
+      borderRadius: "0.3em",
+      whiteSpace: "normal"
     },
-    "comment": {
-      "color": "#64748b",
-      "fontStyle": "italic"
+    comment: {
+      color: "#64748b",
+      fontStyle: "italic"
     },
-    "prolog": {
-      "color": "#64748b"
+    prolog: {
+      color: "#64748b"
     },
-    "cdata": {
-      "color": "#64748b"
+    cdata: {
+      color: "#64748b"
     },
-    "doctype": {
-      "color": "#e2e8f0"
+    doctype: {
+      color: "#e2e8f0"
     },
-    "punctuation": {
-      "color": "#e2e8f0"
+    punctuation: {
+      color: "#e2e8f0"
     },
-    "entity": {
-      "color": "#3b82f6",
-      "cursor": "help"
+    entity: {
+      color: "#3b82f6",
+      cursor: "help"
     },
     "attr-name": {
-      "color": "#f59e0b"
+      color: "#f59e0b"
     },
     "class-name": {
-      "color": "#f59e0b"
+      color: "#f59e0b"
     },
-    "boolean": {
-      "color": "#3b82f6"
+    boolean: {
+      color: "#3b82f6"
     },
-    "constant": {
-      "color": "#3b82f6"
+    constant: {
+      color: "#3b82f6"
     },
-    "number": {
-      "color": "#3b82f6"
+    number: {
+      color: "#3b82f6"
     },
-    "atrule": {
-      "color": "#f59e0b"
+    atrule: {
+      color: "#f59e0b"
     },
-    "keyword": {
-      "color": "#f472b6"
+    keyword: {
+      color: "#f472b6"
     },
-    "property": {
-      "color": "#3b82f6"
+    property: {
+      color: "#3b82f6"
     },
-    "tag": {
-      "color": "#3b82f6"
+    tag: {
+      color: "#3b82f6"
     },
-    "symbol": {
-      "color": "#3b82f6"
+    symbol: {
+      color: "#3b82f6"
     },
-    "deleted": {
-      "color": "#ef4444"
+    deleted: {
+      color: "#ef4444"
     },
-    "important": {
-      "color": "#f472b6"
+    important: {
+      color: "#f472b6"
     },
-    "selector": {
-      "color": "#10b981"
+    selector: {
+      color: "#10b981"
     },
-    "string": {
-      "color": "#10b981"
+    string: {
+      color: "#10b981"
     },
-    "char": {
-      "color": "#10b981"
+    char: {
+      color: "#10b981"
     },
-    "builtin": {
-      "color": "#10b981"
+    builtin: {
+      color: "#10b981"
     },
-    "inserted": {
-      "color": "#10b981"
+    inserted: {
+      color: "#10b981"
     },
-    "regex": {
-      "color": "#10b981"
+    regex: {
+      color: "#10b981"
     },
     "attr-value": {
-      "color": "#10b981"
+      color: "#10b981"
     },
     "attr-value > .token.punctuation": {
-      "color": "#10b981"
+      color: "#10b981"
     },
-    "variable": {
-      "color": "#60a5fa"
+    variable: {
+      color: "#60a5fa"
     },
-    "operator": {
-      "color": "#60a5fa"
+    operator: {
+      color: "#60a5fa"
     },
-    "function": {
-      "color": "#60a5fa"
+    function: {
+      color: "#60a5fa"
     },
-    "url": {
-      "color": "#60a5fa"
+    url: {
+      color: "#60a5fa"
     },
     "attr-value > .token.punctuation.attr-equals": {
-      "color": "#e2e8f0"
+      color: "#e2e8f0"
     },
     "special-attr > .token.attr-value > .token.value.css": {
-      "color": "#e2e8f0"
+      color: "#e2e8f0"
     },
     ".language-css .token.selector": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-css .token.property": {
-      "color": "#e2e8f0"
+      color: "#e2e8f0"
     },
     ".language-css .token.function": {
-      "color": "#60a5fa"
+      color: "#60a5fa"
     },
     ".language-css .token.url > .token.function": {
-      "color": "#60a5fa"
+      color: "#60a5fa"
     },
     ".language-css .token.url > .token.string.url": {
-      "color": "#10b981"
+      color: "#10b981"
     },
     ".language-css .token.important": {
-      "color": "#f472b6"
+      color: "#f472b6"
     },
     ".language-css .token.atrule .token.rule": {
-      "color": "#f472b6"
+      color: "#f472b6"
     },
     ".language-javascript .token.operator": {
-      "color": "#f472b6"
+      color: "#f472b6"
     },
     ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": {
-      "color": "#ef4444"
+      color: "#ef4444"
     },
     ".language-json .token.operator": {
-      "color": "#e2e8f0"
+      color: "#e2e8f0"
     },
     ".language-json .token.null.keyword": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-markdown .token.url": {
-      "color": "#e2e8f0"
+      color: "#e2e8f0"
     },
     ".language-markdown .token.url > .token.operator": {
-      "color": "#e2e8f0"
+      color: "#e2e8f0"
     },
     ".language-markdown .token.url-reference.url > .token.string": {
-      "color": "#e2e8f0"
+      color: "#e2e8f0"
     },
     ".language-markdown .token.url > .token.content": {
-      "color": "#60a5fa"
+      color: "#60a5fa"
     },
     ".language-markdown .token.url > .token.url": {
-      "color": "#60a5fa"
+      color: "#60a5fa"
     },
     ".language-markdown .token.url-reference.url": {
-      "color": "#60a5fa"
+      color: "#60a5fa"
     },
     ".language-markdown .token.blockquote.punctuation": {
-      "color": "#64748b",
-      "fontStyle": "italic"
+      color: "#64748b",
+      fontStyle: "italic"
     },
     ".language-markdown .token.hr.punctuation": {
-      "color": "#64748b",
-      "fontStyle": "italic"
+      color: "#64748b",
+      fontStyle: "italic"
     },
     ".language-markdown .token.code-snippet": {
-      "color": "#10b981"
+      color: "#10b981"
     },
     ".language-markdown .token.bold .token.content": {
-      "color": "#f59e0b"
+      color: "#f59e0b"
     },
     ".language-markdown .token.italic .token.content": {
-      "color": "#f472b6"
+      color: "#f472b6"
     },
     ".language-markdown .token.strike .token.content": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-markdown .token.strike .token.punctuation": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-markdown .token.list.punctuation": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-markdown .token.title.important > .token.punctuation": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
-    "bold": {
-      "fontWeight": "bold"
+    bold: {
+      fontWeight: "bold"
     },
-    "italic": {
-      "fontStyle": "italic"
+    italic: {
+      fontStyle: "italic"
     },
-    "namespace": {
-      "Opacity": "0.8"
+    namespace: {
+      Opacity: "0.8"
     },
     "token.tab:not(:empty):before": {
-      "color": "#64748b",
-      "textShadow": "none"
+      color: "#64748b",
+      textShadow: "none"
     },
     "token.cr:before": {
-      "color": "#64748b",
-      "textShadow": "none"
+      color: "#64748b",
+      textShadow: "none"
     },
     "token.lf:before": {
-      "color": "#64748b",
-      "textShadow": "none"
+      color: "#64748b",
+      textShadow: "none"
     },
     "token.space:before": {
-      "color": "#64748b",
-      "textShadow": "none"
+      color: "#64748b",
+      textShadow: "none"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
-      "marginRight": "0.4em"
+      marginRight: "0.4em"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
-      "background": "#1e293b",
-      "color": "#94a3b8",
-      "padding": "0.1em 0.4em",
-      "borderRadius": "0.3em"
+      background: "#1e293b",
+      color: "#94a3b8",
+      padding: "0.1em 0.4em",
+      borderRadius: "0.3em"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
-      "background": "#1e293b",
-      "color": "#94a3b8",
-      "padding": "0.1em 0.4em",
-      "borderRadius": "0.3em"
+      background: "#1e293b",
+      color: "#94a3b8",
+      padding: "0.1em 0.4em",
+      borderRadius: "0.3em"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
-      "background": "#1e293b",
-      "color": "#94a3b8",
-      "padding": "0.1em 0.4em",
-      "borderRadius": "0.3em"
+      background: "#1e293b",
+      color: "#94a3b8",
+      padding: "0.1em 0.4em",
+      borderRadius: "0.3em"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
-      "background": "#3b82f6",
-      "color": "#ffffff"
+      background: "#3b82f6",
+      color: "#ffffff"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
-      "background": "#3b82f6",
-      "color": "#ffffff"
+      background: "#3b82f6",
+      color: "#ffffff"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
-      "background": "#3b82f6",
-      "color": "#ffffff"
+      background: "#3b82f6",
+      color: "#ffffff"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
-      "background": "#3b82f6",
-      "color": "#ffffff"
+      background: "#3b82f6",
+      color: "#ffffff"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
-      "background": "#3b82f6",
-      "color": "#ffffff"
+      background: "#3b82f6",
+      color: "#ffffff"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
-      "background": "#3b82f6",
-      "color": "#ffffff"
+      background: "#3b82f6",
+      color: "#ffffff"
     },
     ".line-highlight.line-highlight": {
-      "background": "rgba(59, 130, 246, 0.08)"
+      background: "rgba(59, 130, 246, 0.08)"
     },
     ".line-highlight.line-highlight:before": {
-      "background": "#1e293b",
-      "color": "#e2e8f0",
-      "padding": "0.1em 0.6em",
-      "borderRadius": "0.3em",
-      "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.2)"
+      background: "#1e293b",
+      color: "#e2e8f0",
+      padding: "0.1em 0.6em",
+      borderRadius: "0.3em",
+      boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)"
     },
     ".line-highlight.line-highlight[data-end]:after": {
-      "background": "#1e293b",
-      "color": "#e2e8f0",
-      "padding": "0.1em 0.6em",
-      "borderRadius": "0.3em",
-      "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.2)"
+      background: "#1e293b",
+      color: "#e2e8f0",
+      padding: "0.1em 0.6em",
+      borderRadius: "0.3em",
+      boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)"
     },
     "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
-      "backgroundColor": "rgba(59, 130, 246, 0.08)"
+      backgroundColor: "rgba(59, 130, 246, 0.08)"
     },
     ".line-numbers.line-numbers .line-numbers-rows": {
-      "borderRightColor": "#1e293b"
+      borderRightColor: "#1e293b"
     },
     ".command-line .command-line-prompt": {
-      "borderRightColor": "#1e293b"
+      borderRightColor: "#1e293b"
     },
     ".line-numbers .line-numbers-rows > span:before": {
-      "color": "#64748b"
+      color: "#64748b"
     },
     ".command-line .command-line-prompt > span:before": {
-      "color": "#64748b"
+      color: "#64748b"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-1": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-5": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-9": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-2": {
-      "color": "#10b981"
+      color: "#10b981"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-6": {
-      "color": "#10b981"
+      color: "#10b981"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-10": {
-      "color": "#10b981"
+      color: "#10b981"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-3": {
-      "color": "#60a5fa"
+      color: "#60a5fa"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-7": {
-      "color": "#60a5fa"
+      color: "#60a5fa"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-11": {
-      "color": "#60a5fa"
+      color: "#60a5fa"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-4": {
-      "color": "#f472b6"
+      color: "#f472b6"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-8": {
-      "color": "#f472b6"
+      color: "#f472b6"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-12": {
-      "color": "#f472b6"
+      color: "#f472b6"
     },
     "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
-      "backgroundColor": "rgba(239, 68, 68, 0.15)"
+      backgroundColor: "rgba(239, 68, 68, 0.15)"
     },
     "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
-      "backgroundColor": "rgba(239, 68, 68, 0.15)"
+      backgroundColor: "rgba(239, 68, 68, 0.15)"
     },
     "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
-      "backgroundColor": "rgba(239, 68, 68, 0.25)"
+      backgroundColor: "rgba(239, 68, 68, 0.25)"
     },
     "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
-      "backgroundColor": "rgba(239, 68, 68, 0.25)"
+      backgroundColor: "rgba(239, 68, 68, 0.25)"
     },
     "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
-      "backgroundColor": "rgba(239, 68, 68, 0.25)"
+      backgroundColor: "rgba(239, 68, 68, 0.25)"
     },
     "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
-      "backgroundColor": "rgba(239, 68, 68, 0.25)"
+      backgroundColor: "rgba(239, 68, 68, 0.25)"
     },
     "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
-      "backgroundColor": "rgba(239, 68, 68, 0.25)"
+      backgroundColor: "rgba(239, 68, 68, 0.25)"
     },
     "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
-      "backgroundColor": "rgba(239, 68, 68, 0.25)"
+      backgroundColor: "rgba(239, 68, 68, 0.25)"
     },
     "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
-      "backgroundColor": "rgba(239, 68, 68, 0.25)"
+      backgroundColor: "rgba(239, 68, 68, 0.25)"
     },
     "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
-      "backgroundColor": "rgba(239, 68, 68, 0.25)"
+      backgroundColor: "rgba(239, 68, 68, 0.25)"
     },
     "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
-      "backgroundColor": "rgba(16, 185, 129, 0.15)"
+      backgroundColor: "rgba(16, 185, 129, 0.15)"
     },
     "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
-      "backgroundColor": "rgba(16, 185, 129, 0.15)"
+      backgroundColor: "rgba(16, 185, 129, 0.15)"
     },
     "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
-      "backgroundColor": "rgba(16, 185, 129, 0.25)"
+      backgroundColor: "rgba(16, 185, 129, 0.25)"
     },
     "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
-      "backgroundColor": "rgba(16, 185, 129, 0.25)"
+      backgroundColor: "rgba(16, 185, 129, 0.25)"
     },
     "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
-      "backgroundColor": "rgba(16, 185, 129, 0.25)"
+      backgroundColor: "rgba(16, 185, 129, 0.25)"
     },
     "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
-      "backgroundColor": "rgba(16, 185, 129, 0.25)"
+      backgroundColor: "rgba(16, 185, 129, 0.25)"
     },
     "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
-      "backgroundColor": "rgba(16, 185, 129, 0.25)"
+      backgroundColor: "rgba(16, 185, 129, 0.25)"
     },
     "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
-      "backgroundColor": "rgba(16, 185, 129, 0.25)"
+      backgroundColor: "rgba(16, 185, 129, 0.25)"
     },
     "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
-      "backgroundColor": "rgba(16, 185, 129, 0.25)"
+      backgroundColor: "rgba(16, 185, 129, 0.25)"
     },
     "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
-      "backgroundColor": "rgba(16, 185, 129, 0.25)"
+      backgroundColor: "rgba(16, 185, 129, 0.25)"
     },
     ".prism-previewer.prism-previewer:before": {
-      "borderColor": "#11111f"
+      borderColor: "#11111f"
     },
     ".prism-previewer-gradient.prism-previewer-gradient div": {
-      "borderColor": "#11111f",
-      "borderRadius": "0.3em"
+      borderColor: "#11111f",
+      borderRadius: "0.3em"
     },
     ".prism-previewer-color.prism-previewer-color:before": {
-      "borderRadius": "0.3em"
+      borderRadius: "0.3em"
     },
     ".prism-previewer-easing.prism-previewer-easing:before": {
-      "borderRadius": "0.3em"
+      borderRadius: "0.3em"
     },
     ".prism-previewer.prism-previewer:after": {
-      "borderTopColor": "#11111f"
+      borderTopColor: "#11111f"
     },
     ".prism-previewer-flipped.prism-previewer-flipped.after": {
-      "borderBottomColor": "#11111f"
+      borderBottomColor: "#11111f"
     },
     ".prism-previewer-angle.prism-previewer-angle:before": {
-      "background": "#1e293b"
+      background: "#1e293b"
     },
     ".prism-previewer-time.prism-previewer-time:before": {
-      "background": "#1e293b"
+      background: "#1e293b"
     },
     ".prism-previewer-easing.prism-previewer-easing": {
-      "background": "#1e293b"
+      background: "#1e293b"
     },
     ".prism-previewer-angle.prism-previewer-angle circle": {
-      "stroke": "#e2e8f0",
-      "strokeOpacity": "1"
+      stroke: "#e2e8f0",
+      strokeOpacity: "1"
     },
     ".prism-previewer-time.prism-previewer-time circle": {
-      "stroke": "#e2e8f0",
-      "strokeOpacity": "1"
+      stroke: "#e2e8f0",
+      strokeOpacity: "1"
     },
     ".prism-previewer-easing.prism-previewer-easing circle": {
-      "stroke": "#e2e8f0",
-      "fill": "transparent"
+      stroke: "#e2e8f0",
+      fill: "transparent"
     },
     ".prism-previewer-easing.prism-previewer-easing path": {
-      "stroke": "#e2e8f0"
+      stroke: "#e2e8f0"
     },
     ".prism-previewer-easing.prism-previewer-easing line": {
-      "stroke": "#e2e8f0"
+      stroke: "#e2e8f0"
     }
   };
   const light = {
     'code[class*="language-"]': {
-      "background": "#fff",
-      "color": "#1e293b",
-      "textShadow": "none",
-      "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
-      "direction": "ltr",
-      "textAlign": "left",
-      "whiteSpace": "pre",
-      "wordSpacing": "normal",
-      "wordBreak": "normal",
-      "lineHeight": "1.5",
-      "MozTabSize": "2",
-      "OTabSize": "2",
-      "tabSize": "2",
-      "WebkitHyphens": "none",
-      "MozHyphens": "none",
-      "msHyphens": "none",
-      "hyphens": "none"
+      background: "#fff",
+      color: "#1e293b",
+      textShadow: "none",
+      fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+      direction: "ltr",
+      textAlign: "left",
+      whiteSpace: "pre",
+      wordSpacing: "normal",
+      wordBreak: "normal",
+      lineHeight: "1.5",
+      MozTabSize: "2",
+      OTabSize: "2",
+      tabSize: "2",
+      WebkitHyphens: "none",
+      MozHyphens: "none",
+      msHyphens: "none",
+      hyphens: "none"
     },
     'pre[class*="language-"]': {
-      "background": "#fff",
-      "color": "#1e293b",
-      "textShadow": "none",
-      "fontFamily": '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
-      "direction": "ltr",
-      "textAlign": "left",
-      "whiteSpace": "pre",
-      "wordSpacing": "normal",
-      "wordBreak": "normal",
-      "lineHeight": "1.5",
-      "MozTabSize": "2",
-      "OTabSize": "2",
-      "tabSize": "2",
-      "WebkitHyphens": "none",
-      "MozHyphens": "none",
-      "msHyphens": "none",
-      "hyphens": "none",
-      "padding": "1em",
-      "margin": "0.5em 0",
-      "overflow": "auto",
-      "borderRadius": "0.3em",
-      "border": "1px solid #e2e8f0"
+      background: "#fff",
+      color: "#1e293b",
+      textShadow: "none",
+      fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+      direction: "ltr",
+      textAlign: "left",
+      whiteSpace: "pre",
+      wordSpacing: "normal",
+      wordBreak: "normal",
+      lineHeight: "1.5",
+      MozTabSize: "2",
+      OTabSize: "2",
+      tabSize: "2",
+      WebkitHyphens: "none",
+      MozHyphens: "none",
+      msHyphens: "none",
+      hyphens: "none",
+      padding: "1em",
+      margin: "0.5em 0",
+      overflow: "auto",
+      borderRadius: "0.3em",
+      border: "1px solid #e2e8f0"
     },
     'code[class*="language-"]::-moz-selection': {
-      "background": "#e2e8f0",
-      "color": "inherit",
-      "textShadow": "none"
+      background: "#e2e8f0",
+      color: "inherit",
+      textShadow: "none"
     },
     'code[class*="language-"] *::-moz-selection': {
-      "background": "#e2e8f0",
-      "color": "inherit",
-      "textShadow": "none"
+      background: "#e2e8f0",
+      color: "inherit",
+      textShadow: "none"
     },
     'pre[class*="language-"] *::-moz-selection': {
-      "background": "#e2e8f0",
-      "color": "inherit",
-      "textShadow": "none"
+      background: "#e2e8f0",
+      color: "inherit",
+      textShadow: "none"
     },
     'code[class*="language-"]::selection': {
-      "background": "#e2e8f0",
-      "color": "inherit",
-      "textShadow": "none"
+      background: "#e2e8f0",
+      color: "inherit",
+      textShadow: "none"
     },
     'code[class*="language-"] *::selection': {
-      "background": "#e2e8f0",
-      "color": "inherit",
-      "textShadow": "none"
+      background: "#e2e8f0",
+      color: "inherit",
+      textShadow: "none"
     },
     'pre[class*="language-"] *::selection': {
-      "background": "#e2e8f0",
-      "color": "inherit",
-      "textShadow": "none"
+      background: "#e2e8f0",
+      color: "inherit",
+      textShadow: "none"
     },
     ':not(pre) > code[class*="language-"]': {
-      "padding": "0.2em 0.3em",
-      "borderRadius": "0.3em",
-      "whiteSpace": "normal",
-      "background": "#f1f5f9"
+      padding: "0.2em 0.3em",
+      borderRadius: "0.3em",
+      whiteSpace: "normal",
+      background: "#f1f5f9"
     },
-    "comment": {
-      "color": "#64748b",
-      "fontStyle": "italic"
+    comment: {
+      color: "#64748b",
+      fontStyle: "italic"
     },
-    "prolog": {
-      "color": "#64748b"
+    prolog: {
+      color: "#64748b"
     },
-    "cdata": {
-      "color": "#64748b"
+    cdata: {
+      color: "#64748b"
     },
-    "doctype": {
-      "color": "#1e293b"
+    doctype: {
+      color: "#1e293b"
     },
-    "punctuation": {
-      "color": "#64748b"
+    punctuation: {
+      color: "#64748b"
     },
-    "entity": {
-      "color": "#3b82f6",
-      "cursor": "help"
+    entity: {
+      color: "#3b82f6",
+      cursor: "help"
     },
     "attr-name": {
-      "color": "#ea580c"
+      color: "#ea580c"
     },
     "class-name": {
-      "color": "#ea580c"
+      color: "#ea580c"
     },
-    "boolean": {
-      "color": "#3b82f6"
+    boolean: {
+      color: "#3b82f6"
     },
-    "constant": {
-      "color": "#3b82f6"
+    constant: {
+      color: "#3b82f6"
     },
-    "number": {
-      "color": "#3b82f6"
+    number: {
+      color: "#3b82f6"
     },
-    "atrule": {
-      "color": "#ea580c"
+    atrule: {
+      color: "#ea580c"
     },
-    "keyword": {
-      "color": "#9333ea"
+    keyword: {
+      color: "#9333ea"
     },
-    "property": {
-      "color": "#3b82f6"
+    property: {
+      color: "#3b82f6"
     },
-    "tag": {
-      "color": "#3b82f6"
+    tag: {
+      color: "#3b82f6"
     },
-    "symbol": {
-      "color": "#3b82f6"
+    symbol: {
+      color: "#3b82f6"
     },
-    "deleted": {
-      "color": "#dc2626"
+    deleted: {
+      color: "#dc2626"
     },
-    "important": {
-      "color": "#9333ea"
+    important: {
+      color: "#9333ea"
     },
-    "selector": {
-      "color": "#16a34a"
+    selector: {
+      color: "#16a34a"
     },
-    "string": {
-      "color": "#16a34a"
+    string: {
+      color: "#16a34a"
     },
-    "char": {
-      "color": "#16a34a"
+    char: {
+      color: "#16a34a"
     },
-    "builtin": {
-      "color": "#16a34a"
+    builtin: {
+      color: "#16a34a"
     },
-    "inserted": {
-      "color": "#16a34a"
+    inserted: {
+      color: "#16a34a"
     },
-    "regex": {
-      "color": "#16a34a"
+    regex: {
+      color: "#16a34a"
     },
     "attr-value": {
-      "color": "#16a34a"
+      color: "#16a34a"
     },
     "attr-value > .token.punctuation": {
-      "color": "#16a34a"
+      color: "#16a34a"
     },
-    "variable": {
-      "color": "#3b82f6"
+    variable: {
+      color: "#3b82f6"
     },
-    "operator": {
-      "color": "#3b82f6"
+    operator: {
+      color: "#3b82f6"
     },
-    "function": {
-      "color": "#3b82f6"
+    function: {
+      color: "#3b82f6"
     },
-    "url": {
-      "color": "#3b82f6"
+    url: {
+      color: "#3b82f6"
     },
     "attr-value > .token.punctuation.attr-equals": {
-      "color": "#64748b"
+      color: "#64748b"
     },
     "special-attr > .token.attr-value > .token.value.css": {
-      "color": "#1e293b"
+      color: "#1e293b"
     },
     ".language-css .token.selector": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-css .token.property": {
-      "color": "#1e293b"
+      color: "#1e293b"
     },
     ".language-css .token.function": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-css .token.url > .token.function": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-css .token.url > .token.string.url": {
-      "color": "#16a34a"
+      color: "#16a34a"
     },
     ".language-css .token.important": {
-      "color": "#9333ea"
+      color: "#9333ea"
     },
     ".language-css .token.atrule .token.rule": {
-      "color": "#9333ea"
+      color: "#9333ea"
     },
     ".language-javascript .token.operator": {
-      "color": "#9333ea"
+      color: "#9333ea"
     },
     ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": {
-      "color": "#dc2626"
+      color: "#dc2626"
     },
     ".language-json .token.operator": {
-      "color": "#1e293b"
+      color: "#1e293b"
     },
     ".language-json .token.null.keyword": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-markdown .token.url": {
-      "color": "#1e293b"
+      color: "#1e293b"
     },
     ".language-markdown .token.url > .token.operator": {
-      "color": "#1e293b"
+      color: "#1e293b"
     },
     ".language-markdown .token.url-reference.url > .token.string": {
-      "color": "#1e293b"
+      color: "#1e293b"
     },
     ".language-markdown .token.url > .token.content": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-markdown .token.url > .token.url": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-markdown .token.url-reference.url": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-markdown .token.blockquote.punctuation": {
-      "color": "#64748b",
-      "fontStyle": "italic"
+      color: "#64748b",
+      fontStyle: "italic"
     },
     ".language-markdown .token.hr.punctuation": {
-      "color": "#64748b",
-      "fontStyle": "italic"
+      color: "#64748b",
+      fontStyle: "italic"
     },
     ".language-markdown .token.code-snippet": {
-      "color": "#16a34a"
+      color: "#16a34a"
     },
     ".language-markdown .token.bold .token.content": {
-      "color": "#ea580c"
+      color: "#ea580c"
     },
     ".language-markdown .token.italic .token.content": {
-      "color": "#9333ea"
+      color: "#9333ea"
     },
     ".language-markdown .token.strike .token.content": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-markdown .token.strike .token.punctuation": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-markdown .token.list.punctuation": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".language-markdown .token.title.important > .token.punctuation": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
-    "bold": {
-      "fontWeight": "bold"
+    bold: {
+      fontWeight: "bold"
     },
-    "italic": {
-      "fontStyle": "italic"
+    italic: {
+      fontStyle: "italic"
     },
-    "namespace": {
-      "Opacity": "0.8"
+    namespace: {
+      Opacity: "0.8"
     },
     "token.tab:not(:empty):before": {
-      "color": "#94a3b8"
+      color: "#94a3b8"
     },
     "token.cr:before": {
-      "color": "#94a3b8"
+      color: "#94a3b8"
     },
     "token.lf:before": {
-      "color": "#94a3b8"
+      color: "#94a3b8"
     },
     "token.space:before": {
-      "color": "#94a3b8"
+      color: "#94a3b8"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
-      "marginRight": "0.4em"
+      marginRight: "0.4em"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
-      "background": "#f1f5f9",
-      "color": "#475569",
-      "padding": "0.1em 0.4em",
-      "borderRadius": "0.3em"
+      background: "#f1f5f9",
+      color: "#475569",
+      padding: "0.1em 0.4em",
+      borderRadius: "0.3em"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
-      "background": "#f1f5f9",
-      "color": "#475569",
-      "padding": "0.1em 0.4em",
-      "borderRadius": "0.3em"
+      background: "#f1f5f9",
+      color: "#475569",
+      padding: "0.1em 0.4em",
+      borderRadius: "0.3em"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
-      "background": "#f1f5f9",
-      "color": "#475569",
-      "padding": "0.1em 0.4em",
-      "borderRadius": "0.3em"
+      background: "#f1f5f9",
+      color: "#475569",
+      padding: "0.1em 0.4em",
+      borderRadius: "0.3em"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
-      "background": "#3b82f6",
-      "color": "#ffffff"
+      background: "#3b82f6",
+      color: "#ffffff"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
-      "background": "#3b82f6",
-      "color": "#ffffff"
+      background: "#3b82f6",
+      color: "#ffffff"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
-      "background": "#3b82f6",
-      "color": "#ffffff"
+      background: "#3b82f6",
+      color: "#ffffff"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
-      "background": "#3b82f6",
-      "color": "#ffffff"
+      background: "#3b82f6",
+      color: "#ffffff"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
-      "background": "#3b82f6",
-      "color": "#ffffff"
+      background: "#3b82f6",
+      color: "#ffffff"
     },
     "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
-      "background": "#3b82f6",
-      "color": "#ffffff"
+      background: "#3b82f6",
+      color: "#ffffff"
     },
     ".line-highlight.line-highlight": {
-      "background": "rgba(59, 130, 246, 0.08)"
+      background: "rgba(59, 130, 246, 0.08)"
     },
     ".line-highlight.line-highlight:before": {
-      "background": "#f1f5f9",
-      "color": "#1e293b",
-      "padding": "0.1em 0.6em",
-      "borderRadius": "0.3em",
-      "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.1)"
+      background: "#f1f5f9",
+      color: "#1e293b",
+      padding: "0.1em 0.6em",
+      borderRadius: "0.3em",
+      boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.1)"
     },
     ".line-highlight.line-highlight[data-end]:after": {
-      "background": "#f1f5f9",
-      "color": "#1e293b",
-      "padding": "0.1em 0.6em",
-      "borderRadius": "0.3em",
-      "boxShadow": "0 2px 0 0 rgba(0, 0, 0, 0.1)"
+      background: "#f1f5f9",
+      color: "#1e293b",
+      padding: "0.1em 0.6em",
+      borderRadius: "0.3em",
+      boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.1)"
     },
     "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
-      "backgroundColor": "rgba(59, 130, 246, 0.08)"
+      backgroundColor: "rgba(59, 130, 246, 0.08)"
     },
     ".line-numbers.line-numbers .line-numbers-rows": {
-      "borderRightColor": "#e2e8f0"
+      borderRightColor: "#e2e8f0"
     },
     ".command-line .command-line-prompt": {
-      "borderRightColor": "#e2e8f0"
+      borderRightColor: "#e2e8f0"
     },
     ".line-numbers .line-numbers-rows > span:before": {
-      "color": "#94a3b8"
+      color: "#94a3b8"
     },
     ".command-line .command-line-prompt > span:before": {
-      "color": "#94a3b8"
+      color: "#94a3b8"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-1": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-5": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-9": {
-      "color": "#3b82f6"
+      color: "#3b82f6"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-2": {
-      "color": "#16a34a"
+      color: "#16a34a"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-6": {
-      "color": "#16a34a"
+      color: "#16a34a"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-10": {
-      "color": "#16a34a"
+      color: "#16a34a"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-3": {
-      "color": "#ea580c"
+      color: "#ea580c"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-7": {
-      "color": "#ea580c"
+      color: "#ea580c"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-11": {
-      "color": "#ea580c"
+      color: "#ea580c"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-4": {
-      "color": "#9333ea"
+      color: "#9333ea"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-8": {
-      "color": "#9333ea"
+      color: "#9333ea"
     },
     ".rainbow-braces .token.token.punctuation.brace-level-12": {
-      "color": "#9333ea"
+      color: "#9333ea"
     },
     "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
-      "backgroundColor": "rgba(220, 38, 38, 0.15)"
+      backgroundColor: "rgba(220, 38, 38, 0.15)"
     },
     "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
-      "backgroundColor": "rgba(220, 38, 38, 0.15)"
+      backgroundColor: "rgba(220, 38, 38, 0.15)"
     },
     "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
-      "backgroundColor": "rgba(220, 38, 38, 0.25)"
+      backgroundColor: "rgba(220, 38, 38, 0.25)"
     },
     "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
-      "backgroundColor": "rgba(220, 38, 38, 0.25)"
+      backgroundColor: "rgba(220, 38, 38, 0.25)"
     },
     "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
-      "backgroundColor": "rgba(220, 38, 38, 0.25)"
+      backgroundColor: "rgba(220, 38, 38, 0.25)"
     },
     "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
-      "backgroundColor": "rgba(220, 38, 38, 0.25)"
+      backgroundColor: "rgba(220, 38, 38, 0.25)"
     },
     "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
-      "backgroundColor": "rgba(220, 38, 38, 0.25)"
+      backgroundColor: "rgba(220, 38, 38, 0.25)"
     },
     "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
-      "backgroundColor": "rgba(220, 38, 38, 0.25)"
+      backgroundColor: "rgba(220, 38, 38, 0.25)"
     },
     "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
-      "backgroundColor": "rgba(220, 38, 38, 0.25)"
+      backgroundColor: "rgba(220, 38, 38, 0.25)"
     },
     "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
-      "backgroundColor": "rgba(220, 38, 38, 0.25)"
+      backgroundColor: "rgba(220, 38, 38, 0.25)"
     },
     "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
-      "backgroundColor": "rgba(22, 163, 74, 0.15)"
+      backgroundColor: "rgba(22, 163, 74, 0.15)"
     },
     "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
-      "backgroundColor": "rgba(22, 163, 74, 0.15)"
+      backgroundColor: "rgba(22, 163, 74, 0.15)"
     },
     "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
-      "backgroundColor": "rgba(22, 163, 74, 0.25)"
+      backgroundColor: "rgba(22, 163, 74, 0.25)"
     },
     "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
-      "backgroundColor": "rgba(22, 163, 74, 0.25)"
+      backgroundColor: "rgba(22, 163, 74, 0.25)"
     },
     "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
-      "backgroundColor": "rgba(22, 163, 74, 0.25)"
+      backgroundColor: "rgba(22, 163, 74, 0.25)"
     },
     "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
-      "backgroundColor": "rgba(22, 163, 74, 0.25)"
+      backgroundColor: "rgba(22, 163, 74, 0.25)"
     },
     "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
-      "backgroundColor": "rgba(22, 163, 74, 0.25)"
+      backgroundColor: "rgba(22, 163, 74, 0.25)"
     },
     "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
-      "backgroundColor": "rgba(22, 163, 74, 0.25)"
+      backgroundColor: "rgba(22, 163, 74, 0.25)"
     },
     "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
-      "backgroundColor": "rgba(22, 163, 74, 0.25)"
+      backgroundColor: "rgba(22, 163, 74, 0.25)"
     },
     "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
-      "backgroundColor": "rgba(22, 163, 74, 0.25)"
+      backgroundColor: "rgba(22, 163, 74, 0.25)"
     },
     ".prism-previewer.prism-previewer:before": {
-      "borderColor": "#fff"
+      borderColor: "#fff"
     },
     ".prism-previewer-gradient.prism-previewer-gradient div": {
-      "borderColor": "#fff",
-      "borderRadius": "0.3em"
+      borderColor: "#fff",
+      borderRadius: "0.3em"
     },
     ".prism-previewer-color.prism-previewer-color:before": {
-      "borderRadius": "0.3em"
+      borderRadius: "0.3em"
     },
     ".prism-previewer-easing.prism-previewer-easing:before": {
-      "borderRadius": "0.3em"
+      borderRadius: "0.3em"
     },
     ".prism-previewer.prism-previewer:after": {
-      "borderTopColor": "#fff"
+      borderTopColor: "#fff"
     },
     ".prism-previewer-flipped.prism-previewer-flipped.after": {
-      "borderBottomColor": "#fff"
+      borderBottomColor: "#fff"
     },
     ".prism-previewer-angle.prism-previewer-angle:before": {
-      "background": "#f1f5f9"
+      background: "#f1f5f9"
     },
     ".prism-previewer-time.prism-previewer-time:before": {
-      "background": "#f1f5f9"
+      background: "#f1f5f9"
     },
     ".prism-previewer-easing.prism-previewer-easing": {
-      "background": "#f1f5f9"
+      background: "#f1f5f9"
     },
     ".prism-previewer-angle.prism-previewer-angle circle": {
-      "stroke": "#1e293b",
-      "strokeOpacity": "1"
+      stroke: "#1e293b",
+      strokeOpacity: "1"
     },
     ".prism-previewer-time.prism-previewer-time circle": {
-      "stroke": "#1e293b",
-      "strokeOpacity": "1"
+      stroke: "#1e293b",
+      strokeOpacity: "1"
     },
     ".prism-previewer-easing.prism-previewer-easing circle": {
-      "stroke": "#1e293b",
-      "fill": "transparent"
+      stroke: "#1e293b",
+      fill: "transparent"
     },
     ".prism-previewer-easing.prism-previewer-easing path": {
-      "stroke": "#1e293b"
+      stroke: "#1e293b"
     },
     ".prism-previewer-easing.prism-previewer-easing line": {
-      "stroke": "#1e293b"
+      stroke: "#1e293b"
     }
   };
   const CodeHighlighter = ({
@@ -1246,7 +1471,7 @@
     toolbarClassName,
     theme = dark
   }) => {
-    const match = language == null ? void 0 : language.match(/language-(\w+)/);
+    const match = language?.match(/language-(\w+)/);
     const lang = match ? match[1] : "text";
     const handleCopy = (text) => {
       navigator.clipboard.writeText(text).then(() => {
@@ -1263,21 +1488,14 @@
           {
             className: reablocks.cn(copyClassName),
             size: "small",
-            variant: "text",
+            variant: "ghost",
             title: "Copy code",
             onClick: () => handleCopy(children),
             children: copyIcon
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactSyntaxHighlighter.Prism,
-        {
-          language: lang,
-          style: theme,
-          children
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(reactSyntaxHighlighter.Prism, { language: lang, style: theme, children })
     ] });
   };
   const TableComponent = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("table", { ...props, children });
@@ -1286,78 +1504,156 @@
   const Markdown = ({
     children,
     remarkPlugins,
-    rehypePlugins = [rehypeKatex]
-  }) => {
-    const { theme } = React.useContext(ChatContext);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ReactMarkdown,
-      {
-        remarkPlugins,
-        rehypePlugins,
-        components: {
-          code: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-            CodeHighlighter,
-            {
-              ...props,
-              language: className,
-              className: reablocks.cn(theme.messages.message.markdown.code, className),
-              copyClassName: reablocks.cn(theme.messages.message.markdown.copy),
-              toolbarClassName: reablocks.cn(theme.messages.message.markdown.toolbar)
-            }
-          ),
-          table: (props) => /* @__PURE__ */ jsxRuntime.jsx(
-            TableComponent,
-            {
-              ...props,
-              className: reablocks.cn(theme.messages.message.markdown.table)
-            }
-          ),
-          th: (props) => /* @__PURE__ */ jsxRuntime.jsx(
-            TableHeaderCell,
-            {
-              ...props,
-              className: reablocks.cn(theme.messages.message.markdown.th)
-            }
-          ),
-          td: (props) => /* @__PURE__ */ jsxRuntime.jsx(
-            TableDataCell,
-            {
-              ...props,
-              className: reablocks.cn(theme.messages.message.markdown.td)
-            }
-          ),
-          a: (props) => /* @__PURE__ */ jsxRuntime.jsx("a", { ...props, className: reablocks.cn(theme.messages.message.markdown.a) }),
-          p: (props) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...props, className: reablocks.cn(theme.messages.message.markdown.p) }),
-          li: (props) => /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, className: reablocks.cn(theme.messages.message.markdown.li) }),
-          ul: (props) => /* @__PURE__ */ jsxRuntime.jsx("ul", { ...props, className: reablocks.cn(theme.messages.message.markdown.ul) }),
-          ol: (props) => /* @__PURE__ */ jsxRuntime.jsx("ol", { ...props, className: reablocks.cn(theme.messages.message.markdown.ol) })
-        },
-        children
-      }
-    );
-  };
+    rehypePlugins = [rehypeKatex],
+    theme
+  }) => /* @__PURE__ */ jsxRuntime.jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins,
+      rehypePlugins,
+      components: {
+        code: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          CodeHighlighter,
+          {
+            ...props,
+            language: className,
+            className: reablocks.cn(theme.messages.message.markdown.code, className),
+            copyClassName: reablocks.cn(theme.messages.message.markdown.copy),
+            toolbarClassName: reablocks.cn(theme.messages.message.markdown.toolbar)
+          }
+        ),
+        table: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+          TableComponent,
+          {
+            ...props,
+            className: reablocks.cn(theme.messages.message.markdown.table)
+          }
+        ),
+        th: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+          TableHeaderCell,
+          {
+            ...props,
+            className: reablocks.cn(theme.messages.message.markdown.th)
+          }
+        ),
+        td: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+          TableDataCell,
+          {
+            ...props,
+            className: reablocks.cn(theme.messages.message.markdown.td)
+          }
+        ),
+        a: (props) => /* @__PURE__ */ jsxRuntime.jsx("a", { ...props, className: reablocks.cn(theme.messages.message.markdown.a) }),
+        hr: (props) => /* @__PURE__ */ jsxRuntime.jsx("hr", { ...props, className: reablocks.cn(theme.messages.message.markdown.hr) }),
+        p: (props) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...props, className: reablocks.cn(theme.messages.message.markdown.p) }),
+        li: (props) => /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, className: reablocks.cn(theme.messages.message.markdown.li) }),
+        ul: (props) => /* @__PURE__ */ jsxRuntime.jsx("ul", { ...props, className: reablocks.cn(theme.messages.message.markdown.ul) }),
+        ol: (props) => /* @__PURE__ */ jsxRuntime.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
-      ]]);
+    return (tree) => {
+      mdastUtilFindAndReplace.findAndReplace(tree, [[CVE_REGEX, replaceCve]], {
+        ignore: ["link"]
+      });
     };
     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() }] }
-          ]
+          children: [{ children: [{ type: "text", value: value.trim() }] }]
         }
       ];
     }
   }
+  const SessionEmpty = ({ children }) => {
+    const { theme } = React.useContext(ChatContext);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reablocks.cn(theme.empty), children });
+  };
+  const SvgRefresh = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M1.75 8.25098C2.16399 8.25098 2.49998 8.58699 2.5 9.00098C2.5 12.585 5.416 15.501 9 15.501C11.149 15.501 13.1291 14.4262 14.3301 12.6992L12.8701 12.9014C12.4591 12.9484 12.0814 12.6698 12.0244 12.2598C11.9685 11.8498 12.2541 11.4711 12.665 11.4141L15.6094 11.0068L15.6104 11.0078C16.0172 10.951 16.3981 11.2386 16.4551 11.6484L16.8633 14.5928C16.9203 15.0038 16.6327 15.3825 16.2227 15.4395C16.1878 15.4444 16.153 15.4463 16.1191 15.4463C15.7501 15.4463 15.429 15.1738 15.377 14.7988L15.2598 13.9551C13.7628 15.842 11.4739 17.001 9 17.001C4.589 17.001 1 13.412 1 9.00098C1.00002 8.58699 1.33601 8.25098 1.75 8.25098ZM9.00098 1C13.412 1 17.001 4.589 17.001 9C17.001 9.414 16.665 9.75 16.251 9.75C15.837 9.75 15.501 9.414 15.501 9C15.501 5.416 12.585 2.5 9.00098 2.5C6.84502 2.5 4.87188 3.57384 3.67188 5.30078L5.12988 5.09863C5.53788 5.04563 5.91859 5.32923 5.97559 5.74023C6.03148 6.15017 5.7459 6.52895 5.33496 6.58594L2.39062 6.99316C2.35579 6.99812 2.32095 6.99999 2.28711 7C1.91811 7 1.59692 6.72754 1.54492 6.35254L1.13672 3.4082C1.07972 2.9972 1.36734 2.61852 1.77734 2.56152C2.18818 2.50179 2.56607 2.79129 2.62305 3.20215L2.73926 4.04199C4.23526 2.15508 6.52006 1 9 1H9.00098Z", fill: "currentColor" }));
+  const SvgThumbsDown = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.25 1.25H4.5C3.8775 1.25 3.345 1.625 3.12 2.165L0.855 7.4525C0.7875 7.625 0.75 7.805 0.75 8V9.5C0.75 10.325 1.425 11 2.25 11H6.9825L6.27 14.4275L6.2475 14.6675C6.2475 14.975 6.375 15.26 6.5775 15.4625L7.3725 16.25L12.315 11.3075C12.585 11.0375 12.75 10.6625 12.75 10.25V2.75C12.75 1.925 12.075 1.25 11.25 1.25ZM11.25 10.25L7.995 13.505L9 9.5H2.25V8L4.5 2.75H11.25V10.25ZM14.25 1.25H17.25V10.25H14.25V1.25Z", fill: "currentColor" }));
+  const SvgThumbsUp = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M6.75 15.75H13.5C14.1225 15.75 14.655 15.375 14.88 14.835L17.145 9.5475C17.2125 9.375 17.25 9.195 17.25 9V7.5C17.25 6.675 16.575 6 15.75 6H11.0175L11.73 2.5725L11.7525 2.3325C11.7525 2.025 11.625 1.74 11.4225 1.5375L10.6275 0.75L5.685 5.6925C5.415 5.9625 5.25 6.3375 5.25 6.75V14.25C5.25 15.075 5.925 15.75 6.75 15.75ZM6.75 6.75L10.005 3.495L9 7.5H15.75V9L13.5 14.25H6.75V6.75ZM0.75 6.75H3.75V15.75H0.75V6.75Z", fill: "currentColor" }));
+  const MessageActions = ({
+    children,
+    ...props
+  }) => {
+    const { theme } = React.useContext(ChatContext);
+    const {
+      question,
+      response,
+      copyIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgCopy, {}),
+      thumbsUpIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgThumbsUp, {}),
+      thumbsDownIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgThumbsDown, {}),
+      refreshIcon = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Comp, { className: reablocks.cn(theme.messages.message.footer.base), children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      copyIcon && /* @__PURE__ */ jsxRuntime.jsx(
+        reablocks.IconButton,
+        {
+          variant: "ghost",
+          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__ */ jsxRuntime.jsx(
+        reablocks.IconButton,
+        {
+          variant: "ghost",
+          disablePadding: true,
+          title: "Upvote",
+          className: reablocks.cn(theme.messages.message.footer.upvote),
+          onClick: onUpvote,
+          children: thumbsUpIcon
+        }
+      ),
+      thumbsDownIcon && /* @__PURE__ */ jsxRuntime.jsx(
+        reablocks.IconButton,
+        {
+          variant: "ghost",
+          disablePadding: true,
+          title: "Downvote",
+          className: reablocks.cn(theme.messages.message.footer.downvote),
+          onClick: onDownvote,
+          children: thumbsDownIcon
+        }
+      ),
+      refreshIcon && /* @__PURE__ */ jsxRuntime.jsx(
+        reablocks.IconButton,
+        {
+          variant: "ghost",
+          disablePadding: true,
+          title: "Refresh",
+          className: reablocks.cn(theme.messages.message.footer.refresh),
+          onClick: onRefresh,
+          children: refreshIcon
+        }
+      )
+    ] }) });
+  };
   const SvgFile = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.7036 1.37034C3.04741 1.02653 3.51373 0.833374 3.99996 0.833374H9.33329H9.33331C9.47275 0.833374 9.59885 0.890449 9.68954 0.98251L13.6843 4.97722C13.7763 5.0679 13.8333 5.19398 13.8333 5.33337L13.8333 5.3379V13.3334C13.8333 13.8196 13.6401 14.2859 13.2963 14.6297C12.9525 14.9736 12.4862 15.1667 12 15.1667H3.99996C3.51373 15.1667 3.04741 14.9736 2.7036 14.6297C2.35978 14.2859 2.16663 13.8196 2.16663 13.3334V2.66671C2.16663 2.18048 2.35978 1.71416 2.7036 1.37034ZM3.99996 1.83337H8.83331V5.33337C8.83331 5.60952 9.05717 5.83337 9.33331 5.83337H12.8333V13.3334C12.8333 13.5544 12.7455 13.7663 12.5892 13.9226C12.4329 14.0789 12.221 14.1667 12 14.1667H3.99996C3.77895 14.1667 3.56698 14.0789 3.4107 13.9226C3.25442 13.7663 3.16663 13.5544 3.16663 13.3334V2.66671C3.16663 2.44569 3.25442 2.23373 3.4107 2.07745C3.56698 1.92117 3.77895 1.83337 3.99996 1.83337ZM9.83331 2.5405L12.1262 4.83337H9.83331V2.5405ZM5.33331 8.16663C5.05717 8.16663 4.83331 8.39048 4.83331 8.66663C4.83331 8.94277 5.05717 9.16663 5.33331 9.16663H10.6666C10.9428 9.16663 11.1666 8.94277 11.1666 8.66663C11.1666 8.39048 10.9428 8.16663 10.6666 8.16663H5.33331ZM4.83331 11.3334C4.83331 11.0572 5.05717 10.8334 5.33331 10.8334H10.6666C10.9428 10.8334 11.1666 11.0572 11.1666 11.3334C11.1666 11.6095 10.9428 11.8334 10.6666 11.8334H5.33331C5.05717 11.8334 4.83331 11.6095 4.83331 11.3334ZM5.33331 5.5C5.05717 5.5 4.83331 5.72386 4.83331 6C4.83331 6.27614 5.05717 6.5 5.33331 6.5H6.66665C6.94279 6.5 7.16665 6.27614 7.16665 6C7.16665 5.72386 6.94279 5.5 6.66665 5.5H5.33331Z" }));
-  const DefaultFileRenderer$2 = React.lazy(() => Promise.resolve().then(() => DefaultFileRenderer$1));
+  const DefaultFileRenderer$2 = React.lazy(
+    () => Promise.resolve().then(() => DefaultFileRenderer$1)
+  );
   const CSVFileRenderer$2 = React.lazy(() => Promise.resolve().then(() => CSVFileRenderer$1));
   const ImageFileRenderer$2 = React.lazy(() => Promise.resolve().then(() => ImageFileRenderer$1));
   const PDFFileRenderer$2 = React.lazy(() => Promise.resolve().then(() => PDFFileRenderer$1));
@@ -1375,29 +1671,12 @@
   }) => {
     const { theme } = React.useContext(ChatContext);
     const FileRenderer = React.useMemo(() => {
-      const Renderer = Object.keys(FILE_TYPE_RENDERER_MAP).find((key) => type == null ? void 0 : type.startsWith(key)) ?? "default";
+      const Renderer = Object.keys(FILE_TYPE_RENDERER_MAP).find((key) => type?.startsWith(key)) ?? "default";
       return FILE_TYPE_RENDERER_MAP[Renderer] || DefaultFileRenderer$2;
     }, [type]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: reablocks.cn(theme.messages.message.files.file.base),
-        children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(FileRenderer, { name, url, fileIcon, limit }) })
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reablocks.cn(theme.messages.message.files.file.base), children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(FileRenderer, { name, url, fileIcon, limit }) }) });
   };
-  const DefaultFileRenderer = ({
-    name,
-    limit = 100,
-    fileIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgFile, {})
-  }) => /* @__PURE__ */ jsxRuntime.jsxs("figure", { className: "flex items-center gap-2", children: [
-    fileIcon,
-    name && /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: reablocks.cn("file-name-class"), children: /* @__PURE__ */ jsxRuntime.jsx(reablocks.Ellipsis, { value: name, limit }) })
-  ] });
-  const DefaultFileRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-    __proto__: null,
-    default: DefaultFileRenderer
-  }, Symbol.toStringTag, { value: "Module" }));
+  const SvgDownload = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24px", height: "24px", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M 11 2 C 10.448 2 10 2.448 10 3 L 10 11 L 6.5 11 A 0.5 0.5 0 0 0 6 11.5 A 0.5 0.5 0 0 0 6.1464844 11.853516 A 0.5 0.5 0 0 0 6.1777344 11.882812 L 11.283203 16.697266 L 11.316406 16.728516 A 1 1 0 0 0 12 17 A 1 1 0 0 0 12.683594 16.728516 L 12.697266 16.716797 A 1 1 0 0 0 12.707031 16.705078 L 17.810547 11.892578 A 0.5 0.5 0 0 0 17.839844 11.865234 L 17.847656 11.859375 A 0.5 0.5 0 0 0 17.853516 11.853516 A 0.5 0.5 0 0 0 18 11.5 A 0.5 0.5 0 0 0 17.5 11 L 14 11 L 14 3 C 14 2.448 13.552 2 13 2 L 12 2 L 11 2 z M 3 20 A 1.0001 1.0001 0 1 0 3 22 L 21 22 A 1.0001 1.0001 0 1 0 21 20 L 3 20 z", fill: "currentColor" }));
   const sanitizeSVGCell = (cell) => {
     const trimmed = cell.trim();
     const escaped = trimmed.replace(/"/g, '""');
@@ -1414,8 +1693,8 @@
       throw new Error("Failed to parse CSV file.");
     }
   };
-  const SvgDownload = (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-cloud-download", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12 12v9" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "m8 17 4 4 4-4" }));
   const CSVFileRenderer = ({ name, url, fileIcon }) => {
+    const { theme } = React.useContext(ChatContext);
     const [isLoading, setIsLoading] = React.useState(true);
     const [csvData, setCsvData] = React.useState([]);
     const [error, setError] = React.useState(null);
@@ -1491,24 +1770,24 @@
         ]
       }
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "csv-icon flex items-center", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: theme.messages.message.csvPreview.base, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: theme.messages.message.csvPreview.header.base, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: theme.messages.message.csvPreview.header.icon, children: [
           fileIcon,
           name && /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "ml-1", children: name })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "csv-icon flex items-center gap-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reablocks.IconButton, { size: "small", variant: "text", onClick: downloadCSV, children: /* @__PURE__ */ jsxRuntime.jsx(SvgDownload, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reablocks.IconButton, { size: "small", variant: "text", onClick: toggleModal, children: /* @__PURE__ */ jsxRuntime.jsx(SvgCopy, {}) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: theme.messages.message.csvPreview.header.actions, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reablocks.IconButton, { size: "medium", variant: "text", onClick: downloadCSV, children: /* @__PURE__ */ jsxRuntime.jsx(SvgDownload, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reablocks.IconButton, { size: "medium", variant: "text", onClick: toggleModal, children: /* @__PURE__ */ jsxRuntime.jsx(SvgCopy, {}) })
         ] })
       ] }),
       error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "error-message", children: error }),
       isLoading && !csvData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-secondary", children: "Loading..." }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between", children: !error && csvData.length > 0 && renderTable(csvData, 6) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: theme.messages.message.csvPreview.tableContainer, children: !error && csvData.length > 0 && renderTable(csvData, 6) }),
       /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: isModalOpen && /* @__PURE__ */ jsxRuntime.jsx(
         react.motion.div,
         {
-          className: "fixed inset-0 bg-black/70 flex justify-center items-center z-50",
+          className: theme.messages.message.csvPreview.dialog.base,
           initial: { opacity: 0 },
           animate: { opacity: 1 },
           exit: { opacity: 0 },
@@ -1517,7 +1796,7 @@
             react.motion.div,
             {
               ref: modalRef,
-              className: "bg-white dark:bg-gray-900 rounded-md w-11/12 h-5/6 overflow-auto",
+              className: theme.messages.message.csvPreview.dialog.container,
               initial: { scale: 0.8 },
               animate: { scale: 1 },
               exit: { scale: 0.8 },
@@ -1533,15 +1812,34 @@
     __proto__: null,
     default: CSVFileRenderer
   }, Symbol.toStringTag, { value: "Module" }));
+  const DefaultFileRenderer = ({
+    name,
+    limit = 100,
+    fileIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgFile, {})
+  }) => /* @__PURE__ */ jsxRuntime.jsxs("figure", { className: "flex items-center gap-2", children: [
+    fileIcon,
+    name && /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: reablocks.cn("file-name-class"), children: /* @__PURE__ */ jsxRuntime.jsx(reablocks.Ellipsis, { value: name, limit }) })
+  ] });
+  const DefaultFileRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    default: DefaultFileRenderer
+  }, Symbol.toStringTag, { value: "Module" }));
   const ImageFileRenderer = ({ url }) => /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt: "Image", className: "size-10" });
   const ImageFileRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     default: ImageFileRenderer
   }, Symbol.toStringTag, { value: "Module" }));
-  const PDFFileRenderer = ({ name, url, fileIcon }) => /* @__PURE__ */ jsxRuntime.jsxs("figure", { className: "csv-icon flex items-center gap-2", onClick: () => window.open(url, "_blank"), children: [
-    fileIcon,
-    name && /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "file-name", children: name })
-  ] });
+  const PDFFileRenderer = ({ name, url, fileIcon }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "figure",
+    {
+      className: "csv-icon flex items-center gap-2",
+      onClick: () => window.open(url, "_blank"),
+      children: [
+        fileIcon,
+        name && /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "file-name", children: name })
+      ]
+    }
+  );
   const PDFFileRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     default: PDFFileRenderer
@@ -1631,7 +1929,7 @@
         ...props,
         children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(MessageFiles, { files }),
-          /* @__PURE__ */ jsxRuntime.jsx(Markdown, { remarkPlugins, children: question }),
+          /* @__PURE__ */ jsxRuntime.jsx(Markdown, { remarkPlugins, theme, children: question }),
           isLong && !expanded && /* @__PURE__ */ jsxRuntime.jsx(
             reablocks.Button,
             {
@@ -1659,7 +1957,7 @@
         "data-compact": isCompact,
         className: reablocks.cn(theme.messages.message.response),
         children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Markdown, { remarkPlugins, children: response }),
+          /* @__PURE__ */ jsxRuntime.jsx(Markdown, { remarkPlugins, theme, children: response }),
           isLoading && /* @__PURE__ */ jsxRuntime.jsx(
             react.motion.div,
             {
@@ -1676,7 +1974,12 @@
       }
     );
   };
-  const MessageSource = ({ title, url, image, limit = 50 }) => {
+  const MessageSource = ({
+    title,
+    url,
+    image,
+    limit = 50
+  }) => {
     const { theme, isCompact } = React.useContext(ChatContext);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "figure",
@@ -1690,10 +1993,26 @@
           }
         },
         children: [
-          image && /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: title, className: reablocks.cn(theme.messages.message.sources.source.image) }),
+          image && /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: image,
+              alt: title,
+              className: reablocks.cn(theme.messages.message.sources.source.image)
+            }
+          ),
           (title || url) && /* @__PURE__ */ jsxRuntime.jsxs("figcaption", { children: [
             title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: reablocks.cn(theme.messages.message.sources.source.title), children: /* @__PURE__ */ jsxRuntime.jsx(reablocks.Ellipsis, { value: title, limit }) }),
-            url && /* @__PURE__ */ jsxRuntime.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: reablocks.cn(theme.messages.message.sources.source.url), children: url })
+            url && /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: reablocks.cn(theme.messages.message.sources.source.url),
+                children: url
+              }
+            )
           ] })
         ]
       }
@@ -1710,82 +2029,6 @@
     }
     return sources && sources.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: reablocks.cn(theme.messages.message.sources.base), children: sources.map((source, index) => /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...source, children }, index)) });
   };
-  const SvgThumbsDown = (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-thumbs-down", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M17 14V2" }), /* @__PURE__ */ React__namespace.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__ */ 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-thumbs-up", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M7 10v12" }), /* @__PURE__ */ React__namespace.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__ */ 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-refresh-ccw", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M3 3v5h5" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M16 16h5v5" }));
-  const MessageActions = ({
-    children,
-    ...props
-  }) => {
-    const { theme } = React.useContext(ChatContext);
-    const {
-      question,
-      response,
-      copyIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgCopy, {}),
-      thumbsUpIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgThumbsUp, {}),
-      thumbsDownIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgThumbsDown, {}),
-      refreshIcon = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Comp, { className: reablocks.cn(theme.messages.message.footer.base), children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      copyIcon && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        reablocks.IconButton,
-        {
-          variant: "text",
-          disablePadding: true,
-          title: "Upvote",
-          className: reablocks.cn(theme.messages.message.footer.upvote),
-          onClick: onUpvote,
-          children: thumbsUpIcon
-        }
-      ),
-      thumbsDownIcon && /* @__PURE__ */ jsxRuntime.jsx(
-        reablocks.IconButton,
-        {
-          variant: "text",
-          disablePadding: true,
-          title: "Downvote",
-          className: reablocks.cn(theme.messages.message.footer.downvote),
-          onClick: onDownvote,
-          children: thumbsDownIcon
-        }
-      ),
-      refreshIcon && /* @__PURE__ */ jsxRuntime.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,
@@ -1800,403 +2043,51 @@ ${response}`),
     }
   };
   const SessionMessage = ({
+    className,
     conversation,
     isLast,
     children
   }) => {
     const { theme, isLoading } = React.useContext(ChatContext);
     return /* @__PURE__ */ jsxRuntime.jsxs(react.motion.div, { variants: messageVariants, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reablocks.Card, { className: reablocks.cn(theme.messages.message.base), children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(MessageQuestion, { question: conversation.question, files: conversation.files }),
+      /* @__PURE__ */ jsxRuntime.jsx(reablocks.Card, { className: reablocks.cn(theme.messages.message.base, className), children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          MessageResponse,
-          {
-            response: conversation.response,
-            isLoading: isLast && isLoading
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(MessageSources, { sources: conversation.sources }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MessageActions,
+          MessageQuestion,
           {
             question: conversation.question,
-            response: conversation.response
+            files: conversation.files
           }
-        )
-      ] }) }),
-      !isLast && /* @__PURE__ */ jsxRuntime.jsx(reablocks.Divider, {})
-    ] }, conversation.id);
-  };
-  const containerVariants = {
-    hidden: {},
-    visible: {
-      transition: {
-        staggerChildren: 0.07,
-        when: "beforeChildren"
-      }
-    }
-  };
-  const SessionMessages = ({
-    children,
-    newSessionContent,
-    limit = 10,
-    showMoreText = "Show more"
-  }) => {
-    const { activeSession, theme } = React.useContext(ChatContext);
-    const contentRef = React.useRef(null);
-    const [isAnimating, setIsAnimating] = React.useState(true);
-    React.useEffect(() => {
-      if (contentRef.current) {
-        requestAnimationFrame(
-          () => contentRef.current.scrollTop = contentRef.current.scrollHeight
-        );
-      }
-    }, [activeSession, isAnimating]);
-    function handleShowMore() {
-      showNext(limit);
-      requestAnimationFrame(() => contentRef.current.scrollTop = 0);
-    }
-    const reversedConvos = React.useMemo(
-      () => [...(activeSession == null ? void 0 : activeSession.conversations) ?? []].reverse(),
-      [activeSession]
-    );
-    const { data, hasMore, showNext } = reablocks.useInfinityList({
-      items: reversedConvos,
-      size: limit
-    });
-    const reReversedConvo = React.useMemo(() => [...data].reverse(), [data]);
-    const convosToRender = limit ? reReversedConvo : activeSession == null ? void 0 : activeSession.conversations;
-    if (!activeSession) {
-      return /* @__PURE__ */ jsxRuntime.jsx(SessionEmpty, { children: newSessionContent });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.messages.content), ref: contentRef, children: [
-      hasMore && /* @__PURE__ */ jsxRuntime.jsx(
-        reablocks.Button,
-        {
-          variant: "outline",
-          className: reablocks.cn(theme.messages.showMore),
-          fullWidth: true,
-          onClick: handleShowMore,
-          children: showMoreText
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        react.motion.div,
-        {
-          variants: containerVariants,
-          initial: "hidden",
-          animate: "visible",
-          onAnimationComplete: () => {
-            requestAnimationFrame(() => setIsAnimating(false));
-          },
-          children: children ? children(convosToRender) : convosToRender.map((conversation, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            SessionMessage,
-            {
-              conversation,
-              isLast: index === conversation.length - 1
-            },
-            conversation.id
-          ))
-        },
-        activeSession == null ? void 0 : activeSession.id
-      ) })
-    ] });
-  };
-  const chatTheme = {
-    base: "dark:text-white text-gray-500",
-    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",
-      companion: "w-full h-full",
-      group: "text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1",
-      create: "relative mb-4 rounded-[10px] text-white",
-      session: {
-        base: [
-          "group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500",
-          "dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200"
-        ].join(" "),
-        active: [
-          "border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ",
-          "dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50",
-          "[&_button]:opacity-100!"
-        ].join(" "),
-        delete: "[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:opacity-50!"
-      }
-    },
-    messages: {
-      base: "",
-      console: "flex flex-col mx-5 flex-1 overflow-hidden",
-      companion: "flex w-full h-full",
-      back: "self-start p-0 my-2",
-      inner: "flex-1 h-full flex flex-col",
-      title: ["text-base font-bold text-gray-500", "dark:text-gray-200"].join(
-        " "
-      ),
-      date: "text-xs whitespace-nowrap text-gray-400",
-      content: [
-        "mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200",
-        "dark:[&_hr]:bg-gray-800/60"
-      ].join(" "),
-      header: "flex justify-between items-center gap-2",
-      showMore: "mb-4",
-      message: {
-        base: "mt-4 mb-4 flex flex-col p-0 rounded-sm border-none bg-transparent",
-        question: [
-          "relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900",
-          "dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100"
-        ].join(" "),
-        response: [
-          "relative data-[compact=false]:px-4 text-gray-900",
-          "dark:text-gray-100"
-        ].join(" "),
-        overlay: "overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-linear-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200",
-        cursor: "inline-block w-1 h-4 bg-current",
-        expand: "absolute bottom-1 right-1 z-10",
-        files: {
-          base: "mb-2 flex flex-wrap gap-3 ",
-          file: {
-            base: [
-              "flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer",
-              "dark:border-gray-700"
-            ].join(" "),
-            name: ["text-sm text-gray-500", "dark:text-gray-200"].join(" ")
-          }
-        },
-        sources: {
-          base: "my-4 flex flex-wrap gap-3",
-          source: {
-            base: [
-              "flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer",
-              "dark:border-gray-700"
-            ].join(" "),
-            companion: "flex-1 px-3 py-1.5",
-            image: "max-w-10 max-h-10 rounded-md w-full h-fit self-center",
-            title: "text-md block",
-            url: "text-sm text-blue-400 underline"
-          }
-        },
-        markdown: {
-          copy: "sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50",
-          p: "mb-2",
-          a: "text-blue-400 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-b relative",
-          toolbar: "text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ",
-          li: "mb-2 ml-6",
-          ul: "mb-4 list-disc",
-          ol: "mb-4 list-decimal"
-        },
-        footer: {
-          base: "mt-3 flex gap-1.5",
-          copy: [
-            "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-200 hover:text-gray-500",
-            "dark:hover:bg-gray-800 dark:hover:text-white text-gray-400"
-          ].join(" "),
-          upvote: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400",
-          downvote: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400",
-          refresh: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400"
-        }
-      }
-    },
-    input: {
-      base: "flex mt-4 relative",
-      upload: ["px-5 py-2 text-gray-400 size-10", "dark:gray-500"].join(" "),
-      input: [
-        "w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:mx-10! bg-white [&>textarea]:w-full [&>textarea]:flex-none",
-        "dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40"
-      ].join(" "),
-      actions: {
-        base: "absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10",
-        send: [
-          "px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500",
-          "dark:text-white light:text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700"
-        ].join(" "),
-        stop: "px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 "
-      }
-    }
-  };
-  const useDimensions = () => {
-    const [ref, setRef] = React.useState(null);
-    const [width, setWidth] = React.useState(void 0);
-    const observe = React.useCallback((element) => {
-      if (element) setRef(element);
-    }, []);
-    React.useEffect(() => {
-      if (!ref) return;
-      const resizeObserver = new ResizeObserver((entries) => {
-        for (let entry of entries) {
-          setWidth(entry.contentRect.width);
-        }
-      });
-      resizeObserver.observe(ref);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }, [ref]);
-    return { width, observe };
-  };
-  const Chat = ({
-    children,
-    viewType = "console",
-    sessions,
-    onSelectSession,
-    onDeleteSession,
-    onSendMessage,
-    onStopMessage,
-    onFileUpload,
-    isLoading,
-    activeSessionId,
-    theme = chatTheme,
-    onNewSession,
-    remarkPlugins = [remarkGfm, remarkYoutube, remarkMath],
-    disabled,
-    style,
-    className
-  }) => {
-    const [internalActiveSessionID, setInternalActiveSessionID] = React.useState(activeSessionId);
-    const { width, observe } = useDimensions();
-    const isCompact = viewType === "companion" || width && width < 767;
-    React.useEffect(() => {
-      setInternalActiveSessionID(activeSessionId);
-    }, [activeSessionId]);
-    const handleSelectSession = React.useCallback(
-      (sessionId) => {
-        setInternalActiveSessionID(sessionId);
-        onSelectSession == null ? void 0 : onSelectSession(sessionId);
-      },
-      [onSelectSession]
-    );
-    const handleDeleteSession = React.useCallback(
-      (sessionId) => {
-        setInternalActiveSessionID(void 0);
-        onDeleteSession == null ? void 0 : onDeleteSession(sessionId);
-      },
-      [onDeleteSession]
-    );
-    const handleCreateNewSession = React.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();
-        }
-      }
-    ]);
-    const activeSession = React.useMemo(
-      () => sessions.find((session) => session.id === internalActiveSessionID),
-      [sessions, internalActiveSessionID]
-    );
-    const contextValue = React.useMemo(
-      () => ({
-        sessions,
-        activeSession,
-        remarkPlugins,
-        theme,
-        disabled,
-        isLoading,
-        isCompact,
-        viewType,
-        activeSessionId: internalActiveSessionID,
-        selectSession: handleSelectSession,
-        deleteSession: handleDeleteSession,
-        createSession: handleCreateNewSession,
-        sendMessage: onSendMessage,
-        stopMessage: onStopMessage,
-        fileUpload: onFileUpload
-      }),
-      [
-        isLoading,
-        isCompact,
-        viewType,
-        disabled,
-        theme,
-        remarkPlugins,
-        sessions,
-        activeSession,
-        internalActiveSessionID,
-        handleSelectSession,
-        handleDeleteSession,
-        handleCreateNewSession,
-        onSendMessage,
-        onStopMessage,
-        onFileUpload
-      ]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: observe,
-        className: reablocks.cn(className, theme.base, {
-          [theme.companion]: isCompact,
-          [theme.console]: !isCompact
-        }),
-        style,
-        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 = ({
-    children,
-    session,
-    deletable = true,
-    limit = 100,
-    deleteIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgTrash, {}),
-    chatIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgChat, { className: "mr-2" })
-  }) => {
-    const { activeSessionId, selectSession, deleteSession, theme } = React.useContext(ChatContext);
-    const Comp = children ? reactSlot.Slot : reablocks.ListItem;
-    return /* @__PURE__ */ jsxRuntime.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),
-        start: chatIcon,
-        end: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: deletable && /* @__PURE__ */ jsxRuntime.jsx(
-          reablocks.IconButton,
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MessageResponse,
           {
-            size: "small",
-            variant: "text",
-            onClick: (e) => {
-              e.stopPropagation();
-              deleteSession(session.id);
-            },
-            className: reablocks.cn(theme.sessions.session.delete),
-            children: deleteIcon
+            response: conversation.response,
+            isLoading: isLast && isLoading
           }
-        ) }),
-        children: children || /* @__PURE__ */ jsxRuntime.jsx(reablocks.Ellipsis, { value: session.title, limit })
-      }
-    );
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(MessageSources, { sources: conversation.sources }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MessageActions,
+          {
+            question: conversation.question,
+            response: conversation.response
+          }
+        )
+      ] }) }),
+      !isLast && /* @__PURE__ */ jsxRuntime.jsx(reablocks.Divider, {})
+    ] }, conversation.id);
   };
-  const SessionsList = ({
+  const SvgBack = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", width: "24px", height: "24px", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M 34.980469 3.992188 C 34.71875 3.996094 34.472656 4.105469 34.292969 4.292969 L 14.292969 24.292969 C 13.902344 24.683594 13.902344 25.316406 14.292969 25.707031 L 34.292969 45.707031 C 34.542969 45.96875 34.917969 46.074219 35.265625 45.980469 C 35.617188 45.890625 35.890625 45.617188 35.980469 45.265625 C 36.074219 44.917969 35.96875 44.542969 35.707031 44.292969 L 16.414063 25 L 35.707031 5.707031 C 36.003906 5.417969 36.089844 4.980469 35.929688 4.601563 C 35.769531 4.21875 35.394531 3.976563 34.980469 3.992188 Z", fill: "currentColor" }));
+  const SessionMessagePanel = ({
     children,
-    templates
+    allowBack = true
   }) => {
-    const { theme, isCompact, activeSessionId, createSession } = React.useContext(ChatContext);
-    const isVisible = isCompact && !activeSessionId;
-    return (!isCompact || isVisible) && /* @__PURE__ */ jsxRuntime.jsxs(
+    const { activeSessionId, theme, isCompact, selectSession, viewType } = React.useContext(ChatContext);
+    const isVisible = isCompact && activeSessionId || viewType === "chat" || !isCompact;
+    return isVisible && /* @__PURE__ */ jsxRuntime.jsx(
       react.motion.div,
       {
-        initial: { translateX: "-100%" },
+        initial: { translateX: "200%" },
         animate: {
           translateX: "0%",
           transition: {
@@ -2206,29 +2097,133 @@ ${response}`),
             when: "beforeChildren"
           }
         },
-        exit: { translateX: "-100%" },
-        className: reablocks.cn(theme.sessions.base, {
-          [theme.sessions.companion]: isCompact,
-          [theme.sessions.console]: !isCompact
+        exit: { translateX: "200%" },
+        className: reablocks.cn(theme.messages.base, {
+          [theme.messages.companion]: isCompact,
+          [theme.messages.console]: !isCompact
         }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reablocks.cn(theme.messages.inner), children: [
+          allowBack && isCompact && viewType !== "chat" && /* @__PURE__ */ jsxRuntime.jsxs(
+            reablocks.Button,
+            {
+              variant: "text",
+              size: "small",
+              onClick: () => selectSession(null),
+              className: reablocks.cn(theme.messages.back),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SvgBack, {}),
+                "Back"
+              ]
+            }
+          ),
+          children
+        ] })
+      }
+    );
+  };
+  const containerVariants = {
+    hidden: {},
+    visible: {
+      transition: {
+        staggerChildren: 0.07,
+        when: "beforeChildren"
+      }
+    }
+  };
+  const SessionMessages = ({
+    children,
+    newSessionContent,
+    limit = 10,
+    className,
+    showMoreText = "Show more",
+    autoScroll = true,
+    onScroll
+  }) => {
+    const { activeSession, theme } = React.useContext(ChatContext);
+    const contentRef = React.useRef(null);
+    const [isAnimating, setIsAnimating] = React.useState(true);
+    React.useEffect(() => {
+      if (contentRef.current && autoScroll) {
+        requestAnimationFrame(
+          () => contentRef.current.scrollTop = contentRef.current.scrollHeight
+        );
+      }
+    }, [activeSession, autoScroll, isAnimating]);
+    function handleShowMore() {
+      showNext(limit);
+      requestAnimationFrame(() => contentRef.current.scrollTop = 0);
+    }
+    const reversedConvos = React.useMemo(
+      () => [...activeSession?.conversations ?? []].reverse(),
+      [activeSession]
+    );
+    const { data, hasMore, showNext } = reablocks.useInfinityList({
+      items: reversedConvos,
+      size: limit
+    });
+    const reReversedConvo = React.useMemo(() => [...data].reverse(), [data]);
+    const convosToRender = limit ? reReversedConvo : activeSession?.conversations;
+    if (!activeSession) {
+      return /* @__PURE__ */ jsxRuntime.jsx(SessionEmpty, { children: newSessionContent });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: reablocks.cn(theme.messages.content, className),
+        ref: contentRef,
+        onScroll,
         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,
+          hasMore && /* @__PURE__ */ jsxRuntime.jsx(
+            reablocks.Button,
             {
-              session: {
-                id: template.id,
-                title: template.title,
-                conversations: []
-              },
-              chatIcon: template.icon,
-              deletable: false
+              variant: "outline",
+              className: reablocks.cn(theme.messages.showMore),
+              fullWidth: true,
+              onClick: handleShowMore,
+              children: showMoreText
             }
-          ) }, template.id)) })
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            react.motion.div,
+            {
+              variants: containerVariants,
+              initial: "hidden",
+              animate: "visible",
+              onAnimationComplete: () => {
+                requestAnimationFrame(() => setIsAnimating(false));
+              },
+              children: children ? children(convosToRender) : convosToRender.map((conversation, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                SessionMessage,
+                {
+                  conversation,
+                  isLast: index === conversation.length - 1
+                },
+                conversation.id
+              ))
+            },
+            activeSession?.id
+          ) })
         ]
       }
     );
   };
+  const SessionMessagesHeader = ({ children }) => {
+    const { activeSession, theme } = React.useContext(ChatContext);
+    const Comp = children ? reactSlot.Slot : "header";
+    if (!activeSession) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { className: reablocks.cn(theme.messages.header), children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: reablocks.cn(theme.messages.title), children: /* @__PURE__ */ jsxRuntime.jsx(reablocks.Ellipsis, { limit: 125, value: activeSession.title }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reablocks.DateFormat,
+        {
+          className: reablocks.cn(theme.messages.date),
+          date: activeSession.createdAt
+        }
+      )
+    ] }) });
+  };
   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,
@@ -2313,6 +2308,46 @@ ${response}`),
       )
     }));
   }
+  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 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 SessionListItem = ({
+    children,
+    session,
+    deletable = true,
+    limit = 100,
+    deleteIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgTrash, {}),
+    chatIcon = /* @__PURE__ */ jsxRuntime.jsx(SvgChat, { className: "mr-2" })
+  }) => {
+    const { activeSessionId, selectSession, deleteSession, theme } = React.useContext(ChatContext);
+    const Comp = children ? reactSlot.Slot : reablocks.ListItem;
+    return /* @__PURE__ */ jsxRuntime.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?.(session.id),
+        start: chatIcon,
+        end: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: deletable && /* @__PURE__ */ jsxRuntime.jsx(
+          reablocks.IconButton,
+          {
+            size: "small",
+            variant: "ghost",
+            onClick: (e) => {
+              e.stopPropagation();
+              deleteSession(session.id);
+            },
+            className: reablocks.cn(theme.sessions.session.delete),
+            children: deleteIcon
+          }
+        ) }),
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(reablocks.Ellipsis, { value: session.title, limit })
+      }
+    );
+  };
   const SessionsGroup = ({
     heading,
     children
@@ -2334,46 +2369,50 @@ ${response}`),
   const SessionGroups = ({ children }) => {
     const { sessions } = React.useContext(ChatContext);
     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 = chatTheme }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reablocks.cn(theme.appbar), children: content });
+    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)) }, heading)) });
   };
-  const ChatBubble = React.memo(
-    ({
-      children,
-      bubbleContent,
-      position = "right-end",
-      modifiers = [react$1.offset({ mainAxis: 0, crossAxis: -40 })],
-      className
-    }) => {
-      const [isOpen, setIsOpen] = React.useState(false);
-      const ref = React.useRef(null);
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reablocks.ConnectedOverlay,
-          {
-            placement: position,
-            modifiers,
-            reference: ref.current,
-            open: isOpen,
-            onOpen: () => setIsOpen(true),
-            onClose: () => setIsOpen(false),
-            content: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref,
-            className,
-            onClick: () => setIsOpen((prev) => !prev),
-            children: bubbleContent
+  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?.(), children: /* @__PURE__ */ jsxRuntime.jsx(
+            SessionListItem,
+            {
+              session: {
+                id: template.id,
+                title: template.title,
+                conversations: []
+              },
+              chatIcon: template.icon,
+              deletable: false
+            }
+          ) }, template.id)) })
+        ]
+      }
+    );
+  };
   exports2.AppBar = AppBar;
   exports2.Chat = Chat;
   exports2.ChatBubble = ChatBubble;
@@ -2404,8 +2443,9 @@ ${response}`),
   exports2.TableHeaderCell = TableHeaderCell;
   exports2.chatTheme = chatTheme;
   exports2.dark = dark;
+  exports2.groupSessionsByDate = groupSessionsByDate;
   exports2.light = light;
   exports2.remarkCve = remarkCve;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
-});
+}));
 //# sourceMappingURL=index.umd.cjs.map