feat: try

app/javascript/entrypoints/ui.js

@@ -1,34 +1,25 @@
-import { h, defineCustomElement } from 'vue';
+import { defineCustomElement } from 'vue';
 
-// Import dashboard styles
 import '../dashboard/assets/scss/app.scss';
 import 'vue-multiselect/dist/vue-multiselect.css';
-// Import floating-vue styles from dashboard.js
 import 'floating-vue/dist/style.css';
 
-const ChatButton = {
-  name: 'ChatButton',
-  props: {
-    label: {
-      type: String,
-      default: 'Click me',
-    },
-  },
-  render() {
-    return h(
-      'button',
-      {
-        class: 'cha-button',
-        onClick: this.handleClick,
-      },
-      this.label
-    );
-  },
-  methods: {
-    handleClick() {
-      // console.log('Button clicked');
-    },
-  },
-};
+import store from 'dashboard/store';
+import constants from 'dashboard/constants/globals';
+import axios from 'axios';
+import createAxios from 'dashboard/helper/APIHelper';
+import commonHelpers from 'dashboard/helper/commons';
+
+import ChatButton from '../ui/ChatButton.vue';
+
+commonHelpers();
+window.WootConstants = constants;
+window.axios = createAxios(axios);
 
 export const buttonElement = defineCustomElement(ChatButton);
+
+// eslint-disable-next-line no-underscore-dangle
+window.__CHATWOOT_STORE__ = store;
+customElements.define('chat-button', buttonElement);
+
+export { store, ChatButton };

app/javascript/ui/ChatButton.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { computed } from 'vue';
+
+defineProps({
+  label: {
+    type: String,
+    default: 'Click me',
+  },
+});
+
+// eslint-disable-next-line no-underscore-dangle
+const store = window.__CHATWOOT_STORE__;
+
+// Example of accessing store state
+const currentUser = computed(() => {
+  try {
+    return store.getters.getCurrentUser;
+  } catch (e) {
+    return null;
+  }
+});
+
+const handleClick = () => {};
+</script>
+
+<template>
+  <button class="cha-button" @click="handleClick">
+    {{ currentUser }} {{ label }}
+  </button>
+</template>
+
+<style scoped>
+.cha-button {
+  @apply bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md;
+}
+</style>

app/javascript/ui/usage.md

@@ -0,0 +1,46 @@
+# Chatwoot UI Components Usage Guide
+
+This document explains how to use the Chatwoot UI components library, which can be used both as Web Components (Custom Elements) and as Vue components.
+
+## Installation
+
+```bash
+npm install @chatwoot/ui
+# or
+yarn add @chatwoot/ui
+# or
+pnpm add @chatwoot/ui
+```
+
+## Usage
+
+### As Web Components (Custom Elements)
+
+Web Components can be used in any HTML page or application, regardless of the framework.
+
+```html
+<!-- Include the built JS file -->
+<script src="https://unpkg.com/@chatwoot/ui/dist/ui.js"></script>
+
+<!-- Use the custom element anywhere in your HTML -->
+<chat-button label="Click me"></chat-button>
+```
+
+When the script loads, it automatically registers all custom elements with the browser, making them immediately available for use.
+
+#### Accessing the Store in Web Components
+
+The components have access to a global store instance. When using Web Components, the store is available through `window.__CHATWOOT_STORE__`.
+
+You can interact with the store from your JavaScript:
+
+```javascript
+// Access the store
+const store = window.__CHATWOOT_STORE__;
+
+// Check store state
+console.log(store.state.someData);
+
+// Dispatch actions
+store.dispatch('someAction', { data: 'example' });
+```