Merge pull request #416 from FlowiseAI/feature/FullPageChatbot-and-Re…

…actChatbot

Feature/Add full page chatbot and react chatbot

packages/server/src/Interface.ts

@@ -13,6 +13,7 @@ export interface IChatFlow {
     deployed: boolean
     updatedDate: Date
     createdDate: Date
+    chatbotConfig?: string
 }
 
 export interface IChatMessage {

packages/server/src/entity/ChatFlow.ts

@@ -19,6 +19,9 @@ export class ChatFlow implements IChatFlow {
     @Column()
     deployed: boolean
 
+    @Column({ nullable: true })
+    chatbotConfig?: string
+
     @CreateDateColumn()
     createdDate: Date
 

packages/ui/craco.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+    webpack: {
+        configure: {
+            module: {
+                rules: [
+                    {
+                        test: /\.m?js$/,
+                        resolve: {
+                            fullySpecified: false
+                        }
+                    }
+                ]
+            }
+        }
+    }
+}

packages/ui/package.json

@@ -16,6 +16,8 @@
         "@mui/x-data-grid": "^6.8.0",
         "@tabler/icons": "^1.39.1",
         "clsx": "^1.1.1",
+        "flowise-embed": "*",
+        "flowise-embed-react": "*",
         "formik": "^2.2.6",
         "framer-motion": "^4.1.13",
         "history": "^5.0.0",
@@ -27,6 +29,7 @@
         "prop-types": "^15.7.2",
         "react": "^18.2.0",
         "react-code-blocks": "^0.0.9-0",
+        "react-color": "^2.19.3",
         "react-datepicker": "^4.8.0",
         "react-device-detect": "^1.17.0",
         "react-dom": "^18.2.0",
@@ -47,11 +50,11 @@
         "yup": "^0.32.9"
     },
     "scripts": {
-        "start": "react-scripts start",
-        "dev": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject"
+        "start": "craco start",
+        "dev": "craco start",
+        "build": "craco build",
+        "test": "craco test",
+        "eject": "craco eject"
     },
     "babel": {
         "presets": [
@@ -72,6 +75,7 @@
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.15.8",
+        "@craco/craco": "^7.1.0",
         "@testing-library/jest-dom": "^5.11.10",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^12.8.3",

packages/ui/src/routes/ChatbotRoutes.js

@@ -0,0 +1,23 @@
+import { lazy } from 'react'
+
+// project imports
+import Loadable from 'ui-component/loading/Loadable'
+import MinimalLayout from 'layout/MinimalLayout'
+
+// canvas routing
+const ChatbotFull = Loadable(lazy(() => import('views/chatbot')))
+
+// ==============================|| CANVAS ROUTING ||============================== //
+
+const ChatbotRoutes = {
+    path: '/',
+    element: <MinimalLayout />,
+    children: [
+        {
+            path: '/chatbot/:id',
+            element: <ChatbotFull />
+        }
+    ]
+}
+
+export default ChatbotRoutes

packages/ui/src/routes/index.js

@@ -3,10 +3,11 @@ import { useRoutes } from 'react-router-dom'
 // routes
 import MainRoutes from './MainRoutes'
 import CanvasRoutes from './CanvasRoutes'
+import ChatbotRoutes from './ChatbotRoutes'
 import config from 'config'
 
 // ==============================|| ROUTING RENDER ||============================== //
 
 export default function ThemeRoutes() {
-    return useRoutes([MainRoutes, CanvasRoutes], config.basename)
+    return useRoutes([MainRoutes, CanvasRoutes, ChatbotRoutes], config.basename)
 }

packages/ui/src/views/canvas/CanvasHeader.js

@@ -13,7 +13,7 @@ import { IconSettings, IconChevronLeft, IconDeviceFloppy, IconPencil, IconCheck,
 // project imports
 import Settings from 'views/settings'
 import SaveChatflowDialog from 'ui-component/dialog/SaveChatflowDialog'
-import APICodeDialog from 'ui-component/dialog/APICodeDialog'
+import APICodeDialog from 'views/chatflows/APICodeDialog'
 
 // API
 import chatflowsApi from 'api/chatflows'
@@ -107,7 +107,8 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
             title: 'Embed in website or use as API',
             chatflowid: chatflow.id,
             chatflowApiKeyId: chatflow.apikeyid,
-            isFormDataRequired
+            isFormDataRequired,
+            chatbotConfig: chatflow.chatbotConfig
         })
         setAPIDialogOpen(true)
     }

packages/ui/src/views/chatbot/index.js

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react'
+import { baseURL } from 'store/constant'
+import axios from 'axios'
+import { FullPageChat } from 'flowise-embed-react'
+
+// ==============================|| Chatbot ||============================== //
+
+const fetchChatflow = async ({ chatflowId }) => {
+    const username = localStorage.getItem('username')
+    const password = localStorage.getItem('password')
+
+    let chatflow = await axios
+        .get(`${baseURL}/api/v1/chatflows/${chatflowId}`, { auth: username && password ? { username, password } : undefined })
+        .then(async function (response) {
+            return response.data
+        })
+        .catch(function (error) {
+            console.error(error)
+        })
+    return chatflow
+}
+
+const ChatbotFull = () => {
+    const URLpath = document.location.pathname.toString().split('/')
+    const chatflowId = URLpath[URLpath.length - 1] === 'chatbot' ? '' : URLpath[URLpath.length - 1]
+
+    const [chatflow, setChatflow] = useState(null)
+    const [chatbotTheme, setChatbotTheme] = useState({})
+
+    useEffect(() => {
+        ;(async () => {
+            const fetchData = async () => {
+                let response = await fetchChatflow({ chatflowId })
+                setChatflow(response)
+                if (response.chatbotConfig) {
+                    try {
+                        setChatbotTheme(JSON.parse(response.chatbotConfig))
+                    } catch (e) {
+                        console.error(e)
+                        setChatbotTheme({})
+                    }
+                }
+            }
+            fetchData()
+        })()
+    }, [chatflowId])
+
+    return (
+        <>
+            {!chatflow || chatflow.apikeyid ? (
+                <p>Invalid Chatbot</p>
+            ) : (
+                <FullPageChat chatflowid={chatflow.id} apiHost={baseURL} theme={{ chatWindow: chatbotTheme }} />
+            )}
+        </>
+    )
+}
+
+export default ChatbotFull