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/superadmin_pages/components/playground/BotMessage.vue

@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="w-full mb-4 flex items-center justify-start">
+    <div
+      v-dompurify-html="message"
+      class="px-4 py-3 bg-white max-w-4xl text-slate-700 leading-6 text-sm rounded-md inline-block border border-slate-100"
+    />
+  </div>
+</template>

app/javascript/superadmin_pages/components/playground/Header.vue

@@ -0,0 +1,40 @@
+<script setup>
+defineProps({
+  responseSourcePath: {
+    type: String,
+    required: true,
+  },
+  responseSourceName: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <header
+    class="flex items-center px-8 py-4 bg-white border-b border-slate-100"
+    role="banner"
+  >
+    <a :href="responseSourcePath" class="text-woot-500 hover:underline mr-4">
+      {{ 'Back' }}
+    </a>
+    <div
+      class="border border-solid border-slate-100 text-slate-700 mr-4 p-2 rounded-full"
+    >
+      <svg width="24" height="24"><use xlink:href="#icon-mist-fill" /></svg>
+    </div>
+    <div class="flex flex-col h-14 justify-center">
+      <h1 id="page-title" class="text-base font-medium text-slate-900">
+        {{ 'Robin AI playground' }}
+      </h1>
+      <p class="text-sm text-slate-600">
+        {{ 'Chat with the source' }}
+        <span class="font-medium">
+          {{ responseSourceName }}
+        </span>
+        {{ 'and evaluate it’s efficiency.' }}
+      </p>
+    </div>
+  </header>
+</template>

app/javascript/superadmin_pages/components/playground/TypingIndicator.vue

@@ -0,0 +1,13 @@
+<script setup>
+import TypingIndicator from './assets/typing.gif';
+</script>
+
+<template>
+  <div class="w-full mb-4 flex items-center justify-start">
+    <div
+      class="px-2 py-2 bg-white max-w-4xl text-slate-700 leading-6 text-sm rounded-md inline-block border border-slate-100"
+    >
+      <img :src="TypingIndicator" alt="TypingIndicator" class="h-4" />
+    </div>
+  </div>
+</template>

app/javascript/superadmin_pages/components/playground/UserMessage.vue

@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="w-full mb-4 flex items-center justify-end">
+    <div
+      v-dompurify-html="message"
+      class="px-4 py-3 bg-woot-400 text-white text-sm rounded-md inline-block"
+    />
+  </div>
+</template>