Initial commit: Add logistics and order_detail message types

- Add Logistics component with progress tracking
- Add OrderDetail component for order information
- Support data-driven steps and actions
- Add blue color scale to widget SCSS
- Fix node overflow and progress bar rendering issues
- Add English translations for dashboard components

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/javascript/widget/mixins/configMixin.js

@@ -0,0 +1,47 @@
+export default {
+  computed: {
+    useInboxAvatarForBot() {
+      return this.channelConfig.enabledFeatures.includes(
+        'use_inbox_avatar_for_bot'
+      );
+    },
+    hasAConnectedAgentBot() {
+      return !!window.chatwootWebChannel.hasAConnectedAgentBot;
+    },
+    inboxAvatarUrl() {
+      return window.chatwootWebChannel.avatarUrl;
+    },
+    channelConfig() {
+      return window.chatwootWebChannel;
+    },
+    hasEmojiPickerEnabled() {
+      return this.channelConfig.enabledFeatures.includes('emoji_picker');
+    },
+    hasAttachmentsEnabled() {
+      return this.channelConfig.enabledFeatures.includes('attachments');
+    },
+    hasEndConversationEnabled() {
+      return this.channelConfig.enabledFeatures.includes('end_conversation');
+    },
+    preChatFormEnabled() {
+      return window.chatwootWebChannel.preChatFormEnabled;
+    },
+    preChatFormOptions() {
+      let preChatMessage = '';
+      const options = window.chatwootWebChannel.preChatFormOptions || {};
+      preChatMessage = options.pre_chat_message;
+      const { pre_chat_fields: preChatFields = [] } = options;
+      return {
+        preChatMessage,
+        preChatFields,
+      };
+    },
+    shouldShowPreChatForm() {
+      const { preChatFields } = this.preChatFormOptions;
+      // Check if at least one enabled field in pre-chat fields
+      const hasEnabledFields =
+        preChatFields.filter(field => field.enabled).length > 0;
+      return this.preChatFormEnabled && hasEnabledFields;
+    },
+  },
+};

app/javascript/widget/mixins/messageMixin.js

@@ -0,0 +1,13 @@
+export default {
+  computed: {
+    messageContentAttributes() {
+      const { content_attributes: attribute = {} } = this.message;
+      return attribute;
+    },
+    hasAttachments() {
+      return !!(
+        this.message.attachments && this.message.attachments.length > 0
+      );
+    },
+  },
+};

app/javascript/widget/mixins/specs/configMixin.spec.js

@@ -0,0 +1,78 @@
+import { shallowMount } from '@vue/test-utils';
+import configMixin from '../configMixin';
+import { reactive } from 'vue';
+
+const preChatFields = [
+  {
+    label: 'Email Id',
+    name: 'emailAddress',
+    type: 'email',
+    field_type: 'standard',
+    required: false,
+    enabled: false,
+  },
+  {
+    label: 'Full name',
+    name: 'fullName',
+    type: 'text',
+    field_type: 'standard',
+    required: true,
+    enabled: true,
+  },
+];
+
+global.chatwootWebChannel = {
+  avatarUrl: 'https://test.url',
+  hasAConnectedAgentBot: 'AgentBot',
+  enabledFeatures: [
+    'emoji_picker',
+    'attachments',
+    'end_conversation',
+    'use_inbox_avatar_for_bot',
+  ],
+  preChatFormOptions: { pre_chat_fields: preChatFields, pre_chat_message: '' },
+  preChatFormEnabled: true,
+};
+
+describe('configMixin', () => {
+  test('returns config', () => {
+    const wrapper = shallowMount({
+      mixins: [configMixin],
+      data() {
+        return {
+          channelConfig: reactive(global.chatwootWebChannel),
+        };
+      },
+      template: '<div />', // Render a simple div as the template
+    });
+
+    expect(wrapper.vm.hasEmojiPickerEnabled).toBe(true);
+    expect(wrapper.vm.hasEndConversationEnabled).toBe(true);
+    expect(wrapper.vm.hasAttachmentsEnabled).toBe(true);
+    expect(wrapper.vm.hasAConnectedAgentBot).toBe(true);
+    expect(wrapper.vm.useInboxAvatarForBot).toBe(true);
+    expect(wrapper.vm.inboxAvatarUrl).toBe('https://test.url');
+
+    expect(wrapper.vm.channelConfig).toEqual({
+      avatarUrl: 'https://test.url',
+      hasAConnectedAgentBot: 'AgentBot',
+      enabledFeatures: [
+        'emoji_picker',
+        'attachments',
+        'end_conversation',
+        'use_inbox_avatar_for_bot',
+      ],
+      preChatFormOptions: {
+        pre_chat_message: '',
+        pre_chat_fields: preChatFields,
+      },
+      preChatFormEnabled: true,
+    });
+    expect(wrapper.vm.preChatFormOptions).toEqual({
+      preChatMessage: '',
+      preChatFields: preChatFields,
+    });
+    expect(wrapper.vm.preChatFormEnabled).toBe(true);
+    expect(wrapper.vm.shouldShowPreChatForm).toBe(true);
+  });
+});

app/javascript/widget/mixins/specs/messageFixture.js

@@ -0,0 +1,27 @@
+export default {
+  nonDeletedMessage: {
+    content: 'Hey',
+    content_attributes: {},
+    attachments: [
+      {
+        data_url: 'https://assets.com/kseb-bill.pdf',
+        extension: null,
+        file_type: 'file',
+      },
+    ],
+    content_type: 'text',
+    conversation_id: 1,
+    created_at: 1626111625,
+    id: 1,
+    message_type: 0,
+  },
+  deletedMessage: {
+    content: 'This message was deleted',
+    content_attributes: { deleted: true },
+    content_type: null,
+    conversation_id: 1,
+    created_at: 1626111634,
+    id: 2,
+    message_type: 1,
+  },
+};

app/javascript/widget/mixins/specs/messageMixin.spec.js

@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils';
+import messageMixin from '../messageMixin';
+import messages from './messageFixture';
+
+describe('messageMixin', () => {
+  let Component = {
+    render() {},
+    title: 'TestComponent',
+    mixins: [messageMixin],
+  };
+
+  it('deleted messages', async () => {
+    const wrapper = shallowMount(Component, {
+      data() {
+        return {
+          message: messages.deletedMessage,
+        };
+      },
+    });
+    expect(wrapper.vm.messageContentAttributes).toEqual({
+      deleted: true,
+    });
+    expect(wrapper.vm.hasAttachments).toBe(false);
+  });
+  it('non-deleted messages', async () => {
+    const wrapper = shallowMount(Component, {
+      data() {
+        return {
+          message: messages.nonDeletedMessage,
+        };
+      },
+    });
+    expect(wrapper.vm.deletedMessage).toBe(undefined);
+    expect(wrapper.vm.messageContentAttributes).toEqual({});
+    expect(wrapper.vm.hasAttachments).toBe(true);
+  });
+});