@ -16,13 +16,15 @@ const WidgetContainer = styled.div`
align - items : center ;
text - align : left ;
width : 356px ;
height : 4 0 5px;
height : 4 56 px;
` ;
const StyledContainer = styled . div `
position : absolute ;
bottom : 0 ;
left : 0 ;
width : 100 % ;
padding : 4px ;
height : 454px ;
width : 354px ;
border - radius : 0.75rem ;
background - color : rgb ( 34 , 35 , 39 ) ;
border : 1px solid gray ;
@ -98,8 +100,8 @@ const Description = styled.p`
margin - top : 0 ;
` ;
const Conversation = styled . div `
height : 18 rem;
padding : 0.5rem ;
height : 20 rem;
padding - inline : 0.5rem ;
border - radius : 0.375rem ;
text - align : left ;
overflow - y : auto ;
@ -109,18 +111,16 @@ const Conversation = styled.div`
const MessageBubble = styled . div < { type : MESSAGE_TYPE } > `
display : flex ;
font - size : 16px ;
justify - content : $ { props = > props . type === 'QUESTION' ? 'flex-end' : 'flex-start' } ;
margin : 0.5rem ;
` ;
const Message = styled . p < { type : MESSAGE_TYPE } > `
background : $ { props = > props . type === 'QUESTION' ?
'linear-gradient(to bottom right, #8860DB, #6D42C5)' :
props = > props . type === 'ANSWER' ?
'#38383b' :
'' } ;
color : $ { props = > props . type != 'ERROR' ? '#ffff' : '#b91c1c' } ;
border :$ { props = > props . type !== 'ERROR' ? 'none' : '1px solid #b91c1c' } ;
'#38383b' } ;
color : # ffff ;
border : none ;
max - width : 80 % ;
display : block ;
padding : 0.75rem ;
@ -151,21 +151,21 @@ const DotAnimation = styled.div`
display : inline - block ;
animation : $ { dotBounce } 1 s infinite ease - in - out ;
` ;
// delay classes as styled components
const Delay = styled ( DotAnimation ) < { delay : number } > `
animation - delay : $ { props = > props . delay + 'ms' } ;
` ;
const PromptContainer = styled . form `
background - color : transparent ;
padding : 12px 8 px ;
opacity : 1 ;
padding - inline : 4px ;
height : 40px ;
display : flex ;
justify - content : space - between ;
` ;
const StyledInput = styled . input `
width : 80 % ;
height : 40px ;
border : 1px solid # 686877 ;
padding - left : 12px ;
background - color : transparent ;
@ -175,19 +175,23 @@ const StyledInput = styled.input`
outline : none ;
` ;
const StyledButton = styled . button `
color : # ccc ;
display : flex ;
justify - content : center ;
align - items : center ;
background - image : linear - gradient ( to bottom right , # 5 AF0EC , # E80D9D ) ;
border - radius : 6px ;
width : 40px ;
height : 40px ;
padding : 0px ;
border : none ;
cursor : pointer ;
outline : none ;
& : hover {
opacity : 8 0% ;
opacity : 9 0% ;
}
& : disabled {
opacity : 60 % ;
} `
} ` ;
const HeroContainer = styled . div `
position : absolute ;
top : 50 % ;
@ -223,10 +227,10 @@ const HeroDescription = styled.p`
font - size : 14px ;
line - height : 1.5 ;
` ;
const Avatar = styled . img < { width :number , height :number } > `
const Avatar = styled . img < { width : number , height : number } > `
max - width : $ { props = > props . width } ;
`
const Hero = ( { title , description } : { title :string , description :string } ) = > {
const Hero = ( { title , description } : { title : string , description : string } ) = > {
return (
< >
< HeroContainer >
@ -247,13 +251,13 @@ const Hero = ({title,description}:{title:string,description:string}) => {
} ;
export const DocsGPTWidget = ( {
apiHost = 'https://gptcloud.arc53.com' ,
selectDocs = 'default' ,
selectDocs = 'default' ,
apiKey = 'docsgpt-public' ,
avatar = 'https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png' ,
title = 'Get AI assistance' ,
description = 'DocsGPT\'s AI Chatbot is here to help' ,
heroTitle = 'Welcome to DocsGPT !' ,
heroDescription = 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.'
heroDescription = 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.'
} ) = > {
const [ prompt , setPrompt ] = useState ( '' ) ;
@ -334,17 +338,17 @@ export const DocsGPTWidget = ({
return (
< >
< WidgetContainer >
< FloatingButton onClick = { ( ) = > setOpen ( true ) } hidden = { open } >
< MessageIcon style = { { marginTop : '8px' } } / >
< FloatingButton onClick = { ( ) = > setOpen ( true ) } hidden = { open } >
< MessageIcon style = { { marginTop : '8px' } } / >
< / FloatingButton >
{ open && < StyledContainer >
< div >
< CancelButton onClick = { ( ) = > setOpen ( false ) } >
< Cross1Icon width = { 20 } height = { 20 } color = 'white' / >
< Cross1Icon width = { 20 } height = { 20 } color = 'white' / >
< / CancelButton >
< Header >
< IconWrapper >
< img style = { { maxWidth : "42px" , maxHeight : "42px" } } onError = { handleImageError } src = { avatar } alt = 'docs-gpt' / >
< img style = { { maxWidth : "42px" , maxHeight : "42px" } } onError = { handleImageError } src = { avatar } alt = 'docs-gpt' / >
< / IconWrapper >
< ContentWrapper >
< Title > { title } < / Title >
@ -399,7 +403,7 @@ export const DocsGPTWidget = ({
}
< / Fragment > )
} )
: < Hero title = { heroTitle } description = { heroDescription } / >
: < Hero title = { heroTitle } description = { heroDescription } / >
}
< / Conversation >
< PromptContainer
@ -409,7 +413,7 @@ export const DocsGPTWidget = ({
type = 'text' placeholder = "What do you want to do?" / >
< StyledButton
disabled = { prompt . length == 0 || status !== 'idle' } >
< PaperPlaneIcon color= 'white' / >
< PaperPlaneIcon width= { 15 } height = { 15 } color= 'white' / >
< / StyledButton >
< / PromptContainer >