From 9d72f78f38e488c2b09482842a0a9bd09e1ed986 Mon Sep 17 00:00:00 2001 From: durulkoca Date: Fri, 22 Mar 2024 15:23:27 +0900 Subject: [PATCH 1/9] Adjust styles of ChatDisplay and Message Input for responsive design --- src/widgets/Chat/ChatDisplay.jsx | 39 ++++++++++++++++++++++--------- src/widgets/Chat/MessageInput.jsx | 4 ++-- 2 files changed, 30 insertions(+), 13 deletions(-) diff --git a/src/widgets/Chat/ChatDisplay.jsx b/src/widgets/Chat/ChatDisplay.jsx index 4ca596dc..b47942bc 100644 --- a/src/widgets/Chat/ChatDisplay.jsx +++ b/src/widgets/Chat/ChatDisplay.jsx @@ -9,6 +9,7 @@ import { Dialog, DialogContent, DialogTitle, + Grid, useTheme, } from "@mui/material"; import React, { useEffect, useRef, useState } from "react"; @@ -72,11 +73,16 @@ const ChatDisplay = ({ sx={{ overflow: "auto", flex: 1, - padding: "20px", display: "flex", flexDirection: "column", alignItems: "center", backgroundColor: theme.palette.background.paper, + paddingX: { + xs: "8px", + sm: "16px", + md: "20px", + }, + paddingY: "20px", }} ref={messagesContainerRef} onScroll={handleScroll} @@ -98,25 +104,36 @@ const ChatDisplay = ({ /> + Code Analysis diff --git a/src/widgets/Chat/MessageInput.jsx b/src/widgets/Chat/MessageInput.jsx index 275290ca..8b6152b0 100644 --- a/src/widgets/Chat/MessageInput.jsx +++ b/src/widgets/Chat/MessageInput.jsx @@ -4,6 +4,7 @@ import codeImage from "../../images/code.png"; import { Box, Fab, + Grid, IconButton, TextField, Tooltip, @@ -74,7 +75,7 @@ const MessageInput = forwardRef((props, ref) => { display: "flex", alignItems: "center", justifyContent: "center", - width: "70%", + width: { xs: "100%", sm: "90%", md: "80%" }, borderRadius: theme.custom.chat.inputBorderRadius, padding: "10px", border: `1px solid `, @@ -117,7 +118,6 @@ const MessageInput = forwardRef((props, ref) => { onMouseEnter={handleHover} sx={{ backgroundColor: theme.palette.grey[600], - animation: playAnimation ? "pulseAnimationWithColor 2s infinite" : "none", From 81b0f2710c19513bd4a8227bf8e5dfc43abcb455 Mon Sep 17 00:00:00 2001 From: durulkoca Date: Fri, 22 Mar 2024 15:23:44 +0900 Subject: [PATCH 2/9] Update messagebox and errormessage for responsive --- src/widgets/Chat/components/ErrorMessage.jsx | 23 ++++++++++---------- src/widgets/Chat/components/MessageBox.jsx | 19 ++++++++++------ 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/src/widgets/Chat/components/ErrorMessage.jsx b/src/widgets/Chat/components/ErrorMessage.jsx index b2b05ef8..4de816a1 100644 --- a/src/widgets/Chat/components/ErrorMessage.jsx +++ b/src/widgets/Chat/components/ErrorMessage.jsx @@ -9,8 +9,16 @@ const ErrorMessage = ({ show, content, type, refreshChat }) => { sx={{ backgroundColor: alpha("#f44336", 0.1), border: "1px solid #f44336", - width: "60%", - marginBottom: "20px", + width: { + xs: "100%", + sm: "90%", + md: "80%", + }, + marginBottom: { + xs: "12px", + sm: "16px", + md: "20px", + }, padding: "10px", borderRadius: "10px", textAlign: "left", @@ -31,10 +39,7 @@ const ErrorMessage = ({ show, content, type, refreshChat }) => { > EXPERT ERROR @@ -51,11 +56,7 @@ const ErrorMessage = ({ show, content, type, refreshChat }) => { {type} diff --git a/src/widgets/Chat/components/MessageBox.jsx b/src/widgets/Chat/components/MessageBox.jsx index 202ca6f9..61869145 100644 --- a/src/widgets/Chat/components/MessageBox.jsx +++ b/src/widgets/Chat/components/MessageBox.jsx @@ -12,11 +12,20 @@ function MessageBox({ if (onlyUser) { message.content = currentMessage; } + return ( {message.role} From 50ffdf28960f042e80c9a1d5536a718c1654e87c Mon Sep 17 00:00:00 2001 From: durulkoca Date: Fri, 22 Mar 2024 15:24:05 +0900 Subject: [PATCH 3/9] Add new case for mobile screens to ChatMenu --- src/widgets/ChatMenu/ChatMenu.jsx | 69 ++++++++++++++++++++++++++++++- 1 file changed, 67 insertions(+), 2 deletions(-) diff --git a/src/widgets/ChatMenu/ChatMenu.jsx b/src/widgets/ChatMenu/ChatMenu.jsx index 8cc4441b..daead200 100644 --- a/src/widgets/ChatMenu/ChatMenu.jsx +++ b/src/widgets/ChatMenu/ChatMenu.jsx @@ -9,7 +9,8 @@ import SmallLogo from "../../components/SmallLogo"; import { drawerWidth } from "../../config"; import { useNavigate } from "react-router-dom"; import { useTheme } from "@mui/material/styles"; -import { ArrowForwardIos, DensityMedium } from "@mui/icons-material/"; + +import { ArrowForwardIos, DensityMedium, Menu } from "@mui/icons-material/"; import { Box, Button, @@ -26,13 +27,77 @@ function ChatMenu(props) { const [openMd, setOpenMd] = React.useState(false); const [openLg, setOpenLg] = React.useState(true); const matchDownMD = useMediaQuery(theme.breakpoints.down("lg")); + const matchDownSM = useMediaQuery(theme.breakpoints.down("sm")); const handleCreateNewChat = () => navigate("/chat"); const handleClose = () => setOpenMd(false); return ( - {matchDownMD ? ( + {matchDownSM ? ( + <> + setOpenMd(true)} + sx={{ position: "fixed", top: 16, left: 16, zIndex: 1200 }} + > + + + + + + + setOpenMd(false)} + > + + + +
+ + + + + + + + + + + + + ) : matchDownMD ? ( <> {!openMd && ( Date: Mon, 25 Mar 2024 14:01:37 +0900 Subject: [PATCH 4/9] Remove unused imports --- src/widgets/Chat/ChatDisplay.jsx | 1 - src/widgets/Chat/MessageInput.jsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/widgets/Chat/ChatDisplay.jsx b/src/widgets/Chat/ChatDisplay.jsx index b47942bc..25afea8b 100644 --- a/src/widgets/Chat/ChatDisplay.jsx +++ b/src/widgets/Chat/ChatDisplay.jsx @@ -9,7 +9,6 @@ import { Dialog, DialogContent, DialogTitle, - Grid, useTheme, } from "@mui/material"; import React, { useEffect, useRef, useState } from "react"; diff --git a/src/widgets/Chat/MessageInput.jsx b/src/widgets/Chat/MessageInput.jsx index 8b6152b0..6cd9c61b 100644 --- a/src/widgets/Chat/MessageInput.jsx +++ b/src/widgets/Chat/MessageInput.jsx @@ -4,7 +4,6 @@ import codeImage from "../../images/code.png"; import { Box, Fab, - Grid, IconButton, TextField, Tooltip, From 590c7b616c4ea69396ae26e3a2788e5a6bed0aa7 Mon Sep 17 00:00:00 2001 From: durulkoca Date: Thu, 28 Mar 2024 15:06:44 +0900 Subject: [PATCH 5/9] Add welcome message to chat --- src/widgets/Chat/ChatDisplay.jsx | 48 +++++++++++-------- .../Chat/components/WelcomeMessage.jsx | 35 ++++++++++++++ 2 files changed, 63 insertions(+), 20 deletions(-) create mode 100644 src/widgets/Chat/components/WelcomeMessage.jsx diff --git a/src/widgets/Chat/ChatDisplay.jsx b/src/widgets/Chat/ChatDisplay.jsx index 25afea8b..dc7b6461 100644 --- a/src/widgets/Chat/ChatDisplay.jsx +++ b/src/widgets/Chat/ChatDisplay.jsx @@ -1,6 +1,8 @@ import ChatEditor from "./ChatEditor"; import ErrorMessage from "./components/ErrorMessage"; +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import MessageBox from "./components/MessageBox"; +import WelcomeMessage from "./components/WelcomeMessage"; import { Box, @@ -9,6 +11,7 @@ import { Dialog, DialogContent, DialogTitle, + Fab, useTheme, } from "@mui/material"; import React, { useEffect, useRef, useState } from "react"; @@ -51,7 +54,10 @@ const ChatDisplay = ({ "scrollToBottomButton" ); if (scrollToBottomButton) { - scrollToBottomButton.style.display = atBottom ? "none" : "block"; + scrollToBottomButton.style.display = + atBottom || window.innerWidth < 960 || chat.messages.length === 0 + ? "none" + : "block"; } } }; @@ -86,14 +92,18 @@ const ChatDisplay = ({ ref={messagesContainerRef} onScroll={handleScroll} > - {chat && + {chat && chat.messages.length === 0 ? ( + + ) : ( + chat && chat.messages.map((message, index) => ( - ))} + )) + )} {loading && } - + + { + return ( + + + + + + Welcome to the NucChat! + + This is subtitle + + ); +}; + +export default WelcomeMessage; From 1be70708940e3855f25c5473693820e7e106175b Mon Sep 17 00:00:00 2001 From: durulkoca Date: Thu, 28 Mar 2024 23:13:16 +0900 Subject: [PATCH 6/9] Change convert project icon --- src/widgets/Chat/ChatMainArea.css | 4 ++++ src/widgets/Chat/MessageInput.jsx | 14 ++++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/widgets/Chat/ChatMainArea.css b/src/widgets/Chat/ChatMainArea.css index c073b746..0b4a546c 100644 --- a/src/widgets/Chat/ChatMainArea.css +++ b/src/widgets/Chat/ChatMainArea.css @@ -12,3 +12,7 @@ background-color: initial; } } + +.pulse-animation { + animation: pulseAnimationWithColor 1s ease-in-out; +} diff --git a/src/widgets/Chat/MessageInput.jsx b/src/widgets/Chat/MessageInput.jsx index 6cd9c61b..929cca5f 100644 --- a/src/widgets/Chat/MessageInput.jsx +++ b/src/widgets/Chat/MessageInput.jsx @@ -1,9 +1,8 @@ +import CodeIcon from "@mui/icons-material/Code"; import SendIcon from "@mui/icons-material/Send"; -import codeImage from "../../images/code.png"; import { Box, - Fab, IconButton, TextField, Tooltip, @@ -110,20 +109,19 @@ const MessageInput = forwardRef((props, ref) => { } placement="top" > - - {"Code"} - + + )} Date: Thu, 28 Mar 2024 23:17:13 +0900 Subject: [PATCH 7/9] Change convert project button animation logic --- src/widgets/Chat/ChatMainArea.css | 2 +- src/widgets/Chat/MessageInput.jsx | 29 +++++++++++++++-------------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/src/widgets/Chat/ChatMainArea.css b/src/widgets/Chat/ChatMainArea.css index 0b4a546c..67a5a5c4 100644 --- a/src/widgets/Chat/ChatMainArea.css +++ b/src/widgets/Chat/ChatMainArea.css @@ -14,5 +14,5 @@ } .pulse-animation { - animation: pulseAnimationWithColor 1s ease-in-out; + animation: pulseAnimationWithColor 2s ease-in-out; } diff --git a/src/widgets/Chat/MessageInput.jsx b/src/widgets/Chat/MessageInput.jsx index 929cca5f..17e33b65 100644 --- a/src/widgets/Chat/MessageInput.jsx +++ b/src/widgets/Chat/MessageInput.jsx @@ -11,6 +11,7 @@ import { } from "@mui/material"; import React, { forwardRef, + useEffect, useImperativeHandle, useRef, useState, @@ -21,14 +22,19 @@ const MessageInput = forwardRef((props, ref) => { const { loading } = props; const theme = useTheme(); const [showProjectIcon, setShowProjectIcon] = useState(false); - const [playAnimation, setPlayAnimation] = useState(true); + const [isAnimating, setIsAnimating] = useState(false); const [isInputEmpty, setIsInputEmpty] = useState(true); - const inputRef = useRef(null); - const handleHover = () => { - setPlayAnimation(false); - }; + useEffect(() => { + if (showProjectIcon) { + setIsAnimating(true); + const timer = setTimeout(() => { + setIsAnimating(false); + }, 2000); + return () => clearTimeout(timer); + } + }, [showProjectIcon]); useImperativeHandle(ref, () => ({ getValue: () => inputRef.current.value, @@ -49,7 +55,6 @@ const MessageInput = forwardRef((props, ref) => { const onSend = (event) => { event.preventDefault(); - handleSendMessage(); }; @@ -76,7 +81,7 @@ const MessageInput = forwardRef((props, ref) => { width: { xs: "100%", sm: "90%", md: "80%" }, borderRadius: theme.custom.chat.inputBorderRadius, padding: "10px", - border: `1px solid `, + border: `1px solid`, borderColor: theme.palette.grey[500], backgroundColor: theme.palette.background.default, }} @@ -112,13 +117,8 @@ const MessageInput = forwardRef((props, ref) => { @@ -135,4 +135,5 @@ const MessageInput = forwardRef((props, ref) => { ); }); + export default MessageInput; From 738f6e3237104268b1a4fc166679d18c2092f893 Mon Sep 17 00:00:00 2001 From: durulkoca Date: Thu, 28 Mar 2024 23:37:32 +0900 Subject: [PATCH 8/9] Update scroll button styling using variants --- src/theme.js | 29 +++++++++++++++ src/widgets/Chat/ChatDisplay.jsx | 63 ++++++++++++++------------------ 2 files changed, 56 insertions(+), 36 deletions(-) diff --git a/src/theme.js b/src/theme.js index 76a3af59..804cbea7 100644 --- a/src/theme.js +++ b/src/theme.js @@ -263,6 +263,20 @@ const lightTheme = createTheme({ ...(props.type === "mic" && props.activate ? micAnimation : {}), }), }, + { + props: { variant: "transparent" }, + style: { + backgroundColor: alpha(base.grey[300], 0.8), + color: base.grey[900], + "&:hover": { + backgroundColor: alpha(base.grey[700], 0.8), + color: base.grey[200], + }, + "&:disabled": { + color: base.grey[700], + }, + }, + }, ], styleOverrides: { root: { @@ -539,6 +553,21 @@ const darkTheme = createTheme({ ...(props.type === "mic" && props.activate ? micAnimation : {}), }), }, + { + props: { variant: "transparent" }, + style: { + backgroundColor: alpha(base.grey[900], 0.8), + color: base.grey[400], + "&:hover": { + backgroundColor: alpha(base.grey[400], 0.8), + color: base.grey[900], + }, + "&.Mui-disabled": { + backgroundColor: base.grey[900], + color: base.grey[700], + }, + }, + }, ], styleOverrides: { root: { diff --git a/src/widgets/Chat/ChatDisplay.jsx b/src/widgets/Chat/ChatDisplay.jsx index dc7b6461..06e1581e 100644 --- a/src/widgets/Chat/ChatDisplay.jsx +++ b/src/widgets/Chat/ChatDisplay.jsx @@ -26,6 +26,8 @@ const ChatDisplay = ({ const theme = useTheme(); const [openDialog, setOpenDialog] = useState(false); const [selectedCode, setSelectedCode] = useState(""); + const [showScrollToBottomButton, setShowScrollToBottomButton] = + useState(false); const messagesContainerRef = useRef(null); const handleOpenDialog = (code) => { @@ -49,16 +51,9 @@ const ChatDisplay = ({ const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current; const atBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 1; - - const scrollToBottomButton = document.getElementById( - "scrollToBottomButton" + setShowScrollToBottomButton( + !atBottom && window.innerWidth >= 960 && chat.messages.length > 0 ); - if (scrollToBottomButton) { - scrollToBottomButton.style.display = - atBottom || window.innerWidth < 960 || chat.messages.length === 0 - ? "none" - : "block"; - } } }; @@ -82,11 +77,7 @@ const ChatDisplay = ({ flexDirection: "column", alignItems: "center", backgroundColor: theme.palette.background.paper, - paddingX: { - xs: "8px", - sm: "16px", - md: "20px", - }, + paddingX: { xs: "8px", sm: "16px", md: "20px" }, paddingY: "20px", }} ref={messagesContainerRef} @@ -111,30 +102,29 @@ const ChatDisplay = ({ type={error.type} refreshChat={refreshChat} /> - - *": { + {showScrollToBottomButton && ( + - - - + transform: "translateX(-50%)", + zIndex: 1, + display: { xs: "none", md: "block" }, + "& > *": { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + }, + }} + > + + + )} ); }; + export default ChatDisplay; From c91fb6ec5b727247f06f61aff631978c4f2c3ab8 Mon Sep 17 00:00:00 2001 From: durulkoca Date: Thu, 28 Mar 2024 23:42:51 +0900 Subject: [PATCH 9/9] Update ChatDisplay.jsx --- src/widgets/Chat/ChatDisplay.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/widgets/Chat/ChatDisplay.jsx b/src/widgets/Chat/ChatDisplay.jsx index 06e1581e..c44f7fc4 100644 --- a/src/widgets/Chat/ChatDisplay.jsx +++ b/src/widgets/Chat/ChatDisplay.jsx @@ -125,7 +125,7 @@ const ChatDisplay = ({ )} - + {loading && }