JSFiddle - React, Tailwind, and code Playground

by Illusioner_

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
        <link href="styles.css" rel="stylesheet">
        <script defer src="fetch.js"></script>


        <title>ChatGPT</title>
    </head>
    <body>
        <!-- Contains whole page (grid container) -->
        <div id="page-container">
            <!-- Sidebar/Nav -->
            <nav id="nav-container">
                <!-- <div class="nav-item">Hi</div> -->
                <div id="button-div">
                    <div class="button-regular">
                         <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                        New Chat
                    </div>
                    <div class="button-regular" id="menu-toggle">
                         <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-white dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
                    </div>
                </div>
            </nav>

            <main...

CSS

#page-container {
    padding: 0px;
    margin : 0px;
    font-family : sans-serif;
    display : grid;
    grid-template-columns : 1.02fr 5fr;
    height : 100vh;
    color: white;
    z-index: -1;
}

#nav-container {
    /* Self grid properties */
    background-color : #202123;
}
#main-chat-container {
    /* Self grid properties */
     background-color : #353740;
    font-size : 18px;
    transform: translate3d(0,0,0);
}

#button-div {
    display : grid;
    grid-template-columns : 4fr 1fr;
    font-size : 18px;

}

.chat-text {
    background-color : #444654;
    color : #dee7f0;
    display : flex;
    justify-content : center;
    align-items : center;
    padding : 1rem;
    font-size : 1.12rem;
    font-weight : 100;
}
.chat-text-inside {
    width : 40%;
    display : grid;
    grid-template-columns : 1fr 5fr;
    justify-content : center;
    grid-gap : 1rem;
}
.user-text {
    display : flex;
    justify-content : center;
    align-items : center;
    padding : 1rem;
    font-size : 1.12rem;
    font-weight : 100;
}
.user-text-inside {
    width : 40%;
    display : grid;
    grid-template-columns : 1fr 5fr;
    justify-content : center;
    grid-gap : 1rem;
}

.flex {
    display : flex;
    justify-content : center;
    align-items : center;
    flex-direction : row;
}
.button-regular {
    padding : 0.7em;
    margin-top : 0.5em;
    margin-left : 0.3em;
    margin-right : 0.3em;
    font-size : 0.86em;
    font-weight : 540;
    border : solid 0.05em rgba(255, 255, 255, 0.2);
    border-radius : 0.375rem;
    cursor : pointer;
    transition: all 0.2s ease-in-out;
}

.button-regular:hover {
    background-color : #2b2c2f;
}
#menu-toggle2 {
    background-color : #353740;
    width : 2.5rem;
    padding-right : 1rem;
    position : fixed;
}

.logo-wrapper {
    display : block;
    width  : 35px;
    height : 35px;
    /* margin : 1rem; */
    padding : 0.2rem;
    background-color : #19c37d;
    border-radius : 3px;
}
.no-display {
    display :...

JavaScript

// const api_key = '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';
const api_key = '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';
const url = "https://api.openai.com/v1/chat/completions"

generate_request = (url, prompt) => {

        const request = new Request(url);

        const request_headers = new Headers({"Content-Type" : "application/json", "Authorization" : `Bearer ${api_key}`});

        let request_body =  {
            "model" : "gpt-3.5-turbo",
            "messages" : prompt,
            "temperature" : 0.5,
            "max_tokens" : 100

        }

        const request_params = {
            method : "POST",
            headers : request_headers,
            body : JSON.stringify(request_body)
        }
        return [request, request_params]
}
request = generate_request(url, prompt);

const get_data = async (request) => {
    try
    {
        let response = await fetch(request[0], request[1]);
        let data = await response.json();
        let chat_response = data.choices[0].message.content
        let user_message = request[1].body
        user_message = JSON.parse(user_message)
        user_message = user_message.messages[0].content
        try {
            messages = JSON.parse(localStorage.getItem("messages"))
            messages.push({role: "user", content : user_message}, {role: "assistant", content : chat_response})
            sessionStorage.setItem("messages", JSON.stringify(messages))
        }
        catch (error) {
            let messages = [{role: "user", content : user_message}, {role: "assistant", content : chat_response}]
            sessionStorage.setItem("messages", JSON.stringify(messages))
        }
        return chat_response;
    }
    catch (error)
    {
        throw new Error(error);
    }
}

// get_data(request)


const menuToggle = document.querySelector('#menu-toggle');
const menuToggle2 = document.querySelector('#menu-toggle2');
const nav = document.querySelector('#nav-container');
const...