Dark mode chat window (#2443)

* Support XLSX files (#2403) * support xlsx files * lint * create seperate docs for each xlsx sheet * lint * use node-xlsx pkg for parsing xslx files * lint * update error handling --------- Co-authored-by: timothycarambat <rambat1010@gmail.com> * wip chat window * ux+ux improvements and update new colors * chat window dark mode * remove comment --------- Co-authored-by: timothycarambat <rambat1010@gmail.com>
2024-11-19 04:30:10 +01:00 · 2024-10-08 16:16:29 -07:00 · 2024-10-08 16:16:29 -07:00 · 29eff8a27f
commit 29eff8a27f
parent 88f5bb5ce1
17 changed files with 176 additions and 35 deletions
--- a/collector/package.json
+++ b/collector/package.json
@ -33,6 +33,7 @@
    "mime": "^3.0.0",
    "moment": "^2.29.4",
    "node-html-parser": "^6.1.13",
+    "node-xlsx": "^0.24.0",
    "officeparser": "^4.0.5",
    "openai": "4.38.5",
    "pdf-parse": "^1.1.1",
--- a/collector/processSingleFile/convert/asXlsx.js
+++ b/collector/processSingleFile/convert/asXlsx.js
@ -0,0 +1,113 @@
+const { v4 } = require("uuid");
+const xlsx = require("node-xlsx").default;
+const path = require("path");
+const fs = require("fs");
+const {
+  createdDate,
+  trashFile,
+  writeToServerDocuments,
+} = require("../../utils/files");
+const { tokenizeString } = require("../../utils/tokenizer");
+const { default: slugify } = require("slugify");
+
+function convertToCSV(data) {
+  return data
+    .map((row) =>
+      row
+        .map((cell) => {
+          if (cell === null || cell === undefined) return "";
+          if (typeof cell === "string" && cell.includes(","))
+            return `"${cell}"`;
+          return cell;
+        })
+        .join(",")
+    )
+    .join("\n");
+}
+
+async function asXlsx({ fullFilePath = "", filename = "" }) {
+  const documents = [];
+  const folderName = slugify(`${path.basename(filename)}-${v4().slice(0, 4)}`, {
+    lower: true,
+    trim: true,
+  });
+
+  const outFolderPath =
+    process.env.NODE_ENV === "development"
+      ? path.resolve(
+          __dirname,
+          `../../../server/storage/documents/${folderName}`
+        )
+      : path.resolve(process.env.STORAGE_DIR, `documents/${folderName}`);
+
+  try {
+    const workSheetsFromFile = xlsx.parse(fullFilePath);
+    if (!fs.existsSync(outFolderPath))
+      fs.mkdirSync(outFolderPath, { recursive: true });
+
+    for (const sheet of workSheetsFromFile) {
+      try {
+        const { name, data } = sheet;
+        const content = convertToCSV(data);
+
+        if (!content?.length) {
+          console.warn(`Sheet "${name}" is empty. Skipping.`);
+          continue;
+        }
+
+        console.log(`-- Processing sheet: ${name} --`);
+        const sheetData = {
+          id: v4(),
+          url: `file://${path.join(outFolderPath, `${slugify(name)}.csv`)}`,
+          title: `${filename} - Sheet:${name}`,
+          docAuthor: "Unknown",
+          description: `Spreadsheet data from sheet: ${name}`,
+          docSource: "an xlsx file uploaded by the user.",
+          chunkSource: "",
+          published: createdDate(fullFilePath),
+          wordCount: content.split(/\s+/).length,
+          pageContent: content,
+          token_count_estimate: tokenizeString(content).length,
+        };
+
+        const document = writeToServerDocuments(
+          sheetData,
+          `sheet-${slugify(name)}`,
+          outFolderPath
+        );
+        documents.push(document);
+        console.log(
+          `[SUCCESS]: Sheet "${name}" converted & ready for embedding.`
+        );
+      } catch (err) {
+        console.error(`Error processing sheet "${name}":`, err);
+        continue;
+      }
+    }
+  } catch (err) {
+    console.error("Could not process xlsx file!", err);
+    return {
+      success: false,
+      reason: `Error processing ${filename}: ${err.message}`,
+      documents: [],
+    };
+  } finally {
+    trashFile(fullFilePath);
+  }
+
+  if (documents.length === 0) {
+    console.error(`No valid sheets found in ${filename}.`);
+    return {
+      success: false,
+      reason: `No valid sheets found in ${filename}.`,
+      documents: [],
+    };
+  }
+
+  console.log(
+    `[SUCCESS]: ${filename} fully processed. Created ${documents.length} document(s).\n`
+  );
+  return { success: true, reason: null, documents };
+}
+
+module.exports = asXlsx;
--- a/collector/utils/constants.js
+++ b/collector/utils/constants.js
@ -11,6 +11,10 @@ const ACCEPTED_MIMES = {
    ".pptx",
  ],

+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [
+    ".xlsx",
+  ],
+
  "application/vnd.oasis.opendocument.text": [".odt"],
  "application/vnd.oasis.opendocument.presentation": [".odp"],

@ -41,6 +45,8 @@ const SUPPORTED_FILETYPE_CONVERTERS = {
  ".odt": "./convert/asOfficeMime.js",
  ".odp": "./convert/asOfficeMime.js",

+  ".xlsx": "./convert/asXlsx.js",
+
  ".mbox": "./convert/asMbox.js",

  ".epub": "./convert/asEPub.js",
--- a/collector/yarn.lock
+++ b/collector/yarn.lock
@ -2326,6 +2326,13 @@ node-html-parser@^6.1.13:
    css-select "^5.1.0"
    he "1.2.0"

+node-xlsx@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/node-xlsx/-/node-xlsx-0.24.0.tgz#a6a365acb18ad37c66c2b254b6ebe0c22dc9dc6f"
+  integrity sha512-1olwK48XK9nXZsyH/FCltvGrQYvXXZuxVitxXXv2GIuRm51aBi1+5KwR4rWM4KeO61sFU+00913WLZTD+AcXEg==
+  dependencies:
+    xlsx "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
+
 nodemailer@6.9.13:
  version "6.9.13"
  resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-6.9.13.tgz#5b292bf1e92645f4852ca872c56a6ba6c4a3d3d6"
@ -3528,6 +3535,10 @@ ws@8.14.2:
  resolved "https://registry.yarnpkg.com/ws/-/ws-8.14.2.tgz#6c249a806eb2db7a20d26d51e7709eab7b2e6c7f"
  integrity sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==

+"xlsx@https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz":
+  version "0.20.2"
+  resolved "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz#0f64eeed3f1a46e64724620c3553f2dbd3cd2d7d"
+
 xml2js@^0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.6.2.tgz#dd0b630083aa09c161e25a4d0901e2b2a929b499"
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx
@ -53,17 +53,17 @@ function ActionMenu({ chatId, forkThread, isEditing, role }) {
        <DotsThreeVertical size={24} weight="bold" />
      </button>
      {open && (
-        <div className="absolute -top-1 left-7 mt-1 border-[1.5px] border-white/40 rounded-lg bg-[#41454B] bg-opacity-100 flex flex-col shadow-[0_4px_14px_rgba(0,0,0,0.25)] text-white z-99 md:z-10">
+        <div className="absolute -top-1 left-7 mt-1 border-[1.5px] border-white/40 rounded-lg bg-theme-action-menu-bg flex flex-col shadow-[0_4px_14px_rgba(0,0,0,0.25)] text-white z-99 md:z-10">
          <button
            onClick={handleFork}
-            className="border-none flex items-center gap-x-2 hover:bg-white/10 py-1.5 px-2 transition-colors duration-200 w-full text-left"
+            className="border-none flex items-center gap-x-2 hover:bg-theme-action-menu-item-hover py-1.5 px-2 transition-colors duration-200 w-full text-left"
          >
            <TreeView size={18} />
            <span className="text-sm">Fork</span>
          </button>
          <button
            onClick={handleDelete}
-            className="border-none flex items-center gap-x-2 hover:bg-white/10 py-1.5 px-2 transition-colors duration-200 w-full text-left"
+            className="border-none flex items-center gap-x-2 hover:bg-theme-action-menu-item-hover py-1.5 px-2 transition-colors duration-200 w-full text-left"
          >
            <Trash size={18} />
            <span className="text-sm">Delete</span>
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@ -5,7 +5,6 @@ import Actions from "./Actions";
 import renderMarkdown from "@/utils/chat/markdown";
 import { userFromStorage } from "@/utils/request";
 import Citations from "../Citation";
-import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 import { v4 } from "uuid";
 import createDOMPurify from "dompurify";
 import { EditMessageForm, useEditMessage } from "./Actions/EditMessage";
@ -43,9 +42,7 @@ const HistoricalMessage = ({
    return (
      <div
        key={uuid}
-        className={`flex justify-center items-end w-full ${
-          role === "user" ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR
-        }`}
+        className={`flex justify-center items-end w-full bg-theme-bg-chat`}
      >
        <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
          <div className="flex gap-x-5">
@ -72,9 +69,7 @@ const HistoricalMessage = ({
    onAnimationEnd={onEndAnimation}
    className={`${
      isDeleted ? "animate-remove" : ""
-      } flex justify-center items-end w-full group ${
-        role === "user" ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR
-      }`}
+    } flex justify-center items-end w-full group bg-theme-bg-chat`}
  >
      <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
        <div className="flex gap-x-5">
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
@ -13,7 +13,8 @@ const PromptReply = ({
  sources = [],
  closed = true,
 }) => {
-  const assistantBackgroundColor = "bg-historical-msg-system";
+  const assistantBackgroundColor = "bg-theme-bg-chat";
+
  if (!reply && sources.length === 0 && !pending && !error) return null;

  if (pending) {
@ -57,11 +58,11 @@ const PromptReply = ({
      key={uuid}
      className={`flex justify-center items-end w-full ${assistantBackgroundColor}`}
    >
-      <div className="py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
+      <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
        <div className="flex gap-x-5">
          <WorkspaceProfileImage workspace={workspace} />
          <span
-            className={`reply flex flex-col gap-y-1 mt-2`}
+            className={`overflow-x-scroll break-words no-scroll`}
            dangerouslySetInnerHTML={{ __html: renderMarkdown(reply) }}
          />
        </div>
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx
@ -17,7 +17,7 @@ export default function AvailableAgentsButton({ showing, setShowAgents }) {
        showing ? "!opacity-100" : ""
      }`}
    >
-      <At className="w-6 h-6 pointer-events-none text-white" />
+      <At className="w-[22px] h-[22px] pointer-events-none text-white" />
      <Tooltip
        id="tooltip-agent-list-btn"
        place="top"
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
@ -25,7 +25,7 @@ export default function AttachItem() {
        }}
        className={`border-none relative flex justify-center items-center opacity-60 hover:opacity-100 cursor-pointer`}
      >
-        <PaperclipHorizontal className="w-6 h-6 pointer-events-none text-white rotate-90 -scale-y-100" />
+        <PaperclipHorizontal className="w-[22px] h-[22px] pointer-events-none text-white rotate-90 -scale-y-100" />
        <Tooltip
          id="attach-item-btn"
          place="top"
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
@ -18,7 +18,7 @@ export default function SlashCommandsButton({ showing, setShowSlashCommand }) {
    >
      <img
        src={SlashCommandIcon}
-        className="w-6 h-6 pointer-events-none"
+        className="w-[20px] h-[20px] pointer-events-none"
        alt="Slash commands button"
      />
      <Tooltip
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx
@ -104,7 +104,7 @@ export default function SpeechToText({ sendCommand }) {
    >
      <Microphone
        weight="fill"
-        className={`w-6 h-6 pointer-events-none text-white overflow-hidden rounded-full ${
+        className={`w-[22px] h-[21px] pointer-events-none text-white overflow-hidden rounded-full ${
          listening ? "animate-pulse-glow" : ""
        }`}
      />
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
@ -21,7 +21,7 @@ export default function TextSizeButton() {
      >
        <TextT
          weight="fill"
-          className="w-6 h-6 pointer-events-none text-white"
+          className="w-[22px] h-[22px] pointer-events-none text-white"
        />
        <Tooltip
          id="tooltip-text-size-btn"
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@ -89,7 +89,7 @@ export default function PromptInput({
  const adjustTextArea = (event) => {
    const element = event.target;
    element.style.height = "auto";
-    element.style.height = `${element.scrollHeight}px`;
+    element.style.height = `${element.scrollHeight + 12}px`;
  };

  const handlePasteEvent = (e) => {
@ -150,9 +150,9 @@ export default function PromptInput({
        className="flex flex-col gap-y-1 rounded-t-lg md:w-3/4 w-full mx-auto max-w-xl items-center"
      >
        <div className="flex items-center rounded-lg md:mb-4">
-          <div className="w-[95vw] md:w-[635px] bg-main-gradient shadow-2xl border border-white/50 rounded-2xl flex flex-col px-4 overflow-hidden">
+          <div className="w-[95vw] md:w-[635px] bg-theme-bg-chat-input shadow-sm rounded-2xl flex flex-col px-4 overflow-hidden">
            <AttachmentManager attachments={attachments} />
-            <div className="flex items-center w-full border-b-2 border-gray-500/50">
+            <div className="flex items-center w-full border-b-2 border-theme-chat-input-border">
              <textarea
                ref={textareaRef}
                onChange={(e) => {
@ -172,7 +172,7 @@ export default function PromptInput({
                  adjustTextArea(e);
                }}
                value={promptInput}
-                className="cursor-text max-h-[50vh] md:max-h-[350px] md:min-h-[40px] mx-2 md:mx-0 py-2 w-full text-[16px] md:text-md text-white bg-transparent placeholder:text-white/60 resize-none active:outline-none focus:outline-none flex-grow"
+                className="cursor-text max-h-[50vh] md:max-h-[350px] md:min-h-[40px] mx-2 md:mx-0 pt-[12px] w-full text-[14px] leading-5 md:text-md text-white bg-transparent placeholder:text-white/60 resize-none active:outline-none focus:outline-none flex-grow"
                placeholder={"Send a message"}
              />
              {buttonDisabled ? (
@ -187,7 +187,7 @@ export default function PromptInput({
                    data-tooltip-content="Send prompt message to workspace"
                    aria-label="Send prompt message to workspace"
                  >
-                    <PaperPlaneRight className="w-7 h-7 my-3" weight="fill" />
+                    <PaperPlaneRight className="w-[21px] h-[24px]" weight="fill" />
                    <span className="sr-only">Send message</span>
                  </button>
                  <Tooltip
--- a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
@ -263,7 +263,7 @@ export default function ChatContainer({ workspace, knownHistory = [] }) {
  return (
    <div
      style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline no-scroll"
+      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll no-scroll"
    >
      {isMobile && <SidebarMobileHeader />}
      <DnDFileUploaderWrapper>
--- a/frontend/src/components/WorkspaceChat/LoadingChat/index.jsx
+++ b/frontend/src/components/WorkspaceChat/LoadingChat/index.jsx
@ -3,12 +3,12 @@ import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";

 export default function LoadingChat() {
-  const highlightColor = "#3D4147";
-  const baseColor = "#2C2F35";
+  const highlightColor = "var(--theme-bg-primary)";
+  const baseColor = "var(--theme-bg-secondary)";
  return (
    <div
-      style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-      className="p-4 transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll"
+      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll no-scroll p-4"
+      style={{ height: "calc(100% - 32px)" }}
    >
      <Skeleton.default
        height="100px"
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -5,9 +5,11 @@
 :root {
  /* Default theme */
  --theme-bg-primary: #0e0f0f;
-  --theme-bg-secondary: rgba(255, 255, 255, 0.05);
+  --theme-bg-secondary: #1B1B1E;
  --theme-bg-sidebar: #0e0f0f;
  --theme-bg-container: #0e0f0f;
+  --theme-bg-chat: #1B1B1E;
+  --theme-bg-chat-input: #27282A;
  --theme-text-primary: #ffffff;
  --theme-text-secondary: rgba(255, 255, 255, 0.6);
  --theme-sidebar-item-default: rgba(255, 255, 255, 0.1);
@ -19,6 +21,9 @@
  --theme-sidebar-footer-icon: rgba(255, 255, 255, 0.1);
  --theme-sidebar-footer-icon-hover: rgba(255, 255, 255, 0.2);
  --theme-sidebar-border: rgba(255, 255, 255, 0.1);
+  --theme-chat-input-border: #525355;
+  --theme-action-menu-bg: #27282A;
+  --theme-action-menu-item-hover: rgba(255, 255, 255, 0.1);
 }

 [data-theme="light"] {
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -52,6 +52,8 @@ export default {
            secondary: 'var(--theme-bg-secondary)',
            sidebar: 'var(--theme-bg-sidebar)',
            container: 'var(--theme-bg-container)',
+            chat: 'var(--theme-bg-chat)',
+            "chat-input": 'var(--theme-bg-chat-input)',
          },
          text: {
            primary: 'var(--theme-text-primary)',
@ -74,6 +76,13 @@ export default {
            },
            border: 'var(--theme-sidebar-border)',
          },
+          "chat-input": {
+            border: 'var(--theme-chat-input-border)',
+          },
+          "action-menu": {
+            bg: 'var(--theme-action-menu-bg)',
+            "item-hover": 'var(--theme-action-menu-item-hover)',
+          },
        },
      },
      backgroundImage: {