From 727d8027796785555f1c8308a37272a6ec0de34e Mon Sep 17 00:00:00 2001 From: Sean Hatfield Date: Mon, 18 Nov 2024 15:40:18 -0800 Subject: [PATCH] Light/dark mode UI overhaul (#2629) * Refactor workspace sidebar component styles (#2380) rely on css for conditional styles * New sidebar colors (#2381) new sidebar colors * Main container color update (#2382) * Dark mode setup themes (#2411) * setup generic tailwind theme + ability to add new themes * add theme context * use correct colors from design for sidebar + fix padding * Settings sidebar UI updates (#2416) settings sidebar ui updates * fix sidebar resizing/truncate issue on hover * Dark mode chat window (#2443) * Support XLSX files (#2403) * support xlsx files * lint * create seperate docs for each xlsx sheet * lint * use node-xlsx pkg for parsing xslx files * lint * update error handling --------- Co-authored-by: timothycarambat * wip chat window * ux+ux improvements and update new colors * chat window dark mode * remove comment --------- Co-authored-by: timothycarambat * Dark mode welcome page (#2444) * dark mode welcome page styles + refactor * remove AI_BACKGROUND_COLOR and USER_BACKGROUND_COLOR constants * Dark mode UI for admin and tools pages + mobile view improvements (#2454) * dark mode ui for admin and tools pages + mobile view improvements * lint * ai provider pages + options darkmode ui * placeholder generic class * appearance settings styles * ai providers mobile margin * dark mode styles for agent skills + experimental features * mobile styles on security settings * fine tune flow ui dark mode * workspace settings page * lint * Dark mode onboarding (#2461) dark mode onboarding * update all modals + normalize styles (#2471) * lint * Dark mode privacy & experimental pages (#2479) * document watch + privacy pages ui + mobile modal darkmode * lint * Dark mode login screens (#2483) * multi-user auth screen ui update * dark mode login screen + recovery key modals * remove unneeded import * Workspace preset commands modals dark mode (#2484) update workspace preset dark mode modal * Document pinning modal ui update (#2490) document pinning modal ui update * Experimental agreement modal dark mode (#2491) experimental agreement modal dark mode * Serp options dark mode (#2492) serp options dark mode * field fixes * attempt light mode wip * setting sidebar * Toasts and threads * main page content and privacy page * force rewrite for light * add border for light mode rightside content * more fixes * wip * wip * wip light mode implementation * wip dark light mode file picker * document picker light mode ui * slight ui tweaks * light mode fine tuning flow * light mode tweaks + qa fixes * fix md rendering of light mode + tooltip fixes * lint * qa bug fixes * Add developer hook for theme move provider to outmost layer * qa light mode bug fixes * Linting and hotfixes for UI * Light mode to dev * accept invite light mode ui fix * Fix onboarding inputs in dark mode * fix close icons last minute items * patch z-index on tooltips * patch light mode citations --------- Co-authored-by: timothycarambat --- .github/workflows/dev-build.yaml | 2 +- frontend/src/App.jsx | 271 ++++++++------- frontend/src/LogoContext.jsx | 16 +- frontend/src/ThemeContext.jsx | 16 + frontend/src/components/ChatBubble/index.jsx | 6 +- .../components/ContextualSaveBar/index.jsx | 8 +- frontend/src/components/DefaultChat/index.jsx | 328 +++++++----------- .../components/EditingChatBubble/index.jsx | 10 +- .../AzureAiOptions/index.jsx | 6 +- .../CohereOptions/index.jsx | 4 +- .../EmbeddingSelection/EmbedderItem/index.jsx | 4 +- .../GenericOpenAiOptions/index.jsx | 8 +- .../LMStudioOptions/index.jsx | 8 +- .../LiteLLMOptions/index.jsx | 10 +- .../LocalAiOptions/index.jsx | 10 +- .../OllamaOptions/index.jsx | 8 +- .../OpenAiOptions/index.jsx | 4 +- .../VoyageAiOptions/index.jsx | 4 +- frontend/src/components/Footer/index.jsx | 24 +- .../LLMSelection/AnthropicAiOptions/index.jsx | 4 +- .../LLMSelection/ApiPieOptions/index.jsx | 6 +- .../AwsBedrockLLMOptions/index.jsx | 34 +- .../LLMSelection/AzureAiOptions/index.jsx | 8 +- .../LLMSelection/CohereAiOptions/index.jsx | 4 +- .../LLMSelection/DeepSeekOptions/index.jsx | 6 +- .../LLMSelection/FireworksAiOptions/index.jsx | 6 +- .../LLMSelection/GeminiLLMOptions/index.jsx | 6 +- .../GenericOpenAiOptions/index.jsx | 10 +- .../LLMSelection/GroqAiOptions/index.jsx | 6 +- .../LLMSelection/HuggingFaceOptions/index.jsx | 6 +- .../LLMSelection/KoboldCPPOptions/index.jsx | 8 +- .../components/LLMSelection/LLMItem/index.jsx | 4 +- .../LLMSelection/LMStudioOptions/index.jsx | 8 +- .../LLMSelection/LiteLLMOptions/index.jsx | 10 +- .../LLMSelection/LocalAiOptions/index.jsx | 10 +- .../LLMSelection/MistralOptions/index.jsx | 6 +- .../LLMSelection/NativeLLMOptions/index.jsx | 6 +- .../LLMSelection/NovitaLLMOptions/index.jsx | 51 +-- .../LLMSelection/OllamaLLMOptions/index.jsx | 12 +- .../LLMSelection/OpenAiOptions/index.jsx | 6 +- .../LLMSelection/OpenRouterOptions/index.jsx | 8 +- .../LLMSelection/PerplexityOptions/index.jsx | 6 +- .../TextGenWebUIOptions/index.jsx | 6 +- .../LLMSelection/TogetherAiOptions/index.jsx | 6 +- .../LLMSelection/XAiLLMOptions/index.jsx | 14 +- .../src/components/ModalWrapper/index.jsx | 6 +- .../Modals/DisplayRecoveryCodeModal/index.jsx | 97 +++--- .../DataConnectors/ConnectorOption/index.jsx | 4 +- .../Connectors/Confluence/index.jsx | 26 +- .../Connectors/Github/index.jsx | 30 +- .../Connectors/Gitlab/index.jsx | 34 +- .../Connectors/WebsiteDepth/index.jsx | 14 +- .../Connectors/Youtube/index.jsx | 6 +- .../ManageWorkspace/DataConnectors/index.jsx | 2 +- .../Documents/Directory/ContextMenu/index.jsx | 6 +- .../Documents/Directory/FileRow/index.jsx | 10 +- .../Documents/Directory/FolderRow/index.jsx | 14 +- .../Directory/NewFolderModal/index.jsx | 61 ++-- .../Documents/Directory/index.jsx | 32 +- .../UploadFile/FileUploadProgress/index.jsx | 2 +- .../Documents/UploadFile/index.jsx | 14 +- .../WorkspaceFileRow/index.jsx | 18 +- .../Documents/WorkspaceDirectory/index.jsx | 114 +++--- .../Modals/ManageWorkspace/index.jsx | 72 ++-- .../src/components/Modals/NewWorkspace.jsx | 44 +-- .../Modals/Password/MultiUserAuth.jsx | 26 +- .../Modals/Password/SingleUserAuth.jsx | 15 +- .../src/components/Modals/Password/index.jsx | 6 +- frontend/src/components/Preloader.jsx | 4 +- .../src/components/SettingsButton/index.jsx | 17 +- .../SettingsSidebar/MenuOption/index.jsx | 13 +- .../src/components/SettingsSidebar/index.jsx | 27 +- .../ThreadContainer/ThreadItem/index.jsx | 47 ++- .../ThreadContainer/index.jsx | 30 +- .../Sidebar/ActiveWorkspaces/index.jsx | 173 ++++----- frontend/src/components/Sidebar/index.jsx | 17 +- .../TextToSpeech/ElevenLabsOptions/index.jsx | 6 +- .../OpenAiGenericOptions/index.jsx | 6 +- .../TextToSpeech/OpenAiOptions/index.jsx | 4 +- .../TextToSpeech/PiperTTSOptions/index.jsx | 8 +- .../NativeTranscriptionOptions/index.jsx | 2 +- .../OpenAiOptions/index.jsx | 4 +- frontend/src/components/UserIcon/index.jsx | 2 +- .../UserMenu/AccountModal/index.jsx | 244 +++++++------ .../components/UserMenu/UserButton/index.jsx | 12 +- .../AstraDBOptions/index.jsx | 4 +- .../ChromaDBOptions/index.jsx | 6 +- .../MilvusDBOptions/index.jsx | 6 +- .../PineconeDBOptions/index.jsx | 4 +- .../QDrantDBOptions/index.jsx | 4 +- .../VectorDBSelection/VectorDBItem/index.jsx | 4 +- .../WeaviateDBOptions/index.jsx | 4 +- .../ZillizCloudOptions/index.jsx | 4 +- .../ChatHistory/Citation/index.jsx | 79 ++--- .../Actions/ActionMenu/index.jsx | 8 +- .../Actions/EditMessage/index.jsx | 13 +- .../Actions/TTSButton/asyncTts.jsx | 2 +- .../Actions/TTSButton/native.jsx | 2 +- .../Actions/TTSButton/piperTTS.jsx | 2 +- .../HistoricalMessage/Actions/index.jsx | 20 +- .../ChatHistory/HistoricalMessage/index.jsx | 9 +- .../ChatHistory/PromptReply/index.jsx | 9 +- .../ChatContainer/ChatHistory/index.jsx | 6 +- .../ChatContainer/ChatTooltips/index.jsx | 4 +- .../ChatContainer/DnDWrapper/index.jsx | 2 +- .../PromptInput/AgentMenu/index.jsx | 17 +- .../PromptInput/AttachItem/index.jsx | 17 +- .../PromptInput/Attachments/index.jsx | 54 ++- .../SlashPresets/AddPresetModal.jsx | 160 +++++---- .../SlashPresets/EditPresetModal.jsx | 168 ++++----- .../SlashCommands/SlashPresets/index.jsx | 18 +- .../SlashCommands/endAgentSession.jsx | 2 +- .../SlashCommands/icons/SlashCommandIcon.jsx | 28 ++ .../icons/slash-commands-icon.svg | 4 - .../PromptInput/SlashCommands/index.jsx | 13 +- .../PromptInput/SlashCommands/reset.jsx | 2 +- .../PromptInput/SpeechToText/index.jsx | 5 +- .../PromptInput/TextSizeMenu/index.jsx | 25 +- .../ChatContainer/PromptInput/index.jsx | 14 +- .../WorkspaceChat/ChatContainer/index.jsx | 2 +- .../WorkspaceChat/LoadingChat/index.jsx | 8 +- .../src/components/WorkspaceChat/index.jsx | 4 +- frontend/src/hooks/useTheme.js | 53 +++ frontend/src/index.css | 145 +++++++- .../media/illustrations/login-logo-light.svg | 45 +++ .../src/media/illustrations/login-logo.svg | 44 ++- ...hing-llm-old.png => anything-llm-dark.png} | Bin frontend/src/models/system.js | 8 +- .../src/pages/Admin/Agents/Badges/default.jsx | 4 +- .../Admin/Agents/DefaultSkillPanel/index.jsx | 9 +- .../Admin/Agents/GenericSkillPanel/index.jsx | 9 +- .../Imported/ImportedSkillConfig/index.jsx | 6 +- .../Admin/Agents/Imported/SkillList/index.jsx | 18 +- .../NewConnectionModal.jsx | 251 +++++++------- .../Agents/SQLConnectorSelection/index.jsx | 23 +- .../SearchProviderItem/index.jsx | 4 +- .../SearchProviderOptions/index.jsx | 20 +- .../Admin/Agents/WebSearchSelection/index.jsx | 25 +- frontend/src/pages/Admin/Agents/index.jsx | 36 +- .../manage/DocumentSyncQueueRow/index.jsx | 2 +- .../Features/LiveSync/manage/index.jsx | 22 +- .../Features/LiveSync/toggle.jsx | 12 +- .../Admin/ExperimentalFeatures/index.jsx | 52 +-- .../Admin/Invitations/InviteRow/index.jsx | 4 +- .../Invitations/NewInviteModal/index.jsx | 151 ++++---- .../src/pages/Admin/Invitations/index.jsx | 29 +- .../src/pages/Admin/Logging/LogRow/index.jsx | 26 +- frontend/src/pages/Admin/Logging/index.jsx | 44 +-- .../pages/Admin/Users/NewUserModal/index.jsx | 65 ++-- .../Users/UserRow/EditUserModal/index.jsx | 65 ++-- .../src/pages/Admin/Users/UserRow/index.jsx | 6 +- frontend/src/pages/Admin/Users/index.jsx | 37 +- .../Workspaces/NewWorkspaceModal/index.jsx | 61 ++-- .../Admin/Workspaces/WorkspaceRow/index.jsx | 2 +- frontend/src/pages/Admin/Workspaces/index.jsx | 29 +- .../FineTuning/Steps/Confirmation/index.jsx | 64 ++-- .../FineTuning/Steps/DataUpload/index.jsx | 44 ++- .../Steps/FulfillmentPolicy/index.jsx | 56 +-- .../FineTuning/Steps/Introduction/index.jsx | 63 +++- .../FineTuning/Steps/OrderDetails/index.jsx | 26 +- .../FineTuning/Steps/OrderPlaced/index.jsx | 18 +- .../pages/FineTuning/Steps/Privacy/index.jsx | 84 +++-- .../Steps/TermsAndConditions/index.jsx | 78 +++-- frontend/src/pages/FineTuning/Steps/index.jsx | 2 +- frontend/src/pages/FineTuning/index.jsx | 16 +- .../ApiKeys/ApiKeyRow/index.jsx | 4 +- .../ApiKeys/NewApiKeyModal/index.jsx | 81 ++--- .../pages/GeneralSettings/ApiKeys/index.jsx | 31 +- .../Appearance/CustomAppName/index.jsx | 2 +- .../Appearance/CustomLogo/index.jsx | 16 +- .../Appearance/CustomMessages/index.jsx | 6 +- .../Appearance/CustomSiteSettings/index.jsx | 6 +- .../FooterCustomization/NewIconForm/index.jsx | 14 +- .../Appearance/LanguagePreference/index.jsx | 4 +- .../Appearance/SupportEmail/index.jsx | 2 +- .../Appearance/ThemePreference/index.jsx | 27 ++ .../GeneralSettings/Appearance/index.jsx | 9 +- .../GeneralSettings/AudioPreference/index.jsx | 6 +- .../GeneralSettings/AudioPreference/stt.jsx | 12 +- .../GeneralSettings/AudioPreference/tts.jsx | 12 +- .../BrowserExtensionApiKeyRow/index.jsx | 6 +- .../NewBrowserExtensionApiKeyModal/index.jsx | 84 ++--- .../BrowserExtensionApiKey/index.jsx | 123 +++---- .../GeneralSettings/Chats/ChatRow/index.jsx | 12 +- .../src/pages/GeneralSettings/Chats/index.jsx | 56 +-- .../EmbedChats/ChatRow/index.jsx | 34 +- .../GeneralSettings/EmbedChats/index.jsx | 40 ++- .../EmbedRow/CodeSnippetModal/index.jsx | 39 +-- .../EmbedRow/EditEmbedModal/index.jsx | 63 ++-- .../EmbedConfigs/EmbedRow/index.jsx | 2 +- .../EmbedConfigs/NewEmbedModal/index.jsx | 113 +++--- .../GeneralSettings/EmbedConfigs/index.jsx | 29 +- .../EmbeddingPreference/index.jsx | 20 +- .../EmbeddingTextSplitterPreference/index.jsx | 12 +- .../GeneralSettings/LLMPreference/index.jsx | 18 +- .../GeneralSettings/PrivacyAndData/index.jsx | 40 +-- .../pages/GeneralSettings/Security/index.jsx | 24 +- .../TranscriptionPreference/index.jsx | 20 +- .../GeneralSettings/VectorDatabase/index.jsx | 20 +- .../src/pages/Invite/NewUserModal/index.jsx | 20 +- frontend/src/pages/Invite/index.jsx | 6 +- frontend/src/pages/Main/index.jsx | 2 +- .../Steps/CreateWorkspace/index.jsx | 2 +- .../Steps/DataHandling/index.jsx | 28 +- .../pages/OnboardingFlow/Steps/Home/index.jsx | 31 +- .../Steps/Home/l_group-light.png | Bin 0 -> 47306 bytes .../OnboardingFlow/Steps/Home/l_group.png | Bin 74247 -> 64373 bytes .../Steps/Home/r_group-light.png | Bin 0 -> 49667 bytes .../OnboardingFlow/Steps/Home/r_group.png | Bin 81768 -> 66835 bytes .../Steps/LLMPreference/index.jsx | 6 +- .../OnboardingFlow/Steps/Survey/index.jsx | 61 ++-- .../OnboardingFlow/Steps/UserSetup/index.jsx | 24 +- .../src/pages/OnboardingFlow/Steps/index.jsx | 26 +- frontend/src/pages/WorkspaceChat/index.jsx | 2 +- .../AgentLLMSelection/AgentLLMItem/index.jsx | 46 +-- .../AgentConfig/AgentLLMSelection/index.jsx | 12 +- .../AgentConfig/AgentModelSelection/index.jsx | 4 +- .../WorkspaceSettings/AgentConfig/index.jsx | 8 +- .../ChatHistorySettings/index.jsx | 2 +- .../ChatSettings/ChatModeSelection/index.jsx | 2 +- .../ChatSettings/ChatPromptSettings/index.jsx | 2 +- .../ChatQueryRefusalResponse/index.jsx | 4 +- .../ChatTemperatureSettings/index.jsx | 2 +- .../ChatModelSelection/index.jsx | 4 +- .../WorkspaceLLMItem/index.jsx | 46 +-- .../WorkspaceLLMSelection/index.jsx | 14 +- .../DeleteWorkspace/index.jsx | 4 +- .../SuggestedChatMessages/index.jsx | 6 +- .../GeneralAppearance/WorkspaceName/index.jsx | 2 +- .../GeneralAppearance/WorkspacePfp/index.jsx | 12 +- .../Members/AddMemberModal/index.jsx | 20 +- .../Members/WorkspaceMemberRow/index.jsx | 2 +- .../pages/WorkspaceSettings/Members/index.jsx | 6 +- .../DocumentSimilarityThreshold/index.jsx | 2 +- .../MaxContextSnippets/index.jsx | 2 +- .../VectorDatabase/ResetDatabase/index.jsx | 2 +- .../src/pages/WorkspaceSettings/index.jsx | 6 +- frontend/src/utils/chat/markdown.js | 8 +- frontend/src/utils/constants.js | 2 - frontend/src/utils/toast.js | 5 +- frontend/tailwind.config.js | 70 +++- server/endpoints/system.js | 10 +- server/utils/files/logo.js | 23 +- 243 files changed, 3485 insertions(+), 2802 deletions(-) create mode 100644 frontend/src/ThemeContext.jsx create mode 100644 frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/SlashCommandIcon.jsx delete mode 100644 frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/slash-commands-icon.svg create mode 100644 frontend/src/hooks/useTheme.js create mode 100644 frontend/src/media/illustrations/login-logo-light.svg rename frontend/src/media/logo/{anything-llm-old.png => anything-llm-dark.png} (100%) create mode 100644 frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx create mode 100644 frontend/src/pages/OnboardingFlow/Steps/Home/l_group-light.png create mode 100644 frontend/src/pages/OnboardingFlow/Steps/Home/r_group-light.png diff --git a/.github/workflows/dev-build.yaml b/.github/workflows/dev-build.yaml index e7acd4e539..ce6f6f9d30 100644 --- a/.github/workflows/dev-build.yaml +++ b/.github/workflows/dev-build.yaml @@ -6,7 +6,7 @@ concurrency: on: push: - branches: ['2602-page-load-speed'] # put your current branch to create a build. Core team only. + branches: ['light-mode-1'] # put your current branch to create a build. Core team only. paths-ignore: - '**.md' - 'cloud-deployments/*' diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 6ce42fadbd..e692cd3036 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -16,6 +16,7 @@ import i18n from "./i18n"; import { PfpProvider } from "./PfpContext"; import { LogoProvider } from "./LogoContext"; import { FullScreenLoader } from "./components/Preloader"; +import { ThemeProvider } from "./ThemeContext"; const Main = lazy(() => import("@/pages/Main")); const InvitePage = lazy(() => import("@/pages/Invite")); @@ -70,139 +71,149 @@ const FineTuningWalkthrough = lazy(() => import("@/pages/FineTuning")); export default function App() { return ( - }> - - - - - - } /> - } /> - } /> + + }> + + + + + + } /> + } /> + } + /> - } - /> - } - /> - } - /> - } /> + } + /> + } + /> + } + /> + } /> - {/* Admin */} - } - /> - - } - /> - } - /> - - } - /> - - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - {/* Manager */} - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - {/* Onboarding Flow */} - } /> - } /> + {/* Admin */} + } + /> + + } + /> + } + /> + + } + /> + + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + {/* Manager */} + } + /> + } + /> + } + /> + } + /> + } + /> + + } + /> + } + /> + } + /> + } + /> + } + /> + {/* Onboarding Flow */} + } /> + } + /> - {/* Experimental feature pages */} - {/* Live Document Sync feature */} - } - /> + {/* Experimental feature pages */} + {/* Live Document Sync feature */} + } + /> - } - /> - - - - - - - + } + /> + + + + + + + + ); } diff --git a/frontend/src/LogoContext.jsx b/frontend/src/LogoContext.jsx index 014c6a6be0..8d4ff82dd0 100644 --- a/frontend/src/LogoContext.jsx +++ b/frontend/src/LogoContext.jsx @@ -1,6 +1,8 @@ import { createContext, useEffect, useState } from "react"; import AnythingLLM from "./media/logo/anything-llm.png"; -import DefaultLoginLogo from "./media/illustrations/login-logo.svg"; +import AnythingLLMDark from "./media/logo/anything-llm-dark.png"; +import DefaultLoginLogoLight from "./media/illustrations/login-logo.svg"; +import DefaultLoginLogoDark from "./media/illustrations/login-logo-light.svg"; import System from "./models/system"; export const LogoContext = createContext(); @@ -9,6 +11,10 @@ export function LogoProvider({ children }) { const [logo, setLogo] = useState(""); const [loginLogo, setLoginLogo] = useState(""); const [isCustomLogo, setIsCustomLogo] = useState(false); + const DefaultLoginLogo = + localStorage.getItem("theme") !== "default" + ? DefaultLoginLogoDark + : DefaultLoginLogoLight; useEffect(() => { async function fetchInstanceLogo() { @@ -19,12 +25,16 @@ export function LogoProvider({ children }) { setLoginLogo(isCustomLogo ? logoURL : DefaultLoginLogo); setIsCustomLogo(isCustomLogo); } else { - setLogo(AnythingLLM); + localStorage.getItem("theme") !== "default" + ? setLogo(AnythingLLMDark) + : setLogo(AnythingLLM); setLoginLogo(DefaultLoginLogo); setIsCustomLogo(false); } } catch (err) { - setLogo(AnythingLLM); + localStorage.getItem("theme") !== "default" + ? setLogo(AnythingLLMDark) + : setLogo(AnythingLLM); setLoginLogo(DefaultLoginLogo); setIsCustomLogo(false); console.error("Failed to fetch logo:", err); diff --git a/frontend/src/ThemeContext.jsx b/frontend/src/ThemeContext.jsx new file mode 100644 index 0000000000..f9a5c685fd --- /dev/null +++ b/frontend/src/ThemeContext.jsx @@ -0,0 +1,16 @@ +import React, { createContext, useContext } from "react"; +import { useTheme } from "./hooks/useTheme"; + +const ThemeContext = createContext(); + +export function ThemeProvider({ children }) { + const themeValue = useTheme(); + + return ( + {children} + ); +} + +export function useThemeContext() { + return useContext(ThemeContext); +} diff --git a/frontend/src/components/ChatBubble/index.jsx b/frontend/src/components/ChatBubble/index.jsx index c5a1f19076..4ffc3d085e 100644 --- a/frontend/src/components/ChatBubble/index.jsx +++ b/frontend/src/components/ChatBubble/index.jsx @@ -1,14 +1,14 @@ import React from "react"; import UserIcon from "../UserIcon"; import { userFromStorage } from "@/utils/request"; -import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants"; export default function ChatBubble({ message, type, popMsg }) { const isUser = type === "user"; - const backgroundColor = isUser ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR; return ( -
+
- -

Unsaved Changes

+ +

Unsaved Changes

- )} -
+ +

{t("welcomeMessage.createWorkspace")}

+ + )}
-
-
+ + , -
-
-
- - - - {t("welcomeMessage.user2")} - -
-
-
+ + + + {t("welcomeMessage.user2")} + + , -
-
-
- - - - , - br:
, - }} - /> - -
-
-
+ + + + + , + br:
, + }} + /> + + + , -
-
-
- - - - {t("welcomeMessage.user3")} - -
-
-
+ + + + {t("welcomeMessage.user3")} + + , -
-
- + + , ]; @@ -307,7 +203,7 @@ export default function DefaultChatContainer() { return (
@@ -335,3 +231,25 @@ export default function DefaultChatContainer() {
); } + +function MessageContainer({ children }) { + return ( +
+
+ {children} +
+
+ ); +} + +function MessageContent({ children }) { + return
{children}
; +} + +function MessageText({ children }) { + return ( + + {children} + + ); +} diff --git a/frontend/src/components/EditingChatBubble/index.jsx b/frontend/src/components/EditingChatBubble/index.jsx index 38eeb4e834..feabd4c6ee 100644 --- a/frontend/src/components/EditingChatBubble/index.jsx +++ b/frontend/src/components/EditingChatBubble/index.jsx @@ -16,7 +16,9 @@ export default function EditingChatBubble({ return (
-

+

{isUser ? t("common.user") : t("appearance.message.assistant")}

+
+ +
@@ -83,10 +88,8 @@ function NovitaModelSelection({ settings }) { acc[model.organization].push(model); return acc; }, {}); - setGroupedModels(modelsByOrganization); } - setLoading(false); } findCustomModels(); @@ -95,13 +98,13 @@ function NovitaModelSelection({ settings }) { if (loading || Object.keys(groupedModels).length === 0) { return (
-
@@ -82,13 +82,13 @@ function XAIModelSelection({ apiKey, settings }) { return (
-
diff --git a/frontend/src/components/ModalWrapper/index.jsx b/frontend/src/components/ModalWrapper/index.jsx index b780e57314..7c45c22c5a 100644 --- a/frontend/src/components/ModalWrapper/index.jsx +++ b/frontend/src/components/ModalWrapper/index.jsx @@ -1,7 +1,7 @@ import { createPortal } from "react-dom"; /** * @typedef {Object} ModalWrapperProps - * @property {import("react").ReactComponentElement} children - The DOM/JSX to render + * @property {import("react").ReactComponentElement} children - The DOM/JSX to render * @property {boolean} isOpen - Option that renders the modal * @property {boolean} noPortal - (default: false) Used for creating sub-DOM modals that need to be rendered as a child element instead of a modal placed at the root * Note: This can impact the bg-overlay presentation due to conflicting DOM positions so if using this property you should @@ -17,14 +17,14 @@ export default function ModalWrapper({ children, isOpen, noPortal = false }) { if (noPortal) { return ( -
+
{children}
); } return createPortal( -
+
{children}
, document.getElementById("root") diff --git a/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx b/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx index 4a3751385e..f8f56eb299 100644 --- a/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx +++ b/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx @@ -2,6 +2,7 @@ import showToast from "@/utils/toast"; import { DownloadSimple, Key } from "@phosphor-icons/react"; import { saveAs } from "file-saver"; import { useState } from "react"; +import ModalWrapper from "@/components/ModalWrapper"; export default function RecoveryCodeModal({ recoveryCodes, @@ -32,55 +33,59 @@ export default function RecoveryCodeModal({ }; return ( -
-
-
- - -
-
-

- In order to reset your password in the future, you will need these - recovery codes. Download or copy your recovery codes to save them.{" "} -
- These recovery codes are only shown once! -

-
-
    - {recoveryCodes.map((code, index) => ( -
  • - {code} -
    • - ))} -
+ +
+
+
+ +

+ Recovery Codes +

-
-
- +
+

+ In order to reset your password in the future, you will need these + recovery codes. Download or copy your recovery codes to save them.{" "} +
+ These recovery codes are only shown once! +

+
+
    + {recoveryCodes.map((code, index) => ( +
  • + {code} +
    • + ))} +
+
+
+
+ +
+
-
+ ); } diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/ConnectorOption/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/ConnectorOption/index.jsx index e0b10e050e..ad1211e980 100644 --- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/ConnectorOption/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/ConnectorOption/index.jsx @@ -9,8 +9,8 @@ export default function ConnectorOption({ return (
{loading && ( -

+

Once complete, all pages will be available for embedding into workspaces.

diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx index 8b10f664be..4cc23e30d4 100644 --- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx @@ -70,14 +70,14 @@ export default function GithubOptions() { -

+

Url of the GitHub repo you wish to collect.

-

+

Access Token to prevent rate limiting.

File Ignores

-

+

List in .gitignore format to ignore specific files during collection. Press enter after each entry you want to save.

@@ -133,9 +135,9 @@ export default function GithubOptions() { name="ignores" placeholder="!*.js, images/*, .DS_Store, bin/*" classNames={{ - tag: "bg-blue-300/10 text-zinc-800", + tag: "bg-theme-settings-input-bg light:bg-black/10 bg-blue-300/10 text-zinc-800", input: - "flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none", + "flex p-1 !bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none", }} />
@@ -191,14 +193,14 @@ function GitHubBranchSelection({ repo, accessToken }) {
-

+

Branch you wish to collect files from.

{allBranches.map((branch) => { return ( @@ -276,7 +278,7 @@ function PATTooltip({ accessToken }) {

diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx index 29522edc73..a820ac3ca2 100644 --- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx @@ -24,11 +24,10 @@ export default function GitlabOptions() { try { setLoading(true); showToast( - `Fetching all files for repo ${repo} - this may take a while.`, + "Fetching all files for repo - this may take a while.", "info", { clear: true, autoClose: false } ); - const { data, error } = await System.dataConnectors.gitlab.collect({ repo: form.get("repo"), accessToken: form.get("accessToken"), @@ -71,40 +70,41 @@ export default function GitlabOptions() { -

+

URL of the GitLab repo you wish to collect.

setRepo(e.target.value)} onBlur={() => setSettings({ ...settings, repo })} spellCheck={false} - rows={2} />
-

+

Access Token to prevent rate limiting.

File Ignores

-

+

List in .gitignore format to ignore specific files during collection. Press enter after each entry you want to save.

@@ -159,9 +159,9 @@ export default function GitlabOptions() { name="ignores" placeholder="!*.js, images/*, .DS_Store, bin/*" classNames={{ - tag: "bg-blue-300/10 text-zinc-800", + tag: "bg-theme-settings-input-bg light:bg-black/10 bg-blue-300/10 text-zinc-800", input: - "flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white", + "flex p-1 !bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none", }} />
@@ -217,14 +217,14 @@ function GitLabBranchSelection({ repo, accessToken }) {
-

+

Branch you wish to collect files from.

{allBranches.map((branch) => { return ( @@ -302,7 +302,7 @@ function PATTooltip({ accessToken }) {

diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx index f0017dab96..85ee4f75e5 100644 --- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx @@ -57,14 +57,14 @@ export default function WebsiteDepthOptions() { -

+

URL of the website you want to scrape.

-

+

This is the number of child-links that the worker should follow from the origin URL.

@@ -84,7 +84,7 @@ export default function WebsiteDepthOptions() { name="depth" min="1" max="5" - className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" + className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" required={true} defaultValue="1" /> @@ -94,7 +94,7 @@ export default function WebsiteDepthOptions() { -

+

Maximum number of links to scrape.

@@ -102,7 +102,7 @@ export default function WebsiteDepthOptions() { type="number" name="maxLinks" min="1" - className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" + className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" required={true} defaultValue="20" /> @@ -121,7 +121,7 @@ export default function WebsiteDepthOptions() { {loading ? "Scraping website..." : "Submit"} {loading && ( -

+

Once complete, all scraped pages will be available for embedding into workspaces in the document picker.

diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx index d0e68249e5..4f4ec4e9dd 100644 --- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx @@ -52,14 +52,14 @@ export default function YoutubeOptions() { -

+

URL of the YouTube video you wish to transcribe.

{loading && ( -

+

Once complete, the transcription will be available for embedding into workspaces in the document picker.

diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx index 9df6dd7d8b..647a026f6f 100644 --- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx @@ -64,7 +64,7 @@ export default function DataConnectors() { setSearchQuery(e.target.value)} diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/ContextMenu/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/ContextMenu/index.jsx index 5515d8b46e..c093982e73 100644 --- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/ContextMenu/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/ContextMenu/index.jsx @@ -60,17 +60,17 @@ export default function ContextMenu({ left: `${contextMenu.x}px`, zIndex: 1000, }} - className="bg-zinc-800 border border-zinc-700 rounded-md shadow-lg" + className="bg-theme-bg-secondary border border-theme-modal-border rounded-md shadow-lg" > diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx index 663c73d56a..ab1e4bd125 100644 --- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx @@ -10,8 +10,8 @@ export default function FileRow({ item, selected, toggleSelection }) { return ( toggleSelection(item)} - className={`text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer file-row ${ - selected ? "selected" : "" + className={`text-theme-text-primary text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-theme-file-picker-hover cursor-pointer file-row ${ + selected ? "selected light:text-white" : "" }`} >
{item?.cached && ( -
+

Cached

)} diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx index 7e2dfffee2..21b663deff 100644 --- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx @@ -22,13 +22,19 @@ export default function FolderRow({ <> -
+
-
-
-

- Create New Folder -

+
+
+
+
+

+ Create New Folder +

+
-
-
-
+
+ +
-
-
- - -
- +
+ + +
+ +
); diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx index d87ae66c8d..ceecb1a3ac 100644 --- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx @@ -200,7 +200,7 @@ function Directory({ type="search" placeholder="Search for document" onChange={handleSearch} - className="search-input bg-zinc-900 text-white placeholder-white/40 text-sm rounded-lg pl-9 pr-2.5 py-2 w-[250px] h-[32px]" + className="search-input bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg pl-9 pr-2.5 py-2 w-[250px] h-[32px] light:border-theme-modal-border light:border" />
-
-
+
+

Name

@@ -228,7 +232,7 @@ function Directory({ {loading ? (
-

+

{loadingMessage}

@@ -260,13 +264,13 @@ function Directory({
{amountSelected !== 0 && (
-
+
@@ -275,9 +279,9 @@ function Directory({ onClick={() => setShowFolderSelection(!showFolderSelection) } - className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-dark-text hover:bg-neutral-800/80 flex justify-center items-center group" + className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[32px] w-[32px] rounded-lg text-dark-text hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white flex justify-center items-center group" > - + {showFolderSelection && ( @@ -340,13 +344,13 @@ function DirectoryTooltips() { id="directory-item" place="bottom" delayShow={800} - className="tooltip invert z-99" + className="tooltip invert light:invert-0 z-99 max-w-[200px]" render={({ content }) => { const data = safeJsonParse(content, null); if (!data) return null; return (
-

{data.title}

+

{data.title}

Date: {data.date} diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx index 104d45a166..64a5bd9b7f 100644 --- a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx @@ -112,7 +112,7 @@ function FileUploadProgressComponent({

{status !== "complete" ? ( diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx index 8996829c1f..798284e246 100644 --- a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx @@ -78,15 +78,17 @@ export default function UploadFile({ return (
{ready === false ? (
- +
Document Processor Unavailable
@@ -97,7 +99,7 @@ export default function UploadFile({
) : files.length === 0 ? (
- +
Click to upload or drag and drop
@@ -133,7 +135,7 @@ export default function UploadFile({ disabled={fetchingUrl} name="link" type="url" - className="disabled:bg-zinc-600 disabled:text-slate-300 bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-3/4 p-2.5" + className="disabled:bg-theme-settings-input-bg disabled:text-theme-settings-input-placeholder bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-3/4 p-2.5" placeholder={"https://example.com"} autoComplete="off" /> diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx index 496702fc25..72d226c74d 100644 --- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx @@ -56,9 +56,13 @@ export default function WorkspaceFileRow({ const isMovedItem = movedItems?.some((movedItem) => movedItem.id === item.id); return (
{!disableSelection ? (
{
setHover(true)} onMouseLeave={() => setHover(false)} - className="flex gap-x-2 items-center hover:bg-main-gradient p-[2px] rounded ml-2" + className="flex gap-x-2 items-center hover:bg-theme-file-picker-hover p-[2px] rounded ml-2" > {
setHover(true)} onMouseLeave={() => setHover(false)} - className="flex gap-x-2 items-center hover:bg-main-gradient p-[2px] rounded ml-2" + className="flex gap-x-2 items-center hover:bg-theme-file-picker-hover p-[2px] rounded ml-2" >
-
-
+
+

Name

@@ -103,7 +103,7 @@ function WorkspaceDirectory({
-

+

{loadingMessage}

@@ -126,13 +126,13 @@ function WorkspaceDirectory({ highlightWorkspace ? "border-4 border-cyan-300/80 z-[999]" : "" }`} /> -
-
+
+
{!hasChanges && files.items.some((folder) => folder.items.length > 0) ? (
)} -

Name

+

Name

@@ -187,13 +187,14 @@ function WorkspaceDirectory({
)}
+ {Object.keys(selectedItems).length > 0 && !hasChanges && (
-
+
@@ -268,17 +269,20 @@ const PinAlert = memo(() => { return ( -
-
-
-
- -

- What is document pinning? -

-
+
+
+
+ +

+ What is document pinning? +

-
+
+
+

When you pin a document in AnythingLLM we will inject the entire content of the document into your prompt window for your @@ -294,16 +298,14 @@ const PinAlert = memo(() => { in a click.

- -
- -
+
+
+
@@ -330,20 +332,20 @@ const DocumentWatchAlert = memo(() => { return ( -
-
-
-
- -

- What does watching a document do? -

-
+
+
+
+ +

+ What does watching a document do? +

-
+
+
+

When you watch a document in AnythingLLM we will{" "} automatically sync your document content from it's original @@ -365,16 +367,14 @@ const DocumentWatchAlert = memo(() => { admin view.

- -
- -
+
+
+
@@ -410,13 +410,15 @@ function WorkspaceDocumentTooltips() { id="ws-directory-item" place="bottom" delayShow={800} - className="tooltip invert z-99" + className="tooltip invert light:invert-0 z-99 max-w-[200px]" render={({ content }) => { const data = safeJsonParse(content, null); if (!data) return null; return (
-

{data.title}

+

+ {data.title} +

Date: {data.date} diff --git a/frontend/src/components/Modals/ManageWorkspace/index.jsx b/frontend/src/components/Modals/ManageWorkspace/index.jsx index fe3f539b91..2dba258ab4 100644 --- a/frontend/src/components/Modals/ManageWorkspace/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/index.jsx @@ -7,6 +7,7 @@ import { isMobile } from "react-device-detect"; import useUser from "../../../hooks/useUser"; import DocumentSettings from "./Documents"; import DataConnectors from "./DataConnectors"; +import ModalWrapper from "@/components/ModalWrapper"; const noop = () => {}; const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => { @@ -36,31 +37,44 @@ const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => { if (isMobile) { return ( -

-
-
-
-
-

+ +
+
+
+

Editing "{workspace.name}" -

-

+

+
+ +
+
+
+

Editing these settings are only available on a desktop device. Please access this page on your desktop to continue.

-
- -
+
+ +
-
+ ); } @@ -68,14 +82,14 @@ const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
-
-
+
+
@@ -102,23 +116,23 @@ export default memo(ManageWorkspace); const ModalTabSwitcher = ({ selectedTab, setSelectedTab }) => { return (
-
+
+ +
+
-
+
-
+
@@ -78,7 +80,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
-
+ ); } diff --git a/frontend/src/components/Modals/Password/MultiUserAuth.jsx b/frontend/src/components/Modals/Password/MultiUserAuth.jsx index c89f0cff5f..f1b173d978 100644 --- a/frontend/src/components/Modals/Password/MultiUserAuth.jsx +++ b/frontend/src/components/Modals/Password/MultiUserAuth.jsx @@ -32,14 +32,14 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => { return (
-

+

{t("login.password-reset.title")}

-

+

{t("login.password-reset.description")}

@@ -56,7 +56,7 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => { placeholder={t("login.multi-user.placeholder-username")} value={username} onChange={(e) => setUsername(e.target.value)} - className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" + className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" required />
@@ -76,7 +76,7 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => { onChange={(e) => handleRecoveryCodeChange(index, e.target.value) } - className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" + className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" required />
@@ -115,7 +115,7 @@ const ResetPasswordForm = ({ onSubmit }) => { return (
@@ -136,7 +136,7 @@ const ResetPasswordForm = ({ onSubmit }) => { placeholder="New Password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} - className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" + className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" required />
@@ -147,7 +147,7 @@ const ResetPasswordForm = ({ onSubmit }) => { placeholder="Confirm Password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} - className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" + className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" required />
@@ -281,18 +281,18 @@ export default function MultiUserAuth() { return ( <> -
+

{t("login.multi-user.welcome")}

-

+

{customAppName || "AnythingLLM"}

-

+

{t("login.sign-in.start")} {customAppName || "AnythingLLM"}{" "} {t("login.sign-in.end")}

@@ -305,7 +305,7 @@ export default function MultiUserAuth() { name="username" type="text" placeholder={t("login.multi-user.placeholder-username")} - className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" + className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" required={true} autoComplete="off" /> @@ -315,7 +315,7 @@ export default function MultiUserAuth() { name="password" type="password" placeholder={t("login.multi-user.placeholder-password")} - className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" + className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" required={true} autoComplete="off" /> diff --git a/frontend/src/components/Modals/Password/SingleUserAuth.jsx b/frontend/src/components/Modals/Password/SingleUserAuth.jsx index 0b1730ce88..a645dcf7be 100644 --- a/frontend/src/components/Modals/Password/SingleUserAuth.jsx +++ b/frontend/src/components/Modals/Password/SingleUserAuth.jsx @@ -70,18 +70,18 @@ export default function SingleUserAuth() { return ( <> -
+

{t("login.multi-user.welcome")}

-

+

{customAppName || "AnythingLLM"}

-

+

{t("login.sign-in.start")} {customAppName || "AnythingLLM"}{" "} {t("login.sign-in.end")}

@@ -94,12 +94,11 @@ export default function SingleUserAuth() { name="password" type="password" placeholder="Password" - className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" + className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]" required={true} autoComplete="off" />
- {error &&

Error: {error}

}
@@ -109,13 +108,15 @@ export default function SingleUserAuth() { type="submit" className="md:text-primary-button md:bg-transparent text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-primary-button md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full" > - {loading ? "Validating..." : "Login"} + {loading + ? t("login.multi-user.validating") + : t("login.multi-user.login")}
- + +
-
+
Logo {mode === "single" ? : } diff --git a/frontend/src/components/Preloader.jsx b/frontend/src/components/Preloader.jsx index 4a81437bd9..ce175828c2 100644 --- a/frontend/src/components/Preloader.jsx +++ b/frontend/src/components/Preloader.jsx @@ -10,9 +10,9 @@ export function FullScreenLoader() { return (
-
+
); } diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx index 6ce4fad15d..98140bc8b3 100644 --- a/frontend/src/components/SettingsButton/index.jsx +++ b/frontend/src/components/SettingsButton/index.jsx @@ -15,12 +15,16 @@ export default function SettingsButton() {
- +
); @@ -29,12 +33,17 @@ export default function SettingsButton() {
- +
); diff --git a/frontend/src/components/SettingsSidebar/MenuOption/index.jsx b/frontend/src/components/SettingsSidebar/MenuOption/index.jsx index 3834549ea9..7b2e429312 100644 --- a/frontend/src/components/SettingsSidebar/MenuOption/index.jsx +++ b/frontend/src/components/SettingsSidebar/MenuOption/index.jsx @@ -66,15 +66,15 @@ export default function MenuOption({ rounded-[6px] ${ isActive - ? "bg-white/5 font-medium border-outline" - : "hover:bg-white/5" + ? "bg-theme-sidebar-subitem-selected font-medium border-outline" + : "hover:bg-theme-sidebar-subitem-hover" } `} > @@ -83,7 +83,9 @@ export default function MenuOption({ className={`${ isChild ? "text-xs" : "text-sm" } leading-loose whitespace-nowrap overflow-hidden ml-2 ${ - isActive ? "text-white" : "" + isActive + ? "text-white font-semibold" + : "text-white light:text-black" } ${!icon && "pl-5"}`} > {btnText} @@ -94,7 +96,8 @@ export default function MenuOption({ diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx index 46eba5db9c..bb2d32b2d4 100644 --- a/frontend/src/components/SettingsSidebar/index.jsx +++ b/frontend/src/components/SettingsSidebar/index.jsx @@ -13,7 +13,6 @@ import { Toolbox, } from "@phosphor-icons/react"; import useUser from "@/hooks/useUser"; -import { USER_BACKGROUND_COLOR } from "@/utils/constants"; import { isMobile } from "react-device-detect"; import Footer from "../Footer"; import { Link } from "react-router-dom"; @@ -47,10 +46,10 @@ export default function SettingsSidebar() { if (isMobile) { return ( <> -
+
@@ -75,12 +74,12 @@ export default function SettingsSidebar() { showBgOverlay ? "transition-all opacity-1" : "transition-none opacity-0" - } duration-500 fixed top-0 left-0 ${USER_BACKGROUND_COLOR} bg-opacity-75 w-screen h-screen`} + } duration-500 fixed top-0 left-0 bg-theme-bg-secondary bg-opacity-75 w-screen h-screen`} onClick={() => setShowSidebar(false)} />
{/* Header Information */} @@ -96,7 +95,7 @@ export default function SettingsSidebar() {
@@ -105,7 +104,7 @@ export default function SettingsSidebar() { {/* Primary Body */}
-
+
@@ -115,14 +114,14 @@ export default function SettingsSidebar() { user?.hasOwnProperty("role") && user.role !== "admin" } to={paths.settings.privacy()} - className="text-darker hover:text-white text-xs leading-[18px] mx-3" + className="text-theme-text-secondary hover:text-white text-xs leading-[18px] mx-3" > {t("settings.privacy")}
-
+
@@ -148,10 +147,10 @@ export default function SettingsSidebar() {
-
+
{t("settings.title")}
@@ -165,14 +164,14 @@ export default function SettingsSidebar() { user?.hasOwnProperty("role") && user.role !== "admin" } to={paths.settings.privacy()} - className="text-darker hover:text-white text-xs leading-[18px] mx-3" + className="text-theme-text-secondary hover:text-white hover:light:text-theme-text-primary text-xs leading-[18px] mx-3" > {t("settings.privacy")}
-
+
@@ -201,7 +200,7 @@ function SupportEmail() { return ( {t("settings.contact")} diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx index c4062102e6..89d17ec6a7 100644 --- a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx +++ b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx @@ -33,7 +33,7 @@ export default function ThreadItem({ return (
{/* Curved line Element and leader if required */} @@ -41,9 +41,9 @@ export default function ThreadItem({ style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }} className={`${ isActive - ? "border-l-2 border-b-2 border-white" - : "border-l border-b border-slate-300" - } h-[50%] absolute top-0 z-10 left-2 rounded-bl-lg`} + ? "border-l-2 border-b-2 border-white light:border-theme-sidebar-border z-30" + : "border-l border-b border-[#6F6F71] light:border-theme-sidebar-border z-10" + } h-[50%] absolute top-0 left-2 rounded-bl-lg`} >
{/* Downstroke border for next item */} {hasNext && ( @@ -51,9 +51,9 @@ export default function ThreadItem({ style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }} className={`${ idx <= activeIdx && !isActive - ? "border-l-2 border-white" - : "border-l border-slate-300" - } h-[100%] absolute top-0 z-1 left-2`} + ? "border-l-2 border-white light:border-theme-sidebar-border z-20" + : "border-l border-[#6F6F71] light:border-theme-sidebar-border z-10" + } h-[100%] absolute top-0 left-2`} >
)} @@ -62,11 +62,15 @@ export default function ThreadItem({ style={{ width: THREAD_CALLOUT_DETAIL_WIDTH + 8 }} className="h-full" /> -
+
{thread.deleted ? (
-
-

+

+

deleted thread

@@ -77,7 +81,7 @@ export default function ThreadItem({ onClick={() => toggleMarkForDeletion(thread.id)} > @@ -88,12 +92,12 @@ export default function ThreadItem({ href={ window.location.pathname === linkTo || ctrlPressed ? "#" : linkTo } - className="w-full" + className="w-full pl-2 py-1" aria-current={isActive ? "page" : ""} >

{truncate(thread.name, 25)} @@ -101,7 +105,9 @@ export default function ThreadItem({ )} {!!thread.slug && !thread.deleted && ( -

+
+ {" "} + {/* Added flex and items-center */} {ctrlPressed ? (
)} @@ -225,12 +234,12 @@ function OptionsMenu({ containerRef, workspace, thread, onRemove, close }) { return (
@@ -206,14 +212,14 @@ function DeleteAllThreadButton({ ctrlPressed, threads, onDelete }) { className="w-full relative flex h-[40px] items-center border-none hover:bg-red-400/20 rounded-lg group" >
-
+
-

+

Delete Selected

diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx index da052b6434..44a4cdce53 100644 --- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx +++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback } from "react"; +import React, { useState, useEffect } from "react"; import * as Skeleton from "react-loading-skeleton"; import "react-loading-skeleton/dist/skeleton.css"; import Workspace from "@/models/workspace"; @@ -8,7 +8,6 @@ import ManageWorkspace, { import paths from "@/utils/paths"; import { useParams } from "react-router-dom"; import { GearSix, SquaresFour, UploadSimple } from "@phosphor-icons/react"; -import truncate from "truncate"; import useUser from "@/hooks/useUser"; import ThreadContainer from "./ThreadContainer"; import { Link, useMatch } from "react-router-dom"; @@ -18,9 +17,6 @@ export default function ActiveWorkspaces() { const [loading, setLoading] = useState(true); const [workspaces, setWorkspaces] = useState([]); const [selectedWs, setSelectedWs] = useState(null); - const [hoverStates, setHoverStates] = useState({}); - const [gearHover, setGearHover] = useState({}); - const [uploadHover, setUploadHover] = useState({}); const { showing, showModal, hideModal } = useManageWorkspaceModal(); const { user } = useUser(); const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab"); @@ -33,41 +29,18 @@ export default function ActiveWorkspaces() { } getWorkspaces(); }, []); - const handleMouseEnter = useCallback((workspaceId) => { - setHoverStates((prev) => ({ ...prev, [workspaceId]: true })); - }, []); - - const handleMouseLeave = useCallback((workspaceId) => { - setHoverStates((prev) => ({ ...prev, [workspaceId]: false })); - }, []); - const handleGearMouseEnter = useCallback((workspaceId) => { - setGearHover((prev) => ({ ...prev, [workspaceId]: true })); - }, []); - - const handleGearMouseLeave = useCallback((workspaceId) => { - setGearHover((prev) => ({ ...prev, [workspaceId]: false })); - }, []); - - const handleUploadMouseEnter = useCallback((workspaceId) => { - setUploadHover((prev) => ({ ...prev, [workspaceId]: true })); - }, []); - - const handleUploadMouseLeave = useCallback((workspaceId) => { - setUploadHover((prev) => ({ ...prev, [workspaceId]: false })); - }, []); if (loading) { return ( - <> - - + ); } @@ -75,81 +48,67 @@ export default function ActiveWorkspaces() {
{workspaces.map((workspace) => { const isActive = workspace.slug === slug; - const isHovered = hoverStates[workspace.id]; return (
handleMouseEnter(workspace.id)} - onMouseLeave={() => handleMouseLeave(workspace.id)} + className="flex flex-col w-full group" key={workspace.id} role="listitem" > -
+
-
+
-

- {isActive || isHovered - ? truncate(workspace.name, 15) - : truncate(workspace.name, 20)} -

+
+

+ {workspace.name} +

+
- {(isActive || isHovered || gearHover[workspace.id]) && - user?.role !== "default" ? ( -
-
+ -
- + + handleGearMouseEnter(workspace.id)} - onMouseLeave={() => handleGearMouseLeave(workspace.id)} - className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto" + className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto p-[2px] hover:bg-[#646768]" aria-label="General appearance settings" > -
- -
+
- ) : null} + )}
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx index 0daf9f6981..edfac23bbc 100644 --- a/frontend/src/components/Sidebar/index.jsx +++ b/frontend/src/components/Sidebar/index.jsx @@ -4,7 +4,6 @@ import NewWorkspaceModal, { useNewWorkspaceModal, } from "../Modals/NewWorkspace"; import ActiveWorkspaces from "./ActiveWorkspaces"; -import { USER_BACKGROUND_COLOR } from "@/utils/constants"; import useLogo from "@/hooks/useLogo"; import useUser from "@/hooks/useUser"; import Footer from "../Footer"; @@ -39,7 +38,7 @@ export default function Sidebar() {
@@ -49,7 +48,7 @@ export default function Sidebar() { {(!user || user?.role !== "default") && (
-
+
@@ -104,11 +103,11 @@ export function SidebarMobileHeader() { <>
@@ -133,12 +132,12 @@ export function SidebarMobileHeader() { showBgOverlay ? "transition-all opacity-1" : "transition-none opacity-0" - } duration-500 fixed top-0 left-0 ${USER_BACKGROUND_COLOR} bg-opacity-75 w-screen h-screen`} + } duration-500 fixed top-0 left-0 bg-theme-bg-secondary bg-opacity-75 w-screen h-screen`} onClick={() => setShowSidebar(false)} />
{/* Header Information */} @@ -178,7 +177,7 @@ export function SidebarMobileHeader() {
-
+
diff --git a/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx index 2b19dd98af..0f6926f8f9 100644 --- a/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx +++ b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx @@ -16,7 +16,7 @@ export default function ElevenLabsOptions({ settings }) {
-
+ ); } @@ -198,7 +209,7 @@ function LanguagePreference() { setTheme(e.target.value)} + className="bg-theme-settings-input-bg w-fit px-4 focus:outline-primary-button active:outline-primary-button outline-none text-white text-sm rounded-lg block py-2" + > + {Object.entries(availableThemes).map(([key, value]) => ( + + ))} + +
+ ); +} diff --git a/frontend/src/components/UserMenu/UserButton/index.jsx b/frontend/src/components/UserMenu/UserButton/index.jsx index 7808cd4ab0..2ad79d00c8 100644 --- a/frontend/src/components/UserMenu/UserButton/index.jsx +++ b/frontend/src/components/UserMenu/UserButton/index.jsx @@ -54,12 +54,12 @@ export default function UserButton() { if (mode === null) return null; return ( -
+
@@ -67,20 +67,20 @@ export default function UserButton() { {showMenu && (
{mode === "multi" && !!user && ( )} Support @@ -92,7 +92,7 @@ export default function UserButton() { window.location.replace(paths.home()); }} type="button" - className="text-white hover:bg-slate-200/20 w-full text-left px-4 py-1.5 rounded-md" + className="text-white hover:bg-theme-action-menu-item-hover w-full text-left px-4 py-1.5 rounded-md" > Sign out diff --git a/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx index 07a370d0ed..4702631ca3 100644 --- a/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx +++ b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx @@ -9,7 +9,7 @@ export default function AstraDBOptions({ settings }) {
@@ -41,7 +41,7 @@ export default function ChromaDBOptions({ settings }) { autoComplete="off" type="password" defaultValue={settings?.ChromaApiKey ? "*".repeat(20) : ""} - className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" + className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" placeholder="sk-myApiKeyToAccessMyChromaInstance" />
diff --git a/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx index 4985d67076..5ee58612ef 100644 --- a/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx +++ b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx @@ -9,7 +9,7 @@ export default function MilvusDBOptions({ settings }) { onClick(value)} - className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-white/10 ${ - checked ? "bg-white/10" : "" + className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-theme-bg-secondary ${ + checked ? "bg-theme-bg-secondary" : "" }`} >
-
- {[...Array(3)].map((_, idx) => ( - - ))} +
{chunks.map(({ text, score }, idx) => ( -
-
-

- {HTMLDecode(omitChunkHeader(text))} -

- - {!!score && ( -
-
- -

{toPercentString(score)} match

+ <> +
+
+

+ {HTMLDecode(omitChunkHeader(text))} +

+ + {!!score && ( +
+
+ +

{toPercentString(score)} match

+
-
- )} + )} +
- {[...Array(3)].map((_, idx) => ( - - ))} -
+ {idx !== chunks.length - 1 && ( +
+ )} + ))}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx index acd0c4fa5d..396dc38b13 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx @@ -38,7 +38,7 @@ function ActionMenu({ chatId, forkThread, isEditing, role }) {
{open && ( -
+
); @@ -95,9 +98,7 @@ export function EditMessageForm({ +
+
+
-
- - -
-
- - -
-
-
- - -
+
+ + +
+
- +
); } diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx index f3423d2f83..6715cbe20b 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx @@ -47,105 +47,109 @@ export default function EditPresetModal({ return ( -
-
-
-

Edit Preset

- +
+
+
+

+ Edit Preset +

-
-
-
- -
- / + +
+
+ +
+
+
+ +
+ / + +
+
+
+ + +
+
+
-
- - -
-
- - -
-
-
-
+
+
+ + +
-
- - -
-
+
- +
); } diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx index edef845c18..c8c493577c 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx @@ -85,11 +85,13 @@ export default function SlashPresets({ setShowing, sendCommand }) { setShowing(false); sendCommand(`${preset.command} `, false); }} - className="w-full hover:cursor-pointer hover:bg-zinc-700 px-2 py-2 rounded-xl flex flex-row justify-start" + className="w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-row justify-start" >
-
{preset.command}
-
+
+ {preset.command} +
+
{preset.description}
@@ -98,7 +100,7 @@ export default function SlashPresets({ setShowing, sendCommand }) { e.stopPropagation(); handleEditPreset(preset); }} - className="text-white text-sm p-1 hover:cursor-pointer hover:bg-zinc-900 rounded-full mt-1" + className="text-theme-text-primary text-sm p-1 hover:cursor-pointer hover:bg-theme-action-menu-item-hover rounded-full mt-1" > @@ -106,11 +108,13 @@ export default function SlashPresets({ setShowing, sendCommand }) { ))}
/exit
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/SlashCommandIcon.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/SlashCommandIcon.jsx new file mode 100644 index 0000000000..4805233eef --- /dev/null +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/SlashCommandIcon.jsx @@ -0,0 +1,28 @@ +export default function SlashCommandIcon(props) { + return ( + + + + + ); +} diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/slash-commands-icon.svg b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/slash-commands-icon.svg deleted file mode 100644 index 368bdf526e..0000000000 --- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/slash-commands-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx index c242da27cd..26f1958f1c 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx @@ -1,5 +1,5 @@ import { useEffect, useRef, useState } from "react"; -import SlashCommandIcon from "./icons/slash-commands-icon.svg"; +import SlashCommandIcon from "./icons/SlashCommandIcon"; import { Tooltip } from "react-tooltip"; import ResetCommand from "./reset"; import EndAgentSession from "./endAgentSession"; @@ -12,14 +12,13 @@ export default function SlashCommandsButton({ showing, setShowSlashCommand }) { data-tooltip-id="tooltip-slash-cmd-btn" data-tooltip-content="View all available slash commands for chatting." onClick={() => setShowSlashCommand(!showing)} - className={`flex justify-center items-center opacity-60 hover:opacity-100 cursor-pointer ${ + className={`flex justify-center items-center cursor-pointer ${ showing ? "!opacity-100" : "" }`} > - Slash commands button
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx index e53ec26d09..00fbd6cddf 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx @@ -10,7 +10,7 @@ export default function ResetCommand({ setShowing, sendCommand }) { setShowing(false); sendCommand("/reset", true); }} - className="w-full hover:cursor-pointer hover:bg-zinc-700 px-2 py-2 rounded-xl flex flex-col justify-start" + className="w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-col justify-start" >
/reset
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx index a25f3ef6e4..64cfa37634 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx @@ -98,13 +98,14 @@ export default function SpeechToText({ sendCommand }) { data-tooltip-content="Speak your prompt" aria-label="Speak your prompt" onClick={listening ? endTTSSession : startSTTSession} - className={`relative flex justify-center items-center opacity-60 hover:opacity-100 cursor-pointer ${ + className={`relative flex justify-center items-center opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 cursor-pointer ${ !!listening ? "!opacity-100" : "" }`} > diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx index 645e943c0d..e64367348c 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx +++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx @@ -15,13 +15,14 @@ export default function TextSizeButton() { data-tooltip-content="Change text size" aria-label="Change text size" onClick={() => setShowTextSizeMenu(!showTextSizeMenu)} - className={`relative flex justify-center items-center opacity-60 hover:opacity-100 cursor-pointer ${ + className={`relative flex justify-center items-center opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 cursor-pointer ${ showTextSizeMenu ? "!opacity-100" : "" }`} >