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