Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/dashboard/components-next/CustomAttributes/AttributeBadge.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'resolution',
+    validator: value => ['pre-chat', 'resolution'].includes(value),
+  },
+});
+
+const { t } = useI18n();
+
+const attributeConfig = {
+  'pre-chat': {
+    colorClass: 'text-n-blue-11',
+    icon: 'i-lucide-message-circle',
+    labelKey: 'ATTRIBUTES_MGMT.BADGES.PRE_CHAT',
+    color: 'slate',
+  },
+  resolution: {
+    colorClass: 'text-n-teal-11',
+    icon: 'i-lucide-circle-check-big',
+    labelKey: 'ATTRIBUTES_MGMT.BADGES.RESOLUTION',
+    color: 'slate',
+  },
+};
+const config = computed(
+  () => attributeConfig[props.type] || attributeConfig.resolution
+);
+</script>
+
+<template>
+  <Label :label="t(config.labelKey)" :color="config.color" compact>
+    <template #icon>
+      <Icon :icon="config.icon" class="size-3.5 text-n-slate-12" />
+    </template>
+  </Label>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/CustomAttributes/CheckboxAttribute.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { ref } from 'vue';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Switch from 'dashboard/components-next/switch/Switch.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update', 'delete']);
+
+const attributeValue = ref(Boolean(props.attribute.value));
+
+const handleChange = value => {
+  emit('update', value);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full gap-2"
+    :class="{
+      'justify-start': isEditingView,
+      'justify-end': !isEditingView,
+    }"
+  >
+    <Switch v-model="attributeValue" @change="handleChange" />
+    <Button
+      v-if="isEditingView"
+      variant="faded"
+      color="ruby"
+      icon="i-lucide-trash"
+      size="xs"
+      class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+      @click="emit('delete')"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { parseISO } from 'date-fns';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update', 'delete']);
+
+const { t } = useI18n();
+
+const isEditingValue = ref(false);
+const editedValue = ref(props.attribute.value || '');
+
+const rules = {
+  editedValue: {
+    required,
+    isDate: value => new Date(value).toISOString(),
+  },
+};
+
+const v$ = useVuelidate(rules, { editedValue });
+
+const formattedDate = computed(() => {
+  return props.attribute.value
+    ? new Date(props.attribute.value).toLocaleDateString()
+    : t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT');
+});
+
+const hasError = computed(() => v$.value.$errors.length > 0);
+
+const defaultDateValue = computed({
+  get() {
+    const existingDate = editedValue.value ?? props.attribute.value;
+    if (existingDate) return new Date(existingDate).toISOString().slice(0, 10);
+    return isEditingValue.value && !hasError.value
+      ? new Date().toISOString().slice(0, 10)
+      : '';
+  },
+  set(value) {
+    editedValue.value = value ? new Date(value).toISOString() : value;
+  },
+});
+
+const toggleEditValue = value => {
+  isEditingValue.value =
+    typeof value === 'boolean' ? value : !isEditingValue.value;
+
+  if (isEditingValue.value && !editedValue.value) {
+    v$.value.$reset();
+    editedValue.value = new Date().toISOString();
+  }
+};
+
+const handleInputUpdate = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  emit('update', parseISO(editedValue.value));
+  isEditingValue.value = false;
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full min-w-0 gap-2"
+    :class="{
+      'justify-start': isEditingView,
+      'justify-end': !isEditingView,
+    }"
+  >
+    <span
+      v-if="!isEditingValue"
+      class="min-w-0 text-sm"
+      :class="{
+        'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+          !isEditingView,
+        'text-n-slate-12 truncate': isEditingView,
+      }"
+      @click="toggleEditValue(!isEditingView)"
+    >
+      {{ formattedDate }}
+    </span>
+
+    <div
+      v-if="isEditingView && !isEditingValue"
+      class="flex items-center gap-1"
+    >
+      <Button
+        variant="faded"
+        color="slate"
+        icon="i-lucide-pencil"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="toggleEditValue(true)"
+      />
+      <Button
+        variant="faded"
+        color="ruby"
+        icon="i-lucide-trash"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="emit('delete')"
+      />
+    </div>
+
+    <div
+      v-if="isEditingValue"
+      v-on-clickaway="() => toggleEditValue(false)"
+      class="flex items-center w-full"
+    >
+      <Input
+        v-model="defaultDateValue"
+        type="date"
+        class="w-full [&>p]:absolute [&>p]:mt-0.5 [&>p]:top-8 ltr:[&>p]:left-0 rtl:[&>p]:right-0"
+        :message="
+          hasError
+            ? t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_DATE')
+            : ''
+        "
+        :message-type="hasError ? 'error' : 'info'"
+        autofocus
+        custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
+        @keyup.enter="handleInputUpdate"
+      />
+      <Button
+        icon="i-lucide-check"
+        :color="hasError ? 'ruby' : 'blue'"
+        size="sm"
+        class="flex-shrink-0 ltr:rounded-l-none rtl:rounded-r-none"
+        @click="handleInputUpdate"
+      />
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update', 'delete']);
+
+const { t } = useI18n();
+
+const [showAttributeListDropdown, toggleAttributeListDropdown] = useToggle();
+
+const attributeListMenuItems = computed(() => {
+  return (
+    props.attribute.attributeValues?.map(value => ({
+      label: value,
+      value,
+      action: 'select',
+      isSelected: value === props.attribute.value,
+    })) || []
+  );
+});
+
+const handleAttributeAction = async action => {
+  emit('update', action.value);
+  toggleAttributeListDropdown(false);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full min-w-0 gap-2"
+    :class="{
+      'justify-start': isEditingView,
+      'justify-end': !isEditingView,
+    }"
+  >
+    <div
+      v-on-clickaway="() => toggleAttributeListDropdown(false)"
+      class="relative flex items-center"
+    >
+      <span
+        class="min-w-0 text-sm"
+        :class="{
+          'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+            !isEditingView,
+          'text-n-slate-12 truncate flex-1': isEditingView,
+        }"
+        @click="toggleAttributeListDropdown(!props.isEditingView)"
+      >
+        {{
+          attribute.value ||
+          t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.SELECT')
+        }}
+      </span>
+      <DropdownMenu
+        v-if="showAttributeListDropdown"
+        :menu-items="attributeListMenuItems"
+        show-search
+        class="w-48 mt-2 top-full"
+        :class="{
+          'ltr:right-0 rtl:left-0': !isEditingView,
+          'ltr:left-0 rtl:right-0': isEditingView,
+        }"
+        @action="handleAttributeAction($event)"
+      />
+    </div>
+
+    <div v-if="isEditingView" class="flex items-center gap-1">
+      <Button
+        variant="faded"
+        color="slate"
+        icon="i-lucide-pencil"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="toggleAttributeListDropdown()"
+      />
+      <Button
+        variant="faded"
+        color="ruby"
+        icon="i-lucide-trash"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="emit('delete')"
+      />
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue

@@ -0,0 +1,201 @@
+<!-- Attribute type "Text, URL, Number" -->
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { isValidURL } from 'dashboard/helper/URLHelper.js';
+import { getRegexp } from 'shared/helpers/Validators';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update', 'delete']);
+
+const { t } = useI18n();
+const isEditingValue = ref(false);
+const editedValue = ref(props.attribute.value || '');
+
+const isAttributeTypeLink = computed(
+  () => props.attribute.attributeDisplayType === 'link'
+);
+
+const isAttributeTypeText = computed(
+  () => props.attribute.attributeDisplayType === 'text'
+);
+
+const isAttributeTypeNumber = computed(
+  () => props.attribute.attributeDisplayType === 'number'
+);
+
+const rules = computed(() => ({
+  editedValue: {
+    required,
+    ...(isAttributeTypeLink.value && {
+      url: value => !value || isValidURL(value),
+    }),
+    ...(isAttributeTypeText.value &&
+      props.attribute.regexPattern && {
+        regexValidation: value => {
+          if (!value) return true;
+          return getRegexp(props.attribute.regexPattern).test(value);
+        },
+      }),
+  },
+}));
+
+const v$ = useVuelidate(rules, { editedValue });
+
+const hasError = computed(() => v$.value.$error);
+
+const attributeErrorMessage = computed(() => {
+  if (!hasError.value) return '';
+
+  if (isAttributeTypeLink.value && v$.value.editedValue.url?.$invalid) {
+    return t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_URL');
+  }
+
+  if (
+    isAttributeTypeText.value &&
+    props.attribute.regexPattern &&
+    v$.value.editedValue.regexValidation?.$invalid
+  ) {
+    return (
+      props.attribute.regexCue ||
+      t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_INPUT')
+    );
+  }
+
+  if (isAttributeTypeNumber.value && v$.value.editedValue.required?.$invalid) {
+    return t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.INVALID_NUMBER');
+  }
+
+  return t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.VALIDATIONS.REQUIRED');
+});
+
+const getInputType = computed(() => {
+  switch (props.attribute.attributeDisplayType) {
+    case 'link':
+      return 'url';
+    case 'number':
+      return 'number';
+    default:
+      return 'text';
+  }
+});
+
+const toggleEditValue = value => {
+  isEditingValue.value =
+    typeof value === 'boolean' ? value : !isEditingValue.value;
+  if (isEditingValue.value) {
+    v$.value.$reset();
+    editedValue.value = props.attribute.value || '';
+  }
+};
+
+const handleInputUpdate = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  emit('update', editedValue.value);
+  toggleEditValue(false);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full min-w-0 gap-2"
+    :class="{
+      'justify-start': isEditingView,
+      'justify-end': !isEditingView,
+    }"
+  >
+    <span
+      v-if="!isEditingValue"
+      class="min-w-0 text-sm"
+      :class="{
+        'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
+          !isEditingView,
+        'text-n-slate-12 truncate': isEditingView && !isAttributeTypeLink,
+        'truncate hover:text-n-brand text-n-blue-11':
+          isEditingView && isAttributeTypeLink,
+      }"
+      @click="toggleEditValue(!isEditingView)"
+    >
+      <a
+        v-if="isAttributeTypeLink && attribute.value && isEditingView"
+        :href="attribute.value"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="hover:underline"
+        @click.stop
+      >
+        {{ attribute.value }}
+      </a>
+      <template v-else>
+        {{
+          attribute.value ||
+          t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT')
+        }}
+      </template>
+    </span>
+
+    <div
+      v-if="isEditingView && !isEditingValue"
+      class="flex items-center gap-1"
+    >
+      <Button
+        variant="faded"
+        color="slate"
+        icon="i-lucide-pencil"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="toggleEditValue(true)"
+      />
+      <Button
+        variant="faded"
+        color="ruby"
+        icon="i-lucide-trash"
+        size="xs"
+        class="flex-shrink-0 opacity-0 group-hover/attribute:opacity-100 hover:no-underline"
+        @click="emit('delete')"
+      />
+    </div>
+
+    <div
+      v-if="isEditingValue"
+      v-on-clickaway="() => toggleEditValue(false)"
+      class="flex items-center w-full"
+    >
+      <Input
+        v-model="editedValue"
+        :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT')"
+        :type="getInputType"
+        class="w-full [&>p]:absolute [&>p]:mt-0.5 [&>p]:top-8 ltr:[&>p]:left-0 rtl:[&>p]:right-0"
+        autofocus
+        :message="attributeErrorMessage"
+        :message-type="hasError ? 'error' : 'info'"
+        custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
+        @keyup.enter="handleInputUpdate"
+      />
+      <Button
+        icon="i-lucide-check"
+        :color="hasError ? 'ruby' : 'blue'"
+        size="sm"
+        class="flex-shrink-0 ltr:rounded-l-none rtl:rounded-r-none"
+        @click="handleInputUpdate"
+      />
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/CustomAttributes/story/CustomAttributes.story.vue

@@ -0,0 +1,83 @@
+<script setup>
+import Attributes from './fixtures';
+
+import OtherAttribute from '../OtherAttribute.vue';
+import ListAttribute from '../ListAttribute.vue';
+import DateAttribute from '../DateAttribute.vue';
+import CheckboxAttribute from '../CheckboxAttribute.vue';
+
+const componentMap = {
+  list: ListAttribute,
+  checkbox: CheckboxAttribute,
+  date: DateAttribute,
+  default: OtherAttribute,
+};
+
+const getCurrentComponent = type => {
+  return componentMap[type] || componentMap.default;
+};
+
+const handleUpdate = (type, value) => {
+  console.log(`${type} updated:`, value);
+};
+
+const handleDelete = type => {
+  console.log(`${type} deleted`);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/CustomAttributes"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Create View">
+      <div class="flex flex-col gap-4 p-4 border rounded-lg border-n-strong">
+        <div
+          v-for="attribute in Attributes"
+          :key="attribute.attributeKey"
+          class="grid grid-cols-[140px,1fr] group-hover/attribute items-center gap-1 min-h-10"
+        >
+          <div class="flex items-center justify-between truncate">
+            <span class="text-sm font-medium text-n-slate-12">
+              {{ attribute.attributeDisplayName }}
+            </span>
+          </div>
+          <component
+            :is="getCurrentComponent(attribute.attributeDisplayType)"
+            :attribute="attribute"
+            @update="
+              value => handleUpdate(attribute.attributeDisplayType, value)
+            "
+            @delete="() => handleDelete(attribute.attributeDisplayType)"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Saved View">
+      <div class="flex flex-col gap-4 p-4 border rounded-lg border-n-strong">
+        <div
+          v-for="attribute in Attributes"
+          :key="attribute.attributeKey"
+          class="grid grid-cols-[140px,1fr] group-hover/attribute items-center gap-1 min-h-10"
+        >
+          <div class="flex items-center justify-between truncate">
+            <span class="text-sm font-medium text-n-slate-12">
+              {{ attribute.attributeDisplayName }}
+            </span>
+          </div>
+          <component
+            :is="getCurrentComponent(attribute.attributeDisplayType)"
+            :attribute="attribute"
+            is-editing-view
+            @update="
+              value => handleUpdate(attribute.attributeDisplayType, value)
+            "
+            @delete="() => handleDelete(attribute.attributeDisplayType)"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/CustomAttributes/story/fixtures.js

@@ -0,0 +1,39 @@
+export default [
+  {
+    attributeKey: 'textContact',
+    attributeDisplayName: 'Text Input',
+    attributeDisplayType: 'text',
+    value: 'Sample text value',
+  },
+  {
+    attributeKey: 'linkContact',
+    attributeDisplayName: 'URL Input',
+    attributeDisplayType: 'link',
+    value: 'https://www.chatwoot.com',
+  },
+  {
+    attributeKey: 'numberContact',
+    attributeDisplayName: 'Number Input',
+    attributeDisplayType: 'number',
+    value: '42',
+  },
+  {
+    attributeKey: 'listContact',
+    attributeDisplayName: 'List Input',
+    attributeDisplayType: 'list',
+    value: 'Option 2',
+    attributeValues: ['Option 1', 'Option 2', 'Option 3'],
+  },
+  {
+    attributeKey: 'dateContact',
+    attributeDisplayName: 'Date Input',
+    attributeDisplayType: 'date',
+    value: '2024-03-25T00:00:00.000Z',
+  },
+  {
+    attributeKey: 'checkboxContact',
+    attributeDisplayName: 'Checkbox Input',
+    attributeDisplayType: 'checkbox',
+    value: true,
+  },
+];