Initial push

Author: HenryHengZJ

.eslintrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ['custom'],
+  rules: {
+    '@next/next/no-img-element': 'off',
+    '@next/next/no-html-link-for-pages': 'off',
+  },
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.npmignore

@@ -0,0 +1,6 @@
+src
+.env.local.example
+.eslintignore
+.eslintrc.cjs
+rollup.config.js
+tsconfig.json

README.md

@@ -0,0 +1,37 @@
+<!-- markdownlint-disable MD030 -->
+
+# Flowise Embed React
+
+React library to display flowise chatbot on your website
+
+![Flowise](https://github.com/FlowiseAI/FlowiseChatEmbed/blob/main/images/ChatEmbed.gif?raw=true)
+
+## How to Use
+
+In your project, install:
+
+```bash
+npm install flowise-embed flowise-embed-react
+```
+
+or
+
+```bash
+yarn add flowise-embed flowise-embed-react
+```
+
+Then use it:
+
+```tsx
+import { FullPageChat } from "flowise-embed-react";
+
+const App = () => {
+  return (
+    <FullPageChat
+      chatflowid="your-chatflow-id"
+      apiHost="http://localhost:3000"
+      style={{ width: "100%", height: "600px" }}
+    />
+  );
+};
+```

base.json

@@ -0,0 +1,21 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "display": "Default",
+    "compilerOptions": {
+        "composite": false,
+        "declaration": true,
+        "declarationMap": true,
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "inlineSources": false,
+        "isolatedModules": true,
+        "moduleResolution": "node",
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "preserveWatchOutput": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "downlevelIteration": true
+    },
+    "exclude": ["node_modules"]
+}

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "flowise-embed-react",
+  "version": "1.0.0",
+  "description": "React library to display flowise chatbot on your website",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "rollup --watch --config rollup.config.js",
+    "build": "rollup --config rollup.config.js",
+    "lint": "eslint --fix \"src/**/*.ts*\""
+  },
+  "keywords": [],
+  "license": "MIT",
+  "dependencies": {
+    "@ladle/react": "2.5.1"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.21.4",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-node-resolve": "15.0.1",
+    "@rollup/plugin-terser": "0.4.0",
+    "@rollup/plugin-typescript": "11.0.0",
+    "@types/node": "18.15.11",
+    "@types/react": "18.0.32",
+    "eslint": "8.37.0",
+    "flowise-embed": "*",
+    "react": "18.2.0",
+    "rollup": "3.20.2",
+    "rollup-plugin-typescript-paths": "1.4.0",
+    "tslib": "2.5.0",
+    "tsx": "3.12.6",
+    "typescript": "5.0.3"
+  },
+  "peerDependencies": {
+    "flowise-embed": "*",
+    "react": "18.x"
+  }
+}

react-library.json

@@ -0,0 +1,12 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "display": "React Library",
+    "extends": "./base.json",
+    "compilerOptions": {
+      "jsx": "react-jsx",
+      "lib": ["ES2015", "dom", "dom.iterable"],
+      "module": "ESNext",
+      "target": "es6"
+    }
+  }
+  

rollup.config.js

@@ -0,0 +1,32 @@
+import resolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
+import { babel } from "@rollup/plugin-babel";
+import typescript from "@rollup/plugin-typescript";
+import { typescriptPaths } from "rollup-plugin-typescript-paths";
+
+const extensions = [".ts", ".tsx"];
+
+const indexConfig = {
+  input: "./src/index.ts",
+  output: {
+    file: "./dist/index.js",
+    format: "es",
+  },
+  external: ["react", "react/jsx-runtime", "flowise-embed"],
+  plugins: [
+    resolve({ extensions }),
+    babel({
+      babelHelpers: "bundled",
+      exclude: "node_modules/**",
+      presets: ["@babel/preset-react", "@babel/preset-typescript"],
+      extensions,
+    }),
+    typescript(),
+    typescriptPaths({ preserveExtensions: true }),
+    terser({ output: { comments: false } }),
+  ],
+};
+
+const configs = [indexConfig];
+
+export default configs;

src/BubbleChat.tsx

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { BubbleProps } from 'flowise-embed'
+
+type Props = BubbleProps
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'flowise-bubble': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >
+    }
+  }
+}
+
+type BubbleElement = HTMLElement & Props
+
+export const BubbleChat = (props: Props) => {
+  const ref = useRef<BubbleElement | null>(null)
+  const [isInitialized, setIsInitialized] = useState(false)
+
+  useEffect(() => {
+    ;(async () => {
+      await import('flowise-embed/dist/web')
+      setIsInitialized(true)
+    })()
+    return () => {
+      ref.current?.remove()
+    }
+  }, [])
+
+  const attachBubbleToDom = useCallback((props: Props) => {
+    const bubbleElement = document.createElement(
+      'flowise-bubble'
+    ) as BubbleElement
+    ref.current = bubbleElement
+    injectPropsToElement(ref.current, props)
+    document.body.append(ref.current)
+  }, [])
+
+  useEffect(() => {
+    if (!isInitialized) return
+    if (!ref.current) attachBubbleToDom(props)
+    injectPropsToElement(ref.current as BubbleElement, props)
+  }, [attachBubbleToDom, isInitialized, props])
+
+  const injectPropsToElement = (element: BubbleElement, props: Props) => {
+    Object.assign(element, props)
+  }
+
+  return null
+}

src/FullPageChat.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react'
+import type { BotProps } from 'flowise-embed'
+
+type Props = BotProps & {
+  style?: React.CSSProperties
+  className?: string
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'flowise-fullchatbot': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & { class?: string }
+    }
+  }
+}
+
+type FullPageChatElement = HTMLElement & Props
+
+export const FullPageChat = ({ style, className, ...assignableProps }: Props) => {
+  const ref = useRef<FullPageChatElement | null>(null)
+
+  useEffect(() => {
+    ;(async () => {
+      await import('flowise-embed/dist/web')
+    })()
+  }, [])
+
+  useEffect(() => {
+    if (!ref.current) return
+    Object.assign(ref.current, assignableProps)
+  }, [assignableProps])
+
+  return <flowise-fullchatbot ref={ref} style={style} class={className} />
+}