From 1fe5a3c8fb697aa6b0d650251334919d869a1a8d Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 16 Oct 2025 13:19:16 +0530
Subject: [PATCH] feat: move styles to shadow dom

---
 .../src/vue-components/ChatwootMessageListWebComponent.vue   | 4 ----
 .../src/vue-components/registerWebComponents.js              | 5 ++++-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue b/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
index 23659139d..d69378b90 100644
--- a/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
+++ b/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
@@ -7,10 +7,6 @@ import MessageList from '../../../ui/MessageList.vue';
 </template>
 
 <style>
-@import '../../../dashboard/assets/scss/app.scss';
-@import 'vue-multiselect/dist/vue-multiselect.css';
-@import 'floating-vue/dist/style.css';
-
 .file-uploads {
   overflow: hidden;
   position: relative;
diff --git a/app/javascript/react-components/src/vue-components/registerWebComponents.js b/app/javascript/react-components/src/vue-components/registerWebComponents.js
index 874af8b9a..5b0efd382 100644
--- a/app/javascript/react-components/src/vue-components/registerWebComponents.js
+++ b/app/javascript/react-components/src/vue-components/registerWebComponents.js
@@ -1,6 +1,8 @@
 import { defineCustomElement } from 'vue';
 import ChatwootMessageListWebComponent from './ChatwootMessageListWebComponent.vue';
-import '../../../dashboard/assets/scss/app.scss';
+import chatwootStyles from '../../../dashboard/assets/scss/app.scss?inline';
+import multiselectStyles from 'vue-multiselect/dist/vue-multiselect.css?inline';
+import floatingVueStyles from 'floating-vue/dist/style.css?inline';
 import en from '../../../dashboard/i18n/locale/en';
 import store from '../../../dashboard/store';
 import vueActionCable from '../../../dashboard/helper/actionCable';
@@ -31,6 +33,7 @@ const ceOptions = {
     // eslint-disable-next-line no-underscore-dangle
     vueActionCable.init(store, window.__PUBSUB_TOKEN__);
   },
+  styles: [chatwootStyles, multiselectStyles, floatingVueStyles],
 };
 
 // Convert Vue components to Web Components