From 7c0009991915290711ec00a2eb1d9005c5755ac3 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Fri, 8 Nov 2024 19:21:19 +0530 Subject: [PATCH 1/3] (feat: widget): smooth transitions --- .../src/components/DocsGPTWidget.tsx | 78 +++++++++++++++---- 1 file changed, 65 insertions(+), 13 deletions(-) diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx index 53923fb88..d23d72f4c 100644 --- a/extensions/react-widget/src/components/DocsGPTWidget.tsx +++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx @@ -60,18 +60,53 @@ const Overlay = styled.div` z-index: 999; transition: opacity 0.5s; ` -const WidgetContainer = styled.div<{ modal?: boolean }>` +const WidgetContainer = styled.div<{ modal?: boolean, isOpen?: boolean }>` all: initial; position: fixed; right: ${props => props.modal ? '50%' : '10px'}; bottom: ${props => props.modal ? '50%' : '10px'}; z-index: 1000; - display: block; + display: none; + transform-origin:100% 100%; + &.open { + animation: createBox 500ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;; + } + &.close { + animation: closeBox 500ms cubic-bezier(0.6, 0.05, 0.15, 1) forwards; + } ${props => props.modal && "transform : translate(50%,50%);" } align-items: center; text-align: left; + @keyframes createBox { + 0% { + transform: scale(0.5); + } + 60% { + transform: scale(1.05) translate(-2%,-2%); + + } + 100% { + transform: scale(1); + + } +} + +@keyframes closeBox { + 0% { + transform: scale(1) translate(0, 0); + + } + 40% { + transform: scale(1.05) translate(-2%, -2%); + + } + 100% { + transform: scale(0); + + } +} `; const StyledContainer = styled.div` all: initial; @@ -97,16 +132,19 @@ const StyledContainer = styled.div` overflow: auto; } `; -const FloatingButton = styled.div<{ bgcolor: string }>` +const FloatingButton = styled.div<{ bgcolor: string,hidden:boolean }>` position: fixed; - display: flex; + display: ${props => props.hidden ? "none" : "flex"}; z-index: 500; justify-content: center; + gap: 8px; + padding: 14px; align-items: center; bottom: 16px; + color: white; + font-family: sans-serif; right: 16px; - width: 80px; - height: 80px; + font-weight: 500; border-radius: 9999px; background: ${props => props.bgcolor}; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); @@ -388,7 +426,7 @@ export const DocsGPTWidget = ({ heroDescription = 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.', size = 'small', theme = 'dark', - buttonIcon = 'https://d3dg1063dc54p9.cloudfront.net/widget/message.svg', + buttonIcon = 'https://d3dg1063dc54p9.cloudfront.net/widget/chat.svg', buttonBg = 'linear-gradient(to bottom right, #5AF0EC, #E80D9D)', collectFeedback = true, deafultOpen = false @@ -400,6 +438,7 @@ export const DocsGPTWidget = ({ const [open, setOpen] = React.useState(deafultOpen) const [eventInterrupt, setEventInterrupt] = React.useState(false); //click or scroll by user while autoScrolling const isBubbleHovered = useRef(false) + const widgetRef = useRef(null) const endMessageRef = React.useRef(null); const md = new MarkdownIt(); @@ -511,11 +550,23 @@ export const DocsGPTWidget = ({ const handleImageError = (event: React.SyntheticEvent) => { event.currentTarget.src = "https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png"; }; - + const handleClose = () => { + setOpen(false); + setTimeout(() => { + if(widgetRef.current) + widgetRef.current.style.display = "none" + }, 500); + }; + const handleOpen = () => { + setOpen(true) + if(widgetRef.current) + widgetRef.current.style.display = 'block' + } const dimensions = typeof size === 'object' && 'custom' in size ? sizesConfig.getCustom(size.custom) : sizesConfig[size]; + return ( {open && size === 'large' && @@ -523,13 +574,14 @@ export const DocsGPTWidget = ({ setOpen(false) }} /> } - setOpen(!open)} hidden={open}> - + - - {open && + + {
- setOpen(false)}> +
From 84377eed073f77c72351418ca5e387e03a402d9f Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Sat, 9 Nov 2024 00:44:56 +0530 Subject: [PATCH 2/3] (fix:widget) broken for modals --- .../src/components/DocsGPTWidget.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx index d23d72f4c..1d6537e61 100644 --- a/extensions/react-widget/src/components/DocsGPTWidget.tsx +++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx @@ -132,7 +132,7 @@ const StyledContainer = styled.div` overflow: auto; } `; -const FloatingButton = styled.div<{ bgcolor: string,hidden:boolean }>` +const FloatingButton = styled.div<{ bgcolor: string, hidden: boolean }>` position: fixed; display: ${props => props.hidden ? "none" : "flex"}; z-index: 500; @@ -552,15 +552,17 @@ export const DocsGPTWidget = ({ }; const handleClose = () => { setOpen(false); - setTimeout(() => { - if(widgetRef.current) + size !== "large" ? setTimeout(() => { + if (widgetRef.current) widgetRef.current.style.display = "none" - }, 500); + }, 500) + : + widgetRef.current && (widgetRef.current.style.display = "none") }; const handleOpen = () => { - setOpen(true) - if(widgetRef.current) - widgetRef.current.style.display = 'block' + setOpen(true); + if (widgetRef.current) + widgetRef.current.style.display = 'block' } const dimensions = typeof size === 'object' && 'custom' in size @@ -570,15 +572,13 @@ export const DocsGPTWidget = ({ return ( {open && size === 'large' && - { - setOpen(false) - }} /> + } - + {
From 06518c209a7e3d83ba20f3e7a3b301cd2eb7100d Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Sat, 9 Nov 2024 18:33:31 +0530 Subject: [PATCH 3/3] (feat:Widget) enhanced transition, buttonText param --- .../src/components/DocsGPTWidget.tsx | 56 +++++++++---------- extensions/react-widget/src/types/index.ts | 1 + 2 files changed, 27 insertions(+), 30 deletions(-) diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx index 1d6537e61..699803598 100644 --- a/extensions/react-widget/src/components/DocsGPTWidget.tsx +++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx @@ -69,10 +69,10 @@ const WidgetContainer = styled.div<{ modal?: boolean, isOpen?: boolean }>` display: none; transform-origin:100% 100%; &.open { - animation: createBox 500ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;; + animation: createBox 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } &.close { - animation: closeBox 500ms cubic-bezier(0.6, 0.05, 0.15, 1) forwards; + animation: closeBox 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } ${props => props.modal && "transform : translate(50%,50%);" @@ -80,33 +80,28 @@ const WidgetContainer = styled.div<{ modal?: boolean, isOpen?: boolean }>` align-items: center; text-align: left; @keyframes createBox { - 0% { - transform: scale(0.5); - } - 60% { - transform: scale(1.05) translate(-2%,-2%); - - } - 100% { - transform: scale(1); - - } -} + 0% { + transform: scale(0.5); + } + 90% { + transform: scale(1.02); + } + 100% { + transform: scale(1); + } + } -@keyframes closeBox { - 0% { - transform: scale(1) translate(0, 0); - - } - 40% { - transform: scale(1.05) translate(-2%, -2%); - - } - 100% { - transform: scale(0); - - } -} + @keyframes closeBox { + 0% { + transform: scale(1); + } + 10% { + transform: scale(1.02); + } + 100% { + transform: scale(0); + } + } `; const StyledContainer = styled.div` all: initial; @@ -427,6 +422,7 @@ export const DocsGPTWidget = ({ size = 'small', theme = 'dark', buttonIcon = 'https://d3dg1063dc54p9.cloudfront.net/widget/chat.svg', + buttonText = 'Ask a question', buttonBg = 'linear-gradient(to bottom right, #5AF0EC, #E80D9D)', collectFeedback = true, deafultOpen = false @@ -555,7 +551,7 @@ export const DocsGPTWidget = ({ size !== "large" ? setTimeout(() => { if (widgetRef.current) widgetRef.current.style.display = "none" - }, 500) + }, 250) : widgetRef.current && (widgetRef.current.style.display = "none") }; @@ -576,7 +572,7 @@ export const DocsGPTWidget = ({ } { diff --git a/extensions/react-widget/src/types/index.ts b/extensions/react-widget/src/types/index.ts index 0a57a9601..717efd924 100644 --- a/extensions/react-widget/src/types/index.ts +++ b/extensions/react-widget/src/types/index.ts @@ -29,6 +29,7 @@ export interface WidgetProps { }; theme?:THEME, buttonIcon?:string; + buttonText?:string; buttonBg?:string; collectFeedback?:boolean; deafultOpen?: boolean;