Refactor CSS and HTML

client/css/background.css

@@ -0,0 +1,22 @@
+.background-gradient:nth-child(1) {
+	--top: 0;
+	--right: 0;
+	--size: 70vw;
+	--blur: calc(0.5 * var(--size));
+	--opacity: 0.3;
+	animation: zoom_gradient 6s infinite;
+}
+
+.background-gradient {
+	position: absolute;
+	z-index: -1;
+	border-radius: calc(0.5 * var(--size));
+	background-color: var(--accent);
+	background: radial-gradient(circle at center, var(--accent), var(--accent));
+	width: 70vw;
+	height: 70vw;
+	top: 50%;
+	right: 0;
+	transform: translateY(-50%);
+	filter: blur(calc(0.5 * 70vw)) opacity(var(--opacity));
+}

client/css/buttons.css

@@ -0,0 +1,39 @@
+.buttons {
+	display: flex;
+	align-items: center;
+	justify-content: left;
+	width: 100%;
+}
+
+.bottom_buttons {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.bottom_buttons button {
+	padding: 8px 12px;
+	display: flex;
+	gap: 18px;
+	align-items: center;
+	cursor: pointer;
+	user-select: none;
+	background: transparent;
+	border: 1px solid #c7a2ff;
+	border-radius: var(--border-radius-1);
+	width: 100%;
+}
+
+.bottom_buttons button span {
+	color: var(--colour-3);
+	font-size: 14px;
+}
+
+@media screen and (max-width: 990px) {
+	.buttons {
+		align-items: flex-start;
+		flex-wrap: wrap;
+		gap: 15px;
+	}
+}

client/css/checkbox.css

@@ -0,0 +1,13 @@
+input[type="checkbox"] {
+	height: 0;
+	width: 0;
+	display: none;
+}
+
+input:checked + label {
+	background: var(--blur-border);
+}
+
+input:checked + label:after {
+	left: calc(100% - 5px - 20px);
+}

client/css/conversation.css

@@ -0,0 +1,130 @@
+.conversation {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+}
+
+.conversation #messages {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+	overflow-wrap: break-word;
+	padding-bottom: 50px;
+}
+
+.conversation .user-input {
+	max-height: 200px;
+}
+
+.conversation .user-input input {
+	font-size: 15px;
+	width: 100%;
+	height: 100%;
+	padding: 12px 15px;
+	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: 15px;
+	width: 100%;
+	height: 100%;
+	padding: 12px 15px;
+	background: none;
+	border: none;
+	outline: none;
+	color: var(--colour-3);
+
+	resize: vertical;
+	max-height: 150px;
+	min-height: 80px;
+}
+
+.new-conversation {
+	padding: 8px 12px;
+	display: flex;
+	gap: 18px;
+	align-items: center;
+	cursor: pointer;
+	user-select: none;
+	background: transparent;
+	border: 1px dashed var(--conversations);
+	border-radius: var(--border-radius-1);
+}
+
+.new-conversation span {
+	color: var(--colour-3);
+	font-size: 14px;
+}
+
+.new-conversation:hover {
+	border-style: solid;
+}
+
+.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);
+}
+
+.input-box {
+	display: flex;
+	align-items: center;
+	padding-right: 15px;
+	cursor: pointer;
+}
+
+#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;
+	}
+}

client/css/field.css

@@ -0,0 +1,18 @@
+.field {
+	height: fit-content;
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	padding-right: 15px;
+}
+
+.field .about {
+	font-size: 14px;
+	color: var(--colour-3);
+}
+
+@media screen and (max-width: 990px) {
+	.field {
+		width: fit-content;
+	}
+}

client/css/global.css

@@ -0,0 +1,62 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+:root {
+	--colour-1: #000000;
+	--colour-2: #ccc;
+	--colour-3: #e4d4ff;
+	--colour-4: #f0f0f0;
+	--colour-5: #181818;
+	--colour-6: #242424;
+
+	--accent: #8b3dff;
+	--blur-bg: #16101b66;
+	--blur-border: #84719040;
+	--user-input: #ac87bb;
+	--conversations: #c7a2ff;
+}
+
+:root {
+	--font-1: "Inter", sans-serif;
+	--section-gap: 25px;
+	--border-radius-1: 8px;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	position: relative;
+	font-family: var(--font-1);
+}
+
+html,
+body {
+	scroll-behavior: smooth;
+	overflow: hidden;
+}
+
+body {
+	padding: var(--section-gap);
+	background: var(--colour-1);
+	color: var(--colour-3);
+	height: 100vh;
+}
+
+ol,
+ul {
+	padding-left: 20px;
+}
+
+.shown {
+	display: flex;
+}
+
+a:-webkit-any-link {
+	color: var(--accent);
+}
+
+@media screen and (max-height: 640px) {
+	body {
+		height: 87vh;
+	}
+}

client/css/hljs.css

@@ -0,0 +1,90 @@
+.hljs {
+	color: #e9e9f4;
+	background: #28293629;
+	border-radius: var(--border-radius-1);
+	border: 1px solid var(--blur-border);
+	font-size: 15px;
+}
+
+#message-input {
+	margin-right: 30px;
+	height: 80px;
+}
+
+#message-input::-webkit-scrollbar {
+	width: 5px;
+}
+
+/* Track */
+#message-input::-webkit-scrollbar-track {
+	background: #f1f1f1;
+}
+
+/* Handle */
+#message-input::-webkit-scrollbar-thumb {
+	background: #c7a2ff;
+}
+
+/* Handle on hover */
+#message-input::-webkit-scrollbar-thumb:hover {
+	background: #8b3dff;
+}
+
+/* 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;
+	}
+}

client/css/label.css

@@ -0,0 +1,29 @@
+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;
+}
+
+label:after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left: 5px;
+	width: 20px;
+	height: 20px;
+	background: var(--colour-3);
+	border-radius: 90px;
+	transition: 0.33s;
+}

client/css/main.css

@@ -0,0 +1,5 @@
+.main-container {
+	display: flex;
+	gap: var(--section-gap);
+	height: 100%;
+}

client/css/message.css

@@ -0,0 +1,53 @@
+.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 .user {
+	max-width: 48px;
+	max-height: 48px;
+	flex-shrink: 0;
+}
+
+.message .user img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: 8px;
+	outline: 1px solid var(--blur-border);
+}
+
+.message .content {
+	display: flex;
+	flex-direction: column;
+	gap: 18px;
+}
+
+.message .content p,
+.message .content li,
+.message .content code {
+	font-size: 15px;
+	line-height: 1.3;
+}
+
+.message .user i {
+	position: absolute;
+	bottom: -6px;
+	right: -6px;
+	z-index: 1000;
+}

client/css/select.css

@@ -0,0 +1,20 @@
+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;
+}

client/css/sidebar.css

@@ -0,0 +1,118 @@
+.sidebar {
+	max-width: 260px;
+	padding: var(--section-gap);
+	overflow: auto;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	gap: 16px;
+}
+
+.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;
+	gap: 16px;
+	overflow: auto;
+}
+
+.sidebar .info {
+	padding: 8px 12px;
+	display: flex;
+	gap: 18px;
+	align-items: center;
+	user-select: none;
+	background: transparent;
+	border-radius: var(--border-radius-1);
+	width: 100%;
+	border: 1px dashed var(--conversations);
+	text-decoration: none;
+	color: inherit;
+}
+
+@keyframes spinner {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.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;
+}
+
+.mobile-sidebar {
+	display: none !important;
+	position: absolute;
+	z-index: 100000;
+	top: 0;
+	left: 0;
+	margin: 10px;
+	font-size: 20px;
+	cursor: pointer;
+	backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
+	background-color: var(--blur-bg);
+	border-radius: 10px;
+	border: 1px solid var(--blur-border);
+	width: 40px;
+	height: 40px;
+	justify-content: center;
+	align-items: center;
+	transition: 0.33s;
+}
+
+.mobile-sidebar i {
+	transition: 0.33s;
+}
+
+.rotated {
+	transform: rotate(360deg);
+}
+
+@media screen and (max-width: 990px) {
+	.sidebar {
+		display: none;
+		width: 100%;
+		max-width: none;
+	}
+
+	.mobile-sidebar {
+		display: flex !important;
+	}
+}

client/css/stop-generating.css

@@ -0,0 +1,45 @@
+.stop-generating {
+	position: absolute;
+	bottom: 118px;
+	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);
+	border-radius: var(--border-radius-1);
+	border: 1px solid var(--blur-border);
+	padding: 10px 15px;
+	color: var(--colour-3);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 12px;
+	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;
+}

client/css/style.css

@@ -1,670 +1,14 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-
-/* :root {
-    --colour-1: #ffffff;
-    --colour-2: #000000;
-    --colour-3: #000000;
-    --colour-4: #000000;
-    --colour-5: #000000;
-    --colour-6: #000000;
-
-    --accent: #ffffff;
-    --blur-bg: #98989866;
-    --blur-border: #00000040;
-    --user-input: #000000;
-    --conversations: #000000;
-} */
-
-:root {
-    --colour-1: #000000;
-    --colour-2: #ccc;
-    --colour-3: #e4d4ff;
-    --colour-4: #f0f0f0;
-    --colour-5: #181818;
-    --colour-6: #242424;
-
-    --accent: #8b3dff;
-    --blur-bg: #16101b66;
-    --blur-border: #84719040;
-    --user-input: #ac87bb;
-    --conversations: #c7a2ff;
-}
-
-:root {
-    --font-1: "Inter", sans-serif;
-    --section-gap: 25px;
-    --border-radius-1: 8px;
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    position: relative;
-    font-family: var(--font-1);
-}
-
-html,
-body {
-    scroll-behavior: smooth;
-    overflow: hidden;
-}
-
-body {
-    padding: var(--section-gap);
-    background: var(--colour-1);
-    color: var(--colour-3);
-    height: 100vh;
-}
-
-.row {
-    display: flex;
-    gap: var(--section-gap);
-    height: 100%;
-}
-
-.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);
-}
-
-.conversations {
-    max-width: 260px;
-    padding: var(--section-gap);
-    overflow: auto;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.conversation {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-}
-
-.conversation #messages {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    overflow-wrap: break-word;
-    padding-bottom: 50px;
-}
-
-.conversation .user-input {
-    max-height: 200px;
-}
-
-.conversation .user-input input {
-    font-size: 15px;
-    width: 100%;
-    height: 100%;
-    padding: 12px 15px;
-    background: none;
-    border: none;
-    outline: none;
-    color: var(--colour-3);
-}
-
-.conversation .user-input input::placeholder {
-    color: var(--user-input)
-}
-
-.gradient:nth-child(1) {
-    --top: 0;
-    --right: 0;
-    --size: 70vw;
-    --blur: calc(0.5 * var(--size));
-    --opacity: 0.3;
-    animation: zoom_gradient 6s infinite;
-}
-
-.gradient {
-    position: absolute;
-    z-index: -1;
-    border-radius: calc(0.5 * var(--size));
-    background-color: var(--accent);
-    background: radial-gradient(circle at center, var(--accent), var(--accent));
-    width: 70vw;
-    height: 70vw;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-    filter: blur(calc(0.5 * 70vw)) opacity(var(--opacity));
-}
-
-.conversations {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.conversations .title {
-    font-size: 14px;
-    font-weight: 500;
-}
-
-.conversations .convo {
-    padding: 8px 12px;
-    display: flex;
-    gap: 18px;
-    align-items: center;
-    user-select: none;
-    justify-content: space-between;
-}
-
-.conversations .convo .left {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.conversations i {
-    color: var(--conversations);
-    cursor: pointer;
-}
-
-.convo-title {
-    color: var(--colour-3);
-    font-size: 14px;
-}
-
-.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 .user {
-    max-width: 48px;
-    max-height: 48px;
-    flex-shrink: 0;
-}
-
-.message .user img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 8px;
-    outline: 1px solid var(--blur-border);
-}
-
-.message .content {
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-}
-
-.message .content p,
-.message .content li,
-.message .content code {
-    font-size: 15px;
-    line-height: 1.3;
-}
-
-.message .user i {
-    position: absolute;
-    bottom: -6px;
-    right: -6px;
-    z-index: 1000;
-}
-
-.new_convo {
-    padding: 8px 12px;
-    display: flex;
-    gap: 18px;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-    background: transparent;
-    border: 1px dashed var(--conversations);
-    border-radius: var(--border-radius-1);
-}
-
-.new_convo span {
-    color: var(--colour-3);
-    font-size: 14px;
-}
-
-.new_convo:hover {
-    border-style: solid;
-}
-
-.stop_generating {
-    position: absolute;
-    bottom: 118px;
-    /* left: 10px;
-    bottom: 125px;
-    right: 8px; */
-    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);
-    border-radius: var(--border-radius-1);
-    border: 1px solid var(--blur-border);
-    padding: 10px 15px;
-    color: var(--colour-3);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 12px;
-    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;
-}
-
-.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;
-}
-
-input[type="checkbox"] {
-    height: 0;
-    width: 0;
-    display: none;
-}
-
-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;
-}
-
-label:after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 5px;
-    width: 20px;
-    height: 20px;
-    background: var(--colour-3);
-    border-radius: 90px;
-    transition: 0.33s;
-}
-
-input:checked+label {
-    background: var(--blur-border);
-}
-
-input:checked+label:after {
-    left: calc(100% - 5px - 20px);
-}
-
-.buttons {
-    display: flex;
-    align-items: center;
-    justify-content: left;
-    width: 100%;
-}
-
-.field {
-    height: fit-content;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding-right: 15px
-}
-
-.field .about {
-    font-size: 14px;
-    color: var(--colour-3);
-}
-
-
-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;
-}
-
-.input-box {
-    display: flex;
-    align-items: center;
-    padding-right: 15px;
-    cursor: pointer;
-}
-
-.info {
-    padding: 8px 12px;
-    display: flex;
-    gap: 18px;
-    align-items: center;
-    user-select: none;
-    background: transparent;
-    border-radius: var(--border-radius-1);
-    width: 100%;
-    border: 1px dashed var(--conversations);
-    text-decoration: none; 
-    color: inherit
-}
-
-.bottom_buttons {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.bottom_buttons button {
-    padding: 8px 12px;
-    display: flex;
-    gap: 18px;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-    background: transparent;
-    border: 1px solid #c7a2ff;
-    border-radius: var(--border-radius-1);
-    width: 100%;
-}
-
-.bottom_buttons button span {
-    color: var(--colour-3);
-    font-size: 14px;
-}
-
-.conversations .top {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    overflow: auto;
-}
-
-#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;
-    }
-}
-
-
-ol,
-ul {
-    padding-left: 20px;
-}
-
-
-@keyframes spinner {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.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 .6s linear infinite;
-}
-
-.grecaptcha-badge {
-    visibility: hidden;
-}
-
-.mobile-sidebar {
-    display: none !important;
-    position: absolute;
-    z-index: 100000;
-    top: 0;
-    left: 0;
-    margin: 10px;
-    font-size: 20px;
-    cursor: pointer;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    background-color: var(--blur-bg);
-    border-radius: 10px;
-    border: 1px solid var(--blur-border);
-    width: 40px;
-    height: 40px;
-    justify-content: center;
-    align-items: center;
-    transition: 0.33s;
-}
-
-.mobile-sidebar i {
-    transition: 0.33s;
-}
-
-.rotated {
-    transform: rotate(360deg);
-}
-
-@media screen and (max-width: 990px) {
-    .conversations {
-        display: none;
-        width: 100%;
-        max-width: none;
-    }
-
-    .buttons {
-        align-items: flex-start;
-        flex-wrap: wrap;
-        gap: 15px;
-    }
-
-    .field {
-        width: fit-content;
-    }
-
-    .mobile-sidebar {
-        display: flex !important;
-    }
-}
-
-@media screen and (max-height: 640px) {
-    body {
-        height: 87vh
-    }
-}
-
-
-.shown {
-    display: flex;
-}
-
-
-a:-webkit-any-link {
-    color: var(--accent);
-}
-
-.conversation .user-input textarea {
-    font-size: 15px;
-    width: 100%;
-    height: 100%;
-    padding: 12px 15px;
-    background: none;
-    border: none;
-    outline: none;
-    color: var(--colour-3);
-
-    resize: vertical;
-    max-height: 150px;
-    min-height: 80px;
-}
-
-/* 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: .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
-}
-
-@media(prefers-reduced-motion) {
-    .hljs-copy-button {
-        transition: 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
-}
+@import "./global.css";
+@import "./hljs.css";
+@import "./main.css";
+@import "./sidebar.css";
+@import "./conversation.css";
+@import "./background.css";
+@import "./message.css";
+@import "./stop-generating.css";
+@import "./typing.css";
+@import "./checkbox.css";
+@import "./label.css";
+@import "./buttons.css";
+@import "./field.css";
+@import "./select.css";

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;
+}

client/html/index.html

@@ -26,39 +26,6 @@
 			const user_image = `<img src="/assets/img/user.png" alt="User Avatar">`;
 			const gpt_image = `<img src="/assets/img/gpt.png" alt="GPT Avatar">`;
 		</script>
-		<style>
-			.hljs {
-				color: #e9e9f4;
-				background: #28293629;
-				border-radius: var(--border-radius-1);
-				border: 1px solid var(--blur-border);
-				font-size: 15px;
-			}
-
-			#message-input {
-				margin-right: 30px;
-				height: 80px;
-			}
-
-			#message-input::-webkit-scrollbar {
-				width: 5px;
-			}
-
-			/* Track */
-			#message-input::-webkit-scrollbar-track {
-				background: #f1f1f1;
-			}
-
-			/* Handle */
-			#message-input::-webkit-scrollbar-thumb {
-				background: #c7a2ff;
-			}
-
-			/* Handle on hover */
-			#message-input::-webkit-scrollbar-thumb:hover {
-				background: #8b3dff;
-			}
-		</style>
 		<script src="/assets/js/highlight.min.js"></script>
 		<script src="/assets/js/highlightjs-copy.min.js"></script>
 		<script>
@@ -68,11 +35,11 @@
 	</head>
 
 	<body>
-		<div class="gradient"></div>
-		<div class="row">
-			<div class="box conversations">
+		<div class="background-gradient"></div>
+		<div class="main-container">
+			<div class="box sidebar">
 				<div class="top">
-					<button class="new_convo" onclick="new_conversation()">
+					<button class="new-conversation" onclick="new_conversation()">
 						<i class="fa-regular fa-plus"></i>
 						<span>New Conversation</span>
 					</button>
@@ -85,7 +52,7 @@
 					</button>
 					<a class="info" href="https://github.com/ramonvc/gptfree-jailbreak-webui" target="_blank">
 						<i class="fa-brands fa-github"></i>
-						<span class="convo-title">
+						<span class="conversation-title">
 							@ramonvc<br />
 							Version: 0.0.2-Alpha<br />
 						</span>
@@ -93,7 +60,7 @@
 				</div>
 			</div>
 			<div class="conversation">
-				<div class="stop_generating stop_generating-hidden">
+				<div class="stop-generating stop-generating-hidden">
 					<button id="cancelButton">
 						<span>Stop Generating</span>
 						<i class="fa-regular fa-stop"></i>
@@ -124,7 +91,6 @@
 							<option value="text-gpt-0035-render-sha-0" selected>gpt-3.5-turbo</option>
 							<option disabled value="text-gpt-0040-render-sha-0">gpt-4 (coming soon)</option>
 						</select>
-						<!-- <span class="about">Model</span> -->
 					</div>
 					<div class="field">
 						<select name="jailbreak" id="jailbreak">

client/js/chat.js

@@ -7,7 +7,7 @@ const message_box = document.getElementById(`messages`);
 const message_input = document.getElementById(`message-input`);
 const box_conversations = document.querySelector(`.top`);
 const spinner = box_conversations.querySelector(".spinner");
-const stop_generating = document.querySelector(`.stop_generating`);
+const stop_generating = document.querySelector(`.stop-generating`);
 const send_button = document.querySelector(`#send-button`);
 let prompt_lock = false;
 
@@ -44,11 +44,11 @@ const handle_ask = async () => {
 };
 
 const remove_cancel_button = async () => {
-	stop_generating.classList.add(`stop_generating-hiding`);
+	stop_generating.classList.add(`stop-generating-hiding`);
 
 	setTimeout(() => {
-		stop_generating.classList.remove(`stop_generating-hiding`);
-		stop_generating.classList.add(`stop_generating-hidden`);
+		stop_generating.classList.remove(`stop-generating-hiding`);
+		stop_generating.classList.add(`stop-generating-hidden`);
 	}, 300);
 };
 
@@ -68,7 +68,7 @@ const ask_gpt = async (message) => {
 		window.text = ``;
 		window.token = message_id();
 
-		stop_generating.classList.remove(`stop_generating-hidden`);
+		stop_generating.classList.remove(`stop-generating-hidden`);
 
 		message_box.innerHTML += `
             <div class="message">
@@ -326,10 +326,10 @@ const load_conversations = async (limit, offset, loader) => {
 
 	for (conversation of conversations) {
 		box_conversations.innerHTML += `
-            <div class="convo">
+            <div class="conversation-sidebar">
                 <div class="left" onclick="set_conversation('${conversation.id}')">
                     <i class="fa-regular fa-comments"></i>
-                    <span class="convo-title">${conversation.title}</span>
+                    <span class="conversation-title">${conversation.title}</span>
                 </div>
                 <i onclick="delete_conversation('${conversation.id}')" class="fa-regular fa-trash"></i>
             </div>
@@ -415,7 +415,7 @@ window.onload = async () => {
 };
 
 document.querySelector(".mobile-sidebar").addEventListener("click", (event) => {
-	const sidebar = document.querySelector(".conversations");
+	const sidebar = document.querySelector(".sidebar");
 
 	if (sidebar.classList.contains("shown")) {
 		sidebar.classList.remove("shown");