[site-ai-chat] Create a new floating button that opens an embedded vercel endpoint

djfusco commented 3 months ago

On any given page in HAX, the user can click this button that opens a small window on the current page. When the button is clicked again, the small window disappears (or you can click something in the upper right corner of this small window to minimize).

This chatgpt but a small pop up window which is answering questions about the course you are in

The window itself should display a form that simply asks the following:

What would you like to learn about today?
A search box to enter text, multiline tho limit to like 200 characters or somethign reasonable
A button to "Find answer"

This then has 2 or 3 suggestions that they can click which autopopulate the prompt box. Clicking this linked text just adds that phrase to the search box and then automatically clicks Find answer (so it's not really a link, but we make the user think it is visually)

submitting data to show result

we take the form data and POST it via fetch to a vercel endpoint
As a PoC, you can use https://complete-axios.vercel.app/ but the important aspect is the end points at play here.
source code if interested: https://github.com/djfusco/complete-axios
This data comes back from the endpoint and then we need to visualize the response maybe in a paragraph of text below the question asked.

UI requirements

use simple-cta for the find answer button
Add the rpg-character so it's like he's the one talking to you / helping you
When the toast / prompt is NOT open, it's just the rpg character which when clicked, slides up the prompt box
Clicking him again should hide it back away / have an x to close this prompt
Make sure the input area is not visible / disabled when the prompt is not allowed to be interacted with (accessibility concern)
Make sure that things are spaced nicely using DDD CSS variables

Support both LLMs

[x] Ask Robin (AWS backend)
[x] Ask Alfred (Vercel backend)

btopro commented 2 months ago

I have a student for summer that will be assigned this

btopro commented 2 months ago

https://github.com/elmsln/lrnwebcomponents/blob/master/elements/haxcms-elements/lib/ui-components/magic/site-ai-chat.js

haxtheweb / issues