UI Enhancements

src/pages/sidePanel/PageMetadata.tsx

@@ -17,7 +17,7 @@ function switchToTab(tabId, pageURL) {
 // eslint-disable-next-line react/prop-types
 export default function PageMetadata({ metadata, taskType }) {
   return metadata ? (
-    <div className={`page-metadata${taskType === 'summary' ? ' page-metadata-summary' : ''}`}>
+    <div className="page-metadata">
       <div className="metadata-content">
         {metadata.tabID && (
           <div

src/pages/sidePanel/PageSummary.tsx

@@ -8,14 +8,16 @@ export default function PageSummary({ loading, summary, taskType }) {
     <div>
       {/* while loading show LinearProgress  */}
       {loading ? (
-        <div>
+        <div className="form-container">
           <span>Generating summary...</span>
           <LinearProgress color="primary" />
         </div>
       ) : summary ? (
         <div>
           <div className="content-box">{summary.text}</div>
-          <PageMetadata metadata={summary} taskType={taskType} />
+          <div className="form-container">
+            <PageMetadata metadata={summary} taskType={taskType} />
+          </div>
         </div>
       ) : null}
     </div>

src/pages/sidePanel/QandABubble.tsx

@@ -6,7 +6,7 @@ import PageMetadata from '@root/src/pages/sidePanel/PageMetadata';
 /* eslint-disable react/prop-types */
 export function QandAStatus({ embedding, vectorstore }) {
   return (
-    <div>
+    <div className="form-container">
       {/* while embedding==true show LinearProgress moving else show LinearProgress Solid */}
       {embedding && vectorstore === null ? (
         <div>
@@ -134,18 +134,17 @@ export function QandABubble({ taskType, selectedModel, vectorstore }) {
               onKeyDown={handleKeyPress}
               className="question-input"
               style={{ overflowY: 'hidden' }} // Prevent scrollbar
+              disabled={answering}
             />
             <button
               type="submit"
               className={`real-button ${question ? 'has-text' : ''}`}
               disabled={answering} // this will disable the button when answering is true
             >
-              <BsFillArrowRightSquareFill size="2rem" />
+              <BsFillArrowRightSquareFill size="2rem" className={answering ? 'spin' : ''} />
             </button>
           </div>
         </form>
-        {/* <PageMetadata metadata={vectorstore} taskType={taskType} formContainerHeight={formContainerHeight} /> */}
-        <AnsweringStatus answering={answering} />
         <PageMetadata metadata={vectorstore} taskType={taskType} />
       </div>
     </div>

src/pages/sidePanel/SidePanel.css

@@ -365,7 +365,7 @@
   /* Take the full width of the viewport */
   background: #282c34;
   /* Match the background of the .App */
-  padding: 20px;
+  /* padding: 20px; */
   /* Add some padding around the form */
 }
 
@@ -432,11 +432,6 @@
   z-index: 10;
 }
 
-.page-metadata-summary {
-  position: fixed;
-  padding: 10px;
-}
-
 .metadata-content {
   display: flex;
   align-items: center;
@@ -535,3 +530,17 @@
   border-radius: 4px !important;
   overflow-x: auto !important;
 }
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spin {
+  animation: spin 2s linear infinite;
+}