updaet model selector

onyx-dot-app · Feb 8, 2025 · 6fee9a3 · 6fee9a3
1 parent 153f917
commit 6fee9a3
Show file tree

Hide file tree

Showing 19 changed files with 51 additions and 43 deletions.
diff --git a/web/public/LiteLLM.jpg b/web/public/LiteLLM.jpg
diff --git a/web/public/litellm.png b/web/public/litellm.png
diff --git a/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx b/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx
@@ -16,7 +16,7 @@ export default function NumberInput({
 }) {
   return (
     <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}
         {optional && <span className="text-text-500 ml-1">(optional)</span>}
       </label>
@@ -27,7 +27,7 @@ export default function NumberInput({
         name={name}
         min="-1"
         className={`mt-2 block w-full px-3 py-2 
-                bg-white border border-background-300 rounded-md 
+                bg-[#fff] dark:bg-transparent border border-background-300 rounded-md 
                 text-sm shadow-sm placeholder-text-400
                 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
                 disabled:bg-background-50 disabled:text-text-500 disabled:border-background-200 disabled:shadow-none

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

diff --git a/web/src/app/admin/embeddings/RerankingFormPage.tsx b/web/src/app/admin/embeddings/RerankingFormPage.tsx
@@ -177,8 +177,8 @@ const RerankingDetailsForm = forwardRef<
                         key={`${card.rerank_provider_type}-${card.modelName}`}
                         className={`p-4 border rounded-lg cursor-pointer transition-all duration-200 ${
                           isSelected
-                            ? "border-blue-500 bg-blue-50 shadow-md"
-                            : "border-background-200 hover:border-blue-300 hover:shadow-sm"
+                            ? "border-blue-500 bg-blue-50 dark:bg-blue-900 dark:border-blue-700 shadow-md"
+                            : "border-background-200 hover:border-blue-300 hover:shadow-sm dark:border-neutral-700 dark:hover:border-blue-300"
                         }`}
                         onClick={() => {
                           if (

diff --git a/web/src/app/admin/embeddings/pages/CloudEmbeddingPage.tsx b/web/src/app/admin/embeddings/pages/CloudEmbeddingPage.tsx
@@ -450,7 +450,7 @@ export function CloudModelCard({
     <div
       className={`p-4 w-96 border rounded-lg transition-all duration-200 ${
         enabled
-          ? "border-blue-500 bg-blue-50 shadow-md"
+          ? "border-blue-500 bg-blue-50 dark:bg-blue-950 shadow-md"
           : "border-background-300 hover:border-blue-300 hover:shadow-sm"
       } ${!provider.configured && "opacity-80 hover:opacity-100"}`}
     >
@@ -465,7 +465,9 @@ export function CloudModelCard({
       )}
 
       <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">
           {model.provider_type == EmbeddingProvider.LITELLM.toLowerCase() && (
             <button
@@ -487,7 +489,9 @@ export function CloudModelCard({
           </a>
         </div>
       </div>
-      <p className="text-sm text-text-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() !=
         EmbeddingProvider.LITELLM.toLowerCase() && (
         <div className="text-xs text-text-500 mb-2">

diff --git a/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx b/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx
@@ -187,7 +187,7 @@ export default function EmbeddingForm() {
       return needsReIndex ? (
         <div className="flex mx-auto gap-x-1 ml-auto items-center">
           <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}
           >
             Re-index
@@ -214,7 +214,7 @@ export default function EmbeddingForm() {
         </div>
       ) : (
         <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 () => {
             updateSearch();
             navigateToEmbeddingPage("search settings");

diff --git a/web/src/app/auth/impersonate/page.tsx b/web/src/app/auth/impersonate/page.tsx
@@ -111,7 +111,7 @@ export default function ImpersonatePage() {
 
               <button
                 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
               </button>

diff --git a/web/src/app/auth/login/SignInButton.tsx b/web/src/app/auth/login/SignInButton.tsx
@@ -46,7 +46,7 @@ export function SignInButton({
 
   return (
     <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-text-100 bg-agent flex rounded cursor-pointer hover:bg-indigo-800"
       href={finalAuthorizeUrl}
     >
       {button}

diff --git a/web/src/app/chat/message/Messages.tsx b/web/src/app/chat/message/Messages.tsx
@@ -937,7 +937,7 @@ export const HumanMessage = ({
                         <button
                           className={`
                           w-fit
-                          bg-accent 
+                          bg-agent 
                           text-inverted 
                           text-sm
                           rounded-lg 

diff --git a/web/src/app/chat/nrf/NRFPage.tsx b/web/src/app/chat/nrf/NRFPage.tsx
@@ -364,7 +364,7 @@ export default function NRFPage({
                 Welcome to Onyx
               </h2>
               <Button
-                className="bg-accent w-full hover:bg-accent-hover text-white"
+                className="bg-agent w-full hover:bg-accent-hover text-white"
                 onClick={() => {
                   if (window.top) {
                     window.top.location.href = "/auth/login";

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
@@ -154,7 +154,6 @@
     --neutral-100-border-light: #f5f5f5;
     --neutral-300-border-medium: #d4d4d4;
     --neutral-400-border-strong: #a3a3a3;
-    --neutral-600-border-dark: #525252;
     --background-input-background: #fefcfa;
     --background-chatbar-sidebar: #f5f3ee;
     --background-chat-hover-selected: #e6e3dd;
@@ -284,7 +283,7 @@
     --neutral-100-border-light: #6a6a6a; /* was #f5f5f5 */
     --neutral-300-border-medium: #4a4a4a; /* was #d4d4d4 */
     --neutral-400-border-strong: #3a3a3a; /* was #a3a3a3 */
-    --neutral-600-border-dark: #2a2a2a; /* was #525252 */
+    --neutral-600-border-dark: #9ca3af; /* was #525252, now using Tailwind's neutral-400 */
     --input: 0 0% 15%; /* (HSL) approx #262626 for dark input backgrounds */
 
     /* Additional single-purpose color vars (inverted where sensible) */

diff --git a/web/src/components/embedding/EmbeddingSidebar.tsx b/web/src/components/embedding/EmbeddingSidebar.tsx
@@ -19,10 +19,9 @@ export default function EmbeddingSidebar() {
   const settingSteps = ["Embedding Model", "Reranking Model", "Advanced"];
 
   return (
-    <div className="flex bg-background text-default">
+    <div className="flex bg-background-sidebar text-default">
       <div
         className={`flex-none
-                  bg-background-100
                   h-screen
                   transition-all
                   bg-opacity-80
@@ -31,7 +30,7 @@ export default function EmbeddingSidebar() {
                   w-[250px]
                   `}
       >
-        <div className="fixed h-full left-0 top-0 bg-background-100 w-[250px]">
+        <div className="fixed h-full left-0 top-0 bg- w-[250px]">
           <div className="ml-4 mr-3 flex flex gap-x-1 items-center mt-2 my-auto text-text-700 text-xl">
             <div className="mr-1 my-auto h-6 w-6">
               <Logo height={24} width={24} />
@@ -49,7 +48,7 @@ export default function EmbeddingSidebar() {
           <div className="mx-3 mt-6 gap-y-1 flex-col flex gap-x-1.5 items-center items-center">
             <Link
               href={"/admin/configuration/search"}
-              className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
+              className="w-full p-2 bg-[#fff] dark:bg-neutral-950 border-border border dark:border-neutral-800 dark:hover:bg-neutral-900 rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
             >
               <SettingsIcon className="flex-none " />
               <p className="my-auto flex items-center text-sm">

diff --git a/web/src/components/embedding/ModelSelector.tsx b/web/src/components/embedding/ModelSelector.tsx
@@ -50,7 +50,7 @@ export function ModelOption({
     <div
       className={`p-4 w-96 border rounded-lg transition-all duration-200 ${
         selected
-          ? "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-background-200 hover:border-blue-300 hover:shadow-sm"
       }`}
     >
@@ -69,7 +69,7 @@ export function ModelOption({
           </a>
         )}
       </div>
-      <p className="text-sm k text-text-600 text-left mb-2">
+      <p className="text-sm k text-text-600 dark:text-neutral-400 text-left mb-2">
         {model.description ||
           currentModelCopy?.description ||
           "Custom model—no description is available."}

diff --git a/web/src/components/header/HeaderTitle.tsx b/web/src/components/header/HeaderTitle.tsx
@@ -21,7 +21,7 @@ export function HeaderTitle({
         backgroundToggled
           ? "text-text-sidebar-toggled-header"
           : "text-text-sidebar-header"
-      } break-words text-left line-clamp-2 ellipsis text-strong overflow-hidden leading-none font-bold`}
+      } break-words dark:text-[#fff] text-left line-clamp-2 ellipsis text-strong overflow-hidden leading-none font-bold`}
     >
       {children}
     </h1>

diff --git a/web/src/components/icons/icons.tsx b/web/src/components/icons/icons.tsx
@@ -44,7 +44,7 @@ import geminiSVG from "../../../public/Gemini.svg";
 import metaSVG from "../../../public/Meta.svg";
 import mistralSVG from "../../../public/Mistral.svg";
 import openSourceIcon from "../../../public/OpenSource.png";
-import litellmIcon from "../../../public/LiteLLM.jpg";
+import litellmIcon from "../../../public/litellm.png";
 
 import awsWEBP from "../../../public/Amazon.webp";
 import azureIcon from "../../../public/Azure.png";

diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
@@ -5,14 +5,14 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none  disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium ring-offset-[#fff] transition-colors focus-visible:outline-none  disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         success:
           "bg-green-100 text-green-600 hover:bg-green-500/90 dark:bg-green-700 dark:text-green-100 dark:hover:bg-green-600/90",
         "success-reverse":
-          "bg-green-600 text-white hover:bg-green-700 dark:bg-green-700 dark:text-green-100 dark:hover:bg-green-600",
+          "bg-green-600 text-[#fff] hover:bg-green-700 dark:bg-green-700 dark:text-green-100 dark:hover:bg-green-600",
         default:
           "bg-neutral-900 border-border text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200",
         "default-reverse":
@@ -22,7 +22,7 @@ const buttonVariants = cva(
         "destructive-reverse":
           "bg-neutral-50 text-red-500 hover:bg-neutral-50/90 dark:bg-red-100 dark:text-red-700 dark:hover:bg-red-200",
         outline:
-          "border border-neutral-300 bg-white hover:bg-neutral-50 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:hover:text-neutral-50",
+          "border border-neutral-300 bg-[#fff] hover:bg-neutral-50 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:hover:text-neutral-50",
         create:
           "border border-neutral-300 bg-neutral-50 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 transition-colors duration-200 ease-in-out shadow-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-neutral-50",
         "outline-reverse":
@@ -43,9 +43,9 @@ const buttonVariants = cva(
         "submit-reverse":
           "bg-neutral-50 text-blue-600 hover:bg-neutral-50/80 dark:bg-blue-100 dark:text-blue-800 dark:hover:bg-blue-200",
         navigate:
-          "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600",
+          "bg-blue-500 text-[#fff] hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600",
         "navigate-reverse":
-          "bg-white text-blue-500 hover:bg-blue-50 dark:bg-blue-100 dark:text-blue-800 dark:hover:bg-blue-200",
+          "bg-[#fff] text-blue-500 hover:bg-blue-50 dark:bg-blue-100 dark:text-blue-800 dark:hover:bg-blue-200",
         update:
           "border border-neutral-300 bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-600",
         "update-reverse":

diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
@@ -31,8 +31,10 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    hideCloseIcon?: boolean;
+  }
+>(({ className, children, hideCloseIcon, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -44,10 +46,12 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+      {!hideCloseIcon && (
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
     </DialogPrimitive.Content>
   </DialogPortal>
 ));

diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
@@ -71,9 +71,11 @@ SelectScrollDownButton.displayName =
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+    container?: HTMLElement | null;
+  }
+>(({ className, children, position = "popper", container, ...props }, ref) => (
+  <SelectPrimitive.Portal container={container}>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(