arthur/artagents
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/artagents.git synced 2026-01-14 12:14:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: refactor chat message display into separate component

Browse Source
This commit is contained in:
Arthur Danjou
2025-04-14 12:34:10 +02:00
parent c0b5539f12
commit 2298c1c115
2 changed files with 73 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/components/chat/Messages.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div
ref="messagesRef"
class="h-full overflow-auto"
>
<div v-if="initialMessages.length > 0">
<div
v-for="message in initialMessages"
:key="message.id"
class="flex flex-col py-4"
>
<div :class="message.role === 'assistant' ? 'pr-8 mr-auto' : 'pl-8 ml-auto'">
<MDC
class="p-2 mt-1 text-sm rounded-xl text-smp-2 whitespace-pre-line"
:class="message.role === 'assistant' ? 'text-gray-700 bg-neutral-100 dark:text-white dark:bg-neutral-800' : 'text-white bg-blue-400 dark:text-white dark:bg-blue-400'"
:value="message.content"
:cache-key="message.id.toString()"
/>
</div>
</div>
<USeparator
label="New conversation"
color="neutral"
type="dotted"
/>
</div>
<div class="flex flex-col">
<div class="pr-8 mr-auto py-4">
<MDC
class="p-2 mt-1 text-sm rounded-xl text-smp-2 whitespace-pre-line text-gray-700 bg-neutral-100 dark:text-white dark:bg-neutral-800"
:value="currentAgent?.welcomeMessage || 'Hello, how can I help you today?'"
/>
</div>
</div>
<div
v-for="message in messages.filter(m => !initialMessages.some(im => im.id === m.id))"
:key="message.id"
class="flex flex-col py-4"
>
<div :class="message.role === 'assistant' ? 'pr-8 mr-auto' : 'pl-8 ml-auto'">
<MDC
class="p-2 mt-1 text-sm rounded-xl text-smp-2 whitespace-pre-line"
:class="message.role === 'assistant' ? 'text-gray-700 bg-neutral-100 dark:text-white dark:bg-neutral-800' : 'text-white bg-blue-400 dark:text-white dark:bg-blue-400'"
:value="message.content"
:cache-key="message.id"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import type { Message } from 'ai'
import type { Agent } from '~~/types'
defineProps<{
messages: Message[]
initialMessages: Message[]
currentAgent: Agent
}>()
const messagesRef = ref<HTMLDivElement | null>(null)
onMounted(() => {
if (messagesRef.value) {
messagesRef.value.scrollTo({ top: messagesRef.value.scrollHeight, behavior: 'smooth' })
}
})
</script>

60
app/pages/[agent].vue
View File

@@ -40,13 +40,6 @@ onStartTyping(() => { // TODO: fix focus
inputRef.value!.focus()
})
const messagesRef = ref<HTMLDivElement | null>(null)
onMounted(() => {
if (messagesRef.value) {
messagesRef.value.scrollTo({ top: messagesRef.value.scrollHeight, behavior: 'smooth' })
}
})
const isModalOpen = ref(false)
async function deleteConversation() {
await deleteChat(currentAgent!.slug)
@@ -136,54 +129,11 @@ async function deleteConversation() {
</template>
</UPopover>
</div>
<div
ref="messagesRef"
class="h-full overflow-auto"
>
<div v-if="initialMessages.length > 0">
<div
v-for="message in initialMessages"
:key="message.id"
class="flex flex-col py-4"
>
<div :class="message.role === 'assistant' ? 'pr-8 mr-auto' : 'pl-8 ml-auto'">
<MDC
class="p-2 mt-1 text-sm rounded-xl text-smp-2 whitespace-pre-line"
:class="message.role === 'assistant' ? 'text-gray-700 bg-neutral-100 dark:text-white dark:bg-neutral-800' : 'text-white bg-blue-400 dark:text-white dark:bg-blue-400'"
:value="message.content"
:cache-key="message.id.toString()"
/>
</div>
</div>
<USeparator
label="New conversation"
color="neutral"
type="dotted"
/>
</div>
<div class="flex flex-col">
<div class="pr-8 mr-auto py-4">
<MDC
class="p-2 mt-1 text-sm rounded-xl text-smp-2 whitespace-pre-line text-gray-700 bg-neutral-100 dark:text-white dark:bg-neutral-800"
:value="currentAgent?.welcomeMessage || 'Hello, how can I help you today?'"
/>
</div>
</div>
<div
v-for="message in messages.filter(m => !initialMessages.some(im => im.id === m.id))"
:key="message.id"
class="flex flex-col py-4"
>
<div :class="message.role === 'assistant' ? 'pr-8 mr-auto' : 'pl-8 ml-auto'">
<MDC
class="p-2 mt-1 text-sm rounded-xl text-smp-2 whitespace-pre-line"
:class="message.role === 'assistant' ? 'text-gray-700 bg-neutral-100 dark:text-white dark:bg-neutral-800' : 'text-white bg-blue-400 dark:text-white dark:bg-blue-400'"
:value="message.content"
:cache-key="message.id"
/>
</div>
</div>
</div>
<ChatMessages
:messages="messages"
:initial-messages="initialMessages"
:current-agent="currentAgent"
/>
<div
v-if="error"
class="flex items-center justify-center gap-2"