@inditeai/react 0.0.1

package/.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',
+  },
+}

package/README.md

@@ -0,0 +1,144 @@
+## Install
+
+```bash
+npm install @inditeai/js @inditeai/react
+```
+
+## Standard
+
+```tsx
+import { Standard } from '@inditeai/react'
+
+const App = () => {
+  return (
+    <Standard
+      bot="lead-generation-copy-3luzm6b"
+      style={{ width: '100%', height: '600px' }}
+    />
+  )
+}
+```
+
+This code is creating a container with a 100% width (will match parent width) and 600px height.
+
+## Popup
+
+```tsx
+import { Popup } from '@inditeai/react'
+
+const App = () => {
+  return <Popup bot="lead-generation-copy-3luzm6b" autoShowDelay={3000} />
+}
+```
+
+This code will automatically trigger the popup window after 3 seconds.
+
+### Open or Close a popup
+
+You can use these commands:
+
+```js
+import { open } from '@inditeai/react'
+
+open()
+```
+
+```js
+import { close } from '@inditeai/react'
+
+close()
+```
+
+```js
+import { toggle } from '@inditeai/react'
+
+toggle()
+```
+
+## Bubble
+
+```tsx
+import { Bubble } from '@inditeai/react'
+
+const App = () => {
+  return (
+    <Bubble
+      bot="lead-generation-copy-3luzm6b"
+      previewMessage={{
+        message: 'I have a question for you!',
+        autoShowDelay: 5000,
+        avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
+      }}
+      theme={{
+        button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
+        previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
+      }}
+    />
+  )
+}
+```
+
+This code will show the bubble and let a preview message appear after 5 seconds.
+
+### Open or close the preview message
+
+You can use these commands:
+
+```js
+import { showPreviewMessage } from '@inditeai/react'
+
+Bot.showPreviewMessage()
+```
+
+```js
+import { hidePreviewMessage } from '@inditeai/react'
+
+Bot.hidePreviewMessage()
+```
+
+### Open or close the chat window
+
+You can use these commands:
+
+```js
+import { open } from '@inditeai/react'
+
+open()
+```
+
+```js
+import { close } from '@inditeai/react'
+
+close()
+```
+
+```js
+import { toggle } from '@inditeai/react'
+
+toggle()
+```
+
+## Additional configuration
+
+You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
+
+```tsx
+import { Standard } from '@inditeai/react'
+
+const App = () => {
+  return (
+    <Standard
+      bot="lead-generation-copy-3luzm6b"
+      style={{ width: '100%', height: '600px' }}
+      prefilledVariables={{
+        'Current URL': 'https://my-site/account',
+        'User name': 'John Doe',
+      }}
+    />
+  )
+}
+```
+
+It will prefill the `Current URL` variable with "https://my-site/account" and the `User name` variable with "John Doe". More info about variables: [here](/editor/variables).
+
+Note that if your site URL contains query params (i.e. https://indite.io?User%20name=John%20Doe), the variables will automatically be injected to the bot. So you don't need to manually transfer query params to the bot embed configuration.

package/dist/Bubble.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { BubbleProps } from '@indite.io/js';
+type Props = BubbleProps;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'bot-bubble': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+export declare const Bubble: (props: Props) => null;
+export default Bubble;
+//# sourceMappingURL=Bubble.d.ts.map

package/dist/Bubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bubble.d.ts","sourceRoot":"","sources":["../src/Bubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAGhD,KAAK,KAAK,GAAG,WAAW,CAAA;AAExB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,YAAY,EAAE,KAAK,CAAC,iBAAiB,CACnC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,WAAW,CACZ,CAAA;SACF;KACF;CACF;AAID,eAAO,MAAM,MAAM,UAAW,KAAK,SA6BlC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/Popup.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { PopupProps } from '@indite.io/js';
+type Props = PopupProps;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'bot-popup': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                class?: string;
+            };
+        }
+    }
+}
+export declare const Popup: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Popup;
+//# sourceMappingURL=Popup.d.ts.map

package/dist/Popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../src/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG/C,KAAK,KAAK,GAAG,UAAU,CAAA;AAEvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAClC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,WAAW,CACZ,GAAG;gBAAE,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,CAAA;SACvB;KACF;CACF;AAID,eAAO,MAAM,KAAK,UAAW,KAAK,4CAkCjC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/Standard.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { BotProps } from '@indite.io/js';
+type Props = BotProps & {
+    style?: React.CSSProperties;
+    className?: string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'bot-standard': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                class?: string;
+            };
+        }
+    }
+}
+export declare const Standard: ({ style, className, ...assignableProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Standard;
+//# sourceMappingURL=Standard.d.ts.map

package/dist/Standard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Standard.d.ts","sourceRoot":"","sources":["../src/Standard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAG7C,KAAK,KAAK,GAAG,QAAQ,GAAG;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,cAAc,EAAE,KAAK,CAAC,iBAAiB,CACrC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,WAAW,CACZ,GAAG;gBAAE,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,CAAA;SACvB;KACF;CACF;AAID,eAAO,MAAM,QAAQ,6CAA8C,KAAK,4CASvE,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { Standard } from './Standard';
+export { Bubble } from './Bubble';
+export { Popup } from './Popup';
+export * from '@indite.io/js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,cAAc,eAAe,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+// v0.0.1
+import{jsx as e}from"react/jsx-runtime";import{useRef as r,useEffect as t,useCallback as o}from"react";"function"==typeof SuppressedError&&SuppressedError;const n=o=>{var{style:n,className:s}=o,a=function(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)r.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(t[o[n]]=e[o[n]])}return t}(o,["style","className"]);const c=r(null);return t((()=>{c.current&&Object.assign(c.current,a)}),[a]),e("bot-standard",{ref:c,style:n,class:s})},s=e=>{const n=r(null),s=o((e=>{const r=document.createElement("bot-bubble");n.current=r,a(n.current,e),document.body.prepend(n.current)}),[]);t((()=>{n.current||s(e),a(n.current,e)}),[s,e]),t((()=>()=>{var e;null===(e=n.current)||void 0===e||e.remove(),n.current=null}),[]);const a=(e,r)=>{Object.assign(e,r)};return null},a=n=>{const s=r(null),a=r(null),c=o((e=>{var r;const t=document.createElement("bot-popup");a.current=t,u(a.current,e),s.current?null===(r=s.current)||void 0===r||r.append(a.current):console.warn("Could not attach popup to container because containerRef.current is null")}),[]);t((()=>{a.current||c(n),u(a.current,n)}),[c,n]),t((()=>()=>{var e;null===(e=a.current)||void 0===e||e.remove(),a.current=null}),[]);const u=(e,r)=>{Object.assign(e,r)};return e("div",{ref:s})},c=()=>{window.postMessage({isFromBot:!0,command:"close"})},u=()=>{window.postMessage({isFromBot:!0,command:"hidePreviewMessage"})},l=()=>{window.postMessage({isFromBot:!0,command:"open"})},i=e=>{const r={isFromBot:!0,command:"setPrefilledVariables",variables:e};window.postMessage(r)},m=e=>{const r={isFromBot:!0,command:"showPreviewMessage",message:e};window.postMessage(r)},p=()=>{window.postMessage({isFromBot:!0,command:"toggle"})},d=e=>{const r={isFromBot:!0,command:"setInputValue",value:e};window.postMessage(r)},w=()=>{window.postMessage({isFromBot:!0,command:"unmount"})};export{s as Bubble,a as Popup,n as Standard,c as close,u as hidePreviewMessage,l as open,d as setInputValue,i as setPrefilledVariables,m as showPreviewMessage,p as toggle,w as unmount};

package/dist/stories/bubble.stories.d.ts

@@ -0,0 +1,2 @@
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=bubble.stories.d.ts.map

package/dist/stories/bubble.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubble.stories.d.ts","sourceRoot":"","sources":["../../src/stories/bubble.stories.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,OAAO,+CA6CnB,CAAA"}

package/dist/stories/popup.stories.d.ts

@@ -0,0 +1,2 @@
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=popup.stories.d.ts.map

package/dist/stories/popup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.stories.d.ts","sourceRoot":"","sources":["../../src/stories/popup.stories.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO,+CAiBnB,CAAA"}

package/dist/stories/standard.stories.d.ts

@@ -0,0 +1,3 @@
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const StartWhenIntoView: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=standard.stories.d.ts.map

package/dist/stories/standard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"standard.stories.d.ts","sourceRoot":"","sources":["../../src/stories/standard.stories.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,+CAWnB,CAAA;AAED,eAAO,MAAM,iBAAiB,+CAa7B,CAAA"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@inditeai/react",
+  "version": "0.0.1",
+  "description": "Convenient library to display bots on your React app",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "stories:dev": "ladle serve -p 3006",
+    "stories:build": "ladle build",
+    "dev": "rollup --watch --config rollup.config.js",
+    "build": "rollup --config rollup.config.js",
+    "lint": "eslint --fix \"src/**/*.ts*\"",
+    "format:check": "prettier --check ./src"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ladle/react": "2.5.1"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "7.22.5",
+    "@babel/preset-typescript": "7.22.5",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-node-resolve": "15.1.0",
+    "@rollup/plugin-terser": "0.4.3",
+    "@indite.io/js": "workspace:*",
+    "@indite.io/lib": "workspace:*",
+    "@indite.io/prisma": "workspace:*",
+    "@indite.io/schemas": "workspace:*",
+    "@indite.io/tsconfig": "workspace:*",
+    "@types/node": "20.4.2",
+    "@types/react": "18.2.15",
+    "eslint": "8.44.0",
+    "eslint-config-custom": "workspace:*",
+    "react": "18.2.0",
+    "rollup": "3.26.2",
+    "rollup-plugin-typescript-paths": "1.4.0",
+    "tslib": "2.6.0",
+    "tsx": "4.6.2",
+    "typescript": "5.4.5",
+    "@rollup/plugin-typescript": "11.1.2"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,42 @@
+import resolve from '@rollup/plugin-node-resolve'
+import terser from '@rollup/plugin-terser'
+import { babel } from '@rollup/plugin-babel'
+import { typescriptPaths } from 'rollup-plugin-typescript-paths'
+import typescript from '@rollup/plugin-typescript'
+import fs from 'fs'
+
+const extensions = ['.ts', '.tsx']
+
+const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'))
+const packageVersion = packageJson.version
+const preamble = `// v${packageVersion}`
+
+const indexConfig = {
+  input: './src/index.ts',
+  output: {
+    file: './dist/index.js',
+    format: 'es',
+  },
+  external: ['react', 'react/jsx-runtime'],
+  watch: {
+    clearScreen: false,
+  },
+  plugins: [
+    resolve({ extensions }),
+    babel({
+      babelHelpers: 'bundled',
+      exclude: 'node_modules/**',
+      presets: ['@babel/preset-react', '@babel/preset-typescript'],
+      extensions,
+    }),
+    typescriptPaths({ preserveExtensions: true }),
+    typescript({
+      noEmitOnError: !process.env.ROLLUP_WATCH,
+    }),
+    terser({ format: { preamble } }),
+  ],
+}
+
+const configs = [indexConfig]
+
+export default configs

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@indite.io/tsconfig/react-library.json",
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true
+  }
+}