feat: Manage Data page (#22)

vana-com · Mar 1, 2024 · 4bc26b6 · 4bc26b6
1 parent db81e61
commit 4bc26b6
Show file tree

Hide file tree

Showing 24 changed files with 479 additions and 542 deletions.
diff --git a/selfie-ui/package.json b/selfie-ui/package.json
@@ -15,8 +15,11 @@
     "@rjsf/utils": "^5.17.1",
     "@rjsf/validator-ajv8": "^5.17.1",
     "@tailwindcss/typography": "^0.5.10",
+    "@tanstack/match-sorter-utils": "^8.11.8",
+    "@tanstack/react-table": "^8.13.2",
     "daisyui": "^4.6.1",
     "deep-chat-react": "^1.4.11",
+    "filesize": "^10.1.0",
     "json-schema": "^0.4.0",
     "next": "14.1.0",
     "next-themes": "^0.2.1",

diff --git a/selfie-ui/src/app/components/AddData/DocumentSourceSelector.tsx b/selfie-ui/src/app/components/AddData/DocumentSourceSelector.tsx
@@ -37,14 +37,19 @@ const DocumentSourceSelector = ({ onSelect }: DocumentSourceSelectorProps) => {
   };
 
   return (
-    <select className="select select-bordered w-full max-w-sm" onChange={handleChange} defaultValue={''}>
-      <option disabled value="">Select a data source...</option>
-      {sources.map((source) => (
-        <option key={source.value} value={source.value}>
-          {source.label}
-        </option>
-      ))}
-    </select>
+    <>
+      <p className="my-4">
+        Choose a data source and follow the instructions to upload new documents. Choose the method that most closely matches your data for the best results.
+      </p>
+      <select className="select select-bordered w-full max-w-sm" onChange={handleChange} defaultValue={''}>
+        <option disabled value="">Select a data source...</option>
+        {sources.map((source) => (
+          <option key={source.value} value={source.value}>
+            {source.label}
+          </option>
+        ))}
+      </select>
+    </>
   );
 };
 

diff --git a/selfie-ui/src/app/components/Chat.tsx b/selfie-ui/src/app/components/Chat.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { RequestDetails } from "deep-chat/dist/types/interceptors";
+import { useTheme } from "next-themes";
 import { apiBaseUrl } from "../config";
 
 const DeepChat = dynamic(
@@ -18,85 +19,78 @@ export const Chat = ({
                        shouldClear = false, // TODO: figure out how to use this
                        instruction = ''
                      }) => {
+  const { theme } = useTheme();
+
   const [showIntroPanel, setShowIntroPanel] = useState(!!instruction);
 
-  return <DeepChat
-    // clearMessages={(shouldClear) => {}}
-    key={`${assistantName}-${assistantBio}-${userName}-${disableAugmentation}-${showIntroPanel}`} // Force re-render when props are changed
-    htmlClassUtilities={{
-      'close-button': {
-        events: {
-          click: () => {
-            setShowIntroPanel(false);
-          },
-        },
-        styles: {
-          default: {
-            cursor: 'pointer',
-            textAlign: 'center',
-            backgroundColor: '#555',
-            color: 'white',
-            padding: '4px 8px',
-            border: '1px solid #666',
-            borderRadius: '10px',
-            fontSize: '16px',
-            marginBottom: '10px',
-          },
-        },
-      },
-      'custom-button-text': { styles: { default: { pointerEvents: 'none' } } },
-    }}
-    style={{
-      borderRadius: '10px',
-      border: 'unset',
-      backgroundColor: '#292929',
-      width: '100%',
-      maxWidth: 'inherit',
-      display: 'block'
-    }}
-    messageStyles={{
-      "default": {
-        "ai": {"bubble": {"backgroundColor": "#545454", "color": "white"}}
-      },
-      "loading": {
-        "bubble": {"backgroundColor": "#545454", "color": "white"}
+  const chatStyle = {
+    borderRadius: '10px',
+    border: 'unset solid 1px oklch(var(--b2)*0.2)', // The 0.2 is not working, can't match textarea-bordered so using --b2 below instead.
+    backgroundColor: 'oklch(var(--b2))',
+    // backgroundColor: 'oklch(var(--b1))',
+    width: '100%',
+    maxWidth: 'inherit',
+    display: 'block'
+  };
+
+  const chatMessageStyle = {
+    default: {
+      ai: { bubble: { backgroundColor: 'oklch(var(--b2))', color: 'oklch(var(--bc))' } }, // Slightly darker base color for AI bubble
+    },
+    loading: {
+      bubble: { backgroundColor: 'oklch(var(--b2))', color: 'oklch(var(--bc))' },
+    }
+  };
+
+  const chatInputStyle = {
+    styles: {
+      container: {
+        backgroundColor: 'oklch(var(--b3))', // Even more darker base color for input container
+        border: 'unset',
+        color: 'oklch(var(--bc))' // Base content color
       }
-    }}
-    textInput={{
-      "styles": {
-        "container": {
-          "backgroundColor": "#666666",
-          "border": "unset",
-          "color": "#e8e8e8"
-        }
+    },
+    placeholder: { text: "Say anything here...", style: { color: 'oklch(var(--bc))' } } // Use base-200 color for placeholder
+  };
+
+  const chatSubmitButtonStyles = {
+    submit: {
+      container: {
+        default: { bottom: '0.7rem' }
       },
-      "placeholder": {"text": "Say anything here...", "style": {"color": "#bcbcbc"}}
-    }}
-    submitButtonStyles={{
-      "submit": {
-        "container": {
-          "default": {"bottom": "0.7rem"}
-        },
-        "svg": {
-          "styles": {
-            "default": {
-              "filter": "brightness(0) saturate(100%) invert(70%) sepia(52%) saturate(5617%) hue-rotate(185deg) brightness(101%) contrast(101%)"
-            }
+      svg: {
+        styles: {
+          default: {
+            filter: "brightness(0) saturate(100%) invert(70%) sepia(52%) saturate(5617%) hue-rotate(185deg) brightness(101%) contrast(101%)"
           }
         }
       }
-    }}
-    auxiliaryStyle="::-webkit-scrollbar {
-            width: 10px;
-            height: 10px;
-          }
-          ::-webkit-scrollbar-thumb {
-            background-color: grey;
-            border-radius: 5px;
-          }
-          ::-webkit-scrollbar-track {
-            background-color: unset;
-          }"
+    }
+  };
+
+  const auxiliaryStyle=`::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: oklch(var(--n));
+    border-radius: 5px;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: unset;
+  }`
+
+  useEffect(() => {
+    setShowIntroPanel(!!instruction);
+  }, [instruction]);
+
+  return <DeepChat
+    key={`${assistantName}-${assistantBio}-${userName}-${disableAugmentation}-${showIntroPanel}-${theme}`} // Re-render on theme change
+    style={chatStyle}
+    messageStyles={chatMessageStyle}
+    textInput={chatInputStyle}
+    submitButtonStyles={chatSubmitButtonStyles}
+    auxiliaryStyle={auxiliaryStyle}
     initialMessages={[
       {"text": "Hello! How are you?", "role": "assistant"},
     ]}
@@ -147,7 +141,7 @@ export const Chat = ({
     {showIntroPanel && <div
       style={{
         width: '200px',
-        backgroundColor: '#f3f3f3',
+        backgroundColor: 'oklch(var(--b3))',
         borderRadius: '8px',
         padding: '12px',
         // paddingBottom: '15px',

diff --git a/selfie-ui/src/app/components/DataManager.tsx b/selfie-ui/src/app/components/DataManager.tsx