From 1db2cde22bf98d4e50c40c65ba528cac1600b65d Mon Sep 17 00:00:00 2001
From: Henry <hzj94@hotmail.com>
Date: Mon, 24 Apr 2023 17:59:51 +0100
Subject: [PATCH] add embed dialog

---
 packages/embed/package.json                   |  2 +-
 packages/ui/src/assets/images/embed.svg       |  1 +
 .../src/ui-component/dialog/APICodeDialog.js  | 26 +++++++++--
 packages/ui/src/views/canvas/CanvasHeader.js  | 44 ++++++++++---------
 4 files changed, 48 insertions(+), 25 deletions(-)
 create mode 100644 packages/ui/src/assets/images/embed.svg

diff --git a/packages/embed/package.json b/packages/embed/package.json
index 07d67a131..eda390ba7 100644
--- a/packages/embed/package.json
+++ b/packages/embed/package.json
@@ -1,6 +1,6 @@
 {
     "name": "flowise-embed",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "Javascript library to display flowise chatbot on your website",
     "type": "module",
     "main": "dist/index.js",
diff --git a/packages/ui/src/assets/images/embed.svg b/packages/ui/src/assets/images/embed.svg
new file mode 100644
index 000000000..d20ceab0c
--- /dev/null
+++ b/packages/ui/src/assets/images/embed.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" focusable="false" class="chakra-icon css-lbf1w4" id="Capa_1" enable-background="new 0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><g><path d="m512 141.17v229.66c0 39.96-32.51 72.47-72.46 72.47h-367.08c-39.95 0-72.46-32.51-72.46-72.47v-229.66c0-39.96 32.51-72.47 72.46-72.47h367.08c39.95 0 72.46 32.51 72.46 72.47z" fill="#6aa9ff"></path></g><path d="m512 141.17v229.66c0 39.96-32.51 72.47-72.46 72.47h-183.54v-374.6h183.54c39.95 0 72.46 32.51 72.46 72.47z" fill="#4987ea"></path><g><path d="m146.16 349.223-78.4-78.4c-5.858-5.858-5.858-15.355 0-21.213l86.833-86.833c5.857-5.858 15.355-5.858 21.213 0s5.858 15.355 0 21.213l-76.226 76.226 67.793 67.794c5.858 5.858 5.858 15.355 0 21.213-5.857 5.858-15.355 5.859-21.213 0z" fill="#f0f7ff"></path></g><g><path d="m336.194 349.223c-5.858-5.858-5.858-15.355 0-21.213l76.226-76.227-67.793-67.794c-5.858-5.858-5.858-15.355 0-21.213 5.857-5.858 15.355-5.858 21.213 0l78.4 78.4c5.858 5.858 5.858 15.355 0 21.213l-86.833 86.833c-5.856 5.859-15.355 5.86-21.213.001z" fill="#dfe7f4"></path></g><g><path d="m309.54 148.7-53.54 151.6-25.78 72.99c-2.792 7.888-11.443 11.903-19.14 9.15-7.81-2.76-11.91-11.33-9.15-19.14l54.07-153.1 25.25-71.49c2.76-7.81 11.33-11.91 19.14-9.15s11.91 11.33 9.15 19.14z" fill="#f0f7ff"></path></g><path d="m309.54 148.7-53.54 151.6v-90.1l25.25-71.49c2.76-7.81 11.33-11.91 19.14-9.15s11.91 11.33 9.15 19.14z" fill="#dfe7f4"></path></g></svg>
\ No newline at end of file
diff --git a/packages/ui/src/ui-component/dialog/APICodeDialog.js b/packages/ui/src/ui-component/dialog/APICodeDialog.js
index e23e91b26..dc573347a 100644
--- a/packages/ui/src/ui-component/dialog/APICodeDialog.js
+++ b/packages/ui/src/ui-component/dialog/APICodeDialog.js
@@ -8,6 +8,7 @@ import { baseURL } from 'store/constant'
 import pythonSVG from 'assets/images/python.svg'
 import javascriptSVG from 'assets/images/javascript.svg'
 import cURLSVG from 'assets/images/cURL.svg'
+import EmbedSVG from 'assets/images/embed.svg'
 
 function TabPanel(props) {
     const { children, value, index, ...other } = props
@@ -39,7 +40,7 @@ function a11yProps(index) {
 
 const APICodeDialog = ({ show, dialogProps, onCancel }) => {
     const portalElement = document.getElementById('portal')
-    const codes = ['Python', 'JavaScript', 'cURL']
+    const codes = ['Embed', 'Python', 'JavaScript', 'cURL']
     const [value, setValue] = useState(0)
 
     const handleChange = (event, newValue) => {
@@ -74,6 +75,15 @@ output = query({
     const result = await response.json();
     return result;
 }
+`
+        } else if (codeLang === 'Embed') {
+            return `<script type="module">
+    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
+    Chatbot.init({
+        chatflowid: "${dialogProps.chatflowid}",
+        apiHost: "${baseURL}",
+    })
+</script>
 `
         } else if (codeLang === 'cURL') {
             return `curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\
@@ -86,7 +96,7 @@ output = query({
     const getLang = (codeLang) => {
         if (codeLang === 'Python') {
             return 'python'
-        } else if (codeLang === 'JavaScript') {
+        } else if (codeLang === 'JavaScript' || codeLang === 'Embed') {
             return 'javascript'
         } else if (codeLang === 'cURL') {
             return 'bash'
@@ -99,6 +109,8 @@ output = query({
             return pythonSVG
         } else if (codeLang === 'JavaScript') {
             return javascriptSVG
+        } else if (codeLang === 'Embed') {
+            return EmbedSVG
         } else if (codeLang === 'cURL') {
             return cURLSVG
         }
@@ -123,7 +135,7 @@ output = query({
                         <Tab
                             icon={
                                 <img
-                                    style={{ objectFit: 'cover', height: 'auto', width: 'auto', marginLeft: 10 }}
+                                    style={{ objectFit: 'cover', height: 15, width: 'auto', marginLeft: 10 }}
                                     src={getSVG(codeLang)}
                                     alt='code'
                                 />
@@ -138,6 +150,14 @@ output = query({
                 <div style={{ marginTop: 10 }}></div>
                 {codes.map((codeLang, index) => (
                     <TabPanel key={index} value={value} index={index}>
+                        {codeLang === 'Embed' && (
+                            <>
+                                <span>
+                                    Paste this anywhere in the <code>{`<body>`}</code> tag of your html file
+                                </span>
+                                <div style={{ height: 10 }}></div>
+                            </>
+                        )}
                         <CopyBlock
                             theme={atomOneDark}
                             text={getCode(codeLang)}
diff --git a/packages/ui/src/views/canvas/CanvasHeader.js b/packages/ui/src/views/canvas/CanvasHeader.js
index 266deb70a..ad6d4d4c8 100644
--- a/packages/ui/src/views/canvas/CanvasHeader.js
+++ b/packages/ui/src/views/canvas/CanvasHeader.js
@@ -81,7 +81,7 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
 
     const onAPIDialogClick = () => {
         setAPIDialogProps({
-            title: 'Use this chatflow with API',
+            title: 'Embed in your application or use as API',
             chatflowid: chatflow.id
         })
         setAPIDialogOpen(true)
@@ -230,26 +230,28 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
                 )}
             </Box>
             <Box>
-                <ButtonBase title='API Endpoint' sx={{ borderRadius: '50%', mr: 2 }}>
-                    <Avatar
-                        variant='rounded'
-                        sx={{
-                            ...theme.typography.commonAvatar,
-                            ...theme.typography.mediumAvatar,
-                            transition: 'all .2s ease-in-out',
-                            background: theme.palette.canvasHeader.deployLight,
-                            color: theme.palette.canvasHeader.deployDark,
-                            '&:hover': {
-                                background: theme.palette.canvasHeader.deployDark,
-                                color: theme.palette.canvasHeader.deployLight
-                            }
-                        }}
-                        color='inherit'
-                        onClick={onAPIDialogClick}
-                    >
-                        <IconWorldWww stroke={1.5} size='1.3rem' />
-                    </Avatar>
-                </ButtonBase>
+                {chatflow && chatflow.id && (
+                    <ButtonBase title='Embed/API' sx={{ borderRadius: '50%', mr: 2 }}>
+                        <Avatar
+                            variant='rounded'
+                            sx={{
+                                ...theme.typography.commonAvatar,
+                                ...theme.typography.mediumAvatar,
+                                transition: 'all .2s ease-in-out',
+                                background: theme.palette.canvasHeader.deployLight,
+                                color: theme.palette.canvasHeader.deployDark,
+                                '&:hover': {
+                                    background: theme.palette.canvasHeader.deployDark,
+                                    color: theme.palette.canvasHeader.deployLight
+                                }
+                            }}
+                            color='inherit'
+                            onClick={onAPIDialogClick}
+                        >
+                            <IconWorldWww stroke={1.5} size='1.3rem' />
+                        </Avatar>
+                    </ButtonBase>
+                )}
                 <ButtonBase title='Save Chatflow' sx={{ borderRadius: '50%', mr: 2 }}>
                     <Avatar
                         variant='rounded'