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)}

61
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">
Create New Folder <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> Create New Folder
</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 onSubmit={handleCreate}> <div className="p-6">
<div className="p-6 space-y-6 flex h-full w-full"> <form onSubmit={handleCreate}>
<div className="w-full flex flex-col gap-y-4"> <div className="space-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,23 +68,23 @@ 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="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" >
> Cancel
Cancel </button>
</button> <button
<button type="submit"
type="submit" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
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" >
> Create Folder
Create Folder </button>
</button> </div>
</div> </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

44
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>
<button
onClick={hideModal}
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"
>
<X className="text-gray-300 text-lg" />
</button>
</div> </div>
<button
onClick={hideModal}
type="button"
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 size={24} weight="bold" className="text-white" />
</button>
</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>
); );
} }

213
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,122 +62,128 @@ 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>
<form onSubmit={handleUpdate} className="space-y-6"> <div
<div className="flex flex-col md:flex-row items-center justify-center gap-8"> className="h-full w-full overflow-y-auto"
<div className="flex flex-col items-center"> style={{ maxHeight: "calc(100vh - 200px)" }}
<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"> >
<input <form onSubmit={handleUpdate} className="space-y-6">
id="logo-upload" <div className="flex flex-col md:flex-row items-center justify-center gap-8">
type="file" <div className="flex flex-col items-center">
accept="image/*" <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">
className="hidden" <input
onChange={handleFileUpload} id="logo-upload"
/> type="file"
{pfp ? ( accept="image/*"
<img className="hidden"
src={pfp} onChange={handleFileUpload}
alt="User profile picture"
className="w-48 h-48 rounded-full object-cover bg-white"
/> />
) : ( {pfp ? (
<div className="flex flex-col items-center justify-center p-3"> <img
<Plus className="w-8 h-8 text-white/80 m-2" /> src={pfp}
<span className="text-white text-opacity-80 text-sm font-semibold"> alt="User profile picture"
Profile Picture className="w-48 h-48 rounded-full object-cover bg-white"
</span> />
<span className="text-white text-opacity-60 text-xs"> ) : (
800 x 800 <div className="flex flex-col items-center justify-center p-3">
</span> <Plus className="w-8 h-8 text-white/80 m-2" />
</div> <span className="text-white text-opacity-80 text-sm font-semibold">
Profile Picture
</span>
<span className="text-white text-opacity-60 text-xs">
800 x 800
</span>
</div>
)}
</label>
{pfp && (
<button
type="button"
onClick={handleRemovePfp}
className="mt-3 text-white text-opacity-60 text-sm font-medium hover:underline"
>
Remove Profile Picture
</button>
)} )}
</label> </div>
{pfp && ( </div>
<button <div className="flex flex-col gap-y-4 px-6">
type="button" <div>
onClick={handleRemovePfp} <label
className="mt-3 text-white text-opacity-60 text-sm font-medium hover:underline" htmlFor="username"
className="block mb-2 text-sm font-medium text-white"
> >
Remove Profile Picture Username
</button> </label>
)} <input
name="username"
type="text"
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"
minLength={2}
defaultValue={user.username}
required
autoComplete="off"
/>
<p className="mt-2 text-xs text-white/60">
Username must be only contain lowercase letters, numbers,
underscores, and hyphens with no spaces
</p>
</div>
<div>
<label
htmlFor="password"
className="block mb-2 text-sm font-medium text-white"
>
New Password
</label>
<input
name="password"
type="text"
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`}
minLength={8}
/>
<p className="mt-2 text-xs text-white/60">
Password must be at least 8 characters long
</p>
</div>
<LanguagePreference />
</div> </div>
</div> <div className="flex justify-between items-center border-t border-theme-modal-border pt-4 p-6">
<div className="flex flex-col gap-y-4 px-6"> <button
<div> onClick={hideModal}
<label type="button"
htmlFor="username" className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
className="block mb-2 text-sm font-medium text-white"
> >
Username Cancel
</label> </button>
<input <button
name="username" type="submit"
type="text" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
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"
placeholder="User's username"
minLength={2}
defaultValue={user.username}
required
autoComplete="off"
/>
<p className="mt-2 text-xs text-white/60">
Username must be only contain lowercase letters, numbers,
underscores, and hyphens with no spaces
</p>
</div>
<div>
<label
htmlFor="password"
className="block mb-2 text-sm font-medium text-white"
> >
New Password Update Account
</label> </button>
<input
name="password"
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"
placeholder={`${user.username}'s new password`}
minLength={8}
/>
<p className="mt-2 text-xs text-white/60">
Password must be at least 8 characters long
</p>
</div> </div>
<LanguagePreference /> </form>
</div> </div>
<div className="flex justify-between items-center border-t border-gray-500/50 pt-4 p-6">
<button
onClick={hideModal}
type="button"
className="px-4 py-2 rounded-lg text-white bg-transparent hover:bg-stone-900"
>
Cancel
</button>
<button
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"
>
Update Account
</button>
</div>
</form>
</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) {

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

@ -74,172 +74,174 @@ 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">
New SQL Connection <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> New SQL Connection
</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">
Add the connection information for your database below and it <p className="text-sm text-white/60">
will be available for future SQL agent calls. Add the connection information for your database below and it
</p> will be available for future SQL agent calls.
<div className="flex flex-col w-full"> </p>
<div className="border border-red-800 bg-zinc-800 p-4 rounded-lg flex items-center gap-x-2 text-sm text-red-400"> <div className="flex flex-col w-full">
<WarningOctagon size={28} className="shrink-0" /> <div className="border border-red-800 bg-zinc-800 p-4 rounded-lg flex items-center gap-x-2 text-sm text-red-400">
<p> <WarningOctagon size={28} className="shrink-0" />
<b>WARNING:</b> The SQL agent has been <i>instructed</i> to <p>
only perform non-modifying queries. This <b>does not</b>{" "} <b>WARNING:</b> The SQL agent has been <i>instructed</i> to
prevent a hallucination from still deleting data. Only only perform non-modifying queries. This <b>does not</b>{" "}
connect with a user who has <b>READ_ONLY</b> permissions. prevent a hallucination from still deleting data. Only
</p> connect with a user who has <b>READ_ONLY</b> permissions.
</p>
</div>
<label className="block mb-2 text-sm font-medium text-white mt-4">
Select your SQL engine
</label>
<div className="grid md:grid-cols-4 gap-4 grid-cols-2">
<DBEngine
provider="postgresql"
active={engine === "postgresql"}
onClick={() => setEngine("postgresql")}
/>
<DBEngine
provider="mysql"
active={engine === "mysql"}
onClick={() => setEngine("mysql")}
/>
<DBEngine
provider="sql-server"
active={engine === "sql-server"}
onClick={() => setEngine("sql-server")}
/>
</div>
</div> </div>
<label className="text-white text-sm font-semibold block my-4"> <div className="flex flex-col w-full">
Select your SQL engine <label className="block mb-2 text-sm font-medium text-white">
</label> Connection name
<div className="grid md:grid-cols-4 gap-4 grid-cols-2"> </label>
<DBEngine <input
provider="postgresql" type="text"
active={engine === "postgresql"} name="name"
onClick={() => setEngine("postgresql")} 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"
<DBEngine required={true}
provider="mysql" autoComplete="off"
active={engine === "mysql"} spellCheck={false}
onClick={() => setEngine("mysql")}
/>
<DBEngine
provider="sql-server"
active={engine === "sql-server"}
onClick={() => setEngine("sql-server")}
/> />
</div> </div>
</div>
<div className="flex flex-col w-full"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<label className="text-white text-sm font-semibold block mb-3"> <div className="flex flex-col">
Connection name <label className="block mb-2 text-sm font-medium text-white">
</label> Database user
<input </label>
type="text" <input
name="name" type="text"
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" name="username"
placeholder="a unique name to identify this SQL connection" 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"
required={true} placeholder="root"
autoComplete="off" required={true}
spellCheck={false} autoComplete="off"
/> spellCheck={false}
</div> />
</div>
<div className="flex flex-col">
<label className="block mb-2 text-sm font-medium text-white">
Database user password
</label>
<input
type="text"
name="password"
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"
required={true}
autoComplete="off"
spellCheck={false}
/>
</div>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div className="sm:col-span-2">
<label className="block mb-2 text-sm font-medium text-white">
Server endpoint
</label>
<input
type="text"
name="host"
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"
required={true}
autoComplete="off"
spellCheck={false}
/>
</div>
<div>
<label className="block mb-2 text-sm font-medium text-white">
Port
</label>
<input
type="text"
name="port"
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"
required={false}
autoComplete="off"
spellCheck={false}
/>
</div>
</div>
<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
</label> </label>
<input <input
type="text" type="text"
name="username" 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="root" placeholder="the database the agent will interact with"
required={true}
autoComplete="off"
spellCheck={false}
/>
</div>
<div className="flex flex-col">
<label className="text-white text-sm font-semibold block mb-3">
Database user password
</label>
<input
type="text"
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"
placeholder="password123"
required={true} required={true}
autoComplete="off" autoComplete="off"
spellCheck={false} spellCheck={false}
/> />
</div> </div>
<p className="text-white/40 text-sm">
{assembleConnectionString({ engine, ...config })}
</p>
</div> </div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div className="sm:col-span-2">
<label className="text-white text-sm font-semibold block mb-3">
Server endpoint
</label>
<input
type="text"
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"
placeholder="the hostname or endpoint for your database"
required={true}
autoComplete="off"
spellCheck={false}
/>
</div>
<div>
<label className="text-white text-sm font-semibold block mb-3">
Port
</label>
<input
type="text"
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"
placeholder="3306"
required={false}
autoComplete="off"
spellCheck={false}
/>
</div>
</div>
<div className="flex flex-col">
<label className="text-white text-sm font-semibold block mb-3">
Database
</label>
<input
type="text"
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"
placeholder="the database the agent will interact with"
required={true}
autoComplete="off"
spellCheck={false}
/>
</div>
<p className="text-white/40 text-sm">
{assembleConnectionString({ engine, ...config })}
</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 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>

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

@ -58,103 +58,104 @@ 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">
Create new invite <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> Create new invite
</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 onSubmit={handleCreate}> <div className="p-6">
<div className="p-6 space-y-6 flex h-full w-full"> <form onSubmit={handleCreate}>
<div className="w-full flex flex-col gap-y-4"> <div className="space-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
workspaces later post-invite acceptance. workspaces later post-invite acceptance.
</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}
workspace={workspace} workspace={workspace}
selected={selectedWorkspaceIds.includes(workspace.id)} selected={selectedWorkspaceIds.includes(workspace.id)}
toggleSelection={handleWorkspaceSelection} toggleSelection={handleWorkspaceSelection}
/> />
))} ))}
</div>
</div> </div>
</div> </div>
</div>
)}
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
{!invite ? (
<>
<button
onClick={closeModal}
type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
>
Cancel
</button>
<button
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"
>
Create Invite
</button>
</>
) : (
<button
onClick={copyInviteLink}
type="button"
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"
>
{copied ? "Copied Link" : "Copy Invite Link"}
</button>
)} )}
</div>
</form> <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
{!invite ? (
<>
<button
onClick={closeModal}
type="button"
className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
>
Cancel
</button>
<button
type="submit"
className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
>
Create Invite
</button>
</>
) : (
<button
onClick={copyInviteLink}
type="button"
disabled={copied}
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"}
</button>
)}
</div>
</form>
</div>
</div> </div>
</div> </div>
); );

65
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">
Add user to instance <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> Add user to instance
</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 onSubmit={handleCreate}> <div className="p-6">
<div className="p-6 space-y-6 flex h-full w-full"> <form onSubmit={handleCreate}>
<div className="w-full flex flex-col gap-y-4"> <div className="space-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,23 +117,23 @@ 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="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" >
> Cancel
Cancel </button>
</button> <button
<button type="submit"
type="submit" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
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" >
> Add user
Add user </button>
</button> </div>
</div> </form>
</form> </div>
</div> </div>
</div> </div>
); );

65
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">
Edit {user.username} <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> Edit {user.username}
</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 onSubmit={handleUpdate}> <div className="p-6">
<div className="p-6 space-y-6 flex h-full w-full"> <form onSubmit={handleUpdate}>
<div className="w-full flex flex-col gap-y-4"> <div className="space-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,23 +106,23 @@ 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="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" >
> Cancel
Cancel </button>
</button> <button
<button type="submit"
type="submit" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
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" >
> Update user
Update user </button>
</button> </div>
</div> </form>
</form> </div>
</div> </div>
</div> </div>
); );

61
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">
Create new workspace <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> Create new workspace
</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 onSubmit={handleCreate}> <div className="p-6">
<div className="p-6 space-y-6 flex h-full w-full"> <form onSubmit={handleCreate}>
<div className="w-full flex flex-col gap-y-4"> <div className="space-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,23 +58,23 @@ 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="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" >
> Cancel
Cancel </button>
</button> <button
<button type="submit"
type="submit" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
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" >
> Create workspace
Create workspace </button>
</button> </div>
</div> </form>
</form> </div>
</div> </div>
</div> </div>
); );

81
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">
Create new API key <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> Create new API key
</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 onSubmit={handleCreate}> <div className="px-7 py-6">
<div className="p-6 space-y-6 flex h-full w-full"> <form onSubmit={handleCreate}>
<div className="w-full flex flex-col gap-y-4"> <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
{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,36 +77,36 @@ 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
onClick={closeModal}
type="button"
className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
>
Cancel
</button>
<button
type="submit"
className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
>
Create API key
</button>
</>
) : (
<button <button
onClick={closeModal} onClick={copyApiKey}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" disabled={copied}
className="w-full transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
> >
Cancel {copied ? "Copied API key" : "Copy API key"}
</button> </button>
<button )}
type="submit" </div>
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" </form>
> </div>
Create API key
</button>
</>
) : (
<button
onClick={copyApiKey}
type="button"
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"
>
{copied ? "Copied API key" : "Copy API key"}
</button>
)}
</div>
</form>
</div> </div>
</div> </div>
); );

82
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">
New Browser Extension API Key <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> New Browser Extension API Key
</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>
<form onSubmit={handleCreate}> <div className="px-7 py-6">
<div className="p-6 space-y-6 flex h-full w-full"> <form onSubmit={handleCreate}>
<div className="w-full flex flex-col gap-y-4"> <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
{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,46 +83,46 @@ 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
onClick={closeModal}
type="button"
className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
>
Cancel
</button>
<button
type="submit"
className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
>
Create API Key
</button>
</>
) : (
<button <button
onClick={closeModal} onClick={copyApiKey}
type="button" type="button"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300 border-none" disabled={copied}
className="w-full transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm cursor-pointer"
> >
Cancel {copied ? "API Key Copied!" : "Copy API Key"}
</button> </button>
<button )}
type="submit" </div>
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" </form>
> </div>
Create API Key
</button>
</>
) : (
<button
onClick={copyApiKey}
type="button"
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"
>
{copied ? "API Key Copied!" : "Copy API Key"}
</button>
)}
</div>
</form>
</div> </div>
</div> </div>
); );

31
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">
Copy your embed code <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> Copy your embed code
</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 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">
<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>

63
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">
Update embed #{embed.id} <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> Update embed #{embed.id}
</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 onSubmit={handleUpdate}> <div className="px-7 py-6">
<div className="p-6 space-y-6 flex h-auto max-h-[80vh] w-full overflow-y-scroll"> <form onSubmit={handleUpdate}>
<div className="w-full flex flex-col gap-y-6"> <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<WorkspaceSelection defaultValue={embed.workspace.id} /> <WorkspaceSelection defaultValue={embed.workspace.id} />
<ChatModeSelection defaultValue={embed.chat_mode} /> <ChatModeSelection defaultValue={embed.chat_mode} />
<PermittedDomains <PermittedDomains
@ -89,32 +90,32 @@ 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="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" >
> Cancel
Cancel </button>
</button> <button
<button type="submit"
type="submit" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
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" >
> Update embed
Update embed </button>
</button> </div>
</div> </form>
</form> </div>
</div> </div>
</div> </div>
); );

65
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">
Create new embed for workspace <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> Create new embed for workspace
</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 onSubmit={handleCreate}> <div className="px-7 py-6">
<div className="p-6 space-y-6 flex h-auto max-h-[80vh] w-full overflow-y-scroll"> <form onSubmit={handleCreate}>
<div className="w-full flex flex-col gap-y-6"> <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<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,23 +95,23 @@ 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="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300" >
> Cancel
Cancel </button>
</button> <button
<button type="submit"
type="submit" className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
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" >
> Create embed
Create embed </button>
</button> </div>
</div> </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()}

42
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">
Setup {LLMOption.name} <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> Setup {LLMOption.name}
</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">
To use {LLMOption.name} as this workspace's LLM you need to set <p className="text-sm text-white/60">
it up first. To use {LLMOption.name} as this workspace's LLM you need to set
</p> it up first.
<div>{LLMOption.options({ credentialsOnly: true })}</div> </p>
<div>{LLMOption.options({ credentialsOnly: true })}</div>
</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 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>

42
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">
Setup {LLMOption.name} <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
</h3> Setup {LLMOption.name}
</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">
To use {LLMOption.name} as this workspace's LLM you need to set <p className="text-sm text-white/60">
it up first. To use {LLMOption.name} as this workspace's LLM you need to set
</p> it up first.
<div>{LLMOption.options({ credentialsOnly: true })}</div> </p>
<div>{LLMOption.options({ credentialsOnly: true })}</div>
</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 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: {