@inditeai/react 0.0.8 → 0.0.81

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 @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/base.json

@@ -1,22 +1,22 @@
-{
-  "$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"]
-}
+{
+  "$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/dist/Standard.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { BotProps } from '@inditeai/js/dist';
+import type { BotProps } from '@inditeai/js';
 import '@inditeai/js/dist/web';
 type Props = BotProps & {
     style?: React.CSSProperties;

package/dist/Standard.d.ts.map

@@ -1 +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,mBAAmB,CAAA;AACjD,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"}
+{"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.js

@@ -1,2 +1,2 @@
-// v0.0.8
+// v0.0.81
 import{jsx as r}from"react/jsx-runtime";import{useRef as e,useEffect as t,useCallback as n}from"react";import"@inditeai/js/dist/web";export*from"@inditeai/js/dist";"function"==typeof SuppressedError&&SuppressedError;const o=n=>{var{style:o,className:c}=n,u=function(r,e){var t={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&e.indexOf(n)<0&&(t[n]=r[n]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(r);o<n.length;o++)e.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(r,n[o])&&(t[n[o]]=r[n[o]])}return t}(n,["style","className"]);const l=e(null);return t((()=>{l.current&&Object.assign(l.current,u)}),[u]),r("bot-standard",{ref:l,style:o,class:c})},c=r=>{const o=e(null),c=n((r=>{const e=document.createElement("bot-bubble");o.current=e,u(o.current,r),document.body.prepend(o.current)}),[]);t((()=>{o.current||c(r),u(o.current,r)}),[c,r]),t((()=>()=>{var r;null===(r=o.current)||void 0===r||r.remove(),o.current=null}),[]);const u=(r,e)=>{Object.assign(r,e)};return null},u=o=>{const c=e(null),u=e(null),l=n((r=>{var e;const t=document.createElement("bot-popup");u.current=t,s(u.current,r),c.current?null===(e=c.current)||void 0===e||e.append(u.current):console.warn("Could not attach popup to container because containerRef.current is null")}),[]);t((()=>{u.current||l(o),s(u.current,o)}),[l,o]),t((()=>()=>{var r;null===(r=u.current)||void 0===r||r.remove(),u.current=null}),[]);const s=(r,e)=>{Object.assign(r,e)};return r("div",{ref:c})};export{c as Bubble,u as Popup,o as Standard};

package/package.json

@@ -1,48 +1,46 @@
-{
-  "name": "@inditeai/react",
-  "version": "0.0.8",
-  "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"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Bacancy-DataProphets/Indite-packages.git"
-  },
-  "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.4",
-    "@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.81",
+  "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": "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.62",
+    "@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/react-library.json

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

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/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

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/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

package/src/Standard.tsx

@@ -1,35 +1,35 @@
-import React, { useEffect, useRef } from 'react'
-import type { BotProps } from '@inditeai/js/dist'
-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,4 +1,5 @@
-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/dist'
+

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": "./react-library.json",
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true
+  }
+}