diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx index 36a27c18ba1350d466d0cfed916be28847815fc0..bfd0fbdc6d8347a8ee0bf5ddddd0836d0a473e4a 100644 --- a/frontend/src/components/DefaultChat/index.jsx +++ b/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> ); diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx index 8759a2ce7ffdb3cac8afa4caa66abeeb8423a4be..02e31e39925c198219fa16b5cbedd857ecc1913f 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx +++ b/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 diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx index e420fb3134b66a0b57eb5613aefec2b5f91cf1a5..e684d237a91eabce23ea8e3d2257b439ec4eddd6 100644 --- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx +++ b/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) => {