Web Lab 2: Add Instructions drawer in AI Tutor tab#70696
Web Lab 2: Add Instructions drawer in AI Tutor tab#70696fisher-alice merged 24 commits intostagingfrom
Conversation
| axis: 'y', | ||
| initial: DEFAULT_INITIAL_INSTRUCTIONS_HEIGHT, | ||
| min: MIN_INSTRUCTIONS_HEIGHT, | ||
| max: maxInstructionsHeight, |
There was a problem hiding this comment.
We want the drawer panel to not exceed instructions content height. otherwise, the height of drawer is limited by MIN_CHAT_HEIGHT which ensures the user chat message editor is always maintained.
| <ChatDisabled message={chatDisabledMessage} /> | ||
| ) : ( | ||
| <> | ||
| {hasCollapsedInstructionsDrawer && ( |
There was a problem hiding this comment.
After update
Design requested inset in chat workspace while in collapsed instructions drawer state:
inset.-.in.collapsed.state.mov
There was a problem hiding this comment.
The show/hide instructions button overlaps with the chat. Should it? I think there could be cases where it completely blocks the user from seeing some text from the chat (if the chat is the exact size as the height of the panel, for example). They could probably make it visible by showing/hiding the instructions and therefore changing the height of the panel, but that seems like a subpar experience to me.
There was a problem hiding this comment.
Haha! I asked @moshebaricdo about this also, I'll let him respond.
There was a problem hiding this comment.
In his Slack response to me, he wrote: "We can leave out this padding while scrolling, as long as we have an offset at the very top so the first message is never obscured by the toggle. Otherwise, I like the kind of layered feel it has, makes the tab feel a bit more 'real-world'".
There was a problem hiding this comment.
Yep, overlap is intended! The one affordance we did need here was offset at the start so we never have a case where those first few lines of text are truly overlapped. Re: a chat message equaling the height of the panel, we'd still run into this without the overlap as the buttons would still consume vertical height equal to its own height.
| Overlap | No overlap |
|---|---|
 |
 |
hannahbergam
left a comment
hannahbergam
left a comment
There was a problem hiding this comment.
Yayyy thank you for adding an a11y video! I think because this is a button (instead of a dropdown being 'collapsed' or 'expanded') the text as you have it is a sufficient label. In the future, videos with VoiceOver on (so we can see the text read out) are helpful, but I'm good with this as-is!
| aiTutorChatButtonData={aiTutorChatButtonData} | ||
| aiTutorSystemPromptName={aiTutorSystemPromptName} | ||
| aiTutorResponseSchemaSettings={aiTutorResponseSchemaSettings} | ||
| instructionsContent={instructionsContent} |
There was a problem hiding this comment.
should we check that there are instructions before rendering the drawer version?
There was a problem hiding this comment.
Sure! i'll add check.
4 participants
This PR adds an Instructions drawer in the AI Tutor tab panel for Web Lab 2. This allows users to access instructions while in AI Tutor for easier reference when interacting with the model.
Now when a user is on the AI Tutor tab panel, the instructions drawer by default is open. There is a toggle button so that they can show or hide instructions and the instructions/chat panels are resizable (the border is draggable).
There is a default height for the instructions drawer when the AI Chat panel is first opened (default height or height of short instructions) and a min/max drawer height. But the drawer will not extend past the height of the instructions content. The instructions/chat panels are scrollable.
I checked in with @moshebaricdo about implementation from a UI perspective and got the 👍 from him.
After update
Medium-length instructions: Drawer's height is limited by instructions content's height - both instructions and chat panels are scrollable. Can toggle between showing/hiding instructions.
med-length.mov
Short instructions: Drawer's height is constant. Can toggle between showing/hiding instructions.
short-length.mov
Long instructions: Can see that drawer can be extended to end of instructions content. If window's height is decreased, the drawer's height is limited so user chat message editor is always intact.
long-length.mov
Keyboard-navigable: User can keyboard-navigate in the AI tutor panel - toggle, drag the resize bar, etc.
keyboard-nav.mov
Links
Testing story
Tested locally in
weblab2levels while in AI Tutor tab. Also confirmed that chat workspace inaichatlevels not impacted:Deployment strategy
Follow-up work
Privacy
Security
Caching
PR Creation Checklist: