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/dashboard/helper/commons.js

@@ -0,0 +1,113 @@
+/* eslint no-param-reassign: 0 */
+
+import getUuid from 'widget/helpers/uuid';
+import { MESSAGE_STATUS, MESSAGE_TYPE } from 'shared/constants/messages';
+
+export default () => {
+  if (!Array.prototype.last) {
+    Object.assign(Array.prototype, {
+      last() {
+        return this[this.length - 1];
+      },
+    });
+  }
+};
+
+export const isEmptyObject = obj =>
+  Object.keys(obj).length === 0 && obj.constructor === Object;
+
+export const isJSONValid = value => {
+  try {
+    JSON.parse(value);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+
+export const getTypingUsersText = (users = []) => {
+  const count = users.length;
+  const [firstUser, secondUser] = users;
+
+  if (count === 1) {
+    return ['TYPING.ONE', { user: firstUser.name }];
+  }
+
+  if (count === 2) {
+    return [
+      'TYPING.TWO',
+      { user: firstUser.name, secondUser: secondUser.name },
+    ];
+  }
+
+  return ['TYPING.MULTIPLE', { user: firstUser.name, count: count - 1 }];
+};
+
+export const createPendingMessage = data => {
+  const timestamp = Math.floor(new Date().getTime() / 1000);
+  const tempMessageId = getUuid();
+  const { message, file } = data;
+  const tempAttachments = [{ id: tempMessageId }];
+  const pendingMessage = {
+    ...data,
+    content: message || null,
+    id: tempMessageId,
+    echo_id: tempMessageId,
+    status: MESSAGE_STATUS.PROGRESS,
+    created_at: timestamp,
+    message_type: MESSAGE_TYPE.OUTGOING,
+    conversation_id: data.conversationId,
+    attachments: file ? tempAttachments : null,
+  };
+
+  return pendingMessage;
+};
+
+export const convertToAttributeSlug = text => {
+  return text
+    .toLowerCase()
+    .replace(/[^\w ]+/g, '')
+    .replace(/ +/g, '_');
+};
+
+export const convertToCategorySlug = text => {
+  return text
+    .toLowerCase()
+    .replace(/[^\w ]+/g, '')
+    .replace(/ +/g, '-');
+};
+
+export const convertToPortalSlug = text => {
+  return text
+    .toLowerCase()
+    .replace(/[^\w ]+/g, '')
+    .replace(/ +/g, '-');
+};
+
+/**
+ * Strip curly braces, commas and leading/trailing whitespace from a search key.
+ * Eg. "{{contact.name}}," => "contact.name"
+ * @param {string} searchKey
+ * @returns {string}
+ */
+export const sanitizeVariableSearchKey = (searchKey = '') => {
+  return searchKey
+    .replace(/[{}]/g, '') // remove all curly braces
+    .replace(/,/g, '') // remove commas
+    .trim();
+};
+
+/**
+ * Convert underscore-separated string to title case.
+ * Eg. "round_robin" => "Round Robin"
+ * @param {string} str
+ * @returns {string}
+ */
+export const formatToTitleCase = str => {
+  return (
+    str
+      ?.replace(/_/g, ' ')
+      .replace(/\b\w/g, l => l.toUpperCase())
+      .trim() || ''
+  );
+};