feat(frontend): Add editing of comment

legalconsenthub/components/FormEngine.vue

@@ -25,8 +25,9 @@
             :avatar="{ icon: 'i-lucide-bot' }"
             :content="comment.message"
             role="user"
-            :side="comment.createdBy.id === userDto.id ? 'right' : 'left'"
+            :side="isCommentByUser(comment) ? 'right' : 'left'"
             variant="subtle"
+            :actions="createChatMessageActions(comment)"
           >
             <template #leading="{ avatar }">
               <div class="flex flex-col">
@@ -38,16 +39,17 @@
         </UChatMessages>
       </template>
       <UTextarea v-model="commentTextAreaValue" class="w-full" />
-      <UButton class="my-3 lg:my-4" @click="submitComment(applicationFormId, formElement.id, commentTextAreaValue)">
-        Submit
-      </UButton>
+      <UButton v-if="!isEditingComment" class="my-3 lg:my-4" @click="submitComment(formElement.id)"> 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>
     <USeparator />
   </template>
 </template>
 
 <script setup lang="ts">
-import type { CreateCommentDto, FormElementDto, FormOptionDto } from '~/.api-client'
+import type { FormElementDto, FormOptionDto } from '~/.api-client'
+import { useComment } from '~/composables/comment/useComment'
 import { resolveComponent } from 'vue'
 
 const props = defineProps<{
@@ -62,9 +64,19 @@ const emit = defineEmits<{
 }>()
 
 const commentStore = useCommentStore()
-const { load: loadComments, createComment } = commentStore
+const { load: loadComments } = commentStore
 const { comments } = storeToRefs(commentStore)
-const { userDto } = useAuth()
+
+const commentActions = useComment(props.applicationFormId)
+const {
+  submitComment,
+  updateEditComment,
+  cancelEditComment,
+  editComment,
+  isEditingComment,
+  isCommentByUser,
+  commentTextAreaValue
+} = commentActions
 
 if (props.applicationFormId) {
   console.log('Loading comments for application form:', props.applicationFormId)
@@ -72,7 +84,6 @@ if (props.applicationFormId) {
 }
 
 const activeFormElement = ref('')
-const commentTextAreaValue = ref('')
 
 // TODO: Lazy loading?
 function getResolvedComponent(formElement: FormElementDto) {
@@ -107,17 +118,16 @@ function toggleComments(formElementId: string) {
   emit('click:comments', formElementId)
 }
 
-async function submitComment(applicationFormId: string, formElementId: string, newComment: string) {
-  const newCommentDto: CreateCommentDto = {
-    message: newComment,
-    createdBy: userDto.value
-  }
-  try {
-    await createComment(applicationFormId, formElementId, newCommentDto)
-    commentTextAreaValue.value = ''
-    useToast().add({ title: 'Comment created successfully', color: 'success' })
-  } catch {
-    useToast().add({ title: 'Error creating comment', color: 'error' })
+function createChatMessageActions(comment: CommentDto) {
+  const chatMessageActions = []
+
+  if (isCommentByUser(comment)) {
+    chatMessageActions.push({
+      label: 'Edit',
+      icon: 'i-lucide-pencil',
+      onClick: () => editComment(comment)
+    })
   }
+  return chatMessageActions
 }
 </script>