highperfocused/danswer
1
0
Fork 0
mirror of https://github.com/danswer-ai/danswer.git synced 2025-06-21 21:41:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Dark Mode (#3936)

Browse Source 
* k

* intermediate unification

* many changes

* update dark mode configs

* updates

* decent state

* functional

* mostly clean

* updaet model selector

* finalize

* calendar update

* additional styling

* nit

* k

* update colors

* push change

* k

* update

* k

* update

* address additions

* quick nit
This commit is contained in:
pablonyx 2025-02-09 15:09:40 -08:00 committed by GitHub
parent 217569104b
commit 519fbd897e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
205 changed files with 2596 additions and 1536 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components.json
View File

@ -4,7 +4,7 @@
"rsc": true, "rsc": true,
"tsx": true, "tsx": true,
"tailwind": { "tailwind": {
"config": "tailwind.config.js", "config": "tailwind-themes/tailwind.config.js",
"css": "src/app/globals.css", "css": "src/app/globals.css",
"baseColor": "neutral", "baseColor": "neutral",
"cssVariables": false, "cssVariables": false,

1001
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
web/package.json
View File

@ -4,7 +4,7 @@
"version-comment": "version field must be SemVer or chromatic will barf", "version-comment": "version field must be SemVer or chromatic will barf",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev --turbopack", "dev": "next dev --turbo",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"lint": "next lint", "lint": "next lint",
@ -21,17 +21,17 @@
"@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-accordion": "^1.2.2",
"@radix-ui/react-checkbox": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.2",
"@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-collapsible": "^1.1.2",
"@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-label": "^2.1.1", "@radix-ui/react-label": "^2.1.1",
"@radix-ui/react-popover": "^1.1.2", "@radix-ui/react-popover": "^1.1.6",
"@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-radio-group": "^1.2.2",
"@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2",
"@radix-ui/react-select": "^2.1.2", "@radix-ui/react-select": "^2.1.6",
"@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slider": "^1.2.2",
"@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-slot": "^1.1.2",
"@radix-ui/react-switch": "^1.1.1", "@radix-ui/react-switch": "^1.1.3",
"@radix-ui/react-tabs": "^1.1.1", "@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.3", "@radix-ui/react-tooltip": "^1.1.3",
"@sentry/nextjs": "^8.50.0", "@sentry/nextjs": "^8.50.0",
@ -56,6 +56,7 @@
"lucide-react": "^0.454.0", "lucide-react": "^0.454.0",
"mdast-util-find-and-replace": "^3.0.1", "mdast-util-find-and-replace": "^3.0.1",
"next": "^15.0.2", "next": "^15.0.2",
"next-themes": "^0.4.4",
"npm": "^10.8.0", "npm": "^10.8.0",
"postcss": "^8.4.31", "postcss": "^8.4.31",
"posthog-js": "^1.176.0", "posthog-js": "^1.176.0",

BIN
web/public/LiteLLM.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
web/public/litellm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
web/public/logo-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
web/public/logotype-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

8
web/src/app/admin/add-connector/page.tsx
View File

@ -27,8 +27,12 @@ function SourceTile({
w-40 w-40
cursor-pointer cursor-pointer
shadow-md shadow-md
hover:bg-hover hover:bg-accent-background-hovered
${preSelect ? "bg-hover subtle-pulse" : "bg-hover-light"} ${
preSelect
? "bg-accent-background-hovered subtle-pulse"
: "bg-accent-background"
}
`} `}
href={sourceMetadata.adminUrl} href={sourceMetadata.adminUrl}
> >

6
web/src/app/admin/api-key/page.tsx
View File

@ -56,7 +56,7 @@ function NewApiKeyModal({
<div className="flex mt-2"> <div className="flex mt-2">
<b className="my-auto break-all">{apiKey}</b> <b className="my-auto break-all">{apiKey}</b>
<div <div
className="ml-2 my-auto p-2 hover:bg-hover rounded cursor-pointer" className="ml-2 my-auto p-2 hover:bg-accent-background-hovered rounded cursor-pointer"
onClick={() => { onClick={() => {
setCopyClicked(true); setCopyClicked(true);
navigator.clipboard.writeText(apiKey); navigator.clipboard.writeText(apiKey);
@ -179,7 +179,7 @@ function Main() {
flex flex
mb-1 mb-1
w-fit w-fit
hover:bg-hover cursor-pointer hover:bg-accent-background-hovered cursor-pointer
p-2 p-2
rounded-lg rounded-lg
border-border border-border
@ -203,7 +203,7 @@ function Main() {
flex flex
mb-1 mb-1
w-fit w-fit
hover:bg-hover cursor-pointer hover:bg-accent-background-hovered cursor-pointer
p-2 p-2
rounded-lg rounded-lg
border-border border-border

7
web/src/app/admin/assistants/AssistantEditor.tsx
View File

@ -825,10 +825,7 @@ export function AssistantEditor({
</TooltipProvider> </TooltipProvider>
</div> </div>
</div> </div>
<p <p className="text-sm text-neutral-700 dark:text-neutral-400">
className="text-sm text-subtle"
style={{ color: "rgb(113, 114, 121)" }}
>
Attach additional unique knowledge to this assistant Attach additional unique knowledge to this assistant
</p> </p>
</div> </div>
@ -1217,7 +1214,7 @@ export function AssistantEditor({
setFieldValue("label_ids", newLabelIds); setFieldValue("label_ids", newLabelIds);
}} }}
itemComponent={({ option }) => ( itemComponent={({ option }) => (
<div className="flex items-center justify-between px-4 py-3 text-sm hover:bg-hover cursor-pointer border-b border-border last:border-b-0"> <div className="flex items-center justify-between px-4 py-3 text-sm hover:bg-accent-background-hovered cursor-pointer border-b border-border last:border-b-0">
<div <div
className="flex-grow" className="flex-grow"
onClick={() => { onClick={() => {

2
web/src/app/admin/assistants/HidableSection.tsx
View File

@ -31,7 +31,7 @@ export function HidableSection({
return ( return (
<div> <div>
<div <div
className="flex hover:bg-hover-light rounded cursor-pointer p-2" className="flex hover:bg-accent-background rounded cursor-pointer p-2"
onClick={() => setIsHidden(!isHidden)} onClick={() => setIsHidden(!isHidden)}
> >
<SectionHeader includeMargin={false}>{sectionTitle}</SectionHeader> <SectionHeader includeMargin={false}>{sectionTitle}</SectionHeader>

6
web/src/app/admin/assistants/PersonaTable.tsx
View File

@ -187,7 +187,9 @@ export function PersonasTable() {
} }
}} }}
className={`px-1 py-0.5 rounded flex ${ className={`px-1 py-0.5 rounded flex ${
isEditable ? "hover:bg-hover cursor-pointer" : "" isEditable
? "hover:bg-accent-background-hovered cursor-pointer"
: ""
} select-none w-fit`} } select-none w-fit`}
> >
<div className="my-auto w-12"> <div className="my-auto w-12">
@ -205,7 +207,7 @@ export function PersonasTable() {
<div className="mr-auto my-auto"> <div className="mr-auto my-auto">
{!persona.builtin_persona && isEditable ? ( {!persona.builtin_persona && isEditable ? (
<div <div
className="hover:bg-hover rounded p-1 cursor-pointer" className="hover:bg-accent-background-hovered rounded p-1 cursor-pointer"
onClick={() => openDeleteModal(persona)} onClick={() => openDeleteModal(persona)}
> >
<TrashIcon /> <TrashIcon />

4
web/src/app/admin/assistants/StarterMessageList.tsx
View File

@ -65,7 +65,7 @@ export default function StarterMessagesList({
onClick={() => { onClick={() => {
arrayHelpers.remove(index); arrayHelpers.remove(index);
}} }}
className={`text-gray-400 hover:text-red-500 ${ className={`text-text-400 hover:text-red-500 ${
index === values.length - 1 && !starterMessage.message index === values.length - 1 && !starterMessage.message
? "opacity-50 cursor-not-allowed" ? "opacity-50 cursor-not-allowed"
: "" : ""
@ -105,7 +105,7 @@ export default function StarterMessagesList({
4 || 4 ||
isRefreshing || isRefreshing ||
!autoStarterMessageEnabled !autoStarterMessageEnabled
? "bg-neutral-800 text-neutral-300 cursor-not-allowed" ? "bg-background-800 text-text-300 cursor-not-allowed"
: "" : ""
} }
`} `}

1
web/src/app/admin/assistants/page.tsx
View File

@ -1,4 +1,3 @@
"use client";
import { PersonasTable } from "./PersonaTable"; import { PersonasTable } from "./PersonaTable";
import Text from "@/components/ui/text"; import Text from "@/components/ui/text";
import Title from "@/components/ui/title"; import Title from "@/components/ui/title";

8
web/src/app/admin/bots/SlackBotUpdateForm.tsx
View File

@ -92,9 +92,9 @@ export const ExistingSlackBotForm = ({
<div className="flex flex-col" ref={dropdownRef}> <div className="flex flex-col" ref={dropdownRef}>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="border rounded-lg border-gray-200"> <div className="border rounded-lg border-background-200">
<div <div
className="flex items-center gap-2 cursor-pointer hover:bg-gray-100 p-2" className="flex items-center gap-2 cursor-pointer hover:bg-background-100 p-2"
onClick={() => setIsExpanded(!isExpanded)} onClick={() => setIsExpanded(!isExpanded)}
> >
{isExpanded ? ( {isExpanded ? (
@ -117,7 +117,7 @@ export const ExistingSlackBotForm = ({
</div> </div>
{isExpanded && ( {isExpanded && (
<div className="bg-white border rounded-lg border-gray-200 shadow-lg absolute mt-12 right-0 z-10 w-full md:w-3/4 lg:w-1/2"> <div className="bg-white border rounded-lg border-background-200 shadow-lg absolute mt-12 right-0 z-10 w-full md:w-3/4 lg:w-1/2">
<div className="p-4"> <div className="p-4">
<SlackTokensForm <SlackTokensForm
isUpdate={true} isUpdate={true}
@ -134,7 +134,7 @@ export const ExistingSlackBotForm = ({
</div> </div>
</div> </div>
<div className="mt-2"> <div className="mt-2">
<div className="inline-block border rounded-lg border-gray-200 p-2"> <div className="inline-block border rounded-lg border-background-200 p-2">
<Checkbox <Checkbox
label="Enabled" label="Enabled"
checked={formValues.enabled} checked={formValues.enabled}

2
web/src/app/admin/bots/[bot-id]/channels/SlackChannelConfigFormFields.tsx
View File

@ -613,7 +613,7 @@ export function SlackChannelConfigFormFields({
<Link <Link
key={ccpairinfo.id} key={ccpairinfo.id}
href={`/admin/connector/${ccpairinfo.id}`} href={`/admin/connector/${ccpairinfo.id}`}
className="flex items-center p-2 rounded-md hover:bg-gray-100 transition-colors" className="flex items-center p-2 rounded-md hover:bg-background-100 transition-colors"
> >
<div className="mr-2"> <div className="mr-2">
<SourceIcon <SourceIcon

2
web/src/app/admin/configuration/document-processing/page.tsx
View File

@ -84,7 +84,7 @@ function Main() {
{isApiKeySet ? ( {isApiKeySet ? (
<div className="w-full p-3 border rounded-md bg-background text-text flex items-center"> <div className="w-full p-3 border rounded-md bg-background text-text flex items-center">
<span className="flex-grow">••••••••••••••••</span> <span className="flex-grow">••••••••••••••••</span>
<Lock className="h-5 w-5 text-gray-400" /> <Lock className="h-5 w-5 text-text-400" />
</div> </div>
) : ( ) : (
<input <input

7
web/src/app/admin/configuration/llm/ConfiguredLLMProviderDisplay.tsx
View File

@ -25,8 +25,7 @@ function LLMProviderUpdateModal({
}) { }) {
const providerName = existingLlmProvider?.name const providerName = existingLlmProvider?.name
? `"${existingLlmProvider.name}"` ? `"${existingLlmProvider.name}"`
: null || : llmProviderDescriptor?.display_name ||
llmProviderDescriptor?.display_name ||
llmProviderDescriptor?.name || llmProviderDescriptor?.name ||
"Custom LLM Provider"; "Custom LLM Provider";
return ( return (
@ -75,7 +74,7 @@ function LLMProviderDisplay({
return ( return (
<div> <div>
{popup} {popup}
<div className="border border-border p-3 rounded w-96 flex shadow-md"> <div className="border border-border p-3 dark:bg-neutral-800 dark:border-neutral-700 rounded w-96 flex shadow-md">
<div className="my-auto"> <div className="my-auto">
<div className="font-bold">{providerName} </div> <div className="font-bold">{providerName} </div>
<div className="text-xs italic">({existingLlmProvider.provider})</div> <div className="text-xs italic">({existingLlmProvider.provider})</div>
@ -113,7 +112,7 @@ function LLMProviderDisplay({
{existingLlmProvider && ( {existingLlmProvider && (
<div className="my-auto ml-3"> <div className="my-auto ml-3">
{existingLlmProvider.is_default_provider ? ( {existingLlmProvider.is_default_provider ? (
<Badge variant="orange">Default</Badge> <Badge variant="agent">Default</Badge>
) : ( ) : (
<Badge variant="success">Enabled</Badge> <Badge variant="success">Enabled</Badge>
)} )}

2
web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx
View File

@ -348,7 +348,7 @@ export function CustomLLMProviderUpdateForm({
</div> </div>
<div className="my-auto"> <div className="my-auto">
<FiX <FiX
className="my-auto w-10 h-10 cursor-pointer hover:bg-hover rounded p-2" className="my-auto w-10 h-10 cursor-pointer hover:bg-accent-background-hovered rounded p-2"
onClick={() => arrayHelpers.remove(index)} onClick={() => arrayHelpers.remove(index)}
/> />
</div> </div>

2
web/src/app/admin/configuration/llm/LLMConfiguration.tsx
View File

@ -73,7 +73,7 @@ function DefaultLLMProviderDisplay({
return ( return (
<div> <div>
{popup} {popup}
<div className="border border-border p-3 rounded w-96 flex shadow-md"> <div className="border border-border p-3 dark:bg-neutral-800 dark:border-neutral-700 rounded w-96 flex shadow-md">
<div className="my-auto"> <div className="my-auto">
<div className="font-bold">{providerName} </div> <div className="font-bold">{providerName} </div>
</div> </div>

3
web/src/app/admin/configuration/llm/interfaces.ts
View File

@ -12,6 +12,7 @@ import {
OpenSourceIcon, OpenSourceIcon,
AnthropicSVG, AnthropicSVG,
IconProps, IconProps,
OpenAIISVG,
} from "@/components/icons/icons"; } from "@/components/icons/icons";
import { FaRobot } from "react-icons/fa"; import { FaRobot } from "react-icons/fa";
@ -104,7 +105,7 @@ export const getProviderIcon = (providerName: string, modelName?: string) => {
switch (providerName) { switch (providerName) {
case "openai": case "openai":
// Special cases for openai based on modelName // Special cases for openai based on modelName
return modelNameToIcon(modelName || "", OpenAIIcon); return modelNameToIcon(modelName || "", OpenAIISVG);
case "anthropic": case "anthropic":
return AnthropicSVG; return AnthropicSVG;
case "bedrock": case "bedrock":

10
web/src/app/admin/configuration/search/page.tsx
View File

@ -111,14 +111,14 @@ function Main() {
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<Text className="font-semibold">Reranking Model</Text> <Text className="font-semibold">Reranking Model</Text>
<Text className="text-gray-700"> <Text className="text-text-700">
{searchSettings.rerank_model_name || "Not set"} {searchSettings.rerank_model_name || "Not set"}
</Text> </Text>
</div> </div>
<div> <div>
<Text className="font-semibold">Results to Rerank</Text> <Text className="font-semibold">Results to Rerank</Text>
<Text className="text-gray-700"> <Text className="text-text-700">
{searchSettings.num_rerank} {searchSettings.num_rerank}
</Text> </Text>
</div> </div>
@ -127,7 +127,7 @@ function Main() {
<Text className="font-semibold"> <Text className="font-semibold">
Multilingual Expansion Multilingual Expansion
</Text> </Text>
<Text className="text-gray-700"> <Text className="text-text-700">
{searchSettings.multilingual_expansion.length > 0 {searchSettings.multilingual_expansion.length > 0
? searchSettings.multilingual_expansion.join(", ") ? searchSettings.multilingual_expansion.join(", ")
: "None"} : "None"}
@ -136,7 +136,7 @@ function Main() {
<div> <div>
<Text className="font-semibold">Multipass Indexing</Text> <Text className="font-semibold">Multipass Indexing</Text>
<Text className="text-gray-700"> <Text className="text-text-700">
{searchSettings.multipass_indexing {searchSettings.multipass_indexing
? "Enabled" ? "Enabled"
: "Disabled"} : "Disabled"}
@ -147,7 +147,7 @@ function Main() {
<Text className="font-semibold"> <Text className="font-semibold">
Disable Reranking for Streaming Disable Reranking for Streaming
</Text> </Text>
<Text className="text-gray-700"> <Text className="text-text-700">
{searchSettings.disable_rerank_for_streaming {searchSettings.disable_rerank_for_streaming
? "Yes" ? "Yes"
: "No"} : "No"}

2
web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx
View File

@ -149,7 +149,7 @@ export function AdvancedConfigDisplay({
<> <>
<Title className="mt-8 mb-2">Advanced Configuration</Title> <Title className="mt-8 mb-2">Advanced Configuration</Title>
<CardSection> <CardSection>
<ul className="w-full text-sm divide-y divide-background-200 dark:divide-background-700"> <ul className="w-full text-sm divide-y divide-neutral-200 dark:divide-neutral-700">
{pruneFreq && ( {pruneFreq && (
<li <li
key={0} key={0}

2
web/src/app/admin/connector/[ccPairId]/DeletionErrorStatus.tsx
View File

@ -11,7 +11,7 @@ export default function DeletionErrorStatus({
<h3 className="text-base font-medium">Deletion Error</h3> <h3 className="text-base font-medium">Deletion Error</h3>
<div className="ml-2 relative group"> <div className="ml-2 relative group">
<FiInfo className="h-4 w-4 text-error-600 cursor-help" /> <FiInfo className="h-4 w-4 text-error-600 cursor-help" />
<div className="absolute z-10 w-64 p-2 mt-2 text-sm bg-white rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 border border-gray-200"> <div className="absolute z-10 w-64 p-2 mt-2 text-sm bg-white rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 border border-background-200">
This error occurred while attempting to delete the connector. You This error occurred while attempting to delete the connector. You
may re-attempt a deletion by clicking the &quot;Delete&quot; button. may re-attempt a deletion by clicking the &quot;Delete&quot; button.
</div> </div>

2
web/src/app/admin/connector/[ccPairId]/page.tsx
View File

@ -293,7 +293,7 @@ function Main({ ccPairId }: { ccPairId: number }) {
<b className="text-emphasis">{ccPair.num_docs_indexed}</b> <b className="text-emphasis">{ccPair.num_docs_indexed}</b>
</div> </div>
{!ccPair.is_editable_for_current_user && ( {!ccPair.is_editable_for_current_user && (
<div className="text-sm mt-2 text-neutral-500 italic"> <div className="text-sm mt-2 text-text-500 italic">
{ccPair.access_type === "public" {ccPair.access_type === "public"
? "Public connectors are not editable by curators." ? "Public connectors are not editable by curators."
: ccPair.access_type === "sync" : ccPair.access_type === "sync"

4
web/src/app/admin/connectors/[connector]/NavigationRow.tsx
View File

@ -50,11 +50,10 @@ const NavigationRow = ({
</SquareNavigationButton> </SquareNavigationButton>
)} )}
</div> </div>
<div className="flex justify-center"> <div className="flex justify-center">
{(formStep > 0 || noCredentials) && ( {(formStep > 0 || noCredentials) && (
<SquareNavigationButton <SquareNavigationButton
className="bg-accent text-white py-2.5 px-3.5 disabled:opacity-50" className="bg-agent text-white py-2.5 px-3.5 disabled:opacity-50"
disabled={!isValid} disabled={!isValid}
onClick={onSubmit} onClick={onSubmit}
> >
@ -63,7 +62,6 @@ const NavigationRow = ({
</SquareNavigationButton> </SquareNavigationButton>
)} )}
</div> </div>
<div className="flex justify-end"> <div className="flex justify-end">
{formStep === 0 && ( {formStep === 0 && (
<SquareNavigationButton <SquareNavigationButton

6
web/src/app/admin/connectors/[connector]/Sidebar.tsx
View File

@ -96,7 +96,7 @@ export default function Sidebar() {
<div className="mx-auto w-full max-w-2xl px-4 py-8"> <div className="mx-auto w-full max-w-2xl px-4 py-8">
<div className="relative"> <div className="relative">
{connector != "file" && ( {connector != "file" && (
<div className="absolute h-[85%] left-[6px] top-[8px] bottom-0 w-0.5 bg-gray-300"></div> <div className="absolute h-[85%] left-[6px] top-[8px] bottom-0 w-0.5 bg-background-300"></div>
)} )}
{settingSteps.map((step, index) => { {settingSteps.map((step, index) => {
const allowed = const allowed =
@ -119,7 +119,7 @@ export default function Sidebar() {
<div className="flex-shrink-0 mr-4 z-10"> <div className="flex-shrink-0 mr-4 z-10">
<div <div
className={`rounded-full h-3.5 w-3.5 flex items-center justify-center ${ className={`rounded-full h-3.5 w-3.5 flex items-center justify-center ${
allowed ? "bg-blue-500" : "bg-gray-300" allowed ? "bg-blue-500" : "bg-background-300"
}`} }`}
> >
{formStep === index && ( {formStep === index && (
@ -129,7 +129,7 @@ export default function Sidebar() {
</div> </div>
<div <div
className={`${ className={`${
index <= formStep ? "text-gray-800" : "text-gray-500" index <= formStep ? "text-text-800" : "text-text-500"
}`} }`}
> >
{step} {step}

8
web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx
View File

@ -16,7 +16,7 @@ export default function NumberInput({
}) { }) {
return ( return (
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<label className="block text-base font-medium text-text-700 mb-1"> <label className="block text-base font-medium text-text-700 dark:text-neutral-100 mb-1">
{label} {label}
{optional && <span className="text-text-500 ml-1">(optional)</span>} {optional && <span className="text-text-500 ml-1">(optional)</span>}
</label> </label>
@ -27,10 +27,10 @@ export default function NumberInput({
name={name} name={name}
min="-1" min="-1"
className={`mt-2 block w-full px-3 py-2 className={`mt-2 block w-full px-3 py-2
bg-white border border-gray-300 rounded-md bg-[#fff] dark:bg-transparent border border-background-300 rounded-md
text-sm shadow-sm placeholder-gray-400 text-sm shadow-sm placeholder-text-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-200 disabled:shadow-none disabled:bg-background-50 disabled:text-text-500 disabled:border-background-200 disabled:shadow-none
invalid:border-pink-500 invalid:text-pink-600 invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500`} focus:invalid:border-pink-500 focus:invalid:ring-pink-500`}
/> />

6
web/src/app/admin/connectors/[connector]/pages/formelements/NumberInput.tsx
View File

@ -30,10 +30,10 @@ export default function NumberInput({
min="-1" min="-1"
value={value === 0 && showNeverIfZero ? "Never" : value} value={value === 0 && showNeverIfZero ? "Never" : value}
className={`mt-2 block w-full px-3 py-2 className={`mt-2 block w-full px-3 py-2
bg-white border border-gray-300 rounded-md bg-white border border-background-300 rounded-md
text-sm shadow-sm placeholder-gray-400 text-sm shadow-sm placeholder-text-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-200 disabled:shadow-none disabled:bg-background-50 disabled:text-text-500 disabled:border-background-200 disabled:shadow-none
invalid:border-pink-500 invalid:text-pink-600 invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500`} focus:invalid:border-pink-500 focus:invalid:ring-pink-500`}
/> />

6
web/src/app/admin/connectors/[connector]/pages/gdrive/Credential.tsx
View File

@ -34,9 +34,9 @@ export const DriveJsonUpload = ({
<> <>
<input <input
className={ className={
"mr-3 text-sm text-gray-900 border border-gray-300 " + "mr-3 text-sm text-text-900 border border-background-300 " +
"cursor-pointer bg-backgrournd dark:text-gray-400 focus:outline-none " + "cursor-pointer bg-backgrournd dark:text-text-400 focus:outline-none " +
"dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" "dark:bg-background-700 dark:border-background-600 dark:placeholder-text-400"
} }
type="file" type="file"
accept=".json" accept=".json"

6
web/src/app/admin/connectors/[connector]/pages/gmail/Credential.tsx
View File

@ -34,9 +34,9 @@ const DriveJsonUpload = ({
<> <>
<input <input
className={ className={
"mr-3 text-sm text-gray-900 border border-gray-300 overflow-visible " + "mr-3 text-sm text-text-900 border border-background-300 overflow-visible " +
"cursor-pointer bg-background dark:text-gray-400 focus:outline-none " + "cursor-pointer bg-background dark:text-text-400 focus:outline-none " +
"dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" "dark:bg-background-700 dark:border-background-600 dark:placeholder-text-400"
} }
type="file" type="file"
accept=".json" accept=".json"

8
web/src/app/admin/documents/explorer/Explorer.tsx
View File

@ -50,7 +50,7 @@ const DocumentDisplay = ({
</a> </a>
</div> </div>
<div className="flex flex-wrap gap-x-2 mt-1 text-xs"> <div className="flex flex-wrap gap-x-2 mt-1 text-xs">
<div className="px-1 py-0.5 bg-hover rounded flex"> <div className="px-1 py-0.5 bg-accent-background-hovered rounded flex">
<p className="mr-1 my-auto">Boost:</p> <p className="mr-1 my-auto">Boost:</p>
<ScoreSection <ScoreSection
documentId={document.document_id} documentId={document.document_id}
@ -77,7 +77,7 @@ const DocumentDisplay = ({
}); });
} }
}} }}
className="px-1 py-0.5 bg-hover hover:bg-hover-light rounded flex cursor-pointer select-none" className="px-1 py-0.5 bg-accent-background-hovered hover:bg-accent-background rounded flex cursor-pointer select-none"
> >
<div className="my-auto"> <div className="my-auto">
{document.hidden ? ( {document.hidden ? (
@ -169,7 +169,7 @@ export function Explorer({
<div> <div>
{popup} {popup}
<div className="justify-center py-2"> <div className="justify-center py-2">
<div className="flex items-center w-full border-2 border-border rounded-lg px-4 py-2 focus-within:border-accent bg-background-search"> <div className="flex items-center w-full border-2 border-border rounded-lg px-4 py-2 focus-within:border-accent bg-background-search dark:bg-transparent">
<MagnifyingGlass /> <MagnifyingGlass />
<textarea <textarea
autoFocus autoFocus
@ -221,7 +221,7 @@ export function Explorer({
</div> </div>
)} )}
{!query && ( {!query && (
<div className="flex text-emphasis mt-3"> <div className="flex text-text-darker mt-3">
Search for a document above to modify its boost or hide it from Search for a document above to modify its boost or hide it from
searches. searches.
</div> </div>

4
web/src/app/admin/documents/feedback/DocumentFeedbackTable.tsx
View File

@ -37,7 +37,7 @@ const IsVisibleSection = ({
); );
onUpdate(response); onUpdate(response);
}} }}
className="flex text-error cursor-pointer hover:bg-hover py-1 px-2 w-fit rounded-full" className="flex text-error cursor-pointer hover:bg-accent-background-hovered py-1 px-2 w-fit rounded-full"
> >
<div className="select-none">Hidden</div> <div className="select-none">Hidden</div>
<div className="ml-1 my-auto"> <div className="ml-1 my-auto">
@ -53,7 +53,7 @@ const IsVisibleSection = ({
); );
onUpdate(response); onUpdate(response);
}} }}
className="flex cursor-pointer hover:bg-hover py-1 px-2 w-fit rounded-full" className="flex cursor-pointer hover:bg-accent-background-hovered py-1 px-2 w-fit rounded-full"
> >
<div className="my-auto select-none">Visible</div> <div className="my-auto select-none">Visible</div>
<div className="ml-1 my-auto"> <div className="ml-1 my-auto">

4
web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx
View File

@ -189,7 +189,7 @@ export const DocumentSetCreationForm = ({
cursor-pointer ` + cursor-pointer ` +
(isSelected (isSelected
? " bg-background-strong" ? " bg-background-strong"
: " hover:bg-hover") : " hover:bg-accent-background-hovered")
} }
onClick={() => { onClick={() => {
if (isSelected) { if (isSelected) {
@ -305,7 +305,7 @@ export const DocumentSetCreationForm = ({
cursor-pointer ` + cursor-pointer ` +
(isSelected (isSelected
? " bg-background-strong" ? " bg-background-strong"
: " hover:bg-hover") : " hover:bg-accent-background-hovered")
} }
onClick={() => { onClick={() => {
if (isSelected) { if (isSelected) {

6
web/src/app/admin/documents/sets/page.tsx
View File

@ -55,7 +55,7 @@ const EditRow = ({
if (!isEditable) { if (!isEditable) {
return ( return (
<div className="text-emphasis font-medium my-auto p-1"> <div className="text-text-darkerfont-medium my-auto p-1">
{documentSet.name} {documentSet.name}
</div> </div>
); );
@ -68,7 +68,7 @@ const EditRow = ({
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <div
className={` className={`
text-emphasis font-medium my-auto p-1 hover:bg-hover-light flex items-center select-none text-text-darkerfont-medium my-auto p-1 hover:bg-accent-background flex items-center select-none
${documentSet.is_up_to_date ? "cursor-pointer" : "cursor-default"} ${documentSet.is_up_to_date ? "cursor-pointer" : "cursor-default"}
`} `}
style={{ wordBreak: "normal", overflowWrap: "break-word" }} style={{ wordBreak: "normal", overflowWrap: "break-word" }}
@ -213,7 +213,7 @@ const DocumentSetTable = ({
</Badge> </Badge>
) : ( ) : (
<Badge <Badge
variant={isEditable ? "in_progress" : "outline"} variant={isEditable ? "private" : "default"}
icon={FiLock} icon={FiLock}
> >
Private Private

12
web/src/app/admin/embeddings/EmbeddingModelSelectionForm.tsx
View File

@ -235,8 +235,8 @@ export function EmbeddingModelSelection({
onClick={() => setModelTab(null)} onClick={() => setModelTab(null)}
className={`mr-4 p-2 font-bold ${ className={`mr-4 p-2 font-bold ${
!modelTab !modelTab
? "rounded bg-background-900 text-text-100 underline" ? "rounded bg-background-900 dark:bg-neutral-900 text-text-100 dark:text-neutral-100 underline"
: " hover:underline bg-background-100" : " hover:underline bg-background-100 dark:bg-neutral-700"
}`} }`}
> >
Current Current
@ -246,8 +246,8 @@ export function EmbeddingModelSelection({
onClick={() => setModelTab("cloud")} onClick={() => setModelTab("cloud")}
className={`mx-2 p-2 font-bold ${ className={`mx-2 p-2 font-bold ${
modelTab == "cloud" modelTab == "cloud"
? "rounded bg-background-900 text-text-100 underline" ? "rounded bg-background-900 dark:bg-neutral-900 text-text-100 dark:text-neutral-100 underline"
: " hover:underline bg-background-100" : " hover:underline bg-background-100 dark:bg-neutral-700"
}`} }`}
> >
Cloud-based Cloud-based
@ -258,8 +258,8 @@ export function EmbeddingModelSelection({
onClick={() => setModelTab("open")} onClick={() => setModelTab("open")}
className={` mx-2 p-2 font-bold ${ className={` mx-2 p-2 font-bold ${
modelTab == "open" modelTab == "open"
? "rounded bg-background-900 text-text-100 underline" ? "rounded bg-background-900 dark:bg-neutral-900 text-text-100 dark:text-neutral-100 underline"
: "hover:underline bg-background-100" : "hover:underline bg-background-100 dark:bg-neutral-700"
}`} }`}
> >
Self-hosted Self-hosted

8
web/src/app/admin/embeddings/RerankingFormPage.tsx
View File

@ -177,8 +177,8 @@ const RerankingDetailsForm = forwardRef<
key={`${card.rerank_provider_type}-${card.modelName}`} key={`${card.rerank_provider_type}-${card.modelName}`}
className={`p-4 border rounded-lg cursor-pointer transition-all duration-200 ${ className={`p-4 border rounded-lg cursor-pointer transition-all duration-200 ${
isSelected isSelected
? "border-blue-500 bg-blue-50 shadow-md" ? "border-blue-500 bg-blue-50 dark:bg-blue-900 dark:border-blue-700 shadow-md"
: "border-gray-200 hover:border-blue-300 hover:shadow-sm" : "border-background-200 hover:border-blue-300 hover:shadow-sm dark:border-neutral-700 dark:hover:border-blue-300"
}`} }`}
onClick={() => { onClick={() => {
if ( if (
@ -240,10 +240,10 @@ const RerankingDetailsForm = forwardRef<
</a> </a>
)} )}
</div> </div>
<p className="text-sm text-gray-600 mb-2"> <p className="text-sm text-text-600 mb-2">
{card.description} {card.description}
</p> </p>
<div className="text-xs text-gray-500"> <div className="text-xs text-text-500">
{card.cloud ? "Cloud-based" : "Self-hosted"} {card.cloud ? "Cloud-based" : "Self-hosted"}
</div> </div>
</div> </div>

34
web/src/app/admin/embeddings/pages/CloudEmbeddingPage.tsx
View File

@ -210,12 +210,12 @@ export default function CloudEmbeddingPage({
)} )}
{!liteLLMProvider && ( {!liteLLMProvider && (
<CardSection className="mt-2 w-full max-w-4xl bg-gray-50 border border-gray-200"> <CardSection className="mt-2 w-full max-w-4xl bg-background-50 border border-background-200">
<div className="p-4"> <div className="p-4">
<Text className="text-lg font-semibold mb-2"> <Text className="text-lg font-semibold mb-2">
API URL Required API URL Required
</Text> </Text>
<Text className="text-sm text-gray-600 mb-4"> <Text className="text-sm text-text-600 mb-4">
Before you can add models, you need to provide an API URL Before you can add models, you need to provide an API URL
for your LiteLLM proxy. Click the &quot;Provide API for your LiteLLM proxy. Click the &quot;Provide API
URL&quot; button above to set up your LiteLLM configuration. URL&quot; button above to set up your LiteLLM configuration.
@ -313,16 +313,16 @@ export default function CloudEmbeddingPage({
Configure Azure OpenAI Configure Azure OpenAI
</button> </button>
<div className="mt-2 w-full max-w-4xl"> <div className="mt-2 w-full max-w-4xl">
<CardSection className="p-4 border border-gray-200 rounded-lg shadow-sm"> <CardSection className="p-4 border border-background-200 rounded-lg shadow-sm">
<Text className="text-base font-medium mb-2"> <Text className="text-base font-medium mb-2">
Configure Azure OpenAI for Embeddings Configure Azure OpenAI for Embeddings
</Text> </Text>
<Text className="text-sm text-gray-600 mb-3"> <Text className="text-sm text-text-600 mb-3">
Click &quot;Configure Azure OpenAI&quot; to set up Azure Click &quot;Configure Azure OpenAI&quot; to set up Azure
OpenAI for embeddings. OpenAI for embeddings.
</Text> </Text>
<div className="flex items-center text-sm text-gray-700"> <div className="flex items-center text-sm text-text-700">
<FiInfo className="text-gray-400 mr-2" size={16} /> <FiInfo className="text-text-400 mr-2" size={16} />
<Text> <Text>
You&apos;ll need: API version, base URL, API key, model You&apos;ll need: API version, base URL, API key, model
name, and deployment name. name, and deployment name.
@ -339,7 +339,7 @@ export default function CloudEmbeddingPage({
</Text> </Text>
{azureProviderDetails ? ( {azureProviderDetails ? (
<CardSection className="bg-white shadow-sm border border-gray-200 rounded-lg"> <CardSection className="bg-white shadow-sm border border-background-200 rounded-lg">
<div className="p-4 space-y-3"> <div className="p-4 space-y-3">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="font-medium">API Version:</span> <span className="font-medium">API Version:</span>
@ -364,8 +364,8 @@ export default function CloudEmbeddingPage({
</button> </button>
</CardSection> </CardSection>
) : ( ) : (
<CardSection className="bg-gray-50 border border-gray-200 rounded-lg"> <CardSection className="bg-background-50 border border-background-200 rounded-lg">
<div className="p-4 text-gray-500 text-center"> <div className="p-4 text-text-500 text-center">
No Azure provider has been configured yet. No Azure provider has been configured yet.
</div> </div>
</CardSection> </CardSection>
@ -450,8 +450,8 @@ export function CloudModelCard({
<div <div
className={`p-4 w-96 border rounded-lg transition-all duration-200 ${ className={`p-4 w-96 border rounded-lg transition-all duration-200 ${
enabled enabled
? "border-blue-500 bg-blue-50 shadow-md" ? "border-blue-500 bg-blue-50 dark:bg-blue-950 shadow-md"
: "border-gray-300 hover:border-blue-300 hover:shadow-sm" : "border-background-300 hover:border-blue-300 hover:shadow-sm"
} ${!provider.configured && "opacity-80 hover:opacity-100"}`} } ${!provider.configured && "opacity-80 hover:opacity-100"}`}
> >
{popup} {popup}
@ -465,7 +465,9 @@ export function CloudModelCard({
)} )}
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h3 className="font-bold text-lg">{model.model_name}</h3> <h3 className="font-bold dark:text-neutral-100 text-lg">
{model.model_name}
</h3>
<div className="flex gap-x-2"> <div className="flex gap-x-2">
{model.provider_type == EmbeddingProvider.LITELLM.toLowerCase() && ( {model.provider_type == EmbeddingProvider.LITELLM.toLowerCase() && (
<button <button
@ -487,10 +489,12 @@ export function CloudModelCard({
</a> </a>
</div> </div>
</div> </div>
<p className="text-sm text-gray-600 mb-2">{model.description}</p> <p className="text-sm text-text-600 dark:text-neutral-400 mb-2">
{model.description}
</p>
{model?.provider_type?.toLowerCase() != {model?.provider_type?.toLowerCase() !=
EmbeddingProvider.LITELLM.toLowerCase() && ( EmbeddingProvider.LITELLM.toLowerCase() && (
<div className="text-xs text-gray-500 mb-2"> <div className="text-xs text-text-500 mb-2">
${model.pricePerMillion}/M tokens ${model.pricePerMillion}/M tokens
</div> </div>
)} )}
@ -499,7 +503,7 @@ export function CloudModelCard({
className={`w-full p-2 rounded-lg text-sm ${ className={`w-full p-2 rounded-lg text-sm ${
enabled enabled
? "bg-background-125 border border-border cursor-not-allowed" ? "bg-background-125 border border-border cursor-not-allowed"
: "bg-background border border-border hover:bg-hover cursor-pointer" : "bg-background border border-border hover:bg-accent-background-hovered cursor-pointer"
}`} }`}
onClick={() => { onClick={() => {
if (enabled) { if (enabled) {

4
web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx
View File

@ -187,7 +187,7 @@ export default function EmbeddingForm() {
return needsReIndex ? ( return needsReIndex ? (
<div className="flex mx-auto gap-x-1 ml-auto items-center"> <div className="flex mx-auto gap-x-1 ml-auto items-center">
<button <button
className="enabled:cursor-pointer disabled:bg-accent/50 disabled:cursor-not-allowed bg-accent flex gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm" className="enabled:cursor-pointer disabled:bg-accent/50 disabled:cursor-not-allowed bg-agent flex gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
onClick={handleReindex} onClick={handleReindex}
> >
Re-index Re-index
@ -214,7 +214,7 @@ export default function EmbeddingForm() {
</div> </div>
) : ( ) : (
<button <button
className="enabled:cursor-pointer ml-auto disabled:bg-accent/50 disabled:cursor-not-allowed bg-accent flex mx-auto gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm" className="enabled:cursor-pointer ml-auto disabled:bg-accent/50 disabled:cursor-not-allowed bg-agent flex mx-auto gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
onClick={async () => { onClick={async () => {
updateSearch(); updateSearch();
navigateToEmbeddingPage("search settings"); navigateToEmbeddingPage("search settings");

4
web/src/app/admin/indexing/[id]/IndexAttemptErrorsTable.tsx
View File

@ -52,13 +52,13 @@ export function CustomModal({
setCopyClicked(true); setCopyClicked(true);
setTimeout(() => setCopyClicked(false), 2000); setTimeout(() => setCopyClicked(false), 2000);
}} }}
className="flex w-fit cursor-pointer hover:bg-hover-light p-2 border-border border rounded" className="flex w-fit cursor-pointer hover:bg-accent-background p-2 border-border border rounded"
> >
Copy full content Copy full content
<CopyIcon className="ml-2 my-auto" /> <CopyIcon className="ml-2 my-auto" />
</div> </div>
) : ( ) : (
<div className="flex w-fit hover:bg-hover-light p-2 border-border border rounded cursor-default"> <div className="flex w-fit hover:bg-accent-background p-2 border-border border rounded cursor-default">
Copied to clipboard Copied to clipboard
<CheckmarkIcon <CheckmarkIcon
className="my-auto ml-2 flex flex-shrink-0 text-success" className="my-auto ml-2 flex flex-shrink-0 text-success"

65
web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx
View File

@ -59,7 +59,7 @@ function SummaryRow({
return ( return (
<TableRow <TableRow
onClick={onToggle} onClick={onToggle}
className="border-border group hover:bg-background-settings-hover bg-background-sidebar py-4 rounded-sm !border cursor-pointer" className="border-border dark:hover:bg-neutral-800 dark:border-neutral-700 group hover:bg-background-settings-hover/20 bg-background-sidebar py-4 rounded-sm !border cursor-pointer"
> >
<TableCell> <TableCell>
<div className="text-xl flex items-center truncate ellipsis gap-x-2 font-semibold"> <div className="text-xl flex items-center truncate ellipsis gap-x-2 font-semibold">
@ -76,37 +76,26 @@ function SummaryRow({
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="text-sm text-gray-500">Total Connectors</div> <div className="text-sm text-neutral-500 dark:text-neutral-300">
Total Connectors
</div>
<div className="text-xl font-semibold">{summary.count}</div> <div className="text-xl font-semibold">{summary.count}</div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="text-sm text-gray-500">Active Connectors</div> <div className="text-sm text-neutral-500 dark:text-neutral-300">
<TooltipProvider> Active Connectors
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center mt-1">
<div className="w-full bg-white rounded-full h-2 mr-2">
<div
className="bg-green-500 h-2 rounded-full"
style={{ width: `${activePercentage}%` }}
></div>
</div> </div>
<span className="text-sm font-medium whitespace-nowrap"> <p className="flex text-xl mx-auto font-semibold items-center text-lg mt-1">
{summary.active} ({activePercentage.toFixed(0)}%) {summary.active}/{summary.count}
</span> </p>
</div>
</TooltipTrigger>
<TooltipContent>
{summary.active} out of {summary.count} connectors are active
</TooltipContent>
</Tooltip>
</TooltipProvider>
</TableCell> </TableCell>
{isPaidEnterpriseFeaturesEnabled && ( {isPaidEnterpriseFeaturesEnabled && (
<TableCell> <TableCell>
<div className="text-sm text-gray-500">Public Connectors</div> <div className="text-sm text-neutral-500 dark:text-neutral-300">
Public Connectors
</div>
<p className="flex text-xl mx-auto font-semibold items-center text-lg mt-1"> <p className="flex text-xl mx-auto font-semibold items-center text-lg mt-1">
{summary.public}/{summary.count} {summary.public}/{summary.count}
</p> </p>
@ -114,14 +103,18 @@ function SummaryRow({
)} )}
<TableCell> <TableCell>
<div className="text-sm text-gray-500">Total Docs Indexed</div> <div className="text-sm text-neutral-500 dark:text-neutral-300">
Total Docs Indexed
</div>
<div className="text-xl font-semibold"> <div className="text-xl font-semibold">
{summary.totalDocsIndexed.toLocaleString()} {summary.totalDocsIndexed.toLocaleString()}
</div> </div>
</TableCell> </TableCell>
<TableCell> <TableCell>
<div className="text-sm text-gray-500">Errors</div> <div className="text-sm text-neutral-500 dark:text-neutral-300">
Errors
</div>
<div className="flex items-center text-lg gap-x-1 font-semibold"> <div className="flex items-center text-lg gap-x-1 font-semibold">
{summary.errors > 0 && <Warning className="text-error h-6 w-6" />} {summary.errors > 0 && <Warning className="text-error h-6 w-6" />}
@ -178,7 +171,7 @@ function ConnectorRow({
); );
case "not_started": case "not_started":
return ( return (
<Badge circle variant="purple"> <Badge circle variant="not_started">
Scheduled Scheduled
</Badge> </Badge>
); );
@ -193,10 +186,12 @@ function ConnectorRow({
return ( return (
<TableRow <TableRow
className={`hover:bg-hover-light ${ className={`
border border-border dark:border-neutral-700
hover:bg-accent-background ${
invisible invisible
? "invisible !h-0 !-mb-10 !border-none" ? "invisible !h-0 !-mb-10 !border-none"
: "!border !border-border" : "!border border-border dark:border-neutral-700"
} w-full cursor-pointer relative `} } w-full cursor-pointer relative `}
onClick={() => { onClick={() => {
router.push(`/admin/connector/${ccPairsIndexingStatus.cc_pair_id}`); router.push(`/admin/connector/${ccPairsIndexingStatus.cc_pair_id}`);
@ -219,16 +214,13 @@ function ConnectorRow({
</Badge> </Badge>
) : ccPairsIndexingStatus.access_type === "sync" ? ( ) : ccPairsIndexingStatus.access_type === "sync" ? (
<Badge <Badge
variant={isEditable ? "orange" : "default"} variant={isEditable ? "auto-sync" : "default"}
icon={FiRefreshCw} icon={FiRefreshCw}
> >
Sync Auto-Sync
</Badge> </Badge>
) : ( ) : (
<Badge <Badge variant={isEditable ? "private" : "default"} icon={FiLock}>
variant={isEditable ? "in_progress" : "default"}
icon={FiLock}
>
Private Private
</Badge> </Badge>
)} )}
@ -457,7 +449,10 @@ export function CCPairIndexingStatusTable({
/> />
{connectorsToggled[source] && ( {connectorsToggled[source] && (
<> <>
<TableRow className="border border-border"> <TableRow
noHover
className="border ! border-border dark:border-neutral-700"
>
<TableHead>Name</TableHead> <TableHead>Name</TableHead>
<TableHead>Last Indexed</TableHead> <TableHead>Last Indexed</TableHead>
<TableHead>Activity</TableHead> <TableHead>Activity</TableHead>

10
web/src/app/admin/settings/AnonymousUserPath.tsx
View File

@ -96,11 +96,11 @@ export function AnonymousUserPath({
} }
return ( return (
<div className="mt-4 ml-6 max-w-xl p-6 bg-white shadow-lg border border-gray-200 rounded-lg"> <div className="mt-4 ml-6 max-w-xl p-6 bg-white shadow-lg border border-background-200 rounded-lg">
<h4 className="font-semibold text-lg text-gray-800 mb-3"> <h4 className="font-semibold text-lg text-text-800 mb-3">
Anonymous User Access Anonymous User Access
</h4> </h4>
<p className="text-gray-600 text-sm mb-4"> <p className="text-text-600 text-sm mb-4">
Enable this to allow non-authenticated users to access all documents Enable this to allow non-authenticated users to access all documents
indexed by public connectors in your workspace. indexed by public connectors in your workspace.
{anonymousUserPath {anonymousUserPath
@ -115,12 +115,12 @@ export function AnonymousUserPath({
) : ( ) : (
<div className="flex flex-col gap-2 justify-center items-start"> <div className="flex flex-col gap-2 justify-center items-start">
<div className="w-full flex-grow flex items-center rounded-md shadow-sm"> <div className="w-full flex-grow flex items-center rounded-md shadow-sm">
<span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm h-10"> <span className="inline-flex items-center rounded-l-md border border-r-0 border-background-300 bg-background-50 px-3 text-text-500 sm:text-sm h-10">
{settings?.webDomain}/anonymous/ {settings?.webDomain}/anonymous/
</span> </span>
<Input <Input
type="text" type="text"
className="block w-full flex-grow flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm h-10" className="block w-full flex-grow flex-1 rounded-none rounded-r-md border-background-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm h-10"
placeholder="your-custom-path" placeholder="your-custom-path"
value={customPath ?? anonymousUserPath ?? ""} value={customPath ?? anonymousUserPath ?? ""}
onChange={(e) => setCustomPath(e.target.value)} onChange={(e) => setCustomPath(e.target.value)}

2
web/src/app/admin/systeminfo/page.tsx
View File

@ -15,7 +15,7 @@ const Page = async () => {
return ( return (
<div> <div>
<div className="border-solid border-gray-600 border-b pb-2 mb-4 flex"> <div className="border-solid border-background-600 border-b pb-2 mb-4 flex">
<NotebookIcon size={32} /> <NotebookIcon size={32} />
<h1 className="text-3xl font-bold pl-2">Version</h1> <h1 className="text-3xl font-bold pl-2">Version</h1>
</div> </div>

4
web/src/app/admin/token-rate-limits/TokenRateLimitTables.tsx
View File

@ -109,7 +109,7 @@ export const TokenRateLimitTable = ({
} }
className={`px-1 py-0.5 rounded select-none w-24 ${ className={`px-1 py-0.5 rounded select-none w-24 ${
isAdmin isAdmin
? "hover:bg-hover-light cursor-pointer" ? "hover:bg-accent-background cursor-pointer"
: "opacity-50" : "opacity-50"
}`} }`}
> >
@ -131,7 +131,7 @@ export const TokenRateLimitTable = ({
</div> </div>
</TableCell> </TableCell>
{shouldRenderGroupName() && ( {shouldRenderGroupName() && (
<TableCell className="font-bold text-emphasis"> <TableCell className="font-bold text-text-darker">
{tokenRateLimit.group_name} {tokenRateLimit.group_name}
</TableCell> </TableCell>
)} )}

12
web/src/app/admin/tools/ToolEditor.tsx
View File

@ -139,7 +139,7 @@ function ToolForm({
py-1 py-1
px-3 px-3
text-sm text-sm
hover:bg-hover-light hover:bg-accent-background
" "
onClick={() => { onClick={() => {
const definition = values.definition; const definition = values.definition;
@ -193,7 +193,7 @@ function ToolForm({
<div className="my-4"> <div className="my-4">
<h3 className="text-base font-semibold mb-2">Available methods</h3> <h3 className="text-base font-semibold mb-2">Available methods</h3>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full bg-white border border-gray-200"> <table className="min-w-full bg-white border border-background-200">
<thead> <thead>
<tr> <tr>
<th className="px-4 py-2 border-b">Name</th> <th className="px-4 py-2 border-b">Name</th>
@ -228,7 +228,7 @@ function ToolForm({
<h3 className="text-xl font-bold mb-2 text-primary-600"> <h3 className="text-xl font-bold mb-2 text-primary-600">
Custom Headers Custom Headers
</h3> </h3>
<p className="text-sm mb-6 text-gray-600 italic"> <p className="text-sm mb-6 text-text-600 italic">
Specify custom headers for each request to this tool&apos;s API. Specify custom headers for each request to this tool&apos;s API.
</p> </p>
<FieldArray <FieldArray
@ -240,17 +240,17 @@ function ToolForm({
(header: { key: string; value: string }, index: number) => ( (header: { key: string; value: string }, index: number) => (
<div <div
key={index} key={index}
className="flex items-center space-x-2 bg-gray-50 p-3 rounded-lg shadow-sm" className="flex items-center space-x-2 bg-background-50 p-3 rounded-lg shadow-sm"
> >
<Field <Field
name={`customHeaders.${index}.key`} name={`customHeaders.${index}.key`}
placeholder="Header Key" placeholder="Header Key"
className="flex-1 p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent" className="flex-1 p-2 border border-background-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent"
/> />
<Field <Field
name={`customHeaders.${index}.value`} name={`customHeaders.${index}.value`}
placeholder="Header Value" placeholder="Header Value"
className="flex-1 p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent" className="flex-1 p-2 border border-background-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent"
/> />
<Button <Button
type="button" type="button"

2
web/src/app/admin/tools/ToolsTable.tsx
View File

@ -76,7 +76,7 @@ export function ToolsTable({ tools }: { tools: ToolSnapshot[] }) {
{tool.in_code_tool_id === null ? ( {tool.in_code_tool_id === null ? (
<div className="my-auto"> <div className="my-auto">
<div <div
className="hover:bg-hover rounded p-1 cursor-pointer" className="hover:bg-accent-background-hovered rounded p-1 cursor-pointer"
onClick={async () => { onClick={async () => {
const response = await deleteCustomTool(tool.id); const response = await deleteCustomTool(tool.id);
if (response.data) { if (response.data) {

1
web/src/app/admin/users/page.tsx
View File

@ -78,7 +78,6 @@ const UsersTables = ({
</CardContent> </CardContent>
</Card> </Card>
</TabsContent> </TabsContent>
<TabsContent value="invited"> <TabsContent value="invited">
<Card> <Card>
<CardHeader> <CardHeader>

6
web/src/app/anonymous/[id]/AnonymousPage.tsx
View File

@ -39,15 +39,15 @@ export default function AnonymousPage({
}, []); }, []);
return ( return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100"> <div className="flex flex-col items-center justify-center min-h-screen bg-background-100">
<div className="bg-white p-8 rounded-lg shadow-md"> <div className="bg-white p-8 rounded-lg shadow-md">
<h1 className="text-2xl font-bold mb-4 text-center"> <h1 className="text-2xl font-bold mb-4 text-center">
Redirecting you to the chat page... Redirecting you to the chat page...
</h1> </h1>
<div className="flex justify-center"> <div className="flex justify-center">
<div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-neutral-800"></div> <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-background-800"></div>
</div> </div>
<p className="mt-4 text-gray-600 text-center"> <p className="mt-4 text-text-600 text-center">
Please wait while we set up your anonymous session. Please wait while we set up your anonymous session.
</p> </p>
</div> </div>

2
web/src/app/assistants/LargeBackButton.tsx
View File

@ -8,7 +8,7 @@ export function LargeBackButton() {
return ( return (
<div className="cursor-pointer" onClick={() => router.back()}> <div className="cursor-pointer" onClick={() => router.back()}>
<FiChevronLeft <FiChevronLeft
className="mr-1 my-auto p-1 hover:bg-hover rounded cursor-pointer" className="mr-1 my-auto p-1 hover:bg-accent-background-hovered rounded cursor-pointer"
size={32} size={32}
/> />
</div> </div>

37
web/src/app/assistants/mine/AssistantCard.tsx
View File

@ -48,9 +48,9 @@ export const AssistantBadge = ({
}) => { }) => {
return ( return (
<div <div
className={`h-4 px-1.5 py-1 text-[10px] flex-none bg-[#e6e3dd]/50 rounded-lg justify-center items-center gap-1 inline-flex ${className}`} className={`h-4 px-1.5 py-1 text-[10px] flex-none bg-neutral-200/50 dark:bg-neutral-700 rounded-lg justify-center items-center gap-1 inline-flex ${className}`}
> >
<div className="text-[#4a4a4a] font-normal leading-[8px]"> <div className="text-text-800 font-normal leading-[8px]">
{maxLength ? truncateString(text, maxLength) : text} {maxLength ? truncateString(text, maxLength) : text}
</div> </div>
</div> </div>
@ -101,7 +101,7 @@ const AssistantCard: React.FC<{
}, [persona.name]); }, [persona.name]);
return ( return (
<div className="w-full p-2 overflow-visible pb-4 pt-3 bg-[#fefcf9] rounded shadow-[0px_0px_4px_0px_rgba(0,0,0,0.25)] flex flex-col"> <div className="w-full text-text-800 p-2 overflow-visible pb-4 pt-3 bg-transparent dark:bg-neutral-800/80 rounded shadow-[0px_0px_4px_0px_rgba(0,0,0,0.25)] flex flex-col">
<div className="w-full flex"> <div className="w-full flex">
<div className="ml-2 flex-none mr-2 mt-1 w-10 h-10"> <div className="ml-2 flex-none mr-2 mt-1 w-10 h-10">
<AssistantIcon assistant={persona} size="large" /> <AssistantIcon assistant={persona} size="large" />
@ -114,7 +114,7 @@ const AssistantCard: React.FC<{
<TooltipTrigger asChild> <TooltipTrigger asChild>
<h3 <h3
ref={nameRef} ref={nameRef}
className={` text-black line-clamp-1 break-all text-ellipsis leading-none font-semibold text-base lg-normal w-full overflow-hidden`} className={`text-neutral-900 dark:text-neutral-100 line-clamp-1 break-all text-ellipsis leading-none font-semibold text-base lg-normal w-full overflow-hidden`}
> >
{persona.name} {persona.name}
</h3> </h3>
@ -159,13 +159,13 @@ const AssistantCard: React.FC<{
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button <button
type="button" type="button"
className="hover:bg-neutral-100 p-1 -my-1 rounded-full" className="hover:bg-neutral-200 dark:hover:bg-neutral-700 p-1 -my-1 rounded-full"
> >
<FiMoreHorizontal size={16} /> <FiMoreHorizontal size={16} />
</button> </button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
className={`z-[10000] ${ className={`z-[1000000] ${
activePopover === null ? "w-32" : "w-80" activePopover === null ? "w-32" : "w-80"
} p-2`} } p-2`}
> >
@ -175,7 +175,7 @@ const AssistantCard: React.FC<{
onClick={isOwnedByUser ? handleEdit : undefined} onClick={isOwnedByUser ? handleEdit : undefined}
className={`w-full flex items-center text-left px-2 py-1 rounded ${ className={`w-full flex items-center text-left px-2 py-1 rounded ${
isOwnedByUser isOwnedByUser
? "hover:bg-neutral-100" ? "hover:bg-neutral-200 dark:hover:bg-neutral-700"
: "opacity-50 cursor-not-allowed" : "opacity-50 cursor-not-allowed"
}`} }`}
disabled={!isOwnedByUser} disabled={!isOwnedByUser}
@ -183,7 +183,7 @@ const AssistantCard: React.FC<{
<FiEdit size={12} className="inline mr-2" /> <FiEdit size={12} className="inline mr-2" />
Edit Edit
</button> </button>
{isPaidEnterpriseFeaturesEnabled && ( {isPaidEnterpriseFeaturesEnabled && isOwnedByUser && (
<button <button
onClick={ onClick={
isOwnedByUser isOwnedByUser
@ -197,7 +197,7 @@ const AssistantCard: React.FC<{
} }
className={`w-full text-left items-center px-2 py-1 rounded ${ className={`w-full text-left items-center px-2 py-1 rounded ${
isOwnedByUser isOwnedByUser
? "hover:bg-neutral-100" ? "hover:bg-neutral-200 dark:hover:bg-neutral-800"
: "opacity-50 cursor-not-allowed" : "opacity-50 cursor-not-allowed"
}`} }`}
disabled={!isOwnedByUser} disabled={!isOwnedByUser}
@ -210,8 +210,8 @@ const AssistantCard: React.FC<{
onClick={isOwnedByUser ? handleDelete : undefined} onClick={isOwnedByUser ? handleDelete : undefined}
className={`w-full text-left items-center px-2 py-1 rounded ${ className={`w-full text-left items-center px-2 py-1 rounded ${
isOwnedByUser isOwnedByUser
? "hover:bg-neutral-100 text-red-600" ? "hover:bg-neutral-200 dark:hover:bg-neutral- text-red-600 dark:text-red-400"
: "opacity-50 cursor-not-allowed text-red-300" : "opacity-50 cursor-not-allowed text-red-300 dark:text-red-500"
}`} }`}
disabled={!isOwnedByUser} disabled={!isOwnedByUser}
> >
@ -251,13 +251,13 @@ const AssistantCard: React.FC<{
)} )}
</div> </div>
<p className="text-black font-[350] mt-0 text-sm line-clamp-2 h-[2.7em]"> <p className="text-neutral-800 dark:text-neutral-200 font-[350] mt-0 text-sm line-clamp-2 h-[2.7em]">
{persona.description || "\u00A0"} {persona.description || "\u00A0"}
</p> </p>
<div className="flex flex-col "> <div className="flex flex-col ">
<div className="my-1.5"> <div className="my-1.5">
<p className="flex items-center text-black text-xs opacity-50"> <p className="flex items-center text-neutral-800 dark:text-neutral-200 text-xs opacity-50">
{persona.owner?.email || persona.builtin_persona ? ( {persona.owner?.email || persona.builtin_persona ? (
<> <>
<span className="truncate"> <span className="truncate">
@ -302,7 +302,7 @@ const AssistantCard: React.FC<{
router.push(`/chat?assistantId=${persona.id}`); router.push(`/chat?assistantId=${persona.id}`);
closeModal(); closeModal();
}} }}
className="hover:bg-neutral-100 hover:text-text px-2 py-1 gap-x-1 rounded border border-black flex items-center" className="hover:bg-neutral-100 dark:hover:bg-neutral-700 dark:bg-[#2E2E2D] hover:text-neutral-900 dark:hover:text-neutral-100 px-2 py-1 gap-x-1 rounded border border-neutral-400 dark:border-neutral-600 flex items-center"
> >
<PencilIcon size={12} className="flex-none" /> <PencilIcon size={12} className="flex-none" />
<span className="text-xs">Start Chat</span> <span className="text-xs">Start Chat</span>
@ -324,15 +324,17 @@ const AssistantCard: React.FC<{
!pinned !pinned
); );
}} }}
className="hover:bg-neutral-100 px-2 group cursor-pointer py-1 gap-x-1 relative rounded border border-black flex items-center w-[65px]" className="hover:bg-neutral-100 dark:hover:bg-neutral-700 dark:bg-[#2E2E2D] px-2 group cursor-pointer py-1 gap-x-1 relative rounded border border-neutral-400 dark:border-neutral-600 flex items-center w-[65px]"
> >
<PinnedIcon size={12} /> <PinnedIcon size={12} />
{!pinned ? ( {!pinned ? (
<p className="absolute w-full left-0 group-hover:text-black w-full text-center transform text-xs"> <p className="absolute w-full left-0 group-hover:text-neutral-900 dark:group-hover:text-neutral-100 w-full text-center transform text-xs">
Pin Pin
</p> </p>
) : ( ) : (
<p className="text-xs group-hover:text-black">Unpin</p> <p className="text-xs group-hover:text-neutral-900 dark:group-hover:text-neutral-100">
Unpin
</p>
)} )}
</div> </div>
</TooltipTrigger> </TooltipTrigger>
@ -348,5 +350,4 @@ const AssistantCard: React.FC<{
</div> </div>
); );
}; };
export default AssistantCard; export default AssistantCard;

26
web/src/app/assistants/mine/AssistantModal.tsx
View File

@ -23,8 +23,8 @@ export const AssistantBadgeSelector = ({
className={` className={`
select-none ${ select-none ${
selected selected
? "bg-neutral-900 text-white" ? "bg-background-900 text-white"
: "bg-transparent text-neutral-900" : "bg-transparent text-text-900"
} w-12 h-5 text-center px-1 py-0.5 rounded-lg cursor-pointer text-[12px] font-normal leading-[10px] border border-black justify-center items-center gap-1 inline-flex`} } w-12 h-5 text-center px-1 py-0.5 rounded-lg cursor-pointer text-[12px] font-normal leading-[10px] border border-black justify-center items-center gap-1 inline-flex`}
onClick={toggleFilter} onClick={toggleFilter}
> >
@ -118,7 +118,7 @@ export function AssistantModal({
return ( return (
<Dialog open={true} onOpenChange={(open) => !open && hideModal()}> <Dialog open={true} onOpenChange={(open) => !open && hideModal()}>
<DialogContent <DialogContent
className="p-0 overflow-hidden max-h-[80vh] max-w-none w-[95%] bg-background rounded-sm shadow-2xl transform transition-all duration-300 ease-in-out relative w-11/12 max-w-4xl pt-10 pb-10 px-10 overflow-hidden flex flex-col max-w-4xl" className="p-0 max-h-[80vh] max-w-none w-[95%] bg-background rounded-sm shadow-2xl transform transition-all duration-300 ease-in-out relative w-11/12 max-w-4xl pt-10 pb-10 px-10 overflow-hidden flex flex-col max-w-4xl"
style={{ style={{
position: "fixed", position: "fixed",
top: "10vh", top: "10vh",
@ -127,15 +127,15 @@ export function AssistantModal({
margin: 0, margin: 0,
}} }}
> >
<div className="flex overflow-hidden flex-col h-full"> <div className="flex den flex-col h-full">
<div className="flex flex-col sticky top-0 z-10"> <div className="flex flex-col sticky top-0 z-10">
<div className="flex px-2 justify-between items-center gap-x-2 mb-0"> <div className="flex px-2 justify-between items-center gap-x-2 mb-0">
<div className="h-12 w-full rounded-lg flex-col justify-center items-start gap-2.5 inline-flex"> <div className="h-12 w-full rounded-lg flex-col justify-center items-start gap-2.5 inline-flex">
<div className="h-12 rounded-md w-full shadow-[0px_0px_2px_0px_rgba(0,0,0,0.25)] border border-[#dcdad4] flex items-center px-3"> <div className="h-12 rounded-md w-full shadow-[0px_0px_2px_0px_rgba(0,0,0,0.25)] border border-background-300 flex items-center px-3">
{!isSearchFocused && ( {!isSearchFocused && (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 text-gray-400" className="h-5 w-5 text-text-400"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -160,15 +160,15 @@ export function AssistantModal({
</div> </div>
<button <button
onClick={() => router.push("/assistants/new")} onClick={() => router.push("/assistants/new")}
className="h-10 cursor-pointer px-6 py-3 bg-black rounded-md border border-black justify-center items-center gap-2.5 inline-flex" className="h-10 cursor-pointer px-6 py-3 bg-background-800 hover:bg-black rounded-md border border-black justify-center items-center gap-2.5 inline-flex"
> >
<div className="text-[#fffcf4] text-lg font-normal leading-normal"> <div className="text-text-50 text-lg font-normal leading-normal">
Create Create
</div> </div>
</button> </button>
</div> </div>
<div className="px-2 flex py-4 items-center gap-x-2 flex-wrap"> <div className="px-2 flex py-4 items-center gap-x-2 flex-wrap">
<FilterIcon size={16} /> <FilterIcon className="text-text-800" size={16} />
<AssistantBadgeSelector <AssistantBadgeSelector
text="Pinned" text="Pinned"
selected={assistantFilters[AssistantFilter.Pinned]} selected={assistantFilters[AssistantFilter.Pinned]}
@ -197,11 +197,11 @@ export function AssistantModal({
} }
/> />
</div> </div>
<div className="w-full border-t border-neutral-200" /> <div className="w-full border-t border-background-200" />
</div> </div>
<div className="flex-grow overflow-y-auto"> <div className="flex-grow overflow-y-auto">
<h2 className="text-2xl font-semibold text-gray-800 mb-2 px-4 py-2"> <h2 className="text-2xl font-semibold text-text-800 mb-2 px-4 py-2">
Featured Assistants Featured Assistants
</h2> </h2>
@ -219,7 +219,7 @@ export function AssistantModal({
</div> </div>
)) ))
) : ( ) : (
<div className="col-span-2 text-center text-gray-500"> <div className="col-span-2 text-center text-text-500">
No featured assistants match filters No featured assistants match filters
</div> </div>
)} )}
@ -227,7 +227,7 @@ export function AssistantModal({
{allAssistants && allAssistants.length > 0 && ( {allAssistants && allAssistants.length > 0 && (
<> <>
<h2 className="text-2xl font-semibold text-gray-800 mt-4 mb-2 px-4 py-2"> <h2 className="text-2xl font-semibold text-text-800 mt-4 mb-2 px-4 py-2">
All Assistants All Assistants
</h2> </h2>

8
web/src/app/assistants/mine/AssistantSharingModal.tsx
View File

@ -145,7 +145,7 @@ export function AssistantSharingModal({
<div className="mb-8 flex flex-col gap-y-4"> <div className="mb-8 flex flex-col gap-y-4">
<h3 className="text-lg font-semibold">Current Status</h3> <h3 className="text-lg font-semibold">Current Status</h3>
<div className="bg-gray-50 rounded-lg">{sharedStatus}</div> <div className="bg-background-50 rounded-lg">{sharedStatus}</div>
</div> </div>
<div className="mb-8 flex flex-col gap-y-4"> <div className="mb-8 flex flex-col gap-y-4">
@ -175,8 +175,8 @@ export function AssistantSharingModal({
]); ]);
}} }}
itemComponent={({ option }) => ( itemComponent={({ option }) => (
<div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-gray-100"> <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-background-100">
<UsersIcon className="mr-3 text-gray-500" /> <UsersIcon className="mr-3 text-text-500" />
<span className="flex-grow">{option.name}</span> <span className="flex-grow">{option.name}</span>
<FiPlus className="text-blue-500" /> <FiPlus className="text-blue-500" />
</div> </div>
@ -186,7 +186,7 @@ export function AssistantSharingModal({
{selectedUsers.length > 0 && ( {selectedUsers.length > 0 && (
<div className="mb-6"> <div className="mb-6">
<h4 className="text-sm font-medium text-gray-700 mb-2"> <h4 className="text-sm font-medium text-text-700 mb-2">
Selected Users: Selected Users:
</h4> </h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">

8
web/src/app/assistants/mine/AssistantSharingPopover.tsx
View File

@ -131,7 +131,7 @@ export function AssistantSharingPopover({
<div className="mb-4"> <div className="mb-4">
<h3 className="text-sm font-semibold mb-2">Current Status</h3> <h3 className="text-sm font-semibold mb-2">Current Status</h3>
<div className="bg-gray-50 rounded-lg p-2">{sharedStatus}</div> <div className="bg-background-50 rounded-lg p-2">{sharedStatus}</div>
</div> </div>
<div className="mb-4"> <div className="mb-4">
@ -159,8 +159,8 @@ export function AssistantSharingPopover({
]); ]);
}} }}
itemComponent={({ option }) => ( itemComponent={({ option }) => (
<div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-gray-100"> <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-background-100">
<UsersIcon className="mr-3 text-gray-500" /> <UsersIcon className="mr-3 text-text-500" />
<span className="flex-grow">{option.name}</span> <span className="flex-grow">{option.name}</span>
<FiPlus className="text-blue-500" /> <FiPlus className="text-blue-500" />
</div> </div>
@ -170,7 +170,7 @@ export function AssistantSharingPopover({
{selectedUsers.length > 0 && ( {selectedUsers.length > 0 && (
<div className="mb-4"> <div className="mb-4">
<h4 className="text-xs font-medium text-gray-700 mb-2"> <h4 className="text-xs font-medium text-text-700 mb-2">
Selected Users: Selected Users:
</h4> </h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">

10
web/src/app/assistants/mine/AssistantVisibilityPopover.tsx
View File

@ -99,7 +99,7 @@ export function AssistantVisibilityPopover({
{isUpdating && ( {isUpdating && (
<div className="ml-2 inline-flex items-center"> <div className="ml-2 inline-flex items-center">
<ThreeDotsLoader /> <ThreeDotsLoader />
<span className="ml-2 text-sm text-gray-600">Updating...</span> <span className="ml-2 text-sm text-text-600">Updating...</span>
</div> </div>
)} )}
</Button> </Button>
@ -134,8 +134,8 @@ export function AssistantVisibilityPopover({
]); ]);
}} }}
itemComponent={({ option }) => ( itemComponent={({ option }) => (
<div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-gray-100"> <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-background-100">
<UsersIcon className="mr-3 text-gray-500" /> <UsersIcon className="mr-3 text-text-500" />
<span className="flex-grow">{option.name}</span> <span className="flex-grow">{option.name}</span>
<FiPlus className="text-blue-500" /> <FiPlus className="text-blue-500" />
</div> </div>
@ -145,7 +145,7 @@ export function AssistantVisibilityPopover({
{selectedUsers.length > 0 && ( {selectedUsers.length > 0 && (
<div> <div>
<h4 className="text-xs font-medium text-gray-700 mb-2"> <h4 className="text-xs font-medium text-text-700 mb-2">
Selected Users: Selected Users:
</h4> </h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@ -184,7 +184,7 @@ export function AssistantVisibilityPopover({
<div> <div>
<h3 className="text-sm font-semibold mb-2">Currently Shared With</h3> <h3 className="text-sm font-semibold mb-2">Currently Shared With</h3>
<div className="bg-gray-50 rounded-lg p-2"> <div className="bg-background-50 rounded-lg p-2">
<AssistantSharedStatusDisplay <AssistantSharedStatusDisplay
size="md" size="md"
assistant={assistant} assistant={assistant}

2
web/src/app/auth/impersonate/page.tsx
View File

@ -111,7 +111,7 @@ export default function ImpersonatePage() {
<button <button
type="submit" type="submit"
className="w-full py-3 bg-accent text-white rounded-lg hover:bg-accent/90 transition-colors" className="w-full py-3 bg-agent text-white rounded-lg hover:bg-accent/90 transition-colors"
> >
Impersonate User Impersonate User
</button> </button>

6
web/src/app/auth/login/LoginPage.tsx
View File

@ -45,9 +45,9 @@ export default function LoginPage({
{authTypeMetadata?.authType === "cloud" && ( {authTypeMetadata?.authType === "cloud" && (
<div className="mt-4 w-full justify-center"> <div className="mt-4 w-full justify-center">
<div className="flex items-center w-full my-4"> <div className="flex items-center w-full my-4">
<div className="flex-grow border-t border-gray-300"></div> <div className="flex-grow border-t border-background-300"></div>
<span className="px-4 text-gray-500">or</span> <span className="px-4 text-text-500">or</span>
<div className="flex-grow border-t border-gray-300"></div> <div className="flex-grow border-t border-background-300"></div>
</div> </div>
<EmailPasswordForm shouldVerify={true} nextUrl={nextUrl} /> <EmailPasswordForm shouldVerify={true} nextUrl={nextUrl} />

2
web/src/app/auth/login/SignInButton.tsx
View File

@ -46,7 +46,7 @@ export function SignInButton({
return ( return (
<a <a
className="mx-auto mb-4 mt-6 py-3 w-full text-text-100 bg-accent flex rounded cursor-pointer hover:bg-indigo-800" className="mx-auto mb-4 mt-6 py-3 w-full text-neutral-100 bg-indigo-500 flex rounded cursor-pointer hover:bg-indigo-800"
href={finalAuthorizeUrl} href={finalAuthorizeUrl}
> >
{button} {button}

2
web/src/app/auth/signup/ReferralSourceSelector.tsx
View File

@ -51,7 +51,7 @@ const ReferralSourceSelector: React.FC<ReferralSourceSelectorProps> = ({
<Select value={referralSource} onValueChange={handleChange}> <Select value={referralSource} onValueChange={handleChange}>
<SelectTrigger <SelectTrigger
id="referral-source" id="referral-source"
className="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500" className="w-full border-background-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
> >
<SelectValue placeholder="Select an option" /> <SelectValue placeholder="Select an option" />
</SelectTrigger> </SelectTrigger>

2
web/src/app/auth/signup/page.tsx
View File

@ -89,7 +89,7 @@ const Page = async (props: {
<SignInButton authorizeUrl={authUrl} authType="cloud" /> <SignInButton authorizeUrl={authUrl} authType="cloud" />
<div className="flex items-center w-full my-4"> <div className="flex items-center w-full my-4">
<div className="flex-grow border-t border-background-300"></div> <div className="flex-grow border-t border-background-300"></div>
<span className="px-4 text-gray-500">or</span> <span className="px-4 text-text-500">or</span>
<div className="flex-grow border-t border-background-300"></div> <div className="flex-grow border-t border-background-300"></div>
</div> </div>
</div> </div>

4
web/src/app/chat/ChatBanner.tsx
View File

@ -61,7 +61,7 @@ export function ChatBanner() {
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
aria-expanded={isExpanded} aria-expanded={isExpanded}
> >
<div className="text-emphasis text-sm w-full"> <div className="text-text-darker text-sm w-full">
{/* Padding for consistent spacing */} {/* Padding for consistent spacing */}
<div className="relative p-2"> <div className="relative p-2">
{/* Collapsible container */} {/* Collapsible container */}
@ -113,7 +113,7 @@ export function ChatBanner() {
aria-label="Expand banner content" aria-label="Expand banner content"
onClick={() => setIsExpanded(true)} onClick={() => setIsExpanded(true)}
> >
<ChevronDownIcon className="h-3 w-3 text-emphasis" /> <ChevronDownIcon className="h-3 w-3 text-text-darker" />
</button> </button>
)} )}
</div> </div>

13
web/src/app/chat/ChatPage.tsx
View File

@ -129,6 +129,7 @@ import {
useOperatingSystem, useOperatingSystem,
useSidebarShortcut, useSidebarShortcut,
} from "@/lib/browserUtilities"; } from "@/lib/browserUtilities";
import { Button } from "@/components/ui/button";
const TEMP_USER_MESSAGE_ID = -1; const TEMP_USER_MESSAGE_ID = -1;
const TEMP_ASSISTANT_MESSAGE_ID = -2; const TEMP_ASSISTANT_MESSAGE_ID = -2;
@ -2260,7 +2261,7 @@ export function ChatPage({
<AssistantModal hideModal={() => setShowAssistantsModal(false)} /> <AssistantModal hideModal={() => setShowAssistantsModal(false)} />
)} )}
<div className="fixed inset-0 flex flex-col text-default"> <div className="fixed inset-0 flex flex-col text-text-dark">
<div className="h-[100dvh] overflow-y-hidden"> <div className="h-[100dvh] overflow-y-hidden">
<div className="w-full"> <div className="w-full">
<div <div
@ -2417,7 +2418,7 @@ export function ChatPage({
className={` className={`
flex-none flex-none
overflow-y-hidden overflow-y-hidden
bg-background-100 bg-transparent
transition-all transition-all
bg-opacity-80 bg-opacity-80
duration-300 duration-300
@ -2622,6 +2623,7 @@ export function ChatPage({
return ( return (
<div <div
className="text-text"
id={`message-${message.messageId}`} id={`message-${message.messageId}`}
key={messageReactComponentKey} key={messageReactComponentKey}
ref={ ref={
@ -2963,6 +2965,9 @@ export function ChatPage({
return ( return (
<div key={messageReactComponentKey}> <div key={messageReactComponentKey}>
<AIMessage <AIMessage
setPresentingDocument={
setPresentingDocument
}
currentPersona={liveAssistant} currentPersona={liveAssistant}
messageId={message.messageId} messageId={message.messageId}
content={ content={
@ -3005,6 +3010,7 @@ export function ChatPage({
key={`${messageHistory.length}-${chatSessionIdRef.current}`} key={`${messageHistory.length}-${chatSessionIdRef.current}`}
> >
<AIMessage <AIMessage
setPresentingDocument={setPresentingDocument}
key={-3} key={-3}
currentPersona={liveAssistant} currentPersona={liveAssistant}
alternativeAssistant={ alternativeAssistant={
@ -3029,6 +3035,7 @@ export function ChatPage({
{loadingError && ( {loadingError && (
<div key={-1}> <div key={-1}>
<AIMessage <AIMessage
setPresentingDocument={setPresentingDocument}
currentPersona={liveAssistant} currentPersona={liveAssistant}
messageId={-1} messageId={-1}
content={ content={
@ -3153,7 +3160,7 @@ export function ChatPage({
<div className="mx-auto h-full flex"> <div className="mx-auto h-full flex">
<div <div
style={{ transition: "width 0.30s ease-out" }} style={{ transition: "width 0.30s ease-out" }}
className={`flex-none bg-transparent transition-all bg-opacity-80 duration-300 epase-in-out h-full className={`flex-none bg-transparent transition-all bg-opacity-80 duration-300 ease-in-out h-full
${ ${
toggledSidebar && !settings?.isMobile toggledSidebar && !settings?.isMobile
? "w-[250px] " ? "w-[250px] "

17
web/src/app/chat/ChatPersonaSelector.tsx
View File

@ -33,10 +33,14 @@ function PersonaItem({
mx-1 mx-1
select-none select-none
cursor-pointer cursor-pointer
text-emphasis text-text-darker
bg-background bg-background
hover:bg-hover-light hover:bg-accent-background
${isSelected ? "bg-hover text-selected-emphasis" : ""} ${
isSelected
? "bg-accent-background-hovered text-selected-emphasis"
: ""
}
`} `}
onClick={() => { onClick={() => {
onSelect(id); onSelect(id);
@ -51,7 +55,10 @@ function PersonaItem({
</div> </div>
{isOwner && ( {isOwner && (
<Link href={`/assistants/edit/${id}`} className="mx-2 my-auto"> <Link href={`/assistants/edit/${id}`} className="mx-2 my-auto">
<FiEdit2 className="hover:bg-hover p-0.5 my-auto" size={20} /> <FiEdit2
className="hover:bg-accent-background-hovered p-0.5 my-auto"
size={20}
/>
</Link> </Link>
)} )}
</div> </div>
@ -130,7 +137,7 @@ export function ChatPersonaSelector({
</div> </div>
} }
> >
<div className="select-none text-xl text-strong font-bold flex px-2 rounded cursor-pointer hover:bg-hover-light"> <div className="select-none text-xl text-strong font-bold flex px-2 rounded cursor-pointer hover:bg-accent-background">
<div className="mt-auto"> <div className="mt-auto">
{currentlySelectedPersona?.name || "Default"} {currentlySelectedPersona?.name || "Default"}
</div> </div>

2
web/src/app/chat/ChatPopup.tsx
View File

@ -45,7 +45,7 @@ export function ChatPopup() {
<Modal width="w-3/6 xl:w-[700px]" title={popupTitle}> <Modal width="w-3/6 xl:w-[700px]" title={popupTitle}>
<> <>
<ReactMarkdown <ReactMarkdown
className="prose max-w-full" className="prose text-text-800 dark:text-neutral-100 max-w-full"
components={{ components={{
a: ({ node, ...props }) => ( a: ({ node, ...props }) => (
<a <a

7
web/src/app/chat/Refinement.tsx
View File

@ -256,7 +256,7 @@ export const NoNewAnswerMessage = () => {
return ( return (
<div <div
className="text-gray-600 text-sm transition-opacity duration-2000 ease-out" className="text-text-600 text-sm transition-opacity duration-2000 ease-out"
style={{ opacity: opacity }} style={{ opacity: opacity }}
> >
No new answer found... No new answer found...
@ -338,7 +338,7 @@ export function StatusRefinement({
onMouseLeave={() => setToolTipHovered(false)} onMouseLeave={() => setToolTipHovered(false)}
side="bottom" side="bottom"
align="start" align="start"
className="w-fit p-4 bg-white border-2 border-border shadow-lg rounded-md" className="w-fit p-4 bg-[#fff] border-2 border-border dark:border-neutral-800 shadow-lg rounded-md"
> >
{/* If not done, show the "Refining" box + a chevron */} {/* If not done, show the "Refining" box + a chevron */}
@ -353,8 +353,9 @@ export function StatusRefinement({
<div className="w-3 h-3"> <div className="w-3 h-3">
<StatusIndicator status={ToggleState.Done} /> <StatusIndicator status={ToggleState.Done} />
</div> </div>
<span className="text-sm font-medium"> <span className="text-neutral-800 text-sm font-medium">
{StreamingPhaseText[phase]} {StreamingPhaseText[phase]}
LLL
</span> </span>
</div> </div>
))} ))}

12
web/src/app/chat/RegenerateOption.tsx
View File

@ -40,9 +40,9 @@ export function RegenerateDropdown({
}; };
const Dropdown = ( const Dropdown = (
<div className="overflow-y-auto py-2 min-w-fit bg-white dark:bg-gray-800 rounded-md shadow-lg"> <div className="overflow-y-auto border border-neutral-800 py-2 min-w-fit bg-neutral-50 dark:bg-neutral-900 rounded-md shadow-lg">
<div className="mb-1 flex items-center justify-between px-4 pt-2"> <div className="mb-1 flex items-center justify-between px-4 pt-2">
<span className="text-sm text-text-500 dark:text-text-400"> <span className="text-sm text-neutral-600 dark:text-neutral-400">
Regenerate with Regenerate with
</span> </span>
</div> </div>
@ -50,8 +50,10 @@ export function RegenerateDropdown({
<div <div
key={option.value} key={option.value}
role="menuitem" role="menuitem"
className={`flex items-center m-1.5 p-1.5 text-sm cursor-pointer focus-visible:outline-0 group relative hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md my-0 px-3 mx-2 gap-2.5 py-3 !pr-3 ${ className={`flex items-center m-1.5 p-1.5 text-sm cursor-pointer focus-visible:outline-0 group relative hover:bg-neutral-200 dark:hover:bg-neutral-800 rounded-md my-0 px-3 mx-2 gap-2.5 py-3 !pr-3 ${
option.value === selected ? "bg-gray-100 dark:bg-gray-700" : "" option.value === selected
? "bg-neutral-200 dark:bg-neutral-800"
: ""
}`} }`}
onClick={() => onSelect(option.value)} onClick={() => onSelect(option.value)}
> >
@ -63,7 +65,7 @@ export function RegenerateDropdown({
</div> </div>
</div> </div>
{option.value === selected && ( {option.value === selected && (
<FiCheck className="text-blue-500 dark:text-blue-400" /> <FiCheck className="text-neutral-700 dark:text-neutral-300" />
)} )}
</div> </div>
))} ))}

10
web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx
View File

@ -50,7 +50,7 @@ export function DocumentMetadataBlock({
/> />
))} ))}
{metadataEntries.length > MAX_METADATA_ITEMS && ( {metadataEntries.length > MAX_METADATA_ITEMS && (
<span className="ml-1 text-xs text-gray-500">...</span> <span className="ml-1 text-xs text-text-500">...</span>
)} )}
</div> </div>
</> </>
@ -83,7 +83,9 @@ export function ChatDocumentDisplay({
<div className="desktop:max-w-[400px] opacity-100 w-full"> <div className="desktop:max-w-[400px] opacity-100 w-full">
<div <div
className={`flex relative flex-col px-3 py-2.5 gap-0.5 rounded-xl my-1 ${ className={`flex relative flex-col px-3 py-2.5 gap-0.5 rounded-xl my-1 ${
isSelected ? "bg-[#ebe7de]" : "bg- hover:bg-[#ebe7de]/80" isSelected
? "bg-accent-background-hovered"
: " hover:bg-accent-background"
}`} }`}
> >
<button <button
@ -96,7 +98,7 @@ export function ChatDocumentDisplay({
) : ( ) : (
<SourceIcon sourceType={document.source_type} iconSize={18} /> <SourceIcon sourceType={document.source_type} iconSize={18} />
)} )}
<div className="line-clamp-1 text-text-900 text-sm font-semibold"> <div className="line-clamp-1 text-neutral-900 dark:text-neutral-300 text-sm font-semibold">
{(document.semantic_identifier || document.document_id).length > {(document.semantic_identifier || document.document_id).length >
(modal ? 30 : 40) (modal ? 30 : 40)
? `${(document.semantic_identifier || document.document_id) ? `${(document.semantic_identifier || document.document_id)
@ -109,7 +111,7 @@ export function ChatDocumentDisplay({
<DocumentMetadataBlock modal={modal} document={document} /> <DocumentMetadataBlock modal={modal} document={document} />
)} )}
<div <div
className={`line-clamp-3 text-sm font-normal leading-snug text-gray-600 ${ className={`line-clamp-3 text-sm font-normal leading-snug text-neutral-900 dark:text-neutral-300 ${
hasMetadata ? "mt-2" : "" hasMetadata ? "mt-2" : ""
}`} }`}
> >

4
web/src/app/chat/documentSidebar/DocumentResults.tsx
View File

@ -78,7 +78,9 @@ export const DocumentResults = forwardRef<HTMLDivElement, DocumentResultsProps>(
<div <div
id="onyx-chat-sidebar" id="onyx-chat-sidebar"
className={`relative -mb-8 bg-background max-w-full ${ className={`relative -mb-8 bg-background max-w-full ${
!modal ? "border-l border-t h-[105vh] border-sidebar-border" : "" !modal
? "border-l border-t h-[105vh] border-sidebar-border dark:border-neutral-700"
: ""
}`} }`}
onClick={(e) => { onClick={(e) => {
if (e.target === e.currentTarget) { if (e.target === e.currentTarget) {

6
web/src/app/chat/files/InputBarPreview.tsx
View File

@ -20,7 +20,7 @@ function DeleteButton({ onDelete }: { onDelete: () => void }) {
-right-1 -right-1
cursor-pointer cursor-pointer
border-none border-none
bg-hover bg-accent-background-hovered
p-.5 p-.5
rounded-full rounded-full
z-10 z-10
@ -119,7 +119,7 @@ export function InputBarPreview({
flex flex
items-center items-center
px-2 px-2
bg-hover bg-accent-background-hovered
border border
gap-x-1.5 gap-x-1.5
border-border border-border
@ -164,7 +164,7 @@ export function InputBarPreview({
className=" className="
cursor-pointer cursor-pointer
border-none border-none
bg-hover bg-accent-background-hovered
rounded-full rounded-full
z-10 z-10
" "

8
web/src/app/chat/files/documents/DocumentPreview.tsx
View File

@ -27,7 +27,7 @@ export function DocumentPreview({
${alignBubble && "min-w-52 max-w-48"} ${alignBubble && "min-w-52 max-w-48"}
flex flex
items-center items-center
bg-hover-light/50 bg-accent-background/50
border border
border-border border-border
rounded-lg rounded-lg
@ -80,10 +80,10 @@ export function DocumentPreview({
{open && ( {open && (
<button <button
onClick={() => open()} onClick={() => open()}
className="ml-2 p-2 rounded-full hover:bg-gray-200 transition-colors duration-200" className="ml-2 p-2 rounded-full hover:bg-background-200 transition-colors duration-200"
aria-label="Expand document" aria-label="Expand document"
> >
<ExpandTwoIcon className="w-5 h-5 text-gray-600" /> <ExpandTwoIcon className="w-5 h-5 text-text-600" />
</button> </button>
)} )}
</div> </div>
@ -117,7 +117,7 @@ export function InputDocumentPreview({
flex flex
items-center items-center
p-2 p-2
bg-hover bg-accent-background-hovered
border border
border-border border-border
rounded-md rounded-md

2
web/src/app/chat/files/images/InMessageImage.tsx
View File

@ -16,7 +16,7 @@ export function InMessageImage({ fileId }: { fileId: string }) {
<div className="relative w-full h-full max-w-96 max-h-96"> <div className="relative w-full h-full max-w-96 max-h-96">
{!imageLoaded && ( {!imageLoaded && (
<div className="absolute inset-0 bg-gray-200 animate-pulse rounded-lg" /> <div className="absolute inset-0 bg-background-200 animate-pulse rounded-lg" />
)} )}
<img <img

2
web/src/app/chat/files/images/InputBarPreviewImage.tsx
View File

@ -20,7 +20,7 @@ export function InputBarPreviewImage({ fileId }: { fileId: string }) {
border-none border-none
flex flex
items-center items-center
bg-hover bg-accent-background-hovered
border border
border-border border-border
rounded-md rounded-md

4
web/src/app/chat/folders/FolderDropdown.tsx
View File

@ -189,7 +189,7 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
type="text" type="text"
value={newFolderName} value={newFolderName}
onChange={(e) => setNewFolderName(e.target.value)} onChange={(e) => setNewFolderName(e.target.value)}
className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-[#6c6c6c] transition-colors duration-200" className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-background-500 transition-colors duration-200"
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter") { if (e.key === "Enter") {
handleEdit(); handleEdit();
@ -241,7 +241,7 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
</p> </p>
<div className="flex justify-center gap-2"> <div className="flex justify-center gap-2">
<button <button
className="px-3 py-1 text-sm bg-gray-200 rounded" className="px-3 py-1 text-sm bg-background-200 rounded"
onClick={handleCancelDelete} onClick={handleCancelDelete}
> >
Cancel Cancel

4
web/src/app/chat/folders/FolderList.tsx
View File

@ -184,7 +184,7 @@ const FolderItem = ({
onDragLeave={() => setIsDragOver(false)} onDragLeave={() => setIsDragOver(false)}
onDrop={handleDrop} onDrop={handleDrop}
className={`transition duration-300 ease-in-out rounded-md ${ className={`transition duration-300 ease-in-out rounded-md ${
isDragOver ? "bg-hover" : "" isDragOver ? "bg-accent-background-hovered" : ""
}`} }`}
> >
<BasicSelectable fullWidth selected={false}> <BasicSelectable fullWidth selected={false}>
@ -261,7 +261,7 @@ const FolderItem = ({
</button> </button>
<button <button
onClick={cancelDelete} onClick={cancelDelete}
className="bg-gray-300 hover:bg-gray-200 px-2 py-1 rounded text-xs" className="bg-background-300 hover:bg-background-200 px-2 py-1 rounded text-xs"
> >
No No
</button> </button>

10
web/src/app/chat/input-prompts/InputPrompts.tsx
View File

@ -177,7 +177,7 @@ export default function InputPrompts() {
}; };
return ( return (
<div className="border rounded-lg p-4 mb-4 relative"> <div className="border dark:border-none dark:bg-[#333333] rounded-lg p-4 mb-4 relative">
{isEditing ? ( {isEditing ? (
<> <>
<div className="absolute top-2 right-2"> <div className="absolute top-2 right-2">
@ -234,8 +234,12 @@ export default function InputPrompts() {
<div className="whitespace-pre-wrap">{prompt.content}</div> <div className="whitespace-pre-wrap">{prompt.content}</div>
<div className="absolute top-2 right-2"> <div className="absolute top-2 right-2">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger className="hover:bg-transparent" asChild>
<Button variant="ghost" size="sm"> <Button
className="!hover:bg-transparent"
variant="ghost"
size="sm"
>
<MoreVertical size={14} /> <MoreVertical size={14} />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>

16
web/src/app/chat/input/AgenticToggle.tsx
View File

@ -62,16 +62,16 @@ export function AgenticToggle({
className={` className={`
${ ${
proSearchEnabled proSearchEnabled
? "border-[#D9D9D0] group-hover:border-black" ? "border-background-200 group-hover:border-[#000] dark:group-hover:border-neutral-300"
: "border-[#D9D9D0] group-hover:border-black" : "border-background-200 group-hover:border-[#000] dark:group-hover:border-neutral-300"
} }
relative inline-flex h-[16px] w-8 items-center rounded-full transition-colors focus:outline-none border animate transition-all duration-200 border-[#D9D9D0] group-hover:border-[1px] `} relative inline-flex h-[16px] w-8 items-center rounded-full transition-colors focus:outline-none border animate transition-all duration-200 border-background-200 group-hover:border-[1px] `}
> >
<span <span
className={`${ className={`${
proSearchEnabled proSearchEnabled
? "bg-agent translate-x-4 scale-75" ? "bg-agent translate-x-4 scale-75"
: "bg-[#64645E] group-hover:bg-text translate-x-0.5 scale-75" : "bg-background-600 group-hover:bg-background-950 translate-x-0.5 scale-75"
} inline-block h-[12px] w-[12px] group-hover:scale-90 transform rounded-full transition-transform duration-200 ease-in-out`} } inline-block h-[12px] w-[12px] group-hover:scale-90 transform rounded-full transition-transform duration-200 ease-in-out`}
/> />
</div> </div>
@ -86,19 +86,19 @@ export function AgenticToggle({
</TooltipTrigger> </TooltipTrigger>
<TooltipContent <TooltipContent
side="top" side="top"
className="w-72 p-4 bg-white rounded-lg shadow-lg border border-gray-200" className="w-72 p-4 bg-white rounded-lg shadow-lg border border-background-200 dark:border-neutral-900"
> >
<div className="flex items-center space-x-2 mb-3"> <div className="flex items-center space-x-2 mb-3">
<h3 className="text-sm font-semibold text-gray-900"> <h3 className="text-sm font-semibold text-text-900">
Agent Search (BETA) Agent Search (BETA)
</h3> </h3>
</div> </div>
<p className="text-xs text-gray-600 mb-2"> <p className="text-xs text-text-600 mb-2">
Use AI agents to break down questions and run deep iterative Use AI agents to break down questions and run deep iterative
research through promising pathways. Gives more thorough and research through promising pathways. Gives more thorough and
accurate responses but takes slightly longer. accurate responses but takes slightly longer.
</p> </p>
<ul className="text-xs text-gray-600 list-disc list-inside"> <ul className="text-xs text-text-600 list-disc list-inside">
<li>Improved accuracy of search results</li> <li>Improved accuracy of search results</li>
<li>Less hallucinations</li> <li>Less hallucinations</li>
<li>More comprehensive answers</li> <li>More comprehensive answers</li>

42
web/src/app/chat/input/ChatInputBar.tsx
View File

@ -83,7 +83,7 @@ export const SourceChip2 = ({
className={` className={`
h-6 h-6
px-2 px-2
bg-[#f1eee8] bg-background-dark
rounded-2xl rounded-2xl
justify-center justify-center
items-center items-center
@ -95,13 +95,13 @@ export const SourceChip2 = ({
<div className="w-[17px] h-4 p-[3px] flex-col justify-center items-center gap-2.5 inline-flex"> <div className="w-[17px] h-4 p-[3px] flex-col justify-center items-center gap-2.5 inline-flex">
<div className="h-2.5 relative">{icon}</div> <div className="h-2.5 relative">{icon}</div>
</div> </div>
<div className="text-[#4a4a4a] text-xs font-medium leading-normal"> <div className="text-text-800 text-xs font-medium leading-normal">
{truncateTitle ? truncateString(title, 50) : title} {truncateTitle ? truncateString(title, 50) : title}
</div> </div>
{onRemove && ( {onRemove && (
<XIcon <XIcon
size={12} size={12}
className="text-[#4a4a4a] ml-2 cursor-pointer" className="text-text-800 ml-2 cursor-pointer"
onClick={(e: React.MouseEvent<SVGSVGElement>) => { onClick={(e: React.MouseEvent<SVGSVGElement>) => {
e.stopPropagation(); e.stopPropagation();
onRemove(); onRemove();
@ -143,7 +143,7 @@ export const SourceChip = ({
flex flex
items-center items-center
px-1 px-1
bg-gray-background bg-background-background
text-xs text-xs
text-text-darker text-text-darker
border border
@ -432,7 +432,7 @@ export function ChatInputBar({
ref={suggestionsRef} ref={suggestionsRef}
className="text-sm absolute w-[calc(100%-2rem)] top-0 transform -translate-y-full" className="text-sm absolute w-[calc(100%-2rem)] top-0 transform -translate-y-full"
> >
<div className="rounded-lg py-1 sm-1.5 bg-background border border-border shadow-lg px-1.5 mt-2 z-10"> <div className="rounded-lg py-1 sm-1.5 bg-input-background border border-border dark:border-none shadow-lg px-1.5 mt-2 z-10">
{assistantTagOptions.map((currentAssistant, index) => ( {assistantTagOptions.map((currentAssistant, index) => (
<button <button
key={index} key={index}
@ -476,7 +476,7 @@ export function ChatInputBar({
ref={suggestionsRef} ref={suggestionsRef}
className="text-sm absolute inset-x-0 top-0 w-full transform -translate-y-full" className="text-sm absolute inset-x-0 top-0 w-full transform -translate-y-full"
> >
<div className="rounded-lg py-1.5 bg-background border border-border shadow-lg mx-2 px-1.5 mt-2 rounded z-10"> <div className="rounded-lg py-1.5 bg-input-background dark:border-none border border-border shadow-lg mx-2 px-1.5 mt-2 rounded z-10">
{filteredPrompts.map( {filteredPrompts.map(
(currentPrompt: InputPrompt, index: number) => ( (currentPrompt: InputPrompt, index: number) => (
<button <button
@ -523,8 +523,11 @@ export function ChatInputBar({
flex-col flex-col
border border
shadow shadow
border-[#DCDAD4]/60 bg-input-background
border-input-border
dark:border-none
rounded-lg rounded-lg
overflow-hidden
text-text-chatbar text-text-chatbar
[&:has(textarea:focus)]::ring-1 [&:has(textarea:focus)]::ring-1
[&:has(textarea:focus)]::ring-black [&:has(textarea:focus)]::ring-black
@ -578,8 +581,11 @@ export function ChatInputBar({
resize-none resize-none
rounded-lg rounded-lg
border-0 border-0
bg-background bg-input-background
placeholder:text-text-muted font-normal
text-base
leading-6
placeholder:text-input-text
${ ${
textAreaRef.current && textAreaRef.current &&
textAreaRef.current.scrollHeight > MAX_INPUT_HEIGHT textAreaRef.current.scrollHeight > MAX_INPUT_HEIGHT
@ -590,10 +596,10 @@ export function ChatInputBar({
break-word break-word
overscroll-contain overscroll-contain
outline-none outline-none
placeholder-subtle
resize-none resize-none
px-5 px-5
py-4 py-4
dark:text-[#D4D4D4]
`} `}
autoFocus autoFocus
style={{ scrollbarWidth: "thin" }} style={{ scrollbarWidth: "thin" }}
@ -627,7 +633,7 @@ export function ChatInputBar({
filterManager.selectedDocumentSets.length > 0 || filterManager.selectedDocumentSets.length > 0 ||
filterManager.selectedTags.length > 0 || filterManager.selectedTags.length > 0 ||
filterManager.selectedSources.length > 0) && ( filterManager.selectedSources.length > 0) && (
<div className="flex bg-background gap-x-.5 px-2"> <div className="flex bg-input-background gap-x-.5 px-2">
<div className="flex gap-x-1 px-2 overflow-visible overflow-x-scroll items-end miniscroll"> <div className="flex gap-x-1 px-2 overflow-visible overflow-x-scroll items-end miniscroll">
{filterManager.selectedTags && {filterManager.selectedTags &&
filterManager.selectedTags.map((tag, index) => ( filterManager.selectedTags.map((tag, index) => (
@ -750,7 +756,7 @@ export function ChatInputBar({
</div> </div>
)} )}
<div className="flex pr-4 pb-2 justify-between items-center w-full "> <div className="flex pr-4 pb-2 justify-between bg-input-background items-center w-full ">
<div className="space-x-1 flex px-4 "> <div className="space-x-1 flex px-4 ">
<ChatInputOption <ChatInputOption
flexPriority="stiff" flexPriority="stiff"
@ -813,8 +819,8 @@ export function ChatInputBar({
chatState == "toolBuilding" || chatState == "toolBuilding" ||
chatState == "loading" chatState == "loading"
? chatState != "streaming" ? chatState != "streaming"
? "bg-background-400" ? "bg-neutral-900 dark:bg-neutral-400 "
: "bg-background-800" : "bg-neutral-500 dark:bg-neutral-50"
: "" : ""
} h-[22px] w-[22px] rounded-full`} } h-[22px] w-[22px] rounded-full`}
onClick={() => { onClick={() => {
@ -840,15 +846,15 @@ export function ChatInputBar({
chatState == "loading" ? ( chatState == "loading" ? (
<StopGeneratingIcon <StopGeneratingIcon
size={8} size={8}
className="text-emphasis m-auto text-white flex-none" className="text-neutral-50 dark:text-neutral-900 m-auto text-white flex-none"
/> />
) : ( ) : (
<SendIcon <SendIcon
size={22} size={22}
className={`text-emphasis text-white p-1 my-auto rounded-full ${ className={`text-neutral-50 dark:text-neutral-900 p-1 my-auto rounded-full ${
chatState == "input" && message chatState == "input" && message
? "bg-submit-background" ? "bg-neutral-900 dark:bg-neutral-50"
: "bg-disabled-submit-background" : "bg-neutral-500 dark:bg-neutral-400"
}`} }`}
/> />
)} )}

17
web/src/app/chat/input/ChatInputOption.tsx
View File

@ -44,10 +44,12 @@ export const ChatInputOption: React.FC<ChatInputOptionProps> = ({
items-center items-center
space-x-1 space-x-1
group group
text-text-700 rounded
!rounded-lg text-input-text
hover:bg-background-chat-hover hover:bg-background-chat-hover
hover:text-emphasis hover:text-neutral-900
dark:hover:text-neutral-50
py-1.5 py-1.5
px-2 px-2
${ ${
@ -65,15 +67,10 @@ export const ChatInputOption: React.FC<ChatInputOptionProps> = ({
`} `}
onClick={onClick} onClick={onClick}
> >
<Icon <Icon size={size} className="h-4 w-4 my-auto flex-none" />
size={size}
className="h-4 w-4 my-auto text-[#4a4a4a] group-hover:text-text flex-none"
/>
<div className={`flex items-center ${minimize && "mobile:hidden"}`}> <div className={`flex items-center ${minimize && "mobile:hidden"}`}>
{name && ( {name && (
<span className="text-sm text-[#4a4a4a] group-hover:text-text break-all line-clamp-1"> <span className="text-sm break-all line-clamp-1">{name}</span>
{name}
</span>
)} )}
{toggle && ( {toggle && (
<ChevronDownIcon className="flex-none ml-1" size={size - 4} /> <ChevronDownIcon className="flex-none ml-1" size={size - 4} />

16
web/src/app/chat/input/LLMPopover.tsx
View File

@ -139,7 +139,7 @@ export default function LLMPopover({
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
align="start" align="start"
className="w-64 p-1 bg-background border border-gray-200 rounded-md shadow-lg flex flex-col" className="w-64 p-1 bg-background border border-background-200 rounded-md shadow-lg flex flex-col"
> >
<div className="flex-grow max-h-[300px] default-scrollbar overflow-y-auto"> <div className="flex-grow max-h-[300px] default-scrollbar overflow-y-auto">
{llmOptions.map(({ name, icon, value }, index) => { {llmOptions.map(({ name, icon, value }, index) => {
@ -147,9 +147,9 @@ export default function LLMPopover({
return ( return (
<button <button
key={index} key={index}
className={`w-full flex items-center gap-x-2 px-3 py-2 text-sm text-left hover:bg-gray-100 transition-colors duration-150 ${ className={`w-full flex items-center gap-x-2 px-3 py-2 text-sm text-left hover:bg-background-100 dark:hover:bg-neutral-800 transition-colors duration-150 ${
currentLlm === name currentLlm === name
? "bg-gray-100 text-text" ? "bg-background-100 dark:bg-neutral-900 text-text"
: "text-text-darker" : "text-text-darker"
}`} }`}
onClick={() => { onClick={() => {
@ -157,7 +157,11 @@ export default function LLMPopover({
setIsOpen(false); setIsOpen(false);
}} }}
> >
{icon({ size: 16, className: "flex-none my-auto " })} {icon({
size: 16,
className: "flex-none my-auto text-black",
})}
asdfasdf
<span className="line-clamp-1 "> <span className="line-clamp-1 ">
{getDisplayNameForModel(name)} {getDisplayNameForModel(name)}
</span> </span>
@ -193,7 +197,7 @@ export default function LLMPopover({
})} })}
</div> </div>
{user?.preferences?.temperature_override_enabled && ( {user?.preferences?.temperature_override_enabled && (
<div className="mt-2 pt-2 border-t border-gray-200"> <div className="mt-2 pt-2 border-t border-background-200">
<div className="w-full px-3 py-2"> <div className="w-full px-3 py-2">
<Slider <Slider
value={[localTemperature]} value={[localTemperature]}
@ -204,7 +208,7 @@ export default function LLMPopover({
onValueCommit={handleTemperatureChangeComplete} onValueCommit={handleTemperatureChangeComplete}
className="w-full" className="w-full"
/> />
<div className="flex justify-between text-xs text-gray-500 mt-2"> <div className="flex justify-between text-xs text-text-500 mt-2">
<span>Temperature (creativity)</span> <span>Temperature (creativity)</span>
<span>{localTemperature.toFixed(1)}</span> <span>{localTemperature.toFixed(1)}</span>
</div> </div>

2
web/src/app/chat/input/SelectedFilterDisplay.tsx
View File

@ -40,7 +40,7 @@ const SelectedFilter = ({
px-2 px-2
w-fit w-fit
select-none select-none
hover:bg-hover hover:bg-accent-background-hovered
bg-background bg-background
shadow-md shadow-md
" "

12
web/src/app/chat/input/SimplifiedChatInputBar.tsx
View File

@ -90,7 +90,7 @@ export function SimplifiedChatInputBar({
flex flex
flex-col flex-col
border border
border-[#E5E7EB] border-background-200
rounded-lg rounded-lg
relative relative
text-text-chatbar text-text-chatbar
@ -232,10 +232,12 @@ export function SimplifiedChatInputBar({
}} }}
> >
<SendIcon <SendIcon
size={28} size={22}
className={`text-emphasis text-white p-1 rounded-full ${ className={`text-neutral-50 dark:text-neutral-900 p-1 my-auto rounded-full ${
message ? "bg-submit-background" : "bg-disabled-submit-background" message
} `} ? "bg-neutral-900 dark:bg-neutral-50"
: "bg-neutral-500 dark:bg-neutral-400"
}`}
/> />
</button> </button>
</div> </div>

2
web/src/app/chat/message/AgenticMessage.tsx
View File

@ -680,7 +680,7 @@ function MessageSwitcher({
onClick={currentPage === 1 ? undefined : handlePrevious} onClick={currentPage === 1 ? undefined : handlePrevious}
/> />
<span className="text-emphasis select-none"> <span className="text-text-darker select-none">
{currentPage} / {totalPages} {currentPage} / {totalPages}
</span> </span>

6
web/src/app/chat/message/CodeBlock.tsx
View File

@ -60,10 +60,10 @@ export const CodeBlock = memo(function CodeBlock({
<span <span
className={` className={`
font-mono font-mono
text-gray-800 text-text-800
bg-gray-50 bg-background-50
border border
border-gray-300 border-background-300
rounded rounded
align-bottom align-bottom
px-1 px-1

2
web/src/app/chat/message/ContinueMessage.tsx
View File

@ -27,7 +27,7 @@ export function ContinueGenerating({
</> </>
</EmphasizedClickable> </EmphasizedClickable>
{showExplanation && ( {showExplanation && (
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap"> <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-background-800 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
LLM reached its token limit. Click to continue. LLM reached its token limit. Click to continue.
</div> </div>
)} )}

10
web/src/app/chat/message/DocumentsDisplay.tsx
View File

@ -12,9 +12,9 @@ const DocumentsDisplay: React.FC<DocumentsDisplayProps> = ({ documents }) => {
const toggleExpand = () => setIsExpanded(!isExpanded); const toggleExpand = () => setIsExpanded(!isExpanded);
return ( return (
<div className="w-full border border-gray-200 rounded-lg overflow-hidden"> <div className="w-full border border-background-200 rounded-lg overflow-hidden">
<div <div
className="flex justify-between items-center p-4 bg-gray-50 cursor-pointer" className="flex justify-between items-center p-4 bg-background-50 cursor-pointer"
onClick={toggleExpand} onClick={toggleExpand}
> >
<h3 className="text-lg font-semibold">Sources</h3> <h3 className="text-lg font-semibold">Sources</h3>
@ -25,15 +25,15 @@ const DocumentsDisplay: React.FC<DocumentsDisplayProps> = ({ documents }) => {
{documents.map((doc, index) => ( {documents.map((doc, index) => (
<div <div
key={index} key={index}
className="bg-white p-4 rounded-lg shadow-sm border border-gray-100" className="bg-white p-4 rounded-lg shadow-sm border border-background-100"
> >
<div className="flex items-start space-x-3"> <div className="flex items-start space-x-3">
<FiFile className="text-gray-400 mt-1" /> <FiFile className="text-text-400 mt-1" />
<div> <div>
<h4 className="font-medium text-sm mb-1 line-clamp-1"> <h4 className="font-medium text-sm mb-1 line-clamp-1">
{doc.semantic_identifier || "Unknown Source"} {doc.semantic_identifier || "Unknown Source"}
</h4> </h4>
<p className="text-xs text-gray-600 line-clamp-3"> <p className="text-xs text-text-600 line-clamp-3">
{doc.blurb} {doc.blurb}
</p> </p>
</div> </div>

2
web/src/app/chat/message/MemoizedTextComponents.tsx
View File

@ -181,7 +181,7 @@ export const MemoizedParagraph = memo(
function MemoizedParagraph({ children, fontSize }: any) { function MemoizedParagraph({ children, fontSize }: any) {
return ( return (
<p <p
className={`text-default my-0 ${ className={`text-neutral-900 dark:text-neutral-200 my-0 ${
fontSize === "sm" ? "leading-tight text-sm" : "" fontSize === "sm" ? "leading-tight text-sm" : ""
}`} }`}
> >

27
web/src/app/chat/message/Messages.tsx
View File

@ -64,7 +64,8 @@ import { MemoizedAnchor, MemoizedParagraph } from "./MemoizedTextComponents";
import { extractCodeText, preprocessLaTeX } from "./codeUtils"; import { extractCodeText, preprocessLaTeX } from "./codeUtils";
import ToolResult from "../../../components/tools/ToolResult"; import ToolResult from "../../../components/tools/ToolResult";
import CsvContent from "../../../components/tools/CSVContent"; import CsvContent from "../../../components/tools/CSVContent";
import SourceCard, { SeeMoreBlock } from "@/components/chat/sources/SourceCard"; import { SeeMoreBlock } from "@/components/chat/sources/SourceCard";
import { SourceCard } from "./SourcesDisplay";
import remarkMath from "remark-math"; import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex"; import rehypeKatex from "rehype-katex";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
@ -212,7 +213,7 @@ export const AIMessage = ({
retrievalDisabled?: boolean; retrievalDisabled?: boolean;
overriddenModel?: string; overriddenModel?: string;
regenerate?: (modelOverRide: LlmOverride) => Promise<void>; regenerate?: (modelOverRide: LlmOverride) => Promise<void>;
setPresentingDocument?: (document: OnyxDocument) => void; setPresentingDocument: (document: OnyxDocument) => void;
}) => { }) => {
const toolCallGenerating = toolCall && !toolCall.tool_result; const toolCallGenerating = toolCall && !toolCall.tool_result;
@ -341,6 +342,9 @@ export const AIMessage = ({
() => ({ () => ({
a: anchorCallback, a: anchorCallback,
p: paragraphCallback, p: paragraphCallback,
b: ({ node, className, children }: any) => {
return <span className={className}>||||{children}</span>;
},
code: ({ node, className, children }: any) => { code: ({ node, className, children }: any) => {
const codeText = extractCodeText( const codeText = extractCodeText(
node, node,
@ -398,7 +402,7 @@ export const AIMessage = ({
<div <div
id={isComplete ? "onyx-ai-message" : undefined} id={isComplete ? "onyx-ai-message" : undefined}
ref={trackedElementRef} ref={trackedElementRef}
className={`py-5 ml-4 lg:px-5 relative flex `} className={`py-5 text-text ml-4 lg:px-5 relative flex `}
> >
<div <div
className={`mx-auto ${ className={`mx-auto ${
@ -406,7 +410,7 @@ export const AIMessage = ({
} max-w-message-max`} } max-w-message-max`}
> >
<div className={`lg:mr-12 ${!shared && "mobile:ml-0 md:ml-8"}`}> <div className={`lg:mr-12 ${!shared && "mobile:ml-0 md:ml-8"}`}>
<div className="flex"> <div className="flex items-start">
<AssistantIcon <AssistantIcon
className="mobile:hidden" className="mobile:hidden"
size={24} size={24}
@ -496,7 +500,7 @@ export const AIMessage = ({
.slice(0, 2) .slice(0, 2)
.map((doc: OnyxDocument, ind: number) => ( .map((doc: OnyxDocument, ind: number) => (
<SourceCard <SourceCard
doc={doc} document={doc}
key={ind} key={ind}
setPresentingDocument={ setPresentingDocument={
setPresentingDocument setPresentingDocument
@ -650,6 +654,7 @@ export const AIMessage = ({
onClick={() => handleFeedback("dislike")} onClick={() => handleFeedback("dislike")}
/> />
</CustomTooltip> </CustomTooltip>
{regenerate && ( {regenerate && (
<CustomTooltip <CustomTooltip
disabled={isRegenerateDropdownVisible} disabled={isRegenerateDropdownVisible}
@ -796,7 +801,7 @@ function MessageSwitcher({
onClick={currentPage === 1 ? undefined : handlePrevious} onClick={currentPage === 1 ? undefined : handlePrevious}
/> />
<span className="text-emphasis select-none"> <span className="text-text-darker select-none">
{currentPage} / {totalPages} {currentPage} / {totalPages}
</span> </span>
@ -907,7 +912,7 @@ export const HumanMessage = ({
break-word break-word
overscroll-contain overscroll-contain
outline-none outline-none
placeholder-gray-400 placeholder-text-400
resize-none resize-none
text-text-editing-message text-text-editing-message
pl-4 pl-4
@ -940,7 +945,7 @@ export const HumanMessage = ({
<button <button
className={` className={`
w-fit w-fit
bg-accent bg-agent
text-inverted text-inverted
text-sm text-sm
rounded-lg rounded-lg
@ -972,7 +977,7 @@ export const HumanMessage = ({
bg-background-strong bg-background-strong
text-sm text-sm
rounded-lg rounded-lg
hover:bg-hover-emphasis hover:bg-accent-background-hovered-emphasis
`} `}
onClick={() => { onClick={() => {
setEditedContent(content); setEditedContent(content);
@ -995,7 +1000,7 @@ export const HumanMessage = ({
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<HoverableIcon <HoverableIcon
icon={<FiEdit2 className="text-gray-600" />} icon={<FiEdit2 className="text-text-600" />}
onClick={() => { onClick={() => {
setIsEditing(true); setIsEditing(true);
setIsHovered(false); setIsHovered(false);
@ -1018,7 +1023,7 @@ export const HumanMessage = ({
!isEditing && !isEditing &&
(!files || files.length === 0) (!files || files.length === 0)
) && "ml-auto" ) && "ml-auto"
} relative flex-none max-w-[70%] mb-auto whitespace-break-spaces rounded-3xl bg-user px-5 py-2.5`} } relative text-text flex-none max-w-[70%] mb-auto whitespace-break-spaces rounded-3xl bg-user px-5 py-2.5`}
> >
{content} {content}
</div> </div>

4
web/src/app/chat/message/SearchSummary.tsx
View File

@ -134,7 +134,7 @@ export function SearchSummary({
))} ))}
{Array.from(new Set(docs.map((doc) => doc.source_type))).length > {Array.from(new Set(docs.map((doc) => doc.source_type))).length >
3 && ( 3 && (
<div className="rounded-full bg-gray-200 w-3.5 h-3.5 flex items-center justify-center"> <div className="rounded-full bg-background-200 w-3.5 h-3.5 flex items-center justify-center">
<span className="text-[8px]"> <span className="text-[8px]">
+ +
{Array.from(new Set(docs.map((doc) => doc.source_type))) {Array.from(new Set(docs.map((doc) => doc.source_type)))
@ -225,7 +225,7 @@ export function SearchSummary({
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<button <button
className="ml-2 -my-2 mobile:hidden hover:bg-hover p-1 rounded flex-shrink-0 group-hover:opacity-100 opacity-0" className="ml-2 -my-2 mobile:hidden hover:bg-accent-background-hovered p-1 rounded flex-shrink-0 group-hover:opacity-100 opacity-0"
onClick={() => { onClick={() => {
setIsEditing(true); setIsEditing(true);
}} }}

2
web/src/app/chat/message/SkippedSearch.tsx
View File

@ -25,7 +25,7 @@ export function SkippedSearch({
<> <>
<BasicClickable <BasicClickable
onClick={handleForceSearch} onClick={handleForceSearch}
className="ml-auto mr-4 -my-1 text-xs mobile:hidden bg-background/80 rounded-md px-2 py-1 cursor-pointer" className="ml-auto mr-4 -my-1 text-xs mobile:hidden bg-background/80 rounded-md px-2 py-1 cursor-pointer dark:hover:bg-neutral-700 dark:text-neutral-200"
> >
Force search? Force search?
</BasicClickable> </BasicClickable>

10
web/src/app/chat/message/SourcesDisplay.tsx
View File

@ -15,7 +15,7 @@ interface SourcesDisplayProps {
setPresentingDocument: (document: OnyxDocument) => void; setPresentingDocument: (document: OnyxDocument) => void;
} }
const SourceCard: React.FC<{ export const SourceCard: React.FC<{
document: OnyxDocument; document: OnyxDocument;
hideDocumentDisplay?: boolean; hideDocumentDisplay?: boolean;
setPresentingDocument: (document: OnyxDocument) => void; setPresentingDocument: (document: OnyxDocument) => void;
@ -33,15 +33,15 @@ const SourceCard: React.FC<{
onClick={() => onClick={() =>
openDocument(document, () => setPresentingDocument(document)) openDocument(document, () => setPresentingDocument(document))
} }
className="w-full max-w-[260px] h-[80px] p-3 bg-[#f1eee8] className="w-full max-w-[260px] h-[80px] p-3
text-left hover:bg-[#ebe7de] text-left bg-accent-background hover:bg-accent-background-hovered dark:bg-accent-background-hovered dark:hover:bg-neutral-700/80
cursor-pointer rounded-lg cursor-pointer rounded-lg
flex flex-col justify-between flex flex-col justify-between
overflow-hidden" overflow-hidden"
> >
<div <div
className=" className="
text-black text-xs text-text-900 text-xs
font-medium leading-tight font-medium leading-tight
whitespace-normal whitespace-normal
break-all break-all
@ -54,7 +54,7 @@ const SourceCard: React.FC<{
<div className="flex items-center gap-1 mt-1"> <div className="flex items-center gap-1 mt-1">
<ResultIcon doc={document} size={18} /> <ResultIcon doc={document} size={18} />
<div className="text-[#4a4a4a] text-xs leading-tight truncate flex-1 min-w-0"> <div className="text-text-700 text-xs leading-tight truncate flex-1 min-w-0">
{truncatedIdentifier} {truncatedIdentifier}
</div> </div>
</div> </div>

12
web/src/app/chat/message/SubQuestionsDisplay.tsx
View File

@ -317,7 +317,7 @@ const SubQuestionDisplay: React.FC<{
<div <div
className={`absolute left-[5px] ${ className={`absolute left-[5px] ${
isFirst ? "top-[15px]" : "top-0" isFirst ? "top-[15px]" : "top-0"
} bottom-0 w-[2px] bg-neutral-200 } bottom-0 w-[2px] bg-background-200
${isLast && !toggled ? "h-4" : "h-full"}`} ${isLast && !toggled ? "h-4" : "h-full"}`}
/> />
@ -331,7 +331,7 @@ const SubQuestionDisplay: React.FC<{
</div> </div>
<div className="ml-8 w-full"> <div className="ml-8 w-full">
<div <div
className="flex -mx-2 rounded-md px-2 hover:bg-[#F5F3ED] items-start py-1.5 my-.5 cursor-pointer" className="flex -mx-2 rounded-md px-2 hover:bg-background-100 dark:hover:bg-neutral-800 items-start py-1.5 my-.5 cursor-pointer"
onClick={() => setToggled(!toggled)} onClick={() => setToggled(!toggled)}
> >
<div className="text-black text-base font-medium leading-normal flex-grow pr-2"> <div className="text-black text-base font-medium leading-normal flex-grow pr-2">
@ -359,7 +359,7 @@ const SubQuestionDisplay: React.FC<{
> >
<div className="pl-0 pb-2"> <div className="pl-0 pb-2">
<div className="mb-4 flex flex-col gap-2"> <div className="mb-4 flex flex-col gap-2">
<div className="text-[#4a4a4a] text-xs font-medium leading-normal"> <div className="text-text-800 text-xs font-medium leading-normal">
Searching Searching
</div> </div>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@ -376,7 +376,7 @@ const SubQuestionDisplay: React.FC<{
{(subQuestion?.is_complete || memoizedDocs?.length > 0) && ( {(subQuestion?.is_complete || memoizedDocs?.length > 0) && (
<div className="mb-4 flex flex-col gap-2"> <div className="mb-4 flex flex-col gap-2">
<div className="text-[#4a4a4a] text-xs font-medium leading-normal"> <div className="text-text-800 text-xs font-medium leading-normal">
Reading Reading
</div> </div>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@ -413,7 +413,7 @@ const SubQuestionDisplay: React.FC<{
subQuestion?.answer?.length > 0) && ( subQuestion?.answer?.length > 0) && (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div <div
className="text-[#4a4a4a] cursor-pointer items-center text-xs flex gap-x-1 font-medium leading-normal" className="text-text-800 cursor-pointer items-center text-xs flex gap-x-1 font-medium leading-normal"
onClick={() => setAnalysisToggled(!analysisToggled)} onClick={() => setAnalysisToggled(!analysisToggled)}
> >
Analyzing Analyzing
@ -447,7 +447,7 @@ const SubQuestionDisplay: React.FC<{
> >
<div className="pl-0"> <div className="pl-0">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="leading-none text-[#4a4a4a] text-xs font-medium"> <div className="leading-none text-text-800 text-xs font-medium">
{temporaryDisplay?.tinyQuestion} {temporaryDisplay?.tinyQuestion}
</div> </div>
</div> </div>

6
web/src/app/chat/modal/FeedbackModal.tsx
View File

@ -55,7 +55,7 @@ export const FeedbackModal = ({
return ( return (
<Modal onOutsideClick={onClose} width="w-full max-w-3xl"> <Modal onOutsideClick={onClose} width="w-full max-w-3xl">
<> <>
<h2 className="text-2xl text-emphasis font-bold mb-4 flex"> <h2 className="text-2xl text-text-darker font-bold mb-4 flex">
<div className="mr-1 my-auto"> <div className="mr-1 my-auto">
{feedbackType === "like" ? ( {feedbackType === "like" ? (
<FilledLikeIcon <FilledLikeIcon
@ -76,7 +76,7 @@ export const FeedbackModal = ({
{predefinedFeedbackOptions.map((feedback, index) => ( {predefinedFeedbackOptions.map((feedback, index) => (
<button <button
key={index} key={index}
className={`bg-background-dark hover:bg-hover text-default py-2 px-4 rounded m-1 className={`bg-background-dark hover:bg-accent-background-hovered text-default py-2 px-4 rounded m-1
${predefinedFeedback === feedback && "ring-2 ring-accent/20"}`} ${predefinedFeedback === feedback && "ring-2 ring-accent/20"}`}
onClick={() => handlePredefinedFeedback(feedback)} onClick={() => handlePredefinedFeedback(feedback)}
> >
@ -109,7 +109,7 @@ export const FeedbackModal = ({
<div className="flex mt-2"> <div className="flex mt-2">
<button <button
className="bg-accent text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none mx-auto" className="bg-agent text-white py-2 px-4 rounded hover:bg-agent/50 focus:outline-none mx-auto"
onClick={handleSubmit} onClick={handleSubmit}
> >
Submit feedback Submit feedback

2
web/src/app/chat/modal/MakePublicAssistantModal.tsx
View File

@ -15,7 +15,7 @@ export function MakePublicAssistantModal({
return ( return (
<Modal onOutsideClick={onClose} width="max-w-3xl"> <Modal onOutsideClick={onClose} width="max-w-3xl">
<div className="space-y-6"> <div className="space-y-6">
<h2 className="text-2xl font-bold text-emphasis"> <h2 className="text-2xl font-bold text-text-darker">
{isPublic ? "Public Assistant" : "Make Assistant Public"} {isPublic ? "Public Assistant" : "Make Assistant Public"}
</h2> </h2>

25
web/src/app/chat/modal/ShareChatSessionModal.tsx
View File

@ -13,6 +13,7 @@ import { usePopup } from "@/components/admin/connectors/Popup";
import { structureValue } from "@/lib/llm/utils"; import { structureValue } from "@/lib/llm/utils";
import { LlmOverride } from "@/lib/hooks"; import { LlmOverride } from "@/lib/hooks";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { AdvancedOptionsToggle } from "@/components/AdvancedOptionsToggle";
function buildShareLink(chatSessionId: string) { function buildShareLink(chatSessionId: string) {
const baseUrl = `${window.location.protocol}//${window.location.host}`; const baseUrl = `${window.location.protocol}//${window.location.host}`;
@ -99,14 +100,15 @@ export function ShareChatSessionModal({
: "" : ""
); );
const { popup, setPopup } = usePopup(); const { popup, setPopup } = usePopup();
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
return ( return (
<> <>
{popup} {popup}
<Modal onOutsideClick={onClose} width="max-w-3xl"> <Modal onOutsideClick={onClose} width="w-full max-w-3xl">
<> <>
<div className="flex mb-4"> <div className="flex mb-4">
<h2 className="text-2xl text-emphasis font-bold flex my-auto"> <h2 className="text-2xl text-text-darker font-bold flex my-auto">
Share link to Chat Share link to Chat
</h2> </h2>
</div> </div>
@ -181,7 +183,7 @@ export function ShareChatSessionModal({
} }
}} }}
size="sm" size="sm"
variant="submit" variant="secondary"
> >
Generate and Copy Share Link Generate and Copy Share Link
</Button> </Button>
@ -191,18 +193,25 @@ export function ShareChatSessionModal({
</div> </div>
<Separator className="my-4" /> <Separator className="my-4" />
<AdvancedOptionsToggle
showAdvancedOptions={showAdvancedOptions}
setShowAdvancedOptions={setShowAdvancedOptions}
title="Advanced Options"
/>
{showAdvancedOptions && (
<>
<div className="mb-4"> <div className="mb-4">
<Callout type="notice" title="Seed New Chat"> <Callout type="notice" title="Seed New Chat">
Generate a link to a new chat session with the same settings as Generate a link to a new chat session with the same settings
this chat (including the assistant and model). as this chat (including the assistant and model).
</Callout> </Callout>
</div> </div>
<div className="flex w-full justify-between"> <div className="flex w-full justify-between">
<Button <Button
icon={FiCopy} icon={FiCopy}
onClick={async () => { onClick={async () => {
// NOTE: for "insecure" non-https setup, the `navigator.clipboard.writeText` may fail
// as the browser may not allow the clipboard to be accessed.
try { try {
const seedLink = await generateSeedLink( const seedLink = await generateSeedLink(
message, message,
@ -233,6 +242,8 @@ export function ShareChatSessionModal({
</Button> </Button>
</div> </div>
</> </>
)}
</>
</Modal> </Modal>
</> </>
); );

58
web/src/app/chat/modal/ThemeToggle.tsx Normal file
View File

@ -0,0 +1,58 @@
"use client";
import * as React from "react";
import { Moon, Sun, Laptop } from "lucide-react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
export function ModeToggle() {
const { theme, setTheme } = useTheme();
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() => setTheme("light")}
className={
theme === "light" ? "bg-neutral-100 dark:bg-neutral-800" : ""
}
>
<Sun className="mr-2 h-4 w-4" />
<span>Light</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => setTheme("dark")}
className={
theme === "dark" ? "bg-neutral-100 dark:bg-neutral-800" : ""
}
>
<Moon className="mr-2 h-4 w-4" />
<span>Dark</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => setTheme("system")}
className={
theme === "system" ? "bg-neutral-100 dark:bg-neutral-800" : ""
}
>
<Laptop className="mr-2 h-4 w-4" />
<span>System</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}

107
web/src/app/chat/modal/UserSettingsModal.tsx
View File

@ -1,4 +1,4 @@
import { useContext, useEffect, useRef } from "react"; import { useContext, useEffect, useRef, useState } from "react";
import { Modal } from "@/components/Modal"; import { Modal } from "@/components/Modal";
import { getDisplayNameForModel, LlmOverride } from "@/lib/hooks"; import { getDisplayNameForModel, LlmOverride } from "@/lib/hooks";
import { LLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces"; import { LLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces";
@ -15,6 +15,16 @@ import { SettingsContext } from "@/components/settings/SettingsProvider";
import { useChatContext } from "@/components/context/ChatContext"; import { useChatContext } from "@/components/context/ChatContext";
import { InputPromptsSection } from "./InputPromptsSection"; import { InputPromptsSection } from "./InputPromptsSection";
import { LLMSelector } from "@/components/llm/LLMSelector"; import { LLMSelector } from "@/components/llm/LLMSelector";
import { ModeToggle } from "./ThemeToggle";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Monitor } from "lucide-react";
import { useTheme } from "next-themes";
export function UserSettingsModal({ export function UserSettingsModal({
setPopup, setPopup,
@ -39,6 +49,8 @@ export function UserSettingsModal({
} = useUser(); } = useUser();
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const messageRef = useRef<HTMLDivElement>(null); const messageRef = useRef<HTMLDivElement>(null);
const { theme, setTheme } = useTheme();
const [selectedTheme, setSelectedTheme] = useState(theme);
useEffect(() => { useEffect(() => {
const container = containerRef.current; const container = containerRef.current;
@ -155,16 +167,21 @@ export function UserSettingsModal({
: user?.preferences?.auto_scroll; : user?.preferences?.auto_scroll;
return ( return (
<Modal onOutsideClick={onClose} width="rounded-lg w-full bg-white max-w-xl"> <Modal onOutsideClick={onClose} width="rounded-lg w-full max-w-xl">
<> <div className="p-2">
<div className="flex mb-4"> <div>
<h2 className="text-2xl text-emphasis font-bold flex my-auto"> <h2 className="text-2xl font-bold">User settings</h2>
User settings
</h2>
</div> </div>
<div className="flex flex-col gap-y-2"> <div className="space-y-6 py-4">
<div className="flex items-center gap-x-2"> {/* Auto-scroll Section */}
<div className="flex items-center justify-between">
<div className="space-y-1">
<h4 className="text-base font-medium">Auto-scroll</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
Automatically scroll to new content
</p>
</div>
<Switch <Switch
size="sm" size="sm"
checked={checked} checked={checked}
@ -172,9 +189,16 @@ export function UserSettingsModal({
updateUserAutoScroll(checked); updateUserAutoScroll(checked);
}} }}
/> />
<Label className="text-sm">Enable auto-scroll</Label>
</div> </div>
<div className="flex items-center gap-x-2">
{/* Prompt Shortcuts Section */}
<div className="flex items-center justify-between">
<div className="space-y-1">
<h4 className="text-base font-medium">Prompt Shortcuts</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
Enable keyboard shortcuts for prompts
</p>
</div>
<Switch <Switch
size="sm" size="sm"
checked={user?.preferences?.shortcut_enabled} checked={user?.preferences?.shortcut_enabled}
@ -182,9 +206,16 @@ export function UserSettingsModal({
updateUserShortcuts(checked); updateUserShortcuts(checked);
}} }}
/> />
<Label className="text-sm">Enable Prompt Shortcuts</Label>
</div> </div>
<div className="flex items-center gap-x-2">
{/* Temperature Override Section */}
<div className="flex items-center justify-between">
<div className="space-y-1">
<h4 className="text-base font-medium">Temperature Override</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
Override default temperature settings
</p>
</div>
<Switch <Switch
size="sm" size="sm"
checked={user?.preferences?.temperature_override_enabled} checked={user?.preferences?.temperature_override_enabled}
@ -192,33 +223,48 @@ export function UserSettingsModal({
updateUserTemperatureOverrideEnabled(checked); updateUserTemperatureOverrideEnabled(checked);
}} }}
/> />
<Label className="text-sm">Enable Temperature Override</Label>
</div>
</div> </div>
<Separator /> <Separator className="my-4" />
<h3 className="text-lg text-emphasis font-bold mb-2 ">Default Model</h3> {/* Theme Section */}
<div <div className="space-y-3">
className="w-full max-h-96 overflow-y-auto flex text-sm flex-col border rounded-md" <h4 className="text-base font-medium">Theme</h4>
ref={containerRef} <Select
value={selectedTheme}
onValueChange={(value) => {
setSelectedTheme(value);
setTheme(value);
}}
> >
<div <SelectTrigger className="w-full">
ref={messageRef} <div className="flex items-center gap-2">
className="sticky top-0 bg-background-100 p-2 text-xs text-emphasis font-medium" <Monitor className="h-4 w-4" />
style={{ display: "none" }} <SelectValue placeholder="Select theme" />
>
Scroll to see all options
</div> </div>
</SelectTrigger>
<SelectContent>
<SelectItem value="system">System</SelectItem>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
</SelectContent>
</Select>
</div>
<Separator className="my-4" />
{/* Default Model Section */}
<div className="space-y-3">
<h4 className="text-base font-medium">Default Model</h4>
<LLMSelector <LLMSelector
userSettings userSettings
llmProviders={llmProviders} llmProviders={llmProviders}
currentLlm={ currentLlm={
defaultModelDestructured defaultModel
? structureValue( ? structureValue(
defaultModelDestructured.provider, destructureValue(defaultModel).provider,
"", "",
defaultModelDestructured.modelName destructureValue(defaultModel).modelName
) )
: null : null
} }
@ -238,7 +284,8 @@ export function UserSettingsModal({
}} }}
/> />
</div> </div>
</> </div>
</div>
</Modal> </Modal>
); );
} }

6
web/src/app/chat/nrf/NRFPage.tsx
View File

@ -225,7 +225,7 @@ export default function NRFPage({
onClick={toggleSettings} onClick={toggleSettings}
className="bg-white bg-opacity-70 rounded-full p-2.5 cursor-pointer hover:bg-opacity-80 transition-colors duration-200" className="bg-white bg-opacity-70 rounded-full p-2.5 cursor-pointer hover:bg-opacity-80 transition-colors duration-200"
> >
<Menu size={12} className="text-neutral-900" /> <Menu size={12} className="text-text-900" />
</button> </button>
</div> </div>
@ -238,7 +238,7 @@ export default function NRFPage({
<div className="pointer-events-auto absolute top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-[90%] lg:max-w-3xl"> <div className="pointer-events-auto absolute top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-[90%] lg:max-w-3xl">
<h1 <h1
className={`pl-2 text-xl text-left w-full mb-4 ${ className={`pl-2 text-xl text-left w-full mb-4 ${
theme === "light" ? "text-neutral-800" : "text-white" theme === "light" ? "text-text-800" : "text-white"
}`} }`}
> >
{isNight {isNight
@ -364,7 +364,7 @@ export default function NRFPage({
Welcome to Onyx Welcome to Onyx
</h2> </h2>
<Button <Button
className="bg-accent w-full hover:bg-accent-hover text-white" className="bg-agent w-full hover:bg-accent-hover text-white"
onClick={() => { onClick={() => {
if (window.top) { if (window.top) {
window.top.location.href = "/auth/login"; window.top.location.href = "/auth/login";

12
web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
View File

@ -226,7 +226,7 @@ export function ChatSessionDisplay({
<div <div
className={`flex ${ className={`flex ${
isRenamingChat ? "-mr-2" : "" isRenamingChat ? "-mr-2" : ""
} text-text-darker text-sm leading-normal relative gap-x-2`} } text-text-dark text-sm leading-normal relative gap-x-2`}
> >
{isRenamingChat ? ( {isRenamingChat ? (
<div className="flex items-center w-full" ref={renamingRef}> <div className="flex items-center w-full" ref={renamingRef}>
@ -248,7 +248,7 @@ export function ChatSessionDisplay({
className="w-full text-sm bg-transparent border-b border-text-darker outline-none" className="w-full text-sm bg-transparent border-b border-text-darker outline-none"
/> />
</div> </div>
<div className="flex text-[#6c6c6c] flex-none"> <div className="flex text-text-500 flex-none">
<button onClick={onRename} className="p-1"> <button onClick={onRename} className="p-1">
<FiCheck size={14} /> <FiCheck size={14} />
</button> </button>
@ -267,10 +267,10 @@ export function ChatSessionDisplay({
</div> </div>
</div> </div>
) : ( ) : (
<p className="break-all font-normal overflow-hidden whitespace-nowrap w-full mr-3 relative"> <p className="break-all font-normal overflow-hidden dark:text-[#D4D4D4] whitespace-nowrap w-full mr-3 relative">
{chatName || `Unnamed Chat`} {chatName || `Unnamed Chat`}
<span <span
className={`absolute right-0 top-0 h-full w-8 bg-gradient-to-r from-transparent className={`absolute right-0 top-0 h-full w-2 bg-gradient-to-r from-transparent
${ ${
isSelected isSelected
? "to-background-chat-selected" ? "to-background-chat-selected"
@ -325,7 +325,7 @@ export function ChatSessionDisplay({
} }
popover={ popover={
<div <div
className={`border border-border rounded-lg bg-background z-50 ${ className={`border border-border text-text-dark rounded-lg bg-background z-50 ${
isDeleteModalOpen ? "w-64" : "w-32" isDeleteModalOpen ? "w-64" : "w-32"
}`} }`}
> >
@ -360,7 +360,7 @@ export function ChatSessionDisplay({
</p> </p>
<div className="flex justify-center gap-2"> <div className="flex justify-center gap-2">
<button <button
className="px-3 py-1 text-sm bg-gray-200 rounded" className="px-3 py-1 text-sm bg-background-200 rounded"
onClick={handleCancelDelete} onClick={handleCancelDelete}
> >
Cancel Cancel

16
web/src/app/chat/sessionSidebar/HistorySidebar.tsx
View File

@ -142,13 +142,13 @@ const SortableAssistant: React.FC<SortableAssistantProps> = ({
: "" : ""
} relative flex items-center gap-x-2 py-1 px-2 rounded-md`} } relative flex items-center gap-x-2 py-1 px-2 rounded-md`}
> >
<AssistantIcon assistant={assistant} size={20} className="flex-none" /> <AssistantIcon assistant={assistant} size={16} className="flex-none" />
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<p <p
ref={nameRef} ref={nameRef}
className="text-base text-left w-fit line-clamp-1 text-ellipsis text-black" className="text-base text-left w-fit line-clamp-1 text-ellipsis text-black dark:text-[#D4D4D4]"
> >
{assistant.name} {assistant.name}
</p> </p>
@ -271,6 +271,8 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
bg-background-sidebar bg-background-sidebar
w-full w-full
border-r border-r
dark:border-none
dark:text-[#D4D4D4]
border-sidebar-border border-sidebar-border
flex flex
flex-col relative flex-col relative
@ -291,7 +293,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
{page == "chat" && ( {page == "chat" && (
<div className="px-4 px-1 -mx-2 gap-y-1 flex-col text-text-history-sidebar-button flex gap-x-1.5 items-center items-center"> <div className="px-4 px-1 -mx-2 gap-y-1 flex-col text-text-history-sidebar-button flex gap-x-1.5 items-center items-center">
<Link <Link
className="w-full px-2 py-1 group rounded-md items-center hover:bg-hover cursor-pointer transition-all duration-150 flex gap-x-2" className="w-full px-2 py-1 group rounded-md items-center hover:bg-accent-background-hovered cursor-pointer transition-all duration-150 flex gap-x-2"
href={ href={
`/${page}` + `/${page}` +
(currentChatSession (currentChatSession
@ -309,12 +311,12 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
> >
<NewChatIcon size={20} className="flex-none" /> <NewChatIcon size={20} className="flex-none" />
<p className="my-auto flex font-normal items-center "> <p className="my-auto flex font-normal items-center ">
Start New Chat New Chat
</p> </p>
</Link> </Link>
{user?.preferences?.shortcut_enabled && ( {user?.preferences?.shortcut_enabled && (
<Link <Link
className="w-full px-2 py-1 rounded-md items-center hover:bg-hover cursor-pointer transition-all duration-150 flex gap-x-2" className="w-full px-2 py-1 rounded-md items-center hover:bg-accent-background-hovered cursor-pointer transition-all duration-150 flex gap-x-2"
href="/chat/input-prompts" href="/chat/input-prompts"
> >
<DocumentIcon2 <DocumentIcon2
@ -330,7 +332,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
)} )}
<div className="h-full relative overflow-x-hidden overflow-y-auto"> <div className="h-full relative overflow-x-hidden overflow-y-auto">
<div className="flex px-4 font-normal text-sm gap-x-2 leading-normal text-[#6c6c6c]/80 items-center font-normal leading-normal"> <div className="flex px-4 font-normal text-sm gap-x-2 leading-normal text-text-500/80 dark:text-[#D4D4D4] items-center font-normal leading-normal">
Assistants Assistants
</div> </div>
<DndContext <DndContext
@ -373,7 +375,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
<div className="w-full px-4"> <div className="w-full px-4">
<button <button
onClick={() => setShowAssistantsModal(true)} onClick={() => setShowAssistantsModal(true)}
className="w-full cursor-pointer text-base text-black hover:bg-background-chat-hover flex items-center gap-x-2 py-1 px-2 rounded-md" className="w-full cursor-pointer text-base text-black dark:text-[#D4D4D4] hover:bg-background-chat-hover flex items-center gap-x-2 py-1 px-2 rounded-md"
> >
Explore Assistants Explore Assistants
</button> </button>

6
web/src/app/chat/sessionSidebar/PagesTab.tsx
View File

@ -318,7 +318,7 @@ export function PagesTab({
<div className="flex flex-col gap-y-2 flex-grow"> <div className="flex flex-col gap-y-2 flex-grow">
{popup} {popup}
<div className="px-4 mt-2 group mr-2 bg-background-sidebar z-20"> <div className="px-4 mt-2 group mr-2 bg-background-sidebar z-20">
<div className="flex justify-between text-sm gap-x-2 text-[#6c6c6c]/80 items-center font-normal leading-normal"> <div className="flex justify-between text-sm gap-x-2 text-text-300/80 items-center font-normal leading-normal">
<p>Chats</p> <p>Chats</p>
<button <button
onClick={handleCreateFolder} onClick={handleCreateFolder}
@ -332,7 +332,7 @@ export function PagesTab({
{isCreatingFolder ? ( {isCreatingFolder ? (
<div className="px-4"> <div className="px-4">
<div className="flex overflow-visible items-center w-full text-[#6c6c6c] rounded-md p-1 relative"> <div className="flex overflow-visible items-center w-full text-text-500 rounded-md p-1 relative">
<Caret size={16} className="flex-none mr-1" /> <Caret size={16} className="flex-none mr-1" />
<input <input
onKeyDown={(e) => { onKeyDown={(e) => {
@ -343,7 +343,7 @@ export function PagesTab({
ref={newFolderInputRef} ref={newFolderInputRef}
type="text" type="text"
placeholder="Enter group name" placeholder="Enter group name"
className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-[#6c6c6c] transition-colors duration-200" className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-background-500 transition-colors duration-200"
/> />
<div className="flex -my-1"> <div className="flex -my-1">
<div <div

2
web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx
View File

@ -205,7 +205,7 @@ export function SharedChatDisplay({
<h1 className="text-3xl text-strong font-bold"> <h1 className="text-3xl text-strong font-bold">
{chatSession.description || `Unnamed Chat`} {chatSession.description || `Unnamed Chat`}
</h1> </h1>
<p className=" text-emphasis"> <p className=" text-text-darker">
{humanReadableFormat(chatSession.time_created)} {humanReadableFormat(chatSession.time_created)}
</p> </p>
<div <div

Some files were not shown because too many files have changed in this diff Show More