feat: allow error variant

app/javascript/dashboard/components-next/message/Message.vue

@@ -75,6 +75,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  error: {
+    type: String,
+    default: '',
+  },
   currentUserId: {
     type: Number,
     required: true,
@@ -91,6 +95,7 @@ const props = defineProps({
  */
 const variant = computed(() => {
   if (props.private) return MESSAGE_VARIANTS.PRIVATE;
+  if (props.error) return MESSAGE_VARIANTS.ERROR;
 
   const variants = {
     [MESSAGE_TYPES.INCOMING]: MESSAGE_VARIANTS.USER,

app/javascript/dashboard/components-next/message/Messages.story.vue

@@ -556,6 +556,8 @@ const messages = [
     content:
       "Let us know if you have any questions, I'll close this conversation for now",
     account_id: 1,
+    error:
+      'Business account is restricted from messaging users in this country.',
     inbox_id: 475,
     message_type: 1,
     created_at: 1732196013,

app/javascript/dashboard/components-next/message/bubbles/Text.vue

@@ -28,6 +28,7 @@ const varaintBaseMap = {
     'bg-n-alpha-1 px-2 py-0.5 text-n-slate-11 text-sm',
   [MESSAGE_VARIANTS.BOT]: 'bg-n-teal-5 p-3 text-n-slate-12',
   [MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-teal-5 p-3 text-n-slate-12',
+  [MESSAGE_VARIANTS.ERROR]: 'bg-n-ruby-4 p-3 text-n-ruby-12',
 };
 
 const orientationMap = {

app/javascript/dashboard/components-next/message/constants.js

@@ -11,6 +11,7 @@ export const MESSAGE_VARIANTS = {
   ACTIVITY: 'activity',
   PRIVATE: 'private',
   BOT: 'bot',
+  ERROR: 'error',
   TEMPLATE: 'template',
 };