Skip to content

Commit 8b57ae8

Browse files
jonkaftonjonkafton
authored
Design update for the homepage AskTIM action (#2047)
* Design update for homepage AskTIM action * Update lockfile * Renamed file
1 parent f57f348 commit 8b57ae8

File tree

3 files changed

+98
-110
lines changed

3 files changed

+98
-110
lines changed

‎frontends/main/src/page-components/AiRecommendationBot/AiRecommendationBotDrawerStrip.tsx‎ renamed to ‎frontends/main/src/page-components/AiRecommendationBot/AiRecommendationBotDrawer.tsx‎

Lines changed: 55 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,10 @@ import { Typography, styled, Drawer, AdornmentButton } from "ol-components"
33
import { RiSparkling2Line, RiSendPlaneFill } from "@remixicon/react"
44
import { Input } from "@mitodl/smoot-design"
55
import type { AiChatMessage } from "@mitodl/smoot-design/ai"
6-
import AskTIMButton from "./AskTimButton"
76
import AiRecommendationBot, { STARTERS } from "./AiRecommendationBot"
87
import Image from "next/image"
98
import timLogo from "@/public/images/icons/tim.svg"
109

11-
const StripContainer = styled.div({
12-
padding: "16px 0",
13-
marginTop: "24px",
14-
display: "flex",
15-
flexDirection: "row",
16-
alignItems: "center",
17-
gap: "24px",
18-
width: "100%",
19-
whiteSpace: "nowrap",
20-
})
21-
22-
const DecorativeLine = styled.div(({ theme }) => ({
23-
width: "100%",
24-
height: "1px",
25-
backgroundColor: theme.custom.colors.lightGray2,
26-
marginTop: "4px",
27-
}))
28-
29-
const LeadingText = styled(Typography)(({ theme }) => ({
30-
color: theme.custom.colors.silverGrayDark,
31-
...theme.typography.body2,
32-
[theme.breakpoints.down("sm")]: {
33-
...theme.typography.body3,
34-
},
35-
}))
36-
3710
const EntryScreen = styled.div({
3811
display: "flex",
3912
flexDirection: "column",
@@ -113,8 +86,13 @@ const Starter = styled.button(({ theme }) => ({
11386
},
11487
}))
11588

116-
const AiRecommendationBotDrawerStrip = () => {
117-
const [open, setOpen] = useState(false)
89+
const AiRecommendationBotDrawer = ({
90+
open,
91+
setOpen,
92+
}: {
93+
open: boolean
94+
setOpen: (open: boolean) => void
95+
}) => {
11896
const [initialPrompt, setInitialPrompt] = useState("")
11997
const [showEntryScreen, setShowEntryScreen] = useState(true)
12098
const aiChatRef = useRef<{
@@ -157,59 +135,54 @@ const AiRecommendationBotDrawerStrip = () => {
157135
}
158136

159137
return (
160-
<StripContainer>
161-
<DecorativeLine />
162-
<LeadingText>Do you require assistance?</LeadingText>
163-
<AskTIMButton onClick={() => setOpen(true)} />
164-
<Drawer open={open} anchor="right" onClose={onDrawerClose}>
165-
{showEntryScreen ? (
166-
<EntryScreen>
167-
<TimLogoBox>
168-
<RiSparkling2Line />
169-
<TimLogo src={timLogo.src} alt="" width={40} height={40} />
170-
</TimLogoBox>
171-
<Typography variant="h4">Welcome! I am TIM the Beaver.</Typography>
172-
<Typography>Need assistance getting started?</Typography>
173-
<StyledInput
174-
fullWidth
175-
size="chat"
176-
onChange={onPromptChange}
177-
onKeyDown={onPromptKeyDown}
178-
endAdornment={
179-
<AdornmentButton
180-
aria-label="Send"
181-
onClick={() => setShowEntryScreen(false)}
182-
disabled={!initialPrompt}
183-
>
184-
<SendIcon />
185-
</AdornmentButton>
186-
}
187-
responsive
188-
/>
189-
<Typography variant="h5">Let me know how I can help.</Typography>
190-
<Starters>
191-
{STARTERS.map(({ content }, index) => (
192-
<Starter
193-
key={index}
194-
onClick={() => onStarterClick(content)}
195-
tabIndex={index}
196-
onKeyDown={(e) => {
197-
if (e.key === "Enter") {
198-
onStarterClick(content)
199-
}
200-
}}
201-
>
202-
<Typography variant="body2">{content}</Typography>
203-
</Starter>
204-
))}
205-
</Starters>
206-
</EntryScreen>
207-
) : (
208-
<AiRecommendationBot onClose={onDrawerClose} ref={aiChatRef} />
209-
)}
210-
</Drawer>
211-
</StripContainer>
138+
<Drawer open={open} anchor="right" onClose={onDrawerClose}>
139+
{showEntryScreen ? (
140+
<EntryScreen>
141+
<TimLogoBox>
142+
<RiSparkling2Line />
143+
<TimLogo src={timLogo.src} alt="" width={40} height={40} />
144+
</TimLogoBox>
145+
<Typography variant="h4">Welcome! I am TIM the Beaver.</Typography>
146+
<Typography>Need assistance getting started?</Typography>
147+
<StyledInput
148+
fullWidth
149+
size="chat"
150+
onChange={onPromptChange}
151+
onKeyDown={onPromptKeyDown}
152+
endAdornment={
153+
<AdornmentButton
154+
aria-label="Send"
155+
onClick={() => setShowEntryScreen(false)}
156+
disabled={!initialPrompt}
157+
>
158+
<SendIcon />
159+
</AdornmentButton>
160+
}
161+
responsive
162+
/>
163+
<Typography variant="h5">Let me know how I can help.</Typography>
164+
<Starters>
165+
{STARTERS.map(({ content }, index) => (
166+
<Starter
167+
key={index}
168+
onClick={() => onStarterClick(content)}
169+
tabIndex={index}
170+
onKeyDown={(e) => {
171+
if (e.key === "Enter") {
172+
onStarterClick(content)
173+
}
174+
}}
175+
>
176+
<Typography variant="body2">{content}</Typography>
177+
</Starter>
178+
))}
179+
</Starters>
180+
</EntryScreen>
181+
) : (
182+
<AiRecommendationBot onClose={onDrawerClose} ref={aiChatRef} />
183+
)}
184+
</Drawer>
212185
)
213186
}
214187

215-
export default AiRecommendationBotDrawerStrip
188+
export default AiRecommendationBotDrawer

‎frontends/main/src/page-components/AiRecommendationBot/AskTimButton.tsx‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,51 @@
1-
import React from "react"
1+
import React, { useState } from "react"
22
import { Typography, styled } from "ol-components"
33
import { Button } from "@mitodl/smoot-design"
44
import { RiSparkling2Line } from "@remixicon/react"
5+
import AiRecommendationBotDrawer from "./AiRecommendationBotDrawer"
56

67
const StyledButton = styled(Button)(({ theme }) => ({
78
display: "flex",
89
flexDirection: "row",
910
gap: "8px",
1011
minWidth: "auto",
11-
paddingLeft: "16px",
12-
paddingRight: "24px",
12+
padding: "4px 0",
1313
color: theme.custom.colors.darkGray2,
14-
borderColor: theme.custom.colors.lightGray2,
14+
border: "none",
15+
background: "none",
1516
svg: {
16-
fill: theme.custom.colors.red,
17+
fill: theme.custom.colors.lightRed,
1718
width: "20px",
1819
height: "20px",
1920
},
2021
"&&": {
2122
":hover": {
22-
borderColor: "transparent",
23-
color: theme.custom.colors.white,
24-
backgroundColor: theme.custom.colors.darkGray2,
23+
background: "none",
24+
color: theme.custom.colors.mitRed,
2525
p: {
26-
color: theme.custom.colors.white,
27-
},
28-
svg: {
29-
fill: theme.custom.colors.white,
26+
color: theme.custom.colors.mitRed,
3027
},
3128
},
3229
},
3330
}))
3431

35-
const AskTIMButton = ({ onClick }: { onClick: () => void }) => {
32+
const AskTIMButton = () => {
33+
const [open, setOpen] = useState(false)
34+
3635
return (
37-
<StyledButton variant="bordered" edge="rounded" onClick={onClick}>
38-
<RiSparkling2Line />
39-
<Typography variant="body1">
40-
Ask<strong>TIM</strong>
41-
</Typography>
42-
</StyledButton>
36+
<>
37+
<StyledButton
38+
variant="bordered"
39+
edge="rounded"
40+
onClick={() => setOpen(true)}
41+
>
42+
<RiSparkling2Line />
43+
<Typography variant="body1">
44+
Ask<strong>TIM</strong>
45+
</Typography>
46+
</StyledButton>
47+
<AiRecommendationBotDrawer open={open} setOpen={setOpen} />
48+
</>
4349
)
4450
}
4551

‎frontends/main/src/page-components/HeroSearch/HeroSearch.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React, { useState, useCallback } from "react"
44
import { useRouter } from "next-nprogress-bar"
55
import { FeatureFlags } from "@/common/feature_flags"
66
import { useFeatureFlagEnabled, usePostHog } from "posthog-js/react"
7+
import AskTIMButton from "@/page-components/AiRecommendationBot/AskTimButton"
78

89
import {
910
Typography,
@@ -32,7 +33,6 @@ import {
3233
} from "@remixicon/react"
3334
import Image from "next/image"
3435
import { SearchField } from "@/page-components/SearchField/SearchField"
35-
import AiRecommendationBotDrawerStrip from "@/page-components/AiRecommendationBot/AiRecommendationBotDrawerStrip"
3636
import { PostHogEvents } from "@/common/constants"
3737

3838
type SearchChip = {
@@ -137,15 +137,19 @@ const ControlsContainer = styled.div(({ theme }) => ({
137137
},
138138
}))
139139

140-
const BrowseByTopicContainer = styled.div(({ theme }) => ({
140+
const ActionStrip = styled.div(({ theme }) => ({
141+
display: "flex",
142+
flexDirection: "row",
143+
alignItems: "center",
144+
gap: "24px",
141145
marginTop: "16px",
142146
marginBottom: "24px",
143147
[theme.breakpoints.down("sm")]: {
144148
marginTop: "0",
145149
},
146150
}))
147151

148-
const BrowseByTopicText = styled(Typography)(({ theme }) => ({
152+
const ActionStripText = styled(Typography)(({ theme }) => ({
149153
color: theme.custom.colors.silverGrayDark,
150154
...theme.typography.body2,
151155
[theme.breakpoints.down("sm")]: {
@@ -252,9 +256,9 @@ const HeroSearch: React.FC<{ imageIndex: number }> = ({ imageIndex }) => {
252256
onSubmit={onSearchSubmit}
253257
/>
254258
<div>
255-
<BrowseByTopicContainer>
256-
<BrowseByTopicText>
257-
or browse by{" "}
259+
<ActionStrip>
260+
<ActionStripText>
261+
{recommendationBotEnabled ? "Browse by " : "or browse by "}
258262
<TopicLink
259263
href="/topics/"
260264
onClick={() => {
@@ -266,8 +270,14 @@ const HeroSearch: React.FC<{ imageIndex: number }> = ({ imageIndex }) => {
266270
>
267271
Topic
268272
</TopicLink>
269-
</BrowseByTopicText>
270-
</BrowseByTopicContainer>
273+
</ActionStripText>
274+
{recommendationBotEnabled ? (
275+
<>
276+
<ActionStripText>or</ActionStripText>
277+
<AskTIMButton />
278+
</>
279+
) : null}
280+
</ActionStrip>
271281
<TrendingContainer>
272282
{SEARCH_CHIPS.map((chip) => (
273283
<TrendingChip
@@ -282,7 +292,6 @@ const HeroSearch: React.FC<{ imageIndex: number }> = ({ imageIndex }) => {
282292
</TrendingContainer>
283293
</div>
284294
</ControlsContainer>
285-
{recommendationBotEnabled ? <AiRecommendationBotDrawerStrip /> : null}
286295
</TitleAndControls>
287296
<ImageContainer>
288297
<Image

0 commit comments

Comments
 (0)