From ca8bf52cce34ef23d88048096bb4b19605d851ee Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Mon, 27 Nov 2023 13:09:55 -0800
Subject: [PATCH] Bug fixes (#394)
* fix black text for custom messages text
* fix file upload icon being stretched
* center github, docs, and discord icons in sidebar
* fix chat container being cut off on right side and tighter spacing between message
* fix default chat container being cut off on right side
* on create new workspace, take user to the workspace they just created instead of the home page
* add border to chat container and click outside user menu to close
* fix borders around all chat and settings containers to be consistent
* fix padding for default messages
* fix spacing between workspace items in sidebar
* fix margin around right side of chat, default, and settings containers to be the same as the left sidebar
---------
Co-authored-by: timothycarambat <rambat1010@gmail.com>
---
frontend/src/components/ChatBubble/index.jsx | 2 +-
frontend/src/components/DefaultChat/index.jsx | 20 ++++-----
.../UploadFile/FileUploadProgress/index.jsx | 2 +-
.../src/components/Modals/NewWorkspace.jsx | 11 +++--
.../src/components/SettingsSidebar/index.jsx | 4 +-
.../Sidebar/ActiveWorkspaces/index.jsx | 2 +-
frontend/src/components/Sidebar/index.jsx | 8 ++--
frontend/src/components/UserMenu/index.jsx | 45 ++++++++++++++-----
.../ChatHistory/HistoricalMessage/index.jsx | 2 +-
.../ChatHistory/PromptReply/index.jsx | 6 +--
.../WorkspaceChat/ChatContainer/index.jsx | 2 +-
.../WorkspaceChat/LoadingChat/index.jsx | 2 +-
frontend/src/index.css | 2 +-
.../src/pages/Admin/Invitations/index.jsx | 2 +-
frontend/src/pages/Admin/System/index.jsx | 2 +-
frontend/src/pages/Admin/Users/index.jsx | 2 +-
frontend/src/pages/Admin/Workspaces/index.jsx | 2 +-
.../pages/GeneralSettings/ApiKeys/index.jsx | 2 +-
.../GeneralSettings/Appearance/index.jsx | 6 +--
.../src/pages/GeneralSettings/Chats/index.jsx | 2 +-
.../EmbeddingPreference/index.jsx | 4 +-
.../GeneralSettings/ExportImport/index.jsx | 4 +-
.../GeneralSettings/LLMPreference/index.jsx | 4 +-
.../pages/GeneralSettings/Security/index.jsx | 6 +--
.../GeneralSettings/VectorDatabase/index.jsx | 4 +-
25 files changed, 87 insertions(+), 61 deletions(-)
diff --git a/frontend/src/components/ChatBubble/index.jsx b/frontend/src/components/ChatBubble/index.jsx
index 610f9037d..f5e9475e9 100644
--- a/frontend/src/components/ChatBubble/index.jsx
+++ b/frontend/src/components/ChatBubble/index.jsx
@@ -13,7 +13,7 @@ export default function ChatBubble({ message, type, popMsg }) {
return (
<div className={`flex justify-center items-end w-full ${backgroundColor}`}>
<div
- className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+ className={`py-8 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
>
<div className="flex gap-x-5">
<Jazzicon
diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx
index 766d2c34f..081ce1726 100644
--- a/frontend/src/components/DefaultChat/index.jsx
+++ b/frontend/src/components/DefaultChat/index.jsx
@@ -45,7 +45,7 @@ export default function DefaultChatContainer() {
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR} md:mt-0 mt-[40px]`}
>
<div
- className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+ className={`pt-10 pb-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
>
<div className="flex gap-x-5">
<Jazzicon size={36} user={{ uid: "system" }} role={"assistant"} />
@@ -69,7 +69,7 @@ export default function DefaultChatContainer() {
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
>
<div
- className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+ className={`pb-4 pt-2 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
>
<div className="flex gap-x-5">
<Jazzicon size={36} user={{ uid: "system" }} role={"assistant"} />
@@ -92,7 +92,7 @@ export default function DefaultChatContainer() {
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
>
<div
- className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+ className={`pt-2 pb-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
>
<div className="flex gap-x-5">
<Jazzicon size={36} user={{ uid: "system" }} role={"assistant"} />
@@ -126,7 +126,7 @@ export default function DefaultChatContainer() {
className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
>
<div
- className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+ className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
>
<div className="flex gap-x-5">
<Jazzicon
@@ -150,7 +150,7 @@ export default function DefaultChatContainer() {
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
>
<div
- className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+ className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
>
<div className="flex gap-x-5">
<Jazzicon size={36} user={{ uid: "system" }} role={"assistant"} />
@@ -185,7 +185,7 @@ export default function DefaultChatContainer() {
className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
>
<div
- className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+ className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
>
<div className="flex gap-x-5">
<Jazzicon
@@ -210,7 +210,7 @@ export default function DefaultChatContainer() {
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
>
<div
- className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+ className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
>
<div className="flex gap-x-5">
<Jazzicon size={36} user={{ uid: "system" }} role={"assistant"} />
@@ -248,7 +248,7 @@ export default function DefaultChatContainer() {
className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
>
<div
- className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+ className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
>
<div className="flex gap-x-5">
<Jazzicon
@@ -272,7 +272,7 @@ export default function DefaultChatContainer() {
className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
>
<div
- className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+ className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
>
<div className="flex gap-x-5">
<Jazzicon size={36} user={{ uid: "system" }} role={"assistant"} />
@@ -335,7 +335,7 @@ export default function DefaultChatContainer() {
return (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full md:min-w-[82%] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
{fetchedMessages.length === 0
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
index 66d71441c..31cf57943 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
@@ -45,7 +45,7 @@ function FileUploadProgressComponent({
if (rejected) {
return (
<div className="h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40">
- <div className="w-6 h-6">
+ <div className="w-6 h-6 flex-shrink-0">
<XCircle className="w-6 h-6 stroke-white bg-red-500 rounded-full p-1 w-full h-full" />
</div>
<div className="flex flex-col">
diff --git a/frontend/src/components/Modals/NewWorkspace.jsx b/frontend/src/components/Modals/NewWorkspace.jsx
index bba865999..5b8ecb8fc 100644
--- a/frontend/src/components/Modals/NewWorkspace.jsx
+++ b/frontend/src/components/Modals/NewWorkspace.jsx
@@ -1,6 +1,7 @@
import React, { useRef, useState } from "react";
import { X } from "@phosphor-icons/react";
import Workspace from "../../models/workspace";
+import paths from "../../utils/paths";
const noop = () => false;
export default function NewWorkspaceModal({ hideModal = noop }) {
@@ -13,7 +14,9 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
const form = new FormData(formEl.current);
for (var [key, value] of form.entries()) data[key] = value;
const { workspace, message } = await Workspace.new(data);
- if (!!workspace) window.location.reload();
+ if (!!workspace){
+ window.location.href = paths.workspace.chat(workspace.slug);
+ }
setError(message);
};
@@ -26,7 +29,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
<div className="relative w-[500px] max-h-full">
<div className="relative bg-modal-gradient rounded-lg shadow-md border-2 border-accent">
<div className="flex items-start justify-between p-4 border-b rounded-t border-white/10">
- <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+ <h3 className="text-xl font-semibold text-white">
New Workspace
</h3>
<button
@@ -43,7 +46,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
<div>
<label
htmlFor="name"
- className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+ className="block mb-2 text-sm font-medium text-white"
>
Workspace Name
</label>
@@ -58,7 +61,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
/>
</div>
{error && (
- <p className="text-red-600 dark:text-red-400 text-sm">
+ <p className="text-red-400 text-sm">
Error: {error}
</p>
)}
diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx
index 887f8af35..89c71df30 100644
--- a/frontend/src/components/SettingsSidebar/index.jsx
+++ b/frontend/src/components/SettingsSidebar/index.jsx
@@ -167,9 +167,9 @@ export default function SettingsSidebar() {
className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
/>
</a>
- <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
+ {/* <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
<DotsThree className="h-5 w-5 group-hover:stroke-slate-200" />
- </button>
+ </button> */}
</div>
</div>
</div>
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index b32d2b02a..4e423a6dd 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -57,7 +57,7 @@ export default function ActiveWorkspaces() {
href={isActive ? null : paths.workspace.chat(workspace.slug)}
className={`
transition-all duration-[200ms]
- flex flex-grow w-[75%] gap-x-2 py-[9px] px-[12px] rounded-lg text-slate-200 justify-start items-center border
+ flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-lg text-slate-200 justify-start items-center border
hover:bg-workspace-item-selected-gradient hover:border-slate-100 hover:border-opacity-50
${
isActive
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index 95f232d7a..cbee14ae6 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -54,12 +54,12 @@ export default function Sidebar() {
{/* Primary Body */}
<div className="flex-grow flex flex-col">
- <div className="flex flex-col gap-y-4 pb-8 overflow-y-scroll no-scroll">
+ <div className="flex flex-col gap-y-2 pb-8 overflow-y-scroll no-scroll">
<div className="flex gap-x-2 items-center justify-between">
{(!user || user?.role !== "default") && (
<button
onClick={showNewWsModal}
- className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-4 bg-white rounded-lg text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
+ className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-4 mb-2 bg-white rounded-lg text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
>
<Plus className="h-5 w-5" />
<p className="text-sidebar text-sm font-semibold">
@@ -114,9 +114,9 @@ export default function Sidebar() {
className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
/>
</a>
- <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
+ {/* <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
<DotsThree className="h-5 w-5 group-hover:stroke-slate-200" />
- </button>
+ </button> */}
</div>
</div>
</div>
diff --git a/frontend/src/components/UserMenu/index.jsx b/frontend/src/components/UserMenu/index.jsx
index 95537bbbb..deb303fbd 100644
--- a/frontend/src/components/UserMenu/index.jsx
+++ b/frontend/src/components/UserMenu/index.jsx
@@ -1,9 +1,9 @@
-import { useState } from "react";
-import { isMobile } from "react-device-detect";
-import paths from "../../utils/paths";
-import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "../../utils/constants";
-import { Person, SignOut } from "@phosphor-icons/react";
-import { userFromStorage } from "../../utils/request";
+import React, { useState, useEffect, useRef } from 'react';
+import { isMobile } from 'react-device-detect';
+import paths from '../../utils/paths';
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from '../../utils/constants';
+import { Person, SignOut } from '@phosphor-icons/react';
+import { userFromStorage } from '../../utils/request';
export default function UserMenu({ children }) {
if (isMobile) return <>{children}</>;
@@ -20,33 +20,56 @@ function useLoginMode() {
const user = !!window.localStorage.getItem(AUTH_USER);
const token = !!window.localStorage.getItem(AUTH_TOKEN);
- if (user && token) return "multi";
- if (!user && token) return "single";
+ if (user && token) return 'multi';
+ if (!user && token) return 'single';
return null;
}
function userDisplay() {
const user = userFromStorage();
- return user?.username?.slice(0, 2) || "AA";
+ return user?.username?.slice(0, 2) || 'AA';
}
function UserButton() {
const [showMenu, setShowMenu] = useState(false);
const mode = useLoginMode();
+ const menuRef = useRef();
+ const buttonRef = useRef();
+ const handleClose = (event) => {
+ if (
+ menuRef.current &&
+ !menuRef.current.contains(event.target) &&
+ !buttonRef.current.contains(event.target)
+ ) {
+ setShowMenu(false);
+ }
+ };
+
+ useEffect(() => {
+ if (showMenu) {
+ document.addEventListener('mousedown', handleClose);
+ }
+ return () => document.removeEventListener('mousedown', handleClose);
+ }, [showMenu]);
if (mode === null) return null;
+
return (
<div className="absolute top-9 right-10 w-fit h-fit z-99">
<button
+ ref={buttonRef}
onClick={() => setShowMenu(!showMenu)}
type="button"
className="uppercase transition-all duration-300 w-[35px] h-[35px] text-base font-semibold rounded-full flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient justify-center text-white p-2 hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
- {mode === "multi" ? userDisplay() : <Person size={14} />}
+ {mode === 'multi' ? userDisplay() : <Person size={14} />}
</button>
{showMenu && (
- <div className="w-fit rounded-lg absolute top-12 right-0 bg-sidebar p-4 flex items-center-justify-center">
+ <div
+ ref={menuRef}
+ className="w-fit rounded-lg absolute top-12 right-0 bg-sidebar p-4 flex items-center-justify-center"
+ >
<div className="flex flex-col gap-y-2">
<a
href={paths.mailToMintplex()}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
index d80fbec96..6155e7627 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -24,7 +24,7 @@ const HistoricalMessage = forwardRef(
}`}
>
<div
- className={`py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
+ className={`py-8 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col`}
>
<div className="flex gap-x-5">
<Jazzicon
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
index 427da6c36..a65eebd5f 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
@@ -19,7 +19,7 @@ const PromptReply = forwardRef(
ref={ref}
className={`flex justify-center items-end w-full ${assistantBackgroundColor}`}
>
- <div className="py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col">
+ <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col">
<div className="flex gap-x-5">
<Jazzicon
size={36}
@@ -38,7 +38,7 @@ const PromptReply = forwardRef(
<div
className={`flex justify-center items-end w-full ${assistantBackgroundColor}`}
>
- <div className="py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col">
+ <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col">
<div className="flex gap-x-5">
<Jazzicon
size={36}
@@ -64,7 +64,7 @@ const PromptReply = forwardRef(
ref={ref}
className={`flex justify-center items-end w-full ${assistantBackgroundColor}`}
>
- <div className="py-10 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col">
+ <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[800px] flex-col">
<div className="flex gap-x-5">
<Jazzicon
size={36}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
index a0bc1f258..0096aadfe 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
@@ -85,7 +85,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-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full md:min-w-[82%] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col h-full w-full md:mt-0 mt-[40px]">
diff --git a/frontend/src/components/WorkspaceChat/LoadingChat/index.jsx b/frontend/src/components/WorkspaceChat/LoadingChat/index.jsx
index c93aed1d5..b189e0153 100644
--- a/frontend/src/components/WorkspaceChat/LoadingChat/index.jsx
+++ b/frontend/src/components/WorkspaceChat/LoadingChat/index.jsx
@@ -8,7 +8,7 @@ export default function LoadingChat() {
return (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="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"
>
<Skeleton.default
height="100px"
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 937631beb..22affd202 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -378,4 +378,4 @@ dialog::backdrop {
100% {
opacity: 0;
}
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Admin/Invitations/index.jsx b/frontend/src/pages/Admin/Invitations/index.jsx
index c6a94a86d..699fa76e4 100644
--- a/frontend/src/pages/Admin/Invitations/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/index.jsx
@@ -17,7 +17,7 @@ export default function AdminInvites() {
{!isMobile && <Sidebar />}
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
diff --git a/frontend/src/pages/Admin/System/index.jsx b/frontend/src/pages/Admin/System/index.jsx
index d9ea370e7..4f77ba24a 100644
--- a/frontend/src/pages/Admin/System/index.jsx
+++ b/frontend/src/pages/Admin/System/index.jsx
@@ -45,7 +45,7 @@ export default function AdminSystem() {
{!isMobile && <Sidebar />}
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<form
diff --git a/frontend/src/pages/Admin/Users/index.jsx b/frontend/src/pages/Admin/Users/index.jsx
index f43739f25..c1facda61 100644
--- a/frontend/src/pages/Admin/Users/index.jsx
+++ b/frontend/src/pages/Admin/Users/index.jsx
@@ -17,7 +17,7 @@ export default function AdminUsers() {
{!isMobile && <Sidebar />}
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
diff --git a/frontend/src/pages/Admin/Workspaces/index.jsx b/frontend/src/pages/Admin/Workspaces/index.jsx
index c9b9096c3..e2217e4b6 100644
--- a/frontend/src/pages/Admin/Workspaces/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/index.jsx
@@ -17,7 +17,7 @@ export default function AdminWorkspaces() {
{!isMobile && <Sidebar />}
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
index 130c6f25c..66026ed5b 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
@@ -19,7 +19,7 @@ export default function AdminApiKeys() {
{!isMobile && <Sidebar />}
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
index 6964c128c..107e57cae 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
@@ -113,7 +113,7 @@ export default function Appearance() {
{!isMobile && <Sidebar />}
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
@@ -184,7 +184,7 @@ export default function Appearance() {
</div>
<div className="mb-6">
<div className="flex flex-col gap-y-2">
- <h2 className="leading-tight font-medium text-black dark:text-white">
+ <h2 className="leading-tight font-medium text-white">
Custom Messages
</h2>
<p className="text-sm font-base text-white/60">
@@ -238,7 +238,7 @@ export default function Appearance() {
{hasChanges && (
<div className="flex justify-center py-6">
<button
- className="ml-4 cursor-pointer text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
+ className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
onClick={handleMessageSave}
>
Save Messages
diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index 3b2a1e951..fbf041a06 100644
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -37,7 +37,7 @@ export default function WorkspaceChats() {
{!isMobile && <Sidebar />}
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
index 9a53ac826..beff0c29a 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
@@ -83,7 +83,7 @@ export default function GeneralEmbeddingPreference() {
{loading ? (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll animate-pulse"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient p-[18px] h-full overflow-y-scroll animate-pulse border-4 border-accent"
>
<div className="w-full h-full flex justify-center items-center">
<PreLoader />
@@ -92,7 +92,7 @@ export default function GeneralEmbeddingPreference() {
) : (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<form
diff --git a/frontend/src/pages/GeneralSettings/ExportImport/index.jsx b/frontend/src/pages/GeneralSettings/ExportImport/index.jsx
index 95053f47b..bd4c254e7 100644
--- a/frontend/src/pages/GeneralSettings/ExportImport/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ExportImport/index.jsx
@@ -20,7 +20,7 @@ export default function GeneralExportImport() {
{!isMobile && <Sidebar />}
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
@@ -55,7 +55,7 @@ export default function GeneralExportImport() {
{!isMobile && <Sidebar />}
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
index 0e83f655d..b3b1bdf4c 100644
--- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
@@ -62,7 +62,7 @@ export default function GeneralLLMPreference() {
{loading ? (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll animate-pulse"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient p-[18px] h-full overflow-y-scroll animate-pulse border-4 border-accent"
>
<div className="w-full h-full flex justify-center items-center">
<PreLoader />
@@ -71,7 +71,7 @@ export default function GeneralLLMPreference() {
) : (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<form
diff --git a/frontend/src/pages/GeneralSettings/Security/index.jsx b/frontend/src/pages/GeneralSettings/Security/index.jsx
index fbf2dbc84..3183dabfc 100644
--- a/frontend/src/pages/GeneralSettings/Security/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Security/index.jsx
@@ -19,7 +19,7 @@ export default function GeneralSecurity() {
{!isMobile && <Sidebar />}
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<MultiUserMode />
@@ -78,7 +78,7 @@ function MultiUserMode() {
if (loading) {
return (
- <div className="h-1/2 transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] md:min-w-[82%] p-[18px] h-full overflow-y-scroll">
+ <div className="h-1/2 transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] p-[18px] h-full overflow-y-scroll">
<div className="w-full h-full flex justify-center items-center">
<PreLoader />
</div>
@@ -242,7 +242,7 @@ function PasswordProtection() {
if (loading) {
return (
- <div className="h-1/2 transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] md:min-w-[82%] p-[18px] h-full overflow-y-scroll">
+ <div className="h-1/2 transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] p-[18px] h-full overflow-y-scroll">
<div className="w-full h-full flex justify-center items-center">
<PreLoader />
</div>
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index 0d0e6afb6..f8b437439 100644
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
@@ -78,7 +78,7 @@ export default function GeneralVectorDatabase() {
{loading ? (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll animate-pulse"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent animate-pulse"
>
<div className="w-full h-full flex justify-center items-center">
<PreLoader />
@@ -87,7 +87,7 @@ export default function GeneralVectorDatabase() {
) : (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
{isMobile && <SidebarMobileHeader />}
<form
--
GitLab