Integrated application chat system

ui/src/components/application/ApplicationChat.vue

@@ -40,12 +40,8 @@ function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => vo
         <FormItem>
           <FormLabel class="sr-only">Comment</FormLabel>
           <FormControl>
-            <Textarea
-              v-bind="componentField"
-              rows="3"
-              placeholder="Write a comment…"
-              class="bg-neutral-800 resize-none w-full"
-            />
+            <Textarea v-bind="componentField" rows="3" placeholder="Write a comment…"
+              class="bg-neutral-800 resize-none w-full" />
           </FormControl>
           <FormMessage />
         </FormItem>
@@ -59,12 +55,20 @@ function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => vo
 
     <!-- Existing posts -->
     <div class="space-y-3">
-      <div
-        v-for="(m, i) in props.messages"
-        :key="m.id ?? i"
-        class="rounded-md border border-neutral-800 p-3"
-      >
-        <p class="text-sm whitespace-pre-wrap">{{ m.text ?? m.message ?? '' }}</p>
+      <div v-for="(message, i) in props.messages" :key="message.id ?? i"
+        class="rounded-md border border-neutral-800 p-3 space-y-5">
+        <!-- Comment header -->
+        <div class="flex justify-between">
+          <p>{{ message.poster_name }}</p>
+          <p class="text-muted-foreground">{{ new Date(message.post_time).toLocaleString("EN-us", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+            hour: "2-digit",
+            minute: "2-digit"
+            }) }}</p>
+        </div>
+        <p>{{ message.post_content }}</p>
       </div>
     </div>
   </div>