Merge pull request #367 from milaiwi/update-chat-ui

Update Chat UI
reorproject · Aug 24, 2024 · 51aecbc · 51aecbc
2 parents d07736b + f78ece4
commit 51aecbc
Show file tree

Hide file tree

Showing 10 changed files with 496 additions and 249 deletions.
diff --git a/src/assets/reor-logo.svg b/src/assets/reor-logo.svg
diff --git a/src/components/Chat/AddContextFiltersModal.tsx b/src/components/Chat/AddContextFiltersModal.tsx
@@ -101,13 +101,13 @@ const AddContextFiltersModal: React.FC<Props> = ({ vaultDirectory, isOpen, onClo
 
   return (
     <ReorModal isOpen={isOpen} onClose={onClose}>
-      <div className="mb-6 ml-6 mt-2 h-full max-h-[90vh] w-[800px] overflow-y-auto overflow-x-hidden p-4">
+      <div className="mb-6 ml-6 mt-2 h-full max-h-[80vh] w-[70vw] overflow-y-auto overflow-x-hidden p-4">
         <h4 className="mb-4 text-center text-2xl text-white">
           Choose specific context files or customise the RAG search
         </h4>
-        <div className="flex">
+        <div className="flex flex-col md:flex-row">
           {/* Left side: File selection */}
-          <div className="flex-1 pr-4">
+          <div className="flex-1">
             <h3 className="mb-2 text-lg text-white">Select files for context</h3>
             <SearchBarWithFilesSuggestion
               vaultDirectory={vaultDirectory}
@@ -138,18 +138,25 @@ const AddContextFiltersModal: React.FC<Props> = ({ vaultDirectory, isOpen, onClo
 
           {/* Vertical divider */}
           <div className="mx-4 flex flex-col items-center justify-center">
-            <div className="w-px grow bg-gray-600" />
-            <div className="my-2 flex size-8 items-center justify-center rounded-full bg-gray-800 text-sm font-bold text-white">
-              Or
+            {/* Horizontal separator for larger screens */}
+            <div className="flex w-full items-center md:hidden">
+              <div className="h-px grow bg-gray-600" />
+              <div className="mx-2 flex items-center justify-center rounded-full bg-gray-800 text-sm font-bold text-white">
+                Or
+              </div>
+              <div className="h-px grow bg-gray-600" />
+            </div>
+
+            {/* Vertical separator for smaller screens */}
+            <div className="hidden h-full flex-col items-center md:flex">
+              <div className="w-px grow bg-gray-600" />
+              <div className="my-2 text-sm font-bold text-white">Or</div>
+              <div className="w-px grow bg-gray-600" />
             </div>
-            <div className="w-px grow bg-gray-600" />
           </div>
+
           {/* Right side: Context settings */}
-          <div
-            className={`flex-1 pl-4
-              
-                `}
-          >
+          <div className="flex-1">
             {/* ${
               internalFilesSelected.length > 0
                 ? "opacity-30	 pointer-events-none"
@@ -158,7 +165,7 @@ const AddContextFiltersModal: React.FC<Props> = ({ vaultDirectory, isOpen, onClo
             <h3 className="mb-2 text-lg text-white">Context settings</h3>
             <div className="mb-4 text-white">
               <p>Number of notes to add to context:</p>
-              <div className="mt-2 w-full rounded bg-neutral-800 pb-3 pr-2">
+              <div className="mt-2 w-full rounded bg-neutral-800 p-4 pb-2">
                 <Slider
                   aria-label="Number of Notes"
                   value={numberOfChunksToFetch}
@@ -208,17 +215,17 @@ const AddContextFiltersModal: React.FC<Props> = ({ vaultDirectory, isOpen, onClo
                 {showAdvanced ? 'Hide Advanced' : 'Show Advanced'}
               </div>
               {showAdvanced && (
-                <div className="mt-2 flex space-x-4">
-                  <div className="flex flex-1 flex-col items-center text-white">
+                <div className="mt-2 flex flex-col items-center space-x-4">
+                  <div className="flex h-[400px] w-[300px] flex-col items-center overflow-hidden text-white">
                     <p className="mb-1">Min Date:</p>
                     <DayPicker
                       selected={minDate}
                       onSelect={(date) => setMinDate(date || undefined)}
                       mode="single"
-                      className="my-day-picker w-full"
+                      className="my-day-picker size-full"
                     />
                   </div>
-                  <div className="flex flex-1 flex-col items-center text-white">
+                  <div className="flex h-[400px] w-[300px] flex-col items-center overflow-hidden text-white">
                     <p className="mb-1">Max Date:</p>
                     <DayPicker
                       selected={maxDate}

diff --git a/src/components/Chat/Chat-Prompts.tsx b/src/components/Chat/Chat-Prompts.tsx
@@ -8,11 +8,11 @@ interface Props {
 
 const PromptSuggestion: FC<Props> = ({ promptText, onClick }: Props) => (
   <button
-    className={`
-            mt-2 cursor-pointer rounded border border-solid border-white/50
-             bg-neutral-800 p-5
-            text-base
-            text-white shadow hover:bg-neutral-300 hover:text-black`}
+    className={`mx-1 mt-2
+            h-[100px] max-w-[200px] cursor-pointer rounded-lg border
+             border-solid border-white/50 bg-transparent p-5 text-xs
+            text-white
+            opacity-40 shadow hover:opacity-70`}
     onClick={onClick}
     type="button"
   >