Add embeddable chat widget for QP assistants

[neuromechanist]

Summary

Adds a standalone, embeddable chat widget that can be dropped into any website to provide AI chat functionality using QP backend.

Features

• Standalone vanilla JavaScript and CSS (no frameworks required)
• Configurable for any QP assistant
• Markdown rendering (headers, lists, tables, code blocks)
• Streaming responses
• Suggested questions
• Resizable chat window
• Mobile responsive
• Dark mode support (auto-detects data-bs-theme, data-theme, or .dark class)
• Persistent chat history via localStorage

Files Added

• embed/qp-chat-widget.js - Main widget code
• embed/qp-chat-widget.css - Widget styles
• embed/README.md - Usage documentation
• embed/examples/basic.html - Basic usage example:

Usage Example

<link rel="stylesheet" href="qp-chat-widget.css">
<script src="qp-chat-widget.js"></script>
<script>
  QPChat.init({
    title: 'My Assistant',
    app: 'my-assistant',
    systemPrompt: 'You are a helpful assistant.',
    suggestedQuestions: ['What can you help with?']
  });
</script>

Real-World Usage

This widget is already deployed on https://www.hedtags.org/ as the HED Assistant chat widget.

Test Plan

• Test basic chat functionality
• Test markdown rendering (headers, code blocks, tables)
• Test dark mode switching
• Test mobile responsiveness
• Test resize functionality

[yarikoptic]

@neuromechanist I don't see configuration option to point to router to use more advanced model, like could be seen e.g. on
https://bids-specification--2254.org.readthedocs.build/en/2254/

screenshot

[neuromechanist]

Yes, that with BYOK could be an easy add.

Chat is meant to be simple, not more complicated than a regular search of the specifications.

IMO,changing the model and adding key can add significant hurdles, to go get an open router key to change the model (aside from experimentation). Also it is only good for one session as the key is not sticky.

[yarikoptic]

WDYT @magland ? I would love to arrive at some easily pluggable one so we start using it for ReproNim

[magland]

I must have missed this PR. Should I merge?

[yarikoptic]

Only if you like it I guess or may be you see how to improve or should we build on top of that? I would have liked to

• have documentation on how to alter positioning so we could ensure it not covering some already existing elements of UI
• per above get option for paid models
• per @bendichter somewhere - to have an option to open it "full screen" instead of a tiny thing in the corner

[yarikoptic]

and there is also

• Add pop-out button for chat window #25

crafted by @copilot for @bendichter which is at large trying to achieve the same, and Ben mentions the need for some way ideally to make such assistant to persist across pages... is there an easy way for that at the session level?

[bendichter]

@yarikoptic our solution for this was to just open a new window. It doesn't look as nice but it's much more functional.

[neuromechanist]

The current implementation has resizing:

Persistence requires session tokens which I don't think it is available here yet.

[yarikoptic]

@neuromechanist how feasible would be to add some icon (arrow, window) which would just open that dialog (ideally with prior history) in a new window "full screen"?

[neuromechanist]

Done,
The chat uses localStorage for persistence, so even different sessions of the same website will see the history (until reset is pushed).
So, a pop-out window can work quite easily.

To test:

cd qp/embed && bunx serve -p 8888
open "http://localhost:8888/examples/basic.html"