Merge pull request #48 from tannermiddleton/dev/conversations-and-set…

…tings-left-pane

Restyle Settings and Converations Dialogs

.firebase/hosting.ZGlzdA.cache

@@ -1,39 +1,33 @@
-favicon.ico,1691260354889,157326f933ef6ca9e9b6cf28c0fd72d1fa39b03af16c815ccc5a6c8d3a516d60
-webfonts/fa-brands-400.ttf,1682134391268,876ae94a6a46e86b43e4d773912ca51ef751664bbf30dbbaf266b0be91fe1f4a
-webfonts/fa-brands-400.woff2,1682134391282,0d79990d2b8c0e1eaddbc511ab1a6bdeace580a4e908c13635d2a71af2bdc79d
-webfonts/fa-regular-400.ttf,1682134391269,001c629a2476cc04d8ca2ca945353e48d8a09e368c563bc4048a094a2b3eac8a
-webfonts/fa-regular-400.woff2,1682134391283,c7cade12f8323feb4c2b6c1f6a71aa302aa71e82dc0e7e19ea319959b7f7b0f5
-webfonts/fa-solid-900.ttf,1682134391276,227a27a04c6ea4b776bfe99ed488c652c9fc109bac72f2afa5211199e0d460d7
-webfonts/fa-solid-900.woff2,1682134391286,a455cc71530efd3124548b1f182e743f69274f53bd6f70618386976203a0cc26
-webfonts/fa-v4compatibility.ttf,1682134391278,ed9b0547d420749d20d18b3c09b2bfa94d9456279365184f19ab62b3fb648df2
-webfonts/fa-v4compatibility.woff2,1682134391287,cd14d663609b5d1829fc42299c2c7f4d87c347a588a17f9b07e41f21d8a23383
-webfonts/Helvetica-Bold.ttf,1690401292951,0df8016e09cfb34b1e035ca9da1c1e876af1cc3242663d24a19f0da5b3bf0047
-webfonts/Helvetica-BoldOblique.ttf,1690401292974,b116e1c5f9cc0a27a4245ac9b2122cb25229bb613186b629eda069d2014c8506
-webfonts/helvetica-compressed-5871d14b6903a.otf,1690401292900,1b4dd3614dd6bd8c9c410dbbae824fd49c4bbafa8f3252c1dca64620c3777805
-webfonts/helvetica-light-587ebe5a59211.ttf,1690401293003,cb377af5917b54aa591c2934c3c1f3d8032031d91188a7247dcba840b7f76974
-webfonts/Helvetica-Oblique.ttf,1690401292880,c72da902d70dd5cbf69a204ca0f0705764d1c57faf57cda204a6a9ade812db2d
-webfonts/helvetica-rounded-bold-5871d05ead8de.otf,1690401292928,207ebab046dcc584657e8ec340a70477b1c658f974aa4ec29580155e5a39ee64
-webfonts/Helvetica.ttf,1690401292848,ba1cec8e429ded3ae29604df6d6c84b5b6877bca265d0a38c9def3d684bb169f
-webfonts/LICENSE.txt,1682826424110,17f0f0a955b32272a4f41fd44841f95b2a7333f1641116547d4231e7b7af8361
-webfonts/Roboto-Black.ttf,1682826424072,9f18b2a4f3c1046d653226d7b5109f3c889ab3e5a4afb898f380d2b8108d4717
-webfonts/Roboto-BlackItalic.ttf,1682826424090,0fc2eb4af7fb13a7dfac47ac3a13d4c6093bbdccd0fa26a20ad808e37a02b56f
-webfonts/Roboto-Bold.ttf,1682826424037,b21ff63b5803dbbe07858bc5c092c29ccd1b35cee4ab587924c08c1cf366a5ad
-webfonts/Roboto-BoldItalic.ttf,1682826424055,0004f11ac0a6ea289fbfbd7b56f6a4799ea36cee953e07dfcde28f62189d072c
-webfonts/Roboto-Italic.ttf,1682826423982,f4e5c22e4f844fa4be716b4999c0f213f0ee5d64d2b45e1bb983565627f4e2e9
-webfonts/Roboto-Light.ttf,1682826423929,3ed22e27dbbe98925edd8638a48e11934328095cbc35cee246414991d5315462
-webfonts/Roboto-LightItalic.ttf,1682826423945,d87002a827bfbc8fa699624f77aa0ddb0f374f88ed13dc5ec05d6ade3844e118
-webfonts/Roboto-Medium.ttf,1682826424001,d96f4923a9191ff3b411ba76b9fce26615c218a5de64816d34cdb7ee439cb88c
-webfonts/Roboto-MediumItalic.ttf,1682826424020,02dd703bfdda7d1785604b0583637c308a8958516edfbaf2483ea84c39d85f7d
-webfonts/Roboto-Regular.ttf,1682826423962,1c7bf2ba074a4319cd14d388008c808189be71807a0827f21d052ea5d5fd588a
-webfonts/Roboto-Thin.ttf,1682826423886,b2394bd20f07962923e53983e3e8bb9e656ab100876c3dfd4b1d22f0c04533b2
-webfonts/Roboto-ThinItalic.ttf,1682826423909,adaf17c4bcdb0a809fc9df0e0fbb8c6cf17285bababe869c17e93d04cb8e6b0d
-index.html,1713126254088,2663ade33f62e63f7eb3a6e87e116a1b4da0004722abafc55eba0e9832fc24ab
-assets/manifest-DFIv5KAr.webmanifest,1713126254087,810b7c9a87e2883801da2a849debcffb135240eb37e9977238054a1db4506e2e
-assets/fa-regular-400-TCCU0xbi.woff2,1713126254087,c7cade12f8323feb4c2b6c1f6a71aa302aa71e82dc0e7e19ea319959b7f7b0f5
-assets/fa-regular-400-BSSd-Tma.ttf,1713126254088,001c629a2476cc04d8ca2ca945353e48d8a09e368c563bc4048a094a2b3eac8a
-assets/index-B4FBPbIQ.js,1713126254088,ba3ef0796ea10422c4c30ee03eff15e6d37a38a287759a4ad63dd7d681c0096d
-assets/fa-brands-400-C-jaCRNI.woff2,1713126254088,0d79990d2b8c0e1eaddbc511ab1a6bdeace580a4e908c13635d2a71af2bdc79d
-assets/fa-solid-900-tLH6XCuf.woff2,1713126254088,a455cc71530efd3124548b1f182e743f69274f53bd6f70618386976203a0cc26
-assets/index-r1S6-DPy.css,1713126254088,cd52577afc523cdc06fc4f03f551b714c0961ef7b52933264990fdbdd6c645d5
-assets/fa-brands-400-D7HcTrzQ.ttf,1713126254088,876ae94a6a46e86b43e4d773912ca51ef751664bbf30dbbaf266b0be91fe1f4a
-assets/fa-solid-900-f4MajOib.ttf,1713126254088,227a27a04c6ea4b776bfe99ed488c652c9fc109bac72f2afa5211199e0d460d7
+favicon.ico,1713127872612,157326f933ef6ca9e9b6cf28c0fd72d1fa39b03af16c815ccc5a6c8d3a516d60
+webfonts/fa-brands-400.ttf,1713127872657,876ae94a6a46e86b43e4d773912ca51ef751664bbf30dbbaf266b0be91fe1f4a
+webfonts/fa-brands-400.woff2,1713127872659,0d79990d2b8c0e1eaddbc511ab1a6bdeace580a4e908c13635d2a71af2bdc79d
+webfonts/fa-regular-400.ttf,1713127872660,001c629a2476cc04d8ca2ca945353e48d8a09e368c563bc4048a094a2b3eac8a
+webfonts/fa-regular-400.woff2,1713127872660,c7cade12f8323feb4c2b6c1f6a71aa302aa71e82dc0e7e19ea319959b7f7b0f5
+webfonts/fa-solid-900.ttf,1713127872665,227a27a04c6ea4b776bfe99ed488c652c9fc109bac72f2afa5211199e0d460d7
+webfonts/fa-solid-900.woff2,1713127872667,a455cc71530efd3124548b1f182e743f69274f53bd6f70618386976203a0cc26
+webfonts/fa-v4compatibility.ttf,1713127872668,ed9b0547d420749d20d18b3c09b2bfa94d9456279365184f19ab62b3fb648df2
+webfonts/fa-v4compatibility.woff2,1713127872668,cd14d663609b5d1829fc42299c2c7f4d87c347a588a17f9b07e41f21d8a23383
+webfonts/Helvetica-Bold.ttf,1713127872616,0df8016e09cfb34b1e035ca9da1c1e876af1cc3242663d24a19f0da5b3bf0047
+webfonts/Helvetica-BoldOblique.ttf,1713127872620,b116e1c5f9cc0a27a4245ac9b2122cb25229bb613186b629eda069d2014c8506
+webfonts/helvetica-compressed-5871d14b6903a.otf,1713127872668,1b4dd3614dd6bd8c9c410dbbae824fd49c4bbafa8f3252c1dca64620c3777805
+webfonts/helvetica-light-587ebe5a59211.ttf,1713127872669,cb377af5917b54aa591c2934c3c1f3d8032031d91188a7247dcba840b7f76974
+webfonts/Helvetica-Oblique.ttf,1713127872628,c72da902d70dd5cbf69a204ca0f0705764d1c57faf57cda204a6a9ade812db2d
+webfonts/helvetica-rounded-bold-5871d05ead8de.otf,1713127872670,207ebab046dcc584657e8ec340a70477b1c658f974aa4ec29580155e5a39ee64
+webfonts/Helvetica.ttf,1713127872631,ba1cec8e429ded3ae29604df6d6c84b5b6877bca265d0a38c9def3d684bb169f
+webfonts/LICENSE.txt,1713127872632,17f0f0a955b32272a4f41fd44841f95b2a7333f1641116547d4231e7b7af8361
+webfonts/Roboto-Black.ttf,1713127872633,9f18b2a4f3c1046d653226d7b5109f3c889ab3e5a4afb898f380d2b8108d4717
+webfonts/Roboto-BlackItalic.ttf,1713127872636,0fc2eb4af7fb13a7dfac47ac3a13d4c6093bbdccd0fa26a20ad808e37a02b56f
+webfonts/Roboto-Bold.ttf,1713127872637,b21ff63b5803dbbe07858bc5c092c29ccd1b35cee4ab587924c08c1cf366a5ad
+webfonts/Roboto-BoldItalic.ttf,1713127872639,0004f11ac0a6ea289fbfbd7b56f6a4799ea36cee953e07dfcde28f62189d072c
+webfonts/Roboto-Italic.ttf,1713127872640,f4e5c22e4f844fa4be716b4999c0f213f0ee5d64d2b45e1bb983565627f4e2e9
+webfonts/Roboto-Light.ttf,1713127872642,3ed22e27dbbe98925edd8638a48e11934328095cbc35cee246414991d5315462
+webfonts/Roboto-LightItalic.ttf,1713127872645,d87002a827bfbc8fa699624f77aa0ddb0f374f88ed13dc5ec05d6ade3844e118
+webfonts/Roboto-Medium.ttf,1713127872646,d96f4923a9191ff3b411ba76b9fce26615c218a5de64816d34cdb7ee439cb88c
+webfonts/Roboto-MediumItalic.ttf,1713127872648,02dd703bfdda7d1785604b0583637c308a8958516edfbaf2483ea84c39d85f7d
+webfonts/Roboto-Regular.ttf,1713127872651,1c7bf2ba074a4319cd14d388008c808189be71807a0827f21d052ea5d5fd588a
+webfonts/Roboto-Thin.ttf,1713127872653,b2394bd20f07962923e53983e3e8bb9e656ab100876c3dfd4b1d22f0c04533b2
+webfonts/Roboto-ThinItalic.ttf,1713127872654,adaf17c4bcdb0a809fc9df0e0fbb8c6cf17285bababe869c17e93d04cb8e6b0d
+index.html,1713626282874,aa4011f3c892c46d791c2a265aa69d41484bd95770f3971ee40a0739a1295b24
+assets/index-CHJbngqe.css,1713626282874,f244eece9f662e5298568d393321374a5ad1e91cf25ed2569cfbe36d6ae767ab
+assets/manifest-DFIv5KAr.webmanifest,1713626282874,810b7c9a87e2883801da2a849debcffb135240eb37e9977238054a1db4506e2e
+assets/index-DtnRWrSN.js,1713626282874,78bc7a2b7da90ffbb3194fda7e7d2c863fd2be66a752bdc2383423bf684cb5b4

.firebaserc

@@ -2,4 +2,4 @@
   "projects": {
     "default": "minimalgpt"
   }
-}
+}

README.md

@@ -1,7 +1,7 @@
 ## [Try MinimalGPT/MinimalClaude/MinimalLocal (Public Site)](https://minimalgpt.app/)
 
 ![Build Status](https://img.shields.io/badge/build-passing-brightgreen)
-![Version](https://img.shields.io/badge/version-5.0.1-blue)
+![Version](https://img.shields.io/badge/version-5.0.2-blue)
 ![License](https://img.shields.io/badge/license-MIT-green)
 
 **MinimalChat** is an open-source LLM chat web app designed to be as self-contained as possible. All conversations are stored locally on the client's device, with the only information being sent to the server being API calls to GPT or Claude (uses a CORS proxy) chat when the user sends a message and when a user saves a conversation to generate a conversation title.

src/components/conversations-dialog.vue

@@ -57,8 +57,6 @@ function toggleSidebar() {
 </template>
 
 <style lang="scss" scoped>
-
-
 $shadow-color: #252629;
 $shadow-offset-x: 0px;
 $shadow-offset-y: 1px;
@@ -67,14 +65,15 @@ $shadow-spread-radius: 0px;
 $icon-color: rgb(187, 187, 187);
 
 .import-export-container {
+    z-index: 10000;
 
     display: flex;
 
     .import-export-btn {
         align-self: flex-end; // Align the button to the right
         padding: 5px 10px;
         border: 1px solid #444;
-        border-radius: 12px;
+        border-radius: 0px;
         margin-right: 6px;
         background-color: #3d3c3e;
         color: white;
@@ -83,7 +82,7 @@ $icon-color: rgb(187, 187, 187);
         font-size: 18px;
         height: 50px;
         outline: none;
-        margin-bottom: -12px; // Add some margin at the bottom
+        margin-bottom: 6px; // Add some margin at the bottom
         max-width: 152px;
 
         &:hover {
@@ -98,9 +97,14 @@ $icon-color: rgb(187, 187, 187);
 }
 
 .scrollable-list {
-    height: 55vh;
+    height: 77vh;
     overflow: auto;
 
+    /* Media query for screens that are 600px wide or less */
+    @media (max-width: 600px) {
+        height: 75vh;
+    }
+
 
     ul {
         list-style-type: none;
@@ -129,29 +133,29 @@ $icon-color: rgb(187, 187, 187);
     font-size: 18px;
     font-weight: bold;
     text-align: center;
-    margin-top: -7px;
     position: relative;
     border-bottom: 5px solid gray;
+    padding-bottom: 25px;
+    padding-top: 25px;
 }
 
 .close-btn {
     align-self: flex-end; // Align the button to the right
     padding: 5px 10px;
     border: 1px solid #444;
-    border-radius: 12px;
     background-color: #3d3c3e;
     color: white;
     cursor: pointer;
-    width: 98%;
+    width: 99%;
     font-size: 18px;
+    margin-right: 6px;
     height: 50px;
     outline: none;
     margin-bottom: 10px; // Add some margin at the bottom
     transition: background-color 0.2s ease, transform 0.2s ease;
 
     &:hover {
-        background-color: #3e3e3f;
-        transform: scale(1.03);
+        background-color: #4a4a4c;
     }
 }
 

src/components/settings-dialog.vue

@@ -48,11 +48,11 @@ function toggleSidebar() {
 
 <template>
     <div class="settings-header">
-        <h2 @click="reloadPage">
-            <span>
+        <h2>
+            <span @click="reloadPage">
                 <RefreshCcw :size="23" :stroke-width="2" />
             </span>
-            Settings | V5.0.1
+            Settings | V5.0.2
         </h2>
     </div>
     <div class="sidebar-content-container">
@@ -153,8 +153,16 @@ $shadow-spread-radius: 0px;
 $icon-color: rgb(187, 187, 187);
 
 .sidebar-content-container {
+    height: 84vh;
     overflow: auto;
     text-overflow: clip;
+    padding: 6px;
+    z-index: 10000;
+
+    /* Media query for screens that are 600px wide or less */
+    @media (max-width: 600px) {
+        height: 82vh;
+    }
 }
 
 .select-dropdown {
@@ -187,7 +195,6 @@ $icon-color: rgb(187, 187, 187);
     align-self: flex-end; // Align the button to the right
     padding: 5px 10px;
     border: 1px solid #444;
-    border-radius: 12px;
     background-color: #3d3c3e;
     color: white;
     cursor: pointer;
@@ -224,7 +231,6 @@ $icon-color: rgb(187, 187, 187);
     align-self: flex-end; // Align the button to the right
     padding: 5px 10px;
     border: 1px solid #444;
-    border-radius: 12px;
     background-color: #3d3c3e;
     color: white;
     cursor: pointer;

src/views/ChatLayout.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable no-unused-vars -->
 
 <script setup>
-import { ref, onMounted, computed, watch } from 'vue';
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
 import { ChevronDown } from 'lucide-vue-next';
 import { loadConversationTitles, loadStoredConversations, fetchGPTResponseStream, generateDALLEImage } from '@/libs/gpt-api-access';
 import { fetchClaudeConversationTitle, streamClaudeResponse } from '@/libs/claude-api-access';
@@ -177,6 +177,7 @@ function updateUI(content, reset) {
 }
 
 function toggleSidebar() {
+    event.stopPropagation();
     isSidebarOpen.value = !isSidebarOpen.value;
 }
 //#endregion
@@ -220,6 +221,7 @@ function deleteCurrentConversation() {
 }
 
 function showConversations() {
+    event.stopPropagation();
     showConversationOptions.value = !showConversationOptions.value;
 }
 
@@ -721,13 +723,31 @@ const updateSetting = (field, value) => {
 
 //#endregion
 
-onMounted(() => {
+//#region Global Click Handling
+function handleGlobalClick(event) {
+    const settingsDialogElement = document.getElementById('settings-dialog');
+    const conversationsDialogElement = document.getElementById('conversations-dialog');
+
+    if (settingsDialogElement && !settingsDialogElement.contains(event.target) && isSidebarOpen.value) {
+        isSidebarOpen.value = false;
+    }
+    if (conversationsDialogElement && !conversationsDialogElement.contains(event.target) && showConversationOptions.value) {
+        showConversationOptions.value = false;
+    }
+}
+
+onUnmounted(() => {
+    document.removeEventListener('click', handleGlobalClick);
+});
+//#endregion
 
+onMounted(() => {
     selectedModel.value = localStorage.getItem("selectedModel") || "gpt-4-turbo";
-    selectConversation(lastLoadedConversationId.value); //by index
+    selectConversation(lastLoadedConversationId.value);
 
     messagesContainer = document.querySelector('.messages');
     messagesContainer.addEventListener('scroll', updateScrollButtonVisibility);
+    document.addEventListener('click', handleGlobalClick);
 });
 </script>
 
@@ -742,7 +762,7 @@ onMounted(() => {
         <!-- App Container -->
         <div class="app-container" id="app-container">
             <!-- Settings Sidebar -->
-            <div class="sidebar box" id="settings-dialog" :class="{ open: isSidebarOpen }">
+            <div class="sidebar-common sidebar-left box" id="settings-dialog" :class="{ open: isSidebarOpen }">
                 <settingsDialog :isSidebarOpen="isSidebarOpen" :selectedModel="selectedModel"
                     :localModelName="localModelName" :localModelEndpoint="localModelEndpoint"
                     :localSliderValue="localSliderValue" :gptKey="gptKey" :sliderValue="sliderValue"
@@ -764,7 +784,8 @@ onMounted(() => {
                     @toggle-sidebar="toggleSidebar" />
             </div>
             <!-- Conversations Sidebar -->
-            <div class="sidebar box" id="conversations-dialog" :class="{ open: showConversationOptions }">
+            <div class="sidebar-common sidebar-right box" id="conversations-dialog"
+                :class="{ 'open': showConversationOptions }">
                 <conversationsDialog :isSidebarOpen="isSidebarOpen" :conversations="conversations"
                     @toggle-sidebar="showConversations" @load-conversation="loadSelectedConversation"
                     @new-conversation="clearMessages" @import-conversations="handleImportConversations"
@@ -1023,71 +1044,40 @@ pre {
     background: #5d455e;
 }
 
-.sidebar {
+// Common styles for both sidebars
+.sidebar-common {
     background-color: #262431;
-    width: 90vw;
-    max-width: 650px;
-    border-radius: 8px;
-    padding: 8px;
-    border: 2px solid #3d3c3e;
-    overflow: auto;
-    max-height: 80vh;
-    min-height: 80vh;
-    min-height: 400px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    position: absolute;
-
-    opacity: 0;
-    z-index: -1;
-    transition: z-index 0.15s step-end, opacity 0.15s linear;
-    justify-content: space-between;
-    align-items: stretch;
-
-    // For Firefox
-    scrollbar-width: thin;
-    scrollbar-color: #665067 #665067;
-
-    .sidebar-content-container {
-        overflow: auto;
-        text-overflow: clip;
-    }
+    width: 50vw; // Adjust the width as needed
+    max-width: 100%; // Ensure it doesn't exceed the screen width
+    height: 100vh; // Full height
+    position: fixed; // Fixed position to stay in place
+    top: 0; // Align to the top
+    transform: translateX(-100%); // Start hidden (default left)
+    transition: transform 0.1s ease-in-out; // Smooth transition for sliding in and out
+    z-index: 100000; // Ensure it's above other content
+    overflow-y: auto; // Allow scrolling if content is too long
+    border-right: 2px solid #3d3c3e; // Optional border for styling
+    padding-left: 6px;
+    padding-right: 6px;
 
     &.open {
-        z-index: 99999999;
-        opacity: 1;
-
-        transition: z-index 0.15s step-start, opacity 0.15s linear;
+        transform: translateX(0); // Move into view when open
     }
 
-    .scrollable-list {
-        height: 55vh;
-        overflow: auto;
-
-
-        ul {
-            list-style-type: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        li {
-            padding: 10px;
-            border-bottom: 1px solid #ddd;
+    @media (max-width: 600px) {
+        width: 100vw; // Full width on smaller screens
+    }
+}
 
-            -webkit-user-select: none;
-            /* Safari */
-            -ms-user-select: none;
-            /* IE 10 and IE 11 */
-            user-select: none;
-            /* Standard syntax */
+// Specific styles for left sidebar
+.sidebar-left {
+    left: 0; // Align to the left side
+}
 
-            &:hover {
-                background-color: #3d3346;
-            }
-        }
-    }
+// Specific styles for right sidebar
+.sidebar-right {
+    right: 0; // Align to the right side
+    transform: translateX(100%); // Start hidden to the right
 }
 
 .sidebar::-webkit-scrollbar {