feat(#9): Nuxt 4 migration

legalconsenthub/app/components/TheComment.vue

@@ -0,0 +1,63 @@
+<template>
+  <template v-if="comments && comments.length > 0">
+    <UChatMessages :auto-scroll="false" :should-scroll-to-bottom="false">
+      <UChatMessage
+        v-for="comment in comments"
+        :id="comment.id"
+        :key="comment.id"
+        :avatar="{ icon: 'i-lucide-bot' }"
+        :content="comment.message"
+        role="user"
+        :side="isCommentByUser(comment) ? 'right' : 'left'"
+        variant="subtle"
+        :actions="createChatMessageActions(comment)"
+      >
+        <template #leading="{ avatar }">
+          <div class="flex flex-col">
+            <UAvatar icon="i-lucide-bot" />
+            <p class="text-sm">{{ comment.createdBy.name }}</p>
+          </div>
+        </template>
+      </UChatMessage>
+    </UChatMessages>
+  </template>
+  <UTextarea v-model="commentTextAreaValue" class="w-full" />
+  <UButton v-if="!isEditingComment" class="my-3 lg:my-4" @click="submitComment(formElementId)"> Submit </UButton>
+  <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="updateEditComment"> Edit comment </UButton>
+  <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="cancelEditComment"> Cancel </UButton>
+</template>
+
+<script setup lang="ts">
+import type { CommentDto } from '~~/.api-client'
+import { useCommentTextarea } from '~/composables/comment/useCommentTextarea'
+
+const props = defineProps<{
+  formElementId: string
+  applicationFormId: string
+  comments?: CommentDto[]
+}>()
+
+const commentActions = useCommentTextarea(props.applicationFormId)
+const {
+  submitComment,
+  updateEditComment,
+  cancelEditComment,
+  editComment,
+  isEditingComment,
+  isCommentByUser,
+  commentTextAreaValue
+} = commentActions
+
+function createChatMessageActions(comment: CommentDto) {
+  const chatMessageActions = []
+
+  if (isCommentByUser(comment)) {
+    chatMessageActions.push({
+      label: 'Edit',
+      icon: 'i-lucide-pencil',
+      onClick: () => editComment(comment)
+    })
+  }
+  return chatMessageActions
+}
+</script>