OvidijusParsiunas / deep-chat

Fully customizable AI chatbot component for your website
https://deepchat.dev
MIT License
1.26k stars 170 forks source link

Unable to integrate other third part table plugins like vue-good-table-next #202

Open rajeshwarpatlolla opened 1 month ago

rajeshwarpatlolla commented 1 month ago

When we tried to integrate the active-table, it displays correctly, but the sorting feature doesn't work. We also attempted to use another third-party package, vue-good-table-next, but it doesn't display the table at all.

If we copy and paste the same code outside the deep chat package, the table shows up properly.

Are there any other changes required to get the table working?

OvidijusParsiunas commented 1 month ago

Hi @rajeshwarpatlolla.

The likely reason why ActiveTable doesn't fully work is because it attempts to use certain window/document properties, and because it is inside a shadow DOM some values are likely being returned incorrectly. Unfortunately due to my currently limited time I do not have capacity to fix ActiveTable for this as there are multiple features impacted by this.

The reason why other table libraries do not display in Deep Chat is likely because they are not web components (not a custom element or a shadow DOM element). If you cannot find a library that is one of these, I would recommend creating your own shadow element and then trying to place it inside Deep Chat. Here is an example.

This is unfortunately as much as I can help in this matter. Let me know if you have any other issues. Thankyou!

rajeshwarpatlolla commented 1 month ago

@OvidijusParsiunas thanks for the quick response. Based on your response i tried something as mentioned below.

I created a sample shadow dom component.

import vueCustomElement from 'vue-custom-element';

const app = createApp(App).use(router).use(createPinia()).use(vueCustomElement);

app.component('my-element', MyElement);
app.mount('my-element', {
  shadow: true,
});
Screenshot 2024-05-23 at 8 55 58 PM

Any idea why it is not rendering inside deep chat?

OvidijusParsiunas commented 1 month ago

Hi, I'm a little bit confused, is Hello Shadow DOM! a different web component to the Here is a simple examples:?

rajeshwarpatlolla commented 1 month ago

@OvidijusParsiunas my-element is a custom component, which has text Hello Shadow DOM!. I am using same my-element component inside deep-chat and out side deep-chat. Out side deep-chat it is rendering properly and showing the component's content Hello Shadow DOM! But inside deep-chat it is not showing the component's content.

let me know if you have any queries.

rajeshwarpatlolla commented 3 weeks ago

@OvidijusParsiunas did u understand my response? If not please do let me know.