added: avatar, message colors, messages positioning

Author: MichaelTeida

src/assets/logo NeuraChatAi 100x100.png

@@ -1,15 +1,16 @@
-import {Box, Button, Card, CardContent, FormControl, Input as JoyInput, Sheet, Stack, Typography} from "@mui/joy";
+import {Box, Button, Card, FormControl, Input as JoyInput, Sheet, Stack, Typography, Avatar} from "@mui/joy";
 import EditIcon from "@mui/icons-material/Edit";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import {useEffect, useState, useRef} from "react";
 import {sendMessage} from "../lib/OpenAi.jsx";
+import NeuraChatLogoSquare from "../assets/logo NeuraChatAi 100x100.png"
 
 function Chat() {
     const [input, setInput] = useState("")
     const [output, setOutput] = useState("")
     const [messages, setMessages] = useState([{
         isHuman: false,
-        content: "Example text from NeuraChat",
+        content: "Hello, how can I help you?",
         timestamp: new Date(Date.now())
     }])
 
@@ -25,7 +26,7 @@ function Chat() {
     }, [output])
 
     useEffect(() => {
-        messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
+        messagesEndRef.current.scrollIntoView({behavior: "smooth"})
     }, [messages])
 
     const handleSend = async () => {
@@ -38,7 +39,7 @@ function Chat() {
     }
 
     const handleClick = async (event) => {
-        if(event.key === 'Enter') {
+        if (event.key === 'Enter') {
             event.preventDefault()
             await handleSend()
         }
@@ -50,26 +51,39 @@ function Chat() {
                 flex: 1,
                 minHeight: 0,
                 overflowY: 'scroll',
-                flexDirection: 'column',
+                backgroundColor: 'background.level1'
             }}>
                 {messages.map((el, index) => {
                     return (
-                        <Box key={index} sx={{maxWidth: {xs: 'auto', sm: "60%"}, minWidth: 'auto'}}>
-                            <Stack direction="row" justifyContent="space-between" spacing={2}>
-                                <Typography level="body-xs">
-                                    {el.isHuman ? "You" : "NeuraChat"}
-                                </Typography>
-                                <Typography level="body-xs">
-                                    {el.timestamp.getHours()}:{el.timestamp.getMinutes()}:{el.timestamp.getSeconds()}
-                                </Typography>
-                            </Stack>
-                            <Sheet variant="outlined"
-                                   sx={{p: 1, borderRadius: "sm", backgroundColor: "background.level1"}}>
-                                <Typography component="p" fontSize={{xs: "sm", sm: "md"}}
-                                            sx={{wordBreak: "break-word"}}>
-                                    {el.content}
-                                </Typography>
-                            </Sheet>
+                        <Box key={index} display="flex">
+                            {el.isHuman ? null : <Avatar alt="NeuraChat Avatar" src={NeuraChatLogoSquare} sx={{marginRight: 1, mt: 0.4}}/>}
+                            <Box display="flex" flexDirection="column" alignItems={el.isHuman ? "flex-end" : "flex-start"} width="100%">
+                                <Box sx={{width: {xs: 'auto', sm: "60%"}, minWidth: 'auto'}}>
+                                    <Stack direction="row" justifyContent="space-between" spacing={2}>
+                                        <Typography level="body-xs">
+                                            {el.isHuman ? "You" : "NeuraChat"}
+                                        </Typography>
+                                        <Typography level="body-xs">
+                                            {el.timestamp.getHours()}:{el.timestamp.getMinutes()}:{el.timestamp.getSeconds()}
+                                        </Typography>
+                                    </Stack>
+                                    <Sheet variant="outlined"
+                                           sx={{
+                                               p: 1,
+                                               borderRadius: "sm",
+                                               backgroundColor: el.isHuman ? "primary.500" : "primary.50",
+                                               "&:hover": {filter: "brightness(97%)"}
+                                           }}>
+                                        <Typography component="p" fontSize={{xs: "sm", sm: "md"}}
+                                                    sx={{
+                                                        color: el.isHuman ? "neutral.50" : "text.primary",
+                                                        wordBreak: "break-word"
+                                                    }}>
+                                            {el.content}
+                                        </Typography>
+                                    </Sheet>
+                                </Box>
+                            </Box>
                         </Box>
                     )
                 })}

src/components/Chat.jsx

@@ -7,15 +7,15 @@ const openai = new OpenAI({
 
 export async function sendMessage(message) {
     const params = {
-        model: 'gpt-3.5-turbo',
+        model: 'gpt-3.5-turbo-16k',
         temperature: 0.7, // how creative OpenAi should be (0 - 1)
-        max_tokens: 400,
+        max_tokens: 10000,
         frequency_penalty: 0.01, // parametr frequency_penalty pozwala sterować różnorodnością generowanego tekstu przez model GPT, modyfikując rozkład prawdopodobieństwa, aby rzadziej generować słowa, które model częściej widział podczas treningu.
         top_p: 1, // shrinks or grows the “pool” of available tokens to choose from, the domain to select over. 1=big pool, 0=small pool
     };
 
     const chatCompletion = await openai.chat.completions.create({
-        messages: [{"role": "user", "content": message}],
+        messages: [{"role": "system", "content": "You are NeuraChat, an AI chat system developed by Michael Teida."},{"role": "user", "content": message}],
         ...params
     })
 

src/lib/OpenAi.jsx

@@ -4,8 +4,6 @@ export function About() {
     return (
         <Card spacing={2} sx={{my: 2}}>
             <Box>About NeuraChatAi</Box>
-            <Box>About NeuraChatAi</Box>
-            <Box>About NeuraChatAi</Box>
         </Card>
     );
 }