LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 08:33:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

(chore:tailwindcss) via upgrade tool

Browse Source
This commit is contained in:
ManishMadan2882
2025-06-22 18:31:26 +05:30
parent e6352dd691
commit 4702dec933
42 changed files with 1246 additions and 1384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1479
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
frontend/package.json
View File

@@ -42,6 +42,7 @@
"tailwind-merge": "^3.3.1"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.1.10",
"@types/mermaid": "^9.1.0",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.0.0",
@@ -49,7 +50,6 @@
"@typescript-eslint/eslint-plugin": "^5.51.0",
"@typescript-eslint/parser": "^5.62.0",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.13",
"eslint": "^8.57.1",
"eslint-config-prettier": "^10.1.5",
"eslint-config-standard-with-typescript": "^34.0.0",
@@ -63,8 +63,8 @@
"lint-staged": "^15.3.0",
"postcss": "^8.4.49",
"prettier": "^3.5.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"tailwindcss": "^3.4.17",
"prettier-plugin-tailwindcss": "^0.6.13",
"tailwindcss": "^4.1.10",
"typescript": "^5.8.3",
"vite": "^6.3.5",
"vite-plugin-svgr": "^4.3.0"

3
frontend/postcss.config.cjs
View File

@@ -1,6 +1,5 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'@tailwindcss/postcss': {},
},
}

BIN
frontend/signal-desktop-keyring.gpg
View File

Binary file not shown.

8
frontend/src/Hero.tsx
View File

@@ -19,9 +19,9 @@ export default function Hero({
}>;
return (
<div className="flex h-full w-full flex-col items-center justify-between text-black-1000 dark:text-bright-gray">
<div className="text-black-1000 dark:text-bright-gray flex h-full w-full flex-col items-center justify-between">
{/* Header Section */}
<div className="flex flex-grow flex-col items-center justify-center pt-8 md:pt-0">
<div className="flex grow flex-col items-center justify-center pt-8 md:pt-0">
<div className="mb-4 flex items-center">
<span className="text-4xl font-semibold">DocsGPT</span>
<img className="mb-1 inline w-14" src={DocsGPT3} alt="docsgpt" />
@@ -38,9 +38,9 @@ export default function Hero({
<button
key={key}
onClick={() => handleQuestion({ question: demo.query })}
className={`w-full rounded-[66px] border border-dark-gray bg-transparent px-6 py-[14px] text-left text-just-black transition-colors hover:bg-cultured dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green ${key >= 2 ? 'hidden md:block' : ''} // Show only 2 buttons on mobile`}
className={`border-dark-gray text-just-black hover:bg-cultured dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green w-full rounded-[66px] border bg-transparent px-6 py-[14px] text-left transition-colors ${key >= 2 ? 'hidden md:block' : ''} // Show only 2 buttons on mobile`}
>
<p className="mb-2 font-semibold text-black-1000 dark:text-bright-gray">
<p className="text-black-1000 dark:text-bright-gray mb-2 font-semibold">
{demo.header}
</p>
<span className="line-clamp-2 text-gray-700 opacity-60 dark:text-gray-300">

44
frontend/src/Navigation.tsx
View File

@@ -293,7 +293,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
return (
<>
{!navOpen && (
<div className="duration-25 absolute left-3 top-3 z-20 hidden transition-all lg:block">
<div className="absolute top-3 left-3 z-20 hidden transition-all duration-25 lg:block">
<div className="flex items-center gap-3">
<button
onClick={() => {
@@ -321,7 +321,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
/>
</button>
)}
<div className="text-[20px] font-medium text-[#949494]">
<div className="text-gray-4000 text-[20px] font-medium">
DocsGPT
</div>
</div>
@@ -330,8 +330,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
<div
ref={navRef}
className={`${
!navOpen && '-ml-96 md:-ml-[18rem]'
} duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-b-0 border-r-[1px] bg-lotion transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
!navOpen && '-ml-96 md:-ml-72'
} bg-lotion dark:border-r-purple-taupe dark:bg-chinese-black fixed top-0 z-20 flex h-full w-72 flex-col border-r border-b-0 transition-all duration-20 dark:text-white`}
>
<div
className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
@@ -375,7 +375,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
className={({ isActive }) =>
`${
isActive ? 'bg-transparent' : ''
} group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-transparent dark:border-purple-taupe dark:text-white`
} group border-silver hover:border-rainy-gray dark:border-purple-taupe sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border p-3 hover:bg-transparent dark:text-white`
}
>
<img
@@ -383,16 +383,16 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
alt="Create new chat"
className="opacity-80 group-hover:opacity-100"
/>
<p className="text-sm text-dove-gray group-hover:text-neutral-600 dark:text-chinese-silver dark:group-hover:text-bright-gray">
<p className="text-dove-gray dark:text-chinese-silver dark:group-hover:text-bright-gray text-sm group-hover:text-neutral-600">
{t('newChat')}
</p>
</NavLink>
<div
id="conversationsMainDiv"
className="mb-auto h-[78vh] overflow-y-auto overflow-x-hidden dark:text-white"
className="mb-auto h-[78vh] overflow-x-hidden overflow-y-auto dark:text-white"
>
{conversations?.loading && !isDeletingConversation && (
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
<img
src={isDarkTheme ? SpinnerDark : Spinner}
className="animate-spin cursor-pointer bg-transparent"
@@ -403,14 +403,14 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
{recentAgents?.length > 0 ? (
<div>
<div className="mx-4 my-auto mt-2 flex h-6 items-center">
<p className="ml-4 mt-1 text-sm font-semibold">Agents</p>
<p className="mt-1 ml-4 text-sm font-semibold">Agents</p>
</div>
<div className="agents-container">
<div>
{recentAgents.map((agent, idx) => (
<div
key={idx}
className={`group mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center justify-between rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal ${
className={`group hover:bg-bright-gray dark:hover:bg-dark-charcoal mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center justify-between rounded-3xl pl-4 ${
agent.id === selectedAgent?.id && !conversationId
? 'bg-bright-gray dark:bg-dark-charcoal'
: ''
@@ -429,7 +429,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
className="h-6 w-6 rounded-full object-contain"
/>
</div>
<p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-6 text-eerie-black dark:text-bright-gray">
<p className="text-eerie-black dark:text-bright-gray overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
{agent.name}
</p>
</div>
@@ -453,7 +453,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
))}
</div>
<div
className="mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
className="hover:bg-bright-gray dark:hover:bg-dark-charcoal mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4"
onClick={() => {
dispatch(setSelectedAgent(null));
if (isMobile || isTablet) {
@@ -469,7 +469,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
className="h-[18px] w-[18px]"
/>
</div>
<p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-6 text-eerie-black dark:text-bright-gray">
<p className="text-eerie-black dark:text-bright-gray overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
{t('manageAgents')}
</p>
</div>
@@ -477,7 +477,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
</div>
) : (
<div
className="mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
className="hover:bg-bright-gray dark:hover:bg-dark-charcoal mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4"
onClick={() => {
if (isMobile || isTablet) {
setNavOpen(false);
@@ -493,7 +493,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
className="h-[18px] w-[18px]"
/>
</div>
<p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-6 text-eerie-black dark:text-bright-gray">
<p className="text-eerie-black dark:text-bright-gray overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
{t('manageAgents')}
</p>
</div>
@@ -501,7 +501,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
{conversations?.data && conversations.data.length > 0 ? (
<div className="mt-7">
<div className="mx-4 my-auto mt-2 flex h-6 items-center justify-between gap-4 rounded-3xl">
<p className="ml-4 mt-1 text-sm font-semibold">{t('chats')}</p>
<p className="mt-1 ml-4 text-sm font-semibold">{t('chats')}</p>
</div>
<div className="conversations-container">
{conversations.data?.map((conversation) => (
@@ -526,8 +526,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
<></>
)}
</div>
<div className="flex h-auto flex-col justify-end text-eerie-black dark:text-white">
<div className="flex flex-col gap-2 border-b-[1px] py-2 dark:border-b-purple-taupe">
<div className="text-eerie-black flex h-auto flex-col justify-end dark:text-white">
<div className="dark:border-b-purple-taupe flex flex-col gap-2 border-b py-2">
<NavLink
onClick={() => {
if (isMobile || isTablet) {
@@ -547,12 +547,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
alt="Settings"
className="w- ml-2 filter dark:invert"
/>
<p className="my-auto text-sm text-eerie-black dark:text-white">
<p className="text-eerie-black my-auto text-sm dark:text-white">
{t('settings.label')}
</p>
</NavLink>
</div>
<div className="flex flex-col justify-end text-eerie-black dark:text-white">
<div className="text-eerie-black flex flex-col justify-end dark:text-white">
<div className="flex items-center justify-between py-1">
<Help />
@@ -601,7 +601,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
</div>
</div>
</div>
<div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black lg:hidden">
<div className="dark:border-b-purple-taupe dark:bg-chinese-black sticky z-10 h-16 w-full border-b-2 bg-gray-50 lg:hidden">
<div className="ml-6 flex h-full items-center gap-6">
<button
className="h-6 w-6 lg:hidden"
@@ -613,7 +613,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
className="w-7 filter dark:invert"
/>
</button>
<div className="text-[20px] font-medium text-[#949494]">DocsGPT</div>
<div className="text-gray-4000 text-[20px] font-medium">DocsGPT</div>
</div>
</div>
<DeleteConvModal

8
frontend/src/agents/AgentCard.tsx
View File

@@ -54,7 +54,7 @@ export default function AgentCard({
return (
<div
className={`relative flex h-44 w-48 flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] hover:dark:bg-[#383838]/80 ${
className={`relative flex h-44 w-48 flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] dark:hover:bg-[#383838]/80 ${
agent.status === 'published' ? 'cursor-pointer' : ''
}`}
onClick={handleCardClick}
@@ -65,7 +65,7 @@ export default function AgentCard({
e.stopPropagation();
setIsMenuOpen(true);
}}
className="absolute right-4 top-4 z-10 cursor-pointer"
className="absolute top-4 right-4 z-10 cursor-pointer"
>
<img src={ThreeDots} alt="options" className="h-[19px] w-[19px]" />
{menuOptions && (
@@ -96,11 +96,11 @@ export default function AgentCard({
<div className="mt-2">
<p
title={agent.name}
className="truncate px-1 text-[13px] font-semibold capitalize leading-relaxed text-[#020617] dark:text-[#E0E0E0]"
className="truncate px-1 text-[13px] leading-relaxed font-semibold text-[#020617] capitalize dark:text-[#E0E0E0]"
>
{agent.name}
</p>
<p className="mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed text-[#64748B] dark:text-sonic-silver-light">
<p className="dark:text-sonic-silver-light mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed text-[#64748B]">
{agent.description}
</p>
</div>

4
frontend/src/agents/AgentLogs.tsx
View File

@@ -44,12 +44,12 @@ export default function AgentLogs() {
>
<img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
</button>
<p className="mt-px text-sm font-semibold text-eerie-black dark:text-bright-gray">
<p className="text-eerie-black dark:text-bright-gray mt-px text-sm font-semibold">
Back to all agents
</p>
</div>
<div className="mt-5 flex w-full flex-wrap items-center justify-between gap-2 px-4">
<h1 className="m-0 text-[40px] font-bold text-[#212121] dark:text-white">
<h1 className="text-eerie-black m-0 text-[40px] font-bold dark:text-white">
Agent Logs
</h1>
</div>

38
frontend/src/agents/NewAgent.tsx
View File

@@ -295,24 +295,24 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
>
<img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
</button>
<p className="mt-px text-sm font-semibold text-eerie-black dark:text-bright-gray">
<p className="text-eerie-black dark:text-bright-gray mt-px text-sm font-semibold">
Back to all agents
</p>
</div>
<div className="mt-5 flex w-full flex-wrap items-center justify-between gap-2 px-4">
<h1 className="m-0 text-[40px] font-bold text-[#212121] dark:text-white">
<h1 className="text-eerie-black m-0 text-[40px] font-bold dark:text-white">
{modeConfig[effectiveMode].heading}
</h1>
<div className="flex flex-wrap items-center gap-1">
<button
className="mr-4 rounded-3xl py-2 text-sm font-medium text-purple-30 dark:bg-transparent dark:text-light-gray"
className="text-purple-30 dark:text-light-gray mr-4 rounded-3xl py-2 text-sm font-medium dark:bg-transparent"
onClick={handleCancel}
>
Cancel
</button>
{modeConfig[effectiveMode].showDelete && agent.id && (
<button
className="group flex items-center gap-2 rounded-3xl border border-solid border-red-2000 px-5 py-2 text-sm font-medium text-red-2000 transition-colors hover:bg-red-2000 hover:text-white"
className="group border-red-2000 text-red-2000 hover:bg-red-2000 flex items-center gap-2 rounded-3xl border border-solid px-5 py-2 text-sm font-medium transition-colors hover:text-white"
onClick={() => setDeleteConfirmation('ACTIVE')}
>
<span className="block h-4 w-4 bg-[url('/src/assets/red-trash.svg')] bg-contain bg-center bg-no-repeat transition-all group-hover:bg-[url('/src/assets/white-trash.svg')]" />
@@ -321,7 +321,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
)}
{modeConfig[effectiveMode].showSaveDraft && (
<button
className="hover:bg-vi</button>olets-are-blue rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
className="hover:bg-vi</button>olets-are-blue border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue rounded-3xl border border-solid px-5 py-2 text-sm font-medium transition-colors hover:text-white"
onClick={handleSaveDraft}
>
Save Draft
@@ -329,7 +329,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
)}
{modeConfig[effectiveMode].showAccessDetails && (
<button
className="group flex items-center gap-2 rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
className="group border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue flex items-center gap-2 rounded-3xl border border-solid px-5 py-2 text-sm font-medium transition-colors hover:text-white"
onClick={() => navigate(`/agents/logs/${agent.id}`)}
>
<span className="block h-5 w-5 bg-[url('/src/assets/monitoring-purple.svg')] bg-contain bg-center bg-no-repeat transition-all group-hover:bg-[url('/src/assets/monitoring-white.svg')]" />
@@ -338,7 +338,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
)}
{modeConfig[effectiveMode].showAccessDetails && (
<button
className="hover:bg-vi</button>olets-are-blue rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
className="hover:bg-vi</button>olets-are-blue border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue rounded-3xl border border-solid px-5 py-2 text-sm font-medium transition-colors hover:text-white"
onClick={() => setAgentDetails('ACTIVE')}
>
Access Details
@@ -346,7 +346,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
)}
<button
disabled={!isPublishable()}
className={`${!isPublishable() && 'cursor-not-allowed opacity-30'} rounded-3xl bg-purple-30 px-5 py-2 text-sm font-medium text-white hover:bg-violets-are-blue`}
className={`${!isPublishable() && 'cursor-not-allowed opacity-30'} bg-purple-30 hover:bg-violets-are-blue rounded-3xl px-5 py-2 text-sm font-medium text-white`}
onClick={handlePublish}
>
Publish
@@ -358,14 +358,14 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
<div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
<h2 className="text-lg font-semibold">Meta</h2>
<input
className="mt-3 w-full rounded-3xl border border-silver bg-white px-5 py-3 text-sm text-jet outline-none placeholder:text-gray-400 dark:border-[#7E7E7E] dark:bg-[#222327] dark:text-bright-gray placeholder:dark:text-silver"
className="border-silver text-jet dark:bg-raisin-black dark:text-bright-gray dark:placeholder:text-silver mt-3 w-full rounded-3xl border bg-white px-5 py-3 text-sm outline-hidden placeholder:text-gray-400 dark:border-[#7E7E7E]"
type="text"
value={agent.name}
placeholder="Agent name"
onChange={(e) => setAgent({ ...agent, name: e.target.value })}
/>
<textarea
className="mt-3 h-32 w-full rounded-3xl border border-silver bg-white px-5 py-4 text-sm text-jet outline-none placeholder:text-gray-400 dark:border-[#7E7E7E] dark:bg-[#222327] dark:text-bright-gray placeholder:dark:text-silver"
className="border-silver text-jet dark:bg-raisin-black dark:text-bright-gray dark:placeholder:text-silver mt-3 h-32 w-full rounded-3xl border bg-white px-5 py-4 text-sm outline-hidden placeholder:text-gray-400 dark:border-[#7E7E7E]"
placeholder="Describe your agent"
value={agent.description}
onChange={(e) =>
@@ -375,7 +375,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
<div className="mt-3">
<FileUpload
showPreview
className="dark:bg-[#222327]"
className="dark:bg-raisin-black"
onUpload={handleUpload}
onRemove={() => setImageFile(null)}
uploadText={[
@@ -395,10 +395,10 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
<button
ref={sourceAnchorButtonRef}
onClick={() => setIsSourcePopupOpen(!isSourcePopupOpen)}
className={`w-full truncate rounded-3xl border border-silver bg-white px-5 py-3 text-left text-sm dark:border-[#7E7E7E] dark:bg-[#222327] ${
className={`border-silver dark:bg-raisin-black w-full truncate rounded-3xl border bg-white px-5 py-3 text-left text-sm dark:border-[#7E7E7E] ${
selectedSourceIds.size > 0
? 'text-jet dark:text-bright-gray'
: 'text-gray-400 dark:text-silver'
: 'dark:text-silver text-gray-400'
}`}
>
{selectedSourceIds.size > 0
@@ -461,7 +461,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
<div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
<h2 className="text-lg font-semibold">Prompt</h2>
<div className="mt-3 flex flex-wrap items-center gap-1">
<div className="min-w-20 flex-grow basis-full sm:basis-0">
<div className="min-w-20 grow basis-full sm:basis-0">
<Dropdown
options={prompts.map((prompt) => ({
label: prompt.name,
@@ -489,7 +489,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
/>
</div>
<button
className="w-20 flex-shrink-0 basis-full rounded-3xl border-2 border-solid border-violets-are-blue px-5 py-[11px] text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white sm:basis-auto"
className="border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue w-20 shrink-0 basis-full rounded-3xl border-2 border-solid px-5 py-[11px] text-sm transition-colors hover:text-white sm:basis-auto"
onClick={() => setAddPromptModal('ACTIVE')}
>
Add
@@ -502,10 +502,10 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
<button
ref={toolAnchorButtonRef}
onClick={() => setIsToolsPopupOpen(!isToolsPopupOpen)}
className={`w-full truncate rounded-3xl border border-silver bg-white px-5 py-3 text-left text-sm dark:border-[#7E7E7E] dark:bg-[#222327] ${
className={`border-silver dark:bg-raisin-black w-full truncate rounded-3xl border bg-white px-5 py-3 text-left text-sm dark:border-[#7E7E7E] ${
selectedToolIds.size > 0
? 'text-jet dark:text-bright-gray'
: 'text-gray-400 dark:text-silver'
: 'dark:text-silver text-gray-400'
}`}
>
{selectedToolIds.size > 0
@@ -598,7 +598,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
function AgentPreviewArea() {
const selectedAgent = useSelector(selectSelectedAgent);
return (
<div className="h-full w-full rounded-[30px] border border-[#F6F6F6] bg-white dark:border-[#7E7E7E] dark:bg-[#222327] max-[1180px]:h-[48rem]">
<div className="dark:bg-raisin-black h-full w-full rounded-[30px] border border-[#F6F6F6] bg-white max-[1180px]:h-192 dark:border-[#7E7E7E]">
{selectedAgent?.status === 'published' ? (
<div className="flex h-full w-full flex-col justify-end overflow-auto rounded-[30px]">
<AgentPreview />
@@ -606,7 +606,7 @@ function AgentPreviewArea() {
) : (
<div className="flex h-full w-full flex-col items-center justify-center gap-2">
<span className="block h-12 w-12 bg-[url('/src/assets/science-spark.svg')] bg-contain bg-center bg-no-repeat transition-all dark:bg-[url('/src/assets/science-spark-dark.svg')]" />{' '}
<p className="text-xs text-[#18181B] dark:text-[#949494]">
<p className="dark:text-gray-4000 text-xs text-[#18181B]">
Published agents can be previewed here
</p>
</div>

8
frontend/src/agents/SharedAgent.tsx
View File

@@ -143,7 +143,7 @@ export default function SharedAgent() {
alt="No agent found"
className="mx-auto mb-6 h-32 w-32"
/>
<p className="text-center text-lg text-[#71717A] dark:text-[#949494]">
<p className="dark:text-gray-4000 text-center text-lg text-[#71717A]">
No agent found. Please ensure the agent is shared.
</p>
</div>
@@ -151,7 +151,7 @@ export default function SharedAgent() {
);
return (
<div className="relative h-full w-full">
<div className="absolute left-4 top-5 hidden items-center gap-3 sm:flex">
<div className="absolute top-5 left-4 hidden items-center gap-3 sm:flex">
<img
src={
sharedAgent.image && sharedAgent.image.trim() !== ''
@@ -161,7 +161,7 @@ export default function SharedAgent() {
alt="agent-logo"
className="h-6 w-6 rounded-full object-contain"
/>
<h2 className="text-lg font-semibold text-[#212121] dark:text-[#E0E0E0]">
<h2 className="text-eerie-black text-lg font-semibold dark:text-[#E0E0E0]">
{sharedAgent.name}
</h2>
</div>
@@ -188,7 +188,7 @@ export default function SharedAgent() {
showToolButton={sharedAgent ? false : true}
autoFocus={false}
/>
<p className="hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs text-gray-4000 dark:text-sonic-silver md:inline md:w-full">
<p className="text-gray-4000 dark:text-sonic-silver hidden w-screen self-center bg-transparent py-2 text-center text-xs md:inline md:w-full">
{t('tagline')}
</p>
</div>

14
frontend/src/agents/SharedAgentCard.tsx
View File

@@ -3,7 +3,7 @@ import { Agent } from './types';
export default function SharedAgentCard({ agent }: { agent: Agent }) {
return (
<div className="flex w-full max-w-[720px] flex-col rounded-3xl border border-dark-gray p-6 shadow-sm dark:border-grey sm:w-fit sm:min-w-[480px]">
<div className="border-dark-gray dark:border-grey flex w-full max-w-[720px] flex-col rounded-3xl border p-6 shadow-xs sm:w-fit sm:min-w-[480px]">
<div className="flex items-center gap-3">
<div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
<img
@@ -12,10 +12,10 @@ export default function SharedAgentCard({ agent }: { agent: Agent }) {
/>
</div>
<div className="flex max-h-[92px] w-[80%] flex-col gap-px">
<h2 className="text-base font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-lg">
<h2 className="text-eerie-black text-base font-semibold sm:text-lg dark:text-[#E0E0E0]">
{agent.name}
</h2>
<p className="overflow-y-auto text-wrap break-all text-xs text-[#71717A] dark:text-[#949494] sm:text-sm">
<p className="dark:text-gray-4000 overflow-y-auto text-xs text-wrap break-all text-[#71717A] sm:text-sm">
{agent.description}
</p>
</div>
@@ -23,12 +23,12 @@ export default function SharedAgentCard({ agent }: { agent: Agent }) {
{agent.shared_metadata && (
<div className="mt-4 flex items-center gap-8">
{agent.shared_metadata?.shared_by && (
<p className="text-xs font-light text-[#212121] dark:text-[#E0E0E0] sm:text-sm">
<p className="text-eerie-black text-xs font-light sm:text-sm dark:text-[#E0E0E0]">
by {agent.shared_metadata.shared_by}
</p>
)}
{agent.shared_metadata?.shared_at && (
<p className="text-xs font-light text-[#71717A] dark:text-[#949494] sm:text-sm">
<p className="dark:text-gray-4000 text-xs font-light text-[#71717A] sm:text-sm">
Shared on{' '}
{new Date(agent.shared_metadata.shared_at).toLocaleString(
'en-US',
@@ -47,14 +47,14 @@ export default function SharedAgentCard({ agent }: { agent: Agent }) {
)}
{agent.tool_details && agent.tool_details.length > 0 && (
<div className="mt-8">
<p className="text-sm font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-base">
<p className="text-eerie-black text-sm font-semibold sm:text-base dark:text-[#E0E0E0]">
Connected Tools
</p>
<div className="mt-2 flex flex-wrap gap-2">
{agent.tool_details.map((tool, index) => (
<span
key={index}
className="flex items-center gap-1 rounded-full bg-bright-gray px-3 py-1 text-xs font-light text-[#212121] dark:bg-dark-charcoal dark:text-[#E0E0E0]"
className="bg-bright-gray text-eerie-black dark:bg-dark-charcoal flex items-center gap-1 rounded-full px-3 py-1 text-xs font-light dark:text-[#E0E0E0]"
>
<img
src={`/toolIcons/tool_${tool.name}.svg`}

16
frontend/src/agents/index.tsx
View File

@@ -111,10 +111,10 @@ function AgentsList() {
}, [token]);
return (
<div className="p-4 md:p-12">
<h1 className="mb-0 text-[40px] font-bold text-[#212121] dark:text-[#E0E0E0]">
<h1 className="text-eerie-black mb-0 text-[40px] font-bold dark:text-[#E0E0E0]">
Agents
</h1>
<p className="mt-5 text-[15px] text-[#71717A] dark:text-[#949494]">
<p className="dark:text-gray-4000 mt-5 text-[15px] text-[#71717A]">
Discover and create custom versions of DocsGPT that combine
instructions, extra knowledge, and any combination of skills
</p>
@@ -206,7 +206,7 @@ function AgentSection({
</div>
{sectionConfig[section].showNewAgentButton && (
<button
className="rounded-full bg-purple-30 px-4 py-2 text-sm text-white hover:bg-violets-are-blue"
className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-4 py-2 text-sm text-white"
onClick={() => navigate('/agents/new')}
>
New Agent
@@ -235,7 +235,7 @@ function AgentSection({
<p>{sectionConfig[section].emptyStateDescription}</p>
{sectionConfig[section].showNewAgentButton && (
<button
className="ml-2 rounded-full bg-purple-30 px-4 py-2 text-sm text-white hover:bg-violets-are-blue"
className="bg-purple-30 hover:bg-violets-are-blue ml-2 rounded-full px-4 py-2 text-sm text-white"
onClick={() => navigate('/agents/new')}
>
New Agent
@@ -410,7 +410,7 @@ function AgentCard({
};
return (
<div
className={`relative flex h-44 w-full flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] hover:dark:bg-[#383838]/80 md:w-48 ${agent.status === 'published' && 'cursor-pointer'}`}
className={`relative flex h-44 w-full flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] md:w-48 dark:bg-[#383838] dark:hover:bg-[#383838]/80 ${agent.status === 'published' && 'cursor-pointer'}`}
onClick={(e) => {
e.stopPropagation();
handleClick();
@@ -422,7 +422,7 @@ function AgentCard({
e.stopPropagation();
setIsMenuOpen(true);
}}
className="absolute right-4 top-4 z-10 cursor-pointer"
className="absolute top-4 right-4 z-10 cursor-pointer"
>
<img src={ThreeDots} alt={'use-agent'} className="h-[19px] w-[19px]" />
<ContextMenu
@@ -448,11 +448,11 @@ function AgentCard({
<div className="mt-2">
<p
title={agent.name}
className="truncate px-1 text-[13px] font-semibold capitalize leading-relaxed text-[#020617] dark:text-[#E0E0E0]"
className="truncate px-1 text-[13px] leading-relaxed font-semibold text-[#020617] capitalize dark:text-[#E0E0E0]"
>
{agent.name}
</p>
<p className="mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed text-[#64748B] dark:text-sonic-silver-light">
<p className="dark:text-sonic-silver-light mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed text-[#64748B]">
{agent.description}
</p>
</div>

4
frontend/src/components/Accordion.tsx
View File

@@ -32,9 +32,9 @@ export default function Accordion({
setIsOpen(!isOpen);
};
return (
<div className={`overflow-hidden shadow-sm ${className}`}>
<div className={`overflow-hidden shadow-xs ${className}`}>
<button
className={`flex w-full items-center justify-between focus:outline-none ${titleClassName}`}
className={`flex w-full items-center justify-between focus:outline-hidden ${titleClassName}`}
onClick={toggleAccordion}
>
<p className="break-words">{title}</p>

2
frontend/src/components/Avatar.tsx
View File

@@ -9,5 +9,5 @@ export default function Avatar({
size?: 'SMALL' | 'MEDIUM' | 'LARGE';
className: string;
}) {
return <div className={`${className} flex-shrink-0`}>{avatar}</div>;
return <div className={`${className} shrink-0`}>{avatar}</div>;
}

6
frontend/src/components/ContextMenu.tsx
View File

@@ -125,7 +125,7 @@ export default function ContextMenu({
onClick={(e) => e.stopPropagation()}
>
<div
className="flex flex-col rounded-xl bg-lotion text-sm shadow-xl dark:bg-charleston-green-2"
className="bg-lotion dark:bg-charleston-green-2 flex flex-col rounded-xl text-sm shadow-xl"
style={{ minWidth: '144px' }}
>
{options.map((option, index) => (
@@ -144,7 +144,7 @@ export default function ContextMenu({
} `}
>
{option.icon && (
<div className="flex w-4 min-w-4 flex-shrink-0 justify-center">
<div className="flex w-4 min-w-4 shrink-0 justify-center">
<img
width={option.iconWidth || 16}
height={option.iconHeight || 16}
@@ -154,7 +154,7 @@ export default function ContextMenu({
/>
</div>
)}
<span className="hyphens-auto break-words">{option.label}</span>
<span className="break-words hyphens-auto">{option.label}</span>
</button>
))}
</div>

2
frontend/src/components/CopyButton.tsx
View File

@@ -61,7 +61,7 @@ export default function CopyButton({
const rootButtonClasses = clsx(
'flex items-center gap-2 group',
'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 rounded-full',
'focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 rounded-full',
className,
);

6
frontend/src/components/Dropdown.tsx
View File

@@ -97,7 +97,7 @@ function Dropdown({
}`}
>
{typeof selectedValue === 'string' ? (
<span className="truncate dark:text-bright-gray">
<span className="dark:text-bright-gray truncate">
{selectedValue}
</span>
) : (
@@ -130,7 +130,7 @@ function Dropdown({
</button>
{isOpen && (
<div
className={`absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-${optionsBackgroundColor} shadow-lg dark:border-${darkBorderColor} dark:bg-${optionsDarkBackgroundColor}`}
className={`absolute right-0 left-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-${optionsBackgroundColor} shadow-lg dark:border-${darkBorderColor} dark:bg-${optionsDarkBackgroundColor}`}
>
{options.map((option: any, index) => (
<div
@@ -142,7 +142,7 @@ function Dropdown({
onSelect(option);
setIsOpen(false);
}}
className={`ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray ${contentSize}`}
className={`dark:text-light-gray ml-5 flex-1 overflow-hidden py-3 text-ellipsis whitespace-nowrap ${contentSize}`}
>
{typeof option === 'string'
? option

6
frontend/src/components/Help.tsx
View File

@@ -43,13 +43,13 @@ const Help = () => {
</button>
{isOpen && (
<div
className={`absolute z-10 w-48 -translate-y-28 translate-x-4 rounded-xl bg-white shadow-lg dark:bg-[#444654]`}
className={`dark:bg-outer-space absolute z-10 w-48 translate-x-4 -translate-y-28 rounded-xl bg-white shadow-lg`}
>
<a
href="https://docs.docsgpt.cloud/"
target="_blank"
rel="noopener noreferrer"
className="flex items-start gap-4 rounded-t-xl px-4 py-2 text-black hover:bg-bright-gray dark:text-white dark:hover:bg-[#545561]"
className="hover:bg-bright-gray flex items-start gap-4 rounded-t-xl px-4 py-2 text-black dark:text-white dark:hover:bg-[#545561]"
>
<img
src={PageIcon}
@@ -61,7 +61,7 @@ const Help = () => {
</a>
<a
href="mailto:support@docsgpt.cloud"
className="flex items-start gap-4 rounded-b-xl px-4 py-2 text-black hover:bg-bright-gray dark:text-white dark:hover:bg-[#545561]"
className="hover:bg-bright-gray flex items-start gap-4 rounded-b-xl px-4 py-2 text-black dark:text-white dark:hover:bg-[#545561]"
>
<img
src={EmailIcon}

6
frontend/src/components/Input.tsx
View File

@@ -42,7 +42,7 @@ const Input = ({
<div className={`relative ${className}`}>
<input
ref={inputRef}
className={`peer h-[42px] w-full rounded-full bg-transparent px-3 py-1 text-jet placeholder-transparent outline-none dark:text-bright-gray ${colorStyles[colorVariant]} ${borderStyles[borderVariant]} ${textSizeStyles[textSize]} [&:-webkit-autofill]:appearance-none [&:-webkit-autofill]:bg-transparent [&:-webkit-autofill_selected]:bg-transparent`}
className={`peer text-jet dark:text-bright-gray h-[42px] w-full rounded-full bg-transparent px-3 py-1 placeholder-transparent outline-hidden ${colorStyles[colorVariant]} ${borderStyles[borderVariant]} ${textSizeStyles[textSize]} [&:-webkit-autofill]:appearance-none [&:-webkit-autofill]:bg-transparent [&:-webkit-autofill_selected]:bg-transparent`}
type={type}
id={id}
name={name}
@@ -62,9 +62,9 @@ const Input = ({
htmlFor={id}
className={`absolute select-none ${
hasValue ? '-top-2.5 left-3 text-xs' : ''
} px-2 transition-all peer-placeholder-shown:left-3 peer-placeholder-shown:top-2.5 peer-placeholder-shown:${
} px-2 transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3 peer-placeholder-shown:${
textSizeStyles[textSize]
} pointer-events-none cursor-none text-gray-4000 peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs dark:text-gray-400 ${labelBgClassName} max-w-[calc(100%-24px)] overflow-hidden text-ellipsis whitespace-nowrap`}
} text-gray-4000 pointer-events-none cursor-none peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs dark:text-gray-400 ${labelBgClassName} max-w-[calc(100%-24px)] overflow-hidden text-ellipsis whitespace-nowrap`}
>
{placeholder}
{required && (

26
frontend/src/components/MermaidRenderer.tsx
View File

@@ -258,9 +258,9 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
const errorRender = !isCurrentlyLoading && error;
return (
<div className="w-inherit group relative rounded-lg border border-light-silver bg-white dark:border-raisin-black dark:bg-eerie-black">
<div className="flex items-center justify-between bg-platinum px-2 py-1 dark:bg-eerie-black-2">
<span className="text-xs font-medium text-just-black dark:text-chinese-white">
<div className="w-inherit group border-light-silver dark:border-raisin-black dark:bg-eerie-black relative rounded-lg border bg-white">
<div className="bg-platinum dark:bg-eerie-black-2 flex items-center justify-between px-2 py-1">
<span className="text-just-black dark:text-chinese-white text-xs font-medium">
mermaid
</span>
<div className="flex items-center gap-2">
@@ -270,13 +270,13 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
<div className="relative" ref={downloadMenuRef}>
<button
onClick={() => setShowDownloadMenu(!showDownloadMenu)}
className="flex h-full items-center rounded bg-gray-100 px-2 py-1 text-xs dark:bg-gray-700"
className="flex h-full items-center rounded-sm bg-gray-100 px-2 py-1 text-xs dark:bg-gray-700"
title="Download options"
>
Download <span className="ml-1">▼</span>
</button>
{showDownloadMenu && (
<div className="absolute right-0 z-10 mt-1 w-40 rounded border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
<div className="absolute right-0 z-10 mt-1 w-40 rounded-sm border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
<ul>
{downloadOptions.map((option, index) => (
<li key={index}>
@@ -314,14 +314,14 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
</div>
{isCurrentlyLoading ? (
<div className="flex items-center justify-center bg-white p-4 dark:bg-eerie-black">
<div className="dark:bg-eerie-black flex items-center justify-center bg-white p-4">
<div className="text-sm text-gray-500 dark:text-gray-400">
Loading diagram...
</div>
</div>
) : errorRender ? (
<div className="m-2 rounded border-2 border-red-400 dark:border-red-700">
<div className="overflow-auto whitespace-normal break-words bg-red-100 px-4 py-2 text-sm text-red-800 dark:bg-red-900/30 dark:text-red-300">
<div className="m-2 rounded-sm border-2 border-red-400 dark:border-red-700">
<div className="overflow-auto bg-red-100 px-4 py-2 text-sm break-words whitespace-normal text-red-800 dark:bg-red-900/30 dark:text-red-300">
{error}
</div>
</div>
@@ -329,7 +329,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
<>
<div
ref={containerRef}
className="no-scrollbar relative block w-full bg-white p-4 dark:bg-eerie-black"
className="no-scrollbar dark:bg-eerie-black relative block w-full bg-white p-4"
style={{
overflow: 'auto',
scrollbarWidth: 'none',
@@ -345,7 +345,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
>
{isHovering && (
<>
<div className="absolute right-2 top-2 z-10 flex items-center gap-2 rounded bg-black/70 px-2 py-1 text-xs text-white">
<div className="absolute top-2 right-2 z-10 flex items-center gap-2 rounded-sm bg-black/70 px-2 py-1 text-xs text-white">
<button
onClick={() =>
setZoomFactor((prev) => Math.max(1, prev - 0.5))
@@ -395,9 +395,9 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
</div>
{showCode && (
<div className="border-t border-light-silver dark:border-raisin-black">
<div className="bg-platinum p-2 dark:bg-eerie-black-2">
<span className="text-xs font-medium text-just-black dark:text-chinese-white">
<div className="border-light-silver dark:border-raisin-black border-t">
<div className="bg-platinum dark:bg-eerie-black-2 p-2">
<span className="text-just-black dark:text-chinese-white text-xs font-medium">
Mermaid Code
</span>
</div>

32
frontend/src/components/MessageInput.tsx
View File

@@ -258,17 +258,17 @@ export default function MessageInput({
};
return (
<div className="mx-2 flex w-full flex-col">
<div className="relative flex w-full flex-col rounded-[23px] border border-dark-gray bg-lotion dark:border-grey dark:bg-transparent">
<div className="flex flex-wrap gap-1.5 px-4 pb-0 pt-3 sm:gap-2 sm:px-6">
<div className="border-dark-gray bg-lotion dark:border-grey relative flex w-full flex-col rounded-[23px] border dark:bg-transparent">
<div className="flex flex-wrap gap-1.5 px-4 pt-3 pb-0 sm:gap-2 sm:px-6">
{attachments.map((attachment, index) => (
<div
key={index}
className={`group relative flex items-center rounded-xl bg-[#EFF3F4] px-2 py-1 text-[12px] text-[#5D5D5D] dark:bg-[#393B3D] dark:text-bright-gray sm:px-3 sm:py-1.5 sm:text-[14px] ${
className={`group dark:text-bright-gray relative flex items-center rounded-xl bg-[#EFF3F4] px-2 py-1 text-[12px] text-[#5D5D5D] sm:px-3 sm:py-1.5 sm:text-[14px] dark:bg-[#393B3D] ${
attachment.status !== 'completed' ? 'opacity-70' : 'opacity-100'
}`}
title={attachment.fileName}
>
<div className="mr-2 items-center justify-center rounded-lg bg-purple-30 p-[5.5px]">
<div className="bg-purple-30 mr-2 items-center justify-center rounded-lg p-[5.5px]">
{attachment.status === 'completed' && (
<img
src={DocumentationDark}
@@ -353,7 +353,7 @@ export default function MessageInput({
onChange={handleChange}
tabIndex={1}
placeholder={t('inputPlaceholder')}
className="inputbox-style no-scrollbar w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-t-[23px] bg-lotion px-4 py-3 text-base leading-tight opacity-100 focus:outline-none dark:bg-transparent dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50 sm:px-6 sm:py-5"
className="inputbox-style no-scrollbar bg-lotion dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50 w-full overflow-x-hidden overflow-y-auto rounded-t-[23px] px-4 py-3 text-base leading-tight whitespace-pre-wrap opacity-100 focus:outline-hidden sm:px-6 sm:py-5 dark:bg-transparent"
onInput={handleInput}
onKeyDown={handleKeyDown}
aria-label={t('inputPlaceholder')}
@@ -361,11 +361,11 @@ export default function MessageInput({
</div>
<div className="flex items-center px-3 py-1.5 sm:px-4 sm:py-2">
<div className="flex flex-grow flex-wrap gap-1 sm:gap-2">
<div className="flex grow flex-wrap gap-1 sm:gap-2">
{showSourceButton && (
<button
ref={sourceButtonRef}
className="xs:px-3 xs:py-1.5 flex max-w-[130px] items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:border-purple-taupe dark:hover:bg-[#2C2E3C] sm:max-w-[150px]"
className="xs:px-3 xs:py-1.5 dark:border-purple-taupe flex max-w-[130px] items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 sm:max-w-[150px] dark:hover:bg-[#2C2E3C]"
onClick={() => setIsSourcesPopupOpen(!isSourcesPopupOpen)}
title={
selectedDocs
@@ -376,15 +376,15 @@ export default function MessageInput({
<img
src={SourceIcon}
alt="Sources"
className="mr-1 h-3.5 w-3.5 flex-shrink-0 sm:mr-1.5 sm:h-4"
className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4"
/>
<span className="xs:text-[12px] overflow-hidden truncate text-[10px] font-medium text-[#5D5D5D] dark:text-bright-gray sm:text-[14px]">
<span className="xs:text-[12px] dark:text-bright-gray truncate overflow-hidden text-[10px] font-medium text-[#5D5D5D] sm:text-[14px]">
{selectedDocs
? selectedDocs.name
: t('conversation.sources.title')}
</span>
{!isTouch && (
<span className="ml-1 hidden text-[10px] text-gray-500 dark:text-gray-400 sm:inline-block">
<span className="ml-1 hidden text-[10px] text-gray-500 sm:inline-block dark:text-gray-400">
{browserOS === 'mac' ? '(⌘K)' : '(ctrl+K)'}
</span>
)}
@@ -394,26 +394,26 @@ export default function MessageInput({
{showToolButton && (
<button
ref={toolButtonRef}
className="xs:px-3 xs:py-1.5 xs:max-w-[150px] flex max-w-[130px] items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:border-purple-taupe dark:hover:bg-[#2C2E3C]"
className="xs:px-3 xs:py-1.5 xs:max-w-[150px] dark:border-purple-taupe flex max-w-[130px] items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:hover:bg-[#2C2E3C]"
onClick={() => setIsToolsPopupOpen(!isToolsPopupOpen)}
>
<img
src={ToolIcon}
alt="Tools"
className="mr-1 h-3.5 w-3.5 flex-shrink-0 sm:mr-1.5 sm:h-4 sm:w-4"
className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4 sm:w-4"
/>
<span className="xs:text-[12px] overflow-hidden truncate text-[10px] font-medium text-[#5D5D5D] dark:text-bright-gray sm:text-[14px]">
<span className="xs:text-[12px] dark:text-bright-gray truncate overflow-hidden text-[10px] font-medium text-[#5D5D5D] sm:text-[14px]">
{t('settings.tools.label')}
</span>
</button>
)}
<label className="xs:px-3 xs:py-1.5 flex cursor-pointer items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:border-purple-taupe dark:hover:bg-[#2C2E3C]">
<label className="xs:px-3 xs:py-1.5 dark:border-purple-taupe flex cursor-pointer items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:hover:bg-[#2C2E3C]">
<img
src={ClipIcon}
alt="Attach"
className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4"
/>
<span className="xs:text-[12px] text-[10px] font-medium text-[#5D5D5D] dark:text-bright-gray sm:text-[14px]">
<span className="xs:text-[12px] dark:text-bright-gray text-[10px] font-medium text-[#5D5D5D] sm:text-[14px]">
{t('conversation.attachments.attach')}
</span>
<input
@@ -428,7 +428,7 @@ export default function MessageInput({
<button
onClick={loading ? undefined : handleSubmit}
aria-label={loading ? t('loading') : t('send')}
className={`flex items-center justify-center rounded-full p-2 sm:p-2.5 ${loading ? 'bg-gray-300 dark:bg-gray-600' : 'bg-black dark:bg-white'} ml-auto flex-shrink-0`}
className={`flex items-center justify-center rounded-full p-2 sm:p-2.5 ${loading ? 'bg-gray-300 dark:bg-gray-600' : 'bg-black dark:bg-white'} ml-auto shrink-0`}
disabled={loading}
>
{loading ? (

26
frontend/src/components/MultiSelectPopup.tsx
View File

@@ -79,18 +79,18 @@ export default function MultiSelectPopup({
<img
src={icon}
alt=""
className="mr-3 h-5 w-5 flex-shrink-0"
className="mr-3 h-5 w-5 shrink-0"
aria-hidden="true"
/>
);
}
return (
<span className="mr-3 h-5 w-5 flex-shrink-0" aria-hidden="true">
<span className="mr-3 h-5 w-5 shrink-0" aria-hidden="true">
{icon}
</span>
);
}
return <span className="mr-3 flex-shrink-0">{icon}</span>;
return <span className="mr-3 shrink-0">{icon}</span>;
};
useLayoutEffect(() => {
@@ -168,7 +168,7 @@ export default function MultiSelectPopup({
return (
<div
ref={popupRef}
className="fixed z-[9999] flex flex-col rounded-lg border border-light-silver bg-lotion shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033] dark:border-dim-gray dark:bg-charleston-green-2"
className="border-light-silver bg-lotion dark:border-dim-gray dark:bg-charleston-green-2 fixed z-9999 flex flex-col rounded-lg border shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
style={{
top: popupPosition.showAbove ? undefined : popupPosition.top,
bottom: popupPosition.showAbove
@@ -181,7 +181,7 @@ export default function MultiSelectPopup({
}}
>
{(title || showSearch) && (
<div className="flex-shrink-0 p-4">
<div className="shrink-0 p-4">
{title && (
<h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
{title}
@@ -206,13 +206,13 @@ export default function MultiSelectPopup({
)}
</div>
)}
<div className="mx-4 mb-4 flex-grow overflow-auto rounded-md border border-[#D9D9D9] dark:border-dim-gray">
<div className="dark:border-dim-gray mx-4 mb-4 grow overflow-auto rounded-md border border-[#D9D9D9]">
{loading ? (
<div className="flex h-full items-center justify-center py-4">
<div className="h-6 w-6 animate-spin rounded-full border-b-2 border-gray-900 dark:border-white"></div>
</div>
) : (
<div className="h-full overflow-y-auto [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 [&::-webkit-scrollbar-track]:bg-gray-200 dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C] [&::-webkit-scrollbar]:w-2">
<div className="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 [&::-webkit-scrollbar-track]:bg-gray-200 dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
{filteredOptions.length === 0 ? (
<div className="flex h-full flex-col items-center justify-center px-4 py-8 text-center">
<img
@@ -233,22 +233,22 @@ export default function MultiSelectPopup({
<div
key={option.id}
onClick={() => handleOptionClick(option.id)}
className="flex cursor-pointer items-center justify-between border-b border-[#D9D9D9] p-3 last:border-b-0 hover:bg-gray-100 dark:border-dim-gray dark:hover:bg-charleston-green-3"
className="dark:border-dim-gray dark:hover:bg-charleston-green-3 flex cursor-pointer items-center justify-between border-b border-[#D9D9D9] p-3 last:border-b-0 hover:bg-gray-100"
role="option"
aria-selected={isSelected}
>
<div className="mr-3 flex flex-grow items-center overflow-hidden">
<div className="mr-3 flex grow items-center overflow-hidden">
{option.icon && renderIcon(option.icon)}
<p
className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white"
className="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-gray-900 dark:text-white"
title={option.label}
>
{option.label}
</p>
</div>
<div className="flex-shrink-0">
<div className="shrink-0">
<div
className={`flex h-4 w-4 items-center justify-center rounded-sm border border-[#C6C6C6] bg-white dark:border-[#757783] dark:bg-charleston-green-2`}
className={`dark:bg-charleston-green-2 flex h-4 w-4 items-center justify-center rounded-xs border border-[#C6C6C6] bg-white dark:border-[#757783]`}
aria-hidden="true"
>
{isSelected && (
@@ -269,7 +269,7 @@ export default function MultiSelectPopup({
)}
</div>
{footerContent && (
<div className="flex-shrink-0 border-t border-light-silver p-4 dark:border-dim-gray">
<div className="border-light-silver dark:border-dim-gray shrink-0 border-t p-4">
{footerContent}
</div>
)}

6
frontend/src/components/SettingsBar.tsx
View File

@@ -50,10 +50,10 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
return (
<div className="relative mt-6 flex flex-row items-center space-x-1 overflow-auto md:space-x-0">
<div
className={`${hiddenGradient === 'left' ? 'hidden' : ''} pointer-events-none absolute inset-y-0 left-6 w-14 bg-gradient-to-r from-white dark:from-raisin-black md:hidden`}
className={`${hiddenGradient === 'left' ? 'hidden' : ''} dark:from-raisin-black pointer-events-none absolute inset-y-0 left-6 w-14 bg-linear-to-r from-white md:hidden`}
></div>
<div
className={`${hiddenGradient === 'right' ? 'hidden' : ''} pointer-events-none absolute inset-y-0 right-6 w-14 bg-gradient-to-l from-white dark:from-raisin-black md:hidden`}
className={`${hiddenGradient === 'right' ? 'hidden' : ''} dark:from-raisin-black pointer-events-none absolute inset-y-0 right-6 w-14 bg-linear-to-l from-white md:hidden`}
></div>
<div className="z-10 md:hidden">
@@ -77,7 +77,7 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
onClick={() => setActiveTab(tab)}
className={`h-9 snap-start rounded-3xl px-4 font-bold transition-colors ${
activeTab === tab
? 'bg-[#F4F4F5] text-neutral-900 dark:bg-dark-charcoal dark:text-white'
? 'dark:bg-dark-charcoal bg-[#F4F4F5] text-neutral-900 dark:text-white'
: 'text-neutral-700 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-white'
}`}
role="tab"

4
frontend/src/components/Sidebar.tsx
View File

@@ -33,13 +33,13 @@ export default function Sidebar({
return (
<div ref={sidebarRef} className="h-vh relative">
<div
className={`fixed right-0 top-0 z-50 h-full w-72 transform bg-white shadow-xl transition-all duration-300 dark:bg-chinese-black sm:w-96 ${
className={`dark:bg-chinese-black fixed top-0 right-0 z-50 h-full w-72 transform bg-white shadow-xl transition-all duration-300 sm:w-96 ${
isOpen ? 'translate-x-[10px]' : 'translate-x-full'
} border-l border-[#9ca3af]/10`}
>
<div className="flex w-full flex-row items-end justify-end px-4 pt-3">
<button
className="w-7 rounded-full p-2 hover:bg-gray-1000 hover:dark:bg-gun-metal"
className="hover:bg-gray-1000 dark:hover:bg-gun-metal w-7 rounded-full p-2"
onClick={() => toggleState(!isOpen)}
>
<img className="filter dark:invert" src={Exit} />

84
frontend/src/components/SkeletonLoader.tsx
View File

@@ -43,16 +43,16 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
{[...Array(4)].map((_, idx) => (
<tr key={idx} className="animate-pulse">
<td className="w-[45%] px-4 py-4">
<div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</td>
<td className="w-[20%] px-4 py-4">
<div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</td>
<td className="w-[25%] px-4 py-4">
<div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</td>
<td className="w-[10%] px-4 py-4">
<div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</td>
</tr>
))}
@@ -64,16 +64,16 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
{[...Array(4)].map((_, idx) => (
<tr key={idx} className="animate-pulse">
<td className="p-2">
<div className="mx-auto h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mx-auto h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</td>
<td className="p-2">
<div className="mx-auto h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mx-auto h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</td>
<td className="p-2">
<div className="mx-auto h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mx-auto h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</td>
<td className="p-2">
<div className="mx-auto h-4 w-8 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mx-auto h-4 w-8 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</td>
</tr>
))}
@@ -82,10 +82,10 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
const renderDropdown = () => (
<div className="animate-pulse">
<div className="mb-2 h-4 w-24 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-24 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="flex h-14 w-[360px] items-center justify-between rounded-3xl bg-gray-300 px-4 dark:bg-gray-600">
<div className="h-3 w-24 rounded bg-gray-400 dark:bg-gray-700"></div>
<div className="h-3 w-3 rounded bg-gray-400 dark:bg-gray-700"></div>
<div className="h-3 w-24 rounded-sm bg-gray-400 dark:bg-gray-700"></div>
<div className="h-3 w-3 rounded-sm bg-gray-400 dark:bg-gray-700"></div>
</div>
</div>
);
@@ -95,14 +95,14 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
{[...Array(8)].map((_, idx) => (
<div
key={idx}
className="flex w-full items-start p-2 hover:bg-[#F9F9F9] hover:dark:bg-dark-charcoal"
className="dark:hover:bg-dark-charcoal flex w-full items-start p-2 hover:bg-[#F9F9F9]"
>
<div className="flex w-full items-center gap-2">
<div className="h-3 w-3 rounded-lg bg-gray-300 dark:bg-gray-600"></div>
<div className="flex w-full flex-row items-center gap-2">
<div className="h-3 w-[30%] rounded-lg bg-gray-300 dark:bg-gray-600 lg:w-52"></div>
<div className="h-3 w-[16%] rounded-lg bg-gray-300 dark:bg-gray-600 lg:w-28"></div>
<div className="h-3 w-[40%] rounded-lg bg-gray-300 dark:bg-gray-600 lg:w-64"></div>
<div className="h-3 w-[30%] rounded-lg bg-gray-300 lg:w-52 dark:bg-gray-600"></div>
<div className="h-3 w-[16%] rounded-lg bg-gray-300 lg:w-28 dark:bg-gray-600"></div>
<div className="h-3 w-[40%] rounded-lg bg-gray-300 lg:w-64 dark:bg-gray-600"></div>
</div>
</div>
</div>
@@ -117,32 +117,32 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
key={idx}
className={`p-6 ${
skeletonCount === 1 ? 'w-full' : 'w-60'
} animate-pulse rounded-3xl dark:bg-raisin-black`}
} dark:bg-raisin-black animate-pulse rounded-3xl`}
>
<div className="space-y-4">
<div>
<div className="mb-2 h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-5/6 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-1/2 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-5/6 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-1/2 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</div>
<div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
<div>
<div className="mb-2 h-4 w-2/3 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-1/4 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-2/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-1/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</div>
<div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
<div>
<div className="mb-2 h-4 w-5/6 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-1/3 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-2/3 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-5/6 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-1/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-2/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</div>
<div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
<div className="mb-2 h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-5/6 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-2 h-4 w-5/6 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</div>
</div>
))}
@@ -154,27 +154,27 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
{[...Array(skeletonCount)].map((_, idx) => (
<div
key={idx}
className="w-full animate-pulse rounded-3xl p-6 dark:bg-raisin-black"
className="dark:bg-raisin-black w-full animate-pulse rounded-3xl p-6"
>
<div className="space-y-6">
<div className="space-y-2">
<div className="mb-4 h-4 w-1/3 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-4 h-4 w-1/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="grid grid-cols-6 items-end gap-2">
<div className="h-32 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-24 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-40 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-28 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-36 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-20 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-32 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="h-24 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="h-40 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="h-28 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="h-36 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="h-20 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</div>
</div>
<div className="space-y-2">
<div className="mb-4 h-4 w-1/4 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-32 rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="mb-4 h-4 w-1/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="h-32 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
<div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
<div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
</div>
</div>
</div>

18
frontend/src/components/SourceDropdown.tsx
View File

@@ -79,13 +79,13 @@ function SourceDropdown({
<div className="relative w-5/6 rounded-3xl" ref={dropdownRef}>
<button
onClick={() => setIsDocsListOpen(!isDocsListOpen)}
className={`flex w-full cursor-pointer items-center border border-silver bg-white p-[11px] dark:bg-transparent ${
className={`border-silver flex w-full cursor-pointer items-center border bg-white p-[11px] dark:bg-transparent ${
isDocsListOpen
? 'rounded-t-3xl dark:border-silver/40'
: 'rounded-3xl dark:border-purple-taupe'
? 'dark:border-silver/40 rounded-t-3xl'
: 'dark:border-purple-taupe rounded-3xl'
}`}
>
<span className="ml-1 mr-2 flex-1 overflow-hidden text-ellipsis text-left dark:text-bright-gray">
<span className="dark:text-bright-gray mr-2 ml-1 flex-1 overflow-hidden text-left text-ellipsis">
<div className="flex flex-row gap-2">
<p className="max-w-3/4 truncate whitespace-nowrap">
{selectedDocs?.name || 'None'}
@@ -101,14 +101,14 @@ function SourceDropdown({
/>
</button>
{isDocsListOpen && (
<div className="absolute left-0 right-0 z-20 -mt-1 max-h-28 overflow-y-auto rounded-b-xl border border-silver bg-white shadow-lg dark:border-silver/40 dark:bg-dark-charcoal">
<div className="border-silver dark:border-silver/40 dark:bg-dark-charcoal absolute right-0 left-0 z-20 -mt-1 max-h-28 overflow-y-auto rounded-b-xl border bg-white shadow-lg">
{options ? (
options.map((option: any, index: number) => {
if (option.model === embeddingsName) {
return (
<div
key={index}
className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-[#545561]"
className="dark:text-bright-gray flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-[#545561]"
onClick={() => {
dispatch(setSelectedDocs(option));
setIsDocsListOpen(false);
@@ -119,7 +119,7 @@ function SourceDropdown({
onClick={() => {
setIsDocsListOpen(false);
}}
className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
className="ml-4 flex-1 overflow-hidden py-3 text-ellipsis whitespace-nowrap"
>
{option.name}
</span>
@@ -143,11 +143,11 @@ function SourceDropdown({
<></>
)}
<div
className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe"
className="dark:text-bright-gray dark:hover:bg-purple-taupe flex cursor-pointer items-center justify-between hover:bg-gray-100"
onClick={handleEmptyDocumentSelect}
>
<span
className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
className="ml-4 flex-1 overflow-hidden py-3 text-ellipsis whitespace-nowrap"
onClick={() => {
handlePostDocumentSelect(null);
}}

26
frontend/src/components/SourcesPopup.tsx
View File

@@ -110,7 +110,7 @@ export default function SourcesPopup({
return (
<div
ref={popupRef}
className="fixed z-50 flex flex-col rounded-xl bg-lotion shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033] dark:bg-charleston-green-2"
className="bg-lotion dark:bg-charleston-green-2 fixed z-50 flex flex-col rounded-xl shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
style={{
top: popupPosition.showAbove ? popupPosition.top : undefined,
bottom: popupPosition.showAbove
@@ -124,8 +124,8 @@ export default function SourcesPopup({
}}
>
<div className="flex h-full flex-col">
<div className="flex-shrink-0 px-4 py-4 md:px-6">
<h2 className="mb-4 text-lg font-bold text-[#141414] dark:text-[20px] dark:text-bright-gray">
<div className="shrink-0 px-4 py-4 md:px-6">
<h2 className="dark:text-bright-gray mb-4 text-lg font-bold text-[#141414] dark:text-[20px]">
{t('conversation.sources.text')}
</h2>
@@ -142,7 +142,7 @@ export default function SourcesPopup({
/>
</div>
<div className="mx-4 flex-grow overflow-y-auto rounded-md border border-[#D9D9D9] dark:border-dim-gray [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
<div className="dark:border-dim-gray mx-4 grow overflow-y-auto rounded-md border border-[#D9D9D9] [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
{options ? (
<>
{filteredOptions?.map((option: any, index: number) => {
@@ -156,7 +156,7 @@ export default function SourcesPopup({
return (
<div
key={index}
className="flex cursor-pointer items-center border-b border-[#D9D9D9] border-opacity-80 p-3 transition-colors hover:bg-gray-100 dark:border-dim-gray dark:text-[14px] dark:hover:bg-[#2C2E3C]"
className="border-opacity-80 dark:border-dim-gray flex cursor-pointer items-center border-b border-[#D9D9D9] p-3 transition-colors hover:bg-gray-100 dark:text-[14px] dark:hover:bg-[#2C2E3C]"
onClick={() => {
if (isSelected) {
dispatch(setSelectedDocs(null));
@@ -172,13 +172,13 @@ export default function SourcesPopup({
alt="Source"
width={14}
height={14}
className="mr-3 flex-shrink-0"
className="mr-3 shrink-0"
/>
<span className="mr-3 flex-grow overflow-hidden overflow-ellipsis whitespace-nowrap font-medium text-[#5D5D5D] dark:text-bright-gray">
<span className="dark:text-bright-gray mr-3 grow overflow-hidden font-medium text-ellipsis whitespace-nowrap text-[#5D5D5D]">
{option.name}
</span>
<div
className={`flex h-4 w-4 flex-shrink-0 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783]`}
className={`flex h-4 w-4 shrink-0 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783]`}
>
{isSelected && (
<img
@@ -195,16 +195,16 @@ export default function SourcesPopup({
})}
</>
) : (
<div className="p-4 text-center text-gray-500 dark:text-[14px] dark:text-bright-gray">
<div className="dark:text-bright-gray p-4 text-center text-gray-500 dark:text-[14px]">
{t('noSourcesAvailable')}
</div>
)}
</div>
<div className="flex-shrink-0 px-4 py-4 opacity-75 transition-opacity duration-200 hover:opacity-100 md:px-6">
<div className="shrink-0 px-4 py-4 opacity-75 transition-opacity duration-200 hover:opacity-100 md:px-6">
<a
href="/settings/documents"
className="inline-flex items-center gap-2 text-base font-medium text-violets-are-blue"
className="text-violets-are-blue inline-flex items-center gap-2 text-base font-medium"
onClick={onClose}
>
{t('settings.documents.goToDocuments')}
@@ -212,10 +212,10 @@ export default function SourcesPopup({
</a>
</div>
<div className="flex flex-shrink-0 justify-start px-4 py-3 md:px-6">
<div className="flex shrink-0 justify-start px-4 py-3 md:px-6">
<button
onClick={handleUploadClick}
className="w-auto rounded-full border border-violets-are-blue px-4 py-2 text-[14px] font-medium text-violets-are-blue transition-colors duration-200 hover:bg-violets-are-blue hover:text-white"
className="border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue w-auto rounded-full border px-4 py-2 text-[14px] font-medium transition-colors duration-200 hover:text-white"
>
{t('settings.documents.uploadNew')}
</button>

22
frontend/src/components/ToolsPopup.tsx
View File

@@ -136,7 +136,7 @@ export default function ToolsPopup({
return (
<div
ref={popupRef}
className="fixed z-[9999] rounded-lg border border-light-silver bg-lotion shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033] dark:border-dim-gray dark:bg-charleston-green-2"
className="border-light-silver bg-lotion dark:border-dim-gray dark:bg-charleston-green-2 fixed z-9999 rounded-lg border shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
style={{
top: popupPosition.showAbove ? popupPosition.top : undefined,
bottom: popupPosition.showAbove
@@ -150,7 +150,7 @@ export default function ToolsPopup({
}}
>
<div className="flex h-full flex-col">
<div className="flex-shrink-0 p-4">
<div className="shrink-0 p-4">
<h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
{t('settings.tools.label')}
</h3>
@@ -169,11 +169,11 @@ export default function ToolsPopup({
</div>
{loading ? (
<div className="flex flex-grow justify-center py-4">
<div className="flex grow justify-center py-4">
<div className="h-6 w-6 animate-spin rounded-full border-b-2 border-gray-900 dark:border-white"></div>
</div>
) : (
<div className="mx-4 flex-grow overflow-hidden rounded-md border border-[#D9D9D9] dark:border-dim-gray">
<div className="dark:border-dim-gray mx-4 grow overflow-hidden rounded-md border border-[#D9D9D9]">
<div className="h-full overflow-y-auto [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
{filteredTools.length === 0 ? (
<div className="flex h-full flex-col items-center justify-center py-8">
@@ -191,21 +191,21 @@ export default function ToolsPopup({
<div
key={tool.id}
onClick={() => updateToolStatus(tool.id, !tool.status)}
className="flex items-center justify-between border-b border-[#D9D9D9] p-3 hover:bg-gray-100 dark:border-dim-gray dark:hover:bg-charleston-green-3"
className="dark:border-dim-gray dark:hover:bg-charleston-green-3 flex items-center justify-between border-b border-[#D9D9D9] p-3 hover:bg-gray-100"
>
<div className="mr-3 flex flex-grow items-center">
<div className="mr-3 flex grow items-center">
<img
src={`/toolIcons/tool_${tool.name}.svg`}
alt={`${tool.displayName} icon`}
className="mr-4 h-5 w-5 flex-shrink-0"
className="mr-4 h-5 w-5 shrink-0"
/>
<div className="overflow-hidden">
<p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-xs font-medium text-gray-900 dark:text-white">
<p className="overflow-hidden text-xs font-medium text-ellipsis whitespace-nowrap text-gray-900 dark:text-white">
{tool.customName || tool.displayName}
</p>
</div>
</div>
<div className="flex flex-shrink-0 items-center">
<div className="flex shrink-0 items-center">
<div
className={`flex h-4 w-4 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783]`}
>
@@ -226,10 +226,10 @@ export default function ToolsPopup({
</div>
)}
<div className="flex-shrink-0 p-4 opacity-75 transition-opacity duration-200 hover:opacity-100">
<div className="shrink-0 p-4 opacity-75 transition-opacity duration-200 hover:opacity-100">
<a
href="/settings/tools"
className="inline-flex items-center text-base font-medium text-purple-30"
className="text-purple-30 inline-flex items-center text-base font-medium"
>
{t('settings.tools.manageTools')}
<img

10
frontend/src/conversation/Conversation.tsx
View File

@@ -220,7 +220,7 @@ export default function Conversation() {
}
/>
<div className="z-3 flex h-auto w-full max-w-[1300px] flex-col items-end self-center rounded-2xl bg-opacity-0 py-1 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
<div className="bg-opacity-0 z-3 flex h-auto w-full max-w-[1300px] flex-col items-end self-center rounded-2xl py-1 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
<div
{...getRootProps()}
className="flex w-full items-center rounded-[40px]"
@@ -239,17 +239,17 @@ export default function Conversation() {
/>
</div>
<p className="hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs text-gray-4000 dark:text-sonic-silver md:inline md:w-full">
<p className="text-gray-4000 dark:text-sonic-silver hidden w-screen self-center bg-transparent py-2 text-center text-xs md:inline md:w-full">
{t('tagline')}
</p>
</div>
{handleDragActive && (
<div className="pointer-events-none fixed left-0 top-0 z-30 flex size-full flex-col items-center justify-center bg-white bg-opacity-50 dark:bg-gray-alpha">
<div className="bg-opacity-50 dark:bg-gray-alpha pointer-events-none fixed top-0 left-0 z-30 flex size-full flex-col items-center justify-center bg-white">
<img className="filter dark:invert" src={DragFileUpload} />
<span className="px-2 text-2xl font-bold text-outer-space dark:text-silver">
<span className="text-outer-space dark:text-silver px-2 text-2xl font-bold">
{t('modals.uploadDoc.drag.title')}
</span>
<span className="text-s w-48 p-2 text-center text-outer-space dark:text-silver">
<span className="text-s text-outer-space dark:text-silver w-48 p-2 text-center">
{t('modals.uploadDoc.drag.description')}
</span>
</div>

136
frontend/src/conversation/ConversationBubble.tsx
View File

@@ -122,14 +122,14 @@ const ConversationBubble = forwardRef<
>
<div className="flex flex-col items-end">
{filesAttached && filesAttached.length > 0 && (
<div className="mb-4 mr-12 flex flex-wrap justify-end gap-2">
<div className="mr-12 mb-4 flex flex-wrap justify-end gap-2">
{filesAttached.map((file, index) => (
<div
key={index}
title={file.fileName}
className="flex items-center rounded-xl bg-[#EFF3F4] p-2 text-[14px] text-[#5D5D5D] dark:bg-[#393B3D] dark:text-bright-gray"
className="dark:text-bright-gray flex items-center rounded-xl bg-[#EFF3F4] p-2 text-[14px] text-[#5D5D5D] dark:bg-[#393B3D]"
>
<div className="mr-2 items-center justify-center rounded-lg bg-purple-30 p-[5.5px]">
<div className="bg-purple-30 mr-2 items-center justify-center rounded-lg p-[5.5px]">
<img
src={DocumentationDark}
alt="Attachment"
@@ -149,7 +149,7 @@ const ConversationBubble = forwardRef<
>
<Avatar
size="SMALL"
className="mt-2 flex-shrink-0 text-2xl"
className="mt-2 shrink-0 text-2xl"
avatar={
<img className="mr-1 rounded-full" width={30} src={UserIcon} />
}
@@ -157,7 +157,7 @@ const ConversationBubble = forwardRef<
{!isEditClicked && (
<>
<div className="relative mr-2 flex w-full flex-col">
<div className="ml-2 mr-2 flex max-w-full items-start gap-2 whitespace-pre-wrap break-words rounded-[28px] bg-gradient-to-b from-medium-purple to-slate-blue px-5 py-4 text-sm leading-normal text-white sm:text-base">
<div className="from-medium-purple to-slate-blue mr-2 ml-2 flex max-w-full items-start gap-2 rounded-[28px] bg-linear-to-b px-5 py-4 text-sm leading-normal break-words whitespace-pre-wrap text-white sm:text-base">
<div
ref={messageRef}
className={`${isQuestionCollapsed ? 'line-clamp-4' : ''} w-full`}
@@ -188,7 +188,7 @@ const ConversationBubble = forwardRef<
setIsEditClicked(true);
setEditInputBox(message ?? '');
}}
className={`mt-3 flex h-fit flex-shrink-0 cursor-pointer items-center rounded-full p-2 hover:bg-light-silver dark:hover:bg-[#35363B] ${isQuestionHovered || isEditClicked ? 'visible' : 'invisible'}`}
className={`hover:bg-light-silver mt-3 flex h-fit shrink-0 cursor-pointer items-center rounded-full p-2 dark:hover:bg-[#35363B] ${isQuestionHovered || isEditClicked ? 'visible' : 'invisible'}`}
>
<img src={Edit} alt="Edit" className="cursor-pointer" />
</button>
@@ -213,17 +213,17 @@ const ConversationBubble = forwardRef<
}}
rows={5}
value={editInputBox}
className="w-full resize-none rounded-3xl border border-silver px-4 py-3 text-base leading-relaxed text-carbon focus:outline-none dark:border-philippine-grey dark:bg-raisin-black dark:text-chinese-white"
className="border-silver text-carbon dark:border-philippine-grey dark:bg-raisin-black dark:text-chinese-white w-full resize-none rounded-3xl border px-4 py-3 text-base leading-relaxed focus:outline-hidden"
/>
<div className="flex items-center justify-end gap-2">
<button
className="rounded-full px-4 py-2 text-sm font-semibold text-purple-30 transition-colors hover:bg-gainsboro hover:text-chinese-black-2 dark:hover:bg-onyx-2 dark:hover:text-[#B9BCBE]"
className="text-purple-30 hover:bg-gainsboro hover:text-chinese-black-2 dark:hover:bg-onyx-2 rounded-full px-4 py-2 text-sm font-semibold transition-colors dark:hover:text-[#B9BCBE]"
onClick={() => setIsEditClicked(false)}
>
{t('conversation.edit.cancel')}
</button>
<button
className="rounded-full bg-purple-30 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-violets-are-blue dark:hover:bg-royal-purple"
className="bg-purple-30 hover:bg-violets-are-blue dark:hover:bg-royal-purple rounded-full px-4 py-2 text-sm font-medium text-white transition-colors"
onClick={handleEditClick}
>
{t('conversation.edit.update')}
@@ -283,7 +283,7 @@ const ConversationBubble = forwardRef<
bubble = (
<div
ref={ref}
className={`flex flex-wrap self-start ${className} group flex-col dark:text-bright-gray`}
className={`flex flex-wrap self-start ${className} group dark:text-bright-gray flex-col`}
>
{DisableSourceFE ||
type === 'ERROR' ||
@@ -311,7 +311,7 @@ const ConversationBubble = forwardRef<
{Array.from({ length: 4 }).map((_, index) => (
<div
key={index}
className="flex h-28 cursor-pointer flex-col items-start gap-1 rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
className="bg-gray-1000 text-purple-30 dark:bg-gun-metal flex h-28 cursor-pointer flex-col items-start gap-1 rounded-[20px] p-4 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
>
<span className="h-px w-10 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
<span className="h-px w-24 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
@@ -341,16 +341,16 @@ const ConversationBubble = forwardRef<
{t('conversation.sources.title')}
</p>
</div>
<div className="fade-in ml-3 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
<div className="fade-in mr-5 ml-3 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
<div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
{sources?.slice(0, 3)?.map((source, index) => (
<div key={index} className="relative">
<div
className="h-28 cursor-pointer rounded-[20px] bg-gray-1000 p-4 hover:bg-[#F1F1F1] dark:bg-gun-metal dark:hover:bg-[#2C2E3C]"
className="bg-gray-1000 dark:bg-gun-metal h-28 cursor-pointer rounded-[20px] p-4 hover:bg-[#F1F1F1] dark:hover:bg-[#2C2E3C]"
onMouseOver={() => setActiveTooltip(index)}
onMouseOut={() => setActiveTooltip(null)}
>
<p className="ellipsis-text h-12 break-words text-xs">
<p className="ellipsis-text h-12 text-xs break-words">
{source.text}
</p>
<div
@@ -390,11 +390,11 @@ const ConversationBubble = forwardRef<
</div>
{activeTooltip === index && (
<div
className={`absolute left-1/2 z-50 max-h-48 w-40 translate-x-[-50%] translate-y-[3px] rounded-xl bg-[#FBFBFB] p-4 text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver sm:w-56`}
className={`dark:bg-chinese-black dark:text-chinese-silver absolute left-1/2 z-50 max-h-48 w-40 translate-x-[-50%] translate-y-[3px] rounded-xl bg-[#FBFBFB] p-4 text-black shadow-xl sm:w-56`}
onMouseOver={() => setActiveTooltip(index)}
onMouseOut={() => setActiveTooltip(null)}
>
<p className="line-clamp-6 max-h-[164px] overflow-hidden text-ellipsis break-words rounded-md text-sm">
<p className="line-clamp-6 max-h-[164px] overflow-hidden rounded-md text-sm break-words text-ellipsis">
{source.text}
</p>
</div>
@@ -403,7 +403,7 @@ const ConversationBubble = forwardRef<
))}
{(sources?.length ?? 0) > 3 && (
<div
className="flex h-28 cursor-pointer flex-col-reverse rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
className="bg-gray-1000 text-purple-30 dark:bg-gun-metal flex h-28 cursor-pointer flex-col-reverse rounded-[20px] p-4 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
onClick={() => setIsSidebarOpen(true)}
>
<p className="ellipsis-text h-22 text-xs">
@@ -442,9 +442,9 @@ const ConversationBubble = forwardRef<
</p>
</div>
<div
className={`fade-in-bubble mr-5 flex max-w-full rounded-[28px] bg-gray-1000 px-7 py-[18px] dark:bg-gun-metal ${
className={`fade-in-bubble bg-gray-1000 dark:bg-gun-metal mr-5 flex max-w-full rounded-[28px] px-7 py-[18px] ${
type === 'ERROR'
? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000 dark:border-red-2000 dark:text-white'
? 'text-red-3000 dark:border-red-2000 relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal dark:text-white'
: 'flex-col rounded-3xl'
}`}
>
@@ -456,7 +456,7 @@ const ConversationBubble = forwardRef<
<Fragment key={index}>
{segment.type === 'text' ? (
<ReactMarkdown
className="fade-in whitespace-pre-wrap break-words leading-normal"
className="fade-in leading-normal break-words whitespace-pre-wrap"
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeKatex]}
components={{
@@ -474,9 +474,9 @@ const ConversationBubble = forwardRef<
const language = match ? match[1] : '';
return match ? (
<div className="group relative overflow-hidden rounded-[14px] border border-light-silver dark:border-raisin-black">
<div className="flex items-center justify-between bg-platinum px-2 py-1 dark:bg-eerie-black-2">
<span className="text-xs font-medium text-just-black dark:text-chinese-white">
<div className="group border-light-silver dark:border-raisin-black relative overflow-hidden rounded-[14px] border">
<div className="bg-platinum dark:bg-eerie-black-2 flex items-center justify-between px-2 py-1">
<span className="text-just-black dark:text-chinese-white text-xs font-medium">
{language}
</span>
<CopyButton
@@ -493,7 +493,7 @@ const ConversationBubble = forwardRef<
style={
isDarkTheme ? vscDarkPlus : oneLight
}
className="!mt-0"
className="mt-0!"
customStyle={{
margin: 0,
borderRadius: 0,
@@ -504,7 +504,7 @@ const ConversationBubble = forwardRef<
</SyntaxHighlighter>
</div>
) : (
<code className="whitespace-pre-line rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal dark:bg-independence dark:text-bright-gray">
<code className="dark:bg-independence dark:text-bright-gray rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal whitespace-pre-line">
{children}
</code>
);
@@ -512,7 +512,7 @@ const ConversationBubble = forwardRef<
ul({ children }) {
return (
<ul
className={`list-inside list-disc whitespace-normal pl-4 ${classes.list}`}
className={`list-inside list-disc pl-4 whitespace-normal ${classes.list}`}
>
{children}
</ul>
@@ -521,7 +521,7 @@ const ConversationBubble = forwardRef<
ol({ children }) {
return (
<ol
className={`list-inside list-decimal whitespace-normal pl-4 ${classes.list}`}
className={`list-inside list-decimal pl-4 whitespace-normal ${classes.list}`}
>
{children}
</ol>
@@ -529,8 +529,8 @@ const ConversationBubble = forwardRef<
},
table({ children }) {
return (
<div className="relative overflow-x-auto rounded-lg border border-silver/40 dark:border-silver/40">
<table className="w-full text-left text-gray-700 dark:text-bright-gray">
<div className="border-silver/40 dark:border-silver/40 relative overflow-x-auto rounded-lg border">
<table className="dark:text-bright-gray w-full text-left text-gray-700">
{children}
</table>
</div>
@@ -538,14 +538,14 @@ const ConversationBubble = forwardRef<
},
thead({ children }) {
return (
<thead className="bg-gray-50 text-xs uppercase text-gray-900 dark:bg-[#26272E]/50 dark:text-bright-gray">
<thead className="dark:text-bright-gray bg-gray-50 text-xs text-gray-900 uppercase dark:bg-[#26272E]/50">
{children}
</thead>
);
},
tr({ children }) {
return (
<tr className="border-b border-gray-200 odd:bg-white even:bg-gray-50 dark:border-silver/40 dark:odd:bg-[#26272E] dark:even:bg-[#26272E]/50">
<tr className="dark:border-silver/40 border-b border-gray-200 odd:bg-white even:bg-gray-50 dark:odd:bg-[#26272E] dark:even:bg-[#26272E]/50">
{children}
</tr>
);
@@ -586,14 +586,14 @@ const ConversationBubble = forwardRef<
{message && (
<div className="my-2 ml-2 flex justify-start">
<div
className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'lg:group-hover:visible' : 'hidden'}`}
>
<div>
<CopyButton textToCopy={message} />
</div>
</div>
<div
className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'lg:group-hover:visible' : 'hidden'}`}
>
<div>
<SpeakButton text={message} />
@@ -611,21 +611,21 @@ const ConversationBubble = forwardRef<
feedback === 'LIKE' || isLikeClicked
? 'visible'
: 'lg:invisible'
} ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} ${feedback === 'DISLIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
} ${type !== 'ERROR' ? 'lg:group-hover:visible' : ''} ${feedback === 'DISLIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
>
<div>
<div
className={`flex items-center justify-center rounded-full p-2 ${
isLikeHovered
? 'bg-[#EEEEEE] dark:bg-purple-taupe'
: 'bg-[#ffffff] dark:bg-transparent'
? 'dark:bg-purple-taupe bg-[#EEEEEE]'
: 'bg-white-3000 dark:bg-transparent'
}`}
>
<Like
className={`cursor-pointer ${
isLikeClicked || feedback === 'LIKE'
? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
: 'fill-none stroke-gray-4000'
: 'stroke-gray-4000 fill-none'
}`}
onClick={() => {
if (feedback === undefined || feedback === null) {
@@ -650,21 +650,21 @@ const ConversationBubble = forwardRef<
feedback === 'DISLIKE' || isLikeClicked
? 'visible'
: 'lg:invisible'
} ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} ${feedback === 'LIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
} ${type !== 'ERROR' ? 'lg:group-hover:visible' : ''} ${feedback === 'LIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
>
<div>
<div
className={`flex items-center justify-center rounded-full p-2 ${
isDislikeHovered
? 'bg-[#EEEEEE] dark:bg-purple-taupe'
: 'bg-[#ffffff] dark:bg-transparent'
? 'dark:bg-purple-taupe bg-[#EEEEEE]'
: 'bg-white-3000 dark:bg-transparent'
}`}
>
<Dislike
className={`cursor-pointer ${
isDislikeClicked || feedback === 'DISLIKE'
? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
: 'fill-none stroke-gray-4000'
: 'stroke-gray-4000 fill-none'
}`}
onClick={() => {
if (feedback === undefined || feedback === null) {
@@ -728,7 +728,7 @@ function AllSources(sources: AllSourcesProps) {
return (
<div
key={index}
className={`group/card relative w-full rounded-[20px] bg-gray-1000 p-4 transition-colors hover:bg-[#F1F1F1] dark:bg-[#28292E] dark:hover:bg-[#2C2E3C] ${
className={`group/card bg-gray-1000 relative w-full rounded-[20px] p-4 transition-colors hover:bg-[#F1F1F1] dark:bg-[#28292E] dark:hover:bg-[#2C2E3C] ${
isExternalSource ? 'cursor-pointer' : ''
}`}
onClick={() =>
@@ -737,7 +737,7 @@ function AllSources(sources: AllSourcesProps) {
>
<p
title={source.title}
className={`ellipsis-text break-words text-left text-sm font-semibold ${
className={`ellipsis-text text-left text-sm font-semibold break-words ${
isExternalSource
? 'group-hover/card:text-purple-30 dark:group-hover/card:text-[#8C67D7]'
: ''
@@ -750,13 +750,13 @@ function AllSources(sources: AllSourcesProps) {
alt="External Link"
className={`ml-1 inline h-3 w-3 object-fill dark:invert ${
isExternalSource
? 'group-hover/card:contrast-[50%] group-hover/card:hue-rotate-[235deg] group-hover/card:invert-[31%] group-hover/card:saturate-[752%] group-hover/card:sepia-[80%] group-hover/card:filter'
? 'group-hover/card:contrast-50 group-hover/card:hue-rotate-235 group-hover/card:invert-31 group-hover/card:saturate-752 group-hover/card:sepia-80 group-hover/card:filter'
: ''
}`}
/>
)}
</p>
<p className="mt-3 line-clamp-4 break-words rounded-md text-left text-xs text-black dark:text-chinese-silver">
<p className="dark:text-chinese-silver mt-3 line-clamp-4 rounded-md text-left text-xs break-words text-black">
{source.text}
</p>
</div>
@@ -796,18 +796,18 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
</button>
</div>
{isToolCallsOpen && (
<div className="fade-in ml-3 mr-5 w-[90vw] md:w-[70vw] lg:w-full">
<div className="fade-in mr-5 ml-3 w-[90vw] md:w-[70vw] lg:w-full">
<div className="grid grid-cols-1 gap-2">
{toolCalls.map((toolCall, index) => (
<Accordion
key={`tool-call-${index}`}
title={`${toolCall.tool_name} - ${toolCall.action_name.substring(0, toolCall.action_name.lastIndexOf('_'))}`}
className="w-full rounded-[20px] bg-gray-1000 hover:bg-[#F1F1F1] dark:bg-gun-metal dark:hover:bg-[#2C2E3C]"
className="bg-gray-1000 dark:bg-gun-metal w-full rounded-[20px] hover:bg-[#F1F1F1] dark:hover:bg-[#2C2E3C]"
titleClassName="px-6 py-2 text-sm font-semibold"
>
<div className="flex flex-col gap-1">
<div className="flex flex-col rounded-2xl border border-silver dark:border-silver/20">
<p className="flex flex-row items-center justify-between break-words rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold dark:bg-[#191919]">
<div className="border-silver dark:border-silver/20 flex flex-col rounded-2xl border">
<p className="dark:bg-eerie-black-2 flex flex-row items-center justify-between rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold break-words">
<span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
Arguments
</span>{' '}
@@ -815,7 +815,7 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
textToCopy={JSON.stringify(toolCall.arguments, null, 2)}
/>
</p>
<p className="dark:tex break-words rounded-b-2xl p-2 font-mono text-sm dark:bg-[#222327]">
<p className="dark:tex dark:bg-raisin-black rounded-b-2xl p-2 font-mono text-sm break-words">
<span
className="leading-[23px] text-black dark:text-gray-400"
style={{ fontFamily: 'IBMPlexMono-Medium' }}
@@ -824,8 +824,8 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
</span>
</p>
</div>
<div className="flex flex-col rounded-2xl border border-silver dark:border-silver/20">
<p className="flex flex-row items-center justify-between break-words rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold dark:bg-[#191919]">
<div className="border-silver dark:border-silver/20 flex flex-col rounded-2xl border">
<p className="dark:bg-eerie-black-2 flex flex-row items-center justify-between rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold break-words">
<span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
Response
</span>{' '}
@@ -834,12 +834,12 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
/>
</p>
{toolCall.status === 'pending' && (
<span className="flex w-full items-center justify-center rounded-b-2xl p-2 dark:bg-[#222327]">
<span className="dark:bg-raisin-black flex w-full items-center justify-center rounded-b-2xl p-2">
<Spinner size="small" />
</span>
)}
{toolCall.status === 'completed' && (
<p className="break-words rounded-b-2xl p-2 font-mono text-sm dark:bg-[#222327]">
<p className="dark:bg-raisin-black rounded-b-2xl p-2 font-mono text-sm break-words">
<span
className="leading-[23px] text-black dark:text-gray-400"
style={{ fontFamily: 'IBMPlexMono-Medium' }}
@@ -895,10 +895,10 @@ function Thought({
</button>
</div>
{isThoughtOpen && (
<div className="fade-in ml-2 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
<div className="rounded-[28px] bg-gray-1000 px-7 py-[18px] dark:bg-gun-metal">
<div className="fade-in mr-5 ml-2 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
<div className="bg-gray-1000 dark:bg-gun-metal rounded-[28px] px-7 py-[18px]">
<ReactMarkdown
className="fade-in whitespace-pre-wrap break-words leading-normal"
className="fade-in leading-normal break-words whitespace-pre-wrap"
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeKatex]}
components={{
@@ -908,9 +908,9 @@ function Thought({
const language = match ? match[1] : '';
return match ? (
<div className="group relative overflow-hidden rounded-[14px] border border-light-silver dark:border-raisin-black">
<div className="flex items-center justify-between bg-platinum px-2 py-1 dark:bg-eerie-black-2">
<span className="text-xs font-medium text-just-black dark:text-chinese-white">
<div className="group border-light-silver dark:border-raisin-black relative overflow-hidden rounded-[14px] border">
<div className="bg-platinum dark:bg-eerie-black-2 flex items-center justify-between px-2 py-1">
<span className="text-just-black dark:text-chinese-white text-xs font-medium">
{language}
</span>
<CopyButton
@@ -922,7 +922,7 @@ function Thought({
PreTag="div"
language={language}
style={isDarkTheme ? vscDarkPlus : oneLight}
className="!mt-0"
className="mt-0!"
customStyle={{
margin: 0,
borderRadius: 0,
@@ -933,29 +933,29 @@ function Thought({
</SyntaxHighlighter>
</div>
) : (
<code className="whitespace-pre-line rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal dark:bg-independence dark:text-bright-gray">
<code className="dark:bg-independence dark:text-bright-gray rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal whitespace-pre-line">
{children}
</code>
);
},
ul({ children }) {
return (
<ul className="list-inside list-disc whitespace-normal pl-4">
<ul className="list-inside list-disc pl-4 whitespace-normal">
{children}
</ul>
);
},
ol({ children }) {
return (
<ol className="list-inside list-decimal whitespace-normal pl-4">
<ol className="list-inside list-decimal pl-4 whitespace-normal">
{children}
</ol>
);
},
table({ children }) {
return (
<div className="relative overflow-x-auto rounded-lg border border-silver/40 dark:border-silver/40">
<table className="w-full text-left text-gray-700 dark:text-bright-gray">
<div className="border-silver/40 dark:border-silver/40 relative overflow-x-auto rounded-lg border">
<table className="dark:text-bright-gray w-full text-left text-gray-700">
{children}
</table>
</div>
@@ -963,14 +963,14 @@ function Thought({
},
thead({ children }) {
return (
<thead className="bg-gray-50 text-xs uppercase text-gray-900 dark:bg-[#26272E]/50 dark:text-bright-gray">
<thead className="dark:text-bright-gray bg-gray-50 text-xs text-gray-900 uppercase dark:bg-[#26272E]/50">
{children}
</thead>
);
},
tr({ children }) {
return (
<tr className="border-b border-gray-200 odd:bg-white even:bg-gray-50 dark:border-silver/40 dark:odd:bg-[#26272E] dark:even:bg-[#26272E]/50">
<tr className="dark:border-silver/40 border-b border-gray-200 odd:bg-white even:bg-gray-50 dark:odd:bg-[#26272E] dark:even:bg-[#26272E]/50">
{children}
</tr>
);

10
frontend/src/conversation/ConversationTile.tsx
View File

@@ -192,7 +192,7 @@ export default function ConversationTile({
conversationId !== conversation.id &&
selectConversation(conversation.id);
}}
className={`mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal ${
className={`hover:bg-bright-gray dark:hover:bg-dark-charcoal mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl pl-4 ${
conversationId === conversation.id || isOpen || isHovered || isEdit
? 'bg-bright-gray dark:bg-dark-charcoal'
: ''
@@ -203,19 +203,19 @@ export default function ConversationTile({
<input
autoFocus
type="text"
className="h-6 w-full bg-transparent px-1 text-sm font-normal leading-6 focus:outline-[#0075FF]"
className="h-6 w-full bg-transparent px-1 text-sm leading-6 font-normal focus:outline-[#0075FF]"
value={conversationName}
onChange={(e) => setConversationsName(e.target.value)}
onKeyDown={handleRenameKeyDown}
/>
) : (
<p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-bright-gray">
<p className="text-eerie-black dark:text-bright-gray my-auto overflow-hidden text-sm leading-6 font-normal text-ellipsis whitespace-nowrap">
{conversationName}
</p>
)}
</div>
{(conversationId === conversation.id || isHovered || isOpen) && (
<div className="flex text-white dark:text-sonic-silver" ref={menuRef}>
<div className="dark:text-sonic-silver flex text-white" ref={menuRef}>
{isEdit ? (
<div className="flex gap-1">
<img
@@ -234,7 +234,7 @@ export default function ConversationTile({
<img
src={Exit}
alt="Exit"
className={`mr-4 mt-px h-3 w-3 cursor-pointer filter hover:opacity-50 dark:invert`}
className={`mt-px mr-4 h-3 w-3 cursor-pointer filter hover:opacity-50 dark:invert`}
id={`img-${conversation.id}`}
onClick={(event: SyntheticEvent) => {
event.stopPropagation();

14
frontend/src/conversation/SharedConversation.tsx
View File

@@ -138,18 +138,18 @@ export const SharedConversation = () => {
twitterTitle={title}
twitterDescription="Shared conversations with DocsGPT"
/>
<div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black">
<div className="w-full max-w-[1200px] border-b p-2 dark:border-b-silver md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
<h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
<div className="dark:bg-raisin-black flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden">
<div className="dark:border-b-silver w-full max-w-[1200px] border-b p-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
<h1 className="font-semi-bold text-chinese-black dark:text-chinese-silver text-4xl">
{title}
</h1>
<h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
<h2 className="font-semi-bold text-chinese-black dark:text-chinese-silver text-base">
{t('sharedConv.subtitle')}{' '}
<a href="/" className="text-[#007DFF]">
DocsGPT
</a>
</h2>
<h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
<h2 className="font-semi-bold text-chinese-black dark:text-chinese-silver text-base">
{date}
</h2>
</div>
@@ -172,13 +172,13 @@ export const SharedConversation = () => {
) : (
<button
onClick={() => navigate('/')}
className="mb-14 w-fit rounded-full bg-purple-30 px-5 py-3 text-white shadow-xl transition-colors duration-200 hover:bg-violets-are-blue sm:mb-0"
className="bg-purple-30 hover:bg-violets-are-blue mb-14 w-fit rounded-full px-5 py-3 text-white shadow-xl transition-colors duration-200 sm:mb-0"
>
{t('sharedConv.button')}
</button>
)}
<p className="hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs text-gray-4000 dark:text-sonic-silver md:inline md:w-full">
<p className="text-gray-4000 dark:text-sonic-silver hidden w-screen self-center bg-transparent py-2 text-center text-xs md:inline md:w-full">
{t('sharedConv.meta')}
</p>
</div>

216
frontend/src/index.css
View File

@@ -1,113 +1,211 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap')
layer(base);
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
:root {
--viewport-height: 100vh;
font-synthesis: none !important;
@custom-variant dark (&:is(.dark *));
@theme {
--font-roboto: Roboto, sans-serif;
--color-eerie-black: #212121;
--color-black-1000: #343541;
--color-jet: #343541;
--color-gray-alpha: rgba(0, 0, 0, 0.64);
--color-gray-1000: #f6f6f6;
--color-gray-2000: rgba(0, 0, 0, 0.5);
--color-gray-3000: rgba(243, 243, 243, 1);
--color-gray-4000: #949494;
--color-gray-5000: #bbbbbb;
--color-gray-6000: #757575;
--color-red-1000: rgb(254, 202, 202);
--color-red-2000: #f44336;
--color-red-3000: #621b16;
--color-blue-1000: #7d54d1;
--color-blue-2000: #002b49;
--color-blue-3000: #4b02e2;
--color-purple-30: #7d54d1;
--color-purple-3000: rgb(230, 222, 247);
--color-blue-4000: rgba(0, 125, 255, 0.36);
--color-blue-5000: rgba(0, 125, 255);
--color-green-2000: #0fff50;
--color-light-gray: #edeef0;
--color-white-3000: #ffffff;
--color-just-black: #00000;
--color-purple-taupe: #464152;
--color-dove-gray: #6c6c6c;
--color-silver: #c4c4c4;
--color-rainy-gray: #a4a4a4;
--color-raisin-black: #222327;
--color-chinese-black: #161616;
--color-chinese-silver: #cdcdcd;
--color-dark-charcoal: #2f3036;
--color-bright-gray: #ebebeb;
--color-outer-space: #444654;
--color-gun-metal: #2e303e;
--color-sonic-silver: #747474;
--color-soap: #d8ccf1;
--color-independence: #54546d;
--color-philippine-yellow: #ffc700;
--color-chinese-white: #e0e0e0;
--color-dark-gray: #aaaaaa;
--color-dim-gray: #6a6a6a;
--color-cultured: #f4f4f4;
--color-charleston-green: #2b2c31;
--color-charleston-green-2: #26272e;
--color-charleston-green-3: #26272a;
--color-grey: #7e7e7e;
--color-lotion: #fbfbfb;
--color-platinum: #e6e6e6;
--color-eerie-black-2: #191919;
--color-light-silver: #d9d9d9;
--color-carbon: #2e2e2e;
--color-onyx: #35363b;
--color-royal-purple: #6c4ab0;
--color-chinese-black-2: #0f1419;
--color-gainsboro: #d9dcde;
--color-onyx-2: #35383c;
--color-philippine-grey: #929292;
--color-charcoal-grey: #53545d;
--color-rosso-corsa: #d30000;
--color-north-texas-green: #0c9d35;
--color-medium-purple: #8d66dd;
--color-slate-blue: #6f5fca;
--color-old-silver: #848484;
--color-arsenic: #4d4e58;
--color-light-gainsboro: #d7d7d7;
--color-raisin-black-light: #18181b;
--color-gunmetal: #32333b;
--color-sonic-silver-light: #7f7f82;
--color-violets-are-blue: #976af3;
}
@supports (height: 100dvh) {
:root {
--viewport-height: 100dvh; /* Use dvh where supported */
/*
The default border color has changed to `currentcolor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
body.dark {
background-color: #202124; /* raisin-black */
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
.dark ::-webkit-scrollbar-track {
background: #2f3036;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 40px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #b1afaf;
}
@layer utilities {
@utility no-scrollbar {
/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
@utility scrollbar-thin {
/* Thin scrollbar utility */
.scrollbar-thin::-webkit-scrollbar {
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
&::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
&::-webkit-scrollbar-thumb {
background: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
&::-webkit-scrollbar-thumb:hover {
background: rgba(156, 163, 175, 0.7);
}
/* For Firefox */
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}
scrollbar-width: thin;
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}
@layer components {
.table-default {
@apply block w-full table-auto justify-center overflow-auto rounded-xl border border-silver text-center dark:border-silver/40 dark:text-bright-gray;
}
@utility table-default {
@apply block w-full table-auto justify-center overflow-auto rounded-xl border border-silver text-center dark:border-silver/40 dark:text-bright-gray;
.table-default th {
& th {
@apply text-nowrap p-4 font-normal text-gray-400;
}
.table-default th {
& th {
flex: 1;
}
.table-default th:last-child {
& th:last-child {
flex: 0;
}
.table-default td {
& td {
@apply w-full border-t border-silver px-4 py-2 dark:border-silver/40;
}
.table-default td:last-child {
& td:last-child {
@apply border-r-0;
}
.table-default th,
.table-default td {
& th {
min-width: 150px;
max-width: 320px;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: grey transparent;
}
& td {
min-width: 150px;
max-width: 320px;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: grey transparent;
}
}
@layer utilities {
:root {
--viewport-height: 100vh;
font-synthesis: none !important;
}
@supports (height: 100dvh) {
:root {
--viewport-height: 100dvh; /* Use dvh where supported */
}
}
body.dark {
background-color: #202124; /* raisin-black */
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
.dark ::-webkit-scrollbar-track {
background: #2f3036;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 40px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #b1afaf;
}
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

8
frontend/src/modals/AddToolModal.tsx
View File

@@ -104,7 +104,7 @@ export default function AddToolModal({
>
<div className="flex h-full flex-col">
<div>
<h2 className="px-3 text-xl font-semibold text-jet dark:text-bright-gray">
<h2 className="text-jet dark:text-bright-gray px-3 text-xl font-semibold">
{t('settings.tools.selectToolSetup')}
</h2>
<div className="mt-5 h-[73vh] overflow-auto px-3 py-px">
@@ -119,7 +119,7 @@ export default function AddToolModal({
role="button"
tabIndex={0}
key={index}
className="flex h-52 w-full cursor-pointer flex-col justify-between rounded-2xl border border-light-gainsboro bg-white-3000 p-6 hover:border-[#9d9d9d] dark:border-arsenic dark:bg-gunmetal hover:dark:border-[#717179]"
className="border-light-gainsboro bg-white-3000 dark:border-arsenic dark:bg-gunmetal flex h-52 w-full cursor-pointer flex-col justify-between rounded-2xl border p-6 hover:border-[#9d9d9d] dark:hover:border-[#717179]"
onClick={() => {
setSelectedTool(tool);
handleAddTool(tool);
@@ -142,11 +142,11 @@ export default function AddToolModal({
<div className="mt-[9px]">
<p
title={tool.displayName}
className="truncate px-1 text-[13px] font-semibold capitalize leading-relaxed text-raisin-black-light dark:text-bright-gray"
className="text-raisin-black-light dark:text-bright-gray truncate px-1 text-[13px] leading-relaxed font-semibold capitalize"
>
{tool.displayName}
</p>
<p className="mt-1 h-24 overflow-auto px-1 text-[12px] leading-relaxed text-old-silver dark:text-sonic-silver-light">
<p className="text-old-silver dark:text-sonic-silver-light mt-1 h-24 overflow-auto px-1 text-[12px] leading-relaxed">
{tool.description}
</p>
</div>

18
frontend/src/modals/ChunkModal.tsx
View File

@@ -37,7 +37,7 @@ export default function ChunkModal({
const content = (
<div>
<h2 className="px-3 text-xl font-semibold text-jet dark:text-bright-gray">
<h2 className="text-jet dark:text-bright-gray px-3 text-xl font-semibold">
{t(`modals.chunk.${type === 'ADD' ? 'add' : 'edit'}`)}
</h2>
<div className="relative mt-6 px-3">
@@ -51,13 +51,13 @@ export default function ChunkModal({
/>
</div>
<div className="relative mt-6 px-3">
<div className="rounded-lg border border-silver pb-1 pt-3 dark:border-silver/40">
<span className="absolute -top-2 left-5 rounded-lg bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
<div className="border-silver dark:border-silver/40 rounded-lg border pt-3 pb-1">
<span className="text-gray-4000 dark:text-silver absolute -top-2 left-5 rounded-lg bg-white px-2 text-xs dark:bg-[#26272E]">
{t('modals.chunk.bodyText')}
</span>
<textarea
id="chunk-body-text"
className="h-60 max-h-60 w-full resize-none px-3 outline-none dark:bg-transparent dark:text-white"
className="h-60 max-h-60 w-full resize-none px-3 outline-hidden dark:bg-transparent dark:text-white"
value={chunkText}
onChange={(e) => setChunkText(e.target.value)}
aria-label={t('modals.chunk.promptText')}
@@ -72,7 +72,7 @@ export default function ChunkModal({
handleSubmit(title, chunkText);
setModalState('INACTIVE');
}}
className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue"
className="bg-purple-30 hover:bg-violets-are-blue rounded-3xl px-5 py-2 text-sm text-white transition-all"
>
{t('modals.chunk.add')}
</button>
@@ -80,7 +80,7 @@ export default function ChunkModal({
onClick={() => {
setModalState('INACTIVE');
}}
className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
className="dark:text-light-gray cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
>
{t('modals.chunk.close')}
</button>
@@ -88,7 +88,7 @@ export default function ChunkModal({
) : (
<div className="mt-8 flex w-full items-center justify-between px-3">
<button
className="text-nowrap rounded-full border border-solid border-red-500 px-5 py-2 text-sm text-red-500 hover:bg-red-500 hover:text-white"
className="rounded-full border border-solid border-red-500 px-5 py-2 text-sm text-nowrap text-red-500 hover:bg-red-500 hover:text-white"
onClick={() => {
setDeleteModal('ACTIVE');
}}
@@ -101,7 +101,7 @@ export default function ChunkModal({
handleSubmit(title, chunkText);
setModalState('INACTIVE');
}}
className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue"
className="bg-purple-30 hover:bg-violets-are-blue rounded-3xl px-5 py-2 text-sm text-white transition-all"
>
{t('modals.chunk.update')}
</button>
@@ -109,7 +109,7 @@ export default function ChunkModal({
onClick={() => {
setModalState('INACTIVE');
}}
className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
className="dark:text-light-gray cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
>
{t('modals.chunk.close')}
</button>

24
frontend/src/preferences/PromptsModal.tsx
View File

@@ -25,10 +25,10 @@ function AddPrompt({
return (
<div>
<p className="mb-1 text-xl text-jet dark:text-bright-gray">
<p className="text-jet dark:text-bright-gray mb-1 text-xl">
{t('modals.prompts.addPrompt')}
</p>
<p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
<p className="text-sonic-silver mb-7 text-xs dark:text-[#7F7F82]">
{t('modals.prompts.addDescription')}
</p>
<div>
@@ -41,8 +41,8 @@ function AddPrompt({
labelBgClassName="bg-white dark:bg-[#26272E]"
borderVariant="thin"
/>
<div className="relative left-3 top-[7px]">
<span className="bg-white px-1 text-xs text-silver dark:bg-[#26272E] dark:text-silver">
<div className="relative top-[7px] left-3">
<span className="text-silver dark:text-silver bg-white px-1 text-xs dark:bg-[#26272E]">
{t('modals.prompts.promptText')}
</span>
</div>
@@ -51,7 +51,7 @@ function AddPrompt({
</label>
<textarea
id="new-prompt-content"
className="h-56 w-full resize-none rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
className="border-silver dark:border-silver/40 h-56 w-full resize-none rounded-lg border-2 px-3 py-2 outline-hidden dark:bg-transparent dark:text-white"
value={newPromptContent}
onChange={(e) => setNewPromptContent(e.target.value)}
aria-label="Prompt Text"
@@ -60,7 +60,7 @@ function AddPrompt({
<div className="mt-6 flex flex-row-reverse">
<button
onClick={handleAddPrompt}
className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue disabled:hover:bg-purple-30"
className="bg-purple-30 hover:bg-violets-are-blue disabled:hover:bg-purple-30 rounded-3xl px-5 py-2 text-sm text-white transition-all"
disabled={disableSave}
title={
disableSave && newPromptName ? t('modals.prompts.nameExists') : ''
@@ -97,10 +97,10 @@ function EditPrompt({
return (
<div>
<div className="">
<p className="mb-1 text-xl text-jet dark:text-bright-gray">
<p className="text-jet dark:text-bright-gray mb-1 text-xl">
{t('modals.prompts.editPrompt')}
</p>
<p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
<p className="text-sonic-silver mb-7 text-xs dark:text-[#7F7F82]">
{t('modals.prompts.editDescription')}
</p>
<div>
@@ -113,8 +113,8 @@ function EditPrompt({
labelBgClassName="bg-white dark:bg-charleston-green-2"
borderVariant="thin"
/>
<div className="relative left-3 top-[7px]">
<span className="bg-white px-1 text-xs text-silver dark:bg-charleston-green-2 dark:text-silver">
<div className="relative top-[7px] left-3">
<span className="text-silver dark:bg-charleston-green-2 dark:text-silver bg-white px-1 text-xs">
{t('modals.prompts.promptText')}
</span>
</div>
@@ -123,7 +123,7 @@ function EditPrompt({
</label>
<textarea
id="edit-prompt-content"
className="h-56 w-full resize-none rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
className="border-silver dark:border-silver/40 h-56 w-full resize-none rounded-lg border-2 px-3 py-2 outline-hidden dark:bg-transparent dark:text-white"
value={editPromptContent}
onChange={(e) => setEditPromptContent(e.target.value)}
aria-label="Prompt Text"
@@ -131,7 +131,7 @@ function EditPrompt({
</div>
<div className="mt-6 flex flex-row-reverse gap-4">
<button
className={`rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue disabled:hover:bg-purple-30 ${
className={`bg-purple-30 hover:bg-violets-are-blue disabled:hover:bg-purple-30 rounded-3xl px-5 py-2 text-sm text-white transition-all ${
currentPromptEdit.type === 'public'
? 'cursor-not-allowed opacity-50'
: ''

24
frontend/src/settings/APIKeys.tsx
View File

@@ -102,9 +102,9 @@ export default function APIKeys() {
return (
<div className="mt-8 flex w-full max-w-full flex-col overflow-hidden">
<div className="relative flex flex-grow flex-col">
<div className="relative flex grow flex-col">
<div className="mb-6">
<h2 className="text-base font-medium text-sonic-silver">
<h2 className="text-sonic-silver text-base font-medium">
{t('settings.apiKeys.description')}
</h2>
</div>
@@ -112,7 +112,7 @@ export default function APIKeys() {
<div className="mb-6 flex flex-col items-start justify-end gap-3 sm:flex-row sm:items-center">
<button
onClick={() => setCreateModal(true)}
className="flex h-[30px] w-[108px] items-center justify-center rounded-full bg-purple-30 text-sm text-white hover:bg-violets-are-blue"
className="bg-purple-30 hover:bg-violets-are-blue flex h-[30px] w-[108px] items-center justify-center rounded-full text-sm text-white"
title={t('settings.apiKeys.createNew')}
>
{t('settings.apiKeys.createNew')}
@@ -120,18 +120,18 @@ export default function APIKeys() {
</div>
<div className="relative w-full">
<div className="overflow-hidden rounded-md border border-gray-300 dark:border-silver/40">
<div className="dark:border-silver/40 overflow-hidden rounded-md border border-gray-300">
<div className="table-scroll overflow-x-auto">
<table className="w-full table-auto">
<thead>
<tr className="border-b border-gray-300 dark:border-silver/40">
<th className="w-[35%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
<tr className="dark:border-silver/40 border-b border-gray-300">
<th className="text-sonic-silver w-[35%] px-4 py-3 text-left text-xs font-medium">
{t('settings.apiKeys.name')}
</th>
<th className="w-[35%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
<th className="text-sonic-silver w-[35%] px-4 py-3 text-left text-xs font-medium">
{t('settings.apiKeys.sourceDoc')}
</th>
<th className="w-[25%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
<th className="text-sonic-silver w-[25%] px-4 py-3 text-left text-xs font-medium">
<span className="hidden sm:inline">
{t('settings.apiKeys.key')}
</span>
@@ -144,7 +144,7 @@ export default function APIKeys() {
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-300 dark:divide-silver/40">
<tbody className="dark:divide-silver/40 divide-y divide-gray-300">
{loading ? (
<SkeletonLoader component="table" />
) : !apiKeys?.length ? (
@@ -163,12 +163,12 @@ export default function APIKeys() {
key={element.id}
className="group transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50"
>
<td className="w-[35%] min-w-48 max-w-0 px-4 py-4 text-sm font-semibold text-gray-700 dark:text-[#E0E0E0]">
<td className="w-[35%] max-w-0 min-w-48 px-4 py-4 text-sm font-semibold text-gray-700 dark:text-[#E0E0E0]">
<div className="truncate" title={element.name}>
{element.name}
</div>
</td>
<td className="w-[35%] min-w-48 max-w-0 px-4 py-4 text-sm text-gray-700 dark:text-[#E0E0E0]">
<td className="w-[35%] max-w-0 min-w-48 px-4 py-4 text-sm text-gray-700 dark:text-[#E0E0E0]">
<div className="truncate" title={element.source}>
{element.source}
</div>
@@ -187,7 +187,7 @@ export default function APIKeys() {
name: element.name,
})
}
className="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
>
<img
src={Trash}

42
frontend/src/settings/Documents.tsx
View File

@@ -286,9 +286,9 @@ export default function Documents({
/>
) : (
<div className="mt-8 flex w-full max-w-full flex-col overflow-hidden">
<div className="relative flex flex-grow flex-col">
<div className="relative flex grow flex-col">
<div className="mb-6">
<h2 className="text-base font-medium text-sonic-silver">
<h2 className="text-sonic-silver text-base font-medium">
{t('settings.documents.title')}
</h2>
</div>
@@ -312,7 +312,7 @@ export default function Documents({
/>
</div>
<button
className="flex h-[32px] min-w-[108px] items-center justify-center whitespace-normal rounded-full bg-purple-30 px-4 text-sm text-white hover:bg-violets-are-blue"
className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
title={t('settings.documents.addNew')}
onClick={() => {
setIsOnboarding(false);
@@ -323,15 +323,15 @@ export default function Documents({
</button>
</div>
<div className="relative w-full">
<div className="overflow-hidden rounded-md border border-gray-300 dark:border-silver/40">
<div className="dark:border-silver/40 overflow-hidden rounded-md border border-gray-300">
<div className="table-scroll overflow-x-auto">
<table className="w-full table-auto">
<thead>
<tr className="border-b border-gray-300 dark:border-silver/40">
<th className="w-[45%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
<tr className="dark:border-silver/40 border-b border-gray-300">
<th className="text-sonic-silver w-[45%] px-4 py-3 text-left text-xs font-medium">
{t('settings.documents.name')}
</th>
<th className="w-[30%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
<th className="text-sonic-silver w-[30%] px-4 py-3 text-left text-xs font-medium">
<div className="flex items-center justify-start">
{t('settings.documents.date')}
<img
@@ -342,7 +342,7 @@ export default function Documents({
/>
</div>
</th>
<th className="w-[15%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
<th className="text-sonic-silver w-[15%] px-4 py-3 text-left text-xs font-medium">
<div className="flex items-center justify-start">
<span className="hidden sm:inline">
{t('settings.documents.tokenUsage')}
@@ -363,7 +363,7 @@ export default function Documents({
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-300 dark:divide-silver/40">
<tbody className="dark:divide-silver/40 divide-y divide-gray-300">
{loading ? (
<SkeletonLoader component="table" />
) : !currentDocuments?.length ? (
@@ -382,15 +382,15 @@ export default function Documents({
return (
<tr key={docId} className="group transition-colors">
<td
className="min-w-48 max-w-0 truncate px-4 py-4 text-sm font-semibold text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50"
className="max-w-0 min-w-48 truncate px-4 py-4 text-sm font-semibold text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50"
title={document.name}
>
{document.name}
</td>
<td className="whitespace-nowrap px-4 py-4 text-sm text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50">
<td className="px-4 py-4 text-sm whitespace-nowrap text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50">
{document.date ? formatDate(document.date) : ''}
</td>
<td className="whitespace-nowrap px-4 py-4 text-sm text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50">
<td className="px-4 py-4 text-sm whitespace-nowrap text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50">
{document.tokens
? formatTokens(+document.tokens)
: ''}
@@ -432,7 +432,7 @@ export default function Documents({
)}
<button
onClick={(e) => handleMenuClick(e, docId)}
className="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
aria-label="Open menu"
data-testid={`menu-button-${docId}`}
>
@@ -634,7 +634,7 @@ function DocumentChunks({
}, [page, perPage]);
return (
<div className="mt-8 flex flex-col">
<div className="mb-3 flex items-center gap-3 text-sm text-eerie-black dark:text-bright-gray">
<div className="text-eerie-black dark:text-bright-gray mb-3 flex items-center gap-3 text-sm">
<button
className="rounded-full border p-3 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
onClick={handleGoBack}
@@ -644,7 +644,7 @@ function DocumentChunks({
<p className="mt-px">{t('settings.documents.backToAll')}</p>
</div>
<div className="my-3 flex items-center justify-between gap-1">
<div className="flex w-full items-center gap-2 text-eerie-black dark:text-bright-gray sm:w-auto">
<div className="text-eerie-black dark:text-bright-gray flex w-full items-center gap-2 sm:w-auto">
<p className="hidden text-2xl font-semibold sm:flex">{`${totalChunks} ${t('settings.documents.chunks')}`}</p>
<label htmlFor="chunk-search-input" className="sr-only">
{t('settings.documents.searchPlaceholder')}
@@ -663,7 +663,7 @@ function DocumentChunks({
/>
</div>
<button
className="flex h-[32px] min-w-[108px] items-center justify-center whitespace-normal rounded-full bg-purple-30 px-4 text-sm text-white hover:bg-violets-are-blue"
className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
title={t('settings.documents.addNew')}
onClick={() => setAddModal('ACTIVE')}
>
@@ -684,7 +684,7 @@ function DocumentChunks({
.toLowerCase()
.includes(searchTerm.toLowerCase());
}).length === 0 ? (
<div className="col-span-2 mt-24 text-center text-gray-500 dark:text-gray-400 lg:col-span-3">
<div className="col-span-2 mt-24 text-center text-gray-500 lg:col-span-3 dark:text-gray-400">
<img
src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
alt={t('settings.documents.noChunksAlt')}
@@ -703,7 +703,7 @@ function DocumentChunks({
.map((chunk, index) => (
<div
key={index}
className="relative flex h-56 w-full flex-col justify-between rounded-2xl border border-silver p-6 dark:border-silver/40"
className="border-silver dark:border-silver/40 relative flex h-56 w-full flex-col justify-between rounded-2xl border p-6"
>
<div className="w-full">
<div className="flex w-full items-center justify-between">
@@ -715,7 +715,7 @@ function DocumentChunks({
chunk: chunk,
});
}}
className="absolute right-3 top-3 h-4 w-4 cursor-pointer"
className="absolute top-3 right-3 h-4 w-4 cursor-pointer"
>
<img
alt={'edit'}
@@ -725,10 +725,10 @@ function DocumentChunks({
</button>
</div>
<div className="mt-[9px]">
<p className="ellipsis-text h-12 break-words text-sm font-semibold leading-relaxed text-eerie-black dark:text-[#EEEEEE]">
<p className="ellipsis-text text-eerie-black h-12 text-sm leading-relaxed font-semibold break-words dark:text-[#EEEEEE]">
{chunk.metadata?.title ?? 'Untitled'}
</p>
<p className="mt-1 h-[110px] overflow-y-auto break-words pr-1 text-[13px] leading-relaxed text-gray-600 dark:text-gray-400">
<p className="mt-1 h-[110px] overflow-y-auto pr-1 text-[13px] leading-relaxed break-words text-gray-600 dark:text-gray-400">
{chunk.text}
</p>
</div>

14
frontend/src/settings/Logs.tsx
View File

@@ -113,13 +113,13 @@ function LogsTable({ logs, setPage, loading, tableHeader }: LogsTableProps) {
}, []);
return (
<div className="logs-table h-[55vh] w-full overflow-hidden rounded-xl border border-light-silver bg-white dark:border-transparent dark:bg-black">
<div className="flex h-8 flex-col items-start justify-center bg-black/10 dark:bg-[#191919]">
<p className="px-3 text-xs dark:text-gray-6000">
<div className="logs-table border-light-silver h-[55vh] w-full overflow-hidden rounded-xl border bg-white dark:border-transparent dark:bg-black">
<div className="dark:bg-eerie-black-2 flex h-8 flex-col items-start justify-center bg-black/10">
<p className="dark:text-gray-6000 px-3 text-xs">
{tableHeader ? tableHeader : t('settings.logs.tableHeader')}
</p>
</div>
<div className="relative flex h-[51vh] flex-grow flex-col items-start gap-2 overflow-y-auto overscroll-contain bg-transparent p-4">
<div className="relative flex h-[51vh] grow flex-col items-start gap-2 overflow-y-auto overscroll-contain bg-transparent p-4">
{logs?.map((log, index) => {
if (index === logs.length - 1) {
return (
@@ -164,7 +164,7 @@ function Log({
const { id, action, timestamp, ...filteredLog } = log;
return (
<div className="group w-full rounded-xl bg-transparent hover:bg-[#F9F9F9] hover:dark:bg-dark-charcoal">
<div className="group dark:hover:bg-dark-charcoal w-full rounded-xl bg-transparent hover:bg-[#F9F9F9]">
<div
onClick={() => onToggle(log.id)}
className={`flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 text-gray-900 ${
@@ -177,7 +177,7 @@ function Log({
className={`mt-[3px] h-3 w-3 transition duration-300 ${isOpen ? 'rotate-90' : ''}`}
/>
<span className="flex flex-row gap-2">
<h2 className="text-xs text-black/60 dark:text-bright-gray">{`${log.timestamp}`}</h2>
<h2 className="dark:text-bright-gray text-xs text-black/60">{`${log.timestamp}`}</h2>
<h2 className="text-xs text-[#913400] dark:text-[#DF5200]">{`[${log.action}]`}</h2>
<h2
className={`max-w-72 text-xs ${logLevelColor[log.level]} break-words`}
@@ -191,7 +191,7 @@ function Log({
{isOpen && (
<div className="rounded-b-xl bg-[#F1F1F1] px-4 py-3 dark:bg-[#1B1B1B]">
<div className="scrollbar-thin overflow-y-auto">
<pre className="whitespace-pre-wrap break-words px-2 font-mono text-xs leading-relaxed text-gray-700 dark:text-gray-400">
<pre className="px-2 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-gray-700 dark:text-gray-400">
{JSON.stringify(filteredLog, null, 2)}
</pre>
</div>

90
frontend/src/settings/ToolConfig.tsx
View File

@@ -162,7 +162,7 @@ export default function ToolConfig({
return (
<div className="scrollbar-thin mt-8 flex flex-col gap-4">
<div className="mb-4 flex items-center justify-between">
<div className="flex items-center gap-3 text-sm text-eerie-black dark:text-bright-gray">
<div className="text-eerie-black dark:text-bright-gray flex items-center gap-3 text-sm">
<button
className="rounded-full border p-3 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
onClick={handleBackClick}
@@ -172,7 +172,7 @@ export default function ToolConfig({
<p className="mt-px">{t('settings.tools.backToAllTools')}</p>
</div>
<button
className="text-nowrap rounded-full bg-purple-30 px-3 py-2 text-xs text-white hover:bg-violets-are-blue sm:px-4 sm:py-2"
className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-2 text-xs text-nowrap text-white sm:px-4 sm:py-2"
onClick={handleSaveChanges}
>
{t('settings.tools.save')}
@@ -180,7 +180,7 @@ export default function ToolConfig({
</div>
{/* Custom name section */}
<div className="mt-1">
<p className="text-sm font-semibold text-eerie-black dark:text-bright-gray">
<p className="text-eerie-black dark:text-bright-gray text-sm font-semibold">
{t('settings.tools.customName')}
</p>
<div className="relative mt-4 w-full max-w-96">
@@ -195,7 +195,7 @@ export default function ToolConfig({
</div>
<div className="mt-1">
{Object.keys(tool?.config).length !== 0 && tool.name !== 'api_tool' && (
<p className="text-sm font-semibold text-eerie-black dark:text-bright-gray">
<p className="text-eerie-black dark:text-bright-gray text-sm font-semibold">
{t('settings.tools.authentication')}
</p>
)}
@@ -217,7 +217,7 @@ export default function ToolConfig({
<div className="flex flex-col gap-4">
<div className="mx-0 my-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40"></div>
<div className="flex w-full flex-row items-center justify-between gap-2">
<p className="text-base font-semibold text-eerie-black dark:text-bright-gray">
<p className="text-eerie-black dark:text-bright-gray text-base font-semibold">
{t('settings.tools.actions')}
</p>
{tool.name === 'api_tool' &&
@@ -225,7 +225,7 @@ export default function ToolConfig({
Object.keys(tool.config.actions).length === 0) && (
<button
onClick={() => setActionModalState('ACTIVE')}
className="rounded-full border border-solid border-violets-are-blue px-5 py-1 text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
className="border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue rounded-full border border-solid px-5 py-1 text-sm transition-colors hover:text-white"
>
{t('settings.tools.addAction')}
</button>
@@ -255,10 +255,10 @@ export default function ToolConfig({
tool.actions.map((action, actionIndex) => (
<div
key={actionIndex}
className="w-full rounded-xl border border-silver dark:border-silver/40"
className="border-silver dark:border-silver/40 w-full rounded-xl border"
>
<div className="flex h-10 flex-wrap items-center justify-between rounded-t-xl border-b border-silver bg-[#F9F9F9] px-5 dark:border-silver/40 dark:bg-[#28292D]">
<p className="font-semibold text-eerie-black dark:text-bright-gray">
<div className="border-silver dark:border-silver/40 flex h-10 flex-wrap items-center justify-between rounded-t-xl border-b bg-[#F9F9F9] px-5 dark:bg-[#28292D]">
<p className="text-eerie-black dark:text-bright-gray font-semibold">
{action.name}
</p>
<ToggleSwitch
@@ -319,7 +319,7 @@ export default function ToolConfig({
return (
<tr
key={index}
className="text-nowrap font-normal"
className="font-normal text-nowrap"
>
<td>{param[0]}</td>
<td>{param[1].type}</td>
@@ -334,7 +334,7 @@ export default function ToolConfig({
checked={param[1].filled_by_llm}
id={uniqueKey}
type="checkbox"
className="size-4 rounded border-gray-300 bg-transparent"
className="size-4 rounded-sm border-gray-300 bg-transparent"
onChange={() =>
handleCheckboxChange(
actionIndex,
@@ -349,7 +349,7 @@ export default function ToolConfig({
<input
key={uniqueKey}
value={param[1].description}
className="rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
className="border-silver dark:border-silver/40 rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
onChange={(e) => {
setTool({
...tool,
@@ -385,7 +385,7 @@ export default function ToolConfig({
value={param[1].value}
key={uniqueKey}
disabled={param[1].filled_by_llm}
className={`rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40 ${param[1].filled_by_llm ? 'opacity-50' : ''}`}
className={`border-silver dark:border-silver/40 rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden ${param[1].filled_by_llm ? 'opacity-50' : ''}`}
onChange={(e) => {
setTool({
...tool,
@@ -563,10 +563,10 @@ function APIToolConfig({
([actionName, action], actionIndex) => (
<div
key={actionIndex}
className="w-full rounded-xl border border-silver dark:border-silver/40"
className="border-silver dark:border-silver/40 w-full rounded-xl border"
>
<div className="flex h-10 flex-wrap items-center justify-between rounded-t-xl border-b border-silver bg-[#F9F9F9] px-5 dark:border-silver/40 dark:bg-[#28292D]">
<p className="font-semibold text-eerie-black dark:text-bright-gray">
<div className="border-silver dark:border-silver/40 flex h-10 flex-wrap items-center justify-between rounded-t-xl border-b bg-[#F9F9F9] px-5 dark:bg-[#28292D]">
<p className="text-eerie-black dark:text-bright-gray font-semibold">
{action.name}
</p>
<div className="flex items-center gap-2">
@@ -618,7 +618,7 @@ function APIToolConfig({
</div>
<div className="mt-4 px-5 py-2">
<div className="relative w-full">
<span className="absolute -top-2 left-5 z-10 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
<span className="text-gray-4000 dark:bg-raisin-black dark:text-silver absolute -top-2 left-5 z-10 bg-white px-2 text-xs">
{t('settings.tools.method')}
</span>
<Dropdown
@@ -867,14 +867,14 @@ function APIActionTable({
<>
{Object.entries(action[section].properties).map(
([key, param], index) => (
<tr key={index} className="text-nowrap font-normal">
<tr key={index} className="font-normal text-nowrap">
<td className="relative">
{editingPropertyKey.section === section &&
editingPropertyKey.oldKey === key ? (
<div className="flex flex-row items-center justify-between gap-2">
<input
value={newPropertyKey}
className="flex w-full min-w-[130.5px] items-start rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
className="border-silver dark:border-silver/40 flex w-full min-w-[130.5px] items-start rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
onChange={(e) => setNewPropertyKey(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
@@ -904,7 +904,7 @@ function APIActionTable({
) : (
<input
value={key}
className="flex w-full min-w-[175.5px] items-start rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
className="border-silver dark:border-silver/40 flex w-full min-w-[175.5px] items-start rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
onFocus={() => handleRenamePropertyStart(section, key)}
readOnly
/>
@@ -917,7 +917,7 @@ function APIActionTable({
<input
checked={param.filled_by_llm}
type="checkbox"
className="size-4 rounded border-gray-300 bg-transparent"
className="size-4 rounded-sm border-gray-300 bg-transparent"
onChange={(e) =>
handlePropertyChange(
section,
@@ -933,7 +933,7 @@ function APIActionTable({
<td className="w-10">
<input
value={param.description}
className="rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
className="border-silver dark:border-silver/40 rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
onChange={(e) =>
handlePropertyChange(
section,
@@ -951,7 +951,7 @@ function APIActionTable({
onChange={(e) =>
handlePropertyChange(section, key, 'value', e.target.value)
}
className={`rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40 ${param.filled_by_llm ? 'opacity-50' : ''}`}
className={`border-silver dark:border-silver/40 rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden ${param.filled_by_llm ? 'opacity-50' : ''}`}
></input>
</td>
<td
@@ -961,7 +961,7 @@ function APIActionTable({
maxWidth: '50px',
padding: '0',
}}
className="border-b border-silver dark:border-silver/40"
className="border-silver dark:border-silver/40 border-b"
>
<button
onClick={() => handlePorpertyDelete(section, key)}
@@ -985,13 +985,13 @@ function APIActionTable({
}
}}
placeholder={t('settings.tools.propertyName')}
className="flex w-full min-w-[130.5px] items-start rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
className="border-silver dark:border-silver/40 flex w-full min-w-[130.5px] items-start rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
/>
</td>
<td colSpan={4} className="text-right">
<button
onClick={handleAddProperty}
className="mr-1 rounded-full bg-purple-30 px-5 py-[4px] text-sm text-white hover:bg-violets-are-blue"
className="bg-purple-30 hover:bg-violets-are-blue mr-1 rounded-full px-5 py-[4px] text-sm text-white"
>
{t('settings.tools.add')}
</button>
@@ -1016,7 +1016,7 @@ function APIActionTable({
<td colSpan={5}>
<button
onClick={() => handleAddPropertyStart(section)}
className="flex items-start text-nowrap rounded-full border border-solid border-violets-are-blue px-5 py-[4px] text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
className="border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue flex items-start rounded-full border border-solid px-5 py-[4px] text-sm text-nowrap transition-colors hover:text-white"
>
{t('settings.tools.addNew')}
</button>
@@ -1037,25 +1037,25 @@ function APIActionTable({
return (
<div className="scrollbar-thin flex flex-col gap-6">
<div>
<h3 className="mb-1 text-base font-normal text-eerie-black dark:text-bright-gray">
<h3 className="text-eerie-black dark:text-bright-gray mb-1 text-base font-normal">
{t('settings.tools.headers')}
</h3>
<table className="table-default">
<thead>
<tr>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.name')}
</th>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.type')}
</th>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.filledByLLM')}
</th>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.description')}
</th>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.value')}
</th>
<th
@@ -1072,25 +1072,25 @@ function APIActionTable({
</table>
</div>
<div>
<h3 className="mb-1 text-base font-normal text-eerie-black dark:text-bright-gray">
<h3 className="text-eerie-black dark:text-bright-gray mb-1 text-base font-normal">
{t('settings.tools.queryParameters')}
</h3>
<table className="table-default">
<thead>
<tr>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.name')}
</th>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.type')}
</th>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.filledByLLM')}
</th>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.description')}
</th>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.value')}
</th>
<th
@@ -1107,25 +1107,25 @@ function APIActionTable({
</table>
</div>
<div className="mb-6">
<h3 className="mb-1 text-base font-normal text-eerie-black dark:text-bright-gray">
<h3 className="text-eerie-black dark:text-bright-gray mb-1 text-base font-normal">
{t('settings.tools.body')}
</h3>
<table className="table-default">
<thead>
<tr>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.name')}
</th>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.type')}
</th>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.filledByLLM')}
</th>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.description')}
</th>
<th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
<th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
{t('settings.tools.value')}
</th>
<th

30
frontend/src/upload/Upload.tsx
View File

@@ -70,7 +70,7 @@ function Upload({
}`}
>
<div className="flex flex-col gap-4 overflow-hidden">
<hr className="my-4 border-[1px] border-[#C4C4C4]/40" />
<hr className="my-4 border border-[#C4C4C4]/40" />
<div className="flex flex-col gap-4">
{advancedFields.map((field: FormField) => renderField(field))}
</div>
@@ -216,7 +216,7 @@ function Upload({
<div className="relative h-32 w-32 rounded-full">
<div className="absolute inset-0 rounded-full shadow-[0_0_10px_2px_rgba(0,0,0,0.3)_inset] dark:shadow-[0_0_10px_2px_rgba(0,0,0,0.3)_inset]"></div>
<div
className={`absolute inset-0 rounded-full ${progressPercent === 100 ? 'bg-gradient-to-r from-white to-gray-400 shadow-xl shadow-lime-300/50 dark:bg-gradient-to-br dark:from-gray-500 dark:to-gray-300 dark:shadow-lime-300/50' : 'shadow-[0_4px_0_#7D54D1] dark:shadow-[0_4px_0_#7D54D1]'}`}
className={`absolute inset-0 rounded-full ${progressPercent === 100 ? 'bg-linear-to-r from-white to-gray-400 shadow-xl shadow-lime-300/50 dark:bg-linear-to-br dark:from-gray-500 dark:to-gray-300 dark:shadow-lime-300/50' : 'shadow-[0_4px_0_#7D54D1] dark:shadow-[0_4px_0_#7D54D1]'}`}
style={{
animation: `${progressPercent === 100 ? 'none' : 'rotate 2s linear infinite'}`,
}}
@@ -247,7 +247,7 @@ function Upload({
isTraining?: boolean;
}) {
return (
<div className="mt-5 flex flex-col items-center gap-2 text-gray-2000 dark:text-bright-gray">
<div className="text-gray-2000 dark:text-bright-gray mt-5 flex flex-col items-center gap-2">
<p className="text-gra text-xl tracking-[0.15px]">
{isTraining &&
(progress?.percentage === 100
@@ -571,18 +571,18 @@ function Upload({
} else {
view = (
<div className="flex w-full flex-col gap-4">
<p className="text-center text-2xl font-semibold text-jet dark:text-bright-gray">
<p className="text-jet dark:text-bright-gray text-center text-2xl font-semibold">
{t('modals.uploadDoc.label')}
</p>
{!activeTab && (
<div>
<p className="dark text-center text-sm font-medium text-gray-6000 dark:text-bright-gray">
<p className="dark text-gray-6000 dark:text-bright-gray text-center text-sm font-medium">
{t('modals.uploadDoc.select')}
</p>
<div className="flex h-full w-full flex-col items-center justify-center gap-4 p-4 md:flex-row md:gap-4">
<button
onClick={() => setActiveTab('file')}
className="flex h-40 w-40 flex-col items-center justify-center gap-4 rounded-3xl border border-[#D7D7D7] bg-transparent p-8 text-sm font-medium text-[#777777] opacity-85 hover:border-purple-30 hover:opacity-100 hover:shadow-lg hover:shadow-purple-30/30 dark:bg-transparent dark:text-[#c3c3c3] md:h-52 md:w-52"
className="hover:border-purple-30 hover:shadow-purple-30/30 flex h-40 w-40 flex-col items-center justify-center gap-4 rounded-3xl border border-[#D7D7D7] bg-transparent p-8 text-sm font-medium text-[#777777] opacity-85 hover:opacity-100 hover:shadow-lg md:h-52 md:w-52 dark:bg-transparent dark:text-[#c3c3c3]"
>
<img
src={FileUpload}
@@ -592,7 +592,7 @@ function Upload({
</button>
<button
onClick={() => setActiveTab('remote')}
className="flex h-40 w-40 flex-col items-center justify-center gap-4 rounded-3xl border border-[#D7D7D7] bg-transparent p-8 text-sm font-medium text-[#777777] opacity-85 hover:border-purple-30 hover:opacity-100 hover:shadow-lg hover:shadow-purple-30/30 dark:bg-transparent dark:text-[#c3c3c3] md:h-52 md:w-52"
className="hover:border-purple-30 hover:shadow-purple-30/30 flex h-40 w-40 flex-col items-center justify-center gap-4 rounded-3xl border border-[#D7D7D7] bg-transparent p-8 text-sm font-medium text-[#777777] opacity-85 hover:opacity-100 hover:shadow-lg md:h-52 md:w-52 dark:bg-transparent dark:text-[#c3c3c3]"
>
<img
src={WebsiteCollect}
@@ -617,30 +617,30 @@ function Upload({
required={true}
/>
<div className="my-2" {...getRootProps()}>
<span className="rounded-3xl border border-[#7F7F82] bg-transparent px-4 py-2 font-medium text-purple-30 hover:cursor-pointer dark:text-silver">
<span className="text-purple-30 dark:text-silver rounded-3xl border border-[#7F7F82] bg-transparent px-4 py-2 font-medium hover:cursor-pointer">
<input type="button" {...getInputProps()} />
{t('modals.uploadDoc.choose')}
</span>
</div>
<p className="mb-0 text-xs italic text-gray-4000">
<p className="text-gray-4000 mb-0 text-xs italic">
{t('modals.uploadDoc.info')}
</p>
<div className="mt-0 max-w-full">
<p className="mb-[14px] text-[14px] font-medium text-eerie-black dark:text-light-gray">
<p className="text-eerie-black dark:text-light-gray mb-[14px] text-[14px] font-medium">
{t('modals.uploadDoc.uploadedFiles')}
</p>
<div className="max-w-full overflow-hidden">
{files.map((file) => (
<p
key={file.name}
className="overflow-hidden truncate text-ellipsis text-gray-6000"
className="text-gray-6000 truncate overflow-hidden text-ellipsis"
title={file.name}
>
{file.name}
</p>
))}
{files.length === 0 && (
<p className="text-[14px] text-gray-6000 dark:text-light-gray">
<p className="text-gray-6000 dark:text-light-gray text-[14px]">
{t('none')}
</p>
)}
@@ -681,7 +681,7 @@ function Upload({
) && (
<button
onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
className="bg-transparent py-2 pl-0 text-left text-sm font-normal text-purple-30 hover:cursor-pointer"
className="text-purple-30 bg-transparent py-2 pl-0 text-left text-sm font-normal hover:cursor-pointer"
>
{showAdvancedOptions
? t('modals.uploadDoc.hideAdvanced')
@@ -694,7 +694,7 @@ function Upload({
{activeTab && (
<button
onClick={() => setActiveTab(null)}
className="rounded-3xl bg-transparent px-4 py-2 text-[14px] font-medium text-purple-30 hover:cursor-pointer dark:text-silver"
className="text-purple-30 dark:text-silver rounded-3xl bg-transparent px-4 py-2 text-[14px] font-medium hover:cursor-pointer"
>
{t('modals.uploadDoc.back')}
</button>
@@ -712,7 +712,7 @@ function Upload({
className={`rounded-3xl px-4 py-2 text-[14px] font-medium ${
isUploadDisabled()
? 'cursor-not-allowed bg-gray-300 text-gray-500'
: 'cursor-pointer bg-purple-30 text-white hover:bg-violets-are-blue'
: 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer text-white'
}`}
>
{t('modals.uploadDoc.train')}

90
frontend/tailwind.config.cjs
View File

@@ -1,90 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
fontFamily: {
'roboto': ['Roboto', 'sans-serif'],
},
spacing: {
112: '28rem',
128: '32rem',
},
colors: {
'eerie-black': '#212121',
'black-1000': '#343541',
'jet': '#343541',
'gray-alpha': 'rgba(0,0,0, .64)',
'gray-1000': '#F6F6F6',
'gray-2000': 'rgba(0, 0, 0, 0.5)',
'gray-3000': 'rgba(243, 243, 243, 1)',
'gray-4000': '#949494',
'gray-5000': '#BBBBBB',
'gray-6000': '#757575',
'red-1000': 'rgb(254, 202, 202)',
'red-2000': '#F44336',
'red-3000': '#621B16',
'blue-1000': '#7D54D1',
'blue-2000': '#002B49',
'blue-3000': '#4B02E2',
'purple-30': '#7D54D1',
'purple-3000': 'rgb(230,222,247)',
'blue-4000': 'rgba(0, 125, 255, 0.36)',
'blue-5000': 'rgba(0, 125, 255)',
'green-2000': '#0FFF50',
'light-gray': '#edeef0',
'white-3000': '#ffffff',
'just-black': '#00000',
'purple-taupe': '#464152',
'dove-gray': '#6c6c6c',
'silver': '#c4c4c4',
'rainy-gray': '#a4a4a4',
'raisin-black': '#222327',
'chinese-black': '#161616',
'chinese-silver': '#CDCDCD',
'dark-charcoal': '#2F3036',
'bright-gray': '#ECECF1',
'outer-space': '#444654',
'gun-metal': '#2E303E',
'sonic-silver': '#747474',
'soap': '#D8CCF1',
'independence': '#54546D',
'philippine-yellow': '#FFC700',
'bright-gray': '#EBEBEB',
'chinese-white': '#e0e0e0',
'dark-gray': '#aaaaaa',
'dim-gray': '#6A6A6A',
'cultured': '#f4f4f4',
'charleston-green': '#2b2c31',
'charleston-green-2' : '#26272e',
'charleston-green-3':'#26272A',
'grey': '#7e7e7e',
'lotion': '#FBFBFB',
'platinum': '#e6e6e6',
'eerie-black-2': '#191919',
'light-silver': '#D9D9D9',
'carbon': '#2E2E2E',
'onyx':'#35363B',
'royal-purple': '#6C4AB0',
'chinese-black-2': '#0F1419',
'gainsboro': '#D9DCDE',
'onyx-2': '#35383C',
'philippine-grey': '#929292',
'charcoal-grey':'#53545D',
'rosso-corsa': '#D30000',
'north-texas-green': '#0C9D35',
'medium-purple': '#8d66dd',
'slate-blue': '#6f5fca',
'old-silver': '#848484',
'arsenic': '#4D4E58',
'light-gainsboro': '#d7D7D7',
'raisin-black-light': '#18181B',
'gunmetal': '#32333B',
'sonic-silver-light': '#7f7f82',
'violets-are-blue':'#976AF3'
},
},
},
plugins: [],
};