reachat 1.0.4 → 1.0.6

package/README.md

@@ -34,6 +34,7 @@ theme via Tailwind.
 - Checkout the [docs and demos](https://reachat.dev)
 - Checkout the [storybook demos](https://storybook.reachat.dev)
 - Learn about updates from the [changelog](CHANGELOG.md)
+- Download [Figma template](https://www.figma.com/community/file/1401162540082414292/reachat-landing-page-public)
 
 ## 💎 Other Projects
 

package/dist/SessionMessages/SessionMessage/SessionMessage.d.ts

@@ -8,6 +8,7 @@ interface SessionMessageProps extends PropsWithChildren {
     conversation: Conversation;
     /**
      * Whether the message is the last one in the list.
+     * This let's the chat know when to show the loading cursor.
      */
     isLast?: boolean;
 }

package/dist/docs.json

@@ -1477,7 +1477,7 @@
       },
       "isLast": {
         "defaultValue": null,
-        "description": "Whether the message is the last one in the list.",
+        "description": "Whether the message is the last one in the list.\nThis let's the chat know when to show the loading cursor.",
         "name": "isLast",
         "parent": {
           "fileName": "src/SessionMessages/SessionMessage/SessionMessage.tsx",

package/dist/index.js

@@ -178,9 +178,6 @@ const SessionMessagePanel = ({ children }) => {
   );
 };
 const SvgCopy = (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-copy", ...props }, /* @__PURE__ */ React.createElement("rect", { width: 14, height: 14, x: 8, y: 8, rx: 2, ry: 2 }), /* @__PURE__ */ React.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }));
-const SvgThumbsDown = (props) => /* @__PURE__ */ 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-thumbs-down", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M17 14V2" }), /* @__PURE__ */ React.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.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.createElement("path", { d: "M7 10v12" }), /* @__PURE__ */ React.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.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.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.createElement("path", { d: "M3 3v5h5" }), /* @__PURE__ */ React.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.createElement("path", { d: "M16 16h5v5" }));
 const dark = {
   'code[class*="language-"]': {
     "background": "#11111f",
@@ -1339,11 +1336,13 @@ const MessageFiles = ({ files, children }) => {
   return files.length > 0 && /* @__PURE__ */ jsx("div", { className: cn(theme.messages.message.files.base), children: files.map((file, index) => /* @__PURE__ */ jsx(Comp, { ...file, children }, index)) });
 };
 const MessageSource = ({ title, url, image, limit = 50 }) => {
-  const { theme } = useContext(ChatContext);
+  const { theme, isCompact } = useContext(ChatContext);
   return /* @__PURE__ */ jsxs(
     "figure",
     {
-      className: cn(theme.messages.message.sources.source.base),
+      className: cn(theme.messages.message.sources.source.base, {
+        [theme.messages.message.sources.source.companion]: isCompact
+      }),
       onClick: () => {
         if (url) {
           window.open(url, "_blank");
@@ -1370,6 +1369,9 @@ const MessageSources = ({
   }
   return sources && sources.length > 0 && /* @__PURE__ */ jsx("div", { className: cn(theme.messages.message.sources.base), children: sources.map((source, index) => /* @__PURE__ */ jsx(Comp, { ...source, children }, index)) });
 };
+const SvgThumbsDown = (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-thumbs-down", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M17 14V2" }), /* @__PURE__ */ React.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.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.createElement("path", { d: "M7 10v12" }), /* @__PURE__ */ React.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.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.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.createElement("path", { d: "M3 3v5h5" }), /* @__PURE__ */ React.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.createElement("path", { d: "M16 16h5v5" }));
 const MessageActions = ({
   children,
   ...props
@@ -1478,11 +1480,7 @@ const SessionMessage = ({
         MessageActions,
         {
           question: conversation.question,
-          response: conversation.response,
-          copyIcon: /* @__PURE__ */ jsx(SvgCopy, {}),
-          thumbsUpIcon: /* @__PURE__ */ jsx(SvgThumbsUp, {}),
-          thumbsDownIcon: /* @__PURE__ */ jsx(SvgThumbsDown, {}),
-          refreshIcon: /* @__PURE__ */ jsx(SvgRefresh, {})
+          response: conversation.response
         }
       )
     ] }) }),
@@ -1558,58 +1556,80 @@ const SessionMessages = ({
   ] });
 };
 const chatTheme = {
-  base: "text-white",
-  console: "flex w-full gap-5 h-full",
+  base: "dark:text-white text-gray-500",
+  console: "flex w-full gap-10 h-full",
   companion: "w-full h-full overflow-hidden",
   empty: "text-center flex-1",
   sessions: {
     base: "overflow-auto",
-    console: "min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded-3xl",
+    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 text-gray-400 mt-4 hover:bg-transparent mb-1",
-    create: "relative mb-4 rounded-[10px]",
+    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: "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"
+      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 flex-1 overflow-hidden",
+    console: "flex flex-col mr-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-2xl font-bold",
-    date: "text-sm whitespace-nowrap pt-2",
-    content: "mt-2 flex-1 overflow-auto",
+    title: ["text-base font-bold text-gray-500", "dark:text-gray-200"].join(
+      " "
+    ),
+    date: "text-xs whitespace-nowrap pt-2 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-start gap-2",
     showMore: "mb-4",
     message: {
-      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: "",
+      base: "mt-4 mb-4 flex flex-col p-0 rounded border-none bg-transparent",
+      question: [
+        "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: ["text-gray-900", "dark:text-gray-100"].join(" "),
       cursor: "inline-block w-1 h-4 bg-current",
       files: {
         base: "mb-2 flex flex-wrap gap-3 ",
         file: {
-          base: "flex items-center gap-2 border border-gray-700 p-2 rounded cursor-pointer",
-          name: "text-sm"
+          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-700 p-2 rounded cursor-pointer",
-          image: "w-6 h-6 rounded-md",
+          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-700 underline"
+          url: "text-sm text-blue-400 underline"
         }
       },
       markdown: {
         copy: "absolute right-0 top-0 [&>svg]:w-4 [&>svg]:h-4 opacity-50",
         p: "mb-2",
-        a: "text-blue-700 underline",
+        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",
@@ -1619,8 +1639,11 @@ const chatTheme = {
         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-700/40 hover:text-white",
+        base: "mt-3 flex gap-1.5 text-gray-400",
+        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"
+        ].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",
         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"
@@ -1629,11 +1652,17 @@ const chatTheme = {
   },
   input: {
     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",
+    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 top-[50%] -translate-y-1/2 z-10",
-      send: "px-3 py-3 text-white bg-gray-800 hover:bg-primary-hover rounded-full ",
+      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 dark:bg-gray-800 hover:dark:bg-gray-700"
+      ].join(" "),
       stop: "px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 "
     }
   }
@@ -1788,7 +1817,7 @@ 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 SvgTrash = (props) => /* @__PURE__ */ React.createElement("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { id: "Delete" }, /* @__PURE__ */ React.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.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,