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/views/ArticleViewer.vue

@@ -0,0 +1,16 @@
+<script>
+import IframeLoader from 'shared/components/IframeLoader.vue';
+
+export default {
+  name: 'ArticleViewer',
+  components: {
+    IframeLoader,
+  },
+};
+</script>
+
+<template>
+  <div class="bg-white h-full">
+    <IframeLoader :url="$route.query.link" />
+  </div>
+</template>

app/javascript/widget/views/Campaigns.vue

@@ -0,0 +1,41 @@
+<script>
+import { mapGetters } from 'vuex';
+import { IFrameHelper } from 'widget/helpers/utils';
+import UnreadMessageList from '../components/UnreadMessageList.vue';
+import { emitter } from 'shared/helpers/mitt';
+
+export default {
+  name: 'Campaigns',
+  components: {
+    UnreadMessageList,
+  },
+  computed: {
+    ...mapGetters({ campaign: 'campaign/getActiveCampaign' }),
+    messages() {
+      const { sender, id: campaignId, message: content } = this.campaign;
+      return [
+        {
+          content,
+          sender,
+          campaignId,
+        },
+      ];
+    },
+  },
+  methods: {
+    closeFullView() {
+      if (IFrameHelper.isIFrame()) {
+        IFrameHelper.sendMessage({
+          event: 'setCampaignReadOn',
+        });
+        IFrameHelper.sendMessage({ event: 'toggleBubble' });
+        emitter.emit('snooze-campaigns');
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <UnreadMessageList :messages="messages" @close="closeFullView" />
+</template>

app/javascript/widget/views/Home.vue

@@ -0,0 +1,47 @@
+<script>
+import TeamAvailability from 'widget/components/TeamAvailability.vue';
+import { mapGetters } from 'vuex';
+import { useRouter } from 'vue-router';
+import configMixin from 'widget/mixins/configMixin';
+import ArticleContainer from '../components/pageComponents/Home/Article/ArticleContainer.vue';
+export default {
+  name: 'Home',
+  components: {
+    ArticleContainer,
+    TeamAvailability,
+  },
+  mixins: [configMixin],
+  setup() {
+    const router = useRouter();
+    return { router };
+  },
+  computed: {
+    ...mapGetters({
+      availableAgents: 'agent/availableAgents',
+      conversationSize: 'conversation/getConversationSize',
+      unreadMessageCount: 'conversation/getUnreadMessageCount',
+    }),
+  },
+  methods: {
+    startConversation() {
+      if (this.preChatFormEnabled && !this.conversationSize) {
+        return this.router.replace({ name: 'prechat-form' });
+      }
+      return this.router.replace({ name: 'messages' });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="z-50 flex flex-col justify-end flex-1 w-full p-4 gap-4">
+    <TeamAvailability
+      :available-agents="availableAgents"
+      :has-conversation="!!conversationSize"
+      :unread-count="unreadMessageCount"
+      @start-conversation="startConversation"
+    />
+
+    <ArticleContainer />
+  </div>
+</template>

app/javascript/widget/views/Messages.vue

@@ -0,0 +1,29 @@
+<script>
+import { mapGetters } from 'vuex';
+
+import ChatFooter from '../components/ChatFooter.vue';
+import ConversationWrap from '../components/ConversationWrap.vue';
+
+export default {
+  components: { ChatFooter, ConversationWrap },
+  computed: {
+    ...mapGetters({
+      groupedMessages: 'conversation/getGroupedConversation',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('conversation/setUserLastSeen');
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col flex-1 overflow-hidden rounded-b-lg bg-n-slate-2 dark:bg-n-solid-1"
+  >
+    <div class="flex flex-1 overflow-auto">
+      <ConversationWrap :grouped-messages="groupedMessages" />
+    </div>
+    <ChatFooter class="px-5" />
+  </div>
+</template>

app/javascript/widget/views/PreChatForm.vue

@@ -0,0 +1,83 @@
+<script>
+import { mapActions } from 'vuex';
+import { useRouter } from 'vue-router';
+import PreChatForm from '../components/PreChat/Form.vue';
+import configMixin from '../mixins/configMixin';
+import { isEmptyObject } from 'widget/helpers/utils';
+import { ON_CONVERSATION_CREATED } from '../constants/widgetBusEvents';
+import { emitter } from 'shared/helpers/mitt';
+
+export default {
+  components: {
+    PreChatForm,
+  },
+  mixins: [configMixin],
+  setup() {
+    const router = useRouter();
+    return { router };
+  },
+  mounted() {
+    // Register event listener for conversation creation
+    emitter.on(ON_CONVERSATION_CREATED, this.handleConversationCreated);
+  },
+  beforeUnmount() {
+    emitter.off(ON_CONVERSATION_CREATED, this.handleConversationCreated);
+  },
+  methods: {
+    ...mapActions('conversation', ['clearConversations']),
+    ...mapActions('conversationAttributes', ['clearConversationAttributes']),
+    handleConversationCreated() {
+      // Redirect to messages page after conversation is created
+      this.router.replace({ name: 'messages' });
+      // Only after successful navigation, reset the isUpdatingRoute UIflag in app/javascript/widget/router.js
+      // See issue: https://github.com/chatwoot/chatwoot/issues/10736
+    },
+
+    onSubmit({
+      fullName,
+      emailAddress,
+      message,
+      activeCampaignId,
+      phoneNumber,
+      contactCustomAttributes,
+      conversationCustomAttributes,
+    }) {
+      if (activeCampaignId) {
+        emitter.emit('execute-campaign', {
+          campaignId: activeCampaignId,
+          customAttributes: conversationCustomAttributes,
+        });
+        this.$store.dispatch('contacts/update', {
+          user: {
+            email: emailAddress,
+            name: fullName,
+            phone_number: phoneNumber,
+          },
+        });
+      } else {
+        this.clearConversations();
+        this.clearConversationAttributes();
+        this.$store.dispatch('conversation/createConversation', {
+          fullName: fullName,
+          emailAddress: emailAddress,
+          message: message,
+          phoneNumber: phoneNumber,
+          customAttributes: conversationCustomAttributes,
+        });
+      }
+      if (!isEmptyObject(contactCustomAttributes)) {
+        this.$store.dispatch(
+          'contacts/setCustomAttributes',
+          contactCustomAttributes
+        );
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="flex flex-1 overflow-auto">
+    <PreChatForm :options="preChatFormOptions" @submit-pre-chat="onSubmit" />
+  </div>
+</template>

app/javascript/widget/views/UnreadMessages.vue

@@ -0,0 +1,28 @@
+<script>
+import { mapGetters } from 'vuex';
+import { IFrameHelper } from 'widget/helpers/utils';
+import UnreadMessageList from '../components/UnreadMessageList.vue';
+
+export default {
+  name: 'UnreadMessages',
+  components: {
+    UnreadMessageList,
+  },
+  computed: {
+    ...mapGetters({
+      messages: 'conversation/getUnreadTextMessages',
+    }),
+  },
+  methods: {
+    closeFullView() {
+      if (IFrameHelper.isIFrame()) {
+        IFrameHelper.sendMessage({ event: 'toggleBubble' });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <UnreadMessageList :messages="messages" @close="closeFullView" />
+</template>