Fix prompt overlaying on chats (#288)

resolves #287

frontend/src/components/DefaultChat/index.jsx

@@ -334,23 +334,23 @@ export default function DefaultChatContainer() {
       {isMobile && <SidebarMobileHeader />}
       {fetchedMessages.length === 0
         ? mockMsgs.map((content, i) => {
-          return <React.Fragment key={i}>{content}</React.Fragment>;
-        })
+            return <React.Fragment key={i}>{content}</React.Fragment>;
+          })
         : fetchedMessages.map((fetchedMessage, i) => {
-          return (
-            <React.Fragment key={i}>
-              <ChatBubble
-                message={
-                  fetchedMessage.user === ""
-                    ? fetchedMessage.response
-                    : fetchedMessage.user
-                }
-                type={fetchedMessage.user === "" ? "response" : "user"}
-                popMsg={popMsg}
-              />
-            </React.Fragment>
-          );
-        })}
+            return (
+              <React.Fragment key={i}>
+                <ChatBubble
+                  message={
+                    fetchedMessage.user === ""
+                      ? fetchedMessage.response
+                      : fetchedMessage.user
+                  }
+                  type={fetchedMessage.user === "" ? "response" : "user"}
+                  popMsg={popMsg}
+                />
+              </React.Fragment>
+            );
+          })}
       {showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />}
     </div>
   );

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx

@@ -8,11 +8,16 @@ import {
   AI_BACKGROUND_COLOR,
   USER_BACKGROUND_COLOR,
 } from "../../../../../utils/constants";
+import { v4 } from "uuid";
 
 const HistoricalMessage = forwardRef(
-  ({ message, role, workspace, sources = [], error = false }, ref) => {
+  (
+    { uuid = v4(), message, role, workspace, sources = [], error = false },
+    ref
+  ) => {
     return (
       <div
+        key={uuid}
         ref={ref}
         className={`flex justify-center items-end w-full ${
           role === "user" ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx

@@ -48,7 +48,7 @@ export default function ChatHistory({ history = [], workspace }) {
 
   return (
     <div
-      className="h-[89%] pb-[100px] pt-6 md:pt-0 md:pb-20 md:mx-0 overflow-y-scroll flex flex-col justify-start no-scroll"
+      className="h-full md:h-[83%] pb-[100px] pt-6 md:pt-0 md:pb-20 md:mx-0 overflow-y-scroll flex flex-col justify-start no-scroll"
       id="chat-history"
     >
       {history.map((props, index) => {