@@ -3,37 +3,10 @@ import { Typography, styled, Drawer, AdornmentButton } from "ol-components"
3
3
import { RiSparkling2Line , RiSendPlaneFill } from "@remixicon/react"
4
4
import { Input } from "@mitodl/smoot-design"
5
5
import type { AiChatMessage } from "@mitodl/smoot-design/ai"
6
- import AskTIMButton from "./AskTimButton"
7
6
import AiRecommendationBot , { STARTERS } from "./AiRecommendationBot"
8
7
import Image from "next/image"
9
8
import timLogo from "@/public/images/icons/tim.svg"
10
9
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
-
37
10
const EntryScreen = styled . div ( {
38
11
display : "flex" ,
39
12
flexDirection : "column" ,
@@ -113,8 +86,13 @@ const Starter = styled.button(({ theme }) => ({
113
86
} ,
114
87
} ) )
115
88
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
+ } ) => {
118
96
const [ initialPrompt , setInitialPrompt ] = useState ( "" )
119
97
const [ showEntryScreen , setShowEntryScreen ] = useState ( true )
120
98
const aiChatRef = useRef < {
@@ -157,59 +135,54 @@ const AiRecommendationBotDrawerStrip = () => {
157
135
}
158
136
159
137
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 >
212
185
)
213
186
}
214
187
215
- export default AiRecommendationBotDrawerStrip
188
+ export default AiRecommendationBotDrawer
0 commit comments