Restructured Ticket Chat

pages/support/[id].vue

@@ -1,6 +1,7 @@
 <script setup>
 
 import {useFunctions} from "~/composables/useFunctions.js";
+import dayjs from "dayjs";
 
 const supabase = useSupabaseClient()
 const profileStore = useProfileStore()
@@ -153,33 +154,56 @@ const closeTicket = async () => {
     </template>
   </UDashboardNavbar>
   <UDashboardPanelContent v-if="loaded">
-    <UAlert
+    <div
+        v-if="profileStore.currentTenant === 5"
+        v-for="item in itemInfo.ticketmessages"
+        class="mb-3 flex flex-row p-5"
+        :style="item.internal ? 'border: 1px solid red; border-radius: 15px' : item.profile.tenant === 5 ? 'border: 1px solid #69c350; border-radius: 15px' : 'border: 1px solid #fff; border-radius: 15px'"
+    >
+      <UAvatar :alt="item.profile.fullName" class="mr-3"/>
+      <div>
+        <p class="text-xl">{{item.type}} - {{item.profile.fullName}}</p>
+        <p v-html="item.content"></p>
+        <p class="mt-1 text-gray-600 dark:text-gray-400">{{dayjs(item.created_at).format("DD.MM.YYYY HH:mm")}}</p>
+      </div>
+    </div>
+
+
+
+<!--    <UAlert
         v-if="profileStore.currentTenant === 5"
         v-for="item in itemInfo.ticketmessages"
-        :description="item.content"
         :avatar="{ alt: item.profile.fullName}"
         :title="`${item.type} - ${item.profile.fullName}`"
         class="mb-3"
         :color="item.internal ? 'rose' : item.profile.tenant === 5 ? 'primary' : 'white'"
         variant="outline"
-    />
+    >
+      <template #description>
+        <span v-html="item.content"></span>
+        <p class="mt-1 text-gray-600 dark:text-gray-400">{{dayjs(item.created_at).format("DD.MM.YYYY HH:mm")}}</p>
+      </template>
+    </UAlert>-->
     <UAlert
         v-else
         v-for="item in itemInfo.ticketmessages.filter(i => !i.internal)"
-        :description="item.content"
         :avatar="{ alt: item.profile.fullName}"
         :title="`${item.type} - ${item.profile.fullName}`"
         class="mb-3"
         :color="item.profile.tenant === 5 ? 'primary' : 'white'"
         variant="outline"
-    />
+    >
+      <template #description>
+        <p>{{item.content}}</p>
+        <p class="mt-1 text-gray-600 dark:text-gray-400">{{dayjs(item.created_at).format("DD.MM.YYYY HH:mm")}}</p>
+      </template>
+    </UAlert>
 
     <InputGroup>
-      <UInput
+      <UTextarea
         class="w-full mr-2"
         placeholder="Neue Nachricht senden"
         v-model="messageContent"
-        @keyup.enter="addMessage"
       />
       <UButton
         @click="addMessage"