From 7c0009991915290711ec00a2eb1d9005c5755ac3 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Fri, 8 Nov 2024 19:21:19 +0530 Subject: [PATCH 1/5] (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 53923fb8..d23d72f4 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/5] (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 d23d72f4..1d6537e6 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/5] (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 1d6537e6..69980359 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%); + 0% { + transform: scale(0.5); + } + 90% { + transform: scale(1.02); + } + 100% { + transform: scale(1); + } + } - } - 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 0a57a960..717efd92 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; From 33fe0ffc933c7962d97afcf996538abc3fde038a Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Sat, 9 Nov 2024 18:41:18 +0530 Subject: [PATCH 4/5] (upgrade: widget) v0.4.6 --- extensions/react-widget/package-lock.json | 4 ++-- extensions/react-widget/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/extensions/react-widget/package-lock.json b/extensions/react-widget/package-lock.json index fc849a26..5b6f3fb2 100644 --- a/extensions/react-widget/package-lock.json +++ b/extensions/react-widget/package-lock.json @@ -1,12 +1,12 @@ { "name": "docsgpt", - "version": "0.4.5", + "version": "0.4.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "docsgpt", - "version": "0.4.5", + "version": "0.4.6", "license": "Apache-2.0", "dependencies": { "@babel/plugin-transform-flow-strip-types": "^7.23.3", diff --git a/extensions/react-widget/package.json b/extensions/react-widget/package.json index 0f381d69..a8e437da 100644 --- a/extensions/react-widget/package.json +++ b/extensions/react-widget/package.json @@ -1,6 +1,6 @@ { "name": "docsgpt", - "version": "0.4.5", + "version": "0.4.6", "private": false, "description": "DocsGPT 🦖 is an innovative open-source tool designed to simplify the retrieval of information from project documentation using advanced GPT models 🤖.", "source": "./src/index.html", From ef24318c1771996c80c2a9ba3e722215e1750042 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Sat, 9 Nov 2024 18:42:11 +0530 Subject: [PATCH 5/5] (upgrade:docs) widget version --- docs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/package.json b/docs/package.json index ee746994..4eeb4df0 100644 --- a/docs/package.json +++ b/docs/package.json @@ -7,7 +7,7 @@ "license": "MIT", "dependencies": { "@vercel/analytics": "^1.1.1", - "docsgpt": "^0.4.5", + "docsgpt": "^0.4.6", "next": "^14.2.12", "nextra": "^2.13.2", "nextra-theme-docs": "^2.13.2",