feat: AI Chat UI #25
feat: AI Chat UI #25
Conversation
ChristopherChudzicki
force-pushed
the
cc/chatbot
branch
from
7eb6cdb to
405bd18
Compare
|
|
||
| <Controls /> | ||
|
|
||
| See <a href={gitLink("src/components/AiChat/types.ts")}>AiChat/types.ts</a> for all Typescript interface definitions. |
There was a problem hiding this comment.
There isn't a great way with storybook docs to embed Typescript interfaces (e.g., for complex props). A direct link to the types in github seems best compromise for now.
related:
ChristopherChudzicki
force-pushed
the
cc/chatbot
branch
from
b33e341 to
cec8a5c
Compare
.storybook/main.ts
Outdated
| getAbsolutePath("@storybook/addon-links"), | ||
| getAbsolutePath("@storybook/addon-essentials"), | ||
| getAbsolutePath("@storybook/addon-interactions"), | ||
| getAbsolutePath("@storybook/addon-webpack5-compiler-swc"), |
There was a problem hiding this comment.
works around a bug in Storybook that occurs when you try and run it on Node 22.12.0, detailed here: nodejs/node#56127
ChristopherChudzicki
force-pushed
the
cc/chatbot
branch
from
cec8a5c to
82253cc
Compare
ChristopherChudzicki
added
the
Needs Review
ChristopherChudzicki
force-pushed
the
cc/chatbot
branch
from
82253cc to
0ad62da
Compare
There was a problem hiding this comment.
Works really well. Good clean chat component. Not much to complain about here! Nice separation of the ScrollSnap and SrAnnouncer (can we rename this ScreenReaderAnnouncer?). Vercel's ai package seems a sensible choice (how did they secure that package name?!). Interested to see what server side support for native fetch ReadableStream will look like if we're intending to interface the LLMs via our APIs; is the plan to write a custom provider?
Two feature requests (reasonably out of scope for this PR):
-
A stop button will be handy (LLMs are chatty!). Often the send message button is replaced by a stop button while the reply is mid stream.
-
It would be good to also support starter messages (perhaps renamed suggestions) after each response, ie. the LLM is also prompted for new suggestions based on the most recent messages.
| /** | ||
| * Tolerance within which scroll will be considered "at the bottom" of the element. | ||
| */ | ||
| threshold?: number |
There was a problem hiding this comment.
This wasn't working for me as expected, ie. set a high number and it does not scroll when content is added while the scroll is near the bottom within the threshold.
It makes sense according to the description and the !atBottom condition - it will not scroll within the threshold as it is already considered at the bottom, though I interpret threshold as how far away from the bottom for it still to be treated as near enough to auto scroll.
There was a problem hiding this comment.
This should be fixed now. I believe threshold was working fine initially, but not quite right if you updated its value.
ChristopherChudzicki
force-pushed
the
cc/chatbot
branch
from
0ad62da to
cd8fc91
Compare
As long as our chat API streams regular text, I don't think we'll need one, but worth reading up on. |
|
🎉 This PR is included in version 1.2.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
What are the relevant tickets?
Closes https://github.com/mitodl/hq/issues/6238
Description (What does it do?)
Adds a component for talking to, and displaying messages from, an AI chat API.
Screenshots (if appropriate):
How can this be tested?
yarn install, andyarn start.AiChat:AiChatcomponent..Additional Context
The AiChat screenreader functionality is modeled after how https://chatgpt.com/ behaves. It's not ideal—both the implementation here and https://chatgpt.com/ read the raw message content, which is markdown. So you'll hear stuff like "star star" and URLs get red aloud. This should be improved, but this is a decent start.