@inditeai/react 0.0.84 → 0.0.86

package/.eslintrc.cjs

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

package/README.md

@@ -1,144 +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.
+## Install
+
+```bash
+npm install @indite.io/js @indite.io/react
+```
+
+## Standard
+
+```tsx
+import { Standard } from '@indite.io/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 '@indite.io/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 '@indite.io/react'
+
+open()
+```
+
+```js
+import { close } from '@indite.io/react'
+
+close()
+```
+
+```js
+import { toggle } from '@indite.io/react'
+
+toggle()
+```
+
+## Bubble
+
+```tsx
+import { Bubble } from '@indite.io/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 '@indite.io/react'
+
+Bot.showPreviewMessage()
+```
+
+```js
+import { hidePreviewMessage } from '@indite.io/react'
+
+Bot.hidePreviewMessage()
+```
+
+### Open or close the chat window
+
+You can use these commands:
+
+```js
+import { open } from '@indite.io/react'
+
+open()
+```
+
+```js
+import { close } from '@indite.io/react'
+
+close()
+```
+
+```js
+import { toggle } from '@indite.io/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 '@indite.io/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://bot.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,14 @@
+import React from 'react';
+import type { BubbleProps } from '@inditeai/js';
+import '@inditeai/js/dist/web';
+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,cAAc,CAAA;AAC/C,OAAO,uBAAuB,CAAA;AAE9B,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,16 @@
+import React from 'react';
+import type { PopupProps } from '@inditeai/js';
+import '@inditeai/js/dist/web';
+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,cAAc,CAAA;AAC9C,OAAO,uBAAuB,CAAA;AAE9B,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,20 @@
+import React from 'react';
+import type { BotProps } from '@inditeai/js';
+import '@inditeai/js/dist/web';
+type Props = BotProps & {
+    style?: React.CSSProperties;
+    className?: string;
+    source?: 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,cAAc,CAAA;AAC5C,OAAO,uBAAuB,CAAA;AAE9B,KAAK,KAAK,GAAG,QAAQ,GAAG;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,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 '@inditeai/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,cAAc,CAAA"}

package/dist/index.js

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

@@ -1,46 +1,48 @@
-{
-  "name": "@inditeai/react",
-  "version": "0.0.84",
-  "description": "Convenient library to display bots on your React app",
-  "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*\"",
-    "format:check": "prettier --check ./src"
-  },
-  "keywords": [],
-  "author": "Indite.io",
-  "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",
-    "@inditeai/js": "1.2.63",
-    "@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 || ^19.0.0"
-  }
+{
+  "name": "@inditeai/react",
+  "version": "0.0.86",
+  "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"
+  },
+  "keywords": [],
+  "author": "ART",
+  "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",
+    "@inditeai/js": "1.2.64",
+    "@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

@@ -1,42 +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
+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/src/Bubble.tsx

@@ -1,51 +1,51 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import type { BubbleProps } from '@inditeai/js/dist'
-import '@inditeai/js/dist/web'
-
-type Props = BubbleProps
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'bot-bubble': React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement>,
-        HTMLElement
-      >
-    }
-  }
-}
-
-type BubbleElement = HTMLElement & Props
-
-export const Bubble = (props: Props) => {
-  const bubbleElement = useRef<BubbleElement | null>(null)
-
-  const attachBubbleToDom = useCallback((props: Props) => {
-    const newBubbleElement = document.createElement(
-      'bot-bubble'
-    ) as BubbleElement
-    bubbleElement.current = newBubbleElement
-    injectPropsToElement(bubbleElement.current, props)
-    document.body.prepend(bubbleElement.current)
-  }, [])
-
-  useEffect(() => {
-    if (!bubbleElement.current) attachBubbleToDom(props)
-    injectPropsToElement(bubbleElement.current as BubbleElement, props)
-  }, [attachBubbleToDom, props])
-
-  useEffect(() => {
-    return () => {
-      bubbleElement.current?.remove()
-      bubbleElement.current = null
-    }
-  }, [])
-
-  const injectPropsToElement = (element: BubbleElement, props: Props) => {
-    Object.assign(element, props)
-  }
-
-  return null
-}
-
-export default Bubble
+import React, { useCallback, useEffect, useRef } from 'react'
+import type { BubbleProps } from '@inditeai/js'
+import '@inditeai/js/dist/web'
+
+type Props = BubbleProps
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'bot-bubble': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >
+    }
+  }
+}
+
+type BubbleElement = HTMLElement & Props
+
+export const Bubble = (props: Props) => {
+  const bubbleElement = useRef<BubbleElement | null>(null)
+
+  const attachBubbleToDom = useCallback((props: Props) => {
+    const newBubbleElement = document.createElement(
+      'bot-bubble'
+    ) as BubbleElement
+    bubbleElement.current = newBubbleElement
+    injectPropsToElement(bubbleElement.current, props)
+    document.body.prepend(bubbleElement.current)
+  }, [])
+
+  useEffect(() => {
+    if (!bubbleElement.current) attachBubbleToDom(props)
+    injectPropsToElement(bubbleElement.current as BubbleElement, props)
+  }, [attachBubbleToDom, props])
+
+  useEffect(() => {
+    return () => {
+      bubbleElement.current?.remove()
+      bubbleElement.current = null
+    }
+  }, [])
+
+  const injectPropsToElement = (element: BubbleElement, props: Props) => {
+    Object.assign(element, props)
+  }
+
+  return null
+}
+
+export default Bubble

package/src/Popup.tsx

@@ -1,56 +1,56 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import type { PopupProps } from '@inditeai/js/dist'
-import '@inditeai/js/dist/web'
-
-type Props = PopupProps
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'bot-popup': React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement>,
-        HTMLElement
-      > & { class?: string }
-    }
-  }
-}
-
-type PopupElement = HTMLElement & Props
-
-export const Popup = (props: Props) => {
-  const containerRef = useRef<HTMLDivElement | null>(null)
-  const popupRef = useRef<PopupElement | null>(null)
-
-  const attachPopupToContainer = useCallback((props: Props) => {
-    const popupElement = document.createElement('bot-popup') as PopupElement
-    popupRef.current = popupElement
-    injectPropsToElement(popupRef.current, props)
-    if (!containerRef.current) {
-      console.warn(
-        'Could not attach popup to container because containerRef.current is null'
-      )
-      return
-    }
-    containerRef.current?.append(popupRef.current)
-  }, [])
-
-  useEffect(() => {
-    if (!popupRef.current) attachPopupToContainer(props)
-    injectPropsToElement(popupRef.current as PopupElement, props)
-  }, [attachPopupToContainer, props])
-
-  useEffect(() => {
-    return () => {
-      popupRef.current?.remove()
-      popupRef.current = null
-    }
-  }, [])
-
-  const injectPropsToElement = (element: PopupElement, props: Props) => {
-    Object.assign(element, props)
-  }
-
-  return <div ref={containerRef} />
-}
-
-export default Popup
+import React, { useCallback, useEffect, useRef } from 'react'
+import type { PopupProps } from '@inditeai/js'
+import '@inditeai/js/dist/web'
+
+type Props = PopupProps
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'bot-popup': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & { class?: string }
+    }
+  }
+}
+
+type PopupElement = HTMLElement & Props
+
+export const Popup = (props: Props) => {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const popupRef = useRef<PopupElement | null>(null)
+
+  const attachPopupToContainer = useCallback((props: Props) => {
+    const popupElement = document.createElement('bot-popup') as PopupElement
+    popupRef.current = popupElement
+    injectPropsToElement(popupRef.current, props)
+    if (!containerRef.current) {
+      console.warn(
+        'Could not attach popup to container because containerRef.current is null'
+      )
+      return
+    }
+    containerRef.current?.append(popupRef.current)
+  }, [])
+
+  useEffect(() => {
+    if (!popupRef.current) attachPopupToContainer(props)
+    injectPropsToElement(popupRef.current as PopupElement, props)
+  }, [attachPopupToContainer, props])
+
+  useEffect(() => {
+    return () => {
+      popupRef.current?.remove()
+      popupRef.current = null
+    }
+  }, [])
+
+  const injectPropsToElement = (element: PopupElement, props: Props) => {
+    Object.assign(element, props)
+  }
+
+  return <div ref={containerRef} />
+}
+
+export default Popup

package/src/Standard.tsx

@@ -1,35 +1,35 @@
-import React, { useEffect, useRef } from 'react'
-import type { BotProps } from '@inditeai/js'
-import '@inditeai/js/dist/web'
-
-type Props = BotProps & {
-  style?: React.CSSProperties
-  className?: string
-  source?: string
-}
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'bot-standard': React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement>,
-        HTMLElement
-      > & { class?: string }
-    }
-  }
-}
-
-type StandardElement = HTMLElement & Props
-
-export const Standard = ({ style, className, ...assignableProps }: Props) => {
-  const ref = useRef<StandardElement | null>(null)
-
-  useEffect(() => {
-    if (!ref.current) return
-    Object.assign(ref.current, assignableProps)
-  }, [assignableProps])
-
-  return <bot-standard ref={ref} style={style} class={className} />
-}
-
-export default Standard
+import React, { useEffect, useRef } from 'react'
+import type { BotProps } from '@inditeai/js'
+import '@inditeai/js/dist/web'
+
+type Props = BotProps & {
+  style?: React.CSSProperties
+  className?: string
+  source?: string
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'bot-standard': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & { class?: string }
+    }
+  }
+}
+
+type StandardElement = HTMLElement & Props
+
+export const Standard = ({ style, className, ...assignableProps }: Props) => {
+  const ref = useRef<StandardElement | null>(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+    Object.assign(ref.current, assignableProps)
+  }, [assignableProps])
+
+  return <bot-standard ref={ref} style={style} class={className} />
+}
+
+export default Standard

package/src/index.ts

@@ -1,5 +1,4 @@
-export { Standard } from './Standard'
-export { Bubble } from './Bubble'
-export { Popup } from './Popup'
-export * from '@inditeai/js/dist'
-
+export { Standard } from './Standard'
+export { Bubble } from './Bubble'
+export { Popup } from './Popup'
+export * from '@inditeai/js'

package/src/stories/bubble.stories.tsx

@@ -0,0 +1,59 @@
+import { Bubble } from '@/Bubble'
+import {
+  open,
+  toggle,
+  close,
+  showPreviewMessage,
+  hidePreviewMessage,
+  setPrefilledVariables,
+  setInputValue,
+} from '@inditeai/js'
+import { useState } from 'react'
+const leadGenerationBot = {}
+
+export const Default = () => {
+  const [name, setName] = useState('John')
+
+  return (
+    <div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <button onClick={toggle}>Toggle chat window</button>
+        <button onClick={open}>Open chat window</button>
+        <button onClick={close}>Close chat window</button>
+        <button onClick={() => showPreviewMessage()}>
+          Show Preview Message
+        </button>
+        <button onClick={() => setInputValue('YOOOO!')}>Set input value</button>
+        <button onClick={hidePreviewMessage}>Close Preview Message</button>
+        <div>
+          <p>Predefined name:</p>
+          <input value={name} onChange={(e) => setName(e.target.value)} />
+          <button onClick={() => setPrefilledVariables({ Name: name })}>
+            Set predefined name
+          </button>
+        </div>
+      </div>
+
+      <Bubble
+        botName=''
+        bot={leadGenerationBot}
+        apiHost="http://localhost:3001"
+        prefilledVariables={{
+          Name: ['John'],
+        }}
+        previewMessage={{
+          avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
+          message: 'Hello, I am a preview message',
+          autoShowDelay: 3000,
+        }}
+        theme={{
+          button: {
+            backgroundColor: '#FF7537',
+            iconColor: 'white',
+          },
+        }}
+        isPreview
+      />
+    </div>
+  )
+}

package/src/stories/popup.stories.tsx

@@ -0,0 +1,22 @@
+import { Popup } from '../Popup'
+import { open, toggle } from '@inditeai/js'
+const leadGenerationBot = {}
+
+export const Default = () => {
+  return (
+    <>
+      <button onClick={open}>Open modal</button>
+      <button onClick={toggle}>Toggle modal</button>
+      <Popup
+        botName=''
+        bot={leadGenerationBot}
+        apiHost="http://localhost:3001"
+        autoShowDelay={3000}
+        theme={{
+          width: '800px',
+        }}
+        isPreview
+      />
+    </>
+  )
+}

package/src/stories/standard.stories.tsx

@@ -0,0 +1,30 @@
+import { Standard } from '..'
+
+const leadGenerationBot = {}
+export const Default = () => {
+  return (
+    <div style={{ height: '500px' }}>
+      <Standard
+      botName=''
+        bot={leadGenerationBot}
+        apiHost="http://localhost:3001"
+        isPreview
+      />
+    </div>
+  )
+}
+
+export const StartWhenIntoView = () => {
+  return (
+    <>
+      <div style={{ height: '300vh' }} />
+      <Standard
+      botName=''
+        bot={leadGenerationBot}
+        apiHost="http://localhost:3001"
+        isPreview
+        style={{ height: '300px' }}
+      />
+    </>
+  )
+}

package/tsconfig.json

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

package/base.json

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

package/react-library.json

@@ -1,11 +0,0 @@
-{
-  "$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"
-  }
-}