Improve the user interface

.gitignore

@@ -147,6 +147,7 @@ cython_debug/
 # others
 .config/
 .upm/
+.vscode/
 
 # PyCharm
 #  JetBrains specific template is maintainted in a separate JetBrains.gitignore that can

client/css/background.css

@@ -1,22 +0,0 @@
-.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/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;
+	}
+}

client/css/conversation.css

@@ -1,29 +1,26 @@
 .conversation {
-	width: 100%;
+	width: 60%;
+	margin: 0px 16px;
 	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;
+	padding-bottom: 8px;
 }
 
 .conversation .user-input {
-	max-height: 200px;
+	max-height: 180px;
+	margin: 16px 0px;
 }
 
 .conversation .user-input input {
-	font-size: 15px;
-	width: 100%;
-	height: 100%;
-	padding: 12px 15px;
+	font-size: 1rem;
 	background: none;
 	border: none;
 	outline: none;
@@ -40,41 +37,19 @@
 }
 
 .conversation .user-input textarea {
-	font-size: 15px;
+	font-size: 1rem;
 	width: 100%;
 	height: 100%;
-	padding: 12px 15px;
+	padding: 12px;
 	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);
@@ -88,7 +63,7 @@
 .input-box {
 	display: flex;
 	align-items: center;
-	padding-right: 15px;
+	padding: 8px;
 	cursor: pointer;
 }
 
@@ -128,3 +103,20 @@
 		background: #ffffff00;
 	}
 }
+
+@media screen and (max-width: 990px) {
+	.conversation {
+		width: 100%;
+		height: 90%;
+	}
+}
+
+@media screen and (max-height: 720px) {
+	.box {
+		height: 70%;
+	}
+
+	.conversation .user-input textarea {
+		font-size: 0.875rem;
+	}
+}

client/css/dropdown.css

@@ -0,0 +1,3 @@
+.dropdown {
+    border: 1px solid var(--conversations);
+}

client/css/global.css

@@ -1,24 +1,22 @@
 @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;
+	--font-1: "Inter", sans-serif;
+	--section-gap: 24px;
+	--border-radius-1: 8px;
+
+	--colour-1: #181818;
 	--colour-2: #ccc;
-	--colour-3: #e4d4ff;
+	--colour-3: #dadada;
 	--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;
+	--accent: #151718;
+	--blur-bg: #242627;
+	--blur-border: #242627;
+	--user-input: #f5f5f5;
+	--conversations: #555555;
 }
 
 * {
@@ -31,15 +29,8 @@
 
 html,
 body {
-	scroll-behavior: smooth;
-	overflow: hidden;
-}
-
-body {
-	padding: var(--section-gap);
 	background: var(--colour-1);
 	color: var(--colour-3);
-	height: 100vh;
 }
 
 ol,
@@ -48,15 +39,15 @@ ul {
 }
 
 .shown {
-	display: flex;
+	display: flex !important;
 }
 
 a:-webkit-any-link {
 	color: var(--accent);
 }
 
-@media screen and (max-height: 640px) {
-	body {
-		height: 87vh;
+@media screen and (max-height: 720px) {
+	:root {
+		--section-gap: 16px;
 	}
 }

client/css/hljs.css

@@ -4,11 +4,13 @@
 	border-radius: var(--border-radius-1);
 	border: 1px solid var(--blur-border);
 	font-size: 15px;
+	word-wrap: break-word;
+	white-space: pre-wrap;
 }
 
 #message-input {
 	margin-right: 30px;
-	height: 80px;
+	height: 64px;
 }
 
 #message-input::-webkit-scrollbar {

client/css/main.css

@@ -1,5 +1,7 @@
 .main-container {
 	display: flex;
-	gap: var(--section-gap);
-	height: 100%;
+	padding: var(--section-gap);
+	height: 100vh;
+	justify-content: center;
+	box-sizing: border-box;
 }

client/css/message.css

@@ -18,18 +18,11 @@
 	}
 }
 
-.message .user {
+.message .avatar-container img {
 	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);
+	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 {
@@ -41,13 +34,21 @@
 .message .content p,
 .message .content li,
 .message .content code {
-	font-size: 15px;
+	font-size: 1rem;
 	line-height: 1.3;
 }
 
-.message .user i {
-	position: absolute;
-	bottom: -6px;
-	right: -6px;
-	z-index: 1000;
+@media screen and (max-height: 720px) {
+	.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;
+	}
 }

client/css/sidebar.css

@@ -6,7 +6,6 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-	gap: 16px;
 }
 
 .sidebar .title {
@@ -43,17 +42,25 @@
 }
 
 .sidebar .info {
-	padding: 8px 12px;
+	padding: 8px 12px 0px 12px;
 	display: flex;
-	gap: 18px;
 	align-items: center;
+	justify-content: center;
 	user-select: none;
 	background: transparent;
-	border-radius: var(--border-radius-1);
 	width: 100%;
-	border: 1px dashed var(--conversations);
+	border: none;
 	text-decoration: none;
-	color: inherit;
+}
+
+.sidebar .info span {
+	color: var(--conversations);
+	line-height: 1.5;
+	font-size: 0.75rem;
+}
+
+.sidebar .info i::before {
+	margin-right: 8px;
 }
 
 .sidebar-footer {
@@ -64,21 +71,26 @@
 }
 
 .sidebar-footer 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);
+}
+
+.sidebar.shown {
+	position: fixed;
+	top: 0;
+	left: 0;
 	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 1000;
 }
 
-.sidebar-footer button span {
-	color: var(--colour-3);
-	font-size: 14px;
+.sidebar.shown .box {
+	background-color: #16171a;
+	width: 80%;
+	height: 100%;
+	overflow-y: auto;
 }
 
 @keyframes spinner {
@@ -130,6 +142,13 @@
 	transform: rotate(360deg);
 }
 
+.mobile-sidebar.rotated {
+	position: fixed;
+	top: 10px;
+	left: 10px;
+	z-index: 1001;
+}
+
 @media screen and (max-width: 990px) {
 	.sidebar {
 		display: none;
@@ -141,3 +160,20 @@
 		display: flex !important;
 	}
 }
+
+@media (min-width: 768px) {
+	.sidebar.shown {
+		position: static;
+		width: auto;
+		height: auto;
+		background-color: transparent;
+		padding-top: 64px;
+	}
+
+	.sidebar.shown .box {
+		background-color: #16171a;
+		width: auto;
+		height: auto;
+		overflow-y: auto;
+	}
+}

client/css/stop-generating.css

@@ -1,6 +1,6 @@
 .stop-generating {
 	position: absolute;
-	bottom: 118px;
+	bottom: 128px;
 	left: 50%;
 	transform: translateX(-50%);
 	z-index: 1000000;
@@ -10,14 +10,7 @@
 	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;
 }

client/css/style.css

@@ -9,6 +9,8 @@
 @import "./typing.css";
 @import "./checkbox.css";
 @import "./label.css";
+@import "./button.css";
 @import "./buttons.css";
+@import "./dropdown.css";
 @import "./field.css";
 @import "./select.css";

client/html/index.html

@@ -16,54 +16,40 @@
 		<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32x32.png" />
 		<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16x16.png" />
 		<link rel="manifest" href="/assets/img/site.webmanifest" />
-		<script src="/assets/js/icons.js"></script>
-		<script src="/assets/js/chat.js" defer></script>
-		<script src="https://cdn.jsdelivr.net/npm/markdown-it@latest/dist/markdown-it.min.js"></script>
 		<link
 			rel="stylesheet"
 			href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/base16/dracula.min.css" />
-		<script>
-			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>
-		<script src="/assets/js/highlight.min.js"></script>
-		<script src="/assets/js/highlightjs-copy.min.js"></script>
-		<script>
-			window.conversation_id = `{{chat_id}}`;
-		</script>
-		<title>ChatGPT</title>
+		<title>FreeGPT</title>
 	</head>
 
 	<body>
-		<div class="background-gradient"></div>
 		<div class="main-container">
 			<div class="box sidebar">
 				<div class="top">
-					<button class="new-conversation" onclick="new_conversation()">
+					<button class="button" onclick="new_conversation()">
 						<i class="fa-regular fa-plus"></i>
 						<span>New Conversation</span>
 					</button>
 					<div class="spinner"></div>
 				</div>
 				<div class="sidebar-footer">
-					<button onclick="delete_conversations()">
+					<button class="button" onclick="delete_conversations()">
 						<i class="fa-regular fa-trash"></i>
 						<span>Clear Conversations</span>
 					</button>
 					<a class="info" href="https://github.com/ramonvc/gptfree-jailbreak-webui" target="_blank">
 						<i class="fa-brands fa-github"></i>
 						<span class="conversation-title">
-							@ramonvc<br />
-							Version: 0.0.4-Alpha<br />
+							Author: @ramonvc<br />
+							Version: 0.0.5-Alpha<br />
 						</span>
 					</a>
 				</div>
 			</div>
 			<div class="conversation">
 				<div class="stop-generating stop-generating-hidden">
-					<button id="cancelButton">
+					<button class="button" id="cancelButton">
 						<span>Stop Generating</span>
-						<i class="fa-regular fa-stop"></i>
 					</button>
 				</div>
 				<div class="box" id="messages"></div>
@@ -81,19 +67,19 @@
 					</div>
 				</div>
 				<div class="buttons">
-					<div class="field">
-						<input type="checkbox" id="switch" />
+					<div class="field" style="display: none">
+						<input type="checkbox" disabled id="switch" />
 						<label for="switch"></label>
 						<span class="about">Web Access</span>
 					</div>
 					<div class="field">
-						<select name="model" id="model">
+						<select class="dropdown" name="model" id="model">
 							<option value="gpt-3.5-turbo">GPT-3.5</option>
 							<option value="gpt-4" selected>GPT-4</option>
 						</select>
 					</div>
 					<div class="field">
-						<select name="jailbreak" id="jailbreak">
+						<select class="dropdown" name="jailbreak" id="jailbreak">
 							<option value="default" selected>Default</option>
 							<option value="gpt-dan-11.0">DAN</option>
 							<option value="gpt-evil">Evil</option>
@@ -105,5 +91,12 @@
 		<div class="mobile-sidebar">
 			<i class="fa-solid fa-bars"></i>
 		</div>
+
+		<!-- scripts -->
+		<script src="/assets/js/icons.js"></script>
+		<script src="/assets/js/chat.js" defer></script>
+		<script src="https://cdn.jsdelivr.net/npm/markdown-it@latest/dist/markdown-it.min.js"></script>
+		<script src="/assets/js/highlight.min.js"></script>
+		<script src="/assets/js/highlightjs-copy.min.js"></script>
 	</body>
 </html>

client/js/chat.js

@@ -9,7 +9,10 @@ const box_conversations = document.querySelector(`.top`);
 const spinner = box_conversations.querySelector(".spinner");
 const stop_generating = document.querySelector(`.stop-generating`);
 const send_button = document.querySelector(`#send-button`);
+const user_image = `<img src="/assets/img/user.png" alt="User Avatar">`;
+const gpt_image = `<img src="/assets/img/gpt.png" alt="GPT Avatar">`;
 let prompt_lock = false;
+window.conversation_id = `{{chat_id}}`;
 
 hljs.addPlugin(new CopyButtonPlugin());
 
@@ -32,13 +35,12 @@ const delete_conversations = async () => {
 
 const handle_ask = async () => {
 	message_input.style.height = `80px`;
-	message_input.focus();
-
 	window.scrollTo(0, 0);
 	let message = message_input.value;
 
 	if (message.length > 0) {
 		message_input.value = ``;
+		message_input.dispatchEvent(new Event("input"));
 		await ask_gpt(message);
 	}
 };
@@ -72,7 +74,7 @@ const ask_gpt = async (message) => {
 
 		message_box.innerHTML += `
             <div class="message">
-                <div class="user">
+                <div class="avatar-container">
                     ${user_image}
                 </div>
                 <div class="content" id="user_${token}"> 
@@ -88,7 +90,7 @@ const ask_gpt = async (message) => {
 
 		message_box.innerHTML += `
             <div class="message">
-                <div class="user">
+                <div class="avatar-container">
                     ${gpt_image}
                 </div>
                 <div class="content" id="gpt_${window.token}">
@@ -259,7 +261,7 @@ const load_conversation = async (conversation_id) => {
 	for (item of conversation.items) {
 		message_box.innerHTML += `
             <div class="message">
-                <div class="user">
+                <div class="avatar-container">
                     ${item.role == "assistant" ? gpt_image : user_image}
                 </div>
                 <div class="content">
@@ -394,20 +396,21 @@ window.onload = async () => {
 		}
 	}
 
-	message_input.addEventListener(`keydown`, async (evt) => {
+	message_input.addEventListener("keydown", async (evt) => {
 		if (prompt_lock) return;
-		if (evt.keyCode === 13 && !evt.shiftKey) {
-			console.log("pressed enter");
+
+		if (evt.key === "Enter" && !evt.shiftKey) {
+			evt.preventDefault();
 			await handle_ask();
 		} else {
-			message_input.style.removeProperty("height");
-			message_input.style.height = message_input.scrollHeight + 4 + "px";
+			updateTextarea(evt.target);
 		}
 	});
 
-	send_button.addEventListener(`click`, async () => {
-		console.log("clicked send");
+	send_button.addEventListener("click", async (event) => {
+		event.preventDefault();
 		if (prompt_lock) return;
+		message_input.blur();
 		await handle_ask();
 	});
 
@@ -420,9 +423,11 @@ document.querySelector(".mobile-sidebar").addEventListener("click", (event) => {
 	if (sidebar.classList.contains("shown")) {
 		sidebar.classList.remove("shown");
 		event.target.classList.remove("rotated");
+		document.body.style.overflow = "auto";
 	} else {
 		sidebar.classList.add("shown");
 		event.target.classList.add("rotated");
+		document.body.style.overflow = "hidden";
 	}
 
 	window.scrollTo(0, 0);
@@ -465,3 +470,12 @@ const load_settings_localstorage = async () => {
 		}
 	});
 };
+
+function clearTextarea(textarea) {
+	textarea.style.removeProperty("height");
+	textarea.style.height = `${textarea.scrollHeight + 4}px`;
+
+	if (textarea.value.trim() === "" && textarea.value.includes("\n")) {
+		textarea.value = "";
+	}
+}