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/components-next/copilot/CopilotAssistantMessage.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { computed } from 'vue';
+import { emitter } from 'shared/helpers/mitt';
+import { useTrack } from 'dashboard/composables';
+
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  isLastMessage: {
+    type: Boolean,
+    default: false,
+  },
+  message: {
+    type: Object,
+    required: true,
+  },
+  conversationInboxType: {
+    type: String,
+    required: true,
+  },
+});
+const hasEmptyMessageContent = computed(() => !props.message?.content);
+
+const showUseButton = computed(() => {
+  return (
+    !hasEmptyMessageContent.value &&
+    props.message.reply_suggestion &&
+    props.isLastMessage
+  );
+});
+
+const messageContent = computed(() => {
+  const formatter = new MessageFormatter(props.message.content);
+  return formatter.formattedMessage;
+});
+
+const insertIntoRichEditor = computed(() => {
+  return [INBOX_TYPES.WEB, INBOX_TYPES.EMAIL].includes(
+    props.conversationInboxType
+  );
+});
+
+const useCopilotResponse = () => {
+  if (insertIntoRichEditor.value) {
+    emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
+  } else {
+    emitter.emit(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, props.message?.content);
+  }
+  useTrack(COPILOT_EVENTS.USE_CAPTAIN_RESPONSE);
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-1 text-n-slate-12">
+    <div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div>
+    <span v-if="hasEmptyMessageContent" class="text-n-ruby-11">
+      {{ $t('CAPTAIN.COPILOT.EMPTY_MESSAGE') }}
+    </span>
+    <div
+      v-else
+      v-dompurify-html="messageContent"
+      class="prose-sm break-words"
+    />
+    <div class="flex flex-row mt-1">
+      <Button
+        v-if="showUseButton"
+        :label="$t('CAPTAIN.COPILOT.USE')"
+        faded
+        sm
+        slate
+        @click="useCopilotResponse"
+      />
+    </div>
+  </div>
+</template>