Skip to content

Commit

Permalink
Design update for the homepage AskTIM action (#2047)
Browse files Browse the repository at this point in the history 
* Design update for homepage AskTIM action

* Update lockfile

* Renamed file
  • Loading branch information
@jonkafton
jonkafton authored Feb 13, 2025
1 parent f57f348 commit 8b57ae8
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 110 deletions.
137 changes: 55 additions & 82 deletions ...ionBot/AiRecommendationBotDrawerStrip.tsx → ...endationBot/AiRecommendationBotDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,10 @@ import { Typography, styled, Drawer, AdornmentButton } from "ol-components"
import { RiSparkling2Line, RiSendPlaneFill } from "@remixicon/react"
import { Input } from "@mitodl/smoot-design"
import type { AiChatMessage } from "@mitodl/smoot-design/ai"
import AskTIMButton from "./AskTimButton"
import AiRecommendationBot, { STARTERS } from "./AiRecommendationBot"
import Image from "next/image"
import timLogo from "@/public/images/icons/tim.svg"

const StripContainer = styled.div({
padding: "16px 0",
marginTop: "24px",
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "24px",
width: "100%",
whiteSpace: "nowrap",
})

const DecorativeLine = styled.div(({ theme }) => ({
width: "100%",
height: "1px",
backgroundColor: theme.custom.colors.lightGray2,
marginTop: "4px",
}))

const LeadingText = styled(Typography)(({ theme }) => ({
color: theme.custom.colors.silverGrayDark,
...theme.typography.body2,
[theme.breakpoints.down("sm")]: {
...theme.typography.body3,
},
}))

const EntryScreen = styled.div({
display: "flex",
flexDirection: "column",
Expand Down Expand Up @@ -113,8 +86,13 @@ const Starter = styled.button(({ theme }) => ({
},
}))

const AiRecommendationBotDrawerStrip = () => {
const [open, setOpen] = useState(false)
const AiRecommendationBotDrawer = ({
open,
setOpen,
}: {
open: boolean
setOpen: (open: boolean) => void
}) => {
const [initialPrompt, setInitialPrompt] = useState("")
const [showEntryScreen, setShowEntryScreen] = useState(true)
const aiChatRef = useRef<{
Expand Down Expand Up @@ -157,59 +135,54 @@ const AiRecommendationBotDrawerStrip = () => {
}

return (
<StripContainer>
<DecorativeLine />
<LeadingText>Do you require assistance?</LeadingText>
<AskTIMButton onClick={() => setOpen(true)} />
<Drawer open={open} anchor="right" onClose={onDrawerClose}>
{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>
<StyledInput
fullWidth
size="chat"
onChange={onPromptChange}
onKeyDown={onPromptKeyDown}
endAdornment={
<AdornmentButton
aria-label="Send"
onClick={() => setShowEntryScreen(false)}
disabled={!initialPrompt}
>
<SendIcon />
</AdornmentButton>
}
responsive
/>
<Typography variant="h5">Let me know how I can help.</Typography>
<Starters>
{STARTERS.map(({ content }, index) => (
<Starter
key={index}
onClick={() => onStarterClick(content)}
tabIndex={index}
onKeyDown={(e) => {
if (e.key === "Enter") {
onStarterClick(content)
}
}}
>
<Typography variant="body2">{content}</Typography>
</Starter>
))}
</Starters>
</EntryScreen>
) : (
<AiRecommendationBot onClose={onDrawerClose} ref={aiChatRef} />
)}
</Drawer>
</StripContainer>
<Drawer open={open} anchor="right" onClose={onDrawerClose}>
{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>
<StyledInput
fullWidth
size="chat"
onChange={onPromptChange}
onKeyDown={onPromptKeyDown}
endAdornment={
<AdornmentButton
aria-label="Send"
onClick={() => setShowEntryScreen(false)}
disabled={!initialPrompt}
>
<SendIcon />
</AdornmentButton>
}
responsive
/>
<Typography variant="h5">Let me know how I can help.</Typography>
<Starters>
{STARTERS.map(({ content }, index) => (
<Starter
key={index}
onClick={() => onStarterClick(content)}
tabIndex={index}
onKeyDown={(e) => {
if (e.key === "Enter") {
onStarterClick(content)
}
}}
>
<Typography variant="body2">{content}</Typography>
</Starter>
))}
</Starters>
</EntryScreen>
) : (
<AiRecommendationBot onClose={onDrawerClose} ref={aiChatRef} />
)}
</Drawer>
)
}

export default AiRecommendationBotDrawerStrip
export default AiRecommendationBotDrawer
44 changes: 25 additions & 19 deletions frontends/main/src/page-components/AiRecommendationBot/AskTimButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,51 @@
import React from "react"
import React, { useState } from "react"
import { Typography, styled } from "ol-components"
import { Button } from "@mitodl/smoot-design"
import { RiSparkling2Line } from "@remixicon/react"
import AiRecommendationBotDrawer from "./AiRecommendationBotDrawer"

const StyledButton = styled(Button)(({ theme }) => ({
display: "flex",
flexDirection: "row",
gap: "8px",
minWidth: "auto",
paddingLeft: "16px",
paddingRight: "24px",
padding: "4px 0",
color: theme.custom.colors.darkGray2,
borderColor: theme.custom.colors.lightGray2,
border: "none",
background: "none",
svg: {
fill: theme.custom.colors.red,
fill: theme.custom.colors.lightRed,
width: "20px",
height: "20px",
},
"&&": {
":hover": {
borderColor: "transparent",
color: theme.custom.colors.white,
backgroundColor: theme.custom.colors.darkGray2,
background: "none",
color: theme.custom.colors.mitRed,
p: {
color: theme.custom.colors.white,
},
svg: {
fill: theme.custom.colors.white,
color: theme.custom.colors.mitRed,
},
},
},
}))

const AskTIMButton = ({ onClick }: { onClick: () => void }) => {
const AskTIMButton = () => {
const [open, setOpen] = useState(false)

return (
<StyledButton variant="bordered" edge="rounded" onClick={onClick}>
<RiSparkling2Line />
<Typography variant="body1">
Ask<strong>TIM</strong>
</Typography>
</StyledButton>
<>
<StyledButton
variant="bordered"
edge="rounded"
onClick={() => setOpen(true)}
>
<RiSparkling2Line />
<Typography variant="body1">
Ask<strong>TIM</strong>
</Typography>
</StyledButton>
<AiRecommendationBotDrawer open={open} setOpen={setOpen} />
</>
)
}

Expand Down
27 changes: 18 additions & 9 deletions frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, { useState, useCallback } from "react"
import { useRouter } from "next-nprogress-bar"
import { FeatureFlags } from "@/common/feature_flags"
import { useFeatureFlagEnabled, usePostHog } from "posthog-js/react"
import AskTIMButton from "@/page-components/AiRecommendationBot/AskTimButton"

import {
Typography,
Expand Down Expand Up @@ -32,7 +33,6 @@ import {
} from "@remixicon/react"
import Image from "next/image"
import { SearchField } from "@/page-components/SearchField/SearchField"
import AiRecommendationBotDrawerStrip from "@/page-components/AiRecommendationBot/AiRecommendationBotDrawerStrip"
import { PostHogEvents } from "@/common/constants"

type SearchChip = {
Expand Down Expand Up @@ -137,15 +137,19 @@ const ControlsContainer = styled.div(({ theme }) => ({
},
}))

const BrowseByTopicContainer = styled.div(({ theme }) => ({
const ActionStrip = styled.div(({ theme }) => ({
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "24px",
marginTop: "16px",
marginBottom: "24px",
[theme.breakpoints.down("sm")]: {
marginTop: "0",
},
}))

const BrowseByTopicText = styled(Typography)(({ theme }) => ({
const ActionStripText = styled(Typography)(({ theme }) => ({
color: theme.custom.colors.silverGrayDark,
...theme.typography.body2,
[theme.breakpoints.down("sm")]: {
Expand Down Expand Up @@ -252,9 +256,9 @@ const HeroSearch: React.FC<{ imageIndex: number }> = ({ imageIndex }) => {
onSubmit={onSearchSubmit}
/>
<div>
<BrowseByTopicContainer>
<BrowseByTopicText>
or browse by{" "}
<ActionStrip>
<ActionStripText>
{recommendationBotEnabled ? "Browse by " : "or browse by "}
<TopicLink
href="/topics/"
onClick={() => {
Expand All @@ -266,8 +270,14 @@ const HeroSearch: React.FC<{ imageIndex: number }> = ({ imageIndex }) => {
>
Topic
</TopicLink>
</BrowseByTopicText>
</BrowseByTopicContainer>
</ActionStripText>
{recommendationBotEnabled ? (
<>
<ActionStripText>or</ActionStripText>
<AskTIMButton />
</>
) : null}
</ActionStrip>
<TrendingContainer>
{SEARCH_CHIPS.map((chip) => (
<TrendingChip
Expand All @@ -282,7 +292,6 @@ const HeroSearch: React.FC<{ imageIndex: number }> = ({ imageIndex }) => {
</TrendingContainer>
</div>
</ControlsContainer>
{recommendationBotEnabled ? <AiRecommendationBotDrawerStrip /> : null}
</TitleAndControls>
<ImageContainer>
<Image
Expand Down

0 comments on commit 8b57ae8

Please sign in to comment.