kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-19 12:40:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

update all modals + normalize styles (#2471)

Browse Source
This commit is contained in:
Sean Hatfield 2024-10-14 18:11:50 -07:00 committed by GitHub
parent 841a83708e
commit 6b4ec84972
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
30 changed files with 734 additions and 709 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/ModalWrapper/index.jsx
View File

@ -17,14 +17,14 @@ export default function ModalWrapper({ children, isOpen, noPortal = false }) {
if (noPortal) { if (noPortal) {
return ( return (
<div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-30"> <div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-99">
{children} {children}
</div> </div>
); );
} }
return createPortal( return createPortal(
<div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-30"> <div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-99">
{children} {children}
</div>, </div>,
document.getElementById("root") document.getElementById("root")

10
frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx
View File

@ -69,7 +69,7 @@ export default function ConfluenceOptions() {
</div> </div>
<select <select
name="isCloud" name="isCloud"
className="bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
required={true} required={true}
autoComplete="off" autoComplete="off"
spellCheck={false} spellCheck={false}
@ -92,7 +92,7 @@ export default function ConfluenceOptions() {
<input <input
type="url" type="url"
name="baseUrl" name="baseUrl"
className="bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="eg: https://example.atlassian.net, http://localhost:8211, etc..." placeholder="eg: https://example.atlassian.net, http://localhost:8211, etc..."
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -112,7 +112,7 @@ export default function ConfluenceOptions() {
<input <input
type="text" type="text"
name="spaceKey" name="spaceKey"
className="bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="eg: ~7120208c08555d52224113949698b933a3bb56" placeholder="eg: ~7120208c08555d52224113949698b933a3bb56"
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -131,7 +131,7 @@ export default function ConfluenceOptions() {
<input <input
type="text" type="text"
name="username" name="username"
className="bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="jdoe@example.com" placeholder="jdoe@example.com"
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -179,7 +179,7 @@ export default function ConfluenceOptions() {
<input <input
type="password" type="password"
name="accessToken" name="accessToken"
className="bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="abcd1234" placeholder="abcd1234"
required={true} required={true}
autoComplete="off" autoComplete="off"

10
frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx
View File

@ -77,7 +77,7 @@ export default function GithubOptions() {
<input <input
type="url" type="url"
name="repo" name="repo"
className="bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="https://github.com/Mintplex-Labs/anything-llm" placeholder="https://github.com/Mintplex-Labs/anything-llm"
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -102,7 +102,7 @@ export default function GithubOptions() {
<input <input
type="text" type="text"
name="accessToken" name="accessToken"
className="bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="github_pat_1234_abcdefg" placeholder="github_pat_1234_abcdefg"
required={false} required={false}
autoComplete="off" autoComplete="off"
@ -135,7 +135,7 @@ export default function GithubOptions() {
classNames={{ classNames={{
tag: "bg-blue-300/10 text-zinc-800", tag: "bg-blue-300/10 text-zinc-800",
input: input:
"flex bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none", "flex bg-theme-bg-secondary text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none",
}} }}
/> />
</div> </div>
@ -198,7 +198,7 @@ function GitHubBranchSelection({ repo, accessToken }) {
<select <select
name="branch" name="branch"
required={true} required={true}
className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5" className="bg-theme-settings-input-bg border-gray-500 text-white focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg block w-full p-2.5"
> >
<option disabled={true} selected={true}> <option disabled={true} selected={true}>
-- loading available branches -- -- loading available branches --
@ -219,7 +219,7 @@ function GitHubBranchSelection({ repo, accessToken }) {
<select <select
name="branch" name="branch"
required={true} required={true}
className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5" className="bg-theme-settings-input-bg border-gray-500 text-white focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg block w-full p-2.5"
> >
{allBranches.map((branch) => { {allBranches.map((branch) => {
return ( return (

14
frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx
View File

@ -24,11 +24,10 @@ export default function GitlabOptions() {
try { try {
setLoading(true); setLoading(true);
showToast( showToast(
`Fetching all files for repo ${repo} - this may take a while.`, "Fetching all files for repo - this may take a while.",
"info", "info",
{ clear: true, autoClose: false } { clear: true, autoClose: false }
); );
const { data, error } = await System.dataConnectors.gitlab.collect({ const { data, error } = await System.dataConnectors.gitlab.collect({
repo: form.get("repo"), repo: form.get("repo"),
accessToken: form.get("accessToken"), accessToken: form.get("accessToken"),
@ -78,14 +77,13 @@ export default function GitlabOptions() {
<input <input
type="url" type="url"
name="repo" name="repo"
className="border-none bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:border-white block w-full p-2.5" className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="https://gitlab.com/gitlab-org/gitlab" placeholder="https://gitlab.com/gitlab-org/gitlab"
required={true} required={true}
autoComplete="off" autoComplete="off"
onChange={(e) => setRepo(e.target.value)} onChange={(e) => setRepo(e.target.value)}
onBlur={() => setSettings({ ...settings, repo })} onBlur={() => setSettings({ ...settings, repo })}
spellCheck={false} spellCheck={false}
rows={2}
/> />
</div> </div>
<div className="flex flex-col pr-10"> <div className="flex flex-col pr-10">
@ -104,7 +102,7 @@ export default function GitlabOptions() {
<input <input
type="text" type="text"
name="accessToken" name="accessToken"
className="border-none bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:border-white block w-full p-2.5" className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="glpat-XXXXXXXXXXXXXXXXXXXX" placeholder="glpat-XXXXXXXXXXXXXXXXXXXX"
required={false} required={false}
autoComplete="off" autoComplete="off"
@ -161,7 +159,7 @@ export default function GitlabOptions() {
classNames={{ classNames={{
tag: "bg-blue-300/10 text-zinc-800", tag: "bg-blue-300/10 text-zinc-800",
input: input:
"flex bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:border-white", "flex bg-theme-bg-secondary text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none",
}} }}
/> />
</div> </div>
@ -224,7 +222,7 @@ function GitLabBranchSelection({ repo, accessToken }) {
<select <select
name="branch" name="branch"
required={true} required={true}
className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5" className="bg-theme-settings-input-bg border-gray-500 text-white focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg block w-full p-2.5"
> >
<option disabled={true} selected={true}> <option disabled={true} selected={true}>
-- loading available branches -- -- loading available branches --
@ -245,7 +243,7 @@ function GitLabBranchSelection({ repo, accessToken }) {
<select <select
name="branch" name="branch"
required={true} required={true}
className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5" className="bg-theme-settings-input-bg border-gray-500 text-white focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg block w-full p-2.5"
> >
{allBranches.map((branch) => { {allBranches.map((branch) => {
return ( return (

6
frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx
View File

@ -64,7 +64,7 @@ export default function WebsiteDepthOptions() {
<input <input
type="url" type="url"
name="url" name="url"
className="border-none bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="https://example.com" placeholder="https://example.com"
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -84,7 +84,7 @@ export default function WebsiteDepthOptions() {
name="depth" name="depth"
min="1" min="1"
max="5" max="5"
className="border-none bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
required={true} required={true}
defaultValue="1" defaultValue="1"
/> />
@ -102,7 +102,7 @@ export default function WebsiteDepthOptions() {
type="number" type="number"
name="maxLinks" name="maxLinks"
min="1" min="1"
className="border-none bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
required={true} required={true}
defaultValue="20" defaultValue="20"
/> />

2
frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx
View File

@ -59,7 +59,7 @@ export default function YoutubeOptions() {
<input <input
type="url" type="url"
name="url" name="url"
className="bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="https://youtube.com/watch?v=abc123" placeholder="https://youtube.com/watch?v=abc123"
required={true} required={true}
autoComplete="off" autoComplete="off"

2
frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx
View File

@ -64,7 +64,7 @@ export default function DataConnectors() {
<input <input
type="text" type="text"
placeholder="Search data connectors" placeholder="Search data connectors"
className="border-none bg-zinc-600 z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white" className="border-none bg-theme-bg-primary z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:outline-primary-button active:outline-primary-button outline-none placeholder:text-theme-settings-input-placeholder text-white"
autoComplete="off" autoComplete="off"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}

29
frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx
View File

@ -29,24 +29,25 @@ export default function NewFolderModal({ closeModal, files, setFiles }) {
}; };
return ( return (
<div className="relative w-full max-w-xl max-h-full"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-lg shadow"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Create New Folder Create New Folder
</h3> </h3>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div className="p-6">
<form onSubmit={handleCreate}> <form onSubmit={handleCreate}>
<div className="p-6 space-y-6 flex h-full w-full"> <div className="space-y-4">
<div className="w-full flex flex-col gap-y-4">
<div> <div>
<label <label
htmlFor="folderName" htmlFor="folderName"
@ -57,7 +58,7 @@ export default function NewFolderModal({ closeModal, files, setFiles }) {
<input <input
name="folderName" name="folderName"
type="text" type="text"
className="bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="Enter folder name" placeholder="Enter folder name"
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -67,18 +68,17 @@ export default function NewFolderModal({ closeModal, files, setFiles }) {
</div> </div>
{error && <p className="text-red-400 text-sm">Error: {error}</p>} {error && <p className="text-red-400 text-sm">Error: {error}</p>}
</div> </div>
</div> <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
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" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Create Folder Create Folder
</button> </button>
@ -86,5 +86,6 @@ export default function NewFolderModal({ closeModal, files, setFiles }) {
</form> </form>
</div> </div>
</div> </div>
</div>
); );
} }

6
frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
View File

@ -197,7 +197,7 @@ function Directory({
type="search" type="search"
placeholder="Search for document" placeholder="Search for document"
onChange={handleSearch} onChange={handleSearch}
className="search-input bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg pl-9 pr-2.5 py-2 w-[250px] h-[32px]" className="search-input bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg pl-9 pr-2.5 py-2 w-[250px] h-[32px]"
/> />
<MagnifyingGlass <MagnifyingGlass
size={14} size={14}
@ -216,8 +216,8 @@ function Directory({
</button> </button>
</div> </div>
<div className="relative w-[560px] h-[310px] bg-zinc-900 rounded-2xl overflow-hidden"> <div className="relative w-[560px] h-[310px] bg-theme-settings-input-bg rounded-2xl overflow-hidden border border-theme-modal-border">
<div className="absolute top-0 left-0 right-0 z-10 rounded-t-2xl text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-lg bg-zinc-900"> <div className="absolute top-0 left-0 right-0 z-10 rounded-t-2xl text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-lg bg-theme-settings-input-bg">
<p className="col-span-6">Name</p> <p className="col-span-6">Name</p>
</div> </div>

6
frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx
View File

@ -78,9 +78,9 @@ export default function UploadFile({
return ( return (
<div> <div>
<div <div
className={`w-[560px] border-2 border-dashed rounded-2xl bg-zinc-900/50 p-3 ${ className={`w-[560px] border-2 border-dashed rounded-2xl bg-theme-bg-primary p-3 ${
ready ? "cursor-pointer" : "cursor-not-allowed" ready ? "cursor-pointer" : "cursor-not-allowed"
} hover:bg-zinc-900/90`} } hover:bg-theme-bg-secondary`}
{...getRootProps()} {...getRootProps()}
> >
<input {...getInputProps()} /> <input {...getInputProps()} />
@ -133,7 +133,7 @@ export default function UploadFile({
disabled={fetchingUrl} disabled={fetchingUrl}
name="link" name="link"
type="url" type="url"
className="disabled:bg-zinc-600 disabled:text-slate-300 bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-3/4 p-2.5" className="disabled:bg-theme-settings-input-bg disabled:text-theme-settings-input-placeholder bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-3/4 p-2.5"
placeholder={"https://example.com"} placeholder={"https://example.com"}
autoComplete="off" autoComplete="off"
/> />

8
frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
View File

@ -91,8 +91,8 @@ function WorkspaceDirectory({
{workspace.name} {workspace.name}
</h3> </h3>
</div> </div>
<div className="relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5"> <div className="relative w-[560px] h-[445px] bg-theme-settings-input-bg rounded-2xl mt-5 border border-theme-modal-border">
<div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-zinc-900 sticky top-0 z-10 rounded-t-2xl"> <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-theme-settings-input-bg sticky top-0 z-10 rounded-t-2xl">
<div className="col-span-10 flex items-center gap-x-[4px]"> <div className="col-span-10 flex items-center gap-x-[4px]">
<div className="shrink-0 w-3 h-3" /> <div className="shrink-0 w-3 h-3" />
<p className="ml-[7px]">Name</p> <p className="ml-[7px]">Name</p>
@ -124,8 +124,8 @@ function WorkspaceDirectory({
highlightWorkspace ? "border-4 border-cyan-300/80 z-[999]" : "" highlightWorkspace ? "border-4 border-cyan-300/80 z-[999]" : ""
}`} }`}
/> />
<div className="relative w-full h-full bg-zinc-900 rounded-2xl overflow-hidden"> <div className="relative w-full h-full bg-theme-settings-input-bg rounded-2xl overflow-hidden border border-theme-modal-border">
<div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-zinc-900 sticky top-0 z-10"> <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-theme-settings-input-bg sticky top-0 z-10">
<div className="col-span-10 flex items-center gap-x-[4px]"> <div className="col-span-10 flex items-center gap-x-[4px]">
{!hasChanges && {!hasChanges &&
files.items.some((folder) => folder.items.length > 0) ? ( files.items.some((folder) => folder.items.length > 0) ? (

22
frontend/src/components/Modals/ManageWorkspace/index.jsx
View File

@ -68,14 +68,14 @@ const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
<div className="w-screen h-screen fixed top-0 left-0 flex justify-center items-center z-99"> <div className="w-screen h-screen fixed top-0 left-0 flex justify-center items-center z-99">
<div className="backdrop h-full w-full absolute top-0 z-10" /> <div className="backdrop h-full w-full absolute top-0 z-10" />
<div className="absolute max-h-full w-fit transition duration-300 z-20 md:overflow-y-auto py-10"> <div className="absolute max-h-full w-fit transition duration-300 z-20 md:overflow-y-auto py-10">
<div className="relative bg-main-gradient rounded-[12px] shadow border-2 border-slate-300/10"> <div className="relative bg-theme-bg-secondary rounded-[12px] shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-2 rounded-t border-gray-500/50 relative"> <div className="flex items-start justify-between p-2 rounded-t border-theme-modal-border relative">
<button <button
onClick={hideModal} onClick={hideModal}
type="button" type="button"
className="z-50 text-gray-400 bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center hover:border-white/60 bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="z-29 text-white bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
> >
<X className="text-gray-300 text-lg" /> <X size={20} weight="bold" className="text-gray-300" />
</button> </button>
</div> </div>
@ -102,23 +102,23 @@ export default memo(ManageWorkspace);
const ModalTabSwitcher = ({ selectedTab, setSelectedTab }) => { const ModalTabSwitcher = ({ selectedTab, setSelectedTab }) => {
return ( return (
<div className="w-full flex justify-center z-10 relative"> <div className="w-full flex justify-center z-10 relative">
<div className="gap-x-2 flex justify-center -mt-[68px] mb-10 bg-sidebar-button p-1 rounded-xl shadow border-2 border-slate-300/10 w-fit"> <div className="gap-x-2 flex justify-center -mt-[68px] mb-10 bg-theme-bg-secondary p-1 rounded-xl shadow border-2 border-theme-modal-border w-fit">
<button <button
onClick={() => setSelectedTab("documents")} onClick={() => setSelectedTab("documents")}
className={`px-4 py-2 rounded-[8px] font-semibold text-white hover:bg-switch-selected hover:bg-opacity-60 ${ className={`px-4 py-2 rounded-[8px] font-semibold text-white hover:bg-theme-modal-border hover:bg-opacity-60 ${
selectedTab === "documents" selectedTab === "documents"
? "bg-switch-selected shadow-md font-bold" ? "bg-theme-modal-border shadow-md font-bold"
: "bg-sidebar-button text-white/20 font-medium hover:text-white" : "bg-theme-bg-secondary text-white/20 font-medium hover:text-white"
}`} }`}
> >
Documents Documents
</button> </button>
<button <button
onClick={() => setSelectedTab("dataConnectors")} onClick={() => setSelectedTab("dataConnectors")}
className={`px-4 py-2 rounded-[8px] font-semibold text-white hover:bg-switch-selected hover:bg-opacity-60 ${ className={`px-4 py-2 rounded-[8px] font-semibold text-white hover:bg-theme-modal-border hover:bg-opacity-60 ${
selectedTab === "dataConnectors" selectedTab === "dataConnectors"
? "bg-switch-selected shadow-md font-bold" ? "bg-theme-modal-border shadow-md font-bold"
: "bg-sidebar-button text-white/20 font-medium hover:text-white" : "bg-theme-bg-secondary text-white/20 font-medium hover:text-white"
}`} }`}
> >
Data Connectors Data Connectors

34
frontend/src/components/Modals/NewWorkspace.jsx
View File

@ -3,6 +3,7 @@ import { X } from "@phosphor-icons/react";
import Workspace from "@/models/workspace"; import Workspace from "@/models/workspace";
import paths from "@/utils/paths"; import paths from "@/utils/paths";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import ModalWrapper from "@/components/ModalWrapper";
const noop = () => false; const noop = () => false;
export default function NewWorkspaceModal({ hideModal = noop }) { export default function NewWorkspaceModal({ hideModal = noop }) {
@ -23,27 +24,28 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
}; };
return ( return (
<div className="fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] h-full bg-black bg-opacity-50 flex items-center justify-center"> <ModalWrapper isOpen={true}>
<div <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
className="flex fixed top-0 left-0 right-0 w-full h-full" <div className="relative p-6 border-b rounded-t border-theme-modal-border">
onClick={hideModal} <div className="w-full flex gap-x-2 items-center">
/> <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
<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-white">
{t("new-workspace.title")} {t("new-workspace.title")}
</h3> </h3>
</div>
<button <button
onClick={hideModal} onClick={hideModal}
type="button" type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div
className="h-full w-full overflow-y-auto"
style={{ maxHeight: "calc(100vh - 200px)" }}
>
<form ref={formEl} onSubmit={handleCreate}> <form ref={formEl} onSubmit={handleCreate}>
<div className="p-6 space-y-6 flex h-full w-full"> <div className="py-7 px-9 space-y-2 flex-col">
<div className="w-full flex flex-col gap-y-4"> <div className="w-full flex flex-col gap-y-4">
<div> <div>
<label <label
@ -56,7 +58,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
name="name" name="name"
type="text" type="text"
id="name" id="name"
className="bg-zinc-900 w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder={t("new-workspace.placeholder")} placeholder={t("new-workspace.placeholder")}
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -67,10 +69,10 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
)} )}
</div> </div>
</div> </div>
<div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-white/10 rounded-b"> <div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
<button <button
type="submit" type="submit"
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" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Save Save
</button> </button>
@ -78,7 +80,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
</form> </form>
</div> </div>
</div> </div>
</div> </ModalWrapper>
); );
} }

39
frontend/src/components/UserMenu/AccountModal/index.jsx
View File

@ -4,6 +4,7 @@ import System from "@/models/system";
import { AUTH_USER } from "@/utils/constants"; import { AUTH_USER } from "@/utils/constants";
import showToast from "@/utils/toast"; import showToast from "@/utils/toast";
import { Plus, X } from "@phosphor-icons/react"; import { Plus, X } from "@phosphor-icons/react";
import ModalWrapper from "@/components/ModalWrapper";
export default function AccountModal({ user, hideModal }) { export default function AccountModal({ user, hideModal }) {
const { pfp, setPfp } = usePfp(); const { pfp, setPfp } = usePfp();
@ -61,25 +62,30 @@ export default function AccountModal({ user, hideModal }) {
}; };
return ( return (
<div <ModalWrapper isOpen={true}>
id="account-modal" <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center" <div className="relative p-6 border-b rounded-t border-theme-modal-border">
> <div className="w-full flex gap-x-2 items-center">
<div className="relative w-[500px] max-w-2xl max-h-full bg-main-gradient rounded-lg shadow"> <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> Edit Account
<h3 className="text-xl font-semibold text-white">Edit Account</h3> </h3>
</div>
<button <button
onClick={hideModal} onClick={hideModal}
type="button" type="button"
className="text-gray-400 bg-transparent hover:border-white/60 rounded-lg p-1.5 ml-auto inline-flex items-center hover:bg-menu-item-selected-gradient hover:border-slate-100 border-transparent" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
> >
<X className="text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div
className="h-full w-full overflow-y-auto"
style={{ maxHeight: "calc(100vh - 200px)" }}
>
<form onSubmit={handleUpdate} className="space-y-6"> <form onSubmit={handleUpdate} className="space-y-6">
<div className="flex flex-col md:flex-row items-center justify-center gap-8"> <div className="flex flex-col md:flex-row items-center justify-center gap-8">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<label className="w-48 h-48 flex flex-col items-center justify-center bg-zinc-900/50 transition-all duration-300 rounded-full mt-8 border-2 border-dashed border-white border-opacity-60 cursor-pointer hover:opacity-60"> <label className="w-48 h-48 flex flex-col items-center justify-center bg-theme-settings-input-bg/50 transition-all duration-300 rounded-full mt-8 border-2 border-dashed border-white border-opacity-60 cursor-pointer hover:opacity-60">
<input <input
id="logo-upload" id="logo-upload"
type="file" type="file"
@ -127,7 +133,7 @@ export default function AccountModal({ user, hideModal }) {
<input <input
name="username" name="username"
type="text" type="text"
className="bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" className="bg-theme-settings-input-bg placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="User's username" placeholder="User's username"
minLength={2} minLength={2}
defaultValue={user.username} defaultValue={user.username}
@ -149,7 +155,7 @@ export default function AccountModal({ user, hideModal }) {
<input <input
name="password" name="password"
type="text" type="text"
className="bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" className="bg-theme-settings-input-bg placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder={`${user.username}'s new password`} placeholder={`${user.username}'s new password`}
minLength={8} minLength={8}
/> />
@ -159,17 +165,17 @@ export default function AccountModal({ user, hideModal }) {
</div> </div>
<LanguagePreference /> <LanguagePreference />
</div> </div>
<div className="flex justify-between items-center border-t border-gray-500/50 pt-4 p-6"> <div className="flex justify-between items-center border-t border-theme-modal-border pt-4 p-6">
<button <button
onClick={hideModal} onClick={hideModal}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white bg-transparent hover:bg-stone-900" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
className="px-4 py-2 rounded-lg text-white bg-transparent border border-slate-200 hover:bg-slate-200 hover:text-slate-800" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Update Account Update Account
</button> </button>
@ -177,6 +183,7 @@ export default function AccountModal({ user, hideModal }) {
</form> </form>
</div> </div>
</div> </div>
</ModalWrapper>
); );
} }
@ -198,7 +205,7 @@ function LanguagePreference() {
</label> </label>
<select <select
name="userLang" name="userLang"
className="bg-zinc-900 w-fit mt-2 px-4 border-gray-500 text-white text-sm rounded-lg block py-2" className="bg-theme-settings-input-bg w-fit mt-2 px-4 focus:outline-primary-button active:outline-primary-button outline-none text-white text-sm rounded-lg block py-2"
defaultValue={currentLanguage || "en"} defaultValue={currentLanguage || "en"}
onChange={(e) => changeLanguage(e.target.value)} onChange={(e) => changeLanguage(e.target.value)}
> >

6
frontend/src/components/UserMenu/UserButton/index.jsx
View File

@ -54,12 +54,12 @@ export default function UserButton() {
if (mode === null) return null; if (mode === null) return null;
return ( return (
<div className="absolute top-3 right-4 md:top-9 md:right-10 w-fit h-fit z-99"> <div className="absolute top-3 right-4 md:top-9 md:right-10 w-fit h-fit z-40">
<button <button
ref={buttonRef} ref={buttonRef}
onClick={() => setShowMenu(!showMenu)} onClick={() => setShowMenu(!showMenu)}
type="button" 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" className="uppercase transition-all duration-300 w-[35px] h-[35px] text-base font-semibold rounded-full flex items-center bg-theme-bg-chat-input 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> </button>
@ -67,7 +67,7 @@ export default function UserButton() {
{showMenu && ( {showMenu && (
<div <div
ref={menuRef} ref={menuRef}
className="w-fit rounded-lg absolute top-12 right-0 bg-sidebar p-4 flex items-center-justify-center" className="w-fit rounded-lg absolute top-12 right-0 bg-theme-bg-chat-input p-2 flex items-center-justify-center"
> >
<div className="flex flex-col gap-y-2"> <div className="flex flex-col gap-y-2">
{mode === "multi" && !!user && ( {mode === "multi" && !!user && (

10
frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx
View File

@ -126,8 +126,8 @@ function CitationDetailModal({ source, onClose }) {
return ( return (
<ModalWrapper isOpen={source}> <ModalWrapper isOpen={source}>
<div className="w-full max-w-2xl bg-main-gradient rounded-lg shadow border border-white/10 overflow-hidden"> <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
<div className="relative p-6 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<div className="w-full flex gap-x-2 items-center"> <div className="w-full flex gap-x-2 items-center">
{isUrl ? ( {isUrl ? (
<a <a
@ -155,16 +155,16 @@ function CitationDetailModal({ source, onClose }) {
<button <button
onClick={onClose} onClick={onClose}
type="button" type="button"
className="absolute top-6 right-6 transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div <div
className="h-full w-full overflow-y-auto" className="h-full w-full overflow-y-auto"
style={{ maxHeight: "calc(100vh - 200px)" }} style={{ maxHeight: "calc(100vh - 200px)" }}
> >
<div className="p-6 space-y-2 flex-col"> <div className="py-7 px-9 space-y-2 flex-col">
{[...Array(3)].map((_, idx) => ( {[...Array(3)].map((_, idx) => (
<SkeletonLine key={idx} /> <SkeletonLine key={idx} />
))} ))}

6
frontend/src/index.css
View File

@ -25,10 +25,10 @@
--theme-action-menu-bg: #27282a; --theme-action-menu-bg: #27282a;
--theme-action-menu-item-hover: rgba(255, 255, 255, 0.1); --theme-action-menu-item-hover: rgba(255, 255, 255, 0.1);
--theme-settings-input-bg: #0e0f0f; --theme-settings-input-bg: #0e0f0f;
--theme-settings-input-placeholder: rgba(255, 255, 255, 0.5); --theme-settings-input-placeholder: rgba(255, 255, 255, 0.5);
--theme-settings-input-active: rgb(255 255 255 / 0.2); --theme-settings-input-active: rgb(255 255 255 / 0.2);
--theme-settings-input-text: #ffffff; --theme-settings-input-text: #ffffff;
--theme-modal-border: #3f3f42;
} }
[data-theme="light"] { [data-theme="light"] {
@ -663,11 +663,11 @@ dialog::backdrop {
} }
.file-row:nth-child(even) { .file-row:nth-child(even) {
@apply bg-dark-highlight; @apply bg-theme-bg-primary;
} }
.file-row:nth-child(odd) { .file-row:nth-child(odd) {
@apply bg-[#2C2C2C]; @apply bg-theme-bg-secondary;
} }
.file-row.selected:nth-child(even) { .file-row.selected:nth-child(even) {

54
frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
View File

@ -74,29 +74,30 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
// to the parent container form so we don't have nested forms. // to the parent container form so we don't have nested forms.
return createPortal( return createPortal(
<ModalWrapper isOpen={isOpen}> <ModalWrapper isOpen={isOpen}>
<div className="relative w-full md:w-1/3 max-w-2xl max-h-full md:mt-8"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-xl shadow-[0_4px_14px_rgba(0,0,0,0.25)] max-h-[85vh] overflow-y-scroll no-scroll"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
New SQL Connection New SQL Connection
</h3> </h3>
</div>
<button <button
onClick={handleClose} onClick={handleClose}
type="button" type="button"
className="border-none transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<form <form
id="sql-connection-form" id="sql-connection-form"
onSubmit={handleUpdate} onSubmit={handleUpdate}
onChange={onFormChange} onChange={onFormChange}
> >
<div className="py-[17px] px-[20px] flex flex-col gap-y-6"> <div className="px-7 py-6">
<p className="text-sm text-white"> <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<p className="text-sm text-white/60">
Add the connection information for your database below and it Add the connection information for your database below and it
will be available for future SQL agent calls. will be available for future SQL agent calls.
</p> </p>
@ -111,7 +112,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
</p> </p>
</div> </div>
<label className="text-white text-sm font-semibold block my-4"> <label className="block mb-2 text-sm font-medium text-white mt-4">
Select your SQL engine Select your SQL engine
</label> </label>
<div className="grid md:grid-cols-4 gap-4 grid-cols-2"> <div className="grid md:grid-cols-4 gap-4 grid-cols-2">
@ -134,13 +135,13 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
</div> </div>
<div className="flex flex-col w-full"> <div className="flex flex-col w-full">
<label className="text-white text-sm font-semibold block mb-3"> <label className="block mb-2 text-sm font-medium text-white">
Connection name Connection name
</label> </label>
<input <input
type="text" type="text"
name="name" name="name"
className="border-none bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="a unique name to identify this SQL connection" placeholder="a unique name to identify this SQL connection"
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -150,13 +151,13 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div className="flex flex-col"> <div className="flex flex-col">
<label className="text-white text-sm font-semibold block mb-3"> <label className="block mb-2 text-sm font-medium text-white">
Database user Database user
</label> </label>
<input <input
type="text" type="text"
name="username" name="username"
className="border-none bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="root" placeholder="root"
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -164,13 +165,13 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
/> />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<label className="text-white text-sm font-semibold block mb-3"> <label className="block mb-2 text-sm font-medium text-white">
Database user password Database user password
</label> </label>
<input <input
type="text" type="text"
name="password" name="password"
className="border-none bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="password123" placeholder="password123"
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -181,13 +182,13 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div className="sm:col-span-2"> <div className="sm:col-span-2">
<label className="text-white text-sm font-semibold block mb-3"> <label className="block mb-2 text-sm font-medium text-white">
Server endpoint Server endpoint
</label> </label>
<input <input
type="text" type="text"
name="host" name="host"
className="border-none bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="the hostname or endpoint for your database" placeholder="the hostname or endpoint for your database"
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -195,13 +196,13 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
/> />
</div> </div>
<div> <div>
<label className="text-white text-sm font-semibold block mb-3"> <label className="block mb-2 text-sm font-medium text-white">
Port Port
</label> </label>
<input <input
type="text" type="text"
name="port" name="port"
className="border-none bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="3306" placeholder="3306"
required={false} required={false}
autoComplete="off" autoComplete="off"
@ -211,13 +212,13 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<label className="text-white text-sm font-semibold block mb-3"> <label className="block mb-2 text-sm font-medium text-white">
Database Database
</label> </label>
<input <input
type="text" type="text"
name="database" name="database"
className="border-none bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="the database the agent will interact with" placeholder="the database the agent will interact with"
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -228,18 +229,19 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
{assembleConnectionString({ engine, ...config })} {assembleConnectionString({ engine, ...config })}
</p> </p>
</div> </div>
<div className="flex w-full justify-between items-center p-3 space-x-2 border-t rounded-b border-gray-500/50"> </div>
<div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border px-7 pb-6">
<button <button
type="button" type="button"
onClick={handleClose} onClick={handleClose}
className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-white hover:bg-transparent border-2 border-transparent hover:border-white hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
form="sql-connection-form" form="sql-connection-form"
className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-primary-button hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Save connection Save connection
</button> </button>

41
frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx
View File

@ -58,53 +58,53 @@ export default function NewInviteModal({ closeModal }) {
}, []); }, []);
return ( return (
<div className="relative w-[500px] max-w-2xl max-h-full overflow-auto"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-lg shadow"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Create new invite Create new invite
</h3> </h3>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div className="p-6">
<form onSubmit={handleCreate}> <form onSubmit={handleCreate}>
<div className="p-6 space-y-6 flex h-full w-full"> <div className="space-y-4">
<div className="w-full flex flex-col gap-y-4">
{error && <p className="text-red-400 text-sm">Error: {error}</p>} {error && <p className="text-red-400 text-sm">Error: {error}</p>}
{invite && ( {invite && (
<input <input
type="url" type="url"
defaultValue={`${window.location.origin}/accept-invite/${invite.code}`} defaultValue={`${window.location.origin}/accept-invite/${invite.code}`}
disabled={true} disabled={true}
className="rounded-lg px-4 py-2 text-white bg-zinc-900 border border-gray-500/50" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
/> />
)} )}
<p className="text-white text-xs md:text-sm"> <p className="text-white text-opacity-60 text-xs md:text-sm">
After creation you will be able to copy the invite and send it After creation you will be able to copy the invite and send it
to a new user where they can create an account as the{" "} to a new user where they can create an account as the{" "}
<b>default</b> role and automatically be added to workspaces <b>default</b> role and automatically be added to workspaces
selected. selected.
</p> </p>
</div> </div>
</div>
{workspaces.length > 0 && !invite && ( {workspaces.length > 0 && !invite && (
<div className="p-6 flex w-full justify-between"> <div className="mt-6">
<div className="w-full"> <div className="w-full">
<div className="flex flex-col gap-y-1 mb-2"> <div className="flex flex-col gap-y-1 mb-2">
<label <label
htmlFor="workspaces" htmlFor="workspaces"
className="text-sm font-medium text-white" className="block text-sm font-medium text-white"
> >
Auto-add invitee to workspaces Auto-add invitee to workspaces
</label> </label>
<p className="text-white/60 text-xs"> <p className="text-white text-opacity-60 text-xs">
You can optionally automatically assign the user to the You can optionally automatically assign the user to the
workspaces below by selecting them. By default, the user workspaces below by selecting them. By default, the user
will not have any workspaces visible. You can assign will not have any workspaces visible. You can assign
@ -112,7 +112,7 @@ export default function NewInviteModal({ closeModal }) {
</p> </p>
</div> </div>
<div className="flex flex-col gap-y-2"> <div className="flex flex-col gap-y-2 mt-2">
{workspaces.map((workspace) => ( {workspaces.map((workspace) => (
<WorkspaceOption <WorkspaceOption
key={workspace.id} key={workspace.id}
@ -126,19 +126,19 @@ export default function NewInviteModal({ closeModal }) {
</div> </div>
)} )}
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50"> <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
{!invite ? ( {!invite ? (
<> <>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
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" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Create Invite Create Invite
</button> </button>
@ -148,7 +148,7 @@ export default function NewInviteModal({ closeModal }) {
onClick={copyInviteLink} onClick={copyInviteLink}
type="button" type="button"
disabled={copied} disabled={copied}
className="w-full 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 text-center justify-center" className="w-full transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
{copied ? "Copied Link" : "Copy Invite Link"} {copied ? "Copied Link" : "Copy Invite Link"}
</button> </button>
@ -157,6 +157,7 @@ export default function NewInviteModal({ closeModal }) {
</form> </form>
</div> </div>
</div> </div>
</div>
); );
} }

33
frontend/src/pages/Admin/Users/NewUserModal/index.jsx
View File

@ -22,24 +22,25 @@ export default function NewUserModal({ closeModal }) {
const user = userFromStorage(); const user = userFromStorage();
return ( return (
<div className="relative w-full max-w-2xl max-h-full"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-lg shadow"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Add user to instance Add user to instance
</h3> </h3>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div className="p-6">
<form onSubmit={handleCreate}> <form onSubmit={handleCreate}>
<div className="p-6 space-y-6 flex h-full w-full"> <div className="space-y-4">
<div className="w-full flex flex-col gap-y-4">
<div> <div>
<label <label
htmlFor="username" htmlFor="username"
@ -50,7 +51,7 @@ export default function NewUserModal({ closeModal }) {
<input <input
name="username" name="username"
type="text" type="text"
className="bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="User's username" placeholder="User's username"
minLength={2} minLength={2}
required={true} required={true}
@ -78,7 +79,7 @@ export default function NewUserModal({ closeModal }) {
<input <input
name="password" name="password"
type="text" type="text"
className="bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="User's initial password" placeholder="User's initial password"
required={true} required={true}
autoComplete="off" autoComplete="off"
@ -100,7 +101,7 @@ export default function NewUserModal({ closeModal }) {
required={true} required={true}
defaultValue={"default"} defaultValue={"default"}
onChange={(e) => setRole(e.target.value)} onChange={(e) => setRole(e.target.value)}
className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white border-gray-500 focus:ring-blue-500 focus:border-blue-500 w-full" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
> >
<option value="default">Default</option> <option value="default">Default</option>
<option value="manager">Manager</option> <option value="manager">Manager</option>
@ -116,18 +117,17 @@ export default function NewUserModal({ closeModal }) {
login to get access. login to get access.
</p> </p>
</div> </div>
</div> <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
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" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Add user Add user
</button> </button>
@ -135,5 +135,6 @@ export default function NewUserModal({ closeModal }) {
</form> </form>
</div> </div>
</div> </div>
</div>
); );
} }

33
frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx
View File

@ -22,24 +22,25 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
}; };
return ( return (
<div className="relative w-[500px] max-w-2xl max-h-full"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-lg shadow"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Edit {user.username} Edit {user.username}
</h3> </h3>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div className="p-6">
<form onSubmit={handleUpdate}> <form onSubmit={handleUpdate}>
<div className="p-6 space-y-6 flex h-full w-full"> <div className="space-y-4">
<div className="w-full flex flex-col gap-y-4">
<div> <div>
<label <label
htmlFor="username" htmlFor="username"
@ -50,7 +51,7 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
<input <input
name="username" name="username"
type="text" type="text"
className="bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="User's username" placeholder="User's username"
defaultValue={user.username} defaultValue={user.username}
minLength={2} minLength={2}
@ -72,7 +73,7 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
<input <input
name="password" name="password"
type="text" type="text"
className="bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder={`${user.username}'s new password`} placeholder={`${user.username}'s new password`}
autoComplete="off" autoComplete="off"
minLength={8} minLength={8}
@ -93,7 +94,7 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
required={true} required={true}
defaultValue={user.role} defaultValue={user.role}
onChange={(e) => setRole(e.target.value)} onChange={(e) => setRole(e.target.value)}
className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white border-gray-500 focus:ring-blue-500 focus:border-blue-500 w-full" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
> >
<option value="default">Default</option> <option value="default">Default</option>
<option value="manager">Manager</option> <option value="manager">Manager</option>
@ -105,18 +106,17 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
</div> </div>
{error && <p className="text-red-400 text-sm">Error: {error}</p>} {error && <p className="text-red-400 text-sm">Error: {error}</p>}
</div> </div>
</div> <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
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" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Update user Update user
</button> </button>
@ -124,5 +124,6 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
</form> </form>
</div> </div>
</div> </div>
</div>
); );
} }

29
frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx
View File

@ -16,24 +16,25 @@ export default function NewWorkspaceModal({ closeModal }) {
}; };
return ( return (
<div className="relative w-[500px] max-w-2xl max-h-full"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-lg shadow"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-600"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Create new workspace Create new workspace
</h3> </h3>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div className="p-6">
<form onSubmit={handleCreate}> <form onSubmit={handleCreate}>
<div className="p-6 space-y-6 flex h-full w-full"> <div className="space-y-4">
<div className="w-full flex flex-col gap-y-4">
<div> <div>
<label <label
htmlFor="name" htmlFor="name"
@ -44,7 +45,7 @@ export default function NewWorkspaceModal({ closeModal }) {
<input <input
name="name" name="name"
type="text" type="text"
className="bg-zinc-900 placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="My workspace" placeholder="My workspace"
minLength={4} minLength={4}
required={true} required={true}
@ -57,18 +58,17 @@ export default function NewWorkspaceModal({ closeModal }) {
it. You can add users after it has been created. it. You can add users after it has been created.
</p> </p>
</div> </div>
</div> <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-600">
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
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" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Create workspace Create workspace
</button> </button>
@ -76,5 +76,6 @@ export default function NewWorkspaceModal({ closeModal }) {
</form> </form>
</div> </div>
</div> </div>
</div>
); );
} }

33
frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx
View File

@ -36,34 +36,35 @@ export default function NewApiKeyModal({ closeModal }) {
}, [copied]); }, [copied]);
return ( return (
<div className="relative w-[500px] max-w-2xl max-h-full"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-lg shadow"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Create new API key Create new API key
</h3> </h3>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div className="px-7 py-6">
<form onSubmit={handleCreate}> <form onSubmit={handleCreate}>
<div className="p-6 space-y-6 flex h-full w-full"> <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<div className="w-full flex flex-col gap-y-4">
{error && <p className="text-red-400 text-sm">Error: {error}</p>} {error && <p className="text-red-400 text-sm">Error: {error}</p>}
{apiKey && ( {apiKey && (
<input <input
type="text" type="text"
defaultValue={`${apiKey.secret}`} defaultValue={`${apiKey.secret}`}
disabled={true} disabled={true}
className="rounded-lg px-4 py-2 text-white bg-zinc-900 border border-gray-500/50" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
/> />
)} )}
<p className="text-white text-xs md:text-sm"> <p className="text-white text-opacity-60 text-xs md:text-sm">
Once created the API key can be used to programmatically access Once created the API key can be used to programmatically access
and configure this AnythingLLM instance. and configure this AnythingLLM instance.
</p> </p>
@ -76,20 +77,19 @@ export default function NewApiKeyModal({ closeModal }) {
Read the API documentation &rarr; Read the API documentation &rarr;
</a> </a>
</div> </div>
</div> <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
{!apiKey ? ( {!apiKey ? (
<> <>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
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" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Create API key Create API key
</button> </button>
@ -99,7 +99,7 @@ export default function NewApiKeyModal({ closeModal }) {
onClick={copyApiKey} onClick={copyApiKey}
type="button" type="button"
disabled={copied} disabled={copied}
className="w-full 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 text-center justify-center" className="w-full transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
{copied ? "Copied API key" : "Copy API key"} {copied ? "Copied API key" : "Copy API key"}
</button> </button>
@ -108,5 +108,6 @@ export default function NewApiKeyModal({ closeModal }) {
</form> </form>
</div> </div>
</div> </div>
</div>
); );
} }

34
frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/NewBrowserExtensionApiKeyModal/index.jsx
View File

@ -48,30 +48,32 @@ export default function NewBrowserExtensionApiKeyModal({
}, [copied]); }, [copied]);
return ( return (
<div className="relative w-[500px] max-w-2xl max-h-full"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-lg shadow"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
New Browser Extension API Key New Browser Extension API Key
</h3> </h3>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border border-none cursor-pointer" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div className="px-7 py-6">
<form onSubmit={handleCreate}> <form onSubmit={handleCreate}>
<div className="p-6 space-y-6 flex h-full w-full"> <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<div className="w-full flex flex-col gap-y-4">
{error && <p className="text-red-400 text-sm">Error: {error}</p>} {error && <p className="text-red-400 text-sm">Error: {error}</p>}
{apiKey && ( {apiKey && (
<input <input
type="text" type="text"
defaultValue={apiKey} defaultValue={apiKey}
disabled={true} disabled={true}
className="rounded-lg px-4 py-2 text-white bg-zinc-900 border border-gray-500/50 border-none" className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg block w-full p-2.5"
/> />
)} )}
{isMultiUser && ( {isMultiUser && (
@ -81,30 +83,29 @@ export default function NewBrowserExtensionApiKeyModal({
share it cautiously. share it cautiously.
</p> </p>
)} )}
<p className="text-white text-xs md:text-sm"> <p className="text-white text-opacity-60 text-xs md:text-sm">
After clicking "Create API Key", AnythingLLM will attempt to After clicking "Create API Key", AnythingLLM will attempt to
connect to your browser extension automatically. connect to your browser extension automatically.
</p> </p>
<p className="text-white text-xs md:text-sm"> <p className="text-white text-opacity-60 text-xs md:text-sm">
If you see "Connected to AnythingLLM" in the extension, the If you see "Connected to AnythingLLM" in the extension, the
connection was successful. If not, please copy the connection connection was successful. If not, please copy the connection
string and paste it into the extension manually. string and paste it into the extension manually.
</p> </p>
</div> </div>
</div> <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
{!apiKey ? ( {!apiKey ? (
<> <>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300 border-none" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
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 border-none" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Create API Key Create API Key
</button> </button>
@ -114,7 +115,7 @@ export default function NewBrowserExtensionApiKeyModal({
onClick={copyApiKey} onClick={copyApiKey}
type="button" type="button"
disabled={copied} disabled={copied}
className="w-full 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 text-center justify-center border-none cursor-pointer" className="w-full transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm cursor-pointer"
> >
{copied ? "API Key Copied!" : "Copy API Key"} {copied ? "API Key Copied!" : "Copy API Key"}
</button> </button>
@ -123,5 +124,6 @@ export default function NewBrowserExtensionApiKeyModal({
</form> </form>
</div> </div>
</div> </div>
</div>
); );
} }

25
frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx
View File

@ -6,32 +6,31 @@ import "highlight.js/styles/github-dark-dimmed.min.css";
export default function CodeSnippetModal({ embed, closeModal }) { export default function CodeSnippetModal({ embed, closeModal }) {
return ( return (
<div className="relative max-w-2xl max-h-full"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-lg shadow"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Copy your embed code Copy your embed code
</h3> </h3>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div> <div className="px-7 py-6">
<div className="p-6 space-y-6 flex h-auto max-h-[80vh] w-full overflow-y-scroll"> <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<div className="w-full flex flex-col gap-y-6">
<ScriptTag embed={embed} /> <ScriptTag embed={embed} />
</div> </div>
</div> <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Close Close
</button> </button>

31
frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/EditEmbedModal/index.jsx
View File

@ -30,24 +30,25 @@ export default function EditEmbedModal({ embed, closeModal }) {
}; };
return ( return (
<div className="relative max-w-2xl max-h-full"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-lg shadow"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Update embed #{embed.id} Update embed #{embed.id}
</h3> </h3>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div className="px-7 py-6">
<form onSubmit={handleUpdate}> <form onSubmit={handleUpdate}>
<div className="p-6 space-y-6 flex h-auto max-h-[80vh] w-full overflow-y-scroll"> <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<div className="w-full flex flex-col gap-y-6">
<WorkspaceSelection defaultValue={embed.workspace.id} /> <WorkspaceSelection defaultValue={embed.workspace.id} />
<ChatModeSelection defaultValue={embed.chat_mode} /> <ChatModeSelection defaultValue={embed.chat_mode} />
<PermittedDomains <PermittedDomains
@ -89,27 +90,26 @@ export default function EditEmbedModal({ embed, closeModal }) {
/> />
{error && <p className="text-red-400 text-sm">Error: {error}</p>} {error && <p className="text-red-400 text-sm">Error: {error}</p>}
<p className="text-white text-xs md:text-sm pb-8"> <p className="text-white text-opacity-60 text-xs md:text-sm">
After creating an embed you will be provided a link that you can After creating an embed you will be provided a link that you can
publish on your website with a simple publish on your website with a simple
<code className="bg-stone-800 text-white mx-1 px-1 rounded-sm"> <code className="bg-theme-settings-input-bg text-white mx-1 px-1 rounded-sm">
&lt;script&gt; &lt;script&gt;
</code>{" "} </code>{" "}
tag. tag.
</p> </p>
</div> </div>
</div> <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
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" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Update embed Update embed
</button> </button>
@ -117,5 +117,6 @@ export default function EditEmbedModal({ embed, closeModal }) {
</form> </form>
</div> </div>
</div> </div>
</div>
); );
} }

33
frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx
View File

@ -37,24 +37,25 @@ export default function NewEmbedModal({ closeModal }) {
}; };
return ( return (
<div className="relative w-full max-w-2xl max-h-full"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-lg shadow"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Create new embed for workspace Create new embed for workspace
</h3> </h3>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<div className="px-7 py-6">
<form onSubmit={handleCreate}> <form onSubmit={handleCreate}>
<div className="p-6 space-y-6 flex h-auto max-h-[80vh] w-full overflow-y-scroll"> <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<div className="w-full flex flex-col gap-y-6">
<WorkspaceSelection /> <WorkspaceSelection />
<ChatModeSelection /> <ChatModeSelection />
<PermittedDomains /> <PermittedDomains />
@ -85,7 +86,7 @@ export default function NewEmbedModal({ closeModal }) {
/> />
{error && <p className="text-red-400 text-sm">Error: {error}</p>} {error && <p className="text-red-400 text-sm">Error: {error}</p>}
<p className="text-white text-xs md:text-sm pb-8"> <p className="text-white text-opacity-60 text-xs md:text-sm">
After creating an embed you will be provided a link that you can After creating an embed you will be provided a link that you can
publish on your website with a simple publish on your website with a simple
<code className="bg-stone-800 text-white mx-1 px-1 rounded-sm"> <code className="bg-stone-800 text-white mx-1 px-1 rounded-sm">
@ -94,18 +95,17 @@ export default function NewEmbedModal({ closeModal }) {
tag. tag.
</p> </p>
</div> </div>
</div> <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
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" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Create embed Create embed
</button> </button>
@ -113,6 +113,7 @@ export default function NewEmbedModal({ closeModal }) {
</form> </form>
</div> </div>
</div> </div>
</div>
); );
} }
@ -144,7 +145,7 @@ export const WorkspaceSelection = ({ defaultValue = null }) => {
name="workspace_id" name="workspace_id"
required={true} required={true}
defaultValue={defaultValue} defaultValue={defaultValue}
className="min-w-[15rem] rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white focus:ring-blue-500 focus:border-blue-500" className="min-w-[15rem] rounded-lg bg-theme-settings-input-bg px-4 py-2 text-sm text-white focus:ring-blue-500 focus:border-blue-500"
> >
{workspaces.map((workspace) => { {workspaces.map((workspace) => {
return ( return (
@ -313,7 +314,7 @@ export const NumberInput = ({ name, title, hint, defaultValue = 0 }) => {
<input <input
type="number" type="number"
name={name} name={name}
className="bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-[15rem] p-2.5" className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-[15rem] p-2.5"
min={0} min={0}
defaultValue={defaultValue} defaultValue={defaultValue}
onScroll={(e) => e.target.blur()} onScroll={(e) => e.target.blur()}

30
frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
View File

@ -55,7 +55,7 @@ export default function WorkspaceLLM({
/> />
<div className="flex flex-col"> <div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div> <div className="text-sm font-semibold text-white">{name}</div>
<div className="mt-1 text-xs text-description">{description}</div> <div className="mt-1 text-xs text-white/60">{description}</div>
</div> </div>
</div> </div>
</div> </div>
@ -102,42 +102,44 @@ function SetupProvider({
// to the parent container form so we don't have nested forms. // to the parent container form so we don't have nested forms.
return createPortal( return createPortal(
<ModalWrapper isOpen={isOpen}> <ModalWrapper isOpen={isOpen}>
<div className="relative w-fit max-w-1/2 max-h-full"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-xl shadow-[0_4px_14px_rgba(0,0,0,0.25)]"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Setup {LLMOption.name} Setup {LLMOption.name}
</h3> </h3>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="border-none transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<form id="provider-form" onSubmit={handleUpdate}> <form id="provider-form" onSubmit={handleUpdate}>
<div className="py-[17px] px-[20px] flex flex-col gap-y-6"> <div className="px-7 py-6">
<p className="text-sm text-white"> <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<p className="text-sm text-white/60">
To use {LLMOption.name} as this workspace's LLM you need to set To use {LLMOption.name} as this workspace's LLM you need to set
it up first. it up first.
</p> </p>
<div>{LLMOption.options({ credentialsOnly: true })}</div> <div>{LLMOption.options({ credentialsOnly: true })}</div>
</div> </div>
<div className="flex w-full justify-between items-center p-3 space-x-2 border-t rounded-b border-gray-500/50"> </div>
<div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border px-7 pb-6">
<button <button
type="button" type="button"
onClick={closeModal} onClick={closeModal}
className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-white hover:bg-transparent border-2 border-transparent hover:border-white hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
form="provider-form" form="provider-form"
className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-primary-button hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Save {LLMOption.name} settings Save {LLMOption.name} settings
</button> </button>

30
frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
View File

@ -55,7 +55,7 @@ export default function WorkspaceLLM({
/> />
<div className="flex flex-col"> <div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div> <div className="text-sm font-semibold text-white">{name}</div>
<div className="mt-1 text-xs text-description">{description}</div> <div className="mt-1 text-xs text-white/60">{description}</div>
</div> </div>
</div> </div>
</div> </div>
@ -102,42 +102,44 @@ function SetupProvider({
// to the parent container form so we don't have nested forms. // to the parent container form so we don't have nested forms.
return createPortal( return createPortal(
<ModalWrapper isOpen={isOpen}> <ModalWrapper isOpen={isOpen}>
<div className="relative w-fit max-w-1/2 max-h-full"> <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-main-gradient rounded-xl shadow-[0_4px_14px_rgba(0,0,0,0.25)]"> <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<h3 className="text-xl font-semibold text-white"> <div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Setup {LLMOption.name} Setup {LLMOption.name}
</h3> </h3>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
type="button" type="button"
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border" className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
data-modal-hide="staticModal"
> >
<X className="text-gray-300 text-lg" /> <X size={24} weight="bold" className="text-white" />
</button> </button>
</div> </div>
<form id="provider-form" onSubmit={handleUpdate}> <form id="provider-form" onSubmit={handleUpdate}>
<div className="py-[17px] px-[20px] flex flex-col gap-y-6"> <div className="px-7 py-6">
<p className="text-sm text-white"> <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<p className="text-sm text-white/60">
To use {LLMOption.name} as this workspace's LLM you need to set To use {LLMOption.name} as this workspace's LLM you need to set
it up first. it up first.
</p> </p>
<div>{LLMOption.options({ credentialsOnly: true })}</div> <div>{LLMOption.options({ credentialsOnly: true })}</div>
</div> </div>
<div className="flex w-full justify-between items-center p-3 space-x-2 border-t rounded-b border-gray-500/50"> </div>
<div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border px-7 pb-6">
<button <button
type="button" type="button"
onClick={closeModal} onClick={closeModal}
className="text-xs px-2 py-1 font-semibold rounded-lg bg-white hover:bg-transparent border-2 border-transparent hover:border-white hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
form="provider-form" form="provider-form"
className="text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-primary-button hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Save {LLMOption.name} settings Save {LLMOption.name} settings
</button> </button>

3
frontend/tailwind.config.js
View File

@ -91,6 +91,9 @@ export default {
text: 'var(--theme-settings-input-text)', text: 'var(--theme-settings-input-text)',
} }
}, },
modal: {
border: 'var(--theme-modal-border)',
}
}, },
}, },
backgroundImage: { backgroundImage: {