From 28e06fa684854c535046334afe52ecc8cdde2fb0 Mon Sep 17 00:00:00 2001
From: Siddhant Rai <siddhant.rai.5686@gmail.com>
Date: Tue, 3 Sep 2024 16:11:24 +0530
Subject: [PATCH] fix: minor ui inconsistencies

---
 application/retriever/classic_rag.py          |   9 +-
 frontend/src/components/Input.tsx             |   8 +-
 frontend/src/components/types/index.ts        |   1 +
 .../src/conversation/ConversationBubble.tsx   |   2 +-
 frontend/src/index.css                        |  20 +++
 frontend/src/upload/Upload.tsx                | 135 ++++++++++--------
 6 files changed, 109 insertions(+), 66 deletions(-)

diff --git a/application/retriever/classic_rag.py b/application/retriever/classic_rag.py
index aef6e503..32f51234 100644
--- a/application/retriever/classic_rag.py
+++ b/application/retriever/classic_rag.py
@@ -61,13 +61,12 @@ class ClassicRAG(BaseRetriever):
                 settings.VECTOR_STORE, self.vectorstore, settings.EMBEDDINGS_KEY
             )
             docs_temp = docsearch.search(self.question, k=self.chunks)
+            print(docs_temp)
             docs = [
                 {
-                    "title": (
-                        i.metadata["title"].split("/")[-1]
-                        if i.metadata
-                        else i.page_content
-                    ),
+                    "title": i.metadata.get(
+                        "title", i.metadata.get("post_title", i.page_content)
+                    ).split("/")[-1],
                     "text": i.page_content,
                     "source": (
                         i.metadata.get("source")
diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
index 56ca1d52..17e60190 100644
--- a/frontend/src/components/Input.tsx
+++ b/frontend/src/components/Input.tsx
@@ -10,6 +10,7 @@ const Input = ({
   maxLength,
   className,
   colorVariant = 'silver',
+  borderVariant = 'thick',
   children,
   onChange,
   onPaste,
@@ -20,10 +21,13 @@ const Input = ({
     jet: 'border-jet',
     gray: 'border-gray-5000 dark:text-silver',
   };
-
+  const borderStyles = {
+    thin: 'border',
+    thick: 'border-2',
+  };
   return (
     <input
-      className={`h-[42px] w-full rounded-full border-2 px-3 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]}`}
+      className={`h-[42px] w-full rounded-full px-3 py-1 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
       type={type}
       id={id}
       name={name}
diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
index 0d6172ab..7af1c545 100644
--- a/frontend/src/components/types/index.ts
+++ b/frontend/src/components/types/index.ts
@@ -2,6 +2,7 @@ export type InputProps = {
   type: 'text' | 'number';
   value: string | string[] | number;
   colorVariant?: 'silver' | 'jet' | 'gray';
+  borderVariant?: 'thin' | 'thick';
   isAutoFocused?: boolean;
   id?: string;
   maxLength?: number;
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 7ec98820..10951b70 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -180,7 +180,7 @@ const ConversationBubble = forwardRef<
                   ))}
                   {(sources?.length ?? 0) > 3 && (
                     <div
-                      className="flex h-24 cursor-pointer flex-col-reverse rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
+                      className="flex h-28 cursor-pointer flex-col-reverse rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
                       onClick={() => setIsSidebarOpen(true)}
                     >
                       <p className="ellipsis-text h-22 text-xs">{`View ${
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6ae4b762..025059ac 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -424,6 +424,26 @@ template {
   width: 0;
 }
 
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50px white inset;
+}
+
+input:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 50px white inset;
+}
+
+@media (prefers-color-scheme: dark) {
+  input:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0 50px rgb(68, 70, 84) inset;
+    -webkit-text-fill-color: white;
+  }
+
+  input:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0 50px rgb(68, 70, 84) inset;
+    -webkit-text-fill-color: white;
+  }
+}
+
 .inputbox-style {
   resize: none;
   padding-left: 36px;
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index c5eed6d8..2641a8f8 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -275,7 +275,7 @@ function Upload({
     } else
       setRedditData({
         ...redditData,
-        [name]: value,
+        [name]: name === 'number_posts' ? parseInt(value) : value,
       });
   };
 
@@ -321,6 +321,7 @@ function Upload({
               colorVariant="gray"
               value={docName}
               onChange={(e) => setDocName(e.target.value)}
+              borderVariant="thin"
             ></Input>
             <div className="relative bottom-12 left-2 mt-[-20px]">
               <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
@@ -356,6 +357,7 @@ function Upload({
         {activeTab === 'remote' && (
           <>
             <Dropdown
+              border="border"
               options={urlOptions}
               selectedValue={urlType}
               onSelect={(value: { label: string; value: string }) =>
@@ -371,6 +373,7 @@ function Upload({
                   type="text"
                   value={urlName}
                   onChange={(e) => setUrlName(e.target.value)}
+                  borderVariant="thin"
                 ></Input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
@@ -382,6 +385,7 @@ function Upload({
                   type="text"
                   value={url}
                   onChange={(e) => setUrl(e.target.value)}
+                  borderVariant="thin"
                 ></Input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
@@ -390,68 +394,83 @@ function Upload({
                 </div>
               </>
             ) : (
-              <>
-                <Input
-                  placeholder="Enter client ID"
-                  type="text"
-                  name="client_id"
-                  value={redditData.client_id}
-                  onChange={handleChange}
-                ></Input>
-                <div className="relative bottom-12 left-2 mt-[-20px]">
-                  <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                    {t('modals.uploadDoc.reddit.id')}
-                  </span>
+              <div className="flex flex-col gap-1 mt-2">
+                <div>
+                  <Input
+                    placeholder="Enter client ID"
+                    type="text"
+                    name="client_id"
+                    value={redditData.client_id}
+                    onChange={handleChange}
+                    borderVariant="thin"
+                  ></Input>
+                  <div className="relative bottom-[52px] left-2">
+                    <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+                      {t('modals.uploadDoc.reddit.id')}
+                    </span>
+                  </div>
                 </div>
-                <Input
-                  placeholder="Enter client secret"
-                  type="text"
-                  name="client_secret"
-                  value={redditData.client_secret}
-                  onChange={handleChange}
-                ></Input>
-                <div className="relative bottom-12 left-2 mt-[-20px]">
-                  <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                    {t('modals.uploadDoc.reddit.secret')}
-                  </span>
+                <div>
+                  <Input
+                    placeholder="Enter client secret"
+                    type="text"
+                    name="client_secret"
+                    value={redditData.client_secret}
+                    onChange={handleChange}
+                    borderVariant="thin"
+                  ></Input>
+                  <div className="relative bottom-[52px] left-2">
+                    <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+                      {t('modals.uploadDoc.reddit.secret')}
+                    </span>
+                  </div>
                 </div>
-                <Input
-                  placeholder="Enter user agent"
-                  type="text"
-                  name="user_agent"
-                  value={redditData.user_agent}
-                  onChange={handleChange}
-                ></Input>
-                <div className="relative bottom-12 left-2 mt-[-20px]">
-                  <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                    {t('modals.uploadDoc.reddit.agent')}
-                  </span>
+                <div>
+                  <Input
+                    placeholder="Enter user agent"
+                    type="text"
+                    name="user_agent"
+                    value={redditData.user_agent}
+                    onChange={handleChange}
+                    borderVariant="thin"
+                  ></Input>
+                  <div className="relative bottom-[52px] left-2">
+                    <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+                      {t('modals.uploadDoc.reddit.agent')}
+                    </span>
+                  </div>
                 </div>
-                <Input
-                  placeholder="Enter search queries"
-                  type="text"
-                  name="search_queries"
-                  value={redditData.search_queries}
-                  onChange={handleChange}
-                ></Input>
-                <div className="relative bottom-12 left-2 mt-[-20px]">
-                  <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                    {t('modals.uploadDoc.reddit.searchQueries')}
-                  </span>
+                <div>
+                  <Input
+                    placeholder="Enter search queries"
+                    type="text"
+                    name="search_queries"
+                    value={redditData.search_queries}
+                    onChange={handleChange}
+                    borderVariant="thin"
+                  ></Input>
+                  <div className="relative bottom-[52px] left-2">
+                    <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+                      {t('modals.uploadDoc.reddit.searchQueries')}
+                    </span>
+                  </div>
                 </div>
-                <Input
-                  placeholder="Enter number of posts"
-                  type="number"
-                  name="number_posts"
-                  value={redditData.number_posts}
-                  onChange={handleChange}
-                ></Input>
-                <div className="relative bottom-12 left-2 mt-[-20px]">
-                  <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                    {t('modals.uploadDoc.reddit.numberOfPosts')}
-                  </span>
+                <div>
+                  <Input
+                    placeholder="Enter number of posts"
+                    type="number"
+                    name="number_posts"
+                    value={redditData.number_posts}
+                    onChange={handleChange}
+                    borderVariant="thin"
+                  ></Input>
+                  <div className="relative bottom-[52px] left-2">
+                    <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+                      {t('modals.uploadDoc.reddit.numberOfPosts')}
+                    </span>
+                  </div>
                 </div>
-              </>
+              </div>
             )}
           </>
         )}