-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Full width slide down syllabus chat for the resource drawer (#2063)
* Remove columned chatbot. Refactor * Full width / slide down syllabus bot * Update Posthog replay vars * Refactor chat with entry screen for reuse * Update test and clean up * Fix enum import * Test updates * Prevent tab to masked content when the chat is open (accessibility) * Limit scroll to content area when chat enabled * Remove scrollbar-gutter not needed * Rewind limit scroll to content area when chat enabled This reverts commit 823d955. * avoid layout shift, show full scrollbar * Make chat inert when closed. Fix pointer events stopped at opener container --------- Co-authored-by: Chris Chudzicki <[email protected]>
- Loading branch information
1 parent
b4626b9
commit 1f7a800
Showing
25 changed files
with
1,276 additions
and
1,186 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
frontends/main/src/page-components/AiChat/AiRecommendationBotDrawer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import React from "react" | ||
| import { styled, Drawer } from "ol-components" | ||
| import { RiCloseLine } from "@remixicon/react" | ||
| import { ActionButton } from "@mitodl/smoot-design" | ||
| import type { AiChatProps } from "@mitodl/smoot-design/ai" | ||
| import AiChatWithEntryScreen from "./AiChatWithEntryScreen" | ||
| import { getCsrfToken } from "@/common/utils" | ||
|
|
||
| const CloseButton = styled(ActionButton)(({ theme }) => ({ | ||
| position: "absolute", | ||
| top: "24px", | ||
| right: "40px", | ||
| backgroundColor: theme.custom.colors.lightGray2, | ||
| "&&:hover": { | ||
| backgroundColor: theme.custom.colors.red, | ||
| color: theme.custom.colors.white, | ||
| }, | ||
| [theme.breakpoints.down("md")]: { | ||
| right: "24px", | ||
| }, | ||
| })) | ||
|
|
||
| const StyledAiChatWithEntryScreen = styled(AiChatWithEntryScreen)( | ||
| ({ theme }) => ({ | ||
| width: "900px", | ||
| [theme.breakpoints.down("md")]: { | ||
| width: "100%", | ||
| }, | ||
| }), | ||
| ) | ||
|
|
||
| const INITIAL_MESSAGES: AiChatProps["initialMessages"] = [ | ||
| { | ||
| content: "What do you want to learn about today?", | ||
| role: "assistant", | ||
| }, | ||
| ] | ||
|
|
||
| const STARTERS = [ | ||
| { | ||
| content: | ||
| "I'm interested in courses on quantum computing that offer certificates.", | ||
| }, | ||
| { | ||
| content: | ||
| "I want to learn about global warming, can you recommend any videos?", | ||
| }, | ||
| { | ||
| content: | ||
| "I would like to learn about linear regression, preferably at no cost.", | ||
| }, | ||
| ] | ||
|
|
||
| const AiRecommendationBotDrawer = ({ | ||
| open, | ||
| setOpen, | ||
| }: { | ||
| open: boolean | ||
| setOpen: (open: boolean) => void | ||
| }) => { | ||
| const closeDrawer = () => { | ||
| setOpen(false) | ||
| // setShowEntryScreen(true) | ||
| } | ||
|
|
||
| return ( | ||
| <Drawer | ||
| open={open} | ||
| anchor="right" | ||
| onClose={closeDrawer} | ||
| PaperProps={{ | ||
| sx: { | ||
| minWidth: (theme) => ({ | ||
| [theme.breakpoints.down("md")]: { | ||
| width: "100%", | ||
| }, | ||
| }), | ||
| }, | ||
| }} | ||
| > | ||
| <CloseButton | ||
| variant="text" | ||
| size="medium" | ||
| onClick={closeDrawer} | ||
| aria-label="Close" | ||
| > | ||
| <RiCloseLine /> | ||
| </CloseButton> | ||
| <StyledAiChatWithEntryScreen | ||
| entryTitle="What do you want to learn from MIT?" | ||
| starters={STARTERS} | ||
| askTimTitle="to recommend a course" | ||
| initialMessages={INITIAL_MESSAGES} | ||
| requestOpts={{ | ||
| apiUrl: process.env.NEXT_PUBLIC_LEARN_AI_RECOMMENDATION_ENDPOINT!, | ||
| fetchOpts: { | ||
| headers: { | ||
| "X-CSRFToken": getCsrfToken(), | ||
| }, | ||
| }, | ||
| transformBody: (messages) => ({ | ||
| message: messages[messages.length - 1].content, | ||
| }), | ||
| }} | ||
| /> | ||
| </Drawer> | ||
| ) | ||
| } | ||
|
|
||
| export default AiRecommendationBotDrawer |
File renamed without changes.
69 changes: 0 additions & 69 deletions
69
frontends/main/src/page-components/AiRecommendationBot/AiRecommendationBot.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.