продолжаю чат

client/app/pages/index.vue

@@ -1,10 +1,14 @@
 <template>
-  <PrimeScrollPanel class="flex-1 min-h-0">
-    <div v-auto-animate class="flex flex-col gap-3">
+  <p v-if="!messages.length" class="text-muted-color text-center m-auto">
+    Chat is empty
+  </p>
+
+  <PrimeScrollPanel v-else ref="scroll" class="flex-1 min-h-0 overflow-x-hidden">
+    <div class="flex flex-col gap-3">
       <div
         v-for="message in messages"
         :key="message.id"
-        class="min-w-64 w-fit max-w-[60%]"
+        class="w-fit max-w-[60%]"
         :class="{
           'ml-auto': message.sender === me?.username,
         }"
@@ -17,14 +21,15 @@
         </p>
 
         <div
-          class="px-2 py-1 rounded-lg"
+          class="px-3 py-2 rounded-lg"
           :class="{
             'bg-surface-800': message.sender !== me?.username,
             'bg-surface-700': message.sender === me?.username,
           }"
         >
-          <p v-html="parseMessageText(message.text)" />
-          <p class="text-right text-sm text-muted-color">
+          <p class="[&>a]:break-all" @click="handleMessageClick" v-html="parseMessageText(message.text)" />
+
+          <p class="mt-1 text-right text-sm text-muted-color" :title="formatDate(message.createdAt, 'dd.MM.yyyy, HH:mm')">
             {{ formatDate(message.createdAt) }}
           </p>
         </div>
@@ -32,7 +37,7 @@
     </div>
   </PrimeScrollPanel>
 
-  <div class="pt-3 mt-auto">
+  <div class="mt-3 shrink-0">
     <PrimeInputGroup>
       <!--      <PrimeInputGroupAddon> -->
       <!--        <PrimeButton severity="secondary" class="shrink-0" disabled> -->
@@ -42,7 +47,14 @@
       <!--        </PrimeButton> -->
       <!--      </PrimeInputGroupAddon> -->
 
-      <PrimeInputText v-model="text" placeholder="Write a message..." fluid @keydown.enter="sendMessage" />
+      <PrimeInputText
+        v-model="text"
+        placeholder="Write a message..."
+        fluid
+        autocomplete="off"
+        @keydown.enter.exact="sendMessage"
+        @vue:mounted="onInputMounted"
+      />
 
       <PrimeButton class="shrink-0" label="Send" severity="contrast" @click="sendMessage" />
     </PrimeInputGroup>
@@ -50,6 +62,7 @@
 </template>
 
 <script setup lang="ts">
+import { useEventBus } from '#imports'
 import { format } from 'date-fns'
 import linkifyStr from 'linkify-string'
 import { useChat } from '~/composables/use-chat'
@@ -58,18 +71,36 @@ definePageMeta({
   name: 'Index',
 })
 
+const { openUrl } = useApp()
 const { me } = useClients()
 const chat = useChat()
+const eventBus = useEventBus()
 const { messages } = chat
 
+const scrollRef = useTemplateRef('scroll')
+const contentRef = computed(() => scrollRef.value?.$refs.content)
+
 const text = ref('')
 
+eventBus.on('chat:new-message', onNewMessage)
+
+onScopeDispose(() => {
+  eventBus.off('chat:new-message', onNewMessage)
+})
+
 function parseMessageText(text: string) {
-  return linkifyStr(text, { className: 'underline', rel: 'noopener noreferrer', target: '_blank' })
+  return linkifyStr(
+    text,
+    {
+      className: 'underline',
+      rel: 'noopener noreferrer',
+      target: '_blank',
+    },
+  ).replaceAll('\n', '<br>')
 }
 
-function formatDate(date: string) {
-  return format(date, 'HH:mm')
+function formatDate(date: string, formatStr = 'HH:mm') {
+  return format(date, formatStr)
 }
 
 function sendMessage() {
@@ -82,4 +113,49 @@ function sendMessage() {
 
   text.value = ''
 }
+
+function onInputMounted(ref: VNode) {
+  ref.el?.focus()
+}
+
+const ARRIVED_STATE_THRESHOLD_PIXELS = 1
+async function onNewMessage() {
+  if (!contentRef.value)
+    return
+
+  const arrivedBottom = contentRef.value.scrollTop + contentRef.value.clientHeight
+    >= contentRef.value.scrollHeight - ARRIVED_STATE_THRESHOLD_PIXELS
+
+  const scrollable = contentRef.value.scrollHeight > contentRef.value.clientHeight
+
+  await nextTick()
+
+  if (scrollable && !arrivedBottom)
+    return
+
+  contentRef.value.scrollTo({
+    behavior: 'smooth',
+    top: contentRef.value.scrollHeight,
+  })
+}
+
+function handleMessageClick({ target }: MouseEvent) {
+  if (!target)
+    return
+
+  if (target instanceof HTMLElement) {
+    if (target.tagName === 'A') {
+      target.addEventListener('click', onAnchorClick)
+    }
+  }
+}
+
+function onAnchorClick(event: MouseEvent) {
+  event.preventDefault()
+
+  const target = event.target as HTMLAnchorElement
+
+  console.log('yo')
+  openUrl(target.href)
+}
 </script>