From d3858adc57e713242ef6384a761df8bc664e782e Mon Sep 17 00:00:00 2001 From: KarielHalling Date: Thu, 30 Oct 2025 13:29:18 +0800 Subject: [PATCH 1/6] 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. --- frontend/src/App.vue | 24 ++++++++++-------- frontend/src/components/AIChatHeader.vue | 3 ++- frontend/src/components/AIChatInput.vue | 5 ++-- frontend/src/components/AIChatMessages.vue | 8 +++--- frontend/src/composables/useAIChat.ts | 29 +++++++++++++++++++++- frontend/src/services/aiService.ts | 25 +++++++++++++++++++ 6 files changed, 74 insertions(+), 20 deletions(-) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 45e9b29..85aa898 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -152,13 +152,14 @@ 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 { @@ -166,18 +167,18 @@ async function handleTest(updatedConfig?: AIConfig) { 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%; } @@ -185,6 +186,8 @@ async function handleTest(updatedConfig?: AIConfig) { @media (max-width: 1024px) { .ai-chat-container { padding: 24px; + height: 100vh; + max-height: 100vh; } } @@ -192,21 +195,20 @@ async function handleTest(updatedConfig?: AIConfig) { .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; } } diff --git a/frontend/src/components/AIChatHeader.vue b/frontend/src/components/AIChatHeader.vue index 69b009e..f8fa035 100644 --- a/frontend/src/components/AIChatHeader.vue +++ b/frontend/src/components/AIChatHeader.vue @@ -41,10 +41,11 @@ const statusText = computed(() => t(`ai.status.${props.status}`))