refactor: redesign AI chat page - full width chat, input pinned to bottom

app/pages/clientarea/ai/index.vue

@@ -1,75 +1,55 @@
 <template>
-  <Section variant="plain" paddingY="md">
+  <div class="flex flex-col h-[calc(100vh-4rem)]">
-    <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_420px] gap-6 items-start">
+    <!-- Chat messages area -->
-      <div class="space-y-6">
+    <div ref="chatContainer" class="flex-1 overflow-y-auto p-4 space-y-3">
-        <PageHeader :title="t('aiAssistants.header.title')" />
+      <div
-
+        v-for="(message, idx) in chat"
-        <Card padding="lg" class="w-full">
+        :key="idx"
-          <Stack gap="4">
+        class="flex"
-            <Stack direction="row" gap="3" align="center">
+        :class="message.role === 'user' ? 'justify-end' : 'justify-start'"
-              <IconCircle tone="primary" size="lg">🛰️</IconCircle>
-              <div>
-                <Heading :level="3" weight="semibold">{{ t('aiAssistants.view.agentTitle') }}</Heading>
-                <Text tone="muted">{{ t('aiAssistants.view.agentSubtitle') }}</Text>
-              </div>
-            </Stack>
-          </Stack>
-        </Card>
-      </div>
-
-      <Card
-        padding="none"
-        class="w-full flex flex-col min-h-0 lg:sticky lg:top-6 lg:h-[calc(100vh-3rem)] overflow-hidden"
       >
-        <div class="flex flex-col h-full min-h-0">
+        <div
-          <div class="bg-base-200 p-4 flex-1 min-h-0 overflow-y-auto space-y-3">
+          class="max-w-[80%] lg:max-w-[60%] rounded-2xl px-4 py-3 shadow-sm"
-            <div
+          :class="message.role === 'user' ? 'bg-primary text-primary-content' : 'bg-base-100 text-base-content'"
-              v-for="(message, idx) in chat"
+        >
-              :key="idx"
+          <Text weight="semibold" class="mb-1">
-              class="flex"
+            {{ message.role === 'user' ? t('aiAssistants.view.you') : t('aiAssistants.view.agentName') }}
-              :class="message.role === 'user' ? 'justify-end' : 'justify-start'"
+          </Text>
-            >
+          <Text :tone="message.role === 'user' ? undefined : 'muted'">
-              <div
+            {{ message.content }}
-                class="max-w-[80%] rounded-2xl px-4 py-3 shadow-sm"
+          </Text>
-                :class="message.role === 'user' ? 'bg-primary text-primary-content' : 'bg-base-100 text-base-content'"
-              >
-                <Text weight="semibold" class="mb-1">
-                  {{ message.role === 'user' ? t('aiAssistants.view.you') : t('aiAssistants.view.agentName') }}
-                </Text>
-                <Text :tone="message.role === 'user' ? undefined : 'muted'">
-                  {{ message.content }}
-                </Text>
-              </div>
-            </div>
-            <div v-if="isStreaming" class="text-sm text-base-content/60">
-              {{ t('aiAssistants.view.typing') }}
-            </div>
-          </div>
-
-          <div class="border-t border-base-300 bg-base-100 p-4">
-            <form class="flex flex-col gap-3" @submit.prevent="handleSend">
-              <Textarea
-                v-model="input"
-                :placeholder="t('aiAssistants.view.placeholder')"
-                rows="3"
-              />
-              <div class="flex items-center gap-3">
-                <Button type="submit" :loading="isSending" :disabled="!input.trim()">
-                  {{ t('aiAssistants.view.send') }}
-                </Button>
-                <Button type="button" variant="ghost" @click="resetChat" :disabled="isSending">
-                  {{ t('aiAssistants.view.reset') }}
-                </Button>
-                <div class="text-sm text-base-content/60" v-if="error">
-                  {{ error }}
-                </div>
-              </div>
-            </form>
-          </div>
         </div>
-      </Card>
+      </div>
+      <div v-if="isStreaming" class="text-sm text-base-content/60">
+        {{ t('aiAssistants.view.typing') }}
+      </div>
     </div>
-  </Section>
+
+    <!-- Input area pinned to bottom -->
+    <div class="border-t border-base-300 bg-base-100 p-4">
+      <form class="flex items-end gap-3 max-w-4xl mx-auto" @submit.prevent="handleSend">
+        <div class="flex-1">
+          <Textarea
+            v-model="input"
+            :placeholder="t('aiAssistants.view.placeholder')"
+            rows="2"
+            class="w-full"
+          />
+        </div>
+        <div class="flex items-center gap-2">
+          <Button type="submit" :loading="isSending" :disabled="!input.trim()">
+            {{ t('aiAssistants.view.send') }}
+          </Button>
+          <Button type="button" variant="ghost" @click="resetChat" :disabled="isSending">
+            {{ t('aiAssistants.view.reset') }}
+          </Button>
+        </div>
+      </form>
+      <div class="text-sm text-error text-center mt-2" v-if="error">
+        {{ error }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -77,6 +57,7 @@ const { t } = useI18n()
 const runtimeConfig = useRuntimeConfig()
 
 const agentUrl = computed(() => runtimeConfig.public.langAgentUrl || '')
+const chatContainer = ref<HTMLElement | null>(null)
 const chat = ref<{ role: 'user' | 'assistant', content: string }[]>([
   { role: 'assistant', content: t('aiAssistants.view.welcome') }
 ])
@@ -85,6 +66,14 @@ const isSending = ref(false)
 const isStreaming = ref(false)
 const error = ref('')
 
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (chatContainer.value) {
+      chatContainer.value.scrollTop = chatContainer.value.scrollHeight
+    }
+  })
+}
+
 const handleSend = async () => {
   if (!input.value.trim()) return
   error.value = ''
@@ -93,6 +82,7 @@ const handleSend = async () => {
   input.value = ''
   isSending.value = true
   isStreaming.value = true
+  scrollToBottom()
 
   try {
     const body = {
@@ -113,10 +103,12 @@ const handleSend = async () => {
     const last = outputMessages[outputMessages.length - 1]
     const content = last?.content?.[0]?.text || last?.content || t('aiAssistants.view.emptyResponse')
     chat.value.push({ role: 'assistant', content })
+    scrollToBottom()
   } catch (e: any) {
     console.error('Agent error', e)
     error.value = e?.message || t('aiAssistants.view.error')
     chat.value.push({ role: 'assistant', content: t('aiAssistants.view.error') })
+    scrollToBottom()
   } finally {
     isSending.value = false
     isStreaming.value = false