Implement a proper javascript framework based Chatbot.

In the past I experimented with this simple js one just some html to make it look nice.

I really like the idea of using a framework, a tool that is dedicated to this.
it will be better qua accessibility, usability, it'll probably have more options too.
It might be a little harder to start working on it as a developer, another tool with it's quirks (sometimes) and limitations.

From what I read going developer focussed with deepchat and the fact it's already there seems to pull me towards that one first.
(the styling might need a little work to fit in Drupal but that can be done later.

One question: Would they require a js server or something to setup websocket connections? How would that work (or would it use rest )?
Another question: how would that work cross window?
Is there one session (and all windows in the session are updated) - where I think you want to go at some point (or not?)
or is it one session per browser window (and you can have X windows/sessions open) - the way it is now?

I had a quick look into the Deep Chat docs - currently I am using an endpoint via POST but there would also be web sockets available (Connect Docs). For moving between pages it might work to set the chat history again at the onComponentRender() event (onComponentRender docs).

So, I did a first sweep of Deep Chat and this is my initial finidings:

Pros:
1. Integration is super simple and its highly flexible since it simply a bundle.
2. It has CDN endpoint, so we don't have to require the user to take any measures to build it, unless they want to serve it locally.
3. It has MIT license, so usable.
4. File support, including webcam and microphone.
5. Speech to text and Text to speech support.
6. Logic for audio level changed, so you can at least on phones have natural conversations without having to press buttons.
7. Websocket support if we want to put a middle layer for realtime api for instance (This will not work for Drupal CMS)
8. Custom Elements - you can have buttons or custom styled messages for specific interactions.
9. Can be built into React, meaning it can most likely also work within Experience Builder (though there are workarounds for that for even jQuery).
10. WebLLM support.
11. Styling via Javascript make block styling easy. Also prepared themes.
12. Code highlighting support (great for the details field we have).
13. Very small size, meaning it just pops up, even on first usage.
14. If we want middle layers they already have many solutions, specifically NextJS that is popular for decoupling Drupal.
15. Since it can be bundled, we can probably fairly easily also offer it as a JS widget to put on other none Drupal websites.
16. It focuses on being a frontend solution to plugin to backends, rather then trying to solve everything. Just what we need.
17. Has all the events and interceptors we want to extend it.

Cons:
1. No support for threads, you only have one chatbot as far I can find. Meaning if we want to do as OpenAI, that you can have multiple histories in a tab or even multiple assistants that you can switch between we would have to find a solution.
2. Web component, so won't work on really old browsers and won't offer any SEO for the text within the chatbot, but I think that is just being petty :) (I had to have more then 1 negative :D )

I don't have anything to compare to as of yet, but its a lot easier to manage than some custom JQuery solution. I think that this solves all the initial ideas we have, except for threading.

I took a look at Assistant UI as well, and as far as I can check from documentation decoupling frontend from server could be possible (see https://www.assistant-ui.com/docs/runtimes/custom-rest), so it would still be a candidate if we want to look into it more. But it would be a lot harder to implement and it has to be bundled with React.

We will try with Deepchat and do it on the foundation of Rolands work. I will work on this ticket with it.

Action issue here: https://www.drupal.org/project/ai/issues/3492895 ✨ Implement Deepchat Active