burkeholland/index.css

## index.css
/* sans-serf font for html and body */
html,
body {
  font-family: sans-serif;
}

.header {
  text-align: center;
  /* fixed to the top */
  position: fixed;
  top: 0;
  width: 100%;
  /* in front of everything else */
  z-index: 1;
}

.container {
  height: 100%;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  margin: auto;
}

.bottom {
  background: white;
  bottom: 0;
  padding-top: 4px;
  padding-bottom: 20px;
  position: fixed;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.conversation-wrapper {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.conversation {
  text-align: left;
  width: 500px;
}

.new-message {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.message-box {
  padding: 10px;
  max-height: 200px;
  height: 72px;
  overflow-y: hidden;
  width: 100%;
  max-width: 500px;
  border: 1px solid #d3d3d3;
  border-radius: 10px;
  resize: none;
}

.message {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  max-width: 85%;
}

.message.user {
  float: right;
  background-color: #479ef5;
  color: white;
}

.message.assistant {
  float: left;
  background-color: #e6e6e6;
  color: black;
}

.clearfix {
  overflow: auto;
}

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <header class="header">
      <h1>Burke GPT</h1>
    </header>
    <div class="container">
      <div class="conversation-wrapper">
        <div class="conversation" id="conversation"></div>
      </div>
      <div class="bottom">
        <div class="new-message">
          <textarea
            id="messageBox"
            class="message-box"
            placeholder="Ask me anything..."
          ></textarea>
        </div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

## index.js
const $ = document.querySelectorAll.bind(document);
const $$ = document.querySelector.bind(document);

const messageBox = $$("#messageBox");
const conversationWrapper = $$("#conversation");

let messages = [];
let message = {};

// handle the keyDown event on the messageBox element
messageBox.addEventListener("keydown", async (event) => {
  // if the key pressed was the enter key
  if (event.keyCode === 13) {
    event.preventDefault();

    // get the message from the messageBox
    const message = messageBox.value;

    // add it to the messages array
    messages.push({ role: "user", content: message });

    // add it to the conversation element
    conversation.appendChild(createMessageEl("user", message));

    // clear the messageBox
    messageBox.value = "";

    // call OpenAI and get the response
    const answer = await getGPTResponse(messages);

    // add the response to the conversation element
    conversation.appendChild(createMessageEl("assistant", answer));

    // add the response to the messages array
    messages.push({ role: "assistant", content: answer });
  }
});

function createMessageEl(role, message) {
  const messageElement = document.createElement("div");
  messageElement.classList.add("clearfix");

  const fragment = `<div class="message ${role}">${message}</div>`;

  messageElement.innerHTML = fragment;

  return messageElement;
}

// call OpenAI and get the response
async function getGPTResponse(messages) {
  let gptReq = {
    model: "gpt-3.5-turbo",
    messages: messages,
  };

  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization:
        "Bearer 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",
    },
    body: JSON.stringify(gptReq),
  });

  const json = await response.json();

  return json["choices"][0]["message"]["content"];
}
	/* sans-serf font for html and body */
	html,
	body {
	font-family: sans-serif;
	}

	.header {
	text-align: center;
	/* fixed to the top */
	position: fixed;
	top: 0;
	width: 100%;
	/* in front of everything else */
	z-index: 1;
	}

	.container {
	height: 100%;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	margin: auto;
	}

	.bottom {
	background: white;
	bottom: 0;
	padding-top: 4px;
	padding-bottom: 20px;
	position: fixed;
	left: 0;
	width: 100%;
	overflow: hidden;
	}

	.conversation-wrapper {
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	.conversation {
	text-align: left;
	width: 500px;
	}

	.new-message {
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	.message-box {
	padding: 10px;
	max-height: 200px;
	height: 72px;
	overflow-y: hidden;
	width: 100%;
	max-width: 500px;
	border: 1px solid #d3d3d3;
	border-radius: 10px;
	resize: none;
	}

	.message {
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	max-width: 85%;
	}

	.message.user {
	float: right;
	background-color: #479ef5;
	color: white;
	}

	.message.assistant {
	float: left;
	background-color: #e6e6e6;
	color: black;
	}

	.clearfix {
	overflow: auto;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="index.css" />
	<title>Document</title>
	<style></style>
	</head>
	<body>
	<header class="header">
	<h1>Burke GPT</h1>
	</header>
	<div class="container">
	<div class="conversation-wrapper">
	<div class="conversation" id="conversation"></div>
	</div>
	<div class="bottom">
	<div class="new-message">
	<textarea
	id="messageBox"
	class="message-box"
	placeholder="Ask me anything..."
	></textarea>
	</div>
	</div>
	</div>
	<script src="index.js"></script>
	</body>
	</html>
	const $ = document.querySelectorAll.bind(document);
	const $$ = document.querySelector.bind(document);

	const messageBox = $$("#messageBox");
	const conversationWrapper = $$("#conversation");

	let messages = [];
	let message = {};

	// handle the keyDown event on the messageBox element
	messageBox.addEventListener("keydown", async (event) => {
	// if the key pressed was the enter key
	if (event.keyCode === 13) {
	event.preventDefault();

	// get the message from the messageBox
	const message = messageBox.value;

	// add it to the messages array
	messages.push({ role: "user", content: message });

	// add it to the conversation element
	conversation.appendChild(createMessageEl("user", message));

	// clear the messageBox
	messageBox.value = "";

	// call OpenAI and get the response
	const answer = await getGPTResponse(messages);

	// add the response to the conversation element
	conversation.appendChild(createMessageEl("assistant", answer));

	// add the response to the messages array
	messages.push({ role: "assistant", content: answer });
	}
	});

	function createMessageEl(role, message) {
	const messageElement = document.createElement("div");
	messageElement.classList.add("clearfix");

	const fragment = `<div class="message ${role}">${message}</div>`;

	messageElement.innerHTML = fragment;

	return messageElement;
	}

	// call OpenAI and get the response
	async function getGPTResponse(messages) {
	let gptReq = {
	model: "gpt-3.5-turbo",
	messages: messages,
	};

	const response = await fetch("https://api.openai.com/v1/chat/completions", {
	method: "POST",
	headers: {
	"Content-Type": "application/json",
	Authorization:
	"Bearer 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",
	},
	body: JSON.stringify(gptReq),
	});

	const json = await response.json();

	return json["choices"][0]["message"]["content"];
	}