main Component page for Website chat assistant

App.js

import './App.css';
import {
    Container,
    Row,
    Col,
    Button,
    CloseButton,
    FormControl,
    InputGroup,
    ListGroup,
} from "react-bootstrap";

import React, { useState } from "react";

function App() {
    //this controls the chat window visibility state (true/false)
    const [showChat, setShowChat] = useState(false);

    //this controls the chat window closing animation state (true/false)
    const [isClosing, setIsClosing] = useState(false);

    const [messages, setMessages] = useState([]); //this array stores the messages
    const [currentMessage, setCurrentMessage] = useState(""); //this variable stores the current message

    const messagesEndRef = React.useRef(null); //this is a reference to the end of the messages list

    React.useEffect(() => { //this effect is called when the messages array is updated
        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
    }, [messages]);


    const closeChat = () => { //this function is called when the close button is clicked
        setIsClosing(true);
        setTimeout(() => setShowChat(false), 500);
    }

    const openChat = () => { //this function is called when the open button is clicked
        setIsClosing(false);
        setShowChat(true);
    }

    const submitMessage = () => {
        const userMessage = currentMessage;
        setMessages([...messages, `User: ${userMessage}`]);
        setCurrentMessage("");

        fetch('https://api.openai.com/v1/engines/text-davinci-003/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer YOUR-API-KEY'
            },
            body: JSON.stringify({
                "prompt": `The assistant is supposed to help you.\nUser: ${userMessage}\nAssistant:`,
                "max_tokens": 2000,
                "temperature": 0.3,
            })
        })
            .then(response => response.json())
            .then(data => {
                if (data.choices && data.choices.length > 0) {
                    const aiMessage = data.choices[0].text.trim();
                    setMessages(prevMessages => [...prevMessages, `AI: ${aiMessage}`]);
                } else {
                    console.error('No choices in response:', data);
                }
            })
            .catch(error => console.error('Error:', error));
    }

    const sendMessage = (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();  // prevent the default action (form submission)
            submitMessage();
        }
    }


    return (
        <Container fluid className="d-flex flex-column justify-content-end vh-100 bg-light">

            {!showChat && (
                <Row className="align-self-end">
                    <Col sm={12} md={12} lg={12}>
                        <Button variant="outline-dark" onClick={openChat}>Chat Assistant 💬</Button>
                    </Col>
                </Row>
            )}

            {showChat && (
                <Row className={`align-self-end position-absolute bottom-0 ${isClosing ? "fade-out" : "slide-up"}`}>
                    <Col sm={12} md={12} lg={12}>

                        <Container style={{ width: "auto", height: "auto" }} className="border rounded p-3 mt-3">

                            <Row className="mb-3">
                                <Col><h5>Title of the Container</h5></Col>
                                <Col xs={2} className="d-flex justify-content-end">
                                    <CloseButton
                                        onClick={closeChat} /> {/*this button toggles the chat window visibility state*/}
                                </Col>
                            </Row>

                            <Row className="mb-3">
                                <Col>
                                    <div style={{ height: '20vh', overflowY: 'auto' }}>
                                        {messages.map((message, index) => (
                                            <ListGroup.Item variant="dark" key={index}
                                                className="text-dark rounded text-muted fs-4 my-2">{message}</ListGroup.Item>
                                        ))}
                                        <div ref={messagesEndRef} />
                                        {/*this is a reference to the end of the messages list*/}
                                    </div>
                                </Col>
                            </Row>

                            <hr className="my-separator" />
                            <Row className="mb-3 flex-grow-1">
                                <Col sm={10} md={10} lg={10}>
                                    <InputGroup className="mb-3">
                                        <FormControl
                                            onKeyDown={(e) => sendMessage(e)}
                                            placeholder="Type your message here..."
                                            value={currentMessage}
                                            onChange={(e) => setCurrentMessage(e.target.value)}
                                        /></InputGroup>
                                </Col>
                                <Col sm={2} md={2} lg={2}>
                                    <InputGroup>
                                        <Button onClick={submitMessage} variant="outline-secondary">⇨</Button>
                                    </InputGroup>
                                </Col>
                            </Row>

                            <hr className="my-separator" />
                            <Row>
                                <Col>Footer of Container</Col>
                            </Row>

                        </Container>
                    </Col>
                </Row>)}

        </Container>
    );
}

export default App;