From 6ebd76fe6ae94cd420a96d1a54a170a0b81719a9 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Wed, 29 Nov 2023 11:06:02 -0600
Subject: [PATCH] fix styling on chatbot and similar files sidebar

---
 electron/main/index.ts                        |  2 -
 src/components/Chat/Chat.tsx                  |  2 +-
 src/components/FileEditorContainer.tsx        | 47 ++++++++++---------
 .../Similarity/SimilarFilesSidebar.tsx        | 47 ++++++++++++-------
 4 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/electron/main/index.ts b/electron/main/index.ts
index 1694487f..fe33c81d 100644
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -378,9 +378,7 @@ ipcMain.handle(
     console.log("writing file", filePath);
     // so here we can use the table we've created to add and remove things from the database. And all of the methods can be async to not hold up any threads
     await updateNoteInTable(dbTable, filePath, content);
-    console.log("content to write", content);
     await fs.writeFileSync(filePath, content, "utf-8");
-    console.log("finished writing file...");
     win?.webContents.send("vector-database-update");
   }
 );
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index 9b670b06..1d5e0a14 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -80,7 +80,7 @@ const ChatWithLLM: React.FC = () => {
 
   return (
     <div className="flex flex-col w-full h-full mx-auto border shadow-lg overflow-hidden">
-      <div className="flex-1 overflow-auto p-4 bg-white">
+      <div className="flex-1 overflow-auto p-4 bg-transparent">
         {loading && <p className="text-center text-gray-500">Loading...</p>}
         <div className="space-y-2">
           {messages.map((message, index) => (
diff --git a/src/components/FileEditorContainer.tsx b/src/components/FileEditorContainer.tsx
index 52d8c004..e12e628e 100644
--- a/src/components/FileEditorContainer.tsx
+++ b/src/components/FileEditorContainer.tsx
@@ -46,28 +46,33 @@ const FileEditorContainer: React.FC<FileEditorContainerProps> = ({}) => {
           />
         </div>
         {selectedFilePath && (
-          <div className="flex flex-grow relative">
-            <div className="w-2/3 overflow-auto">
-              <FileEditor
-                filePath={selectedFilePath}
-                setContentInParent={setEditorContent}
-                lastSavedContentRef={lastSavedContentRef}
-              />
-            </div>
-            <div
-              className="w-1/3"
-              style={{ marginRight: showChatbot ? "300px" : "0" }}
-            >
-              <SimilarEntriesComponent
-                filePath={selectedFilePath}
-                onFileSelect={onFileSelect}
-              />
-            </div>
-            {showChatbot && (
-              <div className="absolute right-0 top-0 h-full w-[300px]">
-                <ChatWithLLM />
+          <div
+            className="w-full h-full flex overflow-x-hidden"
+            style={{ marginRight: showChatbot ? "300px" : "0" }}
+          >
+            <div className="w-full flex ">
+              <div className="w-[75%]">
+                <FileEditor
+                  filePath={selectedFilePath}
+                  setContentInParent={setEditorContent}
+                  lastSavedContentRef={lastSavedContentRef}
+                />
+              </div>
+              <div className="w-[25%]">
+                <SimilarEntriesComponent
+                  filePath={selectedFilePath}
+                  onFileSelect={onFileSelect}
+                />
               </div>
-            )}
+            </div>
+          </div>
+        )}
+        {showChatbot && (
+          <div
+            className="absolute right-0  w-[250px]"
+            style={{ height: "calc(100vh - 30px)" }}
+          >
+            <ChatWithLLM />
           </div>
         )}
       </div>
diff --git a/src/components/Similarity/SimilarFilesSidebar.tsx b/src/components/Similarity/SimilarFilesSidebar.tsx
index ac4d974e..a208a106 100644
--- a/src/components/Similarity/SimilarFilesSidebar.tsx
+++ b/src/components/Similarity/SimilarFilesSidebar.tsx
@@ -59,25 +59,38 @@ const SimilarEntriesComponent: React.FC<SimilarEntriesComponentProps> = ({
   }, [filePath]);
 
   return (
-    <div className="h-full overflow-y-auto">
-      {loading ? (
-        <p className="text-center text-gray-600">Loading...</p>
-      ) : (
-        <div className="space-y-4">
-          {similarEntries.map((entry, index) => (
-            <div
-              key={index}
-              className="p-10 bg-white shadow-md rounded-lg cursor-pointer hover:scale-104 hover:shadow-lg transition-transform duration-300"
-              onClick={() => onFileSelect(entry.notepath)}
-            >
-              <p className="text-gray-700">
-                <span className="text-gray-500">{entry.content}</span>
-              </p>
-            </div>
-          ))}
+    <div className="w-full h-full overflow-y-auto overflow-x-hidden space-y-4">
+      {similarEntries.map((entry, index) => (
+        <div
+          key={index}
+          className="p-10 bg-white shadow-md rounded-lg cursor-pointer hover:scale-104 hover:shadow-lg transition-transform duration-300"
+          onClick={() => onFileSelect(entry.notepath)}
+        >
+          <p className="text-gray-700">
+            <span className="text-gray-500">{entry.content}</span>
+          </p>
         </div>
-      )}
+      ))}
     </div>
+    // <div className="w-full h-full overflow-y-auto bg-blue-200">
+    //   {loading ? (
+    //     <p className=" text-gray-600">Loading...</p>
+    //   ) : (
+    //     <div className="w-full space-y-4 bg-yellow-200">
+    //       {similarEntries.map((entry, index) => (
+    //         <div
+    //           key={index}
+    //           className="p-10 bg-white shadow-md rounded-lg cursor-pointer hover:scale-104 hover:shadow-lg transition-transform duration-300"
+    //           onClick={() => onFileSelect(entry.notepath)}
+    //         >
+    //           <p className="text-gray-700">
+    //             <span className="text-gray-500">{entry.content}</span>
+    //           </p>
+    //         </div>
+    //       ))}
+    //     </div>
+    //   )}
+    // </div>
   );
 };