FlowiseAI · 0xi4o · Jan 25, 2024 · Jan 30, 2024 · Jan 30, 2024 · Jan 30, 2024
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,4 @@
 node_modules
 dist
+
+api.json
diff --git a/.gitignore b/.gitignore
@@ -12,7 +12,8 @@
 **/*.log
 
 ## build
-**/dist
+packages/**/dist
+embeds/react/dist
 **/build
 
 ## temp

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -95,11 +95,31 @@ Flowise has 3 different modules in a single mono repository.
     ```bash
     pnpm dev
     ```
+
+    when making changes to the Flowise dashboard. 
 
     Any changes made in `packages/ui` or `packages/server` will be reflected on [http://localhost:8080](http://localhost:8080)
 
     For changes made in `packages/components`, run `pnpm build` again to pickup the changes.
 
+    - Run
+
+    ```bash
+    pnpm dev:embed
+    ```
+
+   when making changes to the Flowise embed.
+
+   Any changes made in `embeds/js` or `embeds/react` will be reflected on [http://localhost:5173](http://localhost:5173)
+
+    - Run
+
+    ```bash
+    pnpm dev:all
+    ```
+
+   when making changes to both dashboard and embed.
+
 10. After making all the changes, run
 
     ```bash

diff --git a/embeds/demo/react/.eslintrc.cjs b/embeds/demo/react/.eslintrc.cjs
@@ -0,0 +1,11 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
+    ignorePatterns: ['dist', '.eslintrc.cjs'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['react-refresh'],
+    rules: {
+        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }]
+    }
+}
diff --git a/embeds/demo/react/.gitignore b/embeds/demo/react/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/embeds/demo/react/index.html b/embeds/demo/react/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite + React + TS</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+        <!-- <script type="module"> -->
+        <!--     import Chatbot from 'flowise-embed/dist/web.js' -->
+        <!--     Chatbot.init({ -->
+        <!--         chatflowid: '<chatflowid>', -->
+        <!--         apiHost: 'http://localhost:3000' -->
+        <!--     }) -->
+        <!-- </script> -->
+    </body>
+</html>
diff --git a/embeds/demo/react/package.json b/embeds/demo/react/package.json
@@ -0,0 +1,30 @@
+{
+    "name": "flowise-embed-demo",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "flowise-embed": "workspace:*",
+        "flowise-embed-react": "workspace:*",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.43",
+        "@types/react-dom": "^18.2.17",
+        "@typescript-eslint/eslint-plugin": "^6.14.0",
+        "@typescript-eslint/parser": "^6.14.0",
+        "@vitejs/plugin-react": "^4.2.1",
+        "eslint": "^8.55.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.5",
+        "typescript": "^5.2.2",
+        "vite": "^5.0.8"
+    }
+}
diff --git a/embeds/demo/react/public/flowise.png b/embeds/demo/react/public/flowise.png
diff --git a/embeds/demo/react/public/vite.svg b/embeds/demo/react/public/vite.svg
diff --git a/embeds/demo/react/src/App.css b/embeds/demo/react/src/App.css
@@ -0,0 +1,60 @@
+#root {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+}
+.logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    a:nth-of-type(2) .logo {
+        animation: logo-spin infinite 20s linear;
+    }
+}
+
+.card {
+    padding: 2em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.card > p {
+    font-size: 1.2em;
+    text-align: center;
+}
+
+.card ul {
+    list-style: none;
+}
+
+code {
+    background-color: gray;
+    padding: 0.25em 0.5em;
+    border-radius: 0.5em;
+}
+
+.read-the-docs {
+    color: #888;
+}
diff --git a/embeds/demo/react/src/App.tsx b/embeds/demo/react/src/App.tsx
@@ -0,0 +1,32 @@
+import { BubbleChat } from 'flowise-embed-react'
+import flowiseLogo from '/flowise.png'
+import './App.css'
+
+function App() {
+    return (
+        <>
+            <div>
+                <a href='https://flowiseai.com' target='_blank'>
+                    <img src={flowiseLogo} className='logo' alt='Vite logo' />
+                </a>
+            </div>
+            <h1>Test Bench</h1>
+            <div className='card'>
+                <p>
+                    Change <code>chatflowid</code> and <code>apiHost</code> for the embed component in: <code>src/App.tsx</code> (React) and{' '}
+                    <code>index.html</code> (JS)
+                </p>
+                <p>
+                    Check the{' '}
+                    <a href='https://docs.flowiseai.com/using-flowise/embed' target='_blank'>
+                        Flowise documentation
+                    </a>{' '}
+                    to see how to embed the chat widget on your site.
+                </p>
+            </div>
+            <BubbleChat chatflowid='your-chatflow-id' apiHost='http://localhost:3000' />
+        </>
+    )
+}
+
+export default App
diff --git a/embeds/demo/react/src/assets/react.svg b/embeds/demo/react/src/assets/react.svg
diff --git a/embeds/demo/react/src/index.css b/embeds/demo/react/src/index.css
@@ -0,0 +1,68 @@
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+a:hover {
+    color: #535bf2;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
+}
+button:hover {
+    border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+    a:hover {
+        color: #747bff;
+    }
+    button {
+        background-color: #f9f9f9;
+    }
+}
diff --git a/embeds/demo/react/src/main.tsx b/embeds/demo/react/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+)
diff --git a/embeds/demo/react/src/vite-env.d.ts b/embeds/demo/react/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/embeds/demo/react/tsconfig.json b/embeds/demo/react/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src"],
+    "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/embeds/demo/react/tsconfig.node.json b/embeds/demo/react/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["vite.config.ts"]
+}
diff --git a/embeds/demo/react/vite.config.ts b/embeds/demo/react/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()]
+})
diff --git a/embeds/js/.eslintrc.cjs b/embeds/js/.eslintrc.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+    root: true,
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:solid/typescript'],
+    plugins: ['@typescript-eslint', 'solid'],
+    parser: '@typescript-eslint/parser',
+    ignorePatterns: ['**/*.md'],
+    rules: {
+        '@next/next/no-img-element': 'off',
+        '@next/next/no-html-link-for-pages': 'off',
+        'solid/no-innerhtml': 'off',
+        '@typescript-eslint/no-namespace': 'off',
+        '@typescript-eslint/no-explicit-any': 'off'
+    }
+}
diff --git a/embeds/js/.npmignore b/embeds/js/.npmignore
@@ -0,0 +1,4 @@
+src
+rollup.config.js
+tailwind.config.cjs
+tsconfig.json
diff --git a/embeds/js/.prettierignore b/embeds/js/.prettierignore
@@ -0,0 +1,3 @@
+node_modules
+build
+dist
diff --git a/embeds/js/.prettierrc b/embeds/js/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 150,
+  "endOfLine": "lf"
+}