@windward/integrations 0.16.0 → 0.17.0

package/components/Integration/AiAgentIntegration/ChatWindow.vue

@@ -0,0 +1,916 @@
+<template>
+    <div class="chat-window">
+        <!-- Header -->
+        <div class="chat-header d-flex align-center justify-space-between">
+            <div class="d-flex align-center">
+                <span class="header-title">
+                    {{
+                        $t(
+                            'windward.integrations.components.ai_agent.chat.new_chat'
+                        )
+                    }}
+                </span>
+                <v-menu offset-y>
+                    <template #activator="{ on, attrs }">
+                        <v-btn
+                            icon
+                            x-small
+                            v-bind="attrs"
+                            :aria-label="
+                                $t(
+                                    'windward.integrations.components.ai_agent.chat.aria_open_history'
+                                )
+                            "
+                            v-on="on"
+                        >
+                            <v-icon small>mdi-chevron-down</v-icon>
+                        </v-btn>
+                    </template>
+                    <v-list dense>
+                        <v-subheader>
+                            {{
+                                $t(
+                                    'windward.integrations.components.ai_agent.chat.recent_chats'
+                                )
+                            }}
+                        </v-subheader>
+                        <template v-if="history.length > 0">
+                            <v-list-item
+                                v-for="item in history"
+                                :key="item.id"
+                                :class="{
+                                    'active-chat': item.id === currentSessionId,
+                                }"
+                                @click="loadSession(item.id)"
+                            >
+                                <v-list-item-content>
+                                    <v-list-item-title class="text-truncate">
+                                        {{
+                                            item.title ||
+                                            $t(
+                                                'windward.integrations.components.ai_agent.chat.untitled_chat'
+                                            )
+                                        }}
+                                    </v-list-item-title>
+                                    <v-list-item-subtitle>
+                                        {{ formatDate(item.updated_at) }}
+                                    </v-list-item-subtitle>
+                                </v-list-item-content>
+                            </v-list-item>
+                            <v-divider class="my-1"></v-divider>
+                        </template>
+                        <template v-else>
+                            <v-list-item>
+                                <v-list-item-title>
+                                    {{
+                                        $t(
+                                            'windward.integrations.components.ai_agent.chat.no_history'
+                                        )
+                                    }}
+                                </v-list-item-title>
+                            </v-list-item>
+                            <v-divider class="my-1"></v-divider>
+                        </template>
+                        <v-list-item @click="startNewChat">
+                            <v-list-item-icon
+                                ><v-icon small
+                                    >mdi-plus</v-icon
+                                ></v-list-item-icon
+                            >
+                            <v-list-item-title>
+                                {{
+                                    $t(
+                                        'windward.integrations.components.ai_agent.chat.new_chat'
+                                    )
+                                }}
+                            </v-list-item-title>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+            </div>
+            <v-btn
+                small
+                color="primary"
+                class="font-weight-medium"
+                text
+                @click="startNewChat"
+            >
+                <v-icon left small>mdi-plus</v-icon>
+                {{
+                    $t(
+                        'windward.integrations.components.ai_agent.chat.new_chat'
+                    )
+                }}
+            </v-btn>
+        </div>
+
+        <!-- Messages Area -->
+        <div ref="messagesScroll" class="messages" @scroll="onMessagesScroll">
+            <div
+                v-if="loadingOlder"
+                class="top-loader d-flex justify-center mb-2"
+            >
+                <v-progress-circular
+                    indeterminate
+                    size="18"
+                    width="2"
+                    color="primary"
+                />
+            </div>
+            <div v-if="messages.length === 0" class="system-tip">
+                {{
+                    $t(
+                        'windward.integrations.components.ai_agent.chat.system_tip'
+                    )
+                }}
+            </div>
+            <div v-else>
+                <div
+                    v-for="(msg, i) in messages"
+                    :key="i"
+                    class="message"
+                    :class="msg.role"
+                >
+                    <div class="bubble">
+                        <div class="bubble-meta">
+                            <span class="sender">{{ senderLabel(msg) }}</span>
+                            <span class="time">{{
+                                formatDate(msg.created_at || msg.createdAt)
+                            }}</span>
+                            <span v-if="msg.role === 'user'" class="checkmarks">
+                                <v-icon
+                                    v-if="messageStatus(i) === 'single'"
+                                    small
+                                    color="text-primary"
+                                    >mdi-check</v-icon
+                                >
+                                <v-icon
+                                    v-else-if="messageStatus(i) === 'double'"
+                                    small
+                                    color="text-primary"
+                                    >mdi-check-all</v-icon
+                                >
+                            </span>
+                        </div>
+                        <div class="bubble-text">
+                            <text-viewer v-model="msg.text"></text-viewer>
+                        </div>
+                    </div>
+                </div>
+                <!-- Awaiting response indicator/messages -->
+                <div
+                    v-if="
+                        awaitingReply &&
+                        (showTypingDots || showProcessingMessage)
+                    "
+                    class="message assistant"
+                >
+                    <div class="bubble" aria-live="polite">
+                        <span class="sr-only">Agent is typing</span>
+                        <div class="awaiting-indicator">
+                            <span
+                                v-if="showTypingDots"
+                                class="typing-dots"
+                                aria-hidden="true"
+                            >
+                                <span class="dot" />
+                                <span class="dot" />
+                                <span class="dot" />
+                            </span>
+                            <span
+                                v-if="showProcessingMessage || showTypingDots"
+                                class="processing-note"
+                            >
+                                {{ feedbackMessages[currentFeedbackIndex] }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Composer -->
+        <div class="composer">
+            <div v-if="sendError" class="composer-error mb-2">
+                <v-alert type="error" dense text>
+                    <div class="d-flex align-center justify-space-between">
+                        <span>{{ sendError }}</span>
+                        <div class="ml-2">
+                            <template v-if="isLimitReached">
+                                <v-btn
+                                    x-small
+                                    color="primary"
+                                    text
+                                    @click="startNewChat"
+                                >
+                                    {{
+                                        $t(
+                                            'windward.integrations.components.ai_agent.chat.new_chat'
+                                        )
+                                    }}
+                                </v-btn>
+                            </template>
+                            <template v-else>
+                                <v-btn
+                                    x-small
+                                    color="error"
+                                    text
+                                    @click="retryLastSend"
+                                >
+                                    {{
+                                        $t(
+                                            'windward.integrations.components.ai_agent.chat.action_try_again'
+                                        )
+                                    }}
+                                </v-btn>
+                                <v-btn
+                                    color="error"
+                                    x-small
+                                    text
+                                    @click="clearError"
+                                >
+                                    {{
+                                        $t(
+                                            'windward.integrations.components.ai_agent.chat.action_dismiss'
+                                        )
+                                    }}
+                                </v-btn>
+                            </template>
+                        </div>
+                    </div>
+                </v-alert>
+            </div>
+
+            <v-textarea
+                ref="composer"
+                v-model="draft"
+                :placeholder="placeholder"
+                :disabled="awaitingReply || isLimitReached"
+                auto-grow
+                dense
+                outlined
+                hide-details
+                rows="1"
+                class="composer-input"
+                :append-icon="canSend ? ' mdi-send' : 'mdi-send-lock'"
+                @click:append="send"
+                @keydown.enter.exact.prevent="onEnterKey"
+            />
+
+            <div class="composer-hint mt-3">
+                {{ $t('windward.integrations.components.ai_agent.chat.hint') }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+
+import AgentChat from '../../../models/AgentChat'
+import AgentChatMessage from '../../../models/AgentChatMessage'
+import Organization from '~/models/Organization'
+import Course from '~/models/Course'
+import TextViewer from '~/components/Text/TextViewer.vue'
+
+export default {
+    name: 'ChatWindow',
+    components: { TextViewer },
+    data() {
+        return {
+            messages: [],
+            draft: '',
+            history: [],
+            sessionsById: {},
+            currentSessionId: null,
+            awaitingReply: false,
+            showTypingDots: false,
+            showProcessingMessage: false,
+            typingDotsTimeoutId: null,
+            longWaitTimeoutId: null,
+            currentFeedbackIndex: 0,
+            feedbackIntervalId: null,
+            // error management state
+            sendError: null,
+            lastFailedPrompt: '',
+            // pagination state for infinite scroll
+            perPage: 20,
+            nextPage: 1, // next page to load when scrolling up (ordered desc)
+            loadingOlder: false,
+            noMoreOlder: false,
+        }
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+        feedbackMessages() {
+            const localizedQuotes = this.$t(
+                'windward.integrations.components.llm.generate_content.fake_text_stream.options'
+            )
+            const quotes = []
+
+            for (const [_key, quote] of Object.entries(localizedQuotes)) {
+                quotes.push(quote)
+            }
+
+            return _.shuffle(quotes)
+        },
+        canSend() {
+            return (
+                this.draft.trim().length > 0 &&
+                !this.awaitingReply &&
+                !this.isLimitReached
+            )
+        },
+        userMessageCount() {
+            return Array.isArray(this.messages)
+                ? this.messages.filter((m) => m && m.role === 'user').length
+                : 0
+        },
+        isLimitReached() {
+            // Chat limit removed: always allow sending
+            return false
+        },
+        placeholder() {
+            return this.$t(
+                'windward.integrations.components.ai_agent.chat.placeholder'
+            )
+        },
+    },
+    watch: {
+        isLimitReached(newVal) {
+            if (newVal) {
+                this.sendError = this.$t(
+                    'windward.integrations.components.ai_agent.chat.limit_reached'
+                )
+            }
+        },
+    },
+    mounted() {
+        this.loadHistory().then(() => {
+            // If there is history, load the most recent chat; otherwise start a new one
+            if (
+                this.history &&
+                this.history.length > 0 &&
+                this.history[0]?.id
+            ) {
+                this.loadSession(this.history[0].id)
+            } else {
+                this.startNewChat()
+            }
+            this.focusComposer()
+        })
+    },
+    methods: {
+        clearError() {
+            this.sendError = null
+            this.lastFailedPrompt = ''
+        },
+        retryLastSend() {
+            if (this.awaitingReply) return
+            if (!this.lastFailedPrompt) return this.clearError()
+            // ensure draft contains the failed prompt, then send
+            this.draft = this.lastFailedPrompt
+            this.sendError = null
+            this.lastFailedPrompt = ''
+            this.$nextTick(() => this.send())
+        },
+        onEnterKey(e) {
+            // If Shift is held, let it create a newline
+            if (e.shiftKey) return
+            this.send()
+        },
+        async send() {
+            // Enforce per-chat user message limit (40)
+            if (this.isLimitReached) {
+                this.sendError = this.$t(
+                    'windward.integrations.components.ai_agent.chat.limit_reached'
+                )
+                return
+            }
+            if (!this.canSend) return
+            const userText = _.cloneDeep(this.draft.trim())
+            this.draft = ''
+            // clear any previous error
+            this.sendError = null
+            this.lastFailedPrompt = ''
+            // Show the user's message optimistically
+            this.messages.push({
+                role: 'user',
+                text: userText,
+                created_at: Date.now(),
+            })
+            let reply = {}
+            // set awaiting state and indicators
+            this.awaitingReply = true
+            this.showTypingDots = true
+            this.showProcessingMessage = true
+            this.currentFeedbackIndex = 0
+            if (this.typingDotsTimeoutId) clearTimeout(this.typingDotsTimeoutId)
+            if (this.longWaitTimeoutId) clearTimeout(this.longWaitTimeoutId)
+            if (this.feedbackIntervalId) clearInterval(this.feedbackIntervalId)
+            // Rotate the processing message every 5 seconds while awaiting
+            this.feedbackIntervalId = setInterval(() => {
+                if (!this.awaitingReply) return
+                this.currentFeedbackIndex =
+                    (this.currentFeedbackIndex + 1) %
+                    this.feedbackMessages.length
+            }, 5000)
+            this.$nextTick(this.scrollToBottom)
+            try {
+                if (this.currentSessionId !== null) {
+                    reply = await new AgentChat({
+                        id: this.currentSessionId,
+                        prompt: btoa(userText),
+                    })
+                        .for(
+                            new Organization({ id: this.organization.id }),
+                            new Course({ id: this.course.id })
+                        )
+                        .save()
+                } else {
+                    reply = await new AgentChat({
+                        id: '',
+                        prompt: btoa(userText),
+                    })
+                        .for(
+                            new Organization({ id: this.organization.id }),
+                            new Course({ id: this.course.id })
+                        )
+                        .save()
+                }
+                // success path
+                this.awaitingReply = false
+                this.showTypingDots = false
+                this.showProcessingMessage = false
+                if (this.typingDotsTimeoutId)
+                    clearTimeout(this.typingDotsTimeoutId)
+                if (this.longWaitTimeoutId) clearTimeout(this.longWaitTimeoutId)
+                if (this.feedbackIntervalId)
+                    clearInterval(this.feedbackIntervalId)
+                // set current session and refresh messages (latest page)
+                this.currentSessionId = reply.id
+                await this.reloadLatestMessages()
+                this.$nextTick(this.scrollToBottom)
+                // persist current session on each send
+                this.persistCurrentSession(reply.id)
+                await this.loadHistory()
+            } catch (err) {
+                // error path: clear awaiting flags & show error with retry option
+                this.awaitingReply = false
+                this.showTypingDots = false
+                this.showProcessingMessage = false
+                if (this.typingDotsTimeoutId)
+                    clearTimeout(this.typingDotsTimeoutId)
+                if (this.longWaitTimeoutId) clearTimeout(this.longWaitTimeoutId)
+                if (this.feedbackIntervalId)
+                    clearInterval(this.feedbackIntervalId)
+
+                // Remove the last optimistic user message to avoid duplicates on retry
+                const last = this.messages[this.messages.length - 1]
+                if (last && last.role === 'user' && last.text === userText) {
+                    this.messages.pop()
+                }
+                // Restore draft so the user can edit/try again
+                this.draft = userText
+
+                // Determine a user-friendly message
+                let message = this.$t(
+                    'windward.integrations.components.ai_agent.chat.error_generic'
+                )
+                try {
+                    const status = err && (err.status || err.response?.status)
+                    if (status)
+                        message = this.$t(
+                            'windward.integrations.components.ai_agent.chat.error_generic'
+                        )
+                } catch (e) {}
+
+                this.sendError = message
+                this.lastFailedPrompt = userText
+                // keep focus for immediate retry
+                this.$nextTick(this.focusComposer)
+                // Optionally log
+                // eslint-disable-next-line no-console
+                console.error('AgentChat send failed', err)
+            }
+        },
+        async startNewChat() {
+            // if current session has some content, ensure it is saved before starting new one
+            if (this.currentSessionId && this.messages.length) {
+                const data = this.history.find(
+                    (item) => item.id === this.currentSessionId
+                )
+                this.persistCurrentSession(data)
+                await this.loadHistory()
+            }
+            // reset awaiting flags
+            this.awaitingReply = false
+            this.showTypingDots = false
+            this.showProcessingMessage = false
+            if (this.typingDotsTimeoutId) clearTimeout(this.typingDotsTimeoutId)
+            if (this.longWaitTimeoutId) clearTimeout(this.longWaitTimeoutId)
+            if (this.feedbackIntervalId) clearInterval(this.feedbackIntervalId)
+            this.currentSessionId = null
+            this.messages = []
+            this.draft = ''
+            // clear any error state
+            this.sendError = null
+            this.lastFailedPrompt = ''
+            this.upsertHistoryEntry({
+                id: this.currentSessionId,
+                title: '',
+                updatedAt: Date.now(),
+            })
+            this.$nextTick(this.focusComposer)
+        },
+        async loadSession(id) {
+            const data = this.history.find((item) => item.id === id)
+            if (!data) return
+            try {
+                // reset awaiting flags when switching sessions
+                this.awaitingReply = false
+                this.showTypingDots = false
+                this.showProcessingMessage = false
+                if (this.typingDotsTimeoutId)
+                    clearTimeout(this.typingDotsTimeoutId)
+                if (this.longWaitTimeoutId) clearTimeout(this.longWaitTimeoutId)
+                if (this.feedbackIntervalId)
+                    clearInterval(this.feedbackIntervalId)
+                this.currentSessionId = id
+                await this.reloadLatestMessages()
+                this.$nextTick(() => {
+                    this.scrollToBottom()
+                    this.focusComposer()
+                })
+            } catch (e) {
+                // ignore malformed
+            }
+        },
+        async loadHistory() {
+            // Fetch history and ensure it is sorted by most recent timestamp (desc)
+            const fetched = await new AgentChat()
+                .for(
+                    new Organization({ id: this.organization.id }),
+                    new Course({ id: this.course.id })
+                )
+                .get()
+            // Normalize and sort: prefer updated_at/updatedAt, fallback to created_at/createdAt
+            this.history = Array.isArray(fetched) ? fetched.slice() : []
+            this.history.sort((a, b) => {
+                const ta = this.getEntryTimestamp(a)
+                const tb = this.getEntryTimestamp(b)
+                return tb - ta
+            })
+        },
+        persistCurrentSession(data) {
+            if (!this.currentSessionId) return
+            const title = data.title
+            const payload = {
+                id: this.currentSessionId,
+                messages: this.messages,
+                updatedAt: Date.now(),
+                title,
+            }
+            // Mocked storage: keep sessions in-memory only for current runtime
+            this.upsertHistoryEntry({
+                id: this.currentSessionId,
+                title,
+                updatedAt: payload.updatedAt,
+            })
+        },
+        upsertHistoryEntry(entry) {
+            // Mirror updatedAt to updated_at so date display works consistently
+            const normalized = {
+                ...entry,
+                updated_at:
+                    entry.updated_at != null
+                        ? entry.updated_at
+                        : entry.updatedAt != null
+                        ? entry.updatedAt
+                        : Date.now(),
+            }
+            const idx = this.history.findIndex((h) => h.id === normalized.id)
+            if (idx >= 0) {
+                this.$set(this.history, idx, {
+                    ...this.history[idx],
+                    ...normalized,
+                })
+            } else {
+                this.history.unshift(normalized)
+            }
+            // keep only last 10 overall (runtime only)
+            if (this.history.length > 10)
+                this.history = this.history.slice(0, 10)
+            // Always keep most recent first
+            this.history.sort((a, b) => {
+                const ta = this.getEntryTimestamp(a)
+                const tb = this.getEntryTimestamp(b)
+                return tb - ta
+            })
+        },
+
+        formatDate(ts) {
+            try {
+                const d = new Date(ts)
+                return d.toLocaleString()
+            } catch (e) {
+                return ''
+            }
+        },
+
+        getEntryTimestamp(entry) {
+            const entryDate = Date.parse(entry.updated_at)
+            if (!isNaN(entryDate)) return entryDate
+            return 0
+        },
+
+        getMessageTimestamp(msg) {
+            // Determine timestamp
+            const eventDate = Date.parse(msg.created_at)
+            if (!isNaN(eventDate)) return eventDate
+            return Date.now()
+        },
+
+        normalizeMessages(list) {
+            if (!Array.isArray(list)) return []
+            return list
+                .map((m) => {
+                    const role =
+                        m.role || (m.sender === 'user' ? 'user' : 'assistant')
+                    const createdAtTs = this.getMessageTimestamp(m)
+                    return { ...m, role, created_at: createdAtTs }
+                })
+                .sort((a, b) => a.created_at - b.created_at)
+        },
+
+        senderLabel(msg) {
+            return msg.role === 'user'
+                ? this.$t(
+                      'windward.integrations.components.ai_agent.chat.sender_you'
+                  )
+                : this.$t(
+                      'windward.integrations.components.ai_agent.chat.sender_agent'
+                  )
+        },
+
+        messageStatus(index) {
+            const msg = this.messages[index]
+            if (!msg || msg.role !== 'user') return null
+            // If there is an assistant message after this one, consider it delivered (double check)
+            for (let j = index + 1; j < this.messages.length; j++) {
+                const m = this.messages[j]
+                if (!m) continue
+                if (m.role === 'assistant') return 'double'
+            }
+            // If it's the latest message and we're awaiting a reply, show a single check
+            if (index === this.messages.length - 1 && this.awaitingReply)
+                return 'single'
+            return null
+        },
+
+        scrollToBottom() {
+            const el = this.$refs.messagesScroll
+            if (el && el.scrollHeight != null) {
+                try {
+                    el.scrollTop = el.scrollHeight
+                } catch (e) {
+                    if (typeof el.scrollTo === 'function') {
+                        el.scrollTo({ top: el.scrollHeight, behavior: 'auto' })
+                    }
+                }
+            }
+        },
+        focusComposer() {
+            const ta = this.$refs.composer
+            if (ta && typeof ta.focus === 'function') ta.focus()
+        },
+
+        // ===== Infinite Scroll Helpers =====
+        resetPaginationState() {
+            this.perPage = 20
+            this.nextPage = 1
+            this.loadingOlder = false
+            this.noMoreOlder = false
+        },
+        buildMessageQuery(sessionId) {
+            return new AgentChatMessage().for(
+                new Organization({ id: this.organization.id }),
+                new Course({ id: this.course.id }),
+                new AgentChat({ id: sessionId })
+            )
+        },
+        async fetchMessagesPage(page = 1) {
+            const q = this.buildMessageQuery(this.currentSessionId)
+            // Try using page/limit if available; fallback to params
+            let results = []
+            try {
+                if (typeof q.page === 'function') q.page(page)
+                if (typeof q.limit === 'function') q.limit(this.perPage)
+                else if (typeof q.perPage === 'function')
+                    q.perPage(this.perPage)
+                else if (typeof q.params === 'function')
+                    q.params({ page, per_page: this.perPage })
+                results = await q.get()
+            } catch (e) {
+                // fallback minimal get without pagination
+                results = await this.buildMessageQuery(
+                    this.currentSessionId
+                ).get()
+            }
+            return Array.isArray(results) ? results : []
+        },
+        async reloadLatestMessages() {
+            // Start from newest page (desc page 1)
+            this.resetPaginationState()
+            const data = await this.fetchMessagesPage(1)
+            // We receive newest first; reverse to show ascending in UI
+            const normalized = this.normalizeMessages(data)
+            this.messages = normalized
+            this.nextPage = 2
+            // If fewer than perPage, no more older
+            if (!data || data.length < this.perPage) this.noMoreOlder = true
+        },
+        async loadOlder() {
+            if (this.loadingOlder || this.noMoreOlder) return
+            const el = this.$refs.messagesScroll
+            const prevHeight = el ? el.scrollHeight : 0
+            this.loadingOlder = true
+            try {
+                const page = this.nextPage
+                const data = await this.fetchMessagesPage(page)
+                const olderAsc = this.normalizeMessages(data)
+                // prepend
+                this.messages = olderAsc.concat(this.messages)
+                this.nextPage = page + 1
+                if (!data || data.length < this.perPage) this.noMoreOlder = true
+                this.$nextTick(() => {
+                    if (el) {
+                        const newHeight = el.scrollHeight
+                        el.scrollTop = newHeight - prevHeight + el.scrollTop
+                    }
+                })
+            } catch (e) {
+                // eslint-disable-next-line no-console
+                console.warn('Failed to load older messages', e)
+            } finally {
+                this.loadingOlder = false
+            }
+        },
+        onMessagesScroll() {
+            const el = this.$refs.messagesScroll
+            if (!el) return
+            if (el.scrollTop <= 40) {
+                this.loadOlder()
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+.chat-window {
+    display: flex;
+    flex-direction: column;
+    height: 86vh;
+    max-height: 100vh;
+    overflow: hidden; /* ensure only messages area scrolls */
+}
+.chat-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid #e6e6e6;
+}
+.header-title {
+    font-weight: 600;
+    font-size: 16px;
+}
+.messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px 16px;
+    background: var(--v-primary-lighten3);
+}
+.system-tip {
+    display: inline-block;
+    max-width: 560px;
+    background: #ffffff;
+    color: #333;
+    padding: 12px 14px;
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.message {
+    display: flex;
+    margin: 8px 0;
+}
+.message.user {
+    justify-content: flex-end;
+    color: var(--v-text-primary-base);
+}
+.message.assistant {
+    justify-content: flex-start;
+    color: var(--v-text-primary-base);
+}
+.bubble {
+    max-width: 85%;
+    padding: 10px 12px;
+    border-radius: 12px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.message.user .bubble {
+    background: var(--v-secondary-base);
+}
+.message.assistant .bubble {
+    background: var(--v-primary-base);
+    word-break: break-word;
+}
+.bubble-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    font-size: 11px;
+    opacity: 0.85;
+    margin-bottom: 4px;
+}
+.bubble-text {
+    white-space: pre-wrap;
+}
+.checkmarks {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    opacity: 0.85;
+}
+.composer {
+    position: relative;
+    border-top: 1px solid #e6e6e6;
+    padding: 10px 12px 18px 12px; /* extra for hint */
+}
+.composer-input >>> textarea {
+    /* deep selector for Vuetify textarea */
+    resize: none;
+}
+.composer-hint {
+    font-size: 12px;
+}
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 1px, 1px);
+    border: 0;
+}
+/* typing dots indicator */
+.typing-dots {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+.typing-dots .dot {
+    width: 6px;
+    height: 6px;
+    background: var(--v-text-primary-base);
+    border-radius: 50%;
+    display: inline-block;
+    animation: bounce 1.3s infinite ease-in-out;
+}
+.typing-dots .dot:nth-child(2) {
+    animation-delay: 0.15s;
+}
+.typing-dots .dot:nth-child(3) {
+    animation-delay: 0.3s;
+}
+@keyframes bounce {
+    0%,
+    80%,
+    100% {
+        transform: translateY(0);
+        opacity: 0.6;
+    }
+    40% {
+        transform: translateY(-4px);
+        opacity: 1;
+    }
+}
+/* awaiting indicator layout */
+.awaiting-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+.processing-note {
+    font-size: 12px;
+    color: var(--v-text-primary-base);
+}
+/* highlight active chat in history dropdown */
+.active-chat {
+    background-color: rgba(0, 0, 0, 0.06) !important;
+}
+</style>