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/components/HeaderActions.vue

@@ -0,0 +1,125 @@
+<script>
+import { mapGetters } from 'vuex';
+import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
+import { popoutChatWindow } from '../helpers/popoutHelper';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import configMixin from 'widget/mixins/configMixin';
+import { CONVERSATION_STATUS } from 'shared/constants/messages';
+
+export default {
+  name: 'HeaderActions',
+  components: { FluentIcon },
+  mixins: [configMixin],
+  props: {
+    showPopoutButton: {
+      type: Boolean,
+      default: false,
+    },
+    showEndConversationButton: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      conversationAttributes: 'conversationAttributes/getConversationParams',
+      canUserEndConversation: 'appConfig/getCanUserEndConversation',
+    }),
+    canLeaveConversation() {
+      return [
+        CONVERSATION_STATUS.OPEN,
+        CONVERSATION_STATUS.SNOOZED,
+        CONVERSATION_STATUS.PENDING,
+      ].includes(this.conversationStatus);
+    },
+    isIframe() {
+      return IFrameHelper.isIFrame();
+    },
+    isRNWebView() {
+      return RNHelper.isRNWebView();
+    },
+    showHeaderActions() {
+      return this.isIframe || this.isRNWebView || this.hasWidgetOptions;
+    },
+    conversationStatus() {
+      return this.conversationAttributes.status;
+    },
+    hasWidgetOptions() {
+      return this.showPopoutButton || this.conversationStatus === 'open';
+    },
+  },
+  methods: {
+    popoutWindow() {
+      this.closeWindow();
+      const {
+        location: { origin },
+        chatwootWebChannel: { websiteToken },
+        authToken,
+      } = window;
+      popoutChatWindow(
+        origin,
+        websiteToken,
+        this.$root.$i18n.locale,
+        authToken
+      );
+    },
+    closeWindow() {
+      if (IFrameHelper.isIFrame()) {
+        IFrameHelper.sendMessage({ event: 'closeWindow' });
+      } else if (RNHelper.isRNWebView) {
+        RNHelper.sendMessage({ type: 'close-widget' });
+      }
+    },
+    resolveConversation() {
+      this.$store.dispatch('conversation/resolveConversation');
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div v-if="showHeaderActions" class="actions flex items-center gap-3">
+    <button
+      v-if="
+        canLeaveConversation &&
+        canUserEndConversation &&
+        hasEndConversationEnabled &&
+        showEndConversationButton
+      "
+      class="button transparent compact"
+      :title="$t('END_CONVERSATION')"
+      @click="resolveConversation"
+    >
+      <FluentIcon icon="sign-out" size="22" class="text-n-slate-12" />
+    </button>
+    <button
+      v-if="showPopoutButton"
+      class="button transparent compact new-window--button"
+      @click="popoutWindow"
+    >
+      <FluentIcon icon="open" size="22" class="text-n-slate-12" />
+    </button>
+    <button
+      class="button transparent compact close-button"
+      :class="{
+        'rn-close-button': isRNWebView,
+      }"
+      @click="closeWindow"
+    >
+      <FluentIcon icon="dismiss" size="24" class="text-n-slate-12" />
+    </button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.actions {
+  .close-button {
+    display: none;
+  }
+
+  .rn-close-button {
+    display: block !important;
+  }
+}
+</style>