feat(v4): Update the campaigns page design (#10371)

<img width="1439" alt="Screenshot 2024-10-30 at 8 58 12 PM"
src="https://github.com/user-attachments/assets/26231270-5e73-40fb-9efa-c661585ebe7c">


Fixes
https://linear.app/chatwoot/project/campaign-redesign-f82bede26ca7/overview

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import LiveChatCampaignDetails from './LiveChatCampaignDetails.vue';
+import SMSCampaignDetails from './SMSCampaignDetails.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  isLiveChatType: {
+    type: Boolean,
+    default: false,
+  },
+  isEnabled: {
+    type: Boolean,
+    default: false,
+  },
+  status: {
+    type: String,
+    default: '',
+  },
+  sender: {
+    type: Object,
+    default: null,
+  },
+  inbox: {
+    type: Object,
+    default: null,
+  },
+  scheduledAt: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['edit', 'delete']);
+
+const { t } = useI18n();
+
+const STATUS_COMPLETED = 'completed';
+
+const { formatMessage } = useMessageFormatter();
+
+const isActive = computed(() =>
+  props.isLiveChatType ? props.isEnabled : props.status !== STATUS_COMPLETED
+);
+
+const statusTextColor = computed(() => ({
+  'text-n-teal-11': isActive.value,
+  'text-n-slate-12': !isActive.value,
+}));
+
+const campaignStatus = computed(() => {
+  if (props.isLiveChatType) {
+    return props.isEnabled
+      ? t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.ENABLED')
+      : t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.DISABLED');
+  }
+
+  return props.status === STATUS_COMPLETED
+    ? t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED')
+    : t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
+});
+
+const inboxName = computed(() => props.inbox?.name || '');
+
+const inboxIcon = computed(() => {
+  const { phone_number: phoneNumber, channel_type: type } = props.inbox;
+  return getInboxIconByType(type, phoneNumber);
+});
+</script>
+
+<template>
+  <CardLayout class="flex flex-row justify-between flex-1 gap-8" layout="row">
+    <template #header>
+      <div class="flex flex-col items-start gap-2">
+        <div class="flex justify-between gap-3 w-fit">
+          <span
+            class="text-base font-medium capitalize text-n-slate-12 line-clamp-1"
+          >
+            {{ title }}
+          </span>
+          <span
+            class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
+            :class="statusTextColor"
+          >
+            {{ campaignStatus }}
+          </span>
+        </div>
+        <div
+          v-dompurify-html="formatMessage(message)"
+          class="text-sm text-n-slate-11 line-clamp-1 [&>p]:mb-0 h-6"
+        />
+        <div class="flex items-center w-full h-6 gap-2 overflow-hidden">
+          <LiveChatCampaignDetails
+            v-if="isLiveChatType"
+            :sender="sender"
+            :inbox-name="inboxName"
+            :inbox-icon="inboxIcon"
+          />
+          <SMSCampaignDetails
+            v-else
+            :inbox-name="inboxName"
+            :inbox-icon="inboxIcon"
+            :scheduled-at="scheduledAt"
+          />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex items-center justify-end w-20 gap-2">
+        <Button
+          v-if="isLiveChatType"
+          variant="faded"
+          size="sm"
+          color="slate"
+          icon="i-lucide-sliders-vertical"
+          @click="emit('edit')"
+        />
+        <Button
+          variant="faded"
+          color="ruby"
+          size="sm"
+          icon="i-lucide-trash"
+          @click="emit('delete')"
+        />
+      </div>
+    </template>
+  </CardLayout>
+</template>

app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue

@@ -0,0 +1,54 @@
+<script setup>
+import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  sender: {
+    type: Object,
+    default: null,
+  },
+  inboxName: {
+    type: String,
+    default: '',
+  },
+  inboxIcon: {
+    type: String,
+    default: '',
+  },
+});
+
+const { t } = useI18n();
+
+const senderName = computed(
+  () => props.sender?.name || t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.BOT')
+);
+
+const senderThumbnailSrc = computed(() => props.sender?.thumbnail);
+</script>
+
+<template>
+  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
+    {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.SENT_BY') }}
+  </span>
+  <div class="flex items-center gap-1.5 flex-shrink-0">
+    <Thumbnail
+      :author="sender || { name: senderName }"
+      :name="senderName"
+      :src="senderThumbnailSrc"
+    />
+    <span class="text-sm font-medium text-n-slate-12">
+      {{ senderName }}
+    </span>
+  </div>
+  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
+    {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.FROM') }}
+  </span>
+  <div class="flex items-center gap-1.5 flex-shrink-0">
+    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
+    <span class="text-sm font-medium text-n-slate-12">
+      {{ inboxName }}
+    </span>
+  </div>
+</template>

app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue

@@ -0,0 +1,41 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { messageStamp } from 'shared/helpers/timeHelper';
+
+import { useI18n } from 'vue-i18n';
+defineProps({
+  inboxName: {
+    type: String,
+    default: '',
+  },
+  inboxIcon: {
+    type: String,
+    default: '',
+  },
+  scheduledAt: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
+    {{ t('CAMPAIGN.SMS.CARD.CAMPAIGN_DETAILS.SENT_FROM') }}
+  </span>
+  <div class="flex items-center gap-1.5 flex-shrink-0">
+    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
+    <span class="text-sm font-medium text-n-slate-12">
+      {{ inboxName }}
+    </span>
+  </div>
+
+  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
+    {{ t('CAMPAIGN.SMS.CARD.CAMPAIGN_DETAILS.ON') }}
+  </span>
+  <span class="flex-1 text-sm font-medium truncate text-n-slate-12">
+    {{ messageStamp(new Date(scheduledAt), 'LLL d, h:mm a') }}
+  </span>
+</template>

app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue

@@ -0,0 +1,52 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  headerTitle: {
+    type: String,
+    default: '',
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['click', 'close']);
+
+const handleButtonClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
+    <header class="sticky top-0 z-10 px-6 lg:px-0">
+      <div class="w-full max-w-[900px] mx-auto">
+        <div class="flex items-center justify-between w-full h-20 gap-2">
+          <span class="text-xl font-medium text-n-slate-12">
+            {{ headerTitle }}
+          </span>
+          <div
+            v-on-clickaway="() => emit('close')"
+            class="relative group/campaign-button"
+          >
+            <Button
+              :label="buttonLabel"
+              icon="i-lucide-plus"
+              size="sm"
+              class="group-hover/campaign-button:brightness-110"
+              @click="handleButtonClick"
+            />
+            <slot name="action" />
+          </div>
+        </div>
+      </div>
+    </header>
+    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
+      <div class="w-full max-w-[900px] mx-auto py-4">
+        <slot name="default" />
+      </div>
+    </main>
+  </section>
+</template>

app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js

@@ -0,0 +1,212 @@
+export const ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT = [
+  {
+    id: 1,
+    title: 'Chatbot Assistance',
+    inbox: {
+      id: 2,
+      name: 'PaperLayer Website',
+      channel_type: 'Channel::WebWidget',
+      phone_number: '',
+    },
+    sender: {
+      id: 1,
+      name: 'Alexa Rivera',
+    },
+    message: 'Hello! 👋 Need help with our chatbot features? Feel free to ask!',
+    campaign_status: 'active',
+    enabled: true,
+    campaign_type: 'ongoing',
+    trigger_rules: {
+      url: 'https://www.chatwoot.com/features/chatbot/',
+      time_on_page: 10,
+    },
+    trigger_only_during_business_hours: true,
+    created_at: '2024-10-24T13:10:26.636Z',
+    updated_at: '2024-10-24T13:10:26.636Z',
+  },
+  {
+    id: 2,
+    title: 'Pricing Information Support',
+    inbox: {
+      id: 2,
+      name: 'PaperLayer Website',
+      channel_type: 'Channel::WebWidget',
+      phone_number: '',
+    },
+    sender: {
+      id: 1,
+      name: 'Jamie Lee',
+    },
+    message: 'Hello! 👋 Any questions on pricing? I’m here to help!',
+    campaign_status: 'active',
+    enabled: false,
+    campaign_type: 'ongoing',
+    trigger_rules: {
+      url: 'https://www.chatwoot.com/pricings',
+      time_on_page: 10,
+    },
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-24T13:11:08.763Z',
+    updated_at: '2024-10-24T13:11:08.763Z',
+  },
+  {
+    id: 3,
+    title: 'Product Setup Assistance',
+    inbox: {
+      id: 2,
+      name: 'PaperLayer Website',
+      channel_type: 'Channel::WebWidget',
+      phone_number: '',
+    },
+    sender: {
+      id: 1,
+      name: 'Chatwoot',
+    },
+    message: 'Hi! Chatwoot here. Need help setting up? Let me know!',
+    campaign_status: 'active',
+    enabled: false,
+    campaign_type: 'ongoing',
+    trigger_rules: {
+      url: 'https://{*.}?chatwoot.com/apps/account/*/settings/inboxes/new/',
+      time_on_page: 10,
+    },
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-24T13:11:44.285Z',
+    updated_at: '2024-10-24T13:11:44.285Z',
+  },
+  {
+    id: 4,
+    title: 'General Assistance Campaign',
+    inbox: {
+      id: 2,
+      name: 'PaperLayer Website',
+      channel_type: 'Channel::WebWidget',
+      phone_number: '',
+    },
+    sender: {
+      id: 1,
+      name: 'Chris Barlow',
+    },
+    message:
+      'Hi there! 👋 I’m here for any questions you may have. Let’s chat!',
+    campaign_status: 'active',
+    enabled: true,
+    campaign_type: 'ongoing',
+    trigger_rules: {
+      url: 'https://siv.com',
+      time_on_page: 200,
+    },
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-29T19:54:33.741Z',
+    updated_at: '2024-10-29T19:56:26.296Z',
+  },
+];
+
+export const ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT = [
+  {
+    id: 1,
+    title: 'Customer Feedback Request',
+    inbox: {
+      id: 6,
+      name: 'PaperLayer Mobile',
+      channel_type: 'Channel::Sms',
+      phone_number: '+29818373149903',
+      provider: 'default',
+    },
+    message:
+      'Hello! Enjoying our product? Share your feedback on G2 and earn a $25 Amazon coupon: https://chwt.app/g2-review',
+    campaign_status: 'active',
+    enabled: true,
+    campaign_type: 'one_off',
+    scheduled_at: 1729775588,
+    audience: [
+      { id: 4, type: 'Label' },
+      { id: 5, type: 'Label' },
+      { id: 6, type: 'Label' },
+    ],
+    trigger_rules: {},
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-24T13:13:08.496Z',
+    updated_at: '2024-10-24T13:15:38.698Z',
+  },
+  {
+    id: 2,
+    title: 'Welcome New Customer',
+    inbox: {
+      id: 6,
+      name: 'PaperLayer Mobile',
+      channel_type: 'Channel::Sms',
+      phone_number: '+29818373149903',
+      provider: 'default',
+    },
+    message: 'Welcome aboard! 🎉 Let us know if you have any questions.',
+    campaign_status: 'completed',
+    enabled: true,
+    campaign_type: 'one_off',
+    scheduled_at: 1729732500,
+    audience: [
+      { id: 1, type: 'Label' },
+      { id: 6, type: 'Label' },
+      { id: 5, type: 'Label' },
+      { id: 2, type: 'Label' },
+      { id: 4, type: 'Label' },
+    ],
+    trigger_rules: {},
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-24T13:14:00.168Z',
+    updated_at: '2024-10-24T13:15:38.707Z',
+  },
+  {
+    id: 3,
+    title: 'New Business Welcome',
+    inbox: {
+      id: 6,
+      name: 'PaperLayer Mobile',
+      channel_type: 'Channel::Sms',
+      phone_number: '+29818373149903',
+      provider: 'default',
+    },
+    message: 'Hello! We’re excited to have your business with us!',
+    campaign_status: 'active',
+    enabled: true,
+    campaign_type: 'one_off',
+    scheduled_at: 1730368440,
+    audience: [
+      { id: 1, type: 'Label' },
+      { id: 3, type: 'Label' },
+      { id: 6, type: 'Label' },
+      { id: 4, type: 'Label' },
+      { id: 2, type: 'Label' },
+      { id: 5, type: 'Label' },
+    ],
+    trigger_rules: {},
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-30T07:54:49.915Z',
+    updated_at: '2024-10-30T07:54:49.915Z',
+  },
+  {
+    id: 4,
+    title: 'New Member Onboarding',
+    inbox: {
+      id: 6,
+      name: 'PaperLayer Mobile',
+      channel_type: 'Channel::Sms',
+      phone_number: '+29818373149903',
+      provider: 'default',
+    },
+    message: 'Welcome to the team! Reach out if you have questions.',
+    campaign_status: 'completed',
+    enabled: true,
+    campaign_type: 'one_off',
+    scheduled_at: 1730304840,
+    audience: [
+      { id: 1, type: 'Label' },
+      { id: 3, type: 'Label' },
+      { id: 6, type: 'Label' },
+    ],
+    trigger_rules: {},
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-29T16:14:10.374Z',
+    updated_at: '2024-10-30T16:15:03.157Z',
+  },
+];

app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
+
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="flex flex-col gap-4 p-px">
+        <CampaignCard
+          v-for="campaign in ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT"
+          :key="campaign.id"
+          :title="campaign.title"
+          :message="campaign.message"
+          :is-enabled="campaign.enabled"
+          :status="campaign.campaign_status"
+          :trigger-rules="campaign.trigger_rules"
+          :sender="campaign.sender"
+          :inbox="campaign.inbox"
+          :scheduled-at="campaign.scheduled_at"
+          is-live-chat-type
+        />
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>

app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
+
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="flex flex-col gap-4 p-px">
+        <CampaignCard
+          v-for="campaign in ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT"
+          :key="campaign.id"
+          :title="campaign.title"
+          :message="campaign.message"
+          :is-enabled="campaign.enabled"
+          :status="campaign.campaign_status"
+          :trigger-rules="campaign.trigger_rules"
+          :sender="campaign.sender"
+          :inbox="campaign.inbox"
+          :scheduled-at="campaign.scheduled_at"
+        />
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue

@@ -0,0 +1,39 @@
+<script setup>
+import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
+
+defineProps({
+  campaigns: {
+    type: Array,
+    required: true,
+  },
+  isLiveChatType: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['edit', 'delete']);
+
+const handleEdit = campaign => emit('edit', campaign);
+const handleDelete = campaign => emit('delete', campaign);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CampaignCard
+      v-for="campaign in campaigns"
+      :key="campaign.id"
+      :title="campaign.title"
+      :message="campaign.message"
+      :is-enabled="campaign.enabled"
+      :status="campaign.campaign_status"
+      :trigger-rules="campaign.trigger_rules"
+      :sender="campaign.sender"
+      :inbox="campaign.inbox"
+      :scheduled-at="campaign.scheduled_at"
+      :is-live-chat-type="isLiveChatType"
+      @edit="handleEdit(campaign)"
+      @delete="handleDelete(campaign)"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  selectedCampaign: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+
+const deleteCampaign = async id => {
+  if (!id) return;
+
+  try {
+    await store.dispatch('campaigns/delete', id);
+    useAlert(t('CAMPAIGN.CONFIRM_DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('CAMPAIGN.CONFIRM_DELETE.API.ERROR_MESSAGE'));
+  }
+};
+
+const handleDialogConfirm = async () => {
+  await deleteCampaign(props.selectedCampaign.id);
+  dialogRef.value?.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="alert"
+    :title="t('CAMPAIGN.CONFIRM_DELETE.TITLE')"
+    :description="t('CAMPAIGN.CONFIRM_DELETE.DESCRIPTION')"
+    :confirm-button-label="t('CAMPAIGN.CONFIRM_DELETE.CONFIRM')"
+    @confirm="handleDialogConfirm"
+  />
+</template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import LiveChatCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue';
+
+const props = defineProps({
+  selectedCampaign: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const liveChatCampaignFormRef = ref(null);
+
+const uiFlags = useMapGetter('campaigns/getUIFlags');
+const isUpdatingCampaign = computed(() => uiFlags.value.isUpdating);
+
+const isInvalidForm = computed(
+  () => liveChatCampaignFormRef.value?.isSubmitDisabled
+);
+
+const selectedCampaignId = computed(() => props.selectedCampaign.id);
+
+const updateCampaign = async campaignDetails => {
+  try {
+    await store.dispatch('campaigns/update', {
+      id: selectedCampaignId.value,
+      ...campaignDetails,
+    });
+
+    useAlert(t('CAMPAIGN.LIVE_CHAT.EDIT.FORM.API.SUCCESS_MESSAGE'));
+    dialogRef.value.close();
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message ||
+      t('CAMPAIGN.LIVE_CHAT.EDIT.FORM.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+
+const handleSubmit = () => {
+  updateCampaign(liveChatCampaignFormRef.value.prepareCampaignDetails());
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t('CAMPAIGN.LIVE_CHAT.EDIT.TITLE')"
+    :is-loading="isUpdatingCampaign"
+    :disable-confirm-button="isUpdatingCampaign || isInvalidForm"
+    overflow-y-auto
+    @confirm="handleSubmit"
+  >
+    <template #form>
+      <LiveChatCampaignForm
+        ref="liveChatCampaignFormRef"
+        mode="edit"
+        :selected-campaign="selectedCampaign"
+        :show-action-buttons="false"
+        @submit="handleSubmit"
+      />
+    </template>
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
+import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
+
+import LiveChatCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue';
+
+const emit = defineEmits(['close']);
+
+const store = useStore();
+const { t } = useI18n();
+
+const addCampaign = async campaignDetails => {
+  try {
+    await store.dispatch('campaigns/create', campaignDetails);
+
+    // tracking this here instead of the store to track the type of campaign
+    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
+      type: CAMPAIGN_TYPES.ONGOING,
+    });
+
+    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message ||
+      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => emit('close');
+
+const handleSubmit = campaignDetails => {
+  addCampaign(campaignDetails);
+  handleClose();
+};
+</script>
+
+<template>
+  <div
+    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
+  >
+    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+      {{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}
+    </h3>
+    <LiveChatCampaignForm
+      mode="create"
+      @submit="handleSubmit"
+      @cancel="handleClose"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue

@@ -0,0 +1,323 @@
+<script setup>
+import { reactive, computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { URLPattern } from 'urlpattern-polyfill';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  selectedCampaign: {
+    type: Object,
+    default: () => ({}),
+  },
+  showActionButtons: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const { t } = useI18n();
+const store = useStore();
+
+const formState = {
+  uiFlags: useMapGetter('campaigns/getUIFlags'),
+  inboxes: useMapGetter('inboxes/getWebsiteInboxes'),
+};
+
+const senderList = ref([]);
+
+const initialState = {
+  title: '',
+  message: '',
+  inboxId: null,
+  senderId: 0,
+  enabled: true,
+  triggerOnlyDuringBusinessHours: false,
+  endPoint: '',
+  timeOnPage: 10,
+};
+
+const state = reactive({ ...initialState });
+
+const urlValidators = {
+  shouldBeAValidURLPattern: value => {
+    try {
+      // eslint-disable-next-line
+      new URLPattern(value);
+      return true;
+    } catch {
+      return false;
+    }
+  },
+  shouldStartWithHTTP: value =>
+    value ? value.startsWith('https://') || value.startsWith('http://') : false,
+};
+
+const validationRules = {
+  title: { required, minLength: minLength(1) },
+  message: { required, minLength: minLength(1) },
+  inboxId: { required },
+  senderId: { required },
+  endPoint: { required, ...urlValidators },
+  timeOnPage: { required },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const isCreating = computed(() => formState.uiFlags.value.isCreating);
+const isSubmitDisabled = computed(() => v$.value.$invalid);
+
+const mapToOptions = (items, valueKey, labelKey) =>
+  items?.map(item => ({
+    value: item[valueKey],
+    label: item[labelKey],
+  })) ?? [];
+
+const inboxOptions = computed(() =>
+  mapToOptions(formState.inboxes.value, 'id', 'name')
+);
+
+const sendersAndBotList = computed(() => [
+  { value: 0, label: 'Bot' },
+  ...mapToOptions(senderList.value, 'id', 'name'),
+]);
+
+const getErrorMessage = (field, errorKey) => {
+  const baseKey = 'CAMPAIGN.LIVE_CHAT.CREATE.FORM';
+  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
+};
+
+const formErrors = computed(() => ({
+  title: getErrorMessage('title', 'TITLE'),
+  message: getErrorMessage('message', 'MESSAGE'),
+  inbox: getErrorMessage('inboxId', 'INBOX'),
+  endPoint: getErrorMessage('endPoint', 'END_POINT'),
+  timeOnPage: getErrorMessage('timeOnPage', 'TIME_ON_PAGE'),
+  sender: getErrorMessage('senderId', 'SENT_BY'),
+}));
+
+const resetState = () => Object.assign(state, initialState);
+
+const handleCancel = () => emit('cancel');
+
+const handleInboxChange = async inboxId => {
+  if (!inboxId) {
+    senderList.value = [];
+    return;
+  }
+
+  try {
+    const response = await store.dispatch('inboxMembers/get', { inboxId });
+    senderList.value = response?.data?.payload ?? [];
+  } catch (error) {
+    senderList.value = [];
+    useAlert(
+      error?.response?.message ??
+        t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.ERROR_MESSAGE')
+    );
+  }
+};
+
+const prepareCampaignDetails = () => ({
+  title: state.title,
+  message: state.message,
+  inbox_id: state.inboxId,
+  sender_id: state.senderId || null,
+  enabled: state.enabled,
+  trigger_only_during_business_hours: state.triggerOnlyDuringBusinessHours,
+  trigger_rules: {
+    url: state.endPoint,
+    time_on_page: state.timeOnPage,
+  },
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) return;
+
+  emit('submit', prepareCampaignDetails());
+  if (props.mode === 'create') {
+    resetState();
+    handleCancel();
+  }
+};
+
+const updateStateFromCampaign = campaign => {
+  if (!campaign) return;
+
+  const {
+    title,
+    message,
+    inbox: { id: inboxId },
+    sender,
+    enabled,
+    trigger_only_during_business_hours: triggerOnlyDuringBusinessHours,
+    trigger_rules: { url: endPoint, time_on_page: timeOnPage },
+  } = campaign;
+
+  Object.assign(state, {
+    title,
+    message,
+    inboxId,
+    senderId: sender?.id ?? 0,
+    enabled,
+    triggerOnlyDuringBusinessHours,
+    endPoint,
+    timeOnPage,
+  });
+};
+
+watch(
+  () => state.inboxId,
+  newInboxId => {
+    if (newInboxId) {
+      handleInboxChange(newInboxId);
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.selectedCampaign,
+  newCampaign => {
+    if (props.mode === 'edit' && newCampaign) {
+      updateStateFromCampaign(newCampaign);
+    }
+  },
+  { immediate: true }
+);
+
+defineExpose({ prepareCampaignDetails, isSubmitDisabled });
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <Input
+      v-model="state.title"
+      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TITLE.LABEL')"
+      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TITLE.PLACEHOLDER')"
+      :message="formErrors.title"
+      :message-type="formErrors.title ? 'error' : 'info'"
+    />
+
+    <Editor
+      v-model="state.message"
+      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.MESSAGE.LABEL')"
+      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.MESSAGE.PLACEHOLDER')"
+      :message="formErrors.message"
+      :message-type="formErrors.message ? 'error' : 'info'"
+    />
+
+    <div class="flex flex-col gap-1">
+      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.INBOX.LABEL') }}
+      </label>
+      <ComboBox
+        id="inbox"
+        v-model="state.inboxId"
+        :options="inboxOptions"
+        :has-error="!!formErrors.inbox"
+        :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.INBOX.PLACEHOLDER')"
+        :message="formErrors.inbox"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+      />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <label for="sentBy" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.SENT_BY.LABEL') }}
+      </label>
+      <ComboBox
+        id="sentBy"
+        v-model="state.senderId"
+        :options="sendersAndBotList"
+        :has-error="!!formErrors.sender"
+        :disabled="!state.inboxId"
+        :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.SENT_BY.PLACEHOLDER')"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+        :message="formErrors.sender"
+      />
+    </div>
+
+    <Input
+      v-model="state.endPoint"
+      type="url"
+      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.END_POINT.LABEL')"
+      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.END_POINT.PLACEHOLDER')"
+      :message="formErrors.endPoint"
+      :message-type="formErrors.endPoint ? 'error' : 'info'"
+    />
+
+    <Input
+      v-model="state.timeOnPage"
+      type="number"
+      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TIME_ON_PAGE.LABEL')"
+      :placeholder="
+        t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TIME_ON_PAGE.PLACEHOLDER')
+      "
+      :message="formErrors.timeOnPage"
+      :message-type="formErrors.timeOnPage ? 'error' : 'info'"
+    />
+
+    <fieldset class="flex flex-col gap-2.5">
+      <legend class="mb-2.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.TITLE') }}
+      </legend>
+
+      <label class="flex items-center gap-2">
+        <input v-model="state.enabled" type="checkbox" />
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.ENABLED') }}
+        </span>
+      </label>
+
+      <label class="flex items-center gap-2">
+        <input v-model="state.triggerOnlyDuringBusinessHours" type="checkbox" />
+        <span class="text-sm font-medium text-n-slate-12">
+          {{
+            t(
+              'CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.TRIGGER_ONLY_BUSINESS_HOURS'
+            )
+          }}
+        </span>
+      </label>
+    </fieldset>
+
+    <div
+      v-if="showActionButtons"
+      class="flex items-center justify-between w-full gap-3"
+    >
+      <Button
+        type="button"
+        variant="faded"
+        color="slate"
+        :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.CANCEL')"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        @click="handleCancel"
+      />
+      <Button
+        type="submit"
+        :label="
+          t(`CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.${mode.toUpperCase()}`)
+        "
+        class="w-full"
+        :is-loading="isCreating"
+        :disabled="isCreating || isSubmitDisabled"
+      />
+    </div>
+  </form>
+</template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
+import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
+
+import SMSCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue';
+
+const emit = defineEmits(['close']);
+
+const store = useStore();
+const { t } = useI18n();
+
+const addCampaign = async campaignDetails => {
+  try {
+    await store.dispatch('campaigns/create', campaignDetails);
+
+    // tracking this here instead of the store to track the type of campaign
+    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
+      type: CAMPAIGN_TYPES.ONE_OFF,
+    });
+
+    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message ||
+      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+
+const handleSubmit = campaignDetails => {
+  addCampaign(campaignDetails);
+};
+
+const handleClose = () => emit('close');
+</script>
+
+<template>
+  <div
+    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+  >
+    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+      {{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}
+    </h3>
+    <SMSCampaignForm @submit="handleSubmit" @cancel="handleClose" />
+  </div>
+</template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue

@@ -0,0 +1,189 @@
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('campaigns/getUIFlags'),
+  labels: useMapGetter('labels/getLabels'),
+  inboxes: useMapGetter('inboxes/getSMSInboxes'),
+};
+
+const initialState = {
+  title: '',
+  message: '',
+  inboxId: null,
+  scheduledAt: null,
+  selectedAudience: [],
+};
+
+const state = reactive({ ...initialState });
+
+const rules = {
+  title: { required, minLength: minLength(1) },
+  message: { required, minLength: minLength(1) },
+  inboxId: { required },
+  scheduledAt: { required },
+  selectedAudience: { required },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const isCreating = computed(() => formState.uiFlags.value.isCreating);
+
+const currentDateTime = computed(() => {
+  // Added to disable the scheduled at field from being set to the current time
+  const now = new Date();
+  const localTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
+  return localTime.toISOString().slice(0, 16);
+});
+
+const mapToOptions = (items, valueKey, labelKey) =>
+  items?.map(item => ({
+    value: item[valueKey],
+    label: item[labelKey],
+  })) ?? [];
+
+const audienceList = computed(() =>
+  mapToOptions(formState.labels.value, 'id', 'title')
+);
+
+const inboxOptions = computed(() =>
+  mapToOptions(formState.inboxes.value, 'id', 'name')
+);
+
+const getErrorMessage = (field, errorKey) => {
+  const baseKey = 'CAMPAIGN.SMS.CREATE.FORM';
+  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
+};
+
+const formErrors = computed(() => ({
+  title: getErrorMessage('title', 'TITLE'),
+  message: getErrorMessage('message', 'MESSAGE'),
+  inbox: getErrorMessage('inboxId', 'INBOX'),
+  scheduledAt: getErrorMessage('scheduledAt', 'SCHEDULED_AT'),
+  audience: getErrorMessage('selectedAudience', 'AUDIENCE'),
+}));
+
+const isSubmitDisabled = computed(() => v$.value.$invalid);
+
+const formatToUTCString = localDateTime =>
+  localDateTime ? new Date(localDateTime).toISOString() : null;
+
+const resetState = () => {
+  Object.assign(state, initialState);
+};
+
+const handleCancel = () => emit('cancel');
+
+const prepareCampaignDetails = () => ({
+  title: state.title,
+  message: state.message,
+  inbox_id: state.inboxId,
+  scheduled_at: formatToUTCString(state.scheduledAt),
+  audience: state.selectedAudience?.map(id => ({
+    id,
+    type: 'Label',
+  })),
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) return;
+
+  emit('submit', prepareCampaignDetails());
+  resetState();
+  handleCancel();
+};
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <Input
+      v-model="state.title"
+      :label="t('CAMPAIGN.SMS.CREATE.FORM.TITLE.LABEL')"
+      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.TITLE.PLACEHOLDER')"
+      :message="formErrors.title"
+      :message-type="formErrors.title ? 'error' : 'info'"
+    />
+
+    <TextArea
+      v-model="state.message"
+      :label="t('CAMPAIGN.SMS.CREATE.FORM.MESSAGE.LABEL')"
+      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.MESSAGE.PLACEHOLDER')"
+      show-character-count
+      :message="formErrors.message"
+      :message-type="formErrors.message ? 'error' : 'info'"
+    />
+
+    <div class="flex flex-col gap-1">
+      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.SMS.CREATE.FORM.INBOX.LABEL') }}
+      </label>
+      <ComboBox
+        id="inbox"
+        v-model="state.inboxId"
+        :options="inboxOptions"
+        :has-error="!!formErrors.inbox"
+        :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.INBOX.PLACEHOLDER')"
+        :message="formErrors.inbox"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+      />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.LABEL') }}
+      </label>
+      <TagMultiSelectComboBox
+        v-model="state.selectedAudience"
+        :options="audienceList"
+        :label="t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.LABEL')"
+        :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.PLACEHOLDER')"
+        :has-error="!!formErrors.audience"
+        :message="formErrors.audience"
+        class="[&>div>button]:bg-n-alpha-black2"
+      />
+    </div>
+
+    <Input
+      v-model="state.scheduledAt"
+      :label="t('CAMPAIGN.SMS.CREATE.FORM.SCHEDULED_AT.LABEL')"
+      type="datetime-local"
+      :min="currentDateTime"
+      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.SCHEDULED_AT.PLACEHOLDER')"
+      :message="formErrors.scheduledAt"
+      :message-type="formErrors.scheduledAt ? 'error' : 'info'"
+    />
+
+    <div class="flex items-center justify-between w-full gap-3">
+      <Button
+        variant="faded"
+        color="slate"
+        type="button"
+        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CANCEL')"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        @click="handleCancel"
+      />
+      <Button
+        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CREATE')"
+        class="w-full"
+        type="submit"
+        :is-loading="isCreating"
+        :disabled="isCreating || isSubmitDisabled"
+      />
+    </div>
+  </form>
+</template>

app/javascript/dashboard/components-next/CardLayout.vue

@@ -1,4 +1,10 @@
 <script setup>
+const props = defineProps({
+  layout: {
+    type: String,
+    default: 'col',
+  },
+});
 const emit = defineEmits(['click']);
 const handleClick = () => {
   emit('click');
@@ -7,7 +13,8 @@ const handleClick = () => {
 
 <template>
   <div
-    class="relative flex flex-col w-full gap-3 px-6 py-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
+    class="relative flex w-full gap-3 px-6 py-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
+    :class="props.layout === 'col' ? 'flex-col' : 'flex-row'"
     @click="handleClick"
   >
     <slot name="header" />

app/javascript/dashboard/components-next/Editor/Editor.vue

@@ -0,0 +1,173 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+
+import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  focusOnMount: {
+    type: Boolean,
+    default: false,
+  },
+  maxLength: {
+    type: Number,
+    default: 200,
+  },
+  showCharacterCount: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  messageType: {
+    type: String,
+    default: 'info',
+    validator: value => ['info', 'error', 'success'].includes(value),
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const isFocused = ref(false);
+
+const characterCount = computed(() => props.modelValue.length);
+
+const messageClass = computed(() => {
+  switch (props.messageType) {
+    case 'error':
+      return 'text-n-ruby-9 dark:text-n-ruby-9';
+    case 'success':
+      return 'text-green-500 dark:text-green-400';
+    default:
+      return 'text-n-slate-11 dark:text-n-slate-11';
+  }
+});
+
+const handleInput = value => {
+  if (!props.disabled) {
+    emit('update:modelValue', value);
+  }
+};
+
+const handleFocus = () => {
+  if (!props.disabled) {
+    isFocused.value = true;
+  }
+};
+
+const handleBlur = () => {
+  if (!props.disabled) {
+    isFocused.value = false;
+  }
+};
+
+watch(
+  () => props.modelValue,
+  newValue => {
+    if (props.maxLength && props.showCharacterCount) {
+      if (characterCount.value >= props.maxLength) {
+        emit('update:modelValue', newValue.slice(0, props.maxLength));
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <div class="flex flex-col min-w-0 gap-1">
+    <label v-if="label" class="mb-0.5 text-sm font-medium text-n-slate-12">
+      {{ label }}
+    </label>
+    <div
+      class="flex flex-col w-full gap-2 px-3 py-3 transition-all duration-500 ease-in-out border rounded-lg editor-wrapper bg-n-alpha-black2"
+      :class="[
+        {
+          'cursor-not-allowed opacity-50 pointer-events-none !bg-n-alpha-black2 disabled:border-n-weak dark:disabled:border-n-weak':
+            disabled,
+          'border-n-brand dark:border-n-brand': isFocused,
+          'hover:border-n-slate-6 dark:hover:border-n-slate-6 border-n-weak dark:border-n-weak':
+            !isFocused && messageType !== 'error',
+          'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9':
+            messageType === 'error' && !isFocused,
+        },
+      ]"
+    >
+      <WootEditor
+        :model-value="modelValue"
+        :placeholder="placeholder"
+        :focus-on-mount="focusOnMount"
+        :disabled="disabled"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+      <div
+        v-if="showCharacterCount"
+        class="flex items-center justify-end h-4 ltr:right-3 rtl:left-3"
+      >
+        <span class="text-xs tabular-nums text-n-slate-10">
+          {{ characterCount }} / {{ maxLength }}
+        </span>
+      </div>
+    </div>
+    <p
+      v-if="message"
+      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+      :class="messageClass"
+    >
+      {{ message }}
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.editor-wrapper {
+  ::v-deep {
+    .ProseMirror-menubar-wrapper {
+      @apply gap-2 !important;
+
+      .ProseMirror-menubar {
+        @apply bg-transparent dark:bg-transparent w-fit left-1 pt-0 h-5  !important;
+
+        .ProseMirror-menuitem {
+          @apply h-5 !important;
+        }
+
+        .ProseMirror-icon {
+          @apply p-1 w-3 h-3 text-n-slate-12 dark:text-n-slate-12 !important;
+        }
+      }
+      .ProseMirror.ProseMirror-woot-style {
+        p {
+          @apply first:mt-0 !important;
+        }
+
+        .empty-node {
+          @apply m-0 !important;
+
+          &::before {
+            @apply text-n-slate-11 dark:text-n-slate-11 !important;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

app/javascript/dashboard/components-next/EmptyStateLayout.vue

@@ -34,7 +34,7 @@ defineProps({
               {{ title }}
             </h2>
             <p
-              class="max-w-lg text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
+              class="max-w-xl text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
             >
               {{ subtitle }}
             </p>

app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue

@@ -33,7 +33,7 @@ const onClick = () => {
 <template>
   <EmptyStateLayout :title="title" :subtitle="subtitle">
     <template #empty-state-item>
-      <div class="grid grid-cols-1 gap-4 overflow-hidden">
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
         <ArticleCard
           v-for="(article, index) in articleContent.slice(0, 5)"
           :id="article.id"

app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue

@@ -18,7 +18,7 @@ defineProps({
 <template>
   <EmptyStateLayout :title="title" :subtitle="subtitle">
     <template #empty-state-item>
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-2 gap-4 p-px">
         <div class="space-y-4">
           <CategoryCard
             v-for="category in categoryContent"

app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue

@@ -28,7 +28,7 @@ const onPortalCreate = ({ slug: portalSlug, locale }) => {
     :subtitle="$t('HELP_CENTER.NEW_PAGE.DESCRIPTION')"
   >
     <template #empty-state-item>
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-2 gap-4 p-px">
         <div class="space-y-4">
           <ArticleCard
             v-for="(article, index) in articleContent"

app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue

@@ -67,7 +67,7 @@ const togglePortalSwitcher = () => {
         >
           <span
             v-if="activePortalName"
-            class="text-xl font-medium text-slate-900 dark:text-white"
+            class="text-xl font-medium text-n-slate-12"
           >
             {{ activePortalName }}
           </span>

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue

@@ -157,24 +157,24 @@ defineExpose({ state, isSubmitDisabled });
 <template>
   <div class="flex flex-col gap-4">
     <div
-      class="flex items-center justify-start gap-8 px-4 py-2 border rounded-lg border-slate-50 dark:border-slate-700/50"
+      class="flex items-center justify-start gap-8 px-4 py-2 border rounded-lg border-n-strong"
     >
       <div class="flex flex-col items-start w-full gap-2 py-2">
-        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">
+        <span class="text-sm font-medium text-n-slate-11">
           {{ t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.PORTAL') }}
         </span>
-        <span class="text-sm text-slate-800 dark:text-slate-100">
+        <span class="text-sm text-n-slate-12">
           {{ portalName }}
         </span>
       </div>
-      <div class="justify-start w-px h-10 bg-slate-50 dark:bg-slate-700/50" />
+      <div class="justify-start w-px h-10 bg-n-strong" />
       <div class="flex flex-col w-full gap-2 py-2">
-        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">
+        <span class="text-sm font-medium text-n-slate-11">
           {{ t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.LOCALE') }}
         </span>
         <span
           :title="`${activeLocaleName} (${activeLocaleCode})`"
-          class="text-sm line-clamp-1 text-slate-800 dark:text-slate-100"
+          class="text-sm line-clamp-1 text-n-slate-12"
         >
           {{ `${activeLocaleName} (${activeLocaleCode})` }}
         </span>
@@ -192,7 +192,7 @@ defineExpose({ state, isSubmitDisabled });
           "
           :message="nameError"
           :message-type="nameError ? 'error' : 'info'"
-          custom-input-class="!h-10 ltr:!pl-12 rtl:!pr-12 !bg-slate-25 dark:!bg-slate-900"
+          custom-input-class="!h-10 ltr:!pl-12 rtl:!pr-12"
         >
           <template #prefix>
             <OnClickOutside @trigger="isEmojiPickerOpen = false">
@@ -223,7 +223,7 @@ defineExpose({ state, isSubmitDisabled });
         :disabled="isEditMode"
         :message="slugError ? slugError : slugHelpText"
         :message-type="slugError ? 'error' : 'info'"
-        custom-input-class="!h-10 !bg-slate-25 dark:!bg-slate-900 "
+        custom-input-class="!h-10"
       />
       <TextArea
         v-model="state.description"
@@ -236,7 +236,6 @@ defineExpose({ state, isSubmitDisabled });
           )
         "
         show-character-count
-        custom-text-area-wrapper-class="!bg-slate-25 dark:!bg-slate-900"
       />
       <div
         v-if="showActionButtons"

app/javascript/dashboard/components-next/button/Button.vue

@@ -48,14 +48,14 @@ const STYLE_CONFIG = {
       solid: 'bg-n-brand text-white hover:brightness-110 outline-transparent',
       faded:
         'bg-n-brand/10 text-n-slate-12 hover:bg-n-brand/20 outline-transparent',
-      outline: 'text-n-blue-text hover:bg-n-brand/10 outline-n-blue-border',
+      outline: 'text-n-blue-text outline-n-blue-border',
       link: 'text-n-brand hover:underline outline-transparent',
     },
     ruby: {
       solid: 'bg-n-ruby-9 text-white hover:bg-n-ruby-10 outline-transparent',
       faded:
-        'bg-n-ruby-9/10 text-n-slate-12 hover:bg-n-ruby-9/20 outline-transparent',
-      outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-9',
+        'bg-n-ruby-9/10 text-n-ruby-11 hover:bg-n-ruby-9/20 outline-transparent',
+      outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-8',
       link: 'text-n-ruby-9 hover:underline outline-transparent',
     },
     amber: {

app/javascript/dashboard/components-next/combobox/ComboBox.vue

@@ -4,6 +4,7 @@ import { OnClickOutside } from '@vueuse/components';
 import { useI18n } from 'vue-i18n';
 
 import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBoxDropdown from 'dashboard/components-next/combobox/ComboBoxDropdown.vue';
 
 const props = defineProps({
   options: {
@@ -36,6 +37,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  hasError: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -45,7 +50,7 @@ const { t } = useI18n();
 const selectedValue = ref(props.modelValue);
 const open = ref(false);
 const search = ref('');
-const searchInput = ref(null);
+const dropdownRef = ref(null);
 const comboboxRef = ref(null);
 
 const filteredOptions = computed(() => {
@@ -70,11 +75,13 @@ const selectOption = option => {
   open.value = false;
   search.value = '';
 };
+
 const toggleDropdown = () => {
+  if (props.disabled) return;
   open.value = !open.value;
   if (open.value) {
     search.value = '';
-    nextTick(() => searchInput.value.focus());
+    nextTick(() => dropdownRef.value?.focus());
   }
 };
 
@@ -94,67 +101,40 @@ watch(
       'cursor-not-allowed': disabled,
       'group/combobox': !disabled,
     }"
+    @click.prevent
   >
     <OnClickOutside @trigger="open = false">
       <Button
         variant="outline"
-        color="slate"
+        :color="hasError && !open ? 'ruby' : open ? 'blue' : 'slate'"
         :label="selectedLabel"
         trailing-icon
         :disabled="disabled"
         class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6"
+        :class="{ focused: open }"
         :icon="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
         @click="toggleDropdown"
       />
-      <div
-        v-show="open"
-        class="absolute z-50 w-full mt-1 transition-opacity duration-200 border rounded-md shadow-lg bg-n-solid-1 border-n-strong"
-      >
-        <div class="relative border-b border-n-strong">
-          <span class="absolute i-lucide-search top-2.5 size-4 left-3" />
-          <input
-            ref="searchInput"
-            v-model="search"
-            type="search"
-            :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-            class="w-full py-2 pl-10 pr-2 text-sm border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
-          />
-        </div>
-        <ul
-          class="py-1 mb-0 overflow-auto max-h-60"
-          role="listbox"
-          :aria-activedescendant="selectedValue"
-        >
-          <li
-            v-for="option in filteredOptions"
-            :key="option.value"
-            class="flex items-center justify-between !text-n-slate-12 w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-alpha-2"
-            :class="{
-              'bg-n-alpha-2': option.value === selectedValue,
-            }"
-            role="option"
-            :aria-selected="option.value === selectedValue"
-            @click="selectOption(option)"
-          >
-            <span :class="{ 'font-medium': option.value === selectedValue }">
-              {{ option.label }}
-            </span>
-            <span
-              v-if="option.value === selectedValue"
-              class="flex-shrink-0 i-lucide-check size-4 text-n-slate-11"
-            />
-          </li>
-          <li
-            v-if="filteredOptions.length === 0"
-            class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
-          >
-            {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
-          </li>
-        </ul>
-      </div>
+
+      <ComboBoxDropdown
+        ref="dropdownRef"
+        :open="open"
+        :options="filteredOptions"
+        :search-value="search"
+        :search-placeholder="searchPlaceholder"
+        :empty-state="emptyState"
+        :selected-values="selectedValue"
+        @update:search-value="search = $event"
+        @select="selectOption"
+      />
+
       <p
         v-if="message"
-        class="mt-2 mb-0 text-xs truncate transition-all duration-500 ease-in-out text-n-slate-11 dark:text-n-slate-11"
+        class="mt-2 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+        :class="{
+          'text-n-ruby-9': hasError,
+          'text-n-slate-11': !hasError,
+        }"
       >
         {{ message }}
       </p>

app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+  options: {
+    type: Array,
+    required: true,
+  },
+  searchValue: {
+    type: String,
+    required: true,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  emptyState: {
+    type: String,
+    default: '',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  selectedValues: {
+    type: [String, Number, Array],
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:searchValue', 'select']);
+
+const { t } = useI18n();
+
+const searchInput = ref(null);
+
+const isSelected = option => {
+  if (Array.isArray(props.selectedValues)) {
+    return props.selectedValues.includes(option.value);
+  }
+  return option.value === props.selectedValues;
+};
+
+defineExpose({
+  focus: () => searchInput.value?.focus(),
+});
+</script>
+
+<template>
+  <div
+    v-show="open"
+    class="absolute z-50 w-full mt-1 transition-opacity duration-200 border rounded-md shadow-lg bg-n-solid-1 border-n-strong"
+  >
+    <div class="relative border-b border-n-strong">
+      <span class="absolute i-lucide-search top-2.5 size-4 left-3" />
+      <input
+        ref="searchInput"
+        :value="searchValue"
+        type="search"
+        :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
+        class="w-full py-2 pl-10 pr-2 text-sm border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
+        @input="emit('update:searchValue', $event.target.value)"
+      />
+    </div>
+    <ul
+      class="py-1 mb-0 overflow-auto max-h-60"
+      role="listbox"
+      :aria-multiselectable="multiple"
+    >
+      <li
+        v-for="option in options"
+        :key="option.value"
+        class="flex items-center justify-between w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-alpha-2"
+        :class="{
+          'bg-n-alpha-2': isSelected(option),
+        }"
+        role="option"
+        :aria-selected="isSelected(option)"
+        @click="emit('select', option)"
+      >
+        <span
+          :class="{
+            'font-medium': isSelected(option),
+          }"
+          class="text-n-slate-12"
+        >
+          {{ option.label }}
+        </span>
+        <span
+          v-if="isSelected(option)"
+          class="flex-shrink-0 i-lucide-check size-4 text-n-slate-11"
+        />
+      </li>
+      <li
+        v-if="options.length === 0"
+        class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
+      >
+        {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
+      </li>
+    </ul>
+  </div>
+</template>

app/javascript/dashboard/components-next/combobox/TagMultiSelectComboBox.vue

@@ -0,0 +1,183 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+import { useI18n } from 'vue-i18n';
+
+import ComboBoxDropdown from 'dashboard/components-next/combobox/ComboBoxDropdown.vue';
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+    validator: value =>
+      value.every(option => 'value' in option && 'label' in option),
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  emptyState: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  hasError: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { t } = useI18n();
+
+const selectedValues = ref(props.modelValue);
+const open = ref(false);
+const search = ref('');
+const dropdownRef = ref(null);
+const comboboxRef = ref(null);
+
+const filteredOptions = computed(() => {
+  const searchTerm = search.value.toLowerCase();
+  return props.options.filter(option =>
+    option.label?.toLowerCase().includes(searchTerm)
+  );
+});
+
+const selectPlaceholder = computed(() => {
+  return props.placeholder || t('COMBOBOX.PLACEHOLDER');
+});
+
+const selectedTags = computed(() => {
+  return selectedValues.value.map(value => {
+    const option = props.options.find(opt => opt.value === value);
+    return option || { value, label: value };
+  });
+});
+
+const toggleOption = option => {
+  const index = selectedValues.value.indexOf(option.value);
+  if (index === -1) {
+    selectedValues.value.push(option.value);
+  } else {
+    selectedValues.value.splice(index, 1);
+  }
+  emit('update:modelValue', selectedValues.value);
+};
+
+const removeTag = value => {
+  const index = selectedValues.value.indexOf(value);
+  if (index !== -1) {
+    selectedValues.value.splice(index, 1);
+    emit('update:modelValue', selectedValues.value);
+  }
+};
+
+const toggleDropdown = () => {
+  if (props.disabled) return;
+  open.value = !open.value;
+  if (open.value) {
+    search.value = '';
+    nextTick(() => dropdownRef.value?.focus());
+  }
+};
+
+watch(
+  () => props.modelValue,
+  newValue => {
+    selectedValues.value = newValue;
+  }
+);
+
+defineExpose({
+  toggleDropdown,
+  open,
+  disabled: props.disabled,
+});
+</script>
+
+<template>
+  <div
+    ref="comboboxRef"
+    class="relative w-full min-w-0"
+    :class="{
+      'cursor-not-allowed': disabled,
+      'group/combobox': !disabled,
+    }"
+    @click.prevent
+  >
+    <OnClickOutside @trigger="open = false">
+      <div
+        class="flex flex-wrap w-full gap-2 px-3 py-2.5 border rounded-lg cursor-pointer bg-n-alpha-black2 min-h-[42px] transition-all duration-500 ease-in-out"
+        :class="{
+          'border-n-ruby-8': hasError,
+          'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6':
+            !hasError && !open,
+          'border-n-brand': open,
+          'cursor-not-allowed pointer-events-none opacity-50': disabled,
+        }"
+        @click="toggleDropdown"
+      >
+        <div
+          v-for="tag in selectedTags"
+          :key="tag.value"
+          class="flex items-center justify-center max-w-full gap-1 px-2 py-0.5 rounded-lg bg-n-alpha-black1"
+          @click.stop
+        >
+          <span class="flex-grow min-w-0 text-sm truncate text-n-slate-12">
+            {{ tag.label }}
+          </span>
+          <span
+            class="flex-shrink-0 cursor-pointer i-lucide-x size-3 text-n-slate-11"
+            @click="removeTag(tag.value)"
+          />
+        </div>
+        <span
+          v-if="selectedTags.length === 0"
+          class="flex items-center text-sm text-n-slate-11"
+        >
+          {{ selectPlaceholder }}
+        </span>
+      </div>
+
+      <ComboBoxDropdown
+        ref="dropdownRef"
+        :open="open"
+        :options="filteredOptions"
+        :search-value="search"
+        :search-placeholder="searchPlaceholder"
+        :empty-state="emptyState"
+        multiple
+        :selected-values="selectedValues"
+        @update:search-value="search = $event"
+        @select="toggleOption"
+      />
+
+      <p
+        v-if="message"
+        class="mt-2 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+        :class="{
+          'text-n-ruby-9': hasError,
+          'text-n-slate-11': !hasError,
+        }"
+      >
+        {{ message }}
+      </p>
+    </OnClickOutside>
+  </div>
+</template>

app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { ref } from 'vue';
+import TagMultiSelectComboBox from './TagMultiSelectComboBox.vue';
+
+const options = [
+  { value: 1, label: 'Option 1' },
+  { value: 2, label: 'Option 2' },
+  { value: 3, label: 'Option 3' },
+  { value: 4, label: 'Option 4' },
+  { value: 5, label: 'Option 5' },
+];
+const selectedValues = ref([]);
+
+const preselectedValues = ref([1, 2]);
+</script>
+
+<template>
+  <Story
+    title="Components/TagMultiSelectComboBox"
+    :layout="{ type: 'grid', width: '300px' }"
+  >
+    <Variant title="Default">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <TagMultiSelectComboBox v-model="selectedValues" :options="options" />
+        <p class="mt-2">Selected values: {{ selectedValues }}</p>
+      </div>
+    </Variant>
+
+    <Variant title="With Preselected Values">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <TagMultiSelectComboBox
+          v-model="preselectedValues"
+          :options="options"
+          placeholder="Select multiple options"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <TagMultiSelectComboBox :options="options" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="With Error">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <TagMultiSelectComboBox
+          :options="options"
+          has-error
+          message="This field is required"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/dialog/Dialog.vue

@@ -44,6 +44,10 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  overflowYAuto: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['confirm', 'close']);
@@ -73,7 +77,8 @@ defineExpose({ open, close });
   <Teleport to="body">
     <dialog
       ref="dialogRef"
-      class="w-full max-w-lg overflow-visible transition-all duration-300 ease-in-out shadow-xl rounded-xl"
+      class="w-full max-w-lg transition-all duration-300 ease-in-out shadow-xl rounded-xl"
+      :class="overflowYAuto ? 'overflow-y-auto' : 'overflow-visible'"
       :dir="isRTL ? 'rtl' : 'ltr'"
       @close="close"
     >

app/javascript/dashboard/components-next/input/Input.vue

@@ -38,6 +38,10 @@ const props = defineProps({
     default: 'info',
     validator: value => ['info', 'error', 'success'].includes(value),
   },
+  min: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits(['update:modelValue', 'blur', 'input']);
@@ -73,7 +77,7 @@ const handleInput = event => {
     <label
       v-if="label"
       :for="id"
-      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+      class="mb-0.5 text-sm font-medium text-n-slate-12"
     >
       {{ label }}
     </label>
@@ -86,7 +90,8 @@ const handleInput = event => {
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
-      class="flex w-full reset-base text-sm h-10 !px-2 !py-2.5 !mb-0 border rounded-lg focus:border-n-brand dark:focus:border-n-brand bg-white dark:bg-slate-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
+      :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
+      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 border rounded-lg focus:border-n-brand dark:focus:border-n-brand bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-11 dark:placeholder:text-n-slate-11 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
       @input="handleInput"
       @blur="emit('blur')"
     />

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -266,14 +266,14 @@ const menuItems = computed(() => {
       icon: 'i-lucide-megaphone',
       children: [
         {
-          name: 'Ongoing',
-          label: t('SIDEBAR.ONGOING'),
-          to: accountScopedRoute('ongoing_campaigns'),
+          name: 'Live chat',
+          label: t('SIDEBAR.LIVE_CHAT'),
+          to: accountScopedRoute('campaigns_livechat_index'),
         },
         {
-          name: 'One-off',
-          label: t('SIDEBAR.ONE_OFF'),
-          to: accountScopedRoute('one_off'),
+          name: 'SMS',
+          label: t('SIDEBAR.SMS'),
+          to: accountScopedRoute('campaigns_sms_index'),
         },
       ],
     },
@@ -281,9 +281,6 @@ const menuItems = computed(() => {
       name: 'Portals',
       label: t('SIDEBAR.HELP_CENTER.TITLE'),
       icon: 'i-lucide-library-big',
-      to: accountScopedRoute('portals_index', {
-        navigationPath: 'portals_articles_index',
-      }),
       children: [
         {
           name: 'Articles',
@@ -442,7 +439,7 @@ const menuItems = computed(() => {
 
 <template>
   <aside
-    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pt-2 pb-1"
+    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
   >
     <section class="grid gap-2 mt-2 mb-4">
       <div class="flex items-center min-w-0 gap-2 px-2">
@@ -490,7 +487,7 @@ const menuItems = computed(() => {
       </ul>
     </nav>
     <section
-      class="p-1 border-t border-n-strong shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)] flex-shrink-0 flex justify-between gap-2 items-center"
+      class="p-1 border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)] flex-shrink-0 flex justify-between gap-2 items-center"
     >
       <SidebarProfileMenu
         @open-key-shortcut-modal="emit('openKeyShortcutModal')"

app/javascript/dashboard/components-next/textarea/TextArea.vue

@@ -58,6 +58,15 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  message: {
+    type: String,
+    default: '',
+  },
+  messageType: {
+    type: String,
+    default: 'info',
+    validator: value => ['info', 'error', 'success'].includes(value),
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -67,6 +76,17 @@ const isFocused = ref(false);
 
 const characterCount = computed(() => props.modelValue.length);
 
+const messageClass = computed(() => {
+  switch (props.messageType) {
+    case 'error':
+      return 'text-n-ruby-9 dark:text-n-ruby-9';
+    case 'success':
+      return 'text-green-500 dark:text-green-400';
+    default:
+      return 'text-n-slate-11 dark:text-n-slate-11';
+  }
+});
+
 // TODO - use "field-sizing: content" and "height: auto" in future for auto height, when available.
 const adjustHeight = () => {
   if (!props.autoHeight || !textareaRef.value) return;
@@ -85,11 +105,15 @@ const handleInput = event => {
 };
 
 const handleFocus = () => {
-  isFocused.value = true;
+  if (!props.disabled) {
+    isFocused.value = true;
+  }
 };
 
 const handleBlur = () => {
-  isFocused.value = false;
+  if (!props.disabled) {
+    isFocused.value = false;
+  }
 };
 
 // Watch for changes in modelValue to adjust height
@@ -118,19 +142,22 @@ onMounted(() => {
     <label
       v-if="label"
       :for="id"
-      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+      class="mb-0.5 text-sm font-medium text-n-slate-12"
     >
       {{ label }}
     </label>
     <div
-      class="flex flex-col gap-2 px-3 pt-3 pb-3 transition-all duration-500 ease-in-out bg-white border rounded-lg border-n-weak dark:border-n-weak dark:bg-slate-900"
+      class="flex flex-col gap-2 px-3 pt-3 pb-3 transition-all duration-500 ease-in-out border rounded-lg bg-n-alpha-black2"
       :class="[
         customTextAreaWrapperClass,
         {
-          'cursor-not-allowed opacity-50 !bg-slate-25 dark:!bg-slate-800 disabled:border-n-weak dark:disabled:border-n-weak':
+          'cursor-not-allowed opacity-50 !bg-n-alpha-black2 disabled:border-n-weak dark:disabled:border-n-weak':
             disabled,
           'border-n-brand dark:border-n-brand': isFocused,
-          'hover:border-n-slate-6 dark:hover:border-n-slate-6': !isFocused,
+          'hover:border-n-slate-6 dark:hover:border-n-slate-6 border-n-weak dark:border-n-weak':
+            !isFocused && messageType !== 'error',
+          'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9':
+            messageType === 'error' && !isFocused,
         },
       ]"
     >
@@ -152,7 +179,7 @@ onMounted(() => {
         }"
         :disabled="disabled"
         rows="1"
-        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !mb-0 placeholder:text-slate-200 dark:placeholder:text-slate-500 text-slate-900 dark:text-white disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
+        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !mb-0 placeholder:text-n-slate-11 dark:placeholder:text-n-slate-11 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
@@ -161,10 +188,17 @@ onMounted(() => {
         v-if="showCharacterCount"
         class="flex items-center justify-end h-4 mt-1 bottom-3 ltr:right-3 rtl:left-3"
       >
-        <span class="text-xs tabular-nums text-slate-300 dark:text-slate-600">
+        <span class="text-xs tabular-nums text-n-slate-10">
           {{ characterCount }} / {{ maxLength }}
         </span>
       </div>
     </div>
+    <p
+      v-if="message"
+      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+      :class="messageClass"
+    >
+      {{ message }}
+    </p>
   </div>
 </template>

app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue

@@ -77,7 +77,7 @@ const onImgLoad = () => {
     class="flex items-center justify-center rounded-full bg-n-slate-3 dark:bg-n-slate-4"
     :style="{ width: `${size}px`, height: `${size}px` }"
   >
-    <div v-if="author">
+    <div v-if="author" class="flex items-center justify-center">
       <img
         v-if="shouldShowImage"
         :src="src"