Enhances AI chat UI and improves model selection

Refactors the AI chat UI to improve responsiveness across different screen sizes, ensuring a consistent user experience.

Improves the model selection process by fetching and caching the model catalog from the AI service.

Updates styles to enhance the visual appeal and usability of the chat interface.

Author: KariHall619

frontend/src/App.vue

@@ -152,61 +152,63 @@ async function handleTest(updatedConfig?: AIConfig) {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
-  max-height: 100%;
+  height: 100vh;
+  max-height: 100vh;
   min-height: 0;
   padding: clamp(16px, 4vw, 32px);
   box-sizing: border-box;
   gap: clamp(12px, 2vw, 20px);
   background: var(--atest-bg-base);
+  overflow: hidden;
 }
 
 .welcome-panel {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: auto;
 }
 
 .chat-content {
   flex: 1;
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
-  gap: var(--atest-spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
   overflow: hidden;
   border-radius: var(--atest-radius-lg);
   background: var(--atest-bg-surface);
   box-shadow: var(--atest-shadow-md);
-  padding: clamp(12px, 3vw, 24px);
   min-height: 0;
   max-height: 100%;
 }
 
 @media (max-width: 1024px) {
   .ai-chat-container {
     padding: 24px;
+    height: 100vh;
+    max-height: 100vh;
   }
 }
 
 @media (max-width: 768px) {
   .ai-chat-container {
     padding: 20px;
     gap: 12px;
+    height: 100vh;
+    max-height: 100vh;
   }
 
   .chat-content {
     border-radius: var(--atest-radius-md);
-    padding: 16px;
   }
 }
 
 @media (max-width: 480px) {
   .ai-chat-container {
     padding: 16px;
-  }
-
-  .chat-content {
-    padding: 12px;
+    height: 100vh;
+    max-height: 100vh;
   }
 }
 </style>

frontend/src/components/AIChatHeader.vue

@@ -41,10 +41,11 @@ const statusText = computed(() => t(`ai.status.${props.status}`))
 
 <style scoped>
 .ai-chat-header {
+  flex-shrink: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--atest-spacing-md) clamp(20px, 4vw, 28px);
+  padding: var(--atest-spacing-md) clamp(20px, 4vw, 40px);
   background: var(--atest-bg-surface);
   border-bottom: 1px solid var(--atest-border-color);
 }

frontend/src/components/AIChatInput.vue

@@ -176,11 +176,10 @@ function handleSubmit() {
 
 <style scoped>
 .chat-input {
-  padding: 20px 40px 24px;
+  flex-shrink: 0;
+  padding: clamp(16px, 3vw, 20px) clamp(20px, 4vw, 40px) clamp(20px, 3vw, 24px);
   background: var(--atest-bg-surface);
   border-top: 1px solid var(--atest-border-color);
-  box-shadow: var(--atest-shadow-sm);
-  border-radius: var(--atest-radius-md);
   display: flex;
   flex-direction: column;
   gap: var(--atest-spacing-sm);

frontend/src/components/AIChatMessages.vue

@@ -123,14 +123,14 @@ async function copySQL(sql: string) {
 
 <style scoped>
 .chat-messages {
-  height: 100%;
+  flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 24px 40px;
+  overflow-x: hidden;
+  padding: clamp(12px, 3vw, 24px) clamp(20px, 4vw, 40px);
   background: var(--atest-bg-surface);
   color: var(--atest-text-primary);
-  border: 1px solid var(--atest-border-color);
-  border-radius: var(--atest-radius-md);
+  border-bottom: 1px solid var(--atest-border-color);
 }
 
 /* Empty state */

frontend/src/composables/useAIChat.ts

@@ -1,6 +1,6 @@
 import { ref, computed, watch } from 'vue'
 import type { AppContext, AIConfig, Message, Model, DatabaseDialect } from '@/types'
-import { loadConfig, loadConfigForProvider, saveConfig, getMockModels, generateId, type Provider } from '@/utils/config'
+import { loadConfig, loadConfigForProvider, saveConfig, generateId, type Provider } from '@/utils/config'
 import { aiService } from '@/services/aiService'
 
 /**
@@ -27,6 +27,33 @@ export function useAIChat(_context: AppContext) {
     deepseek: []
   })
 
+  const catalogCache = ref<Record<string, Model[]>>({})
+
+  async function initializeModelCatalog() {
+    try {
+      const catalog = await aiService.fetchModelCatalog()
+      const normalizedCatalog: Record<string, Model[]> = {}
+
+      Object.entries(catalog).forEach(([provider, entry]) => {
+        normalizedCatalog[provider] = entry.models || []
+      })
+
+      catalogCache.value = normalizedCatalog
+
+      for (const [provider, models] of Object.entries(normalizedCatalog)) {
+        if (!modelsByProvider.value[provider]) {
+          modelsByProvider.value[provider] = models
+        } else if ((modelsByProvider.value[provider] || []).length === 0 && models.length > 0) {
+          modelsByProvider.value[provider] = models
+        }
+      }
+    } catch (error) {
+      console.error('Failed to load model catalog', error)
+    }
+  }
+
+  void initializeModelCatalog()
+
   // Computed property to get models for current provider
   const availableModels = computed(() => {
     const key = resolveProviderKey(config.value.provider)

frontend/src/services/aiService.ts

@@ -44,6 +44,22 @@ export const aiService = {
     return result.models || []
   },
 
+  /**
+   * Fetch model catalog metadata (either for a specific provider or all providers)
+   */
+  async fetchModelCatalog(provider?: string): Promise<Record<string, ModelCatalogEntry>> {
+    const payload = provider ? { provider } : {}
+    const result = await callAPI<{ catalog: Record<string, ModelCatalogEntry> }>('models_catalog', payload)
+    const catalog = result.catalog || {}
+
+    // Normalize provider keys to lowercase for consistent lookups
+    const normalized: Record<string, ModelCatalogEntry> = {}
+    for (const [key, entry] of Object.entries(catalog)) {
+      normalized[key.toLowerCase()] = entry
+    }
+    return normalized
+  },
+
   /**
    * Test connection to AI provider
    */
@@ -223,6 +239,15 @@ export const aiService = {
   }
 }
 
+export interface ModelCatalogEntry {
+  display_name: string
+  category: string
+  endpoint: string
+  requires_api_key: boolean
+  models: Model[]
+  tags?: string[]
+}
+
 function formatTimeout(timeout: number | undefined): string {
   const value = Number(timeout)
   if (!Number.isFinite(value) || value <= 0) {