feat: add conversation attribute item component

app/javascript/dashboard/components-next/Conversation/ConversationRequiredEmpty.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="flex justify-between items-center px-4 py-4 w-full">
+    <div
+      class="flex justify-center items-center py-6 w-full custom-dashed-border"
+    >
+      <span class="text-sm text-n-slate-11">
+        {{ $t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.NO_ATTRIBUTES') }}
+      </span>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributeItem.vue

@@ -0,0 +1,40 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['delete']);
+
+const handleDelete = () => {
+  emit('delete', props.attribute);
+};
+</script>
+
+<template>
+  <div class="flex justify-between items-center px-4 py-4 w-full">
+    <div class="flex gap-3 items-center">
+      <h5 class="text-sm font-medium text-n-slate-12 line-clamp-1">
+        {{ attribute.label }}
+      </h5>
+      <div class="w-px h-2.5 bg-n-slate-5" />
+      <div class="flex gap-1.5 items-center">
+        <Icon icon="i-lucide-align-justify" class="size-4 text-n-slate-11" />
+        <span class="text-sm text-n-slate-11">{{ attribute.type }}</span>
+      </div>
+      <div class="w-px h-2.5 bg-n-slate-5" />
+      <div class="flex gap-1.5 items-center">
+        <Icon icon="i-lucide-key-round" class="size-4 text-n-slate-11" />
+        <span class="text-sm text-n-slate-11">{{ attribute.value }}</span>
+      </div>
+    </div>
+    <div class="flex gap-2 items-center">
+      <Button icon="i-lucide-trash" sm slate ghost @click.stop="handleDelete" />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributes.vue

@@ -3,6 +3,8 @@ import { ref } from 'vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import ConversationRequiredAttributeItem from 'dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributeItem.vue';
+import ConversationRequiredEmpty from 'dashboard/components-next/Conversation/ConversationRequiredEmpty.vue';
 
 defineProps({
   title: { type: String, default: '' },
@@ -17,11 +19,21 @@ const handleClick = () => {
   emit('click');
 };
 
+const conversationRequiredAttributes = [
+  {
+    action: 'add',
+    value: 'installation_type',
+    label: 'Installation Type',
+    type: 'Text',
+  },
+];
+
 const attributeOptions = [
   {
     action: 'add',
     value: 'installation_type',
     label: 'Installation Type',
+    type: 'Text',
   },
   {
     action: 'add',
@@ -62,11 +74,16 @@ const handleAttributeAction = () => {
 const closeDropdown = () => {
   showDropdown.value = false;
 };
+
+const handleDelete = () => {};
 </script>
 
 <template>
-  <CardLayout class="[&>div]:px-5" @click="handleClick">
-    <div class="flex flex-col gap-2 items-start">
+  <CardLayout
+    class="[&>div]:px-0 [&>div]:py-0 [&>div]:divide-y [&>div]:divide-n-weak"
+    @click="handleClick"
+  >
+    <div class="flex flex-col gap-2 items-start px-5 py-4">
       <div class="flex justify-between items-center w-full">
         <h3 class="text-base font-medium text-n-slate-12">{{ title }}</h3>
         <div v-on-clickaway="closeDropdown" class="relative">
@@ -91,5 +108,16 @@ const closeDropdown = () => {
       </div>
       <p class="mb-0 text-sm text-n-slate-11">{{ description }}</p>
     </div>
+
+    <ConversationRequiredEmpty
+      v-if="conversationRequiredAttributes.length === 0"
+    />
+
+    <ConversationRequiredAttributeItem
+      v-for="attribute in conversationRequiredAttributes"
+      :key="attribute.value"
+      :attribute="attribute"
+      @delete="handleDelete"
+    />
   </CardLayout>
 </template>

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -492,6 +492,7 @@
     "REQUIRED_ATTRIBUTES": {
       "TITLE": "Attributes required on resolution",
       "DESCRIPTION": "When resolving a conversation, agents will be prompted to fill these attributes if they haven't yet.",
+      "NO_ATTRIBUTES": "No attributes added yet",
       "ADD": {
         "TITLE": "Add Attributes",
         "SEARCH_PLACEHOLDER": "Search attributes"