optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: redesign AI chat page - full width chat, input pinned to bottom
All checks were successful
Build Docker Image / build (push) Successful in 4m5s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-07 21:52:53 +07:00
parent b177a567cf
commit 4235c9f1e9
1 changed files with 60 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
app/pages/clientarea/ai/index.vue
View File

@@ -1,75 +1,55 @@
<template>
<Section variant="plain" paddingY="md">
<div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_420px] gap-6 items-start">
<div class="space-y-6">
<PageHeader :title="t('aiAssistants.header.title')" />
<Card padding="lg" class="w-full">
<Stack gap="4">
<Stack direction="row" gap="3" align="center">
<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-[calc(100vh-4rem)]">
<!-- Chat messages area -->
<div ref="chatContainer" class="flex-1 overflow-y-auto p-4 space-y-3">
<div
v-for="(message, idx) in chat"
:key="idx"
class="flex"
:class="message.role === 'user' ? 'justify-end' : 'justify-start'"
>
<div class="flex flex-col h-full min-h-0">
<div class="bg-base-200 p-4 flex-1 min-h-0 overflow-y-auto space-y-3">
<div
v-for="(message, idx) in chat"
:key="idx"
class="flex"
:class="message.role === 'user' ? 'justify-end' : 'justify-start'"
>
<div
class="max-w-[80%] rounded-2xl px-4 py-3 shadow-sm"
: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
class="max-w-[80%] lg:max-w-[60%] rounded-2xl px-4 py-3 shadow-sm"
: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>
</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