Sultan
/
Flowise
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add embed dialog

This commit is contained in:
Henry 2023-04-24 17:59:51 +01:00
parent e6f5173331
commit 1db2cde22b
4 changed files with 48 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/embed/package.json
View File

@ -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",

1
packages/ui/src/assets/images/embed.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

26
packages/ui/src/ui-component/dialog/APICodeDialog.js
View File

@ -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)}

44
packages/ui/src/views/canvas/CanvasHeader.js
View File

@ -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'