From 690e7b936828087949cc96c815ab8e0debf8eb5c Mon Sep 17 00:00:00 2001
From: Davidasx <81460770+Davidasx@users.noreply.github.com>
Date: Thu, 7 Nov 2024 12:26:57 +0800
Subject: [PATCH] Version 3.2.4.3

---
 changelog.md                           |  14 +-
 index.html                             |  29 +-
 static/i18n.js                         |  48 ----
 static/locales.json                    |  57 ++++
 static/locales/en.json                 |  18 --
 static/locales/zh-cn.json              |  18 --
 static/locales/zh-hk.json              |  18 --
 static/{ => scripts}/formatter.js      |   2 -
 static/scripts/i18n.js                 |  64 +++++
 static/{scripts.js => scripts/main.js} |  13 +-
 static/{ => scripts}/message.js        |   1 +
 static/{ => scripts}/model.js          |   0
 static/styles.css                      | 366 -------------------------
 static/styles/components.css           | 145 ++++++++++
 static/styles/layout.css               |  10 +
 static/styles/mobile.css               |  94 +++++++
 static/styles/settings.css             | 194 +++++++++++++
 17 files changed, 603 insertions(+), 488 deletions(-)
 delete mode 100644 static/i18n.js
 create mode 100644 static/locales.json
 delete mode 100644 static/locales/en.json
 delete mode 100644 static/locales/zh-cn.json
 delete mode 100644 static/locales/zh-hk.json
 rename static/{ => scripts}/formatter.js (98%)
 create mode 100644 static/scripts/i18n.js
 rename static/{scripts.js => scripts/main.js} (96%)
 rename static/{ => scripts}/message.js (99%)
 rename static/{ => scripts}/model.js (100%)
 delete mode 100644 static/styles.css
 create mode 100644 static/styles/components.css
 create mode 100644 static/styles/layout.css
 create mode 100644 static/styles/mobile.css
 create mode 100644 static/styles/settings.css

diff --git a/changelog.md b/changelog.md
index 4d0899b..4c88ad7 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,13 +1,23 @@
 ## Current Version:
 
-[![](https://img.shields.io/badge/Dev-3.2.4.1-blue)](https://github.com/Davidasx/flask-gpt/tree/dev)
+[![](https://img.shields.io/badge/Dev-3.2.4.3-blue)](https://github.com/Davidasx/flask-gpt/tree/dev)
 [![](https://img.shields.io/badge/Main-3.2.3-red)](https://github.com/Davidasx/flask-gpt/tree/main)
 
 ## Update Log (only after 3.1.0):
 
+### 3.2.4.3
+
+#### [![](https://img.shields.io/badge/Dev-20241107-blue)](https://github.com/Davidasx/flask-gpt)
+
+Minor fixes.
+
+Improvements to the filesystem structure.
+
+Updated sender button.
+
 ### 3.2.4.2
 
-#### [![](https://img.shields.io/badge/Dev-20241107-blue)](https://github.com/Davidasx/flask-gpt/)
+#### [![](https://img.shields.io/badge/Dev-20241107-blue)](https://github.com/Davidasx/flask-gpt/tree/2bb503973ea2eb8afe60c711d8dec9e1654588dd)
 
 New feature: add custom models to the settings.
 
diff --git a/index.html b/index.html
index b9b4d70..a282498 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,10 @@
         href="https://www.freelogovectors.net/wp-content/uploads/2023/01/chatgpt-logo-freelogovectors.net_.png"
         type="image/svg+xml">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <link rel="stylesheet" href="static/styles.css">
+    <link rel="stylesheet" href="static/styles/layout.css">
+    <link rel="stylesheet" href="static/styles/settings.css">
+    <link rel="stylesheet" href="static/styles/components.css">
+    <link rel="stylesheet" href="static/styles/mobile.css">
     <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.js?features=es6"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 </head>
@@ -23,22 +26,26 @@
         <div class="chat-input">
             <input type="text" id="message" placeholder="Enter your message" onkeydown="checkEnter(event)"
                 oninput="checkMessage()">
-            <button id="send-button" onclick="sendMessage()" data-i18n="send" disabled>Send</button>
+            <button id="send-button" onclick="sendMessage()" class="send-button" data-i18n-title="send" disabled>
+                <i class="fas fa-paper-plane"></i>
+            </button>
         </div>
     </div>
 
     <!-- Modal for settings -->
     <div id="settings-modal" class="modal">
         <div class="modal-content">
-            <span class="close" onclick="closeSettings()">&times;</span>
-            <h3 data-i18n="settings">Settings</h3>
+            <div class="modal-header">
+                <h3 data-i18n="settings">Settings</h3>
+                <span class="close" onclick="closeSettings()">&times;</span>
+            </div>
             <h4 data-i18n="api-settings">API Settings</h4>
             <div class="input-group">
-                <label for="base-url" data-i18n="base-url">Base URL:</label>
+                <label for="base-url">Base URL:</label>
                 <input type="text" id="base-url" placeholder="Base URL">
             </div>
             <div class="input-group">
-                <label for="api-key" data-i18n="api-key">API Key:</label>
+                <label for="api-key">API Key:</label>
                 <input type="text" id="api-key" placeholder="API Key">
             </div>
             <div class="button-container-end">
@@ -82,11 +89,11 @@ <h4 data-i18n="history">Chat History</h4>
         </div>
     </div>
 
-    <script src="static/formatter.js"></script>
-    <script src="static/message.js"></script>
-    <script src="static/scripts.js"></script>
-    <script src="static/i18n.js"></script>
-    <script src="static/model.js"></script>
+    <script src="static/scripts/formatter.js"></script>
+    <script src="static/scripts/message.js"></script>
+    <script src="static/scripts/main.js"></script>
+    <script src="static/scripts/i18n.js"></script>
+    <script src="static/scripts/model.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/static/i18n.js b/static/i18n.js
deleted file mode 100644
index 14212b0..0000000
--- a/static/i18n.js
+++ /dev/null
@@ -1,48 +0,0 @@
-async function loadLanguage(lang) {
-    const response = await fetch(`/static/locales/${lang}.json`);
-    const translations = await response.json();
-    localStorage.setItem(`translations_${lang}`, JSON.stringify(translations));
-    localStorage.setItem(`translations_version_${lang}`, translations.version);
-    return translations;
-}
-
-function translatePage(translations) {
-    document.querySelectorAll('[data-i18n]').forEach(element => {
-        const key = element.getAttribute('data-i18n');
-        element.textContent = translations[key];
-    });
-    const messageElement = document.getElementById('message');
-    if (messageElement) {
-        messageElement.placeholder = translations['input'];
-    }
-}
-
-async function setLanguage(lang) {
-    const response = await fetch(`/static/locales/${lang}.json`);
-    const latestTranslations = await response.json();
-    const latestVersion = latestTranslations.version;
-
-    let storedTranslations = JSON.parse(localStorage.getItem(`translations_${lang}`));
-    const storedVersion = localStorage.getItem(`translations_version_${lang}`);
-
-    if (!storedTranslations || storedVersion !== latestVersion) {
-        storedTranslations = await loadLanguage(lang);
-    }
-
-    translatePage(storedTranslations);
-    localStorage.setItem('language', lang);
-}
-
-// Automatically load the user's last selected language
-document.addEventListener('DOMContentLoaded', () => {
-    const savedLanguage = localStorage.getItem('language') || 'en';
-    document.getElementById('language-select').value = savedLanguage;
-    setLanguage(savedLanguage);
-});
-
-// Translation function
-function translate(key) {
-    const lang = localStorage.getItem('language') || 'en';
-    const translations = JSON.parse(localStorage.getItem(`translations_${lang}`)) || {};
-    return translations[key] || key;
-}
\ No newline at end of file
diff --git a/static/locales.json b/static/locales.json
new file mode 100644
index 0000000..38f1605
--- /dev/null
+++ b/static/locales.json
@@ -0,0 +1,57 @@
+{
+    "version": "3.2.4.3",
+    "translations":{
+        "en": {
+            "input": "Enter your message",
+            "send": "Send",
+            "settings": "Settings",
+            "api-settings": "API Settings",
+            "history": "Chat History",
+            "sync": "Sync",
+            "clear": "Clear Memory",
+            "save": "Save",
+            "language": "Language",
+            "invalid-uuid": "Please enter a valid UUID",
+            "unknown-error": "Unknown Error",
+            "uuid-not-found": "UUID does not exist",
+            "memory-clear": "Are you sure you want to clear the memory?",
+            "model": "Model",
+            "custom": "Custom"
+        },
+        "zh-cn": {
+            "input": "输入你的消息",
+            "send": "发送",
+            "settings": "设置",
+            "api-settings": "API 设置",
+            "history": "聊天记录",
+            "sync": "同步",
+            "clear": "清空记忆",
+            "save": "保存",
+            "language": "语言",
+            "invalid-uuid": "请输入有效的UUID",
+            "unknown-error": "未知错误",
+            "uuid-not-found": "UUID不存在",
+            "memory-clear": "确定要清除记忆吗？",
+            "model": "模型",
+            "custom": "自定义"
+        },
+        "zh-hk": {
+            "version": "3.2.4.2",
+            "input": "輸入你的消息",
+            "send": "發送",
+            "settings": "設置",
+            "api-settings": "API 設置",
+            "history": "聊天記錄",
+            "sync": "同步",
+            "clear": "清空記憶",
+            "save": "保存",
+            "language": "語言",
+            "invalid-uuid": "請輸入有效的UUID",
+            "unknown-error": "未知錯誤",
+            "uuid-not-found": "UUID不存在",
+            "memory-clear": "確定要清除記憶嗎？",
+            "model": "模型",
+            "custom": "自定義"
+        }
+    }
+}
\ No newline at end of file
diff --git a/static/locales/en.json b/static/locales/en.json
deleted file mode 100644
index b4b072e..0000000
--- a/static/locales/en.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-    "version": "3.2.4.2",
-    "input": "Enter your message",
-    "send": "Send",
-    "settings": "Settings",
-    "api-settings": "API Settings",
-    "history": "Chat History",
-    "sync": "Sync",
-    "clear": "Clear Memory",
-    "save": "Save",
-    "language": "Language",
-    "invalid-uuid": "Please enter a valid UUID",
-    "unknown-error": "Unknown Error",
-    "uuid-not-found": "UUID does not exist",
-    "memory-clear": "Are you sure you want to clear the memory?",
-    "model": "Model",
-    "custom": "Custom"
-}
\ No newline at end of file
diff --git a/static/locales/zh-cn.json b/static/locales/zh-cn.json
deleted file mode 100644
index 8c99910..0000000
--- a/static/locales/zh-cn.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-    "version": "3.2.4.2",
-    "input": "输入你的消息",
-    "send": "发送",
-    "settings": "设置",
-    "api-settings": "API 设置",
-    "history": "聊天记录",
-    "sync": "同步",
-    "clear": "清空记忆",
-    "save": "保存",
-    "language": "语言",
-    "invalid-uuid": "请输入有效的UUID",
-    "unknown-error": "未知错误",
-    "uuid-not-found": "UUID不存在",
-    "memory-clear": "确定要清除记忆吗？",
-    "model": "模型",
-    "custom": "自定义"
-}
\ No newline at end of file
diff --git a/static/locales/zh-hk.json b/static/locales/zh-hk.json
deleted file mode 100644
index f3f4baa..0000000
--- a/static/locales/zh-hk.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-    "version": "3.2.4.2",
-    "input": "輸入你的消息",
-    "send": "發送",
-    "settings": "設置",
-    "api-settings": "API 設置",
-    "history": "聊天記錄",
-    "sync": "同步",
-    "clear": "清空記憶",
-    "save": "保存",
-    "language": "語言",
-    "invalid-uuid": "請輸入有效的UUID",
-    "unknown-error": "未知錯誤",
-    "uuid-not-found": "UUID不存在",
-    "memory-clear": "確定要清除記憶嗎？",
-    "model": "模型",
-    "custom": "自定義"
-}
\ No newline at end of file
diff --git a/static/formatter.js b/static/scripts/formatter.js
similarity index 98%
rename from static/formatter.js
rename to static/scripts/formatter.js
index 6fdec92..8dd2af3 100644
--- a/static/formatter.js
+++ b/static/scripts/formatter.js
@@ -102,7 +102,6 @@ function formatMessage(message) {
         // Remove the same number of leading spaces from each line
         p2 = lines.map(line => line.substring(minLeadingSpaces)).join('\n');
         indentLevel = minLeadingSpaces;
-        console.log('Indent=' + indentLevel);
 
         for (let i = 0; i < p2.length; i++) {
             const char = p2[i];
@@ -162,7 +161,6 @@ function formatMessage(message) {
 
     // Remove blank lines at the end of code blocks
     message = message.replace(/<\/pre>\n+/gim, '</pre>');
-    console.log(message);
     answer = message.trim();
     message = original;
     return answer;
diff --git a/static/scripts/i18n.js b/static/scripts/i18n.js
new file mode 100644
index 0000000..af6b95c
--- /dev/null
+++ b/static/scripts/i18n.js
@@ -0,0 +1,64 @@
+async function loadTranslations() {
+    const response = await fetch('/static/locales.json');
+    const data = await response.json();
+    return data;
+}
+
+function translatePage(translations, lang) {
+    document.querySelectorAll('[data-i18n]').forEach(element => {
+        const key = element.getAttribute('data-i18n');
+        if (translations[lang] && translations[lang][key]) {
+            element.textContent = translations[lang][key];
+        } else {
+            element.textContent = key;
+        }
+    });
+
+    document.querySelectorAll('[data-i18n-title]').forEach(element => {
+        const key = element.getAttribute('data-i18n-title');
+        if (translations[lang] && translations[lang][key]) {
+            element.setAttribute('title', translations[lang][key]);
+        } else {
+            element.setAttribute('title', key);
+        }
+    });
+
+    const messageElement = document.getElementById('message');
+    if (messageElement) {
+        if (translations[lang] && translations[lang]['input']) {
+            messageElement.placeholder = translations[lang]['input'];
+        } else {
+            messageElement.placeholder = 'Enter your message';
+        }
+    }
+}
+
+function translate(key) {
+    const lang = localStorage.getItem('language') || 'en';
+    const allTranslations = JSON.parse(localStorage.getItem('allTranslations')) || {};
+    return allTranslations[lang][key] || key;
+}
+
+async function setLanguage(lang) {
+    const allTranslations = JSON.parse(localStorage.getItem('allTranslations')) || {};
+    translatePage(allTranslations, lang);
+    localStorage.setItem('language', lang);
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const savedLanguage = localStorage.getItem('language') || 'en';
+    const storedVersion = localStorage.getItem('translations_version');
+    const data = await loadTranslations();
+    const currentVersion = data.version;
+    const allTranslations = data.translations;
+
+    if (storedVersion !== currentVersion) {
+        localStorage.setItem('allTranslations', JSON.stringify(allTranslations));
+        localStorage.setItem('translations_version', currentVersion);
+    }
+
+    translatePage(allTranslations, savedLanguage);
+    const translations = JSON.parse(localStorage.getItem('allTranslations')) || allTranslations;
+    document.getElementById('language-select').value = savedLanguage;
+    await setLanguage(savedLanguage, translations);
+});
\ No newline at end of file
diff --git a/static/scripts.js b/static/scripts/main.js
similarity index 96%
rename from static/scripts.js
rename to static/scripts/main.js
index 89201eb..1b7f375 100644
--- a/static/scripts.js
+++ b/static/scripts/main.js
@@ -121,7 +121,9 @@ function checkMessage() {
 }
 
 function openSettings() {
-    document.getElementById('settings-modal').style.display = "block";
+    const modal = document.getElementById('settings-modal');
+    modal.classList.add('show');
+    modal.style.removeProperty('display');
     // Get current configuration and fill in the text boxes
     const baseURL = getCookie('base_url');
     const apiKey = getCookie('api_key');
@@ -132,7 +134,8 @@ function openSettings() {
 }
 
 function closeSettings() {
-    document.getElementById('settings-modal').style.display = "none";
+    const modal = document.getElementById('settings-modal');
+    modal.classList.remove('show');
 }
 
 function generateUUID() {
@@ -203,7 +206,7 @@ document.addEventListener('DOMContentLoaded', () => {
 window.onclick = function (event) {
     const modal = document.getElementById('settings-modal');
     if (event.target == modal) {
-        modal.style.display = "none";
+        closeSettings();
     }
 }
 
@@ -293,13 +296,13 @@ document.getElementById('sync-button').addEventListener('click', () => {
 });
 
 document.addEventListener('DOMContentLoaded', () => {
-    // 禁用发送和设置按钮
+    // Disable send and settings buttons initially
     const sendButton = document.getElementById('send-button');
     const settingsButton = document.getElementById('settings-button');
     sendButton.disabled = true;
     settingsButton.disabled = true;
 
-    // 2秒后启用按钮
+    // Enable buttons after 2 seconds
     setTimeout(() => {
         settingsButton.disabled = false;
     }, 2000);
diff --git a/static/message.js b/static/scripts/message.js
similarity index 99%
rename from static/message.js
rename to static/scripts/message.js
index def7a9f..1ffabb1 100644
--- a/static/message.js
+++ b/static/scripts/message.js
@@ -165,6 +165,7 @@ function sendMessage(message = null, showUserBubble = true, hidden = false) {
         if (userMessage) {
             document.getElementById('chat-messages').removeChild(userMessage);
             document.getElementById('message').value = message;
+            document.getElementById('send-button').disabled = false;
 
             fetch(`/delete_message?user_id=${uuid}`, {
                 method: 'POST',
diff --git a/static/model.js b/static/scripts/model.js
similarity index 100%
rename from static/model.js
rename to static/scripts/model.js
diff --git a/static/styles.css b/static/styles.css
deleted file mode 100644
index de3008f..0000000
--- a/static/styles.css
+++ /dev/null
@@ -1,366 +0,0 @@
-body {
-    font-family: Arial, sans-serif;
-    background-color: #f4f4f4;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-}
-
-.chat-container {
-    background-color: #fff;
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-}
-
-.chat-messages {
-    padding: 10px;
-    flex: 1;
-    overflow-y: auto;
-    border-bottom: 1px solid #ddd;
-}
-
-.chat-input {
-    display: flex;
-    padding: 10px;
-    flex-wrap: wrap;
-}
-
-.chat-input input {
-    flex: 1;
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    margin-right: 10px;
-    margin-bottom: 10px;
-}
-
-.chat-input button {
-    padding: 10px 20px;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-bottom: 10px;
-}
-
-.chat-input button:disabled {
-    background-color: #ccc;
-    cursor: not-allowed;
-}
-
-.message {
-    margin-bottom: 10px;
-    display: flex;
-    align-items: flex-start;
-}
-
-.message.user {
-    justify-content: flex-end;
-}
-
-.message.bot {
-    justify-content: flex-start;
-}
-
-.message img {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    margin-right: 10px;
-    margin-left: 0;
-}
-
-.message.user img {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    margin-left: 10px;
-    margin-right: 0;
-}
-
-.message .bubble {
-    max-width: 70%;
-    padding: 10px;
-    border-radius: 10px;
-    background-color: #f1f1f1;
-    position: relative;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-
-.message.user .bubble {
-    max-width: 70%;
-    padding: 10px;
-    border-radius: 10px;
-    background-color: #007bff;
-    color: #fff;
-    position: relative;
-    word-wrap: break-word;
-    white-space: pre-wrap;
-}
-
-.message .bubble h1 {
-    font-size: 2em;
-    font-weight: bold;
-}
-
-.message .bubble h2 {
-    font-size: 1.5em;
-    font-weight: bold;
-}
-
-.message .bubble h3 {
-    font-size: 1.17em;
-    font-weight: bold;
-}
-
-.message .bubble h4 {
-    font-size: 1em;
-    font-weight: bold;
-}
-
-.message .bubble h5 {
-    font-size: 0.83em;
-    font-weight: bold;
-}
-
-.message .bubble h6 {
-    font-size: 0.67em;
-    font-weight: bold;
-}
-
-/* Modal styles */
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0, 0, 0);
-    background-color: rgba(0, 0, 0, 0.4);
-    padding-top: 60px;
-    overflow: auto;
-}
-
-.modal-content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #fefefe;
-    /*margin: 5% auto;*/
-    padding: 20px;
-    border: 1px solid #888;
-    width: 100%;
-    max-width: 500px;
-    border-radius: 8px;
-}
-
-.close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-/* New styles for buttons */
-.modal-content button {
-    padding: 10px 20px;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    margin: 5px;
-}
-
-.modal-content button:hover {
-    background-color: #0056b3;
-}
-
-.modal-content button:disabled {
-    background-color: #ccc;
-    cursor: not-allowed;
-}
-
-.modal-content #cancel-config-button {
-    background-color: #dc3545;
-}
-
-.modal-content #cancel-config-button:hover {
-    background-color: #c82333;
-}
-
-.input-group {
-    margin-bottom: 15px;
-}
-
-.input-group label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: bold;
-}
-
-.input-group input {
-    width: 100%;
-    padding: 8px;
-    box-sizing: border-box;
-}
-
-.modal-content #clear-button {
-    background-color: #dc3545;
-}
-
-.modal-content #clear-button:hover {
-    background-color: #c82333;
-}
-
-/* Position settings button in the top-left corner */
-.settings-button {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    padding: 10px;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-}
-
-.settings-button i {
-    font-size: 24px;
-}
-
-.modal-content .button-container-end {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 10px;
-}
-
-.modal-content .button-container-start {
-    display: flex;
-    justify-content: flex-start;
-    margin-top: 10px;
-}
-
-/* Responsive design */
-@media (max-width: 600px) {
-    .chat-container {
-        width: 100%;
-        height: 100%;
-        border-radius: 0;
-    }
-
-    .chat-input input {
-        margin-right: 0;
-    }
-
-    .chat-input button {
-        width: 100%;
-        margin-right: 0;
-    }
-
-    .message .bubble {
-        max-width: 80%;
-        word-wrap: break-word;
-        overflow-wrap: break-word;
-    }
-
-    .message.user .bubble {
-        max-width: 80%;
-        word-wrap: break-word;
-        overflow-wrap: break-word;
-    }
-
-    .modal-content {
-        width: 90%;
-        padding: 10px;
-    }
-
-    .modal-content button {
-        width: 100%;
-        margin: 5px 0;
-    }
-}
-
-.modal .close {
-    position: absolute;
-    top: 10px;
-    right: 20px;
-    font-size: 30px;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.modal .close:hover,
-.modal .close:focus {
-    color: #555;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.model-selector-container {
-    display: flex;
-    align-items: center;
-    margin-top: 5px;
-    /* 根据需要调整间距 */
-}
-
-/* 样式化模型选择器 */
-#model-select {
-    height: 40px;
-    /* 确保与输入框一致 */
-    padding: 5px;
-    font-size: 16px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-
-/* 样式化自定义模型输入框 */
-.custom-model-input {
-    height: 40px;
-    /* 与选择器高度相同 */
-    padding: 5px 10px;
-    font-size: 16px;
-    margin-left: 10px;
-    /* 两者之间的间距 */
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    flex: 1;
-    /* 使输入框扩展以填充可用空间 */
-    box-sizing: border-box;
-}
-
-/* 响应式调整（可选） */
-@media (max-width: 600px) {
-    .model-selector-container {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .custom-model-input {
-        margin-left: 0;
-        margin-top: 10px;
-        width: 100%;
-    }
-}
\ No newline at end of file
diff --git a/static/styles/components.css b/static/styles/components.css
new file mode 100644
index 0000000..a172e7e
--- /dev/null
+++ b/static/styles/components.css
@@ -0,0 +1,145 @@
+.chat-container {
+    background-color: #fff;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.chat-messages {
+    padding: 10px;
+    flex: 1;
+    overflow-y: auto;
+    border-bottom: 1px solid #ddd;
+}
+
+/* Message input area styles */
+.chat-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+/* Message input box styles */
+.chat-input input[type="text"] {
+    width: 100%;
+    padding: 10px 50px 10px 10px;
+    /* Reserve space on the right for the button */
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+/* Send button styles */
+.chat-input .send-button {
+    position: absolute;
+    right: 10px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 18px;
+    color: #555;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 0;
+    width: 40px;
+    /* Set fixed width to avoid overlapping the input box */
+}
+
+.chat-input .send-button:disabled {
+    color: #aaa;
+    cursor: not-allowed;
+}
+
+.chat-input .send-button:hover:not(:disabled) {
+    color: #000;
+}
+
+.message {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: flex-start;
+}
+
+.message.user {
+    justify-content: flex-end;
+}
+
+.message.bot {
+    justify-content: flex-start;
+}
+
+.message img {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-right: 10px;
+    margin-left: 0;
+}
+
+.message.user img {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-left: 10px;
+    margin-right: 0;
+}
+
+.message .bubble {
+    max-width: 70%;
+    padding: 10px;
+    border-radius: 10px;
+    background-color: #f1f1f1;
+    position: relative;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.message.user .bubble {
+    max-width: 70%;
+    padding: 10px;
+    border-radius: 10px;
+    background-color: #007bff;
+    color: #fff;
+    position: relative;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
+
+.message .bubble h1 {
+    font-size: 2em;
+    font-weight: bold;
+}
+
+.message .bubble h2 {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+.message .bubble h3 {
+    font-size: 1.17em;
+    font-weight: bold;
+}
+
+.message .bubble h4 {
+    font-size: 1em;
+    font-weight: bold;
+}
+
+.message .bubble h5 {
+    font-size: 0.83em;
+    font-weight: bold;
+}
+
+.message .bubble h6 {
+    font-size: 0.67em;
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/static/styles/layout.css b/static/styles/layout.css
new file mode 100644
index 0000000..c926b2e
--- /dev/null
+++ b/static/styles/layout.css
@@ -0,0 +1,10 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
diff --git a/static/styles/mobile.css b/static/styles/mobile.css
new file mode 100644
index 0000000..04b1ecb
--- /dev/null
+++ b/static/styles/mobile.css
@@ -0,0 +1,94 @@
+@media (max-width: 600px) {
+    .modal {
+        position: fixed;
+        z-index: 1;
+        /* Use Flexbox to center the modal content */
+        display: none;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+
+    .modal.show {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .modal-content {
+        margin: 0 auto;
+    }
+
+    .chat-container {
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+    }
+
+    .chat-input {
+        padding: 0 0;
+        /* Add left and right padding */
+        position: relative;
+    }
+
+    /* Adjust the right padding of the input box to reserve space for the send button */
+    .chat-input input[type="text"] {
+        padding: 10px 40px 10px 10px;
+        /* Reserve space for send button on the right */
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    /* Send button styles */
+    .chat-input .send-button {
+        position: absolute;
+        right: 10px;
+        width: 30px;
+        /* Adjust send button width for mobile devices */
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+    }
+
+    /* Ensure the icon inside the send button fits the button */
+    .chat-input .send-button i {
+        font-size: 16px;
+        /* Adjust icon size to fit the button */
+    }
+
+    .message .bubble {
+        max-width: 80%;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+    }
+
+    /* Adjust modal-content for mobile devices */
+    .modal-content {
+        width: 100%;
+        max-width: 100%;
+        margin: 10px;
+        padding: 15px;
+        max-height: 80vh;
+        overflow-y: auto;
+        border-radius: 8px;
+        box-sizing: border-box;
+    }
+
+    .custom-model-input {
+        margin-left: 0;
+        margin-top: 10px;
+        width: 100%;
+    }
+
+    /* Adjust close button position for mobile */
+    .modal .close {
+        top: 5px;
+        right: 10px;
+        font-size: 24px;
+    }
+}
\ No newline at end of file
diff --git a/static/styles/settings.css b/static/styles/settings.css
new file mode 100644
index 0000000..e07a0dd
--- /dev/null
+++ b/static/styles/settings.css
@@ -0,0 +1,194 @@
+/* Modal styles */
+.modal {
+    position: fixed;
+    z-index: 1;
+    /* Use Flexbox to center the modal content */
+    display: none;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal.show {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Modal content scrollbar styles */
+.modal-content {
+    background-color: #fefefe;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 100%;
+    max-width: 500px;
+    border-radius: 8px;
+    position: relative;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+/* New styles for buttons */
+.modal-content button {
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin: 5px;
+}
+
+.modal-content button:hover {
+    background-color: #0056b3;
+}
+
+.modal-content button:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
+
+.modal-content #cancel-config-button {
+    background-color: #dc3545;
+}
+
+.modal-content #cancel-config-button:hover {
+    background-color: #c82333;
+}
+
+.input-group {
+    margin-bottom: 15px;
+}
+
+.input-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.input-group input {
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+}
+
+.modal-content #clear-button {
+    background-color: #dc3545;
+}
+
+.modal-content #clear-button:hover {
+    background-color: #c82333;
+}
+
+/* Position settings button in the top-left corner */
+.settings-button {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    padding: 10px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+.settings-button i {
+    font-size: 24px;
+}
+
+.modal-content .button-container-end {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+}
+
+.modal-content .button-container-start {
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 10px;
+}
+
+.modal .close {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    font-size: 30px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.modal .close:hover,
+.modal .close:focus {
+    color: #555;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.model-selector-container {
+    display: flex;
+    align-items: center;
+    margin-top: 5px;
+    /* Adjust spacing as needed */
+}
+
+/* Style the model selector */
+#model-select {
+    height: 40px;
+    /* Ensure it matches the input box */
+    padding: 5px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+/* Style the custom model input box */
+.custom-model-input {
+    height: 40px;
+    /* Match the height of the selector */
+    padding: 5px 10px;
+    font-size: 16px;
+    margin-left: 10px;
+    /* Spacing between the two */
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    flex: 1;
+    /* Allow the input box to expand to fill available space */
+    box-sizing: border-box;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.modal-header h3 {
+    margin: 0;
+    /* Remove default margin */
+}
+
+.modal-header .close {
+    position: static;
+    /* Override previous absolute positioning */
+    padding: 0 10px;
+    line-height: 1;
+    margin: -5px -10px 0 0;
+    /* Fine-tune alignment */
+}
\ No newline at end of file