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/store/modules/conversation/mutations.js

@@ -0,0 +1,116 @@
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import { findUndeliveredMessage } from './helpers';
+
+export const mutations = {
+  clearConversations($state) {
+    $state.conversations = {};
+  },
+  pushMessageToConversation($state, message) {
+    const { id, status, message_type: type } = message;
+
+    const messagesInbox = $state.conversations;
+    const isMessageIncoming = type === MESSAGE_TYPE.INCOMING;
+    const isTemporaryMessage = status === 'in_progress';
+
+    if (!isMessageIncoming || isTemporaryMessage) {
+      messagesInbox[id] = message;
+      return;
+    }
+
+    const [messageInConversation] = findUndeliveredMessage(
+      messagesInbox,
+      message
+    );
+    if (!messageInConversation) {
+      messagesInbox[id] = message;
+    } else {
+      // [VITE] instead of leaving undefined behind, we remove it completely
+      // remove the temporary message and replace it with the new message
+      // messagesInbox[messageInConversation.id] = undefined;
+      delete messagesInbox[messageInConversation.id];
+      messagesInbox[id] = message;
+    }
+  },
+
+  updateAttachmentMessageStatus($state, { message, tempId }) {
+    const { id } = message;
+    const messagesInbox = $state.conversations;
+
+    const messageInConversation = messagesInbox[tempId];
+
+    if (messageInConversation) {
+      // [VITE] instead of leaving undefined behind, we remove it completely
+      // remove the temporary message and replace it with the new message
+      // messagesInbox[tempId] = undefined;
+      delete messagesInbox[tempId];
+      messagesInbox[id] = { ...message };
+    }
+  },
+
+  setConversationUIFlag($state, uiFlags) {
+    $state.uiFlags = {
+      ...$state.uiFlags,
+      ...uiFlags,
+    };
+  },
+
+  setConversationListLoading($state, status) {
+    $state.uiFlags.isFetchingList = status;
+  },
+
+  setMessagesInConversation($state, payload) {
+    if (!payload.length) {
+      $state.uiFlags.allMessagesLoaded = true;
+      return;
+    }
+
+    payload.forEach(message => {
+      $state.conversations[message.id] = message;
+    });
+  },
+
+  setMissingMessagesInConversation($state, payload) {
+    $state.conversation = payload;
+  },
+
+  updateMessage($state, { id, content_attributes }) {
+    $state.conversations[id] = {
+      ...$state.conversations[id],
+      content_attributes: {
+        ...($state.conversations[id].content_attributes || {}),
+        ...content_attributes,
+      },
+    };
+  },
+
+  updateMessageMeta($state, { id, meta }) {
+    const message = $state.conversations[id];
+    if (!message) return;
+
+    const newMeta = message.meta ? { ...message.meta, ...meta } : { ...meta };
+    message.meta = { ...newMeta };
+  },
+
+  deleteMessage($state, id) {
+    delete $state.conversations[id];
+    // [VITE] In Vue 3 proxy objects, we can't delete properties by setting them to undefined
+    // Instead, we have to use the delete operator
+    // $state.conversations[id] = undefined;
+  },
+
+  toggleAgentTypingStatus($state, { status }) {
+    $state.uiFlags.isAgentTyping = status === 'on';
+  },
+
+  setMetaUserLastSeenAt($state, lastSeen) {
+    $state.meta.userLastSeenAt = lastSeen;
+  },
+
+  setLastMessageId($state) {
+    const { conversations } = $state;
+    const lastMessage = Object.values(conversations).pop();
+    if (!lastMessage) return;
+    const { id } = lastMessage;
+    $state.lastMessageId = id;
+  },
+};