adding progress bar to loading models but it's not pretty

Author: randomtask2000

APP_CONFIG.md

@@ -4,7 +4,7 @@
 
 To change the app title from "WebLLM Chat" to something else:
 
-1. Edit the `app.config.json` file in the root directory:
+1. Edit the `src/app.config.json` file:
    ```json
    {
      "title": "Your Custom Title",

app.config.json renamed to src/app.config.json

@@ -1315,23 +1315,7 @@
 </script>
 
 <div class="h-full flex overflow-hidden bg-surface-50-900-token">
-  <!-- Progress bar - positioned absolutely at top -->
-  {#if !$isModelLoaded && $modelLoadingProgress < 100}
-    <div
-      class="absolute top-0 left-0 z-20 p-4 bg-surface-100-800-token border-b border-surface-300-600-token"
-      class:right-0={!showRAGPanel}
-      class:right-80={showRAGPanel}
-    >
-      <div class="flex items-center justify-between mb-2">
-        <span class="text-sm font-medium text-surface-700-200-token"
-          >Loading Model: {$currentModel}</span
-        >
-        <span class="text-sm text-surface-700-200-token opacity-70">{$modelLoadingProgress}%</span>
-      </div>
-      <ProgressBar value={$modelLoadingProgress} max={100} class="mb-2" />
-      <p class="text-xs text-surface-700-200-token opacity-70">{$modelLoadingStatus}</p>
-    </div>
-  {/if}
+  <!-- Progress bar removed - now shown in ChatMessage component -->
 
   <!-- Main chat area -->
   <div class="flex-1 min-h-0 flex flex-col transition-all duration-300 bg-surface-50-900-token" class:mr-80={showRAGPanel}>

src/lib/components/ChatInterface.svelte

@@ -4,6 +4,8 @@
   import { formatTokenCount } from '$lib/utils/tokenCount';
   import { formatResponseTime } from '$lib/utils/timeFormat';
   import hljs from 'highlight.js/lib/core';
+  import { ProgressBar } from '@skeletonlabs/skeleton';
+  import { modelLoadingProgress, modelLoadingStatus, currentModel, isModelLoaded } from '$lib/stores/models';
 
   // Import common languages
   import javascript from 'highlight.js/lib/languages/javascript';
@@ -50,6 +52,17 @@
   export let onClose: ((messageId: string) => void) | undefined = undefined;
   
   let isCollapsed = false;
+  
+  // Check if this is a model loading message
+  $: isModelLoadingMessage = message.id.startsWith('loading-model-') && 
+    (message.content.includes('🔄 Switching to') || 
+     message.content.includes('🤖') ||
+     message.content.includes('Loading model'));
+     
+  // Extract model name from loading message
+  $: loadingModelName = isModelLoadingMessage && message.content.includes('Switching to') 
+    ? message.content.match(/Switching to (.+?)\.\.\./)?.[ 1] || $currentModel 
+    : $currentModel;
 
   // For code blocks, we'll estimate token count (rough approximation)
   function estimateTokens(text: string): number {
@@ -458,6 +471,22 @@
           <div class="prose prose-sm max-w-none text-surface-700-200-token">
             {@html formatContent(message.content)}
           </div>
+          
+          <!-- Show loading progress bar for model loading messages -->
+          {#if isModelLoadingMessage && !$isModelLoaded && $modelLoadingProgress < 100}
+            <div class="mt-4 p-3 bg-surface-200-700-token rounded-lg">
+              <div class="flex items-center justify-between mb-2">
+                <span class="text-sm font-medium text-surface-700-200-token">
+                  Loading Model: {loadingModelName}
+                </span>
+                <span class="text-sm text-surface-700-200-token opacity-70">
+                  {$modelLoadingProgress}%
+                </span>
+              </div>
+              <ProgressBar value={$modelLoadingProgress} max={100} class="mb-2" />
+              <p class="text-xs text-surface-700-200-token opacity-70">{$modelLoadingStatus}</p>
+            </div>
+          {/if}
         {/if}
       {/if}
 

src/lib/components/ChatMessage.svelte

@@ -48,10 +48,17 @@
   <div
     class="fixed inset-0 bg-black/50 flex items-center justify-center z-60"
     on:click={() => (isVisible = false)}
+    on:keydown={(e) => e.key === 'Escape' && (isVisible = false)}
+    role="presentation"
+    tabindex="-1"
   >
     <div
       class="bg-surface-100-800-token rounded-lg p-6 max-w-md w-full mx-4"
       on:click|stopPropagation
+      on:keydown|stopPropagation
+      role="dialog"
+      aria-modal="true"
+      aria-label="Experimental Features"
     >
       <div class="flex items-center justify-between mb-4">
         <h3 class="text-lg font-semibold">Experimental Features</h3>

src/lib/components/FeatureToggle.svelte

@@ -122,8 +122,9 @@
             class="btn btn-sm variant-ghost-surface"
             on:click={() => checkCachedModels()}
             title="Refresh cache status"
+            aria-label="Refresh cache status"
           >
-            <i class="fa fa-refresh"></i>
+            <i class="fa fa-refresh" aria-hidden="true"></i>
           </button>
         </div>
       </div>

src/lib/components/ModelDropdown.svelte

@@ -11,7 +11,7 @@
 
   export let isVisible = false;
   export let lastQuery: RAGQueryResult | null = null;
-  export let forceRefresh = 0; // Counter to trigger refresh from parent
+  export const forceRefresh = 0; // Counter to trigger refresh from parent
   export let sendDocumentPreviewToChat: (document: any) => void = () => {};
 
   let documents: RAGDocument[] = [];

src/lib/components/RAGContext.svelte

@@ -32,19 +32,21 @@
 </script>
 
 {#if isVisible}
-  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <div
     class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
     role="dialog"
     aria-modal="true"
     aria-labelledby="welcome-title"
     on:keydown={handleKeydown}
     transition:fade={{ duration: 200 }}
+    tabindex="-1"
   >
     <div
       class="bg-surface-100-800-token rounded-xl shadow-2xl max-w-4xl max-h-[90vh] overflow-y-auto"
       transition:scale={{ duration: 300, easing: quintOut }}
       on:click|stopPropagation
+      on:keydown|stopPropagation
+      role="document"
     >
       <!-- Header -->
       <div class="sticky top-0 bg-surface-100-800-token border-b border-surface-300-600-token p-6">

src/lib/components/WelcomeGuide.svelte

@@ -1,4 +1,4 @@
-import appConfigJson from '../../../app.config.json';
+import appConfigJson from '../../app.config.json';
 
 export const appConfig = {
   title: appConfigJson.title,

src/lib/config/app.config.ts

@@ -41,13 +41,6 @@ export const MODELS: ModelInfo[] = [
     description: '🦙 Llama 3.2 3B - Great for general conversations',
     context_length: 131072
   },
-  {
-    model_id: 'Llama-3.2-3B-Instruct-q4f16_1-1k-MLC',
-    vram_required_MB: 2048,
-    low_resource_required: false,
-    description: '🦙 Llama 3.2 3B with 1M context - Extended conversations',
-    context_length: 1048576
-  },
   {
     model_id: 'Qwen2.5-3B-Instruct-q4f16_1-MLC',
     vram_required_MB: 2048,
@@ -176,6 +169,10 @@ export function setModelDownloaded(modelId: string) {
 export async function checkCachedModels(): Promise<void> {
   console.log('🔍 Checking cached models...');
   const { webLLMService } = await import('../utils/webllm');
+  
+  // Log available models from WebLLM
+  await webLLMService.getAvailableModels();
+  
   const cached = new Set<string>();
 
   for (const model of MODELS) {