0.9.2

CHANGELOG.md

@@ -13,6 +13,15 @@ All notable changes to Libre Assistant are documented here.
 
 ---
 
+## [0.9.2] - 2026-02-25
+
+### Added
+- Deepseek R1 0528 Model
+- Display The Usage Limits on Sidebar
+
+### Changed
+- Modified the Images Limit to 8 from 12.
+
 ## [0.9.1] - 2026-02-19
 
 ### Added

app/components/AppSidebar.vue

@@ -9,6 +9,7 @@ import {
   DropdownMenuItem,
 } from "reka-ui";
 import { useConversationsList } from "~/composables/useConversationsList";
+import { useRateLimiter } from "~/composables/rateLimiter";
 
 const emit = defineEmits([
   "reloadSettings",
@@ -38,6 +39,8 @@ const {
   clearSearch,
 } = useConversationsList();
 
+const { usageStats } = useRateLimiter();
+
 const windowWidth = ref(
   typeof window !== "undefined" ? window.innerWidth : 1200,
 );
@@ -208,6 +211,22 @@ function handleNewConversation() {
           </template>
         </div>
       </div>
+      <div class="sidebar-footer">
+        <div class="usage-row">
+          <span class="usage-label">Messages</span>
+          <div class="usage-bar-track">
+            <div class="usage-bar-fill" :style="{ width: `${Math.min(100, (usageStats.general.used / usageStats.general.limit) * 100)}%` }" />
+          </div>
+          <span class="usage-count">{{ usageStats.general.used }} / {{ usageStats.general.limit }}</span>
+        </div>
+        <div class="usage-row">
+          <span class="usage-label">Images</span>
+          <div class="usage-bar-track">
+            <div class="usage-bar-fill" :style="{ width: `${Math.min(100, (usageStats.image.used / usageStats.image.limit) * 100)}%` }" />
+          </div>
+          <span class="usage-count">{{ usageStats.image.used }} / {{ usageStats.image.limit }}</span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -346,6 +365,52 @@ function handleNewConversation() {
   margin-bottom: 12px;
 }
 
+.sidebar-footer {
+  flex-shrink: 0;
+  padding: 12px 16px 16px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: var(--bg-sidebar);
+}
+
+.usage-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.usage-label {
+  font-size: 0.8em;
+  font-weight: 600;
+  color: var(--text-primary);
+  min-width: 56px;
+}
+
+.usage-bar-track {
+  flex: 1;
+  height: 8px;
+  background: var(--bg-input);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.usage-bar-fill {
+  height: 100%;
+  background: var(--primary);
+  border-radius: 4px;
+  transition: width 0.2s ease;
+}
+
+.usage-count {
+  font-size: 0.8em;
+  font-weight: 600;
+  color: var(--text-primary);
+  min-width: 2.4em;
+  text-align: right;
+}
+
 /* Empty State */
 .empty-state {
   display: flex;

app/components/BottomSheetModelSelector.vue

@@ -37,7 +37,7 @@
               {{ selectedProvider?.category }}
             </template>
             <template v-else>
-              Select Model
+              {{ filterMaxModeOnly ? 'Select model (Max Mode)' : 'Select Model' }}
             </template>
           </h2>
           <div class="nav-side">
@@ -81,8 +81,8 @@
             v-for="model in selectedProvider?.models"
             :key="model.id"
             class="model-item"
-            :class="{ selected: model.id === selectedModelId }"
-            @click="selectModel(model.id, model.name)"
+            :class="{ selected: model.id === selectedModelId, disabled: excludeModelIds.includes(model.id) }"
+            @click="excludeModelIds.includes(model.id) ? null : selectModel(model.id, model.name)"
           >
             <div class="model-info">
               <span class="model-name">{{ model.name }}</span>
@@ -118,6 +118,14 @@ const props = defineProps({
   selectedModelName: {
     type: String,
     default: ''
+  },
+  filterMaxModeOnly: {
+    type: Boolean,
+    default: false
+  },
+  excludeModelIds: {
+    type: Array,
+    default: () => []
   }
 });
 
@@ -133,7 +141,14 @@ let firstOpen = true;
 
 // Computed providers (only categories, not standalone models)
 const providers = computed(() => {
-  return availableModels.filter(item => item?.category);
+  let list = availableModels.filter(item => item?.category);
+  if (props.filterMaxModeOnly) {
+    list = list.map(p => ({
+      ...p,
+      models: (p.models || []).filter(m => m.maxModeSupported === true)
+    })).filter(p => p.models && p.models.length > 0);
+  }
+  return list;
 });
 
 // Watch for changes in isOpen to reset the state when opening
@@ -392,6 +407,11 @@ const onAnimationComplete = () => {
   opacity: 0.9;
 }
 
+.model-item.disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
 .model-info {
   flex-grow: 1;
   display: flex;