add chat embed code

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>

packages/ui/src/ui-component/dialog/APICodeDialog.js

@@ -18,6 +18,7 @@ import { SET_CHATFLOW } from 'store/actions'
 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'
 
 // API
 import apiKeyApi from 'api/apikey'
@@ -117,11 +118,21 @@ const getFormDataExamplesForCurl = (configData) => {
     return finalStr
 }
 
+const embedCode = (chatflowid) => {
+    return `<script type="module">
+    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed@latest/dist/web.js"
+    Chatbot.init({
+        chatflowid: "${chatflowid}",
+        apiHost: "${baseURL}",
+    })
+</script>`
+}
+
 const APICodeDialog = ({ show, dialogProps, onCancel }) => {
     const portalElement = document.getElementById('portal')
     const navigate = useNavigate()
     const dispatch = useDispatch()
-    const codes = ['Python', 'JavaScript', 'cURL']
+    const codes = ['Embed', 'Python', 'JavaScript', 'cURL']
     const [value, setValue] = useState(0)
     const [keyOptions, setKeyOptions] = useState([])
     const [apiKeys, setAPIKeys] = useState([])
@@ -196,6 +207,8 @@ output = query({
             return `curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\
      -X POST \\
      -d '{"question": "Hey, how are you?"}'`
+        } else if (codeLang === 'Embed') {
+            return embedCode(dialogProps.chatflowid)
         }
         return ''
     }
@@ -236,6 +249,8 @@ output = query({
      -X POST \\
      -d '{"question": "Hey, how are you?"}'
      -H "Authorization: Bearer ${selectedApiKey?.apiKey}"`
+        } else if (codeLang === 'Embed') {
+            return embedCode(dialogProps.chatflowid)
         }
         return ''
     }
@@ -243,7 +258,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'
@@ -256,6 +271,8 @@ output = query({
             return pythonSVG
         } else if (codeLang === 'JavaScript') {
             return javascriptSVG
+        } else if (codeLang === 'Embed') {
+            return EmbedSVG
         } else if (codeLang === 'cURL') {
             return cURLSVG
         }
@@ -458,11 +475,7 @@ curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\
                             {codes.map((codeLang, index) => (
                                 <Tab
                                     icon={
-                                        <img
+                                        <img style={{ objectFit: 'cover', height: 15, width: 'auto' }} src={getSVG(codeLang)} alt='code' />
-                                            style={{ objectFit: 'cover', height: 'auto', width: 'auto' }}
-                                            src={getSVG(codeLang)}
-                                            alt='code'
-                                        />
                                     }
                                     iconPosition='start'
                                     key={index}
@@ -472,19 +485,29 @@ curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\
                             ))}
                         </Tabs>
                     </div>
-                    <div style={{ flex: 20 }}>
+                    {value !== 0 && (
-                        <Dropdown
+                        <div style={{ flex: 20 }}>
-                            name='SelectKey'
+                            <Dropdown
-                            disableClearable={true}
+                                name='SelectKey'
-                            options={keyOptions}
+                                disableClearable={true}
-                            onSelect={(newValue) => onApiKeySelected(newValue)}
+                                options={keyOptions}
-                            value={dialogProps.chatflowApiKeyId ?? chatflowApiKeyId ?? 'Choose an API key'}
+                                onSelect={(newValue) => onApiKeySelected(newValue)}
-                        />
+                                value={dialogProps.chatflowApiKeyId ?? chatflowApiKeyId ?? 'Choose an API key'}
-                    </div>
+                            />
+                        </div>
+                    )}
                 </div>
                 <div style={{ marginTop: 10 }}></div>
                 {codes.map((codeLang, index) => (
                     <TabPanel key={index} value={value} index={index}>
+                        {value === 0 && (
+                            <>
+                                <span>
+                                    Paste this anywhere in the <code>{`<body>`}</code> tag of your html file
+                                </span>
+                                <div style={{ height: 10 }}></div>
+                            </>
+                        )}
                         <CopyBlock
                             theme={atomOneDark}
                             text={chatflowApiKeyId ? getCodeWithAuthorization(codeLang) : getCode(codeLang)}
@@ -492,8 +515,8 @@ curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\
                             showLineNumbers={false}
                             wrapLines
                         />
-                        <CheckboxInput label='Show Input Config' value={checkboxVal} onChange={onCheckBoxChanged} />
+                        {value !== 0 && <CheckboxInput label='Show Input Config' value={checkboxVal} onChange={onCheckBoxChanged} />}
-                        {checkboxVal && getConfigApi.data && getConfigApi.data.length > 0 && (
+                        {value !== 0 && checkboxVal && getConfigApi.data && getConfigApi.data.length > 0 && (
                             <>
                                 <TableViewOnly rows={getConfigApi.data} columns={Object.keys(getConfigApi.data[0])} />
                                 <CopyBlock

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 website or use as API',
             chatflowid: chatflow.id,
             chatflowApiKeyId: chatflow.apikeyid
         })