microservices are able to run (#5)

chat_gpt_microservice/client/css/button.css

@@ -0,0 +1,26 @@
+.button {
+	display: flex;
+	padding: 8px 12px;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid var(--conversations);
+	border-radius: var(--border-radius-1);
+	width: 100%;
+	background: transparent;
+	cursor: pointer;
+}
+
+.button span {
+	color: var(--colour-3);
+	font-size: 0.875rem;
+}
+
+.button i::before {
+	margin-right: 8px;
+}
+
+@media screen and (max-width: 990px) {
+	.button span {
+		font-size: 0.75rem;
+	}
+}

chat_gpt_microservice/client/css/buttons.css

@@ -0,0 +1,4 @@
+.buttons {
+	display: flex;
+	justify-content: left;
+}

chat_gpt_microservice/client/css/checkbox.css

@@ -0,0 +1,55 @@
+.checkbox input {
+	height: 0;
+	width: 0;
+	display: none;
+}
+
+.checkbox span {
+	font-size: 0.875rem;
+	color: var(--colour-2);
+	margin-left: 4px;
+}
+
+.checkbox label:after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left: 5px;
+	width: 20px;
+	height: 20px;
+	background: var(--blur-border);
+	border-radius: 90px;
+	transition: 0.33s;
+}
+
+.checkbox input + label:after,
+.checkbox input:checked + label {
+	background: var(--colour-3);
+}
+
+.checkbox input + label,
+.checkbox input:checked + label:after {
+	background: var(--blur-border);
+}
+
+.checkbox input:checked + label:after {
+	left: calc(100% - 5px - 20px);
+}
+
+@media screen and (max-width: 990px) {
+	.checkbox label {
+		width: 25px;
+		height: 15px;
+	}
+
+	.checkbox label:after {
+		left: 2px;
+		width: 10px;
+		height: 10px;
+	}
+
+	.checkbox input:checked + label:after {
+		left: calc(100% - 2px - 10px);
+	}
+}

chat_gpt_microservice/client/css/conversation.css

@@ -0,0 +1,158 @@
+.conversation {
+	width: 60%;
+	margin: 0px 16px;
+	display: flex;
+	flex-direction: column;
+}
+
+.conversation #messages {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+	overflow-wrap: break-word;
+	padding-bottom: 8px;
+}
+
+.conversation .user-input {
+	max-height: 180px;
+	margin: 16px 0px;
+}
+
+.conversation .user-input input {
+	font-size: 1rem;
+	background: none;
+	border: none;
+	outline: none;
+	color: var(--colour-3);
+}
+
+.conversation .user-input input::placeholder {
+	color: var(--user-input);
+}
+
+.conversation-title {
+	color: var(--colour-3);
+	font-size: 14px;
+}
+
+.conversation .user-input textarea {
+	font-size: 1rem;
+	width: 100%;
+	height: 100%;
+	padding: 12px;
+	background: none;
+	border: none;
+	outline: none;
+	color: var(--colour-3);
+	resize: vertical;
+	max-height: 150px;
+	min-height: 80px;
+}
+
+.box {
+	backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
+	background-color: var(--blur-bg);
+	height: 100%;
+	width: 100%;
+	border-radius: var(--border-radius-1);
+	border: 1px solid var(--blur-border);
+}
+
+.box.input-box {
+	position: relative;
+	align-items: center;
+	padding: 8px;
+	cursor: pointer;
+}
+
+#send-button {
+	position: absolute;
+	bottom: 25%;
+	right: 10px;
+	z-index: 1;
+	padding: 16px;
+}
+
+#cursor {
+	line-height: 17px;
+	margin-left: 3px;
+	-webkit-animation: blink 0.8s infinite;
+	animation: blink 0.8s infinite;
+	width: 7px;
+	height: 15px;
+}
+
+@keyframes blink {
+	0% {
+		background: #ffffff00;
+	}
+
+	50% {
+		background: white;
+	}
+
+	100% {
+		background: #ffffff00;
+	}
+}
+
+@-webkit-keyframes blink {
+	0% {
+		background: #ffffff00;
+	}
+
+	50% {
+		background: white;
+	}
+
+	100% {
+		background: #ffffff00;
+	}
+}
+
+/* scrollbar */
+.conversation #messages::-webkit-scrollbar {
+	width: 4px;
+	padding: 8px 0px;
+}
+
+.conversation #messages::-webkit-scrollbar-track {
+	background-color: #ffffff00;
+}
+
+.conversation #messages::-webkit-scrollbar-thumb {
+	background-color: #555555;
+	border-radius: 10px;
+}
+
+@media screen and (max-width: 990px) {
+	.conversation {
+		width: 100%;
+		height: 90%;
+	}
+}
+
+@media screen and (max-height: 720px) {
+	.conversation.box {
+		height: 70%;
+	}
+
+	.conversation .user-input textarea {
+		font-size: 0.875rem;
+	}
+}
+
+@media screen and (max-width: 360px) {
+	.box {
+		border-radius: 0;
+	}
+	.conversation {
+		margin: 0;
+		margin-top: 48px;
+	}
+	.conversation .user-input {
+		margin: 2px 0 8px 0;
+	}
+}

chat_gpt_microservice/client/css/dropdown.css

@@ -0,0 +1,10 @@
+.dropdown {
+	border: 1px solid var(--conversations);
+}
+
+@media screen and (max-width: 990px) {
+	.dropdown {
+		padding: 4px 8px;
+		font-size: 0.75rem;
+	}
+}

chat_gpt_microservice/client/css/field.css

@@ -0,0 +1,11 @@
+.field {
+	display: flex;
+	align-items: center;
+	padding: 4px;
+}
+
+@media screen and (max-width: 990px) {
+	.field {
+		flex-wrap: nowrap;
+	}
+}

chat_gpt_microservice/client/css/global.css

@@ -0,0 +1,70 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+* {
+	--font-1: "Inter", sans-serif;
+	--section-gap: 24px;
+	--border-radius-1: 8px;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	position: relative;
+	font-family: var(--font-1);
+}
+
+.theme-light {
+	--colour-1: #f5f5f5;
+	--colour-2: #000000;
+	--colour-3: #474747;
+	--colour-4: #949494;
+	--colour-5: #ebebeb;
+	--colour-6: #dadada;
+
+	--accent: #3a3a3a;
+	--blur-bg: #ffffff;
+	--blur-border: #dbdbdb;
+	--user-input: #282828;
+	--conversations: #666666;
+}
+
+.theme-dark {
+	--colour-1: #181818;
+	--colour-2: #ccc;
+	--colour-3: #dadada;
+	--colour-4: #f0f0f0;
+	--colour-5: #181818;
+	--colour-6: #242424;
+
+	--accent: #151718;
+	--blur-bg: #242627;
+	--blur-border: #242627;
+	--user-input: #f5f5f5;
+	--conversations: #555555;
+}
+
+html,
+body {
+	background: var(--colour-1);
+	color: var(--colour-3);
+}
+
+ol,
+ul {
+	padding-left: 20px;
+}
+
+.shown {
+	display: flex !important;
+}
+
+a:-webkit-any-link {
+	color: var(--accent);
+}
+
+pre {
+	white-space: pre-wrap;
+}
+
+@media screen and (max-height: 720px) {
+	:root {
+		--section-gap: 16px;
+	}
+}

chat_gpt_microservice/client/css/hljs.css

@@ -0,0 +1,68 @@
+.hljs {
+	color: #e9e9f4;
+	background: #28293629;
+	border-radius: var(--border-radius-1);
+	border: 1px solid var(--blur-border);
+	font-size: 15px;
+	word-wrap: break-word;
+	white-space: pre-wrap;
+}
+
+/* style for hljs copy */
+.hljs-copy-wrapper {
+	position: relative;
+	overflow: hidden;
+}
+
+.hljs-copy-wrapper:hover .hljs-copy-button,
+.hljs-copy-button:focus {
+	transform: translateX(0);
+}
+
+.hljs-copy-button {
+	position: absolute;
+	transform: translateX(calc(100% + 1.125em));
+	top: 1em;
+	right: 1em;
+	width: 2rem;
+	height: 2rem;
+	text-indent: -9999px;
+	color: #fff;
+	border-radius: 0.25rem;
+	border: 1px solid #ffffff22;
+	background-color: #2d2b57;
+	background-image: url('data:image/svg+xml;utf-8,<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 1.89543 7.89543 1 9 1H15C16.1046 1 17 1.89543 17 3V5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5V3ZM15 3H9V5H15V3Z" fill="white"/></svg>');
+	background-repeat: no-repeat;
+	background-position: center;
+	transition: background-color 200ms ease, transform 200ms ease-out;
+}
+
+.hljs-copy-button:hover {
+	border-color: #ffffff44;
+}
+
+.hljs-copy-button:active {
+	border-color: #ffffff66;
+}
+
+.hljs-copy-button[data-copied="true"] {
+	text-indent: 0;
+	width: auto;
+	background-image: none;
+}
+
+.hljs-copy-alert {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+
+@media (prefers-reduced-motion) {
+	.hljs-copy-button {
+		transition: none;
+	}
+}

chat_gpt_microservice/client/css/label.css

@@ -0,0 +1,16 @@
+label {
+	cursor: pointer;
+	text-indent: -9999px;
+	width: 50px;
+	height: 30px;
+	backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
+	background-color: var(--blur-bg);
+	border-radius: var(--border-radius-1);
+	border: 1px solid var(--blur-border);
+	display: block;
+	border-radius: 100px;
+	position: relative;
+	overflow: hidden;
+	transition: 0.33s;
+}

chat_gpt_microservice/client/css/main.css

@@ -0,0 +1,14 @@
+.main-container {
+	display: flex;
+	padding: var(--section-gap);
+	height: 100vh;
+	justify-content: center;
+	box-sizing: border-box;
+}
+
+@media screen and (max-width: 360px) {
+	.main-container {
+		padding: 0px;
+		height: 90vh;
+	}
+}

chat_gpt_microservice/client/css/message-input.css

@@ -0,0 +1,27 @@
+#message-input {
+	margin-right: 30px;
+	height: 64px;
+}
+
+#message-input::-webkit-scrollbar {
+	width: 5px;
+}
+
+#message-input::-webkit-scrollbar-track {
+	background: #f1f1f1;
+}
+
+#message-input::-webkit-scrollbar-thumb {
+	background: #c7a2ff;
+}
+
+#message-input::-webkit-scrollbar-thumb:hover {
+	background: #8b3dff;
+}
+
+@media screen and (max-width: 360px) {
+	#message-input {
+		margin: 0;
+	}
+}
+

chat_gpt_microservice/client/css/message.css

@@ -0,0 +1,65 @@
+.message {
+	width: 100%;
+	overflow-wrap: break-word;
+	display: flex;
+	gap: var(--section-gap);
+	padding: var(--section-gap);
+	padding-bottom: 0;
+}
+
+.message:last-child {
+	animation: 0.6s show_message;
+}
+
+@keyframes show_message {
+	from {
+		transform: translateY(10px);
+		opacity: 0;
+	}
+}
+
+.message .avatar-container img {
+	max-width: 48px;
+	max-height: 48px;
+	box-shadow: 0.4px 0.5px 0.7px -2px rgba(0, 0, 0, 0.08), 1.1px 1.3px 2px -2px rgba(0, 0, 0, 0.041),
+		2.7px 3px 4.8px -2px rgba(0, 0, 0, 0.029), 9px 10px 16px -2px rgba(0, 0, 0, 0.022);
+}
+
+.message .content {
+	display: flex;
+	flex-direction: column;
+	width: 90%;
+	gap: 18px;
+}
+
+.message .content p,
+.message .content li,
+.message .content code {
+	font-size: 1rem;
+	line-height: 1.3;
+}
+
+@media screen and (max-height: 720px) {
+	.message {
+		padding: 12px;
+		gap: 0;
+	}
+
+	.message .content {
+		margin-left: 8px;
+		width: 80%;
+	}
+
+	.message .avatar-container img {
+		max-width: 32px;
+		max-height: 32px;
+	}
+
+	.message .content,
+	.message .content p,
+	.message .content li,
+	.message .content code {
+		font-size: 0.875rem;
+		line-height: 1.3;
+	}
+}

chat_gpt_microservice/client/css/options.css

@@ -0,0 +1,10 @@
+.options-container {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+@media screen and (max-width: 990px) {
+	.options-container {
+		justify-content: space-between;
+	}
+}

chat_gpt_microservice/client/css/select.css

@@ -0,0 +1,35 @@
+select {
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	border-radius: 8px;
+
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+
+	cursor: pointer;
+	background-color: var(--blur-bg);
+	border: 1px solid var(--blur-border);
+	color: var(--colour-3);
+	display: block;
+	position: relative;
+	overflow: hidden;
+	outline: none;
+	padding: 8px 16px;
+
+	appearance: none;
+}
+
+/* scrollbar */
+select.dropdown::-webkit-scrollbar {
+	width: 4px;
+	padding: 8px 0px;
+}
+
+select.dropdown::-webkit-scrollbar-track {
+	background-color: #ffffff00;
+}
+
+select.dropdown::-webkit-scrollbar-thumb {
+	background-color: #555555;
+	border-radius: 10px;
+}

chat_gpt_microservice/client/css/settings.css

@@ -0,0 +1,44 @@
+.settings-container {
+	color: var(--colour-2);
+	margin: 24px 0px 8px 0px;
+	justify-content: center;
+}
+
+.settings-container span {
+	font-size: 0.875rem;
+	margin: 0;
+}
+
+.settings-container label {
+	width: 24px;
+	height: 16px;
+}
+
+.settings-container .field {
+	justify-content: space-between;
+}
+
+.settings-container .checkbox input + label,
+.settings-container .checkbox input:checked + label:after {
+	background: var(--colour-1);
+}
+
+.settings-container .checkbox input + label:after,
+.settings-container .checkbox input:checked + label {
+	background: var(--colour-3);
+}
+
+.settings-container .checkbox label:after {
+	left: 2px;
+	width: 10px;
+	height: 10px;
+}
+
+.settings-container .checkbox input:checked + label:after {
+	left: calc(100% - 2px - 10px);
+}
+
+.settings-container .dropdown {
+	padding: 4px 8px;
+	font-size: 0.75rem;
+}

chat_gpt_microservice/client/css/sidebar.css

@@ -0,0 +1,197 @@
+.sidebar {
+	max-width: 260px;
+	padding: var(--section-gap);
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.sidebar .title {
+	font-size: 14px;
+	font-weight: 500;
+}
+
+.sidebar .conversation-sidebar {
+	padding: 8px 12px;
+	display: flex;
+	gap: 18px;
+	align-items: center;
+	user-select: none;
+	justify-content: space-between;
+}
+
+.sidebar .conversation-sidebar .left {
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.sidebar i {
+	color: var(--conversations);
+	cursor: pointer;
+}
+
+.sidebar .top {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	gap: 16px;
+	padding-right: 8px;
+}
+
+.sidebar .top:hover {
+	overflow: auto;
+}
+
+.sidebar .info {
+	padding: 8px 12px 0px 12px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	user-select: none;
+	background: transparent;
+	width: 100%;
+	border: none;
+	text-decoration: none;
+}
+
+.sidebar .info span {
+	color: var(--conversations);
+	line-height: 1.5;
+	font-size: 0.75rem;
+}
+
+.sidebar .info i::before {
+	margin-right: 8px;
+}
+
+.sidebar-footer {
+	width: 100%;
+	margin-top: 16px;
+	display: flex;
+	flex-direction: column;
+}
+
+.sidebar-footer button {
+	cursor: pointer;
+	user-select: none;
+	background: transparent;
+}
+
+.sidebar.shown {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1000;
+}
+
+.sidebar.shown .box {
+	background-color: #16171a;
+	width: 80%;
+	height: 100%;
+	overflow-y: auto;
+}
+
+@keyframes spinner {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/* scrollbar */
+.sidebar .top::-webkit-scrollbar {
+	width: 4px;
+	padding: 8px 0px;
+}
+
+.sidebar .top::-webkit-scrollbar-track {
+	background-color: #ffffff00;
+}
+
+.sidebar .top::-webkit-scrollbar-thumb {
+	background-color: #555555;
+	border-radius: 10px;
+}
+
+.spinner:before {
+	content: "";
+	box-sizing: border-box;
+	position: absolute;
+	top: 50%;
+	left: 45%;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	border: 1px solid var(--conversations);
+	border-top-color: white;
+	animation: spinner 0.6s linear infinite;
+}
+
+.menu-button {
+	display: none !important;
+	position: absolute;
+	z-index: 100000;
+	top: 0;
+	left: 0;
+	margin: 10px;
+	font-size: 1rem;
+	cursor: pointer;
+	width: 30px;
+	height: 30px;
+	justify-content: center;
+	align-items: center;
+	transition: 0.33s;
+}
+
+.menu-button i {
+	transition: 0.33s;
+}
+
+.rotated {
+	transform: rotate(360deg);
+}
+
+.menu-button.rotated {
+	position: fixed;
+	top: 10px;
+	left: 10px;
+	z-index: 1001;
+}
+
+@media screen and (max-width: 990px) {
+	.sidebar {
+		display: none;
+		width: 100%;
+		max-width: none;
+	}
+
+	.menu-button {
+		display: flex !important;
+	}
+}
+
+@media (max-width: 990px) {
+	.sidebar .top {
+		padding-top: 48px;
+	}
+}
+
+@media (min-width: 768px) {
+	.sidebar.shown {
+		position: static;
+		width: auto;
+		height: auto;
+		background-color: transparent;
+	}
+
+	.sidebar.shown .box {
+		background-color: #16171a;
+		width: auto;
+		height: auto;
+		overflow-y: auto;
+	}
+}

chat_gpt_microservice/client/css/stop-generating.css

@@ -0,0 +1,38 @@
+.stop-generating {
+	position: absolute;
+	bottom: 128px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 1000000;
+}
+
+.stop-generating button {
+	backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
+	background-color: var(--blur-bg);
+	color: var(--colour-3);
+	cursor: pointer;
+	animation: show_popup 0.4s;
+}
+
+@keyframes show_popup {
+	from {
+		opacity: 0;
+		transform: translateY(10px);
+	}
+}
+
+@keyframes hide_popup {
+	to {
+		opacity: 0;
+		transform: translateY(10px);
+	}
+}
+
+.stop-generating-hiding button {
+	animation: hide_popup 0.4s;
+}
+
+.stop-generating-hidden button {
+	display: none;
+}

chat_gpt_microservice/client/css/style.css

@@ -0,0 +1,18 @@
+@import "global.css";
+@import "hljs.css";
+@import "main.css";
+@import "sidebar.css";
+@import "conversation.css";
+@import "message.css";
+@import "stop-generating.css";
+@import "typing.css";
+@import "checkbox.css";
+@import "label.css";
+@import "button.css";
+@import "buttons.css";
+@import "dropdown.css";
+@import "field.css";
+@import "select.css";
+@import "options.css";
+@import "settings.css";
+@import "message-input.css";

chat_gpt_microservice/client/css/typing.css

@@ -0,0 +1,15 @@
+.typing {
+	position: absolute;
+	top: -25px;
+	left: 0;
+	font-size: 14px;
+	animation: show_popup 0.4s;
+}
+
+.typing-hiding {
+	animation: hide_popup 0.4s;
+}
+
+.typing-hidden {
+	display: none;
+}