Full width slide down syllabus chat for the resource drawer #2063

jonkafton · 2025-02-20T17:19:21Z

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/6747

Description (What does it do?)

Implements 1. in the linked issue.
Refactors out the various LearningResourceExpanded components (the file was becoming unwieldy).
Refactors out our chat with entry screen (now an easy move to Smoot Design).

Screenshots (if appropriate):

Desktop screenshots
Mobile width screenshots

How can this be tested?

Set chatEnabled to true in LearningResourceExpanded.tsx and HeroSearch.tsx.
Click a resource card to open the drawer. The "AskTIM about this course" opener should display.
- Click the opener to slide down the chat entry screen
- Confirm the entry screen text input and starter buttons take you to the chat.
- Confirm the chat functions and scrolls correctly.
  - The Smoot Design AiChat component has no padding, with the expectation that it would expand to a container provided by the calling component. This is not ideal is its scrollbar interferes with the messages. Ideally it would behave as the resource content, scrolling at full height with the sticky title and content masked by the opener button and horizontal line, though that has its challenges:

Check above at mobile widths.
On closing, the drawer content should be displayed with scroll preserved.
The chat with entry is reused for the syllabus and recommendation bots.
- Click the AskTIM button in the Hero search. Confirm

Additional Context

jonkafton · 2025-02-20T17:22:00Z

.github/workflows/production.yml

@@ -52,7 +52,7 @@ jobs:
          POSTHOG_API_HOST: https://app.posthog.com
          POSTHOG_PROJECT_ID: ${{ secrets.POSTHOG_PROJECT_ID_PROD }}
          POSTHOG_API_KEY: ${{ secrets.POSTHOG_PROJECT_API_KEY_PROD }}
-          POSTHOG_ENABLE_SESSION_RECORDING: ${{ secrets.POSTHOG_PROJECT_ENABLE_SESSION_RECORDING_PROD }}
+          POSTHOG_ENABLE_SESSION_RECORDING: ${{ secrets.POSTHOG_ENABLE_SESSION_RECORDING_PROD }}


Slipped this in - it was just badly named. mitodl/ol-infrastructure#2978 sets the env vars.

jonkafton · 2025-02-20T17:32:00Z

frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.tsx

+  useEffect(() => {
+    const updateHeight = () => {
+      if (titleSectionRef.current) {
+        setTitleSectionHeight(titleSectionRef.current.offsetHeight)
+      }
+    }
+    updateHeight()
+    const resizeObserver = new ResizeObserver(updateHeight)
+
+    if (titleSectionRef.current) {
+      resizeObserver.observe(titleSectionRef.current)
+    }
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])


Had very much hoped for a CSS only solution for the slide down chat. The issue is that it needs to be in flow to position beneath the title (whose height depends on title length and screen width), though needs to be out of flow and overlaid in stacking context to have a fixed height to the bottom to allow for the slide down transition and to not interfere with the resource content positioning. Inspecting the title section's height to use at its top positioning and enabling/disabling pointer events on the layer seems a reasonable compromise.

ChristopherChudzicki

Just starting to look at code. Generally worked well, but noticed a few issues:

Drawer's scrollbar is covered up by title
- no obvious suggestion... Some z-index issue?
Title close button shifts annoyingly when chat is toggled (see video)
- IMO, we should add scrollbar-gutter: stable to the scrolling container so that it reserves space for the scrollbar. (I believe that this is based on the user agent, so if the user agent uses overlay scrolling, no space is reserved.)
Accessibility: When chat is visible, users can still tab to the hidden content, and vice versa.
- I think that the easiest solution would be to conditionally apply inert to the chat vs regular content. inert doesn't have fantastic browser support, but if you're missing it, the page is still pretty functional.
- Altenratively, could use transitionend events, I feel like there may be some caveats about when exactly those fire. (Caveats might not be relevant to our case; but e.g., if the transition css is removed so the transition starts but then finishes abruptly, i believe the event never fires.)

ChristopherChudzicki · 2025-02-20T19:23:05Z

layout_shifts.mov

jonkafton · 2025-02-20T19:36:58Z

That's not pretty. I don't see that my side - it must be system level scrollbars (are you on Windows/Chrome?). On MacOS/Chrome I get:

Screen.Recording.2025-02-20.at.20.30.00.mov

Will check for ways for me to emulate and try your scrollbar-gutter suggestion.

This reverts commit 823d955.

jonkafton · 2025-02-20T21:51:26Z

Posting as a backup option if we see cross platform scrollbar issues (@ChristopherChudzicki has a solution, commit) - A workaround is to only scroll the content section when chat is enabled. Although scrollbars at the right of the window don't look good if they're not full height, the horizontal line on the "AskTIM..." opener affords us the option:

Screen.Recording.2025-02-20.at.22.26.04.mov

ChristopherChudzicki

All the scrolling issues and shifting seem resolved to me, 👍 👍

I'm still seeing one accessibility issue.

When Chat is open, I can't tab to content ✅ (regular content is inert)
When Chat is closed, I can still tab into it. ❌
- The chat section needs inert when not open.

Left a few other extremely minor comments.

frontends/main/src/page-components/LearningResourceExpanded/AiChatSyllabusSlideDown.tsx

…tainer

ChristopherChudzicki

👍

ChristopherChudzicki · 2025-02-21T17:33:22Z

frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.tsx

@@ -49,7 +49,7 @@ const ChatLayer = styled("div")<{ top: number; chatExpanded: boolean }>(
    right: 0,
    pointerEvents: chatExpanded ? "auto" : "none",
    overflow: "hidden",
-    scrollbarGutter: "stable",
+    scrollbarGutter: chatExpanded ? "auto" : "stable",


As discussed in slack, this has the downside that users with classic scrollbars see a small layout shift when expanding/collapsing.

Another way to get the divider to be full-width w/o the layout shift would be to keep this stable, and set the divider's width to 100vw when it's open. Then it will overflow to the edge of the screen. (It needs to be 100% when not open, though, or it overflows into the scrollbar undesirably.)

That said, my suggest seems a little hacky. Up to you.

I think the shift is ok in this case as the scrollbars appear occupying space, and the button shifts to remain centered. As the shift coincides with the scrollbars appearing, it's inoffensive. Let's get feedback though and can revisit if needed.

jonkafton added 8 commits February 14, 2025 20:28

Remove columned chatbot. Refactor

68bc379

Merge branch 'main' into jk/6747-slidedown-syllabus-bot

a27283e

Full width / slide down syllabus bot

2d6d489

Merge branch 'main' into jk/6747-slidedown-syllabus-bot

3884f51

Update Posthog replay vars

da88b27

Refactor chat with entry screen for reuse

4fa203c

Update test and clean up

014f59f

Fix enum import

1a0c12f

jonkafton commented Feb 20, 2025

View reviewed changes

jonkafton marked this pull request as draft February 20, 2025 17:33

Test updates

f74dcc9

ChristopherChudzicki reviewed Feb 20, 2025

View reviewed changes

jonkafton and others added 5 commits February 20, 2025 20:41

Prevent tab to masked content when the chat is open (accessibility)

f883bee

Limit scroll to content area when chat enabled

823d955

Remove scrollbar-gutter not needed

af081b0

Rewind limit scroll to content area when chat enabled

6ceba50

This reverts commit 823d955.

avoid layout shift, show full scrollbar

1b39a7d

jonkafton marked this pull request as ready for review February 20, 2025 21:55

ChristopherChudzicki requested changes Feb 20, 2025

View reviewed changes

frontends/main/src/page-components/LearningResourceExpanded/AiChatSyllabusSlideDown.tsx Outdated Show resolved Hide resolved

frontends/main/src/page-components/LearningResourceExpanded/AiChatSyllabusSlideDown.tsx Outdated Show resolved Hide resolved

Make chat inert when closed. Fix pointer events stopped at opener con…

cd1fe90

…tainer

jonkafton requested a review from ChristopherChudzicki February 21, 2025 16:52

ChristopherChudzicki approved these changes Feb 21, 2025

View reviewed changes

jonkafton merged commit 1f7a800 into main Feb 21, 2025
11 checks passed

jonkafton deleted the jk/6747-slidedown-syllabus-bot branch February 21, 2025 17:37

odlbot mentioned this pull request Feb 21, 2025

Release 0.30.6 #2065

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Full width slide down syllabus chat for the resource drawer #2063

Full width slide down syllabus chat for the resource drawer #2063

jonkafton commented Feb 20, 2025 •

edited

Loading

jonkafton Feb 20, 2025

jonkafton Feb 20, 2025

ChristopherChudzicki left a comment

ChristopherChudzicki commented Feb 20, 2025

jonkafton commented Feb 20, 2025

jonkafton commented Feb 20, 2025 •

edited

Loading

ChristopherChudzicki left a comment

ChristopherChudzicki left a comment

ChristopherChudzicki Feb 21, 2025

jonkafton Feb 21, 2025

Full width slide down syllabus chat for the resource drawer #2063

Full width slide down syllabus chat for the resource drawer #2063

Conversation

jonkafton commented Feb 20, 2025 • edited Loading

What are the relevant tickets?

Description (What does it do?)

Screenshots (if appropriate):

How can this be tested?

Additional Context

jonkafton Feb 20, 2025

Choose a reason for hiding this comment

jonkafton Feb 20, 2025

Choose a reason for hiding this comment

ChristopherChudzicki left a comment

Choose a reason for hiding this comment

ChristopherChudzicki commented Feb 20, 2025

jonkafton commented Feb 20, 2025

jonkafton commented Feb 20, 2025 • edited Loading

ChristopherChudzicki left a comment

Choose a reason for hiding this comment

ChristopherChudzicki left a comment

Choose a reason for hiding this comment

ChristopherChudzicki Feb 21, 2025

Choose a reason for hiding this comment

jonkafton Feb 21, 2025

Choose a reason for hiding this comment

jonkafton commented Feb 20, 2025 •

edited

Loading

jonkafton commented Feb 20, 2025 •

edited

Loading