reachat 1.0.2 → 1.0.4

package/dist/SessionsList/SessionGroups.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { GroupedSessions } from '../utils';
+import { GroupedSessions } from '../utils/grouping';
 
 export interface SessionGroupsProps {
     /**

package/dist/SessionsList/SessionListItem.d.ts

@@ -14,6 +14,10 @@ export interface SessionListItemProps extends PropsWithChildren {
      * Icon to show for delete.
      */
     deleteIcon?: ReactElement;
+    /**
+     * Icon to show for chat.
+     */
+    chatIcon?: ReactElement;
     /**
      * Limit for the ellipsis.
      */

package/dist/docs.json

@@ -825,6 +825,27 @@
           "name": "ReactElement<any, string | JSXElementConstructor<any>>"
         }
       },
+      "chatIcon": {
+        "defaultValue": {
+          "value": "<ChatIcon className=\"mr-2\" />"
+        },
+        "description": "Icon to show for chat.",
+        "name": "chatIcon",
+        "parent": {
+          "fileName": "src/SessionsList/SessionListItem.tsx",
+          "name": "SessionListItemProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/SessionsList/SessionListItem.tsx",
+            "name": "SessionListItemProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ReactElement<any, string | JSXElementConstructor<any>>"
+        }
+      },
       "limit": {
         "defaultValue": {
           "value": "100"

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext, useContext, useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { cn, Textarea, Button, Ellipsis, DateFormat, IconButton, Card, useInfinityList, useComponentTheme, List, ListItem } from "reablocks";
+import { cn, Textarea, Button, Ellipsis, DateFormat, IconButton, Card, Divider, useInfinityList, useComponentTheme, List, ListItem } from "reablocks";
 import { Slot } from "@radix-ui/react-slot";
 import { motion, AnimatePresence } from "framer-motion";
 import ReactMarkdown from "react-markdown";
@@ -10,9 +10,8 @@ import { Prism } from "react-syntax-highlighter";
 import { findAndReplace } from "mdast-util-find-and-replace";
 import remarkYoutube from "remark-youtube";
 import { useHotkeys } from "reakeys";
-import useDimensions from "react-cool-dimensions";
 import { isToday, isYesterday, isThisWeek, isThisMonth, isThisYear, format } from "date-fns";
-const SvgSend = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-send-horizontal", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m3 3 3 9-3 9 19-9Z" }), /* @__PURE__ */ React.createElement("path", { d: "M6 12h16" }));
+const SvgSend = (props) => /* @__PURE__ */ React.createElement("svg", { width: 17, height: 17, viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { id: "send" }, /* @__PURE__ */ React.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.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.createElement("path", { d: "m15 9-6 6" }), /* @__PURE__ */ React.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.createElement("path", { d: "m9 9 6 6" }));
 const SvgPaperclip = (props) => /* @__PURE__ */ React.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.createElement("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }));
 const ChatContext = createContext({
@@ -64,51 +63,54 @@ const ChatInput = ({
         disabled: isLoading || disabled
       }
     ),
-    (allowedFiles == null ? void 0 : allowedFiles.length) > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "input",
+    /* @__PURE__ */ jsxs("div", { className: cn(theme.input.actions.base), children: [
+      (allowedFiles == null ? void 0 : allowedFiles.length) > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "file",
+            ref: fileInputRef,
+            className: "hidden",
+            accept: allowedFiles.join(","),
+            onChange: handleFileUpload
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            title: "Upload",
+            variant: "text",
+            disabled: isLoading || disabled,
+            className: cn(theme.input.upload),
+            onClick: () => {
+              var _a;
+              return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+            },
+            children: attachIcon
+          }
+        )
+      ] }),
+      isLoading && /* @__PURE__ */ jsx(
+        Button,
         {
-          type: "file",
-          ref: fileInputRef,
-          className: "hidden",
-          accept: allowedFiles.join(","),
-          onChange: handleFileUpload
+          title: "Stop",
+          className: cn(theme.input.actions.stop),
+          onClick: stopMessage,
+          disabled,
+          children: stopIcon
         }
       ),
       /* @__PURE__ */ jsx(
         Button,
         {
-          title: "Upload",
+          title: "Send",
+          className: cn(theme.input.actions.send),
+          onClick: handleSendMessage,
           disabled: isLoading || disabled,
-          className: cn(theme.input.upload),
-          onClick: () => {
-            var _a;
-            return (_a = fileInputRef.current) == null ? void 0 : _a.click();
-          },
-          children: attachIcon
+          children: sendIcon
         }
       )
-    ] }),
-    isLoading && /* @__PURE__ */ jsx(
-      Button,
-      {
-        title: "Stop",
-        className: cn(theme.input.stop),
-        onClick: stopMessage,
-        disabled,
-        children: stopIcon
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        title: "Send",
-        className: cn(theme.input.send),
-        onClick: handleSendMessage,
-        disabled: isLoading || disabled,
-        children: sendIcon
-      }
-    )
+    ] })
   ] });
 };
 const SessionEmpty = ({
@@ -1460,29 +1462,32 @@ const SessionMessage = ({
   children
 }) => {
   const { theme, isLoading } = useContext(ChatContext);
-  return /* @__PURE__ */ jsx(motion.div, { variants: messageVariants, children: /* @__PURE__ */ jsx(Card, { className: cn(theme.messages.message.base), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(MessageFiles, { files: conversation.files }),
-    /* @__PURE__ */ jsx(MessageQuestion, { question: conversation.question }),
-    /* @__PURE__ */ jsx(
-      MessageResponse,
-      {
-        response: conversation.response,
-        isLoading: isLast && isLoading
-      }
-    ),
-    /* @__PURE__ */ jsx(MessageSources, { sources: conversation.sources }),
-    /* @__PURE__ */ jsx(
-      MessageActions,
-      {
-        question: conversation.question,
-        response: conversation.response,
-        copyIcon: /* @__PURE__ */ jsx(SvgCopy, {}),
-        thumbsUpIcon: /* @__PURE__ */ jsx(SvgThumbsUp, {}),
-        thumbsDownIcon: /* @__PURE__ */ jsx(SvgThumbsDown, {}),
-        refreshIcon: /* @__PURE__ */ jsx(SvgRefresh, {})
-      }
-    )
-  ] }) }) }, conversation.id);
+  return /* @__PURE__ */ jsxs(motion.div, { variants: messageVariants, children: [
+    /* @__PURE__ */ jsx(Card, { className: cn(theme.messages.message.base), children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(MessageFiles, { files: conversation.files }),
+      /* @__PURE__ */ jsx(MessageQuestion, { question: conversation.question }),
+      /* @__PURE__ */ jsx(
+        MessageResponse,
+        {
+          response: conversation.response,
+          isLoading: isLast && isLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(MessageSources, { sources: conversation.sources }),
+      /* @__PURE__ */ jsx(
+        MessageActions,
+        {
+          question: conversation.question,
+          response: conversation.response,
+          copyIcon: /* @__PURE__ */ jsx(SvgCopy, {}),
+          thumbsUpIcon: /* @__PURE__ */ jsx(SvgThumbsUp, {}),
+          thumbsDownIcon: /* @__PURE__ */ jsx(SvgThumbsDown, {}),
+          refreshIcon: /* @__PURE__ */ jsx(SvgRefresh, {})
+        }
+      )
+    ] }) }),
+    !isLast && /* @__PURE__ */ jsx(Divider, {})
+  ] }, conversation.id);
 };
 const containerVariants = {
   hidden: {},
@@ -1559,13 +1564,13 @@ const chatTheme = {
   empty: "text-center flex-1",
   sessions: {
     base: "overflow-auto",
-    console: "min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded",
+    console: "min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded-3xl",
     companion: "w-full h-full",
-    group: "text-xs text-gray-400 mt-4",
-    create: "mb-4",
+    group: "text-xs text-gray-400 mt-4 hover:bg-transparent mb-1",
+    create: "relative mb-4 rounded-[10px]",
     session: {
-      base: "",
-      active: " text-primary",
+      base: "my-1 rounded-[10px] p-2 text-typography hover:bg-gray-800/50 border border-transparent hover:border-gray-700/50",
+      active: "bg-gray-800/70 border border-gray-700/70 hover:bg-gray-800/50 border-gray-700/50 text-white",
       delete: "[&>svg]:w-4 [&>svg]:h-4 opacity-50"
     }
   },
@@ -1581,8 +1586,8 @@ const chatTheme = {
     header: "flex justify-between items-start gap-2",
     showMore: "mb-4",
     message: {
-      base: "mb-6 flex flex-col p-5 rounded",
-      question: "font-semibold text-gray-400 mb-1",
+      base: "mt-4 mb-4 flex flex-col p-0 rounded border-none",
+      question: "font-semibold text-gray-400 mb-4 px-4 py-3 pb-1 rounded-3xl rounded-br-none text-typography bg-gray-900/60 border border-gray-700/50",
       response: "",
       cursor: "inline-block w-1 h-4 bg-current",
       files: {
@@ -1614,22 +1619,45 @@ const chatTheme = {
         ol: "mb-4 list-decimal"
       },
       footer: {
-        base: "mt-3 flex gap-3",
-        copy: "[&>svg]:w-4 [&>svg]:h-4 opacity-50",
-        upvote: "[&>svg]:w-4 [&>svg]:h-4 opacity-50",
-        downvote: "[&>svg]:w-4 [&>svg]:h-4 opacity-50",
-        refresh: "[&>svg]:w-4 [&>svg]:h-4 opacity-50"
+        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-700/40 hover:text-white",
+        upvote: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white",
+        downvote: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white",
+        refresh: "p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white"
       }
     }
   },
   input: {
-    base: "flex mt-4",
-    upload: "px-4 py-2 text-white",
-    input: "w-full",
-    send: "px-4 py-2 text-white",
-    stop: "px-4 py-2 bg-red-500 text-white rounded hover:bg-red-700"
+    base: "flex mt-4 relative",
+    upload: "px-5 py-2 text-white size-10",
+    input: "w-full text-typography border border-gray-700/70 rounded-3xl px-3 py-2 pr-16 after:!mx-10 [&>textarea]:w-full",
+    actions: {
+      base: "absolute flex gap-2 items-center right-5 top-[50%] -translate-y-1/2 z-10",
+      send: "px-3 py-3 text-white bg-gray-800 hover:bg-primary-hover rounded-full ",
+      stop: "px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 "
+    }
   }
 };
+const useDimensions = () => {
+  const [ref, setRef] = useState(null);
+  const [width, setWidth] = useState(void 0);
+  const observe = useCallback((element) => {
+    if (element) setRef(element);
+  }, []);
+  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",
@@ -1761,12 +1789,14 @@ const SessionsList = ({ children }) => {
   );
 };
 const SvgTrash = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-trash-2", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M3 6h18" }), /* @__PURE__ */ React.createElement("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }), /* @__PURE__ */ React.createElement("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }), /* @__PURE__ */ React.createElement("line", { x1: 10, x2: 10, y1: 11, y2: 17 }), /* @__PURE__ */ React.createElement("line", { x1: 14, x2: 14, y1: 11, y2: 17 }));
+const SvgChat = (props) => /* @__PURE__ */ React.createElement("svg", { width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.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__ */ jsx(SvgTrash, {})
+  deleteIcon = /* @__PURE__ */ jsx(SvgTrash, {}),
+  chatIcon = /* @__PURE__ */ jsx(SvgChat, { className: "mr-2" })
 }) => {
   const { activeSessionId, selectSession, deleteSession, theme } = useContext(ChatContext);
   const Comp = children ? Slot : ListItem;
@@ -1780,6 +1810,7 @@ const SessionListItem = ({
         [theme.sessions.session.active]: session.id === activeSessionId
       }),
       onClick: () => selectSession == null ? void 0 : selectSession(session.id),
+      start: chatIcon,
       end: /* @__PURE__ */ jsx(Fragment, { children: deletable && /* @__PURE__ */ jsx(
         IconButton,
         {
@@ -1797,24 +1828,26 @@ const SessionListItem = ({
     }
   );
 };
+const SvgPlus = (props) => /* @__PURE__ */ React.createElement("svg", { width: 17, height: 17, viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { id: "add" }, /* @__PURE__ */ React.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,
   newSessionText = "New Session"
 }) => {
   const { theme, createSession, disabled } = useContext(ChatContext);
   const Comp = children ? Slot : Button;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     Comp,
     {
       fullWidth: true,
       disableMargins: true,
       color: "primary",
+      startAdornment: /* @__PURE__ */ jsx(SvgPlus, {}),
       className: cn(theme.sessions.create),
       disabled,
       onClick: createSession,
       children: children || newSessionText
     }
-  );
+  ) });
 };
 const sortOrder = [
   "Today",