From b495aad1e6582cb5bd2990ed7b8b9c05089d4119 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 26 May 2026 17:37:27 +0530
Subject: [PATCH] feat(onboarding): allow full color channel icons (#14570)

---
 .../icon/ChannelIcon.story.vue                | 65 ++++++++++++++
 .../components-next/icon/ChannelIcon.vue      | 19 ++++-
 .../components-next/icon/provider.js          | 85 ++++++++++++++-----
 theme/icons.js                                | 15 ++++
 4 files changed, 160 insertions(+), 24 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/icon/ChannelIcon.story.vue

diff --git a/app/javascript/dashboard/components-next/icon/ChannelIcon.story.vue b/app/javascript/dashboard/components-next/icon/ChannelIcon.story.vue
new file mode 100644
index 00000000000..38868039eb3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/ChannelIcon.story.vue
@@ -0,0 +1,65 @@
+<script setup>
+import ChannelIcon from './ChannelIcon.vue';
+import { useChannelBrandIcon } from './provider';
+
+const inboxes = [
+  { name: 'API', channel_type: 'Channel::Api' },
+  { name: 'Email', channel_type: 'Channel::Email' },
+  { name: 'Gmail', channel_type: 'Channel::Email', provider: 'google' },
+  { name: 'Outlook', channel_type: 'Channel::Email', provider: 'microsoft' },
+  { name: 'Messenger', channel_type: 'Channel::FacebookPage' },
+  { name: 'Instagram', channel_type: 'Channel::Instagram' },
+  { name: 'Line', channel_type: 'Channel::Line' },
+  { name: 'Telegram', channel_type: 'Channel::Telegram' },
+  { name: 'WhatsApp', channel_type: 'Channel::Whatsapp' },
+  { name: 'TikTok', channel_type: 'Channel::Tiktok' },
+  { name: 'SMS', channel_type: 'Channel::Sms' },
+  { name: 'Twilio SMS', channel_type: 'Channel::TwilioSms' },
+  {
+    name: 'Twilio WhatsApp',
+    channel_type: 'Channel::TwilioSms',
+    medium: 'whatsapp',
+  },
+  {
+    name: 'Voice',
+    channel_type: 'Channel::TwilioSms',
+    voice_enabled: true,
+  },
+  { name: 'Website', channel_type: 'Channel::WebWidget' },
+];
+
+const brandInboxes = inboxes.filter(inbox => useChannelBrandIcon(inbox).value);
+</script>
+
+<template>
+  <Story title="Components/Icons/ChannelIcon">
+    <Variant title="Glyph (default)">
+      <div class="grid grid-cols-4 gap-5">
+        <div
+          v-for="inbox in inboxes"
+          :key="inbox.name"
+          class="flex items-center gap-2"
+        >
+          <ChannelIcon :inbox="inbox" class="size-6 text-n-slate-11" />
+          <span>{{ inbox.name }}</span>
+        </div>
+      </div>
+    </Variant>
+    <Variant title="Brand icon">
+      <div class="grid grid-cols-4 gap-5">
+        <div
+          v-for="inbox in brandInboxes"
+          :key="inbox.name"
+          class="flex items-center gap-2"
+        >
+          <ChannelIcon
+            :inbox="inbox"
+            use-brand-icon
+            class="size-6 text-n-slate-11"
+          />
+          <span>{{ inbox.name }}</span>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/icon/ChannelIcon.vue b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
index aef6a57ec5d..f680d3f0384 100644
--- a/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
+++ b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, toRef } from 'vue';
 import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
-import { useChannelIcon } from './provider';
+import { useChannelIcon, useChannelBrandIcon } from './provider';
 import Icon from 'next/icon/Icon.vue';
 
 const props = defineProps({
@@ -9,17 +9,30 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  // When true, render the full-color brand icon (when one exists for the
+  // channel type) and fall back to the monochrome glyph otherwise.
+  useBrandIcon: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 defineOptions({ inheritAttrs: false });
 
-const channelIcon = useChannelIcon(toRef(props, 'inbox'));
+const inboxRef = toRef(props, 'inbox');
+
 const hasVoiceBadge = computed(() => isVoiceCallEnabled(props.inbox));
+const channelIcon = useChannelIcon(inboxRef);
+const brandIcon = useChannelBrandIcon(inboxRef);
+
+const icon = computed(() =>
+  props.useBrandIcon && brandIcon.value ? brandIcon.value : channelIcon.value
+);
 </script>
 
 <template>
   <span class="relative inline-flex" v-bind="$attrs">
-    <Icon :icon="channelIcon" class="size-full" />
+    <Icon :icon="icon" class="size-full" />
     <span
       v-if="hasVoiceBadge"
       class="absolute top-0 ltr:right-0 rtl:left-0 inline-flex items-center justify-center size-2 rounded-full bg-n-surface-1"
diff --git a/app/javascript/dashboard/components-next/icon/provider.js b/app/javascript/dashboard/components-next/icon/provider.js
index 40fa2da9847..0eb91afd534 100644
--- a/app/javascript/dashboard/components-next/icon/provider.js
+++ b/app/javascript/dashboard/components-next/icon/provider.js
@@ -1,29 +1,49 @@
 import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
 import { computed } from 'vue';
 
+const channelTypeIconMap = {
+  'Channel::Api': 'i-woot-api',
+  'Channel::Email': 'i-woot-mail',
+  'Channel::FacebookPage': 'i-woot-messenger',
+  'Channel::Line': 'i-woot-line',
+  'Channel::Sms': 'i-woot-sms',
+  'Channel::Telegram': 'i-woot-telegram',
+  'Channel::TwilioSms': 'i-woot-sms',
+  'Channel::TwitterProfile': 'i-woot-x',
+  'Channel::WebWidget': 'i-woot-website',
+  'Channel::Whatsapp': 'i-woot-whatsapp',
+  'Channel::Instagram': 'i-woot-instagram',
+  'Channel::Tiktok': 'i-woot-tiktok',
+};
+
+const providerIconMap = {
+  microsoft: 'i-woot-outlook',
+  google: 'i-woot-gmail',
+};
+
+// Full-color brand icons. Most come from the `logos` Iconify set; Instagram,
+// Outlook and Line use custom `woot` glyphs since the `logos` versions are
+// monochrome or missing. Channels not listed here have no brand variant and
+// callers should fall back to the monochrome glyph via useChannelIcon.
+const channelTypeBrandIconMap = {
+  'Channel::FacebookPage': 'i-logos-messenger',
+  'Channel::Line': 'i-woot-line-color',
+  'Channel::Telegram': 'i-logos-telegram',
+  'Channel::Whatsapp': 'i-logos-whatsapp-icon',
+  'Channel::Instagram': 'i-woot-instagram-color',
+  'Channel::Tiktok': 'i-logos-tiktok-icon',
+};
+
+const providerBrandIconMap = {
+  microsoft: 'i-woot-outlook-color',
+  google: 'i-logos-google-gmail',
+};
+
+const resolveInbox = inbox => inbox?.value ?? inbox;
+
 export function useChannelIcon(inbox) {
-  const channelTypeIconMap = {
-    'Channel::Api': 'i-woot-api',
-    'Channel::Email': 'i-woot-mail',
-    'Channel::FacebookPage': 'i-woot-messenger',
-    'Channel::Line': 'i-woot-line',
-    'Channel::Sms': 'i-woot-sms',
-    'Channel::Telegram': 'i-woot-telegram',
-    'Channel::TwilioSms': 'i-woot-sms',
-    'Channel::TwitterProfile': 'i-woot-x',
-    'Channel::WebWidget': 'i-woot-website',
-    'Channel::Whatsapp': 'i-woot-whatsapp',
-    'Channel::Instagram': 'i-woot-instagram',
-    'Channel::Tiktok': 'i-woot-tiktok',
-  };
-
-  const providerIconMap = {
-    microsoft: 'i-woot-outlook',
-    google: 'i-woot-gmail',
-  };
-
   const channelIcon = computed(() => {
-    const inboxDetails = inbox.value || inbox;
+    const inboxDetails = resolveInbox(inbox);
     const type = inboxDetails.channel_type;
     let icon = channelTypeIconMap[type];
 
@@ -58,3 +78,26 @@ export function useChannelIcon(inbox) {
 
   return channelIcon;
 }
+
+export function useChannelBrandIcon(inbox) {
+  return computed(() => {
+    const inboxDetails = resolveInbox(inbox);
+    const type = inboxDetails.channel_type;
+    let icon = channelTypeBrandIconMap[type];
+
+    if (type === INBOX_TYPES.EMAIL && inboxDetails.provider) {
+      if (Object.keys(providerBrandIconMap).includes(inboxDetails.provider)) {
+        icon = providerBrandIconMap[inboxDetails.provider];
+      }
+    }
+
+    if (
+      type === INBOX_TYPES.TWILIO &&
+      inboxDetails.medium === TWILIO_CHANNEL_MEDIUM.WHATSAPP
+    ) {
+      icon = channelTypeBrandIconMap['Channel::Whatsapp'];
+    }
+
+    return icon ?? null;
+  });
+}
diff --git a/theme/icons.js b/theme/icons.js
index 0cf0b719934..2bd218cb0ec 100644
--- a/theme/icons.js
+++ b/theme/icons.js
@@ -314,6 +314,21 @@ export const icons = {
     width: 24,
     height: 24,
   },
+  'outlook-color': {
+    body: `<defs><linearGradient id="outlookColorGradient26052026"><stop style="stop-color:#4de2fb;stop-opacity:1" offset="0"/><stop style="stop-color:#28aee8;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="linearGradient5"><stop style="stop-color:#1582d8;stop-opacity:1" offset="0"/><stop style="stop-color:#0a64cc;stop-opacity:1" offset="1"/></linearGradient><linearGradient href="#linearGradient5" id="linearGradient6" x1="749.08496" y1="212.54776" x2="738.25281" y2="843.01855" gradientUnits="userSpaceOnUse" gradientTransform="translate(-100)"/><filter style="color-interpolation-filters:sRGB" id="filter31" x="-0.082073628" y="-0.083710964" width="1.173352" height="1.1768103"><feFlood result="flood" in="SourceGraphic" flood-opacity="0.380392" flood-color="rgb(0,0,0)"/><feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="22.291021"/><feOffset result="offset" in="blur" dx="6" dy="6"/><feComposite result="comp1" operator="in" in="flood" in2="offset"/><feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1"/></filter><linearGradient href="#outlookColorGradient26052026" id="linearGradient36" x1="1773.6024" y1="939.29254" x2="2272.7681" y2="729.0332" gradientUnits="userSpaceOnUse" gradientTransform="translate(982.3684)"/><filter style="color-interpolation-filters:sRGB" id="filter150" x="-0.055988274" y="-0.098944267" width="1.139125" height="1.2259069"><feFlood result="flood" in="SourceGraphic" flood-opacity="0.258824" flood-color="rgb(0,0,0)"/><feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="21.052631"/><feOffset result="offset" in="blur" dx="24.5" dy="14.307693"/><feComposite result="comp1" operator="out" in="flood" in2="offset"/><feComposite result="comp2" operator="atop" in="comp1" in2="SourceGraphic"/></filter><filter style="color-interpolation-filters:sRGB" id="filter178" x="-0.098988717" y="-0.15388756" width="1.2403472" height="1.3574102"><feFlood result="flood" in="SourceGraphic" flood-opacity="0.258824" flood-color="rgb(0,0,0)"/><feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="31.6"/><feOffset result="offset" in="blur" dx="32.46154" dy="24.461538"/><feComposite result="comp1" operator="out" in="flood" in2="offset"/><feComposite result="comp2" operator="atop" in="comp1" in2="SourceGraphic"/></filter></defs><g transform="translate(-446.11368,-168.81981)"><g transform="matrix(0.7210846,0,0,0.7210846,-938.36876,150.65219)"><path style="fill:#158fda;stroke:none;stroke-width:13.8;stroke-linecap:round;stroke-linejoin:round" d="m 2367.3337,1055.0767 h 732.6061 c 85.7128,0 155.1967,-69.48394 155.1967,-155.19671 V 374.94388 c 0,-45.60025 -22.8376,-87.46848 -62.4463,-110.06358 L 2809.398,46.917857 C 2758.4496,17.853896 2695.916,17.96081 2645.0673,47.198812 L 2210.7257,296.94524 v 601.52342 c 0,86.49223 70.1158,156.60804 156.608,156.60804 z"/><path style="fill:url(#linearGradient36);stroke:none;stroke-width:13.8;stroke-linecap:round;stroke-linejoin:round" d="m 2512.5126,955.90485 c 4.0919,-47.14548 33.902,-88.17006 77.478,-106.6248 0,0 396.8646,-222.88902 593.633,-338.22376 60.9006,-35.69659 71.5129,-108.06656 71.5129,-108.06656 V 898.2074 c 0,86.63652 -70.2328,156.8693 -156.8693,156.8693 h -475.7159 c -56.6639,0 -104.1681,-42.8129 -110.0387,-99.17185 z"/><g transform="translate(1651.4631)"><path d="M 1519.877,251.2168 837.52547,628.32813 973.5841,710.78516 c 50.4883,30.59807 123.685,47.15596 175.1597,18.24806 l 363.2363,-203.9922 c 48.6498,-27.32142 91.6933,-72.27526 91.6933,-150.09714 0,-79.04771 -54.5195,-105.13695 -83.7964,-123.72708 z" style="fill:#01459b;stroke-width:13.8;stroke-linecap:round;stroke-linejoin:round;filter:url(#filter178)"/><path d="m 1079.793,26.322261 c -29.9013,-0.0714 -59.8212,7.48914 -86.73635,22.685551 L 416.91603,374.29883 635.43751,506.73242 1305.6445,128.9082 1166.4199,49.421871 c -26.8423,-15.32484 -56.7257,-23.02816 -86.6269,-23.09961 z" style="fill:#26aee9;stroke-width:13.8;stroke-linecap:round;stroke-linejoin:round"/><path d="M 1305.6445,128.9082 635.4375,506.73242 854.61328,639.5625 1537.8821,262.45117 c -5.424,-4.0613 -12.0375,-7.82732 -18.0051,-11.23437 z" style="fill:#0078d3;stroke-width:13.8;stroke-linecap:round;stroke-linejoin:round;filter:url(#filter150)"/></g><g transform="rotate(-0.9287484,1474.7334,-101601.24)"><path style="fill:url(#linearGradient6);stroke:none;stroke-width:13.8;stroke-linecap:round;stroke-linejoin:round;filter:url(#filter31)" d="m 380.53529,208.22328 537.09931,8.64896 a 52.98464,52.98464 0 0 1 52.1209,54.03844 l -10.4693,522.88117 a 54.6032,54.6032 0 0 1 -55.4714,53.50306 l -531.12401,-8.55273 a 55.65563,55.65563 0 0 1 -54.74837,-56.76254 l 10.48154,-523.49416 a 51.2957,51.2957 0 0 1 52.11133,-50.2622 z"/><path fill="#ffffff" d="m 490.16342,435.72863 c 13.25707,-27.52059 34.65526,-50.55134 61.4478,-66.13255 29.67095,-16.55143 63.4538,-24.80264 97.62945,-23.84585 31.67488,-0.66941 62.93009,7.1541 90.35178,22.61579 25.78231,14.98096 46.54721,36.93136 59.77465,63.18764 14.40512,28.93194 21.58426,60.77252 20.95235,92.92329 0.69807,33.60039 -6.68849,66.89327 -21.56841,97.21171 -13.54236,27.19494 -34.96606,49.92756 -61.62353,65.38926 -6.0643,3.39337 -12.30713,6.42823 -18.69446,9.09614 -23.60846,9.861 -49.19125,14.70928 -75.03188,14.12058 -32.35158,0.76072 -64.29589,-7.15141 -92.34744,-22.87362 -26.00557,-15.00042 -47.03096,-36.97566 -60.56713,-63.30246 -14.49056,-28.51363 -21.75515,-59.99567 -21.18663,-91.80803 -0.60366,-33.31437 6.52861,-66.33062 20.86345,-96.5819 z m 65.49701,155.25283 c 7.06819,17.39811 19.05454,32.48715 34.56775,43.51674 15.80126,10.76035 34.72211,16.31173 53.99372,15.83973 20.52372,0.79094 40.75387,-4.94979 57.6329,-16.35472 15.31682,-10.99467 26.98825,-26.12467 33.56993,-43.51674 7.3576,-19.42313 10.98851,-39.99846 10.71081,-60.69999 0.2274,-20.89962 -3.18575,-41.68509 -10.09476,-61.47214 -6.10205,-17.86475 -17.39723,-33.61785 -32.51352,-45.3464 -16.4559,-11.94474 -36.63162,-18.00306 -57.13398,-17.15505 -19.68921,-0.49685 -39.03386,5.09818 -55.25548,15.98274 -15.77575,11.07592 -27.98953,26.29859 -35.21345,43.88804 -16.02521,40.31873 -16.10859,84.99973 -0.23498,125.37485 z" style="fill:#ffffff;stroke-width:0.680212"/></g></g></g>`,
+    width: 1040.8409,
+    height: 742.6319,
+  },
+  'instagram-color': {
+    body: `<g fill="none"><rect width="256" height="256" fill="url(#SVGKdMMobCR)" rx="60"/><rect width="256" height="256" fill="url(#SVGqYUiQbXV)" rx="60"/><path fill="#fff" d="M128.009 28c-27.158 0-30.567.119-41.233.604c-10.646.488-17.913 2.173-24.271 4.646c-6.578 2.554-12.157 5.971-17.715 11.531c-5.563 5.559-8.98 11.138-11.542 17.713c-2.48 6.36-4.167 13.63-4.646 24.271c-.477 10.667-.602 14.077-.602 41.236s.12 30.557.604 41.223c.49 10.646 2.175 17.913 4.646 24.271c2.556 6.578 5.973 12.157 11.533 17.715c5.557 5.563 11.136 8.988 17.709 11.542c6.363 2.473 13.631 4.158 24.275 4.646c10.667.485 14.073.604 41.23.604c27.161 0 30.559-.119 41.225-.604c10.646-.488 17.921-2.173 24.284-4.646c6.575-2.554 12.146-5.979 17.702-11.542c5.563-5.558 8.979-11.137 11.542-17.712c2.458-6.361 4.146-13.63 4.646-24.272c.479-10.666.604-14.066.604-41.225s-.125-30.567-.604-41.234c-.5-10.646-2.188-17.912-4.646-24.27c-2.563-6.578-5.979-12.157-11.542-17.716c-5.562-5.562-11.125-8.979-17.708-11.53c-6.375-2.474-13.646-4.16-24.292-4.647c-10.667-.485-14.063-.604-41.23-.604zm-8.971 18.021c2.663-.004 5.634 0 8.971 0c26.701 0 29.865.096 40.409.575c9.75.446 15.042 2.075 18.567 3.444c4.667 1.812 7.994 3.979 11.492 7.48c3.5 3.5 5.666 6.833 7.483 11.5c1.369 3.52 3 8.812 3.444 18.562c.479 10.542.583 13.708.583 40.396s-.104 29.855-.583 40.396c-.446 9.75-2.075 15.042-3.444 18.563c-1.812 4.667-3.983 7.99-7.483 11.488c-3.5 3.5-6.823 5.666-11.492 7.479c-3.521 1.375-8.817 3-18.567 3.446c-10.542.479-13.708.583-40.409.583c-26.702 0-29.867-.104-40.408-.583c-9.75-.45-15.042-2.079-18.57-3.448c-4.666-1.813-8-3.979-11.5-7.479s-5.666-6.825-7.483-11.494c-1.369-3.521-3-8.813-3.444-18.563c-.479-10.542-.575-13.708-.575-40.413s.096-29.854.575-40.396c.446-9.75 2.075-15.042 3.444-18.567c1.813-4.667 3.983-8 7.484-11.5s6.833-5.667 11.5-7.483c3.525-1.375 8.819-3 18.569-3.448c9.225-.417 12.8-.542 31.437-.563zm62.351 16.604c-6.625 0-12 5.37-12 11.996c0 6.625 5.375 12 12 12s12-5.375 12-12s-5.375-12-12-12zm-53.38 14.021c-28.36 0-51.354 22.994-51.354 51.355s22.994 51.344 51.354 51.344c28.361 0 51.347-22.983 51.347-51.344c0-28.36-22.988-51.355-51.349-51.355zm0 18.021c18.409 0 33.334 14.923 33.334 33.334c0 18.409-14.925 33.334-33.334 33.334s-33.333-14.925-33.333-33.334c0-18.411 14.923-33.334 33.333-33.334"/><defs><radialGradient id="SVGKdMMobCR" cx="0" cy="0" r="1" gradientTransform="matrix(0 -253.715 235.975 0 68 275.717)" gradientUnits="userSpaceOnUse"><stop stop-color="#fd5"/><stop offset=".1" stop-color="#fd5"/><stop offset=".5" stop-color="#ff543e"/><stop offset="1" stop-color="#c837ab"/></radialGradient><radialGradient id="SVGqYUiQbXV" cx="0" cy="0" r="1" gradientTransform="rotate(78.68 -32.69 -16.937)scale(113.412 467.488)" gradientUnits="userSpaceOnUse"><stop stop-color="#3771c8"/><stop offset=".128" stop-color="#3771c8"/><stop offset="1" stop-color="#60f" stop-opacity="0"/></radialGradient></defs></g>`,
+    width: 256,
+    height: 256,
+  },
+  'line-color': {
+    body: `<path d="M330.479 426.667H96.1867C43.0627 426.667 0 383.601 0 330.479V96.188C0 43.0653 43.0627 0 96.1867 0H330.479C383.603 0 426.667 43.0653 426.667 96.188V330.479C426.667 383.601 383.603 426.667 330.479 426.667Z" fill="#06C755"/><path d="M355.541 193.233C355.541 129.58 291.729 77.793 213.291 77.793C134.857 77.793 71.0386 129.58 71.0386 193.233C71.0386 250.297 121.645 298.089 190.007 307.122C194.637 308.124 200.944 310.178 202.537 314.138C203.972 317.733 203.476 323.368 202.999 327C202.999 327 201.329 337.038 200.967 339.178C200.347 342.772 198.108 353.244 213.291 346.848C228.472 340.449 295.211 298.608 325.056 264.26H325.049C345.664 241.65 355.541 218.706 355.541 193.233Z" fill="white"/><path d="M308.217 229.987H268.305H268.252C266.752 229.987 265.536 228.772 265.536 227.271V227.228V227.224V165.252V165.248V165.19C265.536 163.69 266.752 162.474 268.252 162.474H268.305H308.217C309.71 162.474 310.933 163.695 310.933 165.19V175.278C310.933 176.778 309.717 177.994 308.217 177.994H281.057V188.47H308.217C309.71 188.47 310.933 189.692 310.933 191.186V201.275C310.933 202.775 309.717 203.991 308.217 203.991H281.057V214.467H308.217C309.71 214.467 310.933 215.688 310.933 217.182V227.271C310.933 228.772 309.717 229.987 308.217 229.987Z" fill="#06C755"/><path d="M160.385 229.987C161.885 229.987 163.101 228.772 163.101 227.271V217.182C163.101 215.688 161.878 214.467 160.385 214.467H133.223V165.19C133.223 163.695 132.002 162.474 130.509 162.474H120.419C118.919 162.474 117.703 163.69 117.703 165.19V227.271C117.703 228.772 118.919 229.987 120.419 229.987H160.385Z" fill="#06C755"/><path d="M184.443 162.473H174.357C172.857 162.473 171.639 163.69 171.639 165.189V227.271C171.639 228.771 172.857 229.987 174.357 229.987H184.443C185.945 229.987 187.159 228.771 187.159 227.271V165.189C187.159 163.69 185.945 162.473 184.443 162.473Z" fill="#06C755"/><path d="M253.122 162.473H243.034C241.534 162.473 240.318 163.69 240.318 165.189V202.062L211.914 163.703C211.847 163.605 211.772 163.511 211.695 163.423C211.69 163.417 211.684 163.41 211.678 163.403C211.626 163.345 211.571 163.287 211.514 163.234L211.463 163.187C211.415 163.145 211.367 163.103 211.316 163.062L211.242 163.007C211.196 162.974 211.148 162.942 211.098 162.909C211.071 162.891 211.043 162.875 211.015 162.859C210.966 162.83 210.916 162.802 210.866 162.777C210.836 162.762 210.808 162.747 210.779 162.734C210.727 162.71 210.674 162.687 210.62 162.666C210.591 162.655 210.562 162.645 210.532 162.634C210.478 162.614 210.423 162.597 210.367 162.581C210.335 162.571 210.303 162.563 210.27 162.555C210.216 162.543 210.163 162.531 210.108 162.521C210.071 162.514 210.032 162.509 209.994 162.502C209.944 162.497 209.896 162.49 209.847 162.486C209.799 162.481 209.751 162.479 209.703 162.478C209.671 162.477 209.64 162.473 209.608 162.473H199.576C198.076 162.473 196.86 163.69 196.86 165.189V227.271C196.86 228.771 198.076 229.987 199.576 229.987H209.664C211.164 229.987 212.38 228.771 212.38 227.271V190.41L240.82 228.817C241.016 229.094 241.256 229.321 241.522 229.501C241.532 229.507 241.542 229.515 241.552 229.522C241.607 229.559 241.666 229.594 241.723 229.626C241.75 229.641 241.775 229.657 241.803 229.669C241.846 229.693 241.888 229.714 241.934 229.733C241.979 229.754 242.022 229.773 242.067 229.79C242.095 229.802 242.124 229.813 242.152 229.822C242.214 229.843 242.276 229.865 242.34 229.882C242.354 229.886 242.367 229.89 242.379 229.891C242.606 229.951 242.843 229.987 243.09 229.987H253.122C254.622 229.987 255.838 228.771 255.838 227.271V165.189C255.838 163.69 254.622 162.473 253.122 162.473Z" fill="#06C755"/>`,
+    width: 427,
+    height: 427,
+  },
   voice: {
     body: `<g fill="none" stroke="currentColor"><path d="M12.75 4.50031C14.5402 4.50031 16.2571 5.21146 17.523 6.47733C18.7888 7.7432 19.5 9.46009 19.5 11.2503" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.75 7.5C13.7446 7.5 14.6984 7.89509 15.4017 8.59835C16.1049 9.30161 16.5 10.2554 16.5 11.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.374 15.4263C13.5289 15.4974 13.7034 15.5137 13.8688 15.4724C14.0341 15.4311 14.1805 15.3347 14.2837 15.1991L14.55 14.8503C14.6897 14.664 14.8709 14.5128 15.0792 14.4087C15.2875 14.3045 15.5171 14.2503 15.75 14.2503H18C18.3978 14.2503 18.7794 14.4083 19.0607 14.6896C19.342 14.9709 19.5 15.3525 19.5 15.7503V18.0003C19.5 18.3981 19.342 18.7797 19.0607 19.061C18.7794 19.3423 18.3978 19.5003 18 19.5003C14.4196 19.5003 10.9858 18.078 8.45406 15.5462C5.92232 13.0145 4.5 9.58073 4.5 6.00031C4.5 5.60248 4.65804 5.22095 4.93934 4.93964C5.22064 4.65834 5.60218 4.50031 6 4.50031H8.25C8.64782 4.50031 9.02935 4.65834 9.31066 4.93964C9.59196 5.22095 9.75 5.60248 9.75 6.00031V8.2503C9.75 8.48317 9.69578 8.71284 9.59164 8.92113C9.4875 9.12941 9.33629 9.31058 9.15 9.45031L8.799 9.71355C8.66131 9.81869 8.56426 9.96824 8.52434 10.1368C8.48442 10.3054 8.50409 10.4826 8.58 10.6383C9.60501 12.7202 11.2908 14.4039 13.374 15.4263Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g>`,
     width: 24,