more updates on the UI for the chat

Author: taichan03

frontend/src/App.css

@@ -264,8 +264,6 @@ Error message. Please see ErrorMessages.tsx under components folder
 
 .thinking {
 
-  font-size: 16px;
-
   animation: ellipsis 1.5s infinite;
 }
 

frontend/src/pages/DrugSummary/DrugSummaryForm.tsx

@@ -188,17 +188,26 @@ const DrugSummaryForm = () => {
             </div>
           ) : (
             chatLog.map((message, index) => (
-              <div key={index} className="flex flex-col gap-4 p-3">
+              <div key={index} className="flex flex-col gap-4 p-2">
+                {message.type === "user" ? null : (
+                  <div className=" flex items-center justify-between">
+                    <div className="flex items-center">
+                      <span className="font-bold text-sm font-quicksand text-sky-950">
+                        Balancer
+                      </span>
+                    </div>
+                  </div>
+                )}
                 <div
-                  className={`${
+                  className={`flex ${
                     message.type === "user" ? "justify-end" : "justify-start"
-                  } `}
+                  }`}
                 >
                   <div
                     className={`${
                       message.type === "user"
-                        ? "border border-black text-sm font-quicksand"
-                        : "border bg-blue-50 bg-opacity-50 border-sky-400 text-sm font-quicksand "
+                        ? "border border-black text-sm font-quicksand shadow-md"
+                        : "border bg-blue-50 bg-opacity-50 border-sky-400 text-sm font-quicksand shadow-md"
                     } rounded-lg p-2 relative`}
                   >
                     {typeof message.message === "string" ? (
@@ -215,7 +224,9 @@ const DrugSummaryForm = () => {
                           message.message.llm_response.length === 0 && (
                             <div className="flex justify-start">
                               <div className="items-center justify-center p-1">
-                                <span className="thinking">Let me think</span>
+                                <span className="thinking  bg-blue-50 bg-opacity-50 text-sm font-quicksand">
+                                  Let me think
+                                </span>
                               </div>
                             </div>
                           )}
@@ -243,26 +254,33 @@ const DrugSummaryForm = () => {
             ))
           )}
         </div>
-        <form onSubmit={handleSubmit} className="p-3 font-quicksand mt-8">
-          <div className="relative flex items-center border border-sky-400  rounded-lg bg-white shadow-sm px-3 py-2">
-            <textarea
-              ref={textareaRef}
-              placeholder="Ask the document a question..."
-              className="w-full resize-none bg-transparent outline-none text-gray-700 placeholder-gray-400"
-              rows={1}
-              value={inputValue}
-              onChange={handleInputChange}
-              onKeyDown={handleKeyDown}
-              disabled={isStreaming}
-              style={{ height: `${inputHeight}px`, maxHeight: "150px" }}
-            />
-            <div className="absolute left-3 bottom-full mb-1 text-xs text-gray-500 flex items-center gap-2">
-              <span>Balancer 1.0</span>
-              <span>•</span>
-              <span>{inputValue.trim().split(/\s+/).length} words</span>
+        <div className="p-3 font-quicksand mt-8 bg-gray-100 rounded-2xl shadow-inner">
+          <form onSubmit={handleSubmit} className="space-y-2">
+            <div className="relative flex items-center border border-gray-300 rounded-xl bg-white shadow-sm px-4 py-3">
+              <textarea
+                ref={textareaRef}
+                placeholder="Ask the document a question..."
+                className="w-full resize-none bg-transparent outline-none text-sm font-quicksand placeholder-gray-500"
+                rows={1}
+                value={inputValue}
+                onChange={handleInputChange}
+                onKeyDown={handleKeyDown}
+                disabled={isStreaming}
+                style={{ height: `${inputHeight}px`, maxHeight: "150px" }}
+              />
             </div>
-          </div>
-        </form>
+
+            <div className="text-xs text-gray-500 flex items-center justify-between px-1">
+              <div className="flex items-center gap-2">
+                <span>Balancer 1.0</span>
+                <span>•</span>
+                <span>
+                  {inputValue.trim().split(/\s+/).filter(Boolean).length} words
+                </span>
+              </div>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );

frontend/src/pages/DrugSummary/PDFViewer.tsx

@@ -215,7 +215,7 @@ const PDFViewer = () => {
   return (
     <div
       ref={containerRef}
-      className="w-full h-full flex flex-col bg-white border-r border-gray-30"
+      className="w-full h-full flex flex-col bg-white border-r border-blue-200"
     >
       <div
         ref={headerRef}

frontend/src/pages/Layout/Layout_V2_Header.tsx

@@ -32,24 +32,27 @@ const Header: React.FC<LoginFormProps> = ({ isAuthenticated }) => {
   useAuth();
 
   return (
-    <header className="flex h-20 w-full items-center justify-between border-b border-gray-300 bg-white px-4 lg:px-8">
-      <nav className="flex flex-grow justify-center space-x-6 font-quicksand text-base text-lg font-semibold text-gray-500">
+    <header
+      className="flex  w-full items-center justify-between border-b border-blue-300 bg-white p-4 lg:px-8"
+      style={{ height: "43px", minHeight: "43px", maxHeight: "43px" }}
+    >
+      <div className="flex-grow"></div>
+      <nav className="flex items-center space-x-2 font-quicksand text-sm font-medium">
         <div className=" hover:border-emerald-600 hover:text-emerald-600 hover:no-underline space-x-4">
           <Link
             to="/"
-            className="text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
+            className="px-3 py-1.5 text-gray-700 bg-sky-100 rounded-md hover:bg-gray-200 hover:text-gray-900 transition-colors duration-200"
           >
             Home
           </Link>
           <Link
             to="/AdminPortal"
-            className="text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
+            className="px-3 py-1.5 text-gray-700 bg-sky-100 rounded-md hover:bg-gray-200 hover:text-gray-900 transition-colors duration-200"
           >
             Admin Portal
           </Link>
         </div>
       </nav>
-      {/* Add login menu logic here */}
       {!isAuthenticated && showLoginMenu && (
         <div className="flex w-1/6 flex-none justify-end">
           <LoginMenuDropDown

frontend/src/pages/Layout/Layout_V2_Sidebar.tsx

@@ -46,19 +46,21 @@ const Sidebar: React.FC = () => {
   const handleFileClick = (guid: string) => {
     const params = new URLSearchParams(location.search);
     const currentGuid = params.get("guid");
-    
+
     if (guid !== currentGuid) {
       navigate(`/drugsummary?guid=${guid}&page=1`);
     } else {
-      navigate(`/drugsummary?guid=${guid}${params.has("page") ? `&page=${params.get("page")}` : ""}`);
+      navigate(
+        `/drugsummary?guid=${guid}${params.has("page") ? `&page=${params.get("page")}` : ""}`
+      );
     }
   };
 
   return (
     <div
       className={`z-10 h-screen ${
         sidebarCollapsed ? "w-16" : "w-60"
-      } flex flex-col border-r border-gray-200 bg-white transition-all duration-300 ease-in-out`}
+      } flex flex-col border-r  border-blue-200 bg-white transition-all duration-300 ease-in-out`}
     >
       <div className="flex h-16 w-full items-center justify-between px-4">
         {!sidebarCollapsed && (
@@ -112,4 +114,4 @@ const Sidebar: React.FC = () => {
   );
 };
 
-export default Sidebar;
+export default Sidebar;