Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Recommendation bot styling and text updates #2058

Merged
merged 3 commits into from
Feb 19, 2025
Merged

Recommendation bot styling and text updates #2058

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
58b437a
Style/content updates
jonkafton Feb 18, 2025
7b0306a
Match resource drawer widths
jonkafton Feb 18, 2025
4225c8b
Change breakpoint
jonkafton Feb 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions frontends/main/src/page-components/AiRecommendationBot/AiRecommendationBot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,6 @@ export const STARTERS = [
content:
"I want to learn about global warming, can you recommend any videos?",
},
{
content:
"I am curious about AI applications for business. Do you have any free courses about that?",
},
{
content:
"I would like to learn about linear regression, preferably at no cost.",
Expand Down
86 changes: 66 additions & 20 deletions frontends/main/src/page-components/AiRecommendationBot/AiRecommendationBotDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,43 @@
import React, { useState, useRef, useEffect } from "react"
import { Typography, styled, Drawer, AdornmentButton } from "ol-components"
import { RiSparkling2Line, RiSendPlaneFill } from "@remixicon/react"
import { Input } from "@mitodl/smoot-design"
import {
RiSparkling2Line,
RiSendPlaneFill,
RiCloseLine,
} from "@remixicon/react"
import { Input, ActionButton } from "@mitodl/smoot-design"
import type { AiChatMessage } from "@mitodl/smoot-design/ai"
import AiRecommendationBot, { STARTERS } from "./AiRecommendationBot"
import Image from "next/image"
import timLogo from "@/public/images/icons/tim.svg"

const EntryScreen = styled.div({
const EntryScreen = styled.div(({ theme }) => ({
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: "16px",
padding: "104px 32px",
})
padding: "136px 40px 24px 40px",
width: "900px",
[theme.breakpoints.down("md")]: {
padding: "136px 24px 24px 24px",
width: "100%",
},
}))

const CloseButton = styled(ActionButton)(({ theme }) => ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe Figma has a component Close-Modal that is used both here and in the resource drawer.

Ideally, I think this should be a button variant coordinated with Steve and Bilal. But in the meantime, might be worth sticking this in /main/src/components/CloseButton and using in both places 🤷

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes - it now appears here, in the resource drawer and in the recommendation bot drawer (which turns off this one to reuse between screens).

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 TimLogoBox = styled.div(({ theme }) => ({
position: "relative",
Expand All @@ -33,18 +56,24 @@ const TimLogo = styled(Image)({
display: "block",
})

const Title = styled(Typography)({
textAlign: "center",
padding: "0 40px",
})

const StyledInput = styled(Input)(({ theme }) => ({
backgroundColor: theme.custom.colors.lightGray1,
borderRadius: "8px",
border: `1px solid ${theme.custom.colors.lightGray2}`,
margin: "24px 0",
width: "700px",
[theme.breakpoints.down("md")]: {
width: "100%",
},
margin: "8px 0 24px 0",
"button:disabled": {
backgroundColor: "inherit",
},
[theme.breakpoints.down("sm")]: {
".Mit-AdornmentButton": {
padding: 0,
},
},
}))

const SendIcon = styled(RiSendPlaneFill)(({ theme }) => ({
Expand All @@ -57,9 +86,7 @@ const SendIcon = styled(RiSendPlaneFill)(({ theme }) => ({
const Starters = styled.div(({ theme }) => ({
display: "flex",
gap: "16px",
maxWidth: "836px",
marginTop: "12px",
[theme.breakpoints.down("md")]: {
[theme.breakpoints.down("sm")]: {
flexDirection: "column",
},
}))
Expand All @@ -74,7 +101,7 @@ const Starter = styled.button(({ theme }) => ({
color: theme.custom.colors.darkGray2,
backgroundColor: "transparent",
textAlign: "left",
[theme.breakpoints.down("md")]: {
[theme.breakpoints.down("sm")]: {
textAlign: "center",
padding: "12px 36px",
},
Expand Down Expand Up @@ -129,21 +156,41 @@ const AiRecommendationBotDrawer = ({
setShowEntryScreen(false)
}

const onDrawerClose = () => {
const closeDrawer = () => {
setOpen(false)
setShowEntryScreen(true)
}

return (
<Drawer open={open} anchor="right" onClose={onDrawerClose}>
<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>
{showEntryScreen ? (
<EntryScreen>
<TimLogoBox>
<RiSparkling2Line />
<TimLogo src={timLogo.src} alt="" width={40} height={40} />
</TimLogoBox>
<Typography variant="h4">Welcome! I am TIM the Beaver.</Typography>
<Typography>Need assistance getting started?</Typography>
<Title variant="h4">What do you want to learn from MIT?</Title>
<StyledInput
fullWidth
size="chat"
Expand All @@ -160,7 +207,6 @@ const AiRecommendationBotDrawer = ({
}
responsive
/>
<Typography variant="h5">Let me know how I can help.</Typography>
<Starters>
{STARTERS.map(({ content }, index) => (
<Starter
Expand All @@ -179,7 +225,7 @@ const AiRecommendationBotDrawer = ({
</Starters>
</EntryScreen>
) : (
<AiRecommendationBot onClose={onDrawerClose} ref={aiChatRef} />
<AiRecommendationBot ref={aiChatRef} />
)}
</Drawer>
)
Expand Down
Loading