From f456500f3a1482540a4f7750204e9d3853b6d2dc Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Wed, 28 Aug 2024 04:30:47 +0530 Subject: [PATCH 1/6] size: add large --- .../src/components/DocsGPTWidget.tsx | 70 ++++++++++++------- extensions/react-widget/src/types/index.ts | 2 +- 2 files changed, 47 insertions(+), 25 deletions(-) diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx index a6228a15..79b47a5c 100644 --- a/extensions/react-widget/src/components/DocsGPTWidget.tsx +++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx @@ -59,16 +59,33 @@ const GlobalStyles = createGlobalStyle` background-color: #646464; } `; -const WidgetContainer = styled.div` +const Overlay = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 999; + transition: opacity 0.5s; +` +const WidgetContainer = styled.div<{ modal: boolean }>` display: block; position: fixed; - right: 10px; - bottom: 10px; + right: ${props => props.modal ? '50%' : '10px'}; + bottom: ${props => props.modal ? '50%' : '10px'}; z-index: 1000; display: flex; + ${props => props.modal && + "transform : translate(50%,50%);" + } flex-direction: column; align-items: center; text-align: left; + @media only screen and (max-width: 768px) { + max-height: 100vh !important; + overflow: auto; + } `; const StyledContainer = styled.div` display: flex; @@ -83,7 +100,7 @@ const StyledContainer = styled.div` box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1); transition: visibility 0.3s, opacity 0.3s; `; -const FloatingButton = styled.div<{ bg: string }>` +const FloatingButton = styled.div<{ bgColor: string }>` position: fixed; display: flex; z-index: 500; @@ -94,7 +111,7 @@ const FloatingButton = styled.div<{ bg: string }>` width: 5rem; height: 5rem; border-radius: 9999px; - background: ${props => props.bg}; + background: ${props => props.bgColor}; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); cursor: pointer; &:hover { @@ -154,10 +171,12 @@ const Description = styled.p` color: ${props => props.theme.secondary.text}; margin-top: 0; `; + const Conversation = styled.div<{ size: string }>` - min-height: 300px; - height: ${props => props.size === 'medium' ? '70vh' : '320px'}; - width: ${props => props.size === 'medium' ? '28vw' : '400px'}; + min-height: 250px; + max-width: 968px; + height: ${props => props.size === 'large' ? '75vh' : props.size === 'medium' ? '70vh' : '320px'}; + width: ${props => props.size === 'large' ? '60vw' : props.size === 'medium' ? '28vw' : '400px'}; padding-inline: 0.5rem; border-radius: 0.375rem; text-align: left; @@ -167,10 +186,9 @@ const Conversation = styled.div<{ size: string }>` @media only screen and (max-width: 768px) { width: 90vw !important; } - @media only screen and (min-width:768px ) and (max-width: 1024px) { - width:${props => props.size === 'medium' ? '60vw' : '400px'} !important; + @media only screen and (min-width:768px ) and (max-width: 1280px) { + width:${props => props.size === 'large' ? '90vw' : props.size === 'medium' ? '60vw' : '400px'} !important; } - `; const MessageBubble = styled.div<{ type: MESSAGE_TYPE }>` @@ -223,16 +241,15 @@ const DotAnimation = styled.div` const Delay = styled(DotAnimation) <{ delay: number }>` animation-delay: ${props => props.delay + 'ms'}; `; -const PromptContainer = styled.form` +const PromptContainer = styled.form<{ size: string }>` background-color: transparent; - height: 40px; + height: ${props => props.size == 'large' ? '60px' : '40px'}; margin: 16px; display: flex; justify-content: space-evenly; `; const StyledInput = styled.input` width: 100%; - height: 36px; border: 1px solid #686877; padding-left: 12px; background-color: transparent; @@ -241,14 +258,14 @@ const StyledInput = styled.input` color: ${props => props.theme.text}; outline: none; `; -const StyledButton = styled.button` +const StyledButton = styled.button<{ size: string }>` display: flex; justify-content: center; align-items: center; background-image: linear-gradient(to bottom right, #5AF0EC, #E80D9D); border-radius: 6px; - width: 36px; - height: 36px; + min-width: ${props => props.size === 'large' ? '60px' : '36px'}; + height: ${props => props.size === 'large' ? '60px' : '36px'}; margin-left:8px; padding: 0px; border: none; @@ -269,6 +286,7 @@ const HeroContainer = styled.div` align-items: middle; transform: translate(-50%, -50%); width: 80%; + max-width: 500px; background-image: linear-gradient(to bottom right, #5AF0EC, #ff1bf4); border-radius: 10px; margin: 0 auto; @@ -347,7 +365,6 @@ export const DocsGPTWidget = ({ const lastChild = element?.children?.[element.children.length - 1] lastChild && scrollToBottom(lastChild) }; - React.useEffect(() => { !eventInterrupt && scrollToBottom(endMessageRef.current); }, [queries.length, queries[queries.length - 1]?.response]); @@ -409,12 +426,16 @@ export const DocsGPTWidget = ({ }; return ( - + {open && size === 'large' && + { + setOpen(false) + }} /> + } + setOpen(!open)} hidden={open}> + + + - {!open && - setOpen(true)} hidden={open}> - - } {open &&
setOpen(false)}> @@ -479,13 +500,14 @@ export const DocsGPTWidget = ({ : } - setPrompt(event.target.value)} type='text' placeholder="What do you want to do?" /> diff --git a/extensions/react-widget/src/types/index.ts b/extensions/react-widget/src/types/index.ts index 9c49063f..cb46f06b 100644 --- a/extensions/react-widget/src/types/index.ts +++ b/extensions/react-widget/src/types/index.ts @@ -19,7 +19,7 @@ export interface WidgetProps { description?: string; heroTitle?: string; heroDescription?: string; - size?: 'small' | 'medium'; + size?: 'small' | 'medium' | 'large'; theme?:THEME, buttonIcon?:string; buttonBg?:string; From cef1167ef1aa68b4b3ff88699188178f803a5e2b Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Wed, 28 Aug 2024 16:02:10 +0530 Subject: [PATCH 2/6] update script --- extensions/react-widget/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/extensions/react-widget/package.json b/extensions/react-widget/package.json index 94ad39ea..e506e6e1 100644 --- a/extensions/react-widget/package.json +++ b/extensions/react-widget/package.json @@ -31,6 +31,7 @@ }, "scripts": { "build": "parcel build src/main.tsx --public-url ./", + "build:react": "parcel build index.ts", "dev": "parcel src/index.html -p 3000", "test": "jest", "lint": "eslint", From edc54c7120ad7128f0ea344c14f137c184145049 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Wed, 28 Aug 2024 16:03:43 +0530 Subject: [PATCH 3/6] update script --- extensions/react-widget/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/react-widget/package.json b/extensions/react-widget/package.json index e506e6e1..8182a781 100644 --- a/extensions/react-widget/package.json +++ b/extensions/react-widget/package.json @@ -31,7 +31,7 @@ }, "scripts": { "build": "parcel build src/main.tsx --public-url ./", - "build:react": "parcel build index.ts", + "build:react": "parcel build src/index.ts", "dev": "parcel src/index.html -p 3000", "test": "jest", "lint": "eslint", From b60b473e02519abdedf585a67d9a5bad7ebdc94f Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Thu, 29 Aug 2024 03:08:33 +0530 Subject: [PATCH 4/6] fix(warn): update prop name --- extensions/react-widget/src/components/DocsGPTWidget.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx index 79b47a5c..e7d37528 100644 --- a/extensions/react-widget/src/components/DocsGPTWidget.tsx +++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx @@ -100,7 +100,7 @@ const StyledContainer = styled.div` box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1); transition: visibility 0.3s, opacity 0.3s; `; -const FloatingButton = styled.div<{ bgColor: string }>` +const FloatingButton = styled.div<{ bgcolor: string }>` position: fixed; display: flex; z-index: 500; @@ -111,7 +111,7 @@ const FloatingButton = styled.div<{ bgColor: string }>` width: 5rem; height: 5rem; border-radius: 9999px; - background: ${props => props.bgColor}; + background: ${props => props.bgcolor}; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); cursor: pointer; &:hover { @@ -431,10 +431,10 @@ export const DocsGPTWidget = ({ setOpen(false) }} /> } - setOpen(!open)} hidden={open}> + setOpen(!open)} hidden={open}> - + {open &&
From 130eb56d095eb0b3a5c0781dad0c82e4b7caa651 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Thu, 29 Aug 2024 03:10:27 +0530 Subject: [PATCH 5/6] add script: automate publish --- extensions/react-widget/publish.sh | 42 ++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100755 extensions/react-widget/publish.sh diff --git a/extensions/react-widget/publish.sh b/extensions/react-widget/publish.sh new file mode 100755 index 00000000..1edb61fb --- /dev/null +++ b/extensions/react-widget/publish.sh @@ -0,0 +1,42 @@ +#!/bin/bash +## chmod +x publish.sh - to upgrade ownership +# Exit immediately if a command exits with a non-zero status. +set -e + +# Define the function to update package.json and publish the package +cat package.json >> package_copy.json +publish_package() { + PACKAGE_NAME=$1 + BUILD_COMMAND=$2 + # Update package name in package.json + jq --arg name "$PACKAGE_NAME" '.name=$name' package.json > temp.json && mv temp.json package.json + + # Remove 'target' key if the package name is 'widget-react' + if [ "$PACKAGE_NAME" = "docsgpt-react" ]; then + jq 'del(.targets)' package.json > temp.json && mv temp.json package.json + fi + if [ -d "dist" ]; then + echo "Deleting existing dist directory..." + rm -rf dist + fi + # Increment version (patch by default) + #npm version patch + + # Run the build command + npm run "$BUILD_COMMAND" + + # Publish to npm + npm pack + echo "Published ${PACKAGE_NAME}" +} + +# Publish widget package +publish_package "docsgpt" "build" + +# Publish widget-react package +publish_package "docsgpt-react" "build:react" + +# Clean up +mv package_copy.json package.json +rm -rf package_copy.json +echo "---Process completed---" \ No newline at end of file From a83a56eecd8776986cba4681c06d672ed36fa430 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Thu, 29 Aug 2024 03:14:57 +0530 Subject: [PATCH 6/6] update script --- extensions/react-widget/publish.sh | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/extensions/react-widget/publish.sh b/extensions/react-widget/publish.sh index 1edb61fb..0441d50c 100755 --- a/extensions/react-widget/publish.sh +++ b/extensions/react-widget/publish.sh @@ -1,9 +1,6 @@ #!/bin/bash -## chmod +x publish.sh - to upgrade ownership -# Exit immediately if a command exits with a non-zero status. +## chmod +x publish.sh - to upgrade ownership set -e - -# Define the function to update package.json and publish the package cat package.json >> package_copy.json publish_package() { PACKAGE_NAME=$1 @@ -11,29 +8,29 @@ publish_package() { # Update package name in package.json jq --arg name "$PACKAGE_NAME" '.name=$name' package.json > temp.json && mv temp.json package.json - # Remove 'target' key if the package name is 'widget-react' + # Remove 'target' key if the package name is 'docsgpt-react' if [ "$PACKAGE_NAME" = "docsgpt-react" ]; then jq 'del(.targets)' package.json > temp.json && mv temp.json package.json fi + if [ -d "dist" ]; then echo "Deleting existing dist directory..." rm -rf dist fi - # Increment version (patch by default) - #npm version patch - # Run the build command + npm version patch + npm run "$BUILD_COMMAND" # Publish to npm - npm pack + npm publish echo "Published ${PACKAGE_NAME}" } -# Publish widget package +# Publish docsgpt package publish_package "docsgpt" "build" -# Publish widget-react package +# Publish docsgpt-react package publish_package "docsgpt-react" "build:react" # Clean up