Recommendation bot UI #2019
Recommendation bot UI #2019
Conversation
|
Various attempts to install from the smoot-design branch on CI have failed (see commits). Any insight is welcome. In the meantime the remainder is good for review. The corresponding PR is here: mitodl/smoot-design#49. |
jonkafton
force-pushed
the
jk/6648-recommendation-chat
branch
from
7a94034 to
f3a9821
Compare
| }, | ||
| { | ||
| content: | ||
| "I am curious about AI applications for business. Do you have any free courses about that?", |
There was a problem hiding this comment.
This one gave me no results, asked for followup. Maybe we should change it. (non-blocking)
| ref, | ||
| }: { | ||
| onClose?: () => void | ||
| ref?: React.Ref<{ append: (message: Omit<AiChatMessage, "id">) => void }> |
There was a problem hiding this comment.
i would expect
| ref?: React.Ref<{ append: (message: Omit<AiChatMessage, "id">) => void }> | |
| ref?: Pick<AiChatProps, "ref"> |
to work
There was a problem hiding this comment.
I expected same, but was getting
Type 'Pick<AiChatProps, "ref"> | undefined' is not assignable to type 'Ref<{ append: (message: Omit<AiChatMessage, "id">) => void; }> | undefined'.
Type 'Pick<AiChatProps, "ref">' is not assignable to type 'Ref<{ append: (message: Omit<AiChatMessage, "id">) => void; }> | undefined'
| role="button" | ||
| tabIndex={index} |
There was a problem hiding this comment.
Request: Could we use real buttons unless there's a good reason not to?
Real buttons can be pressed with spacebar or enter.
There was a problem hiding this comment.
Those do submit for me with space or enter (Chrome). Changed in any case as they didn't need much style override.
| <AdornmentButton | ||
| aria-label="Send" | ||
| onClick={() => setShowEntryScreen(false)} | ||
| disabled={!initialPrompt} |
There was a problem hiding this comment.
This maybe is a smoot-design issue to be fixed elsewhere, but I'm noticing hover effect even when disabled.
There was a problem hiding this comment.
Fixed for svgs in mitodl/smoot-design#49, but here it was a specificity issue as we're coloring above. Fixed.
There was a problem hiding this comment.
... the svg fill, though it does have a hover bg
| onClick={() => setShowEntryScreen(false)} | ||
| disabled={!initialPrompt} | ||
| > | ||
| <StyledSendButton /> |
There was a problem hiding this comment.
Suggest renaming this. It's not a button, and button inside button would have been invalid.
What are the relevant tickets?
Closes https://github.com/mitodl/hq/issues/6648
https://github.com/mitodl/hq/issues/6648
Description (What does it do?)
Applies the current Chat designs by loading the AiChat component from the related PR branch on Smoot Design and adds the Recommendation Bot drawer to the Homepage.
Adds a button to the Homepage to open the Recommendation Bot drawer.
Adds an entry screen as the drawer opens to these designs: https://www.figma.com/design/Eux3guSenAFVvNHGi1Y9Wm/MIT-Design-System?node-id=16842-209507&m=dev
This change also updates the Resource Drawer Syllabus Bot to us the updated styles.
Screenshots (if appropriate):
How can this be tested?
Homepage Recommendation Bot:
recommendationBotEnabledin HeroSearch.tsx to true to test locally.Resource Drawer Syllabus Bot:
chatEnabledto true in LearningResourceExpanded.tsx to test locally.Additional Context