Synced repo using 'sync_with_huggingface' Github Action

client/css/conversation.css

@@ -143,3 +143,16 @@
 		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;
+	}
+}

client/css/global.css

@@ -68,6 +68,10 @@ a:-webkit-any-link {
 	animation: fadeIn 1s forwards;
 }
 
+pre {
+	white-space: pre-wrap;
+}
+
 @keyframes fadeIn {
 	to {
 		opacity: 1;

client/css/hljs.css

@@ -8,30 +8,6 @@
 	white-space: pre-wrap;
 }
 
-#message-input {
-	margin-right: 30px;
-	height: 64px;
-}
-
-#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;

client/css/main.css

@@ -5,3 +5,10 @@
 	justify-content: center;
 	box-sizing: border-box;
 }
+
+@media screen and (max-width: 360px) {
+	.main-container {
+		padding: 0px;
+		height: 90vh;
+	}
+}

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

client/css/message.css

@@ -40,6 +40,16 @@
 }
 
 @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;

client/css/sidebar.css

@@ -131,7 +131,7 @@
 	animation: spinner 0.6s linear infinite;
 }
 
-.mobile-sidebar {
+.menu-button {
 	display: none !important;
 	position: absolute;
 	z-index: 100000;
@@ -147,7 +147,7 @@
 	transition: 0.33s;
 }
 
-.mobile-sidebar i {
+.menu-button i {
 	transition: 0.33s;
 }
 
@@ -155,7 +155,7 @@
 	transform: rotate(360deg);
 }
 
-.mobile-sidebar.rotated {
+.menu-button.rotated {
 	position: fixed;
 	top: 10px;
 	left: 10px;
@@ -169,7 +169,7 @@
 		max-width: none;
 	}
 
-	.mobile-sidebar {
+	.menu-button {
 		display: flex !important;
 	}
 }

client/css/style.css

@@ -16,3 +16,4 @@
 @import "./options.css";
 @import "./theme-toggler.css";
 @import "./api-key.css";
+@import "./message-input.css";

client/html/index.html

@@ -141,7 +141,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="mobile-sidebar">
+		<div class="menu-button">
 			<i class="fa-solid fa-bars"></i>
 		</div>
 
@@ -156,5 +156,6 @@
 		<script src="{{ url_for('bp.static', filename='js/highlight.min.js') }}"></script>
 		<script src="{{ url_for('bp.static', filename='js/highlightjs-copy.min.js') }}"></script>
 		<script src="{{ url_for('bp.static', filename='js/theme-toggler.js') }}"></script>
+		<script src="{{ url_for('bp.static', filename='js/sidebar-toggler.js') }}"></script>
 	</body>
 </html>

client/js/chat.js

@@ -2,7 +2,7 @@ const query = (obj) =>
 	Object.keys(obj)
 		.map((k) => encodeURIComponent(k) + "=" + encodeURIComponent(obj[k]))
 		.join("&");
-const url_prefix = document.querySelector('body').getAttribute('data-urlprefix')
+const url_prefix = document.querySelector("body").getAttribute("data-urlprefix");
 const markdown = window.markdownit();
 const message_box = document.getElementById(`messages`);
 const message_input = document.getElementById(`message-input`);
@@ -129,7 +129,9 @@ const ask_gpt = async (message) => {
 
 			chunk = decodeUnicode(new TextDecoder().decode(value));
 
-			if (chunk.includes(`<form id="challenge-form" action="${url_prefix}/backend-api/v2/conversation?`)) {
+			if (
+				chunk.includes(`<form id="challenge-form" action="${url_prefix}/backend-api/v2/conversation?`)
+			) {
 				chunk = `cloudflare token expired, please refresh the page.`;
 			}
 
@@ -188,21 +190,15 @@ const ask_gpt = async (message) => {
 };
 
 const add_user_message_box = (message) => {
-	const messageDiv = document.createElement("div");
-	messageDiv.classList.add("message");
-
-	const avatarContainer = document.createElement("div");
-	avatarContainer.classList.add("avatar-container");
-	avatarContainer.innerHTML = user_image;
-
-	const contentDiv = document.createElement("div");
-	contentDiv.classList.add("content");
-	contentDiv.id = `user_${token}`;
-	contentDiv.innerText = message;
-
-	messageDiv.appendChild(avatarContainer);
-	messageDiv.appendChild(contentDiv);
+	const messageDiv = createElement("div", { classNames: ["message"] });
+	const avatarContainer = createElement("div", { classNames: ["avatar-container"], innerHTML: user_image });
+	const contentDiv = createElement("div", {
+		classNames: ["content"],
+		id: `user_${token}`,
+		textContent: message,
+	});
 
+	messageDiv.append(avatarContainer, contentDiv);
 	message_box.appendChild(messageDiv);
 };
 
@@ -285,19 +281,14 @@ const load_conversation = async (conversation_id) => {
 };
 
 const load_user_message_box = (content) => {
-	const messageDiv = document.createElement("div");
-	messageDiv.classList.add("message");
-
-	const avatarContainer = document.createElement("div");
-	avatarContainer.classList.add("avatar-container");
-	avatarContainer.innerHTML = user_image;
+	const messageDiv = createElement("div", { classNames: ["message"] });
+	const avatarContainer = createElement("div", { classNames: ["avatar-container"], innerHTML: user_image });
+	const contentDiv = createElement("div", { classNames: ["content"] });
+	const preElement = document.createElement("pre");
+	preElement.textContent = content;
+	contentDiv.appendChild(preElement);
 
-	const contentDiv = document.createElement("div");
-	contentDiv.classList.add("content");
-	contentDiv.innerText = content;
-
-	messageDiv.appendChild(avatarContainer);
-	messageDiv.appendChild(contentDiv);
+	messageDiv.append(avatarContainer, contentDiv);
 
 	return messageDiv.outerHTML;
 };
@@ -452,22 +443,6 @@ window.onload = async () => {
 	register_settings_localstorage();
 };
 
-document.querySelector(".mobile-sidebar").addEventListener("click", (event) => {
-	const sidebar = document.querySelector(".sidebar");
-
-	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);
-});
-
 const register_settings_localstorage = async () => {
 	settings_ids = ["switch", "model", "jailbreak"];
 	settings_elements = settings_ids.map((id) => document.getElementById(id));
@@ -509,8 +484,26 @@ 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 = "";
 	}
 }
+
+function createElement(tag, { classNames, id, innerHTML, textContent } = {}) {
+	const el = document.createElement(tag);
+	if (classNames) {
+		el.classList.add(...classNames);
+	}
+	if (id) {
+		el.id = id;
+	}
+	if (innerHTML) {
+		el.innerHTML = innerHTML;
+	}
+	if (textContent) {
+		const preElement = document.createElement("pre");
+		preElement.textContent = textContent;
+		el.appendChild(preElement);
+	}
+	return el;
+}

client/js/sidebar-toggler.js

@@ -0,0 +1,34 @@
+const sidebar = document.querySelector(".sidebar");
+const menuButton = document.querySelector(".menu-button");
+
+function toggleSidebar(event) {
+    if (sidebar.classList.contains("shown")) {
+        hideSidebar(event.target);
+    } else {
+        showSidebar(event.target);
+    }
+    window.scrollTo(0, 0);
+}
+
+function showSidebar(target) {
+    sidebar.classList.add("shown");
+    target.classList.add("rotated");
+    document.body.style.overflow = "hidden";
+}
+
+function hideSidebar(target) {
+    sidebar.classList.remove("shown");
+    target.classList.remove("rotated");
+    document.body.style.overflow = "auto";
+}
+
+menuButton.addEventListener("click", toggleSidebar);
+
+document.body.addEventListener('click', function(event) {
+    if (event.target.matches('.conversation-title')) {
+        const menuButtonStyle = window.getComputedStyle(menuButton);
+        if (menuButtonStyle.display !== 'none') {
+            hideSidebar(menuButton);
+        }
+    }
+});