From fc119d14d9d035b0565a1bfa3db590c5c8e1611d Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 8 May 2025 09:06:49 +0530
Subject: [PATCH] feat: styles are working

---
 app/javascript/entrypoints/ui.js | 10 ++++++----
 public/test-components.html      |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/javascript/entrypoints/ui.js b/app/javascript/entrypoints/ui.js
index 4ec20d4c1..cf3ce529b 100644
--- a/app/javascript/entrypoints/ui.js
+++ b/app/javascript/entrypoints/ui.js
@@ -4,6 +4,8 @@ import { createI18n } from 'vue-i18n';
 import '../dashboard/assets/scss/app.scss';
 import 'vue-multiselect/dist/vue-multiselect.css';
 import 'floating-vue/dist/style.css';
+// Import Tailwind styles - we'll use these in the shadow DOM
+import tailwindStyles from '../dashboard/assets/scss/_woot.scss?inline';
 
 import store from 'dashboard/store';
 import constants from 'dashboard/constants/globals';
@@ -12,7 +14,7 @@ import createAxios from 'dashboard/helper/APIHelper';
 import commonHelpers from 'dashboard/helper/commons';
 import i18nMessages from 'dashboard/i18n';
 
-import ChatButton from '../ui/ChatButton.vue';
+import WootButton from '../dashboard/components-next/button/Button.vue';
 import WootInput from '../dashboard/components-next/input/Input.vue';
 import WootMessage from '../dashboard/components-next/message/Message.vue';
 
@@ -27,13 +29,15 @@ const ceOptions = {
     app.use(i18n);
     app.use(store);
   },
+  // Include tailwind styles in the shadow DOM of each custom element
+  styles: [tailwindStyles],
 };
 
 commonHelpers();
 window.WootConstants = constants;
 window.axios = createAxios(axios);
 
-export const buttonElement = defineCustomElement(ChatButton, ceOptions);
+export const buttonElement = defineCustomElement(WootButton, ceOptions);
 export const inputElement = defineCustomElement(WootInput, ceOptions);
 export const messageElement = defineCustomElement(WootMessage, ceOptions);
 
@@ -42,5 +46,3 @@ window.__CHATWOOT_STORE__ = store;
 customElements.define('woot-button', buttonElement);
 customElements.define('woot-input', inputElement);
 customElements.define('woot-message', messageElement);
-
-export { store, ChatButton };
diff --git a/public/test-components.html b/public/test-components.html
index dc08f8d1e..8fb134619 100644
--- a/public/test-components.html
+++ b/public/test-components.html
@@ -10,7 +10,7 @@
     <h1>Web Components Test</h1>
 
     <h2>Button Component</h2>
-    <woot-button>Click Me</woot-button>
+    <woot-button ruby solid label="Click Me"></woot-button>
 
     <h2>Input Component</h2>
     <woot-input placeholder="Type something..."></woot-input>