renamed local-model access lib to open-ai-api-standard. Updates to the styling of the converations panel.

added a new "start new conversation" option at the end of the conversations list for easily starting a new conversation.

Author: TannerMidd

src/components/chat-header.vue

@@ -2,7 +2,7 @@
 
 <script setup>
 import { ref, computed } from 'vue';
-import { Settings, Trash2, MessagesSquare, Save, Github } from 'lucide-vue-next';
+import { Settings, Trash2, MessagesSquare, MessageSquareDiff, Github } from 'lucide-vue-next';
 
 // Define props
 const props = defineProps({
@@ -72,7 +72,7 @@ function onShowConversationsClick() {
             <MessagesSquare :stroke-width="0.5" :size="30" />
         </div>
         <span class="save-icon" @click="clearMessages">
-            <Save :stroke-width="0.5" :size="30" />
+            <MessageSquareDiff :stroke-width="0.5" :size="30" />
         </span>
     </div>
 </template>
@@ -142,6 +142,7 @@ $shadow-spread-radius: 0px;
 }
 
 .save-icon {
+    display: none;
     padding: 2px;
     top: 10%;
     right: 10px;
@@ -154,6 +155,10 @@ $shadow-spread-radius: 0px;
     &:hover {
         transform: scale(1.15);
     }
+
+    @media (max-width: 600px) {
+        display: inline;
+    }
 }
 
 

src/components/conversations-dialog.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
-import { Eraser, Download, Upload } from 'lucide-vue-next';
+import { Eraser, Download, Upload, MessageSquarePlus } from 'lucide-vue-next';
 // import ToolTip from './ToolTip.vue';
 
 const props = defineProps({
@@ -47,7 +47,7 @@ function handleDoubleClick() {
 }
 
 onMounted(() => {
-    sidebarContentContainer.value = document.querySelector(".reize-container");
+    sidebarContentContainer.value = document.querySelector(".resize-container");
     sidebarContentContainer.value.style.width = '420px';
     const lastConversationId = parseInt(localStorage.getItem("lastConversationId")) || 0;
     const lastConversation = props.conversations.find(conversation => conversation.id === lastConversationId);
@@ -75,6 +75,9 @@ async function loadSelectedConversation(conversation) {
     emit('load-conversation', conversation);
 }
 
+function startNewConversation() {
+    emit('new-conversation');
+}
 
 function importConversations() {
     emit('import-conversations');
@@ -98,7 +101,7 @@ function toggleSidebar() {
 </script>
 
 <template>
-    <div class="reize-container">
+    <div class="resize-container">
 
         <div class="settings-header">
             <h2>
@@ -117,6 +120,12 @@ function toggleSidebar() {
                         :class="{ 'selected': selectedConversation && selectedConversation.id === conversation.id }">
                         <span>{{ conversation.conversation.title }}</span>
                     </li>
+                    <li class="new-conversation-option" @click="startNewConversation">
+                        <span class="new-icon">
+                            <MessageSquarePlus :stroke-width="1.0" /> &nbsp;&nbsp;
+                        </span>
+                        Start New Conversation
+                    </li>
                 </ul>
             </div>
 
@@ -141,7 +150,6 @@ $shadow-blur-radius: 2px;
 $shadow-spread-radius: 0px;
 $icon-color: rgb(187, 187, 187);
 
-
 .resize-handle {
     position: absolute;
     top: 0;
@@ -220,10 +228,36 @@ $icon-color: rgb(187, 187, 187);
         height: calc(87vh - 100px);
     }
 
+    max-width: 100%;
+    overflow-x: hidden;
     width: 100%;
     height: calc(97vh - 97px);
     min-height: 0vh;
     overflow: auto;
+    box-sizing: border-box;
+
+    .new-conversation-option {
+        text-align: left;
+        background-color: #0B302E;
+        color: #FFFFFF;
+        font-weight: bold;
+        border-radius: 5px;
+        padding: 15px;
+        padding-top: 24px;
+        display: flex;
+        cursor: pointer;
+        position: relative;
+
+        &:hover {
+            background-color: #082625;
+        }
+
+        .new-icon {
+            text-align: left;
+            margin-top: -3px;
+        }
+    }
+
 
     ul {
         list-style-type: none;

src/libs/image-analysis.js

@@ -1,6 +1,6 @@
 import { fetchGPTVisionResponse } from './gpt-api-access.js';
 import { fetchClaudeVisionResponse } from './claude-api-access.js';
-import { fetchOpenAiLikeVisionResponse } from './local-model-access.js';
+import { fetchOpenAiLikeVisionResponse } from './open-ai-api-standard-access.js';
 
 // Encode image as base64
 async function encodeImage(file) {

src/libs/local-model-access.js src/libs/open-ai-api-standard-access.jssrc/libs/local-model-access.js renamed to src/libs/open-ai-api-standard-access.js

@@ -7,7 +7,7 @@ import { loadConversationTitles, loadStoredConversations, fetchGPTResponseStream
 import { fetchClaudeConversationTitle, streamClaudeResponse } from '@/libs/claude-api-access';
 import { getConversationTitleFromGPT, showToast } from '@/libs/utils';
 import { analyzeImage } from '@/libs/image-analysis';
-import { fetchLocalModelResponseStream } from '@/libs/local-model-access';
+import { fetchLocalModelResponseStream } from '@/libs/open-ai-api-standard-access';
 
 import messageItem from '@/components/message-item.vue';
 import chatInput from '@/components/chat-input.vue';
@@ -1131,7 +1131,7 @@ pre {
 // Common styles for both sidebars
 .sidebar-common {
     background-color: #151517;
-    width: 50vw; // Adjust the width as needed
+    width: 28vw; // Adjust the width as needed
     min-width: 25vw;
     max-width: 100%; // Ensure it doesn't exceed the screen width
     height: 100vh; // Full height