From a35c3e4c06dab6baa489b87cdf1cbfeb2a973cb2 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 29 Oct 2025 17:06:32 +0530
Subject: [PATCH] feat: Template types components (#12714)

# Pull Request Template

## Description

Fixes
https://linear.app/chatwoot/issue/CW-5806/create-the-story-book-components-for-template-typestext-media-list

**Pending**
Need to standardize the structure to match the template/campaigns.


## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Screenshots

<img width="669" height="179" alt="image"
src="https://github.com/user-attachments/assets/42efd292-8520-4b05-81ec-8bc526fc12db"
/>
<img width="646" height="304" alt="image"
src="https://github.com/user-attachments/assets/431dd964-006c-4877-a693-dae39b90df4c"
/>
<img width="646" height="380" alt="image"
src="https://github.com/user-attachments/assets/9052e31f-9292-4afb-8897-13931655fa00"
/>
<img width="646" height="272" alt="image"
src="https://github.com/user-attachments/assets/873d2488-e856-4a0d-8579-cc1bcc61cc8e"
/>
<img width="646" height="490" alt="image"
src="https://github.com/user-attachments/assets/14c2aa42-bf27-475f-aa70-fe59c1d00e9b"
/>
<img width="646" height="281" alt="image"
src="https://github.com/user-attachments/assets/1f42408e-03e8-4863-b4c7-715d13d67686"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../message/bubbles/Template/CallToAction.vue | 29 ++++++++
 .../message/bubbles/Template/Card.vue         | 32 +++++++++
 .../message/bubbles/Template/ListPicker.vue   | 25 +++++++
 .../message/bubbles/Template/Media.vue        | 20 ++++++
 .../message/bubbles/Template/QuickReply.vue   | 68 +++++++++++++++++++
 .../message/bubbles/Template/Text.vue         | 14 ++++
 .../stories/Template/CallToAction.story.vue   | 21 ++++++
 .../message/stories/Template/Card.story.vue   | 23 +++++++
 .../stories/Template/ListPicker.story.vue     | 21 ++++++
 .../message/stories/Template/Media.story.vue  | 23 +++++++
 .../stories/Template/QuickReply.story.vue     | 21 ++++++
 .../message/stories/Template/Text.story.vue   | 20 ++++++
 12 files changed, 317 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Template/Card.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Template/ListPicker.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Template/Media.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Template/QuickReply.vue
 create mode 100644 app/javascript/dashboard/components-next/message/bubbles/Template/Text.vue
 create mode 100644 app/javascript/dashboard/components-next/message/stories/Template/CallToAction.story.vue
 create mode 100644 app/javascript/dashboard/components-next/message/stories/Template/Card.story.vue
 create mode 100644 app/javascript/dashboard/components-next/message/stories/Template/ListPicker.story.vue
 create mode 100644 app/javascript/dashboard/components-next/message/stories/Template/Media.story.vue
 create mode 100644 app/javascript/dashboard/components-next/message/stories/Template/QuickReply.story.vue
 create mode 100644 app/javascript/dashboard/components-next/message/stories/Template/Text.story.vue

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue b/app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue
new file mode 100644
index 000000000..ae6f733c8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue
@@ -0,0 +1,29 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="text-n-slate-12 max-w-80 flex flex-col gap-2.5">
+    <div class="p-3 bg-n-alpha-2 rounded-xl">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div class="flex gap-2">
+      <Button label="Call us" slate class="!text-n-blue-text w-full" />
+      <Button
+        label="Visit our website"
+        slate
+        class="!text-n-blue-text w-full"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/Card.vue b/app/javascript/dashboard/components-next/message/bubbles/Template/Card.vue
new file mode 100644
index 000000000..9a4f9f19a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Template/Card.vue
@@ -0,0 +1,32 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+  >
+    <div class="px-3 py-2.5">
+      <img :src="message.image_url" class="max-h-44 rounded-lg w-full" />
+      <div class="pt-2.5 flex flex-col gap-2">
+        <h6 class="font-semibold">{{ message.title }}</h6>
+        <span
+          v-dompurify-html="message.content"
+          class="prose prose-bubble text-sm"
+        />
+      </div>
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button label="Call us to order" link class="hover:!no-underline" />
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button label="Visit our store" link class="hover:!no-underline" />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/ListPicker.vue b/app/javascript/dashboard/components-next/message/bubbles/Template/ListPicker.vue
new file mode 100644
index 000000000..7d9401b80
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Template/ListPicker.vue
@@ -0,0 +1,25 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+  >
+    <div class="p-3">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button label="See options" link class="hover:!no-underline" />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/Media.vue b/app/javascript/dashboard/components-next/message/bubbles/Template/Media.vue
new file mode 100644
index 000000000..24340ab90
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Template/Media.vue
@@ -0,0 +1,20 @@
+<script setup>
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 text-n-slate-12 rounded-xl flex flex-col gap-2.5 p-3 max-w-80"
+  >
+    <img :src="message.image_url" class="max-h-44 rounded-lg w-full" />
+    <span
+      v-dompurify-html="message.content"
+      class="prose prose-bubble font-medium text-sm"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/QuickReply.vue b/app/javascript/dashboard/components-next/message/bubbles/Template/QuickReply.vue
new file mode 100644
index 000000000..19727578f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Template/QuickReply.vue
@@ -0,0 +1,68 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+  >
+    <div class="p-3">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button label="No, that will be all" link class="hover:!no-underline">
+        <template #icon>
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            class="stroke-n-blue-text"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
+              stroke-width="1.333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </template>
+      </Button>
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button
+        label="I want to talk to an agents"
+        link
+        class="hover:!no-underline"
+      >
+        <template #icon>
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            class="stroke-n-blue-text"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
+              stroke-width="1.333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/Text.vue b/app/javascript/dashboard/components-next/message/bubbles/Template/Text.vue
new file mode 100644
index 000000000..accefcd9e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Template/Text.vue
@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="bg-n-alpha-2 text-n-slate-12 rounded-xl p-3 max-w-80">
+    <span v-dompurify-html="message.content" class="prose prose-bubble" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/Template/CallToAction.story.vue b/app/javascript/dashboard/components-next/message/stories/Template/CallToAction.story.vue
new file mode 100644
index 000000000..1c2b956a3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/Template/CallToAction.story.vue
@@ -0,0 +1,21 @@
+<script setup>
+import CallToAction from '../../bubbles/Template/CallToAction.vue';
+
+const message = {
+  content:
+    'We have super cool products going live! Pre-order and customize products. Contact us for more details',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/CallToAction"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Call To Action">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <CallToAction :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/Template/Card.story.vue b/app/javascript/dashboard/components-next/message/stories/Template/Card.story.vue
new file mode 100644
index 000000000..caa594bab
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/Template/Card.story.vue
@@ -0,0 +1,23 @@
+<script setup>
+import Card from '../../bubbles/Template/Card.vue';
+
+const message = {
+  title: 'Two in one cake (1 pound)',
+  content: 'Customize your order for special occasions',
+  image_url:
+    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/Card"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Card">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <Card :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/Template/ListPicker.story.vue b/app/javascript/dashboard/components-next/message/stories/Template/ListPicker.story.vue
new file mode 100644
index 000000000..f1e9dd8b8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/Template/ListPicker.story.vue
@@ -0,0 +1,21 @@
+<script setup>
+import ListPicker from '../../bubbles/Template/ListPicker.vue';
+
+const message = {
+  content: `Hey there! Thanks for reaching out to us. Could you let us know
+what you need to help us better assist you? `,
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/ListPicker"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="ListPicker">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <ListPicker :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/Template/Media.story.vue b/app/javascript/dashboard/components-next/message/stories/Template/Media.story.vue
new file mode 100644
index 000000000..67d7fc6b8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/Template/Media.story.vue
@@ -0,0 +1,23 @@
+<script setup>
+import Media from '../../bubbles/Template/Media.vue';
+
+const message = {
+  content:
+    'Welcome to our Diwali sale! Get flat 50% off on select items. Hurry now!',
+  image_url:
+    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/Media"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Image Media">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <Media :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/Template/QuickReply.story.vue b/app/javascript/dashboard/components-next/message/stories/Template/QuickReply.story.vue
new file mode 100644
index 000000000..1d670e07c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/Template/QuickReply.story.vue
@@ -0,0 +1,21 @@
+<script setup>
+import QuickReply from '../../bubbles/Template/QuickReply.vue';
+
+const message = {
+  content: `Hey there! Thanks for reaching out to us. Could you let us know
+what you need to help us better assist you?`,
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/QuickReply"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Quick Replies">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <QuickReply :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/Template/Text.story.vue b/app/javascript/dashboard/components-next/message/stories/Template/Text.story.vue
new file mode 100644
index 000000000..cbb6df569
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/Template/Text.story.vue
@@ -0,0 +1,20 @@
+<script setup>
+import Text from '../../bubbles/Template/Text.vue';
+
+const message = {
+  content: 'Hello John, how may we assist you?',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/Text"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Default Text">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <Text :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>