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/template/Article.vue

@@ -0,0 +1,51 @@
+<script>
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+export default {
+  components: {
+    FluentIcon,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup() {
+    const { truncateMessage } = useMessageFormatter();
+    return { truncateMessage };
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div
+    v-if="!!items.length"
+    class="chat-bubble agent bg-n-background dark:bg-n-solid-3"
+  >
+    <div
+      v-for="item in items"
+      :key="item.link"
+      class="border-b border-solid border-n-weak text-sm py-2 px-0 last:border-b-0"
+    >
+      <a
+        :href="item.link"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+        class="text-n-slate-12 no-underline"
+      >
+        <span class="flex items-center text-n-slate-12 font-medium">
+          <FluentIcon icon="link" class="ltr:mr-1 rtl:ml-1 text-n-slate-12" />
+          <span class="text-n-slate-12">
+            {{ item.title }}
+          </span>
+        </span>
+        <span class="block mt-1 text-n-slate-12">
+          {{ truncateMessage(item.description) }}
+        </span>
+      </a>
+    </div>
+  </div>
+</template>

app/javascript/widget/components/template/EmailInput.vue

@@ -0,0 +1,131 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email } from '@vuelidate/validators';
+import { getContrastingTextColor } from '@chatwoot/utils';
+
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  components: {
+    FluentIcon,
+    Spinner,
+  },
+  props: {
+    messageId: {
+      type: Number,
+      required: true,
+    },
+    messageContentAttributes: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      email: '',
+      isUpdating: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+    hasSubmitted() {
+      return (
+        this.messageContentAttributes &&
+        this.messageContentAttributes.submitted_email
+      );
+    },
+  },
+  validations: {
+    email: {
+      required,
+      email,
+    },
+  },
+  methods: {
+    async onSubmit() {
+      if (this.v$.$invalid) {
+        return;
+      }
+      this.isUpdating = true;
+      try {
+        await this.$store.dispatch('message/update', {
+          email: this.email,
+          messageId: this.messageId,
+        });
+      } catch (error) {
+        // Ignore error
+      } finally {
+        this.isUpdating = false;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <form
+      v-if="!hasSubmitted"
+      class="email-input-group h-10 flex my-2 mx-0 min-w-[200px]"
+      @submit.prevent="onSubmit"
+    >
+      <input
+        v-model="email"
+        type="email"
+        :placeholder="$t('EMAIL_PLACEHOLDER')"
+        :class="{ error: v$.email.$error }"
+        @input="v$.email.$touch"
+        @keydown.enter="onSubmit"
+      />
+      <button
+        class="button small"
+        :disabled="v$.email.$invalid"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
+      >
+        <FluentIcon v-if="!isUpdating" icon="chevron-right" />
+        <Spinner v-else class="mx-2" />
+      </button>
+    </form>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.email-input-group {
+  input {
+    @apply dark:bg-n-alpha-black1 rtl:rounded-tl-[0] ltr:rounded-tr-[0] rtl:rounded-bl-[0] ltr:rounded-br-[0] p-2.5 w-full focus:ring-0 focus:outline-n-brand;
+
+    &::placeholder {
+      @apply text-n-slate-10;
+    }
+
+    &.error {
+      @apply outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9;
+    }
+  }
+
+  .button {
+    @apply rtl:rounded-tr-[0] ltr:rounded-tl-[0] rtl:rounded-br-[0] ltr:rounded-bl-[0] rounded-lg h-auto ltr:-ml-px rtl:-mr-px text-xl;
+
+    .spinner {
+      display: block;
+      padding: 0;
+      height: auto;
+      width: auto;
+    }
+  }
+}
+</style>

app/javascript/widget/components/template/IntegrationCard.vue

@@ -0,0 +1,108 @@
+<script>
+import IntegrationAPIClient from 'widget/api/integration';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
+import { getContrastingTextColor } from '@chatwoot/utils';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: {
+    FluentIcon,
+  },
+  props: {
+    messageId: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return { isLoading: false, dyteAuthToken: '', isSDKMounted: false };
+  },
+  computed: {
+    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+    meetingLink() {
+      return buildDyteURL(this.dyteAuthToken);
+    },
+  },
+  methods: {
+    async joinTheCall() {
+      this.isLoading = true;
+      try {
+        const response = await IntegrationAPIClient.addParticipantToDyteMeeting(
+          this.messageId
+        );
+        const { data: { token } = {} } = response;
+        this.dyteAuthToken = token;
+      } catch (error) {
+        // Ignore Error for now
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    leaveTheRoom() {
+      this.dyteAuthToken = '';
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <button
+      class="button join-call-button"
+      color-scheme="secondary"
+      :is-loading="isLoading"
+      :style="{
+        background: widgetColor,
+        borderColor: widgetColor,
+        color: textColor,
+      }"
+      @click="joinTheCall"
+    >
+      <FluentIcon icon="video-add" class="rtl:ml-2 ltr:mr-2" />
+      {{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
+    </button>
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <button
+        class="button small join-call-button leave-room-button"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATIONS.DYTE.LEAVE_THE_ROOM') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.video-call--container {
+  position: fixed;
+  top: 72px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  z-index: 100;
+
+  iframe {
+    width: 100%;
+    height: calc(100% - 72px);
+
+    border: 0;
+  }
+}
+
+.join-call-button {
+  @apply flex items-center my-2 rounded-lg;
+}
+
+.leave-room-button {
+  @apply absolute top-0 ltr:right-2 rtl:left-2 px-1 rounded-md;
+}
+</style>