decent state

onyx-dot-app · Feb 8, 2025 · a0f7f2e · a0f7f2e
1 parent a3b9632
commit a0f7f2e
Show file tree

Hide file tree

Showing 23 changed files with 1,009 additions and 319 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -4,7 +4,7 @@
   "version-comment": "version field must be SemVer or chromatic will barf",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -21,17 +21,17 @@
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-checkbox": "^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-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-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-slider": "^1.2.2",
     "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@sentry/nextjs": "^8.50.0",

diff --git a/web/src/app/assistants/mine/AssistantCard.tsx b/web/src/app/assistants/mine/AssistantCard.tsx
@@ -101,7 +101,7 @@ const AssistantCard: React.FC<{
   }, [persona.name]);
 
   return (
-    <div className="w-full p-2 overflow-visible pb-4 pt-3 bg-background-200 rounded shadow-[0px_0px_4px_0px_rgba(0,0,0,0.25)] flex flex-col">
+    <div className="w-full p-2 overflow-visible pb-4 pt-3 bg-neutral-100 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="ml-2 flex-none mr-2 mt-1 w-10 h-10">
           <AssistantIcon assistant={persona} size="large" />
@@ -114,7 +114,7 @@ const AssistantCard: React.FC<{
                   <TooltipTrigger asChild>
                     <h3
                       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}
                     </h3>
@@ -159,13 +159,13 @@ const AssistantCard: React.FC<{
                   <PopoverTrigger asChild>
                     <button
                       type="button"
-                      className="hover:bg-background-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} />
                     </button>
                   </PopoverTrigger>
                   <PopoverContent
-                    className={`z-[10000] ${
+                    className={`z-[1000000] ${
                       activePopover === null ? "w-32" : "w-80"
                     } p-2`}
                   >
@@ -175,15 +175,15 @@ const AssistantCard: React.FC<{
                           onClick={isOwnedByUser ? handleEdit : undefined}
                           className={`w-full flex items-center text-left px-2 py-1 rounded ${
                             isOwnedByUser
-                              ? "hover:bg-background-100"
+                              ? "hover:bg-neutral-200 dark:hover:bg-neutral-700"
                               : "opacity-50 cursor-not-allowed"
                           }`}
                           disabled={!isOwnedByUser}
                         >
                           <FiEdit size={12} className="inline mr-2" />
                           Edit
                         </button>
-                        {isPaidEnterpriseFeaturesEnabled && (
+                        {isPaidEnterpriseFeaturesEnabled && isOwnedByUser && (
                           <button
                             onClick={
                               isOwnedByUser
@@ -197,7 +197,7 @@ const AssistantCard: React.FC<{
                             }
                             className={`w-full text-left items-center px-2 py-1 rounded ${
                               isOwnedByUser
-                                ? "hover:bg-background-100"
+                                ? "hover:bg-neutral-200 dark:hover:bg-neutral-800"
                                 : "opacity-50 cursor-not-allowed"
                             }`}
                             disabled={!isOwnedByUser}
@@ -208,10 +208,10 @@ const AssistantCard: React.FC<{
                         )}
                         <button
                           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
-                              ? "hover:bg-background-100 text-red-600"
-                              : "opacity-50 cursor-not-allowed text-red-300"
+                              ? "hover:bg-neutral-200 dark:hover:bg-neutral- text-red-600 dark:text-red-400"
+                              : "opacity-50 cursor-not-allowed text-red-300 dark:text-red-500"
                           }`}
                           disabled={!isOwnedByUser}
                         >
@@ -251,13 +251,13 @@ const AssistantCard: React.FC<{
             )}
           </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"}
           </p>
 
           <div className="flex flex-col ">
             <div className="my-1.5">
-              <p className="flex items-center text-black text-xs opacity-50">
+              <p className="flex items-center text-neutral-600 dark:text-neutral-400 text-xs opacity-50">
                 {persona.owner?.email || persona.builtin_persona ? (
                   <>
                     <span className="truncate">
@@ -302,7 +302,7 @@ const AssistantCard: React.FC<{
                       router.push(`/chat?assistantId=${persona.id}`);
                       closeModal();
                     }}
-                    className="hover:bg-background-100 hover:text-text px-2 py-1 gap-x-1 rounded border border-black flex items-center"
+                    className="hover:bg-neutral-200 dark:hover:bg-neutral-700 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" />
                     <span className="text-xs">Start Chat</span>
@@ -324,15 +324,17 @@ const AssistantCard: React.FC<{
                         !pinned
                       );
                     }}
-                    className="hover:bg-background-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-200 dark:hover:bg-neutral-700 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} />
                     {!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
                       </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>
                 </TooltipTrigger>
@@ -348,5 +350,4 @@ const AssistantCard: React.FC<{
     </div>
   );
 };
-
 export default AssistantCard;
diff --git a/web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx b/web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx
@@ -84,8 +84,8 @@ export function ChatDocumentDisplay({
       <div
         className={`flex relative flex-col px-3 py-2.5 gap-0.5  rounded-xl my-1 ${
           isSelected
-            ? "bg-new-background"
-            : " hover:bg-new-background hover:bg-opacity-50"
+            ? "bg-accent-background-hovered"
+            : " hover:bg-accent-background"
         }`}
       >
         <button
@@ -98,7 +98,7 @@ export function ChatDocumentDisplay({
             ) : (
               <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 >
               (modal ? 30 : 40)
                 ? `${(document.semantic_identifier || document.document_id)
@@ -111,7 +111,7 @@ export function ChatDocumentDisplay({
             <DocumentMetadataBlock modal={modal} document={document} />
           )}
           <div
-            className={`line-clamp-3 text-sm font-normal leading-snug text-text-600 ${
+            className={`line-clamp-3 text-sm font-normal leading-snug text-neutral-900 dark:text-neutral-300 ${
               hasMetadata ? "mt-2" : ""
             }`}
           >

diff --git a/web/src/app/chat/input/ChatInputBar.tsx b/web/src/app/chat/input/ChatInputBar.tsx
@@ -432,7 +432,7 @@ export function ChatInputBar({
               ref={suggestionsRef}
               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) => (
                   <button
                     key={index}
@@ -476,7 +476,7 @@ export function ChatInputBar({
               ref={suggestionsRef}
               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(
                   (currentPrompt: InputPrompt, index: number) => (
                     <button
@@ -523,7 +523,9 @@ export function ChatInputBar({
               flex-col
               border
               shadow
+              bg-input-background
               border-input-border
+              dark:border-none
               rounded-lg
               overflow-hidden
               text-text-chatbar
@@ -580,7 +582,10 @@ export function ChatInputBar({
                 rounded-lg
                 border-0
                 bg-input-background
-                placeholder:text-text-muted
+                font-normal
+                text-base
+                leading-6
+                placeholder:text-input-text
                 ${
                   textAreaRef.current &&
                   textAreaRef.current.scrollHeight > MAX_INPUT_HEIGHT
@@ -594,6 +599,7 @@ export function ChatInputBar({
                 resize-none
                 px-5
                 py-4
+                dark:text-[#ececec]
               `}
               autoFocus
               style={{ scrollbarWidth: "thin" }}
@@ -813,8 +819,8 @@ export function ChatInputBar({
                     chatState == "toolBuilding" ||
                     chatState == "loading"
                       ? chatState != "streaming"
-                        ? "bg-background-400"
-                        : "bg-background-800"
+                        ? "bg-neutral-900 dark:bg-neutral-400 "
+                        : "bg-neutral-500 dark:bg-neutral-50"
                       : ""
                   } h-[22px] w-[22px] rounded-full`}
                   onClick={() => {
@@ -840,15 +846,15 @@ export function ChatInputBar({
                   chatState == "loading" ? (
                     <StopGeneratingIcon
                       size={8}
-                      className="text-text-darker m-auto text-white flex-none"
+                      className="text-neutral-50 dark:text-neutral-900 m-auto text-white flex-none"
                     />
                   ) : (
                     <SendIcon
                       size={22}
-                      className={`text-text-darker 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
-                          ? "bg-submit-background"
-                          : "bg-disabled-submit-background"
+                          ? "bg-neutral-900 dark:bg-neutral-50"
+                          : "bg-neutral-500 dark:bg-neutral-400"
                       }`}
                     />
                   )}

diff --git a/web/src/app/chat/input/ChatInputOption.tsx b/web/src/app/chat/input/ChatInputOption.tsx
@@ -45,10 +45,11 @@ export const ChatInputOption: React.FC<ChatInputOptionProps> = ({
             space-x-1
             group
             rounded
-            text-inputoption
-            hover:text-text-950
+            text-input-text
             hover:bg-background-chat-hover
-            hover:text-text-darker
+            hover:text-neutral-900
+
+            dark:hover:text-neutral-50
             py-1.5
             px-2
             ${

diff --git a/web/src/app/chat/message/MemoizedTextComponents.tsx b/web/src/app/chat/message/MemoizedTextComponents.tsx
@@ -181,7 +181,7 @@ export const MemoizedParagraph = memo(
   function MemoizedParagraph({ children, fontSize }: any) {
     return (
       <p
-        className={`text-text-900 my-0 ${
+        className={`text-neutral-900 dark:text-neutral-200 my-0 ${
           fontSize === "sm" ? "leading-tight text-sm" : ""
         }`}
       >

diff --git a/web/src/app/chat/message/SkippedSearch.tsx b/web/src/app/chat/message/SkippedSearch.tsx
@@ -25,7 +25,7 @@ export function SkippedSearch({
             <>
               <BasicClickable
                 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?
               </BasicClickable>

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
@@ -7,7 +7,10 @@
     --warning: 38 92% 50%;
     --warning-foreground: 48 96% 89%;
 
+    --input-text: #6c6c6b;
+
     /* ---------------------------------
+    
      * 1. Single set of neutral values
      * --------------------------------- */
     --neutral-50: #fafafa;
@@ -64,7 +67,7 @@
     --accent: 0 0% 96.1%;
     --accent-foreground: 0 0% 9%;
     --accent-background: #f0eee8;
-    --accent-background-hovered: #ebe7de;
+    --accent-background-hovered: #e6e1d6;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
     --ring: 0 0% 3.9%;
@@ -243,6 +246,8 @@
     --neutral-950: #f0f0f0; /* lightest */
     --hover: #2c2c2c;
 
+    --input-text: #b4b4b4;
+
     --text-darker: #f0f0f0;
     --text-dark: #f0f0f0;
     /* -------------------------------------------------------
@@ -255,6 +260,7 @@
     --text-text: #1d1d1d;
     --background-dark: #252525;
 
+    /* --new-background: #fff; */
     --new-background: #2c2c2c;
     --new-background-light: #383838;
 
@@ -264,8 +270,10 @@
     --background-sidebar: #171717;
     --black: #000000;
 
-    --accent-background: #181816;
-    --accent-background-hovered: #1a1a18;
+    /* --accent-background: #181816; */
+    --accent-background: #262626;
+
+    --accent-background-hovered: #404040;
 
     --text-darker: #dcdcdc;
 

diff --git a/web/src/components/Hoverable.tsx b/web/src/components/Hoverable.tsx
@@ -17,7 +17,7 @@ export const Hoverable: React.FC<{
       <div className="flex items-center">
         <Icon
           size={size}
-          className="text-text-600 shrink-0 dark:hover:text-[#fff]"
+          className="hover:bg-background-chat-hover dark:text-[#B4B4B4] text-neutral-600  rounded h-fit cursor-pointer"
         />
         {hoverText && (
           <div className="max-w-0 leading-none whitespace-nowrap overflow-hidden transition-all duration-300 ease-in-out group-hover:max-w-xs group-hover:ml-2">
@@ -35,7 +35,7 @@ export const HoverableIcon: React.FC<{
 }> = ({ icon, onClick }) => {
   return (
     <div
-      className="hover:bg-background-chat-hover dark:hover:text-[#fff] text-text-600 p-1.5 rounded h-fit cursor-pointer"
+      className="hover:bg-background-chat-hover dark:text-[#B4B4B4] text-neutral-600 p-1.5 rounded h-fit cursor-pointer"
       onClick={onClick}
     >
       {icon}

diff --git a/web/src/components/admin/CardSection.tsx b/web/src/components/admin/CardSection.tsx
@@ -11,7 +11,7 @@ export default function CardSection({
   return (
     <div
       className={cn(
-        "p-6 border bg-white rounded border-border-strong/80",
+        "p-6 border bg-neutral-50 dark:bg-neutral-800 rounded border-border-strong/80",
         className
       )}
     >