From 2298c1c115ff23edda8f68a3a5b5f5703faafd21 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Mon, 14 Apr 2025 12:34:10 +0200
Subject: [PATCH] feat: refactor chat message display into separate component

---
 app/components/chat/Messages.vue | 68 ++++++++++++++++++++++++++++++++
 app/pages/[agent].vue            | 60 +++-------------------------
 2 files changed, 73 insertions(+), 55 deletions(-)
 create mode 100644 app/components/chat/Messages.vue

diff --git a/app/components/chat/Messages.vue b/app/components/chat/Messages.vue
new file mode 100644
index 0000000..5c1e076
--- /dev/null
+++ b/app/components/chat/Messages.vue
@@ -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>
diff --git a/app/pages/[agent].vue b/app/pages/[agent].vue
index 5f402fc..c3a5fb0 100644
--- a/app/pages/[agent].vue
+++ b/app/pages/[agent].vue
@@ -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"