Your app
\n\t![\"Screenshot](\"images/readme-screenshot-workspace-app-nav.png\")
\n\nYou should see a button to create a ‘new app’. You’ll be prompted to give it a name so you can recognise it later.\n\n \nOnce you’ve created your Workspace App, press [+ Add public key] and paste the entire contents of `plain.key.pem.pub` we generated above (including the `---BEGINS..` \n\nOnce you are done it should look something like this: \n\n![\"Screenshot](\"images/readme-screenshot-workspace-app.png\")
\n\nYou are now ready to set up the React Chat UI 🎉\n\n## Step3: Set up the Plain React Chat UI:\n\nFirst, install the react-chat-ui package using the command: \n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and hooks\n- `Chat` which renders the various states of the chat, e.g. the logged out customer flow and the customer timeline.\n\nThe first thing to do is to import `PlainProvider` and the `Chat` components and add them to your app.\n\nWe recommend wrapping your top level app component. A basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction getCustomerJwt() {\n // More on this below!\n}\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => getCustomerJwt()\n}\n\nfunction App () {\n return (\n Your app
\n\tYour app
\n\t\n\nYou should see a button to create a ‘new app’. You’ll be prompted to give it a name so you can recognise it later.\n\n \nOnce you’ve created your Workspace App, press [+ Add public key] and paste the entire contents of `plain.key.pem.pub` we generated above (including the `---BEGINS..` \n\nOnce you are done it should look something like this: \n\n\n\nYou are now ready to set up the React Chat UI 🎉\n\n## Step3: Set up the Plain React Chat UI:\n\nFirst, install the react-chat-ui package using the command: \n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and hooks\n- `Chat` which renders the various states of the chat, e.g. the logged out customer flow and the customer timeline.\n\nThe first thing to do is to import `PlainProvider` and the `Chat` components and add them to your app.\n\nWe recommend wrapping your top level app component. A basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction getCustomerJwt() {\n // More on this below!\n}\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => getCustomerJwt()\n}\n\nfunction App () {\n return (\n Your app
\n\tYour app
\n\t\n\nYou should see a button to create a ‘new app’. You’ll be prompted to give it a name so you can recognise it later.\n\n \nOnce you’ve created your Workspace App, press [+ Add public key] and paste the entire contents of `plain.key.pem.pub` we generated above (including the `---BEGINS..` \n\nOnce you are done it should look something like this: \n\n\n\nYou are now ready to set up the React Chat UI 🎉\n\n## Step3: Set up the Plain React Chat UI:\n\nFirst, install the react-chat-ui package using the command: \n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and hooks\n- `Chat` which renders the various states of the chat, e.g. the logged out customer flow and the customer timeline.\n\nThe first thing to do is to import `PlainProvider` and the `Chat` components and add them to your app.\n\nWe recommend wrapping your top level app component. A basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction getCustomerJwt() {\n // More on this below!\n}\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => getCustomerJwt()\n}\n\nfunction App () {\n return (\n Your app
\n\tYour app
\n\t\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n![\"Screenshot](\"images/readme-screenshot-workspace-app-1.png\")
\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
![\"Screenshot](\"images/readme-screenshot-workspace-app-2.png\")
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"0ac873740c7af9eb70a49a89a12faa11e7fe7e81","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"tsc -p tsconfig-build.json","watch":"tsc-watch -p tsconfig-build.json","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.3","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.6.4","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.6","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"^17.0.43","@types/lodash":"4.14.180","@reduxjs/toolkit":"1.8.0","@types/react-dom":"^17.0.14","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","eslint":"8.12.0","ts-jest":"27.1.4","prettier":"2.6.1","jest-diff":"27.5.1","tsc-watch":"4.6.2","genversion":"3.0.2","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.8","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.25.4","eslint-plugin-unicorn":"41.0.1","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@typescript-eslint/parser":"5.12.1","eslint-plugin-react-hooks":"4.3.0","@graphql-codegen/typescript":"2.4.8","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.12.1","eslint-plugin-simple-import-sort":"7.0.0","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.0-0ac8737_1648561682781_0.871605134853005","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.0.1":{"name":"@team-plain/react-chat-ui","version":"4.0.1","license":"MIT","_id":"@team-plain/react-chat-ui@4.0.1","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"ad102b4cba58e1e4c71cc05845fedd890d160f44","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.0.1.tgz","fileCount":116,"integrity":"sha512-qaqM06UqS8ad0ab5T4iVJH0UUrO6+j54XZCtFomul70U5wC2dRMAcI2ruaHfV8JDj/DJbXy1jSEU695CtNp1rQ==","signatures":[{"sig":"MEUCIEJ/unGQdOu+Trht6hPIGqwkPjTclSrHveF1ZmbKyUz8AiEA7P05UV5+UnMo1ifUxYzRyp2C9SzEzUSlNoVV7gwAsbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320751,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQw6vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA4w/7BSxR/c+An0XlD6Iw0ArEdB1aKC7AMnMXU+OldF4kdGunR792\r\npBXGZoSPhJ6p+YNVDRtBzfOPrCBuZg3JYG2uyL5M5NVo8iLzMoJUrF60hvGV\r\ncwVDd2RGmhA8/uEKfQwBl1FJmfnIIl2PDGICr6TA/b9OEoVMFGdODrUI1ODV\r\nhze9w1JLm5Ugeqnv6mNwaJQwisLcgeFd9ySO1N9OMhKPQyecHnjqTToQNdXB\r\nms8+CWPdIeJCH5lnSvEtaoD0NEk49wiyKCGisWgFvvuEvXrWtfJ+oKvLzm15\r\nBioT7k7fM1m25O44hN4B875Uawo0tYdqq1sAfpbRDEMFlLCQy86subAZeWab\r\nrIZM3Wd0nNPbe9YJ5jUuos1qR8nQ+A1xNjHCw32l5t+xDHYyW1GlkGhIl9BN\r\nQZsaiC5GEBoCUJ3f2q8V22Eg9LwZaueWyptjWO20Bth6vnp5PPaCLeguRbde\r\nwrEsI/jFwOjvnYwud/877ZYnobEljZR8tATlY6d6kangviTg9prbBhy/abCj\r\n1OKtoMl4N1nuSY8qa21tM13nqbjfR8WywqOruMbeSDIOO6VgANyle/qQYAqD\r\na2Nmm5FU4HGpXly4UuSA7E6clI3ZZNEqTLBjehoRggW2W8LQuN1jHPITLXCu\r\nr89X09mY3aEsleK3D2a1Q8j1bDWfInaX5F8=\r\n=fHXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"538c14ffa5317fb415410a23ced8cfe3862d12f8","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"tsc -p tsconfig-build.json","watch":"tsc-watch -p tsconfig-build.json","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.3","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.6.4","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.6","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"^17.0.43","@types/lodash":"4.14.180","@reduxjs/toolkit":"1.8.0","@types/react-dom":"^17.0.14","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27.5.1","eslint":"8.12.0","ts-jest":"27.1.4","prettier":"2.6.1","jest-diff":"27.5.1","tsc-watch":"4.6.2","genversion":"3.0.2","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.8","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.25.4","eslint-plugin-unicorn":"41.0.1","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@typescript-eslint/parser":"5.12.1","eslint-plugin-react-hooks":"4.3.0","@graphql-codegen/typescript":"2.4.8","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.12.1","eslint-plugin-simple-import-sort":"7.0.0","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.1_1648561839231_0.47534979028554947","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.0.1-538c14f":{"name":"@team-plain/react-chat-ui","version":"4.0.1-538c14f","license":"MIT","_id":"@team-plain/react-chat-ui@4.0.1-538c14f","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"30c791a5455572b59bbb7fb0752e852615cf8b41","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.0.1-538c14f.tgz","fileCount":116,"integrity":"sha512-O+mvefhxXT/BhUVrJ30KyiZwm+THZ0GOkf2x7PtHDHtkB6SFmzbYJito2Rxd82IjqDLG0kAgVesekt8haC4C3w==","signatures":[{"sig":"MEYCIQCDFcg5BwI6EV4wJa2jBIsxyQmLZL0mojEMLPT0d7zaPwIhAJhn1O/pJj4xxg9TB3+0j8pP7wnKRtoD00EYFDKseaQE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQw62ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFPw/7B7DjVL9c/6tsj/0jh0ODd6UgXXc5BBmvF8ylxadWDJA988Wm\r\neOHdZMDEkfXvcSrEc7gUpKKtpj6T+llhMxnI8B7cmHixPVZCIzI3Rrj8LX5Y\r\nz16M9JlObdZhfDTqqnt7xHynJ686MdqTpWJ8h9/s1EYz5JUej/OuurMqa7a2\r\n8YmiHvc/XAfep7lUp9bN/TV1eRJKno8koympp7dytoTaHYBG48+kGYHrr+Sc\r\nBBdeGW2VwRUb0FztcpMcxotUow3pfTGAJP1amtiv3gKYWsJ0UGYTJAWPx01B\r\n3/xKjKTopsMybW/bqSm7qiI+Yc/na6gSq8Sy9MHpey8yYtctNpFt4U005YOJ\r\n1gl8A225xGsIqNxxvKQhz6w2ZHOAb/z9zFaJSc/uYfbwkJDJrNOWi+BzcEHI\r\nxq5q4SwuJ0VJ15FLf4H68PrtTTa1cwgKtOj/xzWKNm07EE1Miu8SjEJ58ZTR\r\n6WOeguYVt5CvRfFLFiUtWR0/GYa5QGEfUH2+kbxU5VFCMrxloEozIsfuXkTC\r\n4LONBVU9bx6T74cL7dKXj4SQJJZesgDAPi/njurH6S/qpe+Fqdy/3eRO7nJi\r\nakINfNYCw4w9ktZCqAR1qtlWKjHn/rWoXKhQr9l+KaHe3bqfOM9Z1q5a4ol9\r\nh5Ic3q0j13jSsNlNH9uxznk/q9DlKNCx54Y=\r\n=FF9l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n - Note: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"538c14ffa5317fb415410a23ced8cfe3862d12f8","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"tsc -p tsconfig-build.json","watch":"tsc-watch -p tsconfig-build.json","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.3","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.6.4","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.6","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"^17.0.43","@types/lodash":"4.14.180","@reduxjs/toolkit":"1.8.0","@types/react-dom":"^17.0.14","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","eslint":"8.12.0","ts-jest":"27.1.4","prettier":"2.6.1","jest-diff":"27.5.1","tsc-watch":"4.6.2","genversion":"3.0.2","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.8","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.25.4","eslint-plugin-unicorn":"41.0.1","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@typescript-eslint/parser":"5.12.1","eslint-plugin-react-hooks":"4.3.0","@graphql-codegen/typescript":"2.4.8","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.12.1","eslint-plugin-simple-import-sort":"7.0.0","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.1-538c14f_1648561845914_0.9347351120477831","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.0.1-c33eeed":{"name":"@team-plain/react-chat-ui","version":"4.0.1-c33eeed","license":"MIT","_id":"@team-plain/react-chat-ui@4.0.1-c33eeed","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"a09e939230b90d9185062ef96dab7d4ee62fdd44","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.0.1-c33eeed.tgz","fileCount":116,"integrity":"sha512-MfowpT4hcBBa+cvU+o0KA/4MuqfDm7o2ozP6S8lTQrrVLLBRvvmaxTe3iT15Q4vN3QVOG+hRTASD33dhwPxcvg==","signatures":[{"sig":"MEUCICBVuB4R/MkrYTyoWSWZynngNJlzA5fvPryRa7bmbuHZAiEAs7Q9m3T0f/I+nLsUDbgCXCt3dupptfHNBwnyq9aIxUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQyUoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIXBAAoIZxTpmkS6q4/UTJR+QjY59NxFp3ecZ0Mwl0SIDOctWpUbLR\r\nB4FG623yyY+povWbfgQPlP7p7yjFXxQr0xoLnoZ9MVWoGYYbHkpHlRcZfJ76\r\n8ebOuz457me+r1NFum5mIf6XgRCCYg29Qei6gT3C2w2LUzc+YYj8ose0rnf3\r\n+54CDGh8+wxneFsUl+AAJldmaoqj5v6sqIOlQciYdPWLnAlWr5y/KRh3DLRp\r\n6eZmYpU3jHhYR8ZrCW5Nh9qPx40Ljb/7bwlI0gK0O4+xZdYpLtmGqJm/KK2b\r\n8Q1aZPN7qMsHz7NxxeIPGmLG8l1NcOOZ131d4hRmRXZyOF1yx9s4IQ7MBHzJ\r\n80feQVIpGe9TNwZ4Tu6aTcWAK0/zgIoVlcLD+sSgH7WyeWWg5Wu/C6Ivp5lj\r\n0pycFFcvaZ8y7KTezV16PCrMF8c1pgm/R9AyC1PI3o/O8E2VvGxQoKmbNo2U\r\nckNjy1hrCR9SRtPXK+HV+rNu6bKzTwHkW2j43xEbnJe3GrL4GkvudoUVipis\r\ng8QcBma9b5n9cPhkqKy+MMdMrjnR1e5FES9blv1e/K9P510PRstoJw63/0r2\r\nQlWoTAT1sbSclWnSTnO4Pd7hb9eQxYL2jLgjNku0IO1CyB2oJc17eotfxGF/\r\n5JSlFLjZWjwKROk1dzdASrb4LQ+RXI6id4o=\r\n=IMYI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
![\"Screenshot](\"https://www.plain.com/react-chat-ui-images/readme-screenshot-workspace-app-nav.png\")
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n![\"Screenshot](\"https://www.plain.com/react-chat-ui-images/readme-screenshot-workspace-app-1.png\")
\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
![\"Screenshot](\"https://www.plain.com/react-chat-ui-images/readme-screenshot-workspace-app-2.png\")
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"c33eeed04919ca1877a56616abde75e37fa25de0","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"tsc -p tsconfig-build.json","watch":"tsc-watch -p tsconfig-build.json","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.3","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.6.4","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.6","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"^17.0.43","@types/lodash":"4.14.180","@reduxjs/toolkit":"1.8.0","@types/react-dom":"^17.0.14","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","eslint":"8.12.0","ts-jest":"27.1.4","prettier":"2.6.1","jest-diff":"27.5.1","tsc-watch":"4.6.2","genversion":"3.0.2","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.8","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.25.4","eslint-plugin-unicorn":"41.0.1","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@typescript-eslint/parser":"5.12.1","eslint-plugin-react-hooks":"4.3.0","@graphql-codegen/typescript":"2.4.8","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.12.1","eslint-plugin-simple-import-sort":"7.0.0","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.1-c33eeed_1648567592449_0.125370956889431","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.0.2-f8333bc":{"name":"@team-plain/react-chat-ui","version":"4.0.2-f8333bc","license":"MIT","_id":"@team-plain/react-chat-ui@4.0.2-f8333bc","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"2f027c24bb57a6328013fe30de52daaaea599706","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.0.2-f8333bc.tgz","fileCount":116,"integrity":"sha512-R1z4YX3dstjzg3pVXtPcGIzQZage03f4T1gJewxna5BLx1UXhPHTjQ+hzG1uChZMVW/Bs+5lwJdBDh96t7GBbA==","signatures":[{"sig":"MEYCIQCCEzwtpTLTGjjrzvJszx3wLdL0IjpSVsvpLI/FWYeYbAIhALOv/LQMDyfYB7rtzTZunKjPc07Mgw4VWKs6WK1Bxm/q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQyX7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+Bw//dfCkbPbtotsXDufN8FfoTqQStGCgGJHdfYoxjz/iG5/2Sfsa\r\n3geZCcNM0JtbBm39hH3lPc707ve6WjqnEI8N09DkoSNy4PbBB4sLFQJ6Gwwd\r\n4FVCQuCBRJLvcdpLYvtMzvE4GWPRNwGRBOWnv3VzxNsPX+cflCCNVt8PwRmK\r\nMKdRfdNQHW+wEzvojtTa9xh3M1GTAJeo1qO7/DO8H5L730bDemHB4HAbVMqK\r\nnWBK031nFBZMLpkS+/wzZ7NXucB3V0xjzN2yTAIZ/yi55fWMT2mG9oOXyriA\r\nyhCQvJElJlrglN4RTSCGvBof9OqlId61sChrrZv0ByldLkiphxbPjMZOp/U+\r\n7O4t0C5XHicbXUSnm7HhXrBw4pq6nVQmdmG9A5G4cIRKnXjfaui7LfSI77ng\r\n6EWEseIIvumRVZ0bgqOsSHGbfAlM8l59j1BCRjMC39mUj2yoIEh6AqMzWr8G\r\nhd+XLqipwidJD9KCSQIV4zyBspBID07d38WgwmyHYMEV6etlwpOci4o+p4P1\r\nl3Y1lUAavsP5SxJm5pN2/PBf6LUe/+YYS1Ivqmzpj2rnG9oNuvIAH1DgH/26\r\nod/nUgbrOajEqIEpOw5nGTtu07R+D/9Bwdjq3JwKnHF1Ht53cK0nPU3Va69S\r\nWFuhv7tSqd1L0W4X9nzhwwkvdAWy9RTkoTI=\r\n=Bpzr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"f8333bcda0937a8336627dab1f32a4150eaf416d","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"tsc -p tsconfig-build.json","watch":"tsc-watch -p tsconfig-build.json","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.3","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.6.4","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.6","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"^17.0.43","@types/lodash":"4.14.180","@reduxjs/toolkit":"1.8.0","@types/react-dom":"^17.0.14","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","eslint":"8.12.0","ts-jest":"27.1.4","prettier":"2.6.1","jest-diff":"27.5.1","tsc-watch":"4.6.2","genversion":"3.0.2","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.8","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.25.4","eslint-plugin-unicorn":"41.0.1","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@typescript-eslint/parser":"5.12.1","eslint-plugin-react-hooks":"4.3.0","@graphql-codegen/typescript":"2.4.8","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.12.1","eslint-plugin-simple-import-sort":"7.0.0","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.2-f8333bc_1648567802844_0.7525184577869906","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.0.2":{"name":"@team-plain/react-chat-ui","version":"4.0.2","license":"MIT","_id":"@team-plain/react-chat-ui@4.0.2","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"18dd40bfdd5cf1c73a11c5f6f2016b623889d18b","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.0.2.tgz","fileCount":116,"integrity":"sha512-AaAfb0X984CA6/skgekN9/YHxMUzht3LjXyQG91ksylQtrTFnSOlI57o/kaR7TV4HvFDUAVVinCe+P2ldyMc+Q==","signatures":[{"sig":"MEUCIQCLDSnZR9nhOXctAyiCviMwnjtFMkQbpEy1dZzi7e/KtQIgbjwSlB3niDW+Cm4K9CKoencx2j8C0VKf/3TjP6cNL1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQyX9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHfQ//dMWUk1UkjmZVL2vghIfld6gRCW12EwhzUhYH/3tFeKzGHu/e\r\nXRHXxrj6m859Yv5ctmz8QVGoUiQ+Ux0Fn2r8NKVy1xw/Ca0LFCt6vXMkU7Ci\r\nm+e8BUKcTZ36mv7MNuAzYHoueHMIB65hindkm7N/y24WQ82GtzG/98BR2N1M\r\n7HHBjRfo0U7vQh8aocJ4emTLMe3WG33h922coFNyucGWWQszztSVor6kQLQC\r\nodJWpVSBWwe1wA6OGmYhb70ysvmIPWYkvsPb1KpBag62BJAhW2vFFAVFVdxT\r\nklDnNX/27W+WVUZU+xInD111hNO2+uzWVsNOmaqcMSNBKwbvSrV4jKQcKZpF\r\nTgiREyN+kuwjfEzmunKmBdVrmiTUMv3/PpetyxXT3/Ne5qBxvLMAoaoa3X4e\r\nDVvqIUTPfLZ5paGJ6d9vj1nAWYQcMbCEJOnqxdQ30Uzqi30xcQDxI40JFaWD\r\nnxL9UnG3HTrIne8HZXDHGwMQJjyZ4a88Ads/LRR7kKyOalsboNBaNfnnkkws\r\nYU6wcENPE/zxz2BFSAn6mAPApSqe5FrqIgF1nLIKFX8laZ6kJh+w8Ns6Phs4\r\nB9wbnYucHES/Dcets3mIzp8bl6k3881iuyxwOS5wA8Y/L8Oi3yx6MuRV3ndc\r\nY/x3CpILoS8FXlTqbzcb+OTMHzChCyr3Ql8=\r\n=R5iJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"f8333bcda0937a8336627dab1f32a4150eaf416d","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"tsc -p tsconfig-build.json","watch":"tsc-watch -p tsconfig-build.json","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.3","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.6.4","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.6","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"^17.0.43","@types/lodash":"4.14.180","@reduxjs/toolkit":"1.8.0","@types/react-dom":"^17.0.14","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27.5.1","eslint":"8.12.0","ts-jest":"27.1.4","prettier":"2.6.1","jest-diff":"27.5.1","tsc-watch":"4.6.2","genversion":"3.0.2","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.8","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.25.4","eslint-plugin-unicorn":"41.0.1","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@typescript-eslint/parser":"5.12.1","eslint-plugin-react-hooks":"4.3.0","@graphql-codegen/typescript":"2.4.8","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.12.1","eslint-plugin-simple-import-sort":"7.0.0","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.2_1648567805099_0.28921311999986643","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.0.2-16c3884":{"name":"@team-plain/react-chat-ui","version":"4.0.2-16c3884","license":"MIT","_id":"@team-plain/react-chat-ui@4.0.2-16c3884","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"38a20aa6192d3908bed49bb8cdb06d5aab68b293","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.0.2-16c3884.tgz","fileCount":116,"integrity":"sha512-yALLecacUifb/llzno6pN9C9V94ZvkMPVMSb55BSg7p5MT809U+MJKAZK7s5p6iwaP+1HsaHDDZ3G2hepAgevw==","signatures":[{"sig":"MEUCIQCgBvr5zmn7cr/lmxov0YC62ecRGF9RCb0+lK/vRBAC2wIgM2GdYN/X+IDGq2K9hCjRgw7DJMLxB16EUbxmojL3xFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSsXrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4JQ/5AEFNEOkgCBAsVOag5U0E8ObyiWbnFKZgRqazEWgMam5Yd6CO\r\n95QaGzaCu08bBWQAUtWFiQjpC2lJ38gn/OxBnCODEJXVvnY6Vh778PSc6ex8\r\nVw8um/dJYdydxMwHjJ7Xfmt2IEaFNiXmnRKYSUXN8dfSqRPcjhpkMPK3GHl2\r\nWGBdFgbGSNJKGBY2Hbe5Pp2FvnBxZUVwG/wpf2IWga5nM243SOd3BuWKTQC/\r\ntD6CfyeFP4n348awUT1c+7LNNY2/hPdf45OvvXl+bZfthe23ErRyEkRa16nY\r\nWltGTfBRrkAQGWXnT3DalINBoHfq1U8PqRbVkytUUw6jYWbtbfRnwljG2Cu+\r\nrTuxfW7wQK5JUA4MEWXQ+Q+LHkfB+tpQuheG9656GwLC2S4+j/D6LPj7ONeb\r\njHrGT1D4y4DyM65hROejUOF7mH4LICn/vozEw+aj/glS+1Dle2Dc5SIayc6B\r\n6vDdftXxjS/rYN8pFlQSsosoHUY6JuYJ1pckupkyg2w8frie9Nw71qtwULH7\r\nqClo9hRaqRkFrWHE5tvyq3QApFeOYXx8ujnip7TTg+FUpkKXKK9WWxryPt9P\r\nxKOS8MSbO8L0N+tljzWSPFU5wKrgMcFKwjPAEfsX3gedDNPOzfp4bw8BLcbQ\r\nbwkJRFk6a1RTjoFFyDO84fcCskzG5QFm+tY=\r\n=KMTW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"16c3884f7c4f77f16c9e77b04299aad45e7a466a","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"tsc -p tsconfig-build.json","watch":"tsc-watch -p tsconfig-build.json","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.3","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.6.4","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.8","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"17.0.14","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","eslint":"8.12.0","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.2","genversion":"3.0.2","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.8","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.25.4","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@typescript-eslint/parser":"5.17.0","eslint-plugin-react-hooks":"4.4.0","@graphql-codegen/typescript":"2.4.8","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.17.0","eslint-plugin-simple-import-sort":"7.0.0","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.2-16c3884_1649067499720_0.9449493589021714","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.0.2-9217425":{"name":"@team-plain/react-chat-ui","version":"4.0.2-9217425","license":"MIT","_id":"@team-plain/react-chat-ui@4.0.2-9217425","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"bd0c5c6a3b5eac120a38573dde6c5d58b0b65f83","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.0.2-9217425.tgz","fileCount":69,"integrity":"sha512-JBi/XViqKcNSo0IEn3Rd439WLWkH0vz6Okf6AloPaXDsznHCZt6hnAZ8z8UzWD19kdKWtPPhlI8fo8kTPgbWgw==","signatures":[{"sig":"MEMCIA96afA+Fj+kh7dA83ifbIoS5KThiDut6qnqVm22q4AnAh8qorX/NfXTBHTNwfygE5R/a2C1C6nMnYUtDtGG0Bkc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5240582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTr0XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBdQ//UcfsFA1UGnYZHOulZozC7XkRrdj+4WBZVruPNQ4x5JXvc4tq\r\nTteiu65qlUK3MC+KESFl4t/owANvzNAPLPE46BQlCQQ46z5csXiV2ANCb8Aw\r\n5ZGrbdjh+mGUhyrHQYWSSq7EpKRGFHFSencRklinlO+9HWPnVCmzjJ2klyFy\r\nvYL9PFuudSjS6wXhyTNRKnN+D1FpjMRid+oo1Y7EYSwNuIRZa9VF5z80tbOF\r\nEFPu5xPPavLZzBNe0cX7FjYuIy9lno4T/bOajm7BNuZXyzTqwELgUNvh6y3K\r\ndfjz9YXiragn7d9MLdZfKbd/UTjJoapniNr8xoyA2f+oAivfu9R7DfmRDrR8\r\nGdHpPEhf17NwRTHO0YoO+7Ihg6fL/fiVX6p57jehaCOGQlt20v6p8qaIUaox\r\n949xn2FzgkFTzPVa1cysB9i9l+Vvejeeh6oDiBM9S2hmaBWmoumARnlY8bXu\r\nhz4teJdS/RP1DliLwYydLzE56ITiagDEHMao7JYKUuZvY09K7ay8IABffr5Z\r\nm5MGLfXNYH8JQk1+63eqkuTR2sQTMZRM+gQRBm0uBm+A2RBpqeFGUf2EboNQ\r\n/WZgck1NHS7Jb0/vHd/oVt4a77Ry+dn9wU0Y41SNpU/A3F7/5/C5wumquJkn\r\nA0QqHoV56P1wZ+EIDiE2V9XQZYADic9KF8M=\r\n=a+wl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"921742541674ee4c81dc75687b87da0211c3e4f1","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.3","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.6.4","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.8","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"17.0.14","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.12.0","rollup":"2.70.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.2","genversion":"3.0.2","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.8","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.25.4","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.0.3","@typescript-eslint/parser":"5.17.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.1.3","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.17.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.2-9217425_1649327382646_0.5204896629778017","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.0.2-857a494":{"name":"@team-plain/react-chat-ui","version":"4.0.2-857a494","license":"MIT","_id":"@team-plain/react-chat-ui@4.0.2-857a494","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"012fc884742ac6718c773aa6f05cd746f685ae8a","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.0.2-857a494.tgz","fileCount":69,"integrity":"sha512-Z/3sJN9D3+dUQffIjyzVm4Xx2R2z2ysZYsxLYT3Nv7fB5BuzAJOkU96caqqJOk7EMHb4gvSjSF21+pjJIaOy4Q==","signatures":[{"sig":"MEQCIC4cwtu7h8D9N1zCjgtYStb+wCqCu8Tf9YD7zh4y5Ck4AiANRr/+G8cletfF8g60Wneq7A13sxA/dT20RqhaE8Rwow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5236103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTw8/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfsA//eIB1sCGm7qdwKWXPoYn6TEXK90Ea/NsWXRSq9hK3/OUMxYGX\r\nphQLqNy9WVV+yHPhlriEf+gORRcnF1/8luO/YPR+SzCQmXQg0uEsx4EDxO72\r\noQmo1NW6eR5OusXSg8qPKwSibOK/XSPXG1goXdduLiUnLdkrcggH18LIp10M\r\ngDo/hngxRfktbn9AVj/Al6qQAAomDv+PVON36gz1SlEkETrTCUC9RDJQa7AP\r\n4SqKYxHtMW+0rkje6mj0eKT1lAIUi8B7cu0cO/RSi8xHg4nFSo3oBjlkEPmp\r\nPnLHb+W84zloyYjGT8UJdcQZtBRKkM2Z6AO6oIR0wLHBU9+ujQG8Krhthsoe\r\nwTNoTzzeYhlAMQ7VQopihyMkkJxNx32e0+7gfwomrhrpA5radV33kb2w+Df7\r\nQW522mprk3OGASKybE1ygebAdp2p+46ha+qwx9GfKKXWtWT9DaLZTcJ09Fny\r\nC+GKAN7SYlP/Vjeu1Uz2V+yjfCZ134f8xOfShi2z2uCVoUaj7hSghzC1HAnk\r\nCELTO3s+ak5gxX/o3eC4YcnsC+EjoonvG1Aq+L8MArnmc1ZI0eorrnXsM2L7\r\nEGhW0HZ1oPhz4t9lnwoFLlzNRS/yXBCkEP+4aHI2krIznFyG1Gqx1BHXXnsk\r\ndXlCgtH9IAMlJXqQFi9Q1PPDxqM891m9F70=\r\n=AdkH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"857a494770cefcc1aeea25dc1714e57158883a59","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.3","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.6.4","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.8","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"17.0.14","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.12.0","rollup":"2.70.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.2","genversion":"3.0.2","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.8","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.25.4","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.0.3","@typescript-eslint/parser":"5.17.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.1.3","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.17.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.2-857a494_1649348414711_0.2561693839855814","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.0.2-495b5a2":{"name":"@team-plain/react-chat-ui","version":"4.0.2-495b5a2","license":"MIT","_id":"@team-plain/react-chat-ui@4.0.2-495b5a2","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"81fa7bb803f46c7f051495c63c13d9b972e295f8","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.0.2-495b5a2.tgz","fileCount":70,"integrity":"sha512-9yr3R7/Q2m7O/dZkxNjP+NQ8ZZaZA/Lahu4Mi+ZLlvuqEvHZBY8awKEt96v9xPENVKPe3RneYphXi64uqSu5hw==","signatures":[{"sig":"MEYCIQDnxGrZ5ZUdFj9cfPU1wibC+ky/zA2thGKLdiVYBxltvwIhAPA6A+iJbLYeysY/BITHAh8KeZ0KoSGhdJ0q5Pq38im5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5245075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVCI5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolrA//a3OeQ6wZ9wqayemfpSP8rMDSc2rrpOapPfmU+RYfpjv2aDum\r\n+pzHAZc7AKdr6+kHEf/XbZ8GUcT7qOWIwoYysZF1megu9eHZS37QrNzAEmOW\r\nfZYwwh88DiVf3JhozJ1W5iBop2xPgNPoFwl/MkNs3HzqCRR1b178E2Y1QcM2\r\nAZfIiXGtTmaOlebAGbqRAVTOKsEVkjiYcCGkQB5w4wYK6qWtOPHdnK55DgNw\r\n5jlYDIZGwUKLB1aBhuDpn9Cgq0Lo1YkNxjYtWc0vqG6ixOBP1ixPPZzURk8f\r\nEflaiONYfwx88jB1xUXIjAVu+2CpVlSPfUyyEh8BIZlzDMF5elbsPQk+R+xJ\r\nRYRUQFruFBvIRQBCJgOzJCtHu5df6FWIAxNngcUt03GWoBthxOAWKh6uz4qw\r\nsXCGRc/Av7iG5o0MfVn+/zYyLWTvTYCAL3/DOkcUzvLJenlGSgy2KxWWbZsd\r\nIr0o8nqU0DSe+wMJR+bzmzdE+M8bA04S6J5J+/uM8Q74XEuVZADhrBY0jQfu\r\nFgK0kyuDW8/am4blkmDmbG3gFyTcPb5dVyhkqNKPjX/bMoGApA16ch8B9dc9\r\ncayUaiiZKH8dmZPQTySgCv1UB4nk6L1MMzHgKjFbsTuWns0XI4hrsPY6WQ5X\r\nokQVNBdVjVeJj8hEBebGXDSYoGMz6AGOhTo=\r\n=Q03b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"495b5a25c6cd030f25a8773b8ed3217fb766a1a2","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.3","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.6.4","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.8","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"17.0.14","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.12.0","rollup":"2.70.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.2","genversion":"3.0.2","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.8","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.25.4","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.0.3","@typescript-eslint/parser":"5.17.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.1.3","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.17.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.2-495b5a2_1649680953011_0.6275982890562697","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.0.2-888d6a3":{"name":"@team-plain/react-chat-ui","version":"4.0.2-888d6a3","license":"MIT","_id":"@team-plain/react-chat-ui@4.0.2-888d6a3","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"02452b618c14e1100f7fc4828dd517a6341ac15e","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.0.2-888d6a3.tgz","fileCount":64,"integrity":"sha512-2lx2c3Yw7cR6hBzvf/qrC7hmXprbI90PBE4j/LqQeEGr8kqMe3zhO7Z6/A1OKc/mGx9d+AWH2btQjGGPhAzA6g==","signatures":[{"sig":"MEUCIQDRDwreEBXGnnaWRQVI0H7/dHELMuAdWSgdgSJxPJZhBAIgX9X9+9te0ufNxhuYq4A6BRCN9oTZq6hJccMu4MsDkPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5242763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVDLDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrc9xAAoePP7WXTQdaDzIXE2T3S2rlgZhmx4sen7Ki5+SBZ6wQwwFcu\r\ng2Q+MZsgWC9xBK20zB+cMDRA6ZRY0pXaHW/zz4+0qWaIJOWjzl65/4Hh6WBC\r\nbtqSzxpeWM77EQyWIaLGQuKp6m12C1GSQa5wbo6Ves6D05Z2vyJ611lEU437\r\noc1uLGXaUGJDfC/vh6wEsZhh1y7JMniXm63JWXQGaIlllNe8fCYQ1x4JYn3k\r\n1z6mVMl8dtginCDB8Fz/+ACG/+ps+t1Q5aJPktPJZ7r/MSZw1JImr/IazgiN\r\nfFhzOTSJ3OzfNu7MWcVUXQIOUoFmFeQv+kKUXlAJx3qU4PtVUD5FlpcBS1dN\r\nGlC0wO3UZKjNdi0tJ48dngRffGZqFShS6+lbODff+PkyZhUQtiJQVqIVTMiD\r\n/sl0hjXqV5b1LRvICxR2o9Ffq3cjbSzaT/c6ivy9Mjdm+KE8Rb0PDCh5Q/2M\r\n4/nrLp5eK46oa9vSVNFjzG6mCR+z6tUNqoL/W6R5fQLfO5lpU1lkjdMYcKXw\r\nDF81tzK3Ru5eOUcVgfWLCKq2ZdZI8Ti6sah+413ZiwhIPcL60wH2J50dIsme\r\n8M9iCmSpVfUDGK9LdE+5iOp4iuge6nhbesDvE+JZhE4OXyv27r6q2B0KcCg1\r\nhTemUq89jor3yXZP4wJVJbbOH9v6YaA3UuY=\r\n=vWxp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"888d6a37fad84edb4022fc1899766e0a6bb2f879","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.3","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.6.4","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.8","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"17.0.14","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.12.0","rollup":"2.70.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.2","genversion":"3.0.2","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.8","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.25.4","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.0.3","@typescript-eslint/parser":"5.17.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.1.3","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.17.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.2-888d6a3_1649685187690_0.030686117087258102","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.0.2-e8b1403":{"name":"@team-plain/react-chat-ui","version":"4.0.2-e8b1403","license":"MIT","_id":"@team-plain/react-chat-ui@4.0.2-e8b1403","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"8fe68c18033ee1db929ade48ac54f91bd683a34f","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.0.2-e8b1403.tgz","fileCount":64,"integrity":"sha512-82iiMlz/6l6Zh2qxVSSR5qTmndh738BTw1F6cA4Ad4RSQyWy4KN60fopht9Qo/i0o9rghWEadijucYsKQHRJ3A==","signatures":[{"sig":"MEQCIBFWndGaMZxHQP+fl1zitpdD9Gz5i/tasOkXf4X2YQswAiAViGcyV/0RpVb3njZ8J2eSEq2Z5yYUEeJKI/Bp8KUfKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5246608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVUi2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmov5hAAmPkiNnVE+guhxs+dyQZB5dE2IqsdoXOrj4nj/BHZSL88O/Al\r\nKxcxvbeDRV8L+c7i6Sd0NdqqwuJ0U0WJUCNnQCYXEcSXpq/IA+GuKeRYu8q3\r\nhG1AuB+BNncD6H9GfD4GUhtSd8jC80x2Pwfstb/s9PeT0RDWmB9lOOumWMH3\r\nK50Zfo3Dh/ox4FnjC+OwgUsAtsYq5QPEVqZMCCaaYCKDdmLofOWQJi/uPGAE\r\nyosT52Ozii4MSpd08cSg5fK8S2HI8k26arsLgtTOLEoOiKEn9DI2MMpC9vLj\r\nV5i1RK5wV6Z19qJ4Aum+/zsTdNeqxT6YUq0oa4DEbx04LW1uPMNgedrZ0DNX\r\nFz0UWJEyGacDCmXe30Ir80J2g4zhzVVsmjdj2oLpu94pilxbE+f1rcXPV3z7\r\n22/cmIMeVQQbQEE7DVHhisYgHz+dHqOL4deGHNGrMoplhqdszU9Bct1vO5DO\r\nr5YYYlWwIQMhP7KLWtIYGs2r3ZPOK9OxBb4tLtHtuEcw7ym4uYgeCM9RlEFd\r\neg96GTKQGuv+7D+S/ChsOsz5uZJ2WN5CYph+0WAnZ7j0kxcdOagHQ2fRtggr\r\nUnbtNJmjestuPCuNWaIK4RBqpEwdnmdrcDeOqSF85D8YEymK/Bh736I8GivJ\r\npCGpAq3vsEf2SHBNx+4AJFImDaUd9TWmy5s=\r\n=PHlP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"e8b1403640c02ac84834b245ce9cdbb7455c1660","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.8","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.0","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.0.3","@typescript-eslint/parser":"5.18.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.1.3","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.18.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.2-e8b1403_1649756342196_0.14293905614157443","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.0.2-8b2c6d6":{"name":"@team-plain/react-chat-ui","version":"4.0.2-8b2c6d6","license":"MIT","_id":"@team-plain/react-chat-ui@4.0.2-8b2c6d6","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"8ce82ad02c7f789cb89a37805958a20cc59def7a","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.0.2-8b2c6d6.tgz","fileCount":64,"integrity":"sha512-NtRoPM1LBmpg4MQhK7n49qtyey/kjJR1lpZ5H3lJfW6c2ZVsUFGrpoLIu/t20OWHUgOFMApTKMr7muRrehTjXQ==","signatures":[{"sig":"MEYCIQCk9kiDfoC7RjPwuYRESUjPYj/FhEeDwnIbzgLwo7OWuwIhAMIzwzonYVmKsPfZp4BmT5ueDwVWdmboz3+ngiXe2LtJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5246654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVUtNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWzw//Y1Exmk4/NQwx2VYpMNnIc9qfBeU+TTsYVya3sZzfCmWb1CzJ\r\ndy4DEcf+4XIBjpKOltY7KPnnKIeJl6BHlU5H2i2Yrm4HBbUwM9eVWdqsWXeo\r\noPs9KEfZ9r/tGBEYvKxapf12ZJN7lwPn1EL/kHdO9q5yGRdpOjn4w1NgYHK3\r\nQCZY49GMuZYmeatT8kcTxEyBjIQwF9wDtut0uio2Biz+kOrRorZQvp1y4OjS\r\n28m3N3kXC9Z+5mt/OtrMR6k6uCX97m+RKNUdlEuF4Tabs7fOKoEgIZrgZLOT\r\njFKnW1h90qaJOUk0GB4+EIWAFcpu/x6gYfm8w91ZRXDfbrd2pLG/0IDezCZo\r\nHzfciBzDR47aa/ocAMoUd6bjwEdSHq2ajKWlVK8PlMDmKHTBVnnVlFO2rxv1\r\nKJzInpjG+Xqw8hhi6tAAITOrp1liQ3ctcJt0dGLzoBLNdFmvESoIJi7lJDXB\r\nMI4DLsE4gPUYHSCSPLf+BnA4Q+UrVVjbYqcjyWhafq0Vy2iUuYxujP4jCXty\r\nhXg1RUQlky4u31CDyRglSSqGdUVLHw5i6cdubgO9cRz6oQrPWiRNNYTUiOGN\r\nkVWM07JdUoDqF1m1RmP6qYnPPltRtdfo1KPhVodQ2lQ5TuY5NXOgT891No8N\r\n6xW6kLAuKDPPr0bLEZyJz8X8LkbT6LJw6vs=\r\n=Obdj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"8b2c6d65c2eb06febe4b140e348fe9953d70ab54","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.8","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.0","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.0.3","@typescript-eslint/parser":"5.18.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.1.3","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.18.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.0.2-8b2c6d6_1649757005190_0.7449058229426102","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.1.0-c09ca9a":{"name":"@team-plain/react-chat-ui","version":"4.1.0-c09ca9a","license":"MIT","_id":"@team-plain/react-chat-ui@4.1.0-c09ca9a","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"3f5a2cd1be6df808f7ae0e0d9fd2494e124c085d","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.1.0-c09ca9a.tgz","fileCount":64,"integrity":"sha512-QQLG4LQNWMTsTYjd3SIoyQ3D1cTDHD21DIV7Xjw7DTjKPXIzlsejnWI57nJ52KKGFZNGRzshxZZNIY84RuKu0g==","signatures":[{"sig":"MEUCIDlZOvFvR+Yf+10tXbZuJP96AGJcmpAh+9I80bG5lOYnAiEA9Ld1R9pcIBi2zXtmX5JJHti9VIOR1oVFR1Ht7G5vw3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5247104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVYCLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFbQ/9HDprh/sQmZwr6UQt6rRk63gxK51EyjDgYfeDBzREOVMX8Qu7\r\n29SRya1nUHFI4eNF2phJE4cf7P3SmqG+Y5vVejqlqdEZjXwrfQfxEyipZHil\r\nEoYpOTzxouwLxE9Ac0r+QEjSF9812f3mXLYP0b9qo+Ud+cKkCYti6nLVK1TA\r\n0+x/Z/cszWAIntH9nHH3ihiZuYge218F77mjtaNPANavURFzzlfIt+/s3ZpF\r\nOfz6W8D00NRj3KYuMnbmNfx7fr6329gHwCAo4IfFLTBgZu4ddaui9l9DMzSn\r\niPxmIpHzMw1/72h7N2pb4qG9kXD1pqvPlg36c2TVKHhErN9ccCV6IrEenoZe\r\n6XRbbYKFsJpA3+hxj6jFuDda4vOnmmwW5/QXSoxritDLt4PzV1dh7A2LQJRN\r\nNHXdRszCrsCC/VNEnmvNQkwHKu7k0efKnKd1cpqVd4nks3Ld4AOYGtG1yf9l\r\n6SgQOJcNK2OFDW8dGlizyNf0JqvkERZkbPjowzhBu+wuF0YuMOdi1sUkvaVc\r\n9nz7CPURhmdLEtcP+0f4D8XLljby2ilt9/UtS8O87rdLnIKZYvHZUAaxQmQp\r\n5LednAKjckDOcX8sCcy6npOOKRzrsj/kEPaMGS4CI+06a6Sy4O9LtMDxaeSA\r\nCsSSlVbuQ2NWXP3xzafGZqbW79kp20O9uXg=\r\n=Nlly\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"c09ca9a898f4eb605b1986799fd5f93d007d7e02","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.8","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.0","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.0.3","@typescript-eslint/parser":"5.18.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.1.3","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.18.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.1.0-c09ca9a_1649770635063_0.1125072069050641","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.1.0":{"name":"@team-plain/react-chat-ui","version":"4.1.0","license":"MIT","_id":"@team-plain/react-chat-ui@4.1.0","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"a788d68b82a10ad286ab3e797316d62b3315125c","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.1.0.tgz","fileCount":64,"integrity":"sha512-3Kr4UJhxDBNeWKIu4OoWTPaFPPEsLsLt+xTUDMIP155YK8ck9veP1/Jo6Tdh32vNu+62vri2j8dNg+bVOHlvvA==","signatures":[{"sig":"MEUCIDv6Y9O6dhKY0KTGJiixaz2VbQUgTIf2Qh6uR1ITPuEXAiEArzvXzkieHN4DG1FqVh2U5PYVDdDhO3yCfFtrl00et/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5247096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVYKJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtGg/9GTMH9w3mVi/FOkwW6u3y526fW0aEfb2Df7Gou6JqyjTXDjlP\r\nLmax9dyLnMeaBykIXSxpDz7vJKZUoa4T21FY6vYQSf1WPHDyTqepMic32Qlm\r\nDu0Ny4X795+MXMKZazdaMwB65GpZb3kUdtbVkxQZL8jvfF70cGxd5dO+irXL\r\nnMsODja1DZA/MdvzVnp44+CAB3E8LbLpByL0dKZf+Jq306ze+h2pDtDPFQyJ\r\np0yXE9RzEjMAgMgtWTtQ13jFb4Tl13LH92lt4w03JeazEQkcTHmH8oEOuc2W\r\nMeuT2MqjKt1sR1QTGcWgsrpUhogmC+a1B1K9XOfE25rlg57ufUZUtxjfdny6\r\n/vj06yV9MrIaim/OvfpEt2lJBQoqA13Oz1gkz37Ado6PEHc7p3QpJv7VE60I\r\nnTT0O16XpNS+8sxsL4j/Wn5sY/uV+XXhEHtcwcgBRPoWW68JsVmGdaVmrgTs\r\nj9LPxbQmrp2YUgKLgw+Ltl2ZsRHe05AbiTjpOYvIgZggbh/T78BS4kV/G+BF\r\nkbVYsS/1gptGUAjQ1MqzMi88ibtVaksP6Ykwaj7OHhzlp7+U/nR2OgCrEVVe\r\nUNgUeesA/3YXD0l5xIN1zEGGGGJKltf9CNw09pD26/y1pQs6+APkqWkMP8jM\r\ne50tjIUOopMp+VPCYDHrtSColfQmrTRTWXw=\r\n=Y/rs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","gitHead":"c09ca9a898f4eb605b1986799fd5f93d007d7e02","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.8","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.0","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.0.3","@typescript-eslint/parser":"5.18.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.1.3","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.18.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.1.0_1649771145143_0.5057917884528091","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.1.0-ec5c6f8":{"name":"@team-plain/react-chat-ui","version":"4.1.0-ec5c6f8","license":"MIT","_id":"@team-plain/react-chat-ui@4.1.0-ec5c6f8","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"317dd1752e8cbbccbb5f22bc1ed68656cca33fcd","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.1.0-ec5c6f8.tgz","fileCount":64,"integrity":"sha512-DNU2x8GrnhQt2SfCBDivdmdVk/aJdmaDpM55aBETSvkh5rxmtbnBLigWuBMZ0DOkD9ckMKcxSHf4q5b/WUJ6Zw==","signatures":[{"sig":"MEUCIAacDBS2B1b/N7CEAgDk8dToOMATzira9l9PezG/cmBrAiEAunFpUCK6QH/GSDJALbuP3o21lEeeDVY/qgd4BMXeYcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5248274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWBgPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8ug/5ABtq04smxv1HsGin7h6f58yvdWTQOI0c7eAm2MTIppecKzht\r\nv2Eu+PYL7h7vjB6vtZz45XjjwbssiyRHnVRIBswxmwhVFqTZ3NMGXVKPSiBo\r\n7azkAwuBBs6XCEAX/1Q3a6Vj0Qy6I9Udl8eDoZVXzj810776BGPQX9pY6bnY\r\ntZTw1ga1i/XzFBkjQQGAVI/6vvxia9CaN6hD9ePS06pFW3MG+W2L3A1IeLMX\r\nCN7e5vdO4cvE+AFlvdTjh94FzemGePuzNiX8i4t82k+oP77/VIIaBtZL1pdV\r\nC4UvkNd2+XB5vOEsR+LSjgLx4+VXXnWtdvMrL/7GOnrgHLnAp1jcQxftDFd8\r\nw8l63CMo1hrjAzjg06xIZ7FU/i6DMZ8qTzqhdyWg9QEYmRW0gL9enc7ITaP8\r\n6BZ5pqNc/RXwtjGJN/2+8UaHVCHPfbMi/bVyDwyKi7bXEPiGYYBHZx9wWBRY\r\nVX/zJQtrqvmmkrS569T2zeyCvNbhht6CxZEv8K1SUzZUO2Me/wqn4P7QOBDn\r\nFzASdBCc1CG/aljJ3AZTGtjS01sBX7QA8vSpRAz7BOG6juRCrC/Bkl/DDEp0\r\n2IG894OpGgnP/eBX2Ruow/fYDkLVaI/m3OqRGEG83kpfBDgnjrByUuN2ZnP1\r\nXqyeY/RRGdB1bJb5qiJKGmTMwP+VM1HCKeE=\r\n=9aty\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"ec5c6f8bff1e62368c6b511f248d47ba17cd87d1","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.8","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.0","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.0.3","@typescript-eslint/parser":"5.18.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.1.3","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.18.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.1.0-ec5c6f8_1649940495475_0.3753604863807831","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.1.1-31ea14b":{"name":"@team-plain/react-chat-ui","version":"4.1.1-31ea14b","license":"MIT","_id":"@team-plain/react-chat-ui@4.1.1-31ea14b","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"526115212c8b89355dc88c832a1f3a2af58b717e","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.1.1-31ea14b.tgz","fileCount":64,"integrity":"sha512-1LJwD2Hffi0R/NIIvu9bZQpqQWF4KcN/lykBKJTvJzWqtJ9FH3h9DQgJjLorT/gLoYIn5OS6iVFURZIndXLQFQ==","signatures":[{"sig":"MEUCIQCMYgoG+LIU/HNypkXTIy8C1PrrSQSmu127+vJrx8si5QIgMKzCDCROtC5HC6j1UJ3DhGS6moWHUDWrxwDxHq2u/1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5248399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWB1HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0bA/+P35A218feBtwnx9RiL2GCfiG3GRVtt7JOjsiPR7qMajfsJCE\r\nmos9n+ll1ubyoEJ3rv6xBq5EQaC0rvI2NuBnZzy+krLWV9YvN13MX6VygBDz\r\n84oVld4gkZYhSTfNTuPBeFmcvNPG/UHTzbpBLp4ogk5hImACtv4p3oKhAK5E\r\n3/3ryUyOaLH52N6Nbhxb0yBRIEIXmp2KadZjrb3xKnPTbrD8nCNt5AOxG8/B\r\nZO5B67xy2UERtLRWAQk6FSKUPNrMb1TsKx4OrWNE48rIxa+Vavf/gQt46L1i\r\nkcXLiJ/MirXrrLEY3WbASqBetz4eElgl43TuGVhjq/XfE1Q+mLoHk035MaEi\r\nECZDpdgC1RTbyCOSSt7oyLSaFPCH4QP/TTqHlja8CmIchCZoaYmUkpeN8Nya\r\nnhSck749rIsEzJVlC+BllwDg9+DIRlZZAnJ1aNU95IIj2mk3+Moql0d/wdlT\r\nLNmRbhH6z7CZQ8Otw8weRp9haSNPkyK0jDn+3m7O6jv32TOnk5z2CCIbibb0\r\nSyINKVCheZ+Yn4rFhS6C90k0hqQsi7UHeLkGJLkN4tuconTuwYZgMzUpWori\r\nPgYeuettAtlIBqEqwRtAmYinwPJHL0CnuRRwRvjdwCrhGxeHbcDkLQB274yO\r\nXdw8FIZKLIDCMTAiEwuGE5VrJWhNqo56ueQ=\r\n=+hKC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"31ea14b229074dad181da948e721857907446457","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.8","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.0","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.0.3","@typescript-eslint/parser":"5.18.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.1.3","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.18.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.1.1-31ea14b_1649941830754_0.9032593311273087","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.1.1":{"name":"@team-plain/react-chat-ui","version":"4.1.1","license":"MIT","_id":"@team-plain/react-chat-ui@4.1.1","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"4ba8b5f4d0b4a3188a377378af250d96a08c8424","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.1.1.tgz","fileCount":64,"integrity":"sha512-qyVdh0AS6ibhdNKqEnTrIzWIBUgfsoraIsqr+HhF7G+fJcPZ9aej0GvrnEq/52/9Gk1kKNTH2mHGdD9PwvRXCQ==","signatures":[{"sig":"MEUCIQDkqncHNfNBVq5zQoTzAkmm3ZtbTrpCLONlqEMfKgnPbQIgWIwY5F717+P4PH9UN8cFog1viNp+ea4saaCuYDWtTZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5248391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWB16ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTwBAAjlFsl2ynbfbQ71WYoN/M5gdlCDbWpRxpI4UnTZI4RLBGWZcE\r\nf1Aa78PI+WFFFH6DyY3M1syqjI30VCEDMVIpDv2Zpb3ISOtUJsgewM01nNtB\r\nNaQEtTkTCcP+zfhZ+TUwYuYPoDP/Ao8Zd6qDBduBRVj4tAOHXxPpLce6wtXH\r\nQWpNfMTL+sRMfpbzChetI+9RyiZGNiKgZ57/0pmEstQ4ykoPsp000BE4AQHL\r\nd0eW1QHdZQvxpqHyMm30stqe+2/26Oi3kY5zA62co+x5+fY2jqk3VUxc1dEd\r\njUqU0vBD7WyKv6XHfXs/T0OTMMq3Q7pgbyTx2SjwGVWU9TouPGqr1057pOvW\r\nB2FvYueCBV2l+VnkpP6MCTBqZTpHu7iRqRGIIJ9VQCndRzkmk9T7BTHIbdNr\r\nDPC2BgOml7YM0I9e9pWU6OQZJE6MPlG0+fZ+SB0ydEHKV1WReL0+jefsIozv\r\nHg+3TXLynQfepZT4A/93aDyFvXcUMsMy6YMF3YhuTUeD6TgJR0HBs/rLtF9q\r\nHYrj95IaBqV6FRfbN/DI4ECoWTAjUep6uw3KVrF5Jz5cvmrKoPEhBgHpo9Cw\r\njLWTxUsTa9yfQET12wMzJ0oN2l0CNTKFisBywpiSKc4hrqdhxvsidsX+zzII\r\nt5dqX0xrxS6a4k59rBQzgGfh5+KEO242MJw=\r\n=40iZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","gitHead":"31ea14b229074dad181da948e721857907446457","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.1","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"7.2.8","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.0","@types/react-redux":"7.1.23"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.0.3","@typescript-eslint/parser":"5.18.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.1.3","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.18.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.1.1_1649941882176_0.14007488645446275","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.1.1-fe374c2":{"name":"@team-plain/react-chat-ui","version":"4.1.1-fe374c2","license":"MIT","_id":"@team-plain/react-chat-ui@4.1.1-fe374c2","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"693e1a50c76b7eb77321208cee0d49564558d408","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.1.1-fe374c2.tgz","fileCount":64,"integrity":"sha512-UgxQwHnf1eEJl/sfM5lWBwC/2T+Oa3lRQKb4d5v5Fbbat/K+iR7p17iTqFVH+BuVtoC8XJTbtHABTRG9oXo8MA==","signatures":[{"sig":"MEUCIQCDjkc8GeUxSqhbNXyOoZRRlQI2rdACFDLDm1ptoLP1UAIgJ+dqeE3t8nU56Uw6tx/5vEpLaw/EpsGOS8yQVX5sYvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5147207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXuSSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpjzw//UpitXCd/g/unvKEe6bKFskLcxYkEzIU0eTHmYA2Q18XltgWr\r\nV7lDHiM+zrDv8Xn980lmjjBktUY3GSOWA3ucMAv7tVz3uN1AaY3z2RuqgnML\r\n9oEnFltavwyJY1ZZO/dm3lPAIiMiKWCpzpqXZg5x9KKQl87CECF06ACtMjNd\r\nYu7by3DVZmbTJyNjUAo9yde8siSrBg2qw0CO4E+aj8VF7YmvnLV6bUsmhQGI\r\nR5p5s3rQiv6tcf32xj/r3rYBm/2bGY2y3kNbNyY0rYthuUw+6jcJQjLTXmE3\r\nc0i/WFaVrYkUGUaZCnRWa92UNeF3O4NR+q89x8Jm5E8XHqY242Q8XB5ny04Q\r\nI59AiAPAVftbZRqkl8UVQZiT/JupfGP3gn74dXKP+GW7d3AHAz6vgtJy0Kdg\r\nrmRxHx2378lBRnmgHWSliIMX6LM+wt336s2tBMoNcZ4pWnqnXZ3/+6YRQ+tV\r\nwsxJj5HCfma9jkqNyjuEWfh/nH9OjiTGRvBkTIM8tjTrk3ZcI4jSxYNhlhP9\r\nGCPhGw6v0pkQN9bMJu8Y8xQcEhJk0xufNZvin8OBv3qDe41AU377XDX+qyWL\r\n58Oq+gYzlM0hVaGs4tMKE+LIbuqctCNRWHtmiKtCSswxlGq2UzO+lVilNP+R\r\nG057+bINxaPO6ZDrgzIU2Ev9BcJpTfXWx2o=\r\n=iEgX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"fe374c23bea0291f382f383814268d6dea3f3e7a","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.2","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.0","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.2","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.1.0","@typescript-eslint/parser":"5.19.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.19.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.1.1-fe374c2_1650386066490_0.11094826176461425","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.1.1-55e9dd3":{"name":"@team-plain/react-chat-ui","version":"4.1.1-55e9dd3","license":"MIT","_id":"@team-plain/react-chat-ui@4.1.1-55e9dd3","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"d3e87d814b338affdfb733104ef782ab0856c0d0","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.1.1-55e9dd3.tgz","fileCount":64,"integrity":"sha512-7TI6ETj/ax/ADMU7ZEYj5iNiMn22/TeYh/IrmpKmBZ2aesqHCEJHmkAb+H6rg5JBgCAhwlcy4PTJN9T7A4C9eA==","signatures":[{"sig":"MEQCIBGuWFxF5M8p2hxEzOEMwScsYm+m8HzF914m8qhJL865AiB6g6yZipe+YmE8D9/cUkCcE4boosgwhDb389u4lDzYOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5147207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYSY/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNDg/9HrXqwlGYMapxwGwo7vftUG8EwT4h9F6qA88GH4THlSCvRmLx\r\nPbVUtyHLidUTYwDu5+CMIoUgy9tpqGkw8REfOIuuvAjpPZziAKckqA76n2br\r\nzXE5TotLoQziz4EuUY2ALbZbg17P+Iemqr/97y1dm+vMCDKkyUSEYQwOyQmD\r\n0vhBU7adK+mRx+CKJ43I2nWpTXEVGbccKbm6f7PmjOPPWAD16SR7LGgqoJ/F\r\nhpMdproGBs4HWHaOF44OG3UzD9PS8lc8+UTEem/FPdEVVyTZuToe5lcWcCfs\r\n9EtqIJBZ2Ce6fbIAmKZHuFIuMCbVrG3OAv6aOixyBz5/bGxBxWWO1qCmz/Rs\r\nzEoiz1h52VCozrVzZh6Ow9voNblF/kvMWJt7qMFx6Ji90W0JfP6tmlvqPimN\r\nTO/gIr+xBCCOfvghTMy1IRZEVihbc9MDcGiA1hWDD28mPilPEcarq7YUeLVM\r\nWNz8ZxA1yfA0lO2Fiqc2bh67MB0+UZXziPNfb58fHhxhj8P3DAia4iVhSCAd\r\npNo7OHrNEwamASZHxvssPzua3EQ5o1LiPZsWbv05lrrqtT32tCQ2oGfuVN66\r\nB12/kAW9bTrB4YNFlF+buwrxmV0TczFXrHLv7gsE+wqsqDxF/81Z/p7TPEpp\r\nNcOrIwBGIHhotxsqBsU9rgpzELntcch/6gI=\r\n=6nji\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"55e9dd30587dc6b233cc1becb37853ef02610b65","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.2","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.0","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.2","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.1.0","@typescript-eslint/parser":"5.19.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.19.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.1.1-55e9dd3_1650533951588_0.3952403563392888","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.1.1-c45d14c":{"name":"@team-plain/react-chat-ui","version":"4.1.1-c45d14c","license":"MIT","_id":"@team-plain/react-chat-ui@4.1.1-c45d14c","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"f8330247a0e71927087a770b175932a32448a5d0","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.1.1-c45d14c.tgz","fileCount":64,"integrity":"sha512-Uzc8QnTUQacGGC0OpLNiAle0+9Iw4P7k7jPFKtxn5C5e9OsnSIdLAUkzz6Hoz4TcHoVGuOcYRj3ygI7NB8LEhQ==","signatures":[{"sig":"MEUCIFv28WFqIUfKBgxmGIaxxOgZ7zc9rN2lpN1PNUzU/iVAAiEAm9UemH0ndpszamicLaJnnsfBkofpPySxRmhO0DjVTbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5147207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYSjCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTUxAAow1ceoN2RWTCBtg0B+A9RU0oIpVkMD0E97d0aQ1QGr5Ph2EG\r\nBgaL//Uvne7cs2PMvzrsEmMGQMgxYUhe8rqWed/Cq/RrbJbF7EojUpiBAbfA\r\nsg1C79MzLnhhfOukW0LN5FvO6l3bGI4GJmumom90fSfkBb14Lm5DtiJn4o53\r\nOVTfMsdY1qYAOC15PHPvUYw4z/U8eLJHEQxQAMNcuvhjev63vCOTwjtuXM9h\r\nRiA9el+ruxpUOwgNlwYjgcpVUA4zYHWMwnSIqpidHZto95jrHUoToL29unjq\r\nvc3ynCvmGNDk4A9x54BTFQXHKh75sRW2Aatjc84zxcgGA3U21Hde6QWO23Cn\r\nB51xT/twpdu6IBkWOB2riI7CLIjyEuyy/xGIlbjlCgufHrnHmD2rWOKHjRj/\r\ntUje9C0/8WmFeGVBSvZRQ5/iVQMHSB7M0zMxb9YoT0WtD8lVuD5wNRkVgOZQ\r\n8gel5S+6VndE86StKUN2k0zFCzP6yXd61AYlVcvIlbKMKxpUe1GL7PekzWYp\r\nN41j9HdmIcweafoGh+EKiqI2ywv219Gu4sG1cI/O5Zdr10AIK5gjSN+mPEg5\r\nDSb7F3Zzc90v7NkQq94jDf4jTUhvo/MJFrBqUQY5JagDBV/53zsCxYDqWXGb\r\nZEHl4pEG9DBXEmnBVILqJW5Shffbe6zrI3U=\r\n=0Lv3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"c45d14c83c643aa32cedc3a4ec01feee5ab8c326","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.2","redux":"4.1.2","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.0","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.181","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.2","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.1.0","@typescript-eslint/parser":"5.19.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.19.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.1.1-c45d14c_1650534594296_0.22748304408854492","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.1.1-9e7bc00":{"name":"@team-plain/react-chat-ui","version":"4.1.1-9e7bc00","license":"MIT","_id":"@team-plain/react-chat-ui@4.1.1-9e7bc00","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"d01c7b8e94eff8a822f4039f05d912688cffe096","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.1.1-9e7bc00.tgz","fileCount":64,"integrity":"sha512-GjAxYQw99EF84LdtDbymw/K8ujrgmsjzLLB9oDcGG37RB9sChomVDmGFIm6o3B0DFzV1axzanKc788glFUi52A==","signatures":[{"sig":"MEQCIG6MHLn035QN7iPhSClCVHcJUMdXOU1Z4Wsl1RZxUK4hAiBeILveugXAHR5YpfioPtrXv/y0byHh0rXtVNtGuD0SDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5149367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYSk5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7Ag/8D7k3cU6ZSIMP+8wOT4y8QB4c5ACEm4ABbferFQ6JGL1gioR6\r\nRQ4tpNZ2WqbmO3jv6PiJhokxvOkCWbjj5Bv7VEUa41nxHewLu1ouT4d1s/fV\r\np+0FQAZ+u+sjgKz/Yaeg4TjiptU2RTFmk8UrI5sY7aKkkE3Z/SRdEvErbDgF\r\nJjGQt75Cx5bVJO/y0fgWIcvaQJIlWRjLjwTcgcZ0OScy1+evpk5MDBFPs86M\r\nKIxheiBYTgetTsW2Zkh2gKUxe01Id+LZtLyGPmLz/W0ra6R9UzQ0qRTJBpjB\r\ne5z6TVZ1hKV5Cs4MAatZo7YaaCa7tdYbhp8+osEZ1yo2aZqcUw3YDOoD5J+m\r\nl9ascfNd4PvJXOTT7Hpx8YfDLPMjJnOFkv5m0sIPS06FHy2BzHwgagixaKfy\r\n8w+6Vu2L3quwZJrdP+t28MrI0n44JfRZeceTtpM2FzXAgXa1Iq1DdABybrB3\r\ngesRtBftV0SHA3yIR8pZT+HywUgfsN5wa2tgrMoPXl/ciPK3fL94k8mW0Ast\r\nXQIQeJzDr5tpdoQoiopghNVt7cSGkFqKadsULVoMBlleBYl0ywyrY6nEiS1Q\r\nR8vlD6dOlDZCZA6REm1FxbV2OEUhVM9eGI96MkKOidhUQY7NlzZThR8ivbQx\r\n3cUoBgLsZzlgrNbUuFJ/ozo5Y1kS1SErBtg=\r\n=ABuy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"9e7bc00e7490e659711476d50daf6fbf66b479f3","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.2","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.1.0","@typescript-eslint/parser":"5.20.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.20.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.1.1-9e7bc00_1650534713197_0.14508261901541486","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.1.1-c43e2e4":{"name":"@team-plain/react-chat-ui","version":"4.1.1-c43e2e4","license":"MIT","_id":"@team-plain/react-chat-ui@4.1.1-c43e2e4","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"73df1bd229f873cbe4a688f83e443d0a937d65a0","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.1.1-c43e2e4.tgz","fileCount":64,"integrity":"sha512-HC9ZAuqJMhqweDFBinzTrZTw719wn/7mvlcFKGOpMiWKGirdTBYuJXTbikFdSbBT5v7ckCoKthdLeZqv74bW8w==","signatures":[{"sig":"MEYCIQCOKjLJ5TDi4mTbZlvyHbgftAL1llTmRgY2ziCniwqJNAIhAKD6cWwtoe1SIfApu9UMs12ntCIVyyqSropEIfxGwKAV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5149367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYokSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqC7g//bjYezPiVL4YZr2Gy2ehHk0/kdEp40bASaQxivlAP2Yz3xItn\r\nb+MWkSAJdoV2ILFzfmIWgbWj7GT1tj8FNrWaBj4ql505Q1Mj5lXyBM9HCKUW\r\nBbZM7Jm3yxAVYyPxccPaOVvRW1FsSu4mjfQKJxNtcyRodjM88MO7q29gL82s\r\nNzqsjdKscQ8Sbtx+B6BqTYU4kw2gkowWWCHtSEVLLCmMxgGpIzJAOStIF/Dg\r\nPnuh5wU0pXfSm14U1zDE8Z3c0qScGqLO8U+dcZHTqiHb912yxz8EKpdaizHY\r\nIg/uCWQ7F/6vZwrEo5Bt6rzUN8c1jddiUtD7ucPvPqGZJkKK/7CpgFdOnZGS\r\nIO9+FrkNRKnfol7ufQz9VmcpU2IQXjmDorKoTpuQd1E+frXWoiKkk4BdNgHd\r\n+vfpxiFjPmpHhzOKfepc5Bqdl182xd76ECSiMrwNhlCAimvblAP5bXWzHax3\r\nt5qTgN5VC9kF3SO5VTFs1m9aSFhF6+Eyqs10KOg6GzYsHqjd+SyzgV9iT8CQ\r\nihhYP11Zd4TJ7JYPS4HTxQjU/j49XS3XkHI/MHwY3U30WDKpaSyiFesDR5xh\r\n5WEqo3yyZH2VV9Hg4LN5+bPDGJ/WwgrWxcc3R+321e+xjqz7/hu0U7/3rt9p\r\n4hK8t/I/6E1nEEt2HKW8Kh+l+XtsBpBlJzs=\r\n=9+Hv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"c43e2e48a8ed74efd5bc74ca89e7bf5290fa0668","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.2","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.1.0","@typescript-eslint/parser":"5.20.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.20.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.1.1-c43e2e4_1650624786399_0.26110035255632047","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.1.1-c19f7ba":{"name":"@team-plain/react-chat-ui","version":"4.1.1-c19f7ba","license":"MIT","_id":"@team-plain/react-chat-ui@4.1.1-c19f7ba","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"e7cc0b59df9326338473aedc5074c0a4e22478f4","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.1.1-c19f7ba.tgz","fileCount":64,"integrity":"sha512-yqPV6ildQIfg4j3wHffswzMydxJhzLR/QPSvQKxTnygyDecKMJZw7/yQdQDpbL3POumGjHIcmOC/QJ7ttu/+Jg==","signatures":[{"sig":"MEYCIQClYXIwR7kCBZcrCOTPLuLBsnezhmEWZkxkbZY/kJQ0ZQIhAOZxgfQb0EaD2TdaH30jfcjw/fEyOx4urr9E04/1UafH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5149367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYomeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkZA//VOeOotPn1e83Xk9/CCYTebKY5BjSM5x1eEWs6d/a5jqn3zZK\r\nusbgDRWzI6bwjLMwO0ExzIgH/TmEDMGy8Z8Me6bJvguhcHQgFJ7iwCqxS9xX\r\nGvInocyvveYj9fIwavFRyvcjTh7cSs+hgu3Ys+1cDMih+8L1NuGvMaY3xce9\r\nHcMtETYsGxiHwRXKS82np8PEejI4VB7eGhLBd/QsvdgL6Z+ANJtS52PfuS2Y\r\nMdR9Dprg/Yx+E+LC4B3Pl77otnM42m0HWfmZxfr4hnp8DummUwN29k5sNt0C\r\nrUDyb51GxXdQqFBwZstZ/m6ShfqW94TPQkprTWnb7z6ORx6//cKGs3jElDRx\r\nj7F4Zugep8lGtAnQ7yEJpYsIPCJ86+44JlNqoXLCtGKw7kl/lSktmCWlG7La\r\n6IQ2qli+JLeDf+/RxZH77bXVCn3M5JPo7CpnyHzjlpe4MgmGtZow1j6KPIam\r\nE+JYd4Nuqmczvffq1EOpQCgvwr+ih33yLu+KudBdurZmnwjqAbtDLRvD6HCm\r\nVN9C90sEr2UrbA+4lQbPfnGixB+GtdyH+yNfW+BrPzNA6Lu1tleFhgLEgFeP\r\nP+V+M5mX/K/UJenN9/fW4hJ1yYdGNsZIm8eFdaVQYn4gdzBK54YI7SodIlQS\r\n08XksU9ir7aiRPWackc7r1mE8A2TbU3Nfus=\r\n=/rAe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"c19f7ba823584038926e3bd0d9a2b57acb1afff1","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.2","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.1.0","@typescript-eslint/parser":"5.20.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.20.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.1.1-c19f7ba_1650624926126_0.16868457558359506","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.2.0-71091f2":{"name":"@team-plain/react-chat-ui","version":"4.2.0-71091f2","license":"MIT","_id":"@team-plain/react-chat-ui@4.2.0-71091f2","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"26a54450734e6edb59a058b4214bae525b8e75c0","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.2.0-71091f2.tgz","fileCount":64,"integrity":"sha512-nRKThAwjHVTIxPWYUPoCoZ/wYc1IwhM9T8vLk7cNvYDuuhaCIWl6lCCuT+c/B6quJ/F+nDca3rBUD77jrUxbqQ==","signatures":[{"sig":"MEYCIQDIeD0K08qgGZrQpaPcRt3UhVr4Aprxy7imd18/JliRhgIhALxHj0d3A2k+aTkbaH8BfAcM6NPGQdxDyO8EGNoSxf5X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5149544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYo46ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrv3Q/+NcCviMazEhsh+aXws8NEYOMqj66SJ7+1qw6qSVGHt+118MJ9\r\nNMp6U3vuamT7ztGTBZNkvjnmDKZ6SxJfwAvqIb1gJCs5WuFUBSqR0GMMpZWQ\r\ncyBFnEyC6UAhzzu5xt3rB3aX2fGYrlkNJkHOyTgOCgAzrrqur7qqRzbvjs00\r\nulUMPrI+fruhAijeZ0OdvKApyYkUzy8YjEs7pfn+Mg/cpJ39ySGWg6DxY/is\r\nTACUrdld6nUVZ4nW8l81tpzrSKTT3WZuW/ro7TIUhNM4aINLgBpR0RQeSCqS\r\nCE9WjBKnNLcSRW5EeWdWIjO4n7HG3gF3BVKQN4oOiFsQORjAetimELes/XgB\r\nfwctiwh5nedWOPIcFppioo6ThP2IPnlVcOuFqtVAxb+VouoOAeBOGHm0sK40\r\nyChZLC3kHqc/8uMIzLBAtfKQJxGI/pt4RtF+9TisQkAQuou75YnfK9WU33CU\r\n1MlBCWKka13THpHI2qWXyEXN5l8BUZjnuSYVfN2co0g1CY3WQiSgUnqIiBfE\r\n47AzNVnybXKZnAB3FT6SxRyDdV4zi3fnx79x4cEIzU0MKbLRQTQqIoDc5CUT\r\n6vpJctRT/c3hcNYCvLT4vHJmfVECpH5vtaeKiCcyD5O/pLi0yAHfAgqXgzF7\r\nIyUrCEUuuWvQS7VkS7cn0REuU7FvP4flew8=\r\n=gLrq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"71091f257ad1e82052ff9076fa7753f6c9cca84a","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.2","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.1.0","@typescript-eslint/parser":"5.20.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.20.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.2.0-71091f2_1650626105824_0.07075199282752176","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.2.0":{"name":"@team-plain/react-chat-ui","version":"4.2.0","license":"MIT","_id":"@team-plain/react-chat-ui@4.2.0","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"b37fdc79c2a44fd943962a487b77423798fd8530","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.2.0.tgz","fileCount":64,"integrity":"sha512-PdcQC2P7w6SlhYl2YII/oVwN3iclxnOOgZkBjb5RKa8Hb0Z0hvGkgs6N3EUOB3p64UlWwl/ProQvK3gMDCV7zA==","signatures":[{"sig":"MEQCIAZuZc0UU4KstlrTtQ0Z00lEqy5yPFq1Pr7g7xEphFMnAiBaUP+73kBcLmVQU1CMsM4c9LJxaIIgai/evuMKMl0hNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5149536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYo57ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/yA//VlBXfE5wfuGlZTSYEIbrgZAJHxE/iX9fAuqvXe255Ey3Ue0V\r\ncs604ymOMoi2KFee4CE+8KWsP+WvNvGq/4Ny5WJkbw2mD+c/kYsyqRV8OcPO\r\ncdoYHRJkurm3rDcSvb3wz4u2xJVayDQlomEH5bExJtFq4bhuLRKHqbDz9C4F\r\nHd1YhiVHAUFDiqMLFdOo2pTPoZbSmAn/XUt6P+7/v3/CI8zp+JBfyT/z6rpk\r\nBWHUxF8RZAuMsoyY7NAnpAPI1yN6u5c5pQr1XdC2uaWN4aeAT/5fEwR6RWO1\r\nDLytvQ4B27vSd79C+Qr2bVATagvdH2FBViZMl0PCk0ZTr005YApshWHNiewp\r\nPkd2Ns7lM4CVfM8QLu6EusQvsfOSoZmpV6o/Egwy+LUSlOPgYTugIbIAEvzO\r\ni0Mw8tvH1hVxdkUrLTg1VnGpEl/FXDzOhDIIxgpU4E5J9/nWRcDi/3rcI/YI\r\ngZtb/TuhVvp5z8jZfmpheCpR+O3H1RE7EA797GWOKSKzEyTe0mQRi+YNwWLy\r\nS/eEX2ef4F5iXeGWzAu7LA0aAk0AVFxdZoQMxUuKds49Wn/MgJ1ly16w1Eep\r\n0Ktd2eQxaScN4trcFZwDsNOfVrSy6SCziII6M3ysnZeLYNtMm+I3Fm/Qi+v4\r\nASNpFx8/b4sUTqjknBtzsqczR63+2sL6rQ0=\r\n=VYKi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","gitHead":"71091f257ad1e82052ff9076fa7753f6c9cca84a","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.26.1","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.8","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.3.0","graphql-ws":"5.7.0","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27.5.1","tslib":"2.3.1","eslint":"8.13.0","rollup":"2.70.2","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"27.5.1","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.3","@types/jest":"27.4.1","@babel/parser":"7.17.9","pretty-format":"27.5.1","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"21.1.0","@typescript-eslint/parser":"5.20.0","eslint-plugin-react-hooks":"4.4.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.20.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.2.0_1650626171312_0.5411359216814005","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.2.0-ad16dbd":{"name":"@team-plain/react-chat-ui","version":"4.2.0-ad16dbd","license":"MIT","_id":"@team-plain/react-chat-ui@4.2.0-ad16dbd","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"eea4d1bae8f5820c98b3149c1d1c6b4d42715a94","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.2.0-ad16dbd.tgz","fileCount":64,"integrity":"sha512-K3oK5cJGnj9gMTQNK6Xh7AX8kMsJ508LkMgjEFu0+8li1Pq2DHz98Ky+l5PrQsjYw883sK3uSKba/MnJRIT0fw==","signatures":[{"sig":"MEUCIBGghpoguSLNVzOPd9JmfI5Kr3yUaUrmI9o8DreU5jMpAiEAmIZzG9sbucHSA4KlgR4NhvzjyOnyQwkDkzN99cl99BA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5209259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidPHBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn0xAAgzrVMdTy0eloeynmOIWZZ2EquZV8FAFfX7lL3HU791Qe9POD\r\nCMT5IuqCC3WQ0FzDbRj2n7dYk7IdkJipQPmD3zznHz63o3/QtQ9EZRad2mwi\r\nAsZbuj+nGvGpvi9iW7nD8xKxZNShnedumG/0lzdrZ6Tb9zln71rPG9Q9mbvl\r\nPuFsg59S+1Cl6SKpKgFQLkDccMBmsvI6yoA4fnFkbUP1WgL3pvrofwssUXp0\r\nMU7LF3RIeHhTH1VNhcm26RImOvfd9ou2b3wGeC0gUqsuDp/SZD/zh5y1dLU7\r\nu1La3PShCPxeLSjTYORfw1xxE7rGltOHRlC1vAmcr2FvRUqtqNEUDnTjZmEY\r\nZVk4l2BdIewecTvX/L+Lm/u7hcE4VjVPPo1SQ7CR6Wd9tqKoddjKAf9xFGgP\r\nW+pSoCJCrOWff3sprBmvaypBAqsApHNFBOp5Oxt2lnU4UusYQlbSGfMpOWGM\r\n9sdhGIOWsz8WG1zNnsfwyzukABi18LbvUqU5vt3b60CxV148bM2GGxyLbkia\r\noiwqNIOFUzrL0oyACj8i3HKxz6U1lhlI322CSAqa9cCJDuO8iKKN6lXsAwdb\r\n6YbyxZMCmJ3RWn0qmeZFBDo3+RT6/9IwH6R/+htj3sre/+eNNQNMvfh9zbZw\r\nxYD5WbFkQCTcuat1WjSArY1RwE+Nwtrv4Vk=\r\n=YvBy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"ad16dbd84f552935dc89ca1cd023cd69e2384a73","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.3"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27","tslib":"2.4.0","eslint":"8.14.0","rollup":"2.71.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.4","@types/jest":"27.4.1","@babel/parser":"7.17.10","pretty-format":"28.0.2","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"22.0.0","@typescript-eslint/parser":"5.21.0","eslint-plugin-react-hooks":"4.5.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.21.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.2.0-ad16dbd_1651831232943_0.4563792490185221","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.2.1-e9d156a":{"name":"@team-plain/react-chat-ui","version":"4.2.1-e9d156a","license":"MIT","_id":"@team-plain/react-chat-ui@4.2.1-e9d156a","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"4ab4900355c8d22e9f4c6c25f2d84eb173f74a34","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.2.1-e9d156a.tgz","fileCount":64,"integrity":"sha512-qHs1No5ZwSIH4AJ93/xQ5+sXnxIK20L3KS1hZrZPdb/DekyM16VQTEDP/rig27mWEOstfmnonayLatT3kCH4lg==","signatures":[{"sig":"MEUCIQDQYfDp2XaYtKw2h11m5jr0WqazL3F9rA2x0RVZPX0zJAIgPipemYn3JA+Cps451/OgnonoXks6lrz1uURIHcD9b3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5211213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifk/VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+Kw//QEG3Wdd7E9Hk+gQRueBOwt7IZ8urmGAJXzrQr02FEEhNd6Jq\r\n/8Vp7rQj4UlWcGvIpsOjsdreo+MwA8zIyNgmP6iJX2+wPgSU4JujlcbNWTKV\r\nEGS5jeiba1Df4zRX9caPD3iSinMmd/eAEvEJsUBo0r42O/CdkvUWujl84Ykp\r\nHMxdrL6CqSJlNRfmgX8XWIZ9/Ofva7B9rE9kzfW+9UNgc1blqnuxjs09Crqc\r\nRsWQC+DIzpTErdCUQZyWLKrDmxEy5NcarSV2uR9YSbszNZqLMkaZndjwWjoV\r\n3V6hdizHO4y1LI6aKf4/V+/G2UvGUMYJ6+FnqTFSqIpbtY8O6eVyyl46VvWp\r\nD+kPlnq9aYva31cF9xABHJW2PeAFhaddmRtvfAot9NXXzbuNO+7GPHkJuQRx\r\nLksgRlU+49aLbRnESdLmPWNADUQV0XdJIGcZxiFCiX7ahC2vBW9dA4/h74vI\r\npwJECvQg5WCy4K269fYD2dx1wKSj3oo5hcc5ue1DAu/hm28W+lycQqiZZ+XI\r\n78Wz2K47Yjdwsp6Xbf1nSfrWmDvVg7iNe4WUgGfUpsdYvrfcf74PPusKhG70\r\n82R6pZYeiPrpZAttX8FwogdkVoPqQhDRnn5M9c/Q1GRApXEFwXt/QVAlXnOd\r\nkG8HLZ6JYcNdvg08dDeQQeStrtxzOKxAnWY=\r\n=uF99\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"e9d156afab95168f632d1c4e3df1cc20cd153dbc","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.3"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27","tslib":"2.4.0","eslint":"8.14.0","rollup":"2.71.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.4","@types/jest":"27.4.1","@babel/parser":"7.17.10","pretty-format":"28.0.2","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"22.0.0","@typescript-eslint/parser":"5.21.0","eslint-plugin-react-hooks":"4.5.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.21.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.2.1-e9d156a_1652445140820_0.303611749746308","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.2.1":{"name":"@team-plain/react-chat-ui","version":"4.2.1","license":"MIT","_id":"@team-plain/react-chat-ui@4.2.1","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"a059b9dade70f9070809d7e07f9768283ad290db","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.2.1.tgz","fileCount":64,"integrity":"sha512-j+bkGl0nGD955s0NChv/uOsw32sZ/i6bCtJe2WYHN1Ur7TQqgnOSu6lbcW+fPrCfI0k/GeV7TRAdYeI7QugLJw==","signatures":[{"sig":"MEYCIQC0csvH2RWbU7BLodSHMooT40lt5vzh9afFTExl/LlfLgIhAMs929FLEJNXRszRPpWHFWZUFu/SdyBApYl7XDAoSzun","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5211205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiflAGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCcw/8CGZotzNZkd7imU1DsLE/KZhHJ1BVE/P9PtDtD8+c8TBN1b/h\r\nAYtvhKAJzMQORkPf7C7ZdnKB305LgADCTqZ70X58kTuVTeEgO8V9IBEMLXda\r\n0g6IGJYyhNRtjbZhqGDc4M4Nyr019NiYD5r91/lzMwesNEu3Ong8Bhh3qEZ4\r\n/NPu5jIENTlwPUO1uj0UpWBBwM8d2y3p8HxocTKZV2qKZIGFCi8nAgys1APA\r\nyCE+GD1I8jh9cU9RpVH+VH+D+uQa2fmiFfZq5lKSV3+FlkFn8oqp5CfQUwrd\r\n3QMglAIALPZFs8YSbDSK9Jh5UNzPZO5POJ6bggEOdARP5SAXXTzB1F58P795\r\ngJ5b2ViFwNHe/MDkqmgAvt/4fBeRnvKMrklUVuaOFyJ4CvbPm7gSB8DkelCn\r\n6X4B5qrxcy2qWdXj15pPiv3hkYflLYRHZ2GI6DEaSCpr5qJ+CQVl08y0WSjx\r\nFGSmzYvgdXf14PanLjhWpCEAP4eKTDNBuSLVUrnbhC92Nw5NKwiiH+B1wSH8\r\nLSbvU510s2pHSNlIM54GHuHXF75X5Qu21g/rajIo1WjmuRrYAfp59F2rTr6N\r\nkV1QD6Lu23tJWOXzJ/j+nPZw/vv+f0UeZe481zJHGv5y4W3WPSlc5RWL6Zh7\r\nDmdE1T3p0SlbES2jnWteO1MjJUZ6U4zr3Ys=\r\n=YOYG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","gitHead":"e9d156afab95168f632d1c4e3df1cc20cd153dbc","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.3"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","eslint":"8.14.0","rollup":"2.71.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.4","@types/jest":"27.4.1","@babel/parser":"7.17.10","pretty-format":"28.0.2","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"22.0.0","@typescript-eslint/parser":"5.21.0","eslint-plugin-react-hooks":"4.5.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.21.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.2.1_1652445189848_0.28844393557649917","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.2.1-bb87d95":{"name":"@team-plain/react-chat-ui","version":"4.2.1-bb87d95","license":"MIT","_id":"@team-plain/react-chat-ui@4.2.1-bb87d95","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"6dd67e6badb5996734a3a1693fe55129299f204e","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.2.1-bb87d95.tgz","fileCount":64,"integrity":"sha512-0auBbNUgTRYtLAcOx3Mzn8cB9S4Aw0KuzKK464ZhecU6jQNAyDAG5LKtN4u65sV5crb4H/g3MqP6B4Tofs9P+Q==","signatures":[{"sig":"MEQCIEYWcuYCcYTx96UHuSNODNe0Cmoel9G1GkMSgNwEmMnWAiAomYWxc6Rt50+qMwQLuHJDOxf2lyp6xuqj1v7jBkddKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5229112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiowFEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpavQ/+LziPccMc6KSvlSUzbdKTjk4ASBv79FxMgm9zVq7E1bdHpaML\r\nDC5kvXMLMVB6aMkjBTr2cwKZGAE3WRlrjp/ck5sEAZ8HHDa5wo/zcG1o0634\r\nmXItEJyCUqXVxEjC5yVvHvz0tA7WtZgRW+qY51dMcZiKWHB66hB9XTO2wib1\r\naqQlEhxfNOKZV2f5n7Ou7NacHFZEGkG5XqSq4tqgmalPYc6fnJ42bo6rVOlu\r\nkqIwlfLaYc1EZ6n5zaqs73yOK5XSHPxe1pINApKf3PCb00B1JBeF2zbU4EvB\r\nQCe2RlZZCN5w047AwVaELSMUUGJsOWH8+ywg88d6YVKL6XUVNmwA2yCCbo02\r\nQuqxSgME0335NnXzPW8P1hSTqTJJdvlkVYn97QFiEOslTDy4Zmh8O0VgTn16\r\nubwdMxHCatmxC7iiNxQ7r1pz7E8RenTvWcJquE688U003d0pXWs+7CMIkXjm\r\n3MLmPIDhekJ7G0VyKUJoEE8XAzzo3Oy91St4bcdkQWxovC/pY2a6SFyPd4XJ\r\nzhXqQr/u7yjMytPe03hemImGyYDNlbvuT9Cj7YB3li4e6hdEfMJK30rgF25r\r\nfBYUEYmT4pAR+oPPDENxCuOw2hy5eI0JB2dHrQ4te0CpfBcrogwNl3Dk3mRx\r\nof3f7QbHtUaOmXUPnRBZ//7WIPgmpwNzd8I=\r\n=51zQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"bb87d950d0d95d8c1662368c78da80795f28e711","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.3"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27","tslib":"2.4.0","eslint":"8.14.0","rollup":"2.71.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.4","@types/jest":"27.4.1","@babel/parser":"7.17.10","pretty-format":"28.0.2","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"22.0.0","@typescript-eslint/parser":"5.21.0","eslint-plugin-react-hooks":"4.5.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.21.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.2.1-bb87d95_1654849860219_0.42275127460531237","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.2.2-2963f14":{"name":"@team-plain/react-chat-ui","version":"4.2.2-2963f14","license":"MIT","_id":"@team-plain/react-chat-ui@4.2.2-2963f14","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"e443a501248b9711a9ceb955d149d073ce8abee5","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.2.2-2963f14.tgz","fileCount":64,"integrity":"sha512-ZaoEAoJlSUGA8oua4dXmjmrn1dc8ol6HEMkVYHDFi1XfOHneeGjRgpBNmAKD15OptD+DTpEA8JqWJaTUJdq2+A==","signatures":[{"sig":"MEYCIQCnLCDbTDpOQY96Oh9b0CDDdK1Gc+h3AJ7Lnm7Zg3es6QIhAK4ZBGuguBi0rhN5lTrUEzZeB1bKOf6xcIe4rSmCLwLB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5229255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioxwrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCwQ/+PqkpUAffbgwLJOc/Yc1ek195UUI/gjrO+Z9CbEhzWgm4SZIJ\r\nhOGXxHPXyGIUsy3bqxBgwch1uTA5lciIbvUFlx1KjlLjdZkLSnzsXm6emI1j\r\n7nomAtW1VUEeIAvwAN8bkY4PDfeNkkWyB+igMewafFA7cXUNDTjKPFM2Z+rO\r\nCawa77mILNIpNBtME5oTKqdpfKsZ4YOFaf3O0N4GUgaRTO6K7SwJZYDMGD4y\r\n6fwz+weYcL515oXVukiD59Dptkf38CZ9tpgH658N3Bgj7P7HoyOPT2SOY9zX\r\nd/HpuSTWB/2NlHIHcjfZ6QISr+ktlfy5P4DWVDv5IDba0r1YbvqpAnT3nfji\r\nfTSa93IXNrrQDkXCN2OfbMEHgcN0K+MbzUaQGXMfmep57FJ9GPDcbIMr8V+V\r\nP8ZtKs1kXTosuGaxGeQsoePF6VADMVoEtKj/hBEGGXDm6+34DKxKUM5NW9z0\r\nG42Ti0GW2kAYhX/gfnNMSGrS5aZzK7L9qBNhDKL06Az1SXvNx5yvXq0t214J\r\n6wJZXa4wQ0SO66t+udZpOsF7uELeXk0M5MvpDY+G/02r8M63pZUKyAIVrdGk\r\nt2uCkLSLL86T7aUc5PPHTldJFYTRC6uUuS1stUalqmhJzqUJvTDWmcPvjBRC\r\nmajg3WYqdh3p56wRH6Z2mj7LI9sATu6G3Ng=\r\n=Bt8y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"2963f147c5570d3ea7a8afc13abd17751b4762cb","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.3"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27","tslib":"2.4.0","eslint":"8.14.0","rollup":"2.71.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.4","@types/jest":"27.4.1","@babel/parser":"7.17.10","pretty-format":"28.0.2","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"22.0.0","@typescript-eslint/parser":"5.21.0","eslint-plugin-react-hooks":"4.5.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.21.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.2.2-2963f14_1654856747283_0.1988599696460973","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.2.2":{"name":"@team-plain/react-chat-ui","version":"4.2.2","license":"MIT","_id":"@team-plain/react-chat-ui@4.2.2","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"a4dbb1f31ff51afbcb6e0effbc9d1017976dc449","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.2.2.tgz","fileCount":64,"integrity":"sha512-h8IpfgzXKhw3YOFyad2C9t/SQ33+5zdtfoXG/D+DlPDUxgA9jJK5xfaM7hW8Rcm2nc37Lfr2MbG5a4oU5aet3g==","signatures":[{"sig":"MEYCIQCQW5m6UjI6KTo6pH/lYLrYQXQwpLm3cCK2M//8+CGkXQIhAM4rvMWV5PEHrwfHyekAAcpiuEA/ehY9vmsNRm9z8w6/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5229247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioxxdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrT8g/+OKMW0D9w0Xq07lA/zhhqzUW138aF/jLtfmorngx4jLdH1tt9\r\nAYJPfQfvbIYIB+rdhbKO+TtNMV2G+nOkkBrF5WjMCRusjoFDUa6S/m4DiKvR\r\nV3kZ2WY+qS6P/NPBAjmXfw7WSj50z1HiEvFe6zwbc4mbwFvOUY0rxuZ7e1CG\r\neBAxEKxAPYHfWMqemo4H3CLfd2M5iFiXEDcHsm2dWu7yjUBGqlQc2Ydjm6j6\r\n1DCvy4Ehmw6xkiaAXC6fbh9Vcl7QbMV3OdcmkBH3MDcDFGb7Ks65QTuqheDP\r\nVFrR/eA5xu1cYS/IOhDFhtr9/vZUxYkzvQwoZJCWXGWR5ebi9ajLUM7+wSF2\r\nXqh3GL/fC60BtPzon51IQF3/C+G18yxfA0aHxdQ08MdctSIna50+BguVqHLB\r\nIELRNkdqYZ/J7Ph9spQKDtdiNPBgsnCFV6j8x0SbSQWZPXrOEA80ItWibN6k\r\nkF4p4x4K59vA6ZyjBlCdTqVJFHZhr6yIWAPbhFO7JL7DonOq5EB41QYnbWm7\r\nM0B8aa7Bxn/fvrVnP3032EN6FNQ26wYxEkAy5etJk4Y1DwosqJ7wwYxv0qFF\r\nghq4adW3WnuFRVmN3dhXqgGXpRYH0XoNtm8JilzLaCBt9DKE2vmgAepfKU5G\r\neKSiauAkkAI0rWw63GDkyMxKZCcauAhjEI8=\r\n=DoC1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","gitHead":"2963f147c5570d3ea7a8afc13abd17751b4762cb","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.3"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","eslint":"8.14.0","rollup":"2.71.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.4","@types/jest":"27.4.1","@babel/parser":"7.17.10","pretty-format":"28.0.2","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"22.0.0","@typescript-eslint/parser":"5.21.0","eslint-plugin-react-hooks":"4.5.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.21.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.2.2_1654856797320_0.18215301874066547","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.2.3-2ed5272":{"name":"@team-plain/react-chat-ui","version":"4.2.3-2ed5272","license":"MIT","_id":"@team-plain/react-chat-ui@4.2.3-2ed5272","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"0771b6c7b235d7672c28fbc35c47edce0071c181","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.2.3-2ed5272.tgz","fileCount":64,"integrity":"sha512-1ai+OrlaNAA2a5Zh5aIS2AzrqK2jJ9kemt9fjzQSI8LLclSTjp2Wcwnd5oWYTPXU5RmM1+4xifiJTerVmVg/5A==","signatures":[{"sig":"MEUCIQCzwigNtC7gbemyyJuKYJF5fGBcSqkunZI6wGWU4WpSrQIgCqwVtYf6Kqx/Tk8j0OijhFbHLTwIp/szR+XmhKqETRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5229422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17fqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiWg//ZkWYapXE27C1SIKXfZidsriFBm6hBNgy/MQX5a023DoTSvXt\r\nO4nWAiy+sxdLA2Tc35NfbDjeojjfUKweiTG+mNBKVIx17T72QjDXfb6y7CHb\r\n79iGPlI20jFXGu2YRkrLTG0EDnkcxM2SkQmNX/8nhL0YD6hg8FJNXAD9Lt2i\r\n12sQYZwPbiqSunvBWIO9DqpN2dFz2A1bntNgQ3k4dM/eOTLId3yv3bhkqYux\r\naGePiSGW/qkGsQIslONAn0aC9z+S5rtJWNVCwpgYNb2nEeh3t+oZCE9Kd9h2\r\nGzN44GYZdzNWHKHiYxxtSCM6J/GTJd4zPPu7wUlV/QbGeUoUHRgPr6ah/e3y\r\nJFCLzunixca1mThiJWz+l1P8nRgyVZFB71cVirYN+hEPynmWzE2qk/AeKbTW\r\nnlUwJeMYS+Q5Hv7WlF3YEydGvqdvxY6m2NeQubwbgC9JqtF5q4cD9UohqUPB\r\nrfwOjngakcsUStGJTGBZbqnpgDM5BgFG25Emf1tIFYNBtzplro4HHoNENOqv\r\nIYXzyoUOy5grHGy1OU91GLTO7AKD6w0bk9bmGhtHPCOahbaIN4jVEFuwm/Ex\r\nz1ZEAgvLB7g2HS9BMyKK6tgMOjtboQdQm1jJJmU7ccDYduxToTEXmYtoHHAP\r\nwLotQUXEZ+FqPk6fTG3EIVQIjXwxuD0e/eg=\r\n=t8j0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","readme":"# Plain - React Chat UI\n\nThis guide will take you through the process of adding the Plain chat widget to your website using our React Chat UI package.\n\nThis guide assumes that:\n\n- Your website is built in React.\n- You’re part of the early access programme for Plain.\n- You have up to three types of people contacting you:\n - Visitors who are simply browsing your site/app and do not have an account with you\n - Logged out customers, who have an account with you, but are not logged in at the point of contacting you\n - Logged in customers who have an account with you and are logged in at the point of contacting you\n\nNote: To increase security, reduce spam, ensure you can follow up with people and help you avoid duplicate threads, Plain asks visitors and logged out customers to enter their email address and verify it with a verification code before chatting to you.\n\n**The first part** of the guide covers a simple setup that will provide support for visitors and logged out customers.\n\n**The second part** of the guide covers an advanced setup that lets you provide support for logged in customers.\n\nIf you run into any issues, let us know at help@plain.com. During GMT business hours you can expect a reply within the hour.\n
\n\n## Simple setup: Visitors and logged out customers\n \n
\n\n### **Step 1: Create a Workspace App**\n\nFirst, let’s create a workspace app in Plain. Creating a workspace app will give you an `appKey` which is needed when setting up the React Chat UI.\n\n
\n\nTo create a workspace app, log in into the Plain App at [https://app.plain.com](https://app.plain.com/).\n\nSelect your workspace, then navigate to **Apps** from the top left menu. There, you’ll see a button called **New App**. You’ll be prompted to give it a name for easy reference later.\n\nOnce done, you should see something like this:\n\n\n\nFor the next step, you’ll need your `appKey` you can see at the top of the page.\n\n\n\n### Step 2: Set up the Plain React Chat UI:\n\nInstall this package:\n\n`npm install @team-plain/react-chat-ui` \n\nThis package exports two components:\n\n- `PlainProvider` which provides context for the Chat component and `usePlain` hook.\n- `Chat` which renders the Plain chat.\n\nNow, import `PlainProvider` and wrap your app with the provider. \n\nYou can now use the `Chat` component wherever you want to show the Plain chat widget.\n\nA basic example would look like this:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nfunction App () {\n return (\n
Your app
\n\n\n---\n\n
\n\n## Advanced setup: Logged in customers\n\n
\n\nThis assumes you’ve set up support for visitors and logged out customers, and have a working chat implementation for logged out customers.\n\n
\n\n### **Step 1: Create a private/public key pair**\n\nFor greater security, Plain uses an RSA key pair to verify that all customer details you provide are genuine. You should never share this key with Plain or anyone else, and we will never ask for it.\n\nIf you are using macOS, you can generate a private/public key by running this script:\n\n```bash\nbash <(curl -fsSL https://raw.githubusercontent.com/team-plain/generate-rsa-key-script/main/generate_rsa_key_pairs.sh)\n```\n\nFind more details here: https://github.com/team-plain/generate-rsa-key-script\n\nIf you use Linux or Windows, please let us know and we can help work out equivalent commands/instructions.\n\nOnce you’ve followed all the instructions from the script, you will have generated a private/public key pair compatible with Plain. \n\n
\n\n### **Step 2: Add public key to Plain**\n\nNavigate to the app you previously created under Settings on [app.plain.com](https://app.plain.com).\n\nClick on **New public key** and paste the entire contents of `plain.key.pub` we generated above (including `---BEGINS..` )\n\nOnce you are done it, you should see something like this:\n\n
\n\n\n\n### Step 3: Set up the Plain React Chat UI:\n\nNow, let’s set up the React Chat UI with logged in customers.\n\nBesides the prop `appKey`, the `PlainProvider` also takes a prop called `customer`.\n\nThe `customer` prop can be used to specify the current customer, and show them the correct conversations with you.\n\nTo specify the logged in customer you have to provide the following customer prop to the `PlainProvider`:\n\n```tsx\nimport React from 'react';\nimport { PlainProvider, Chat } from '@team-plain/react-chat-ui';\n\nconst customer = {\n\ttype: 'logged-in',\n\tgetCustomerJwt: () => {\n // more on this below! keep reading.\n }\n}\n\nfunction App () {\n return (\n
Your app
\n\tYour app
\n\t\n\n---\n\n
\n\n# Plain Provider Props\n\n
\n\n### appKey\n\n*Type: string, required*\n\nThis is used to specify which workspace app you want to use for your integration. You can find the `appKey` on the workspace app page in your settings in [app.plain.com](https://app.plain.com)\n\n
\n\n### customer\n\n*Type: Union, optional*\n\nThis is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### theme\n\n*Type: Object, optional*\n\nGuide coming soon! If you are interested in theming the React Chat UI to match your app please get in touch at help@plain.com and we can help you.\n
\n\n# Hooks\n\n
\n\n## usePlain()\n\nThis hook can be used anywhere within the PlainProvider. It returns:\n\n- `logout` : A function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount` : A number which is the current # of unread messages a customer has. You can use this to render custom badges and such.","gitHead":"2ed527212f810f572909acce6f6fc2c32536189e","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.3"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"jest":"27","tslib":"2.4.0","eslint":"8.14.0","rollup":"2.71.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.4","@types/jest":"27.4.1","@babel/parser":"7.17.10","pretty-format":"28.0.2","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"22.0.0","@typescript-eslint/parser":"5.21.0","eslint-plugin-react-hooks":"4.5.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.21.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.2.3-2ed5272_1658304489102_0.7055791864401388","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.2.3":{"name":"@team-plain/react-chat-ui","version":"4.2.3","license":"MIT","_id":"@team-plain/react-chat-ui@4.2.3","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"7af1aa1466daaf2c75dff6e31976b989ae98d25c","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.2.3.tgz","fileCount":64,"integrity":"sha512-fu9rDouJbpBYjn8nv3zqvgYh/Ggy3P2jAz5Toy6Y1i3E0/TVAKboAiFTVkLRAE2KGC90Xi0aSr2eGpw056iBVA==","signatures":[{"sig":"MEQCIEvK/Ib6iZdFJFRftWJMCC0zQIS2k17GGrZFkNW1gPjpAiBAARPaG14PCXemIHp08lH/pSLOYwWcynd2EIUm2dq8iA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5229414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17gdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriCRAAoVU5JSOg1NqiehY4WklH4nNZpLJRDMJWCokOC3I/EWm7XB7k\r\nPQXz84axUEEDgSpwgV/Q4VCiUr9A3MtcSddqoP94tzJaZ2LIMB+4OwcUVl4o\r\ncrpsmvf4xeF4LLhcwQdYP06i00dgHji1uqe+8yZrShoD/EaKGJkW3RdvEe4m\r\n6fnASIVvMV0gtGy4j37eF3HJFRjGxaamrJxfxifEgCnkZJzhUWXw1hs8+jH4\r\n6bVS54HxnReS+olU8J67epP5VGqWnluJnAcAb98oaIpUgoiexDA8z/CD387M\r\n8jT+0I4Rd5V90g1i4A+fMhHGonjsEOHs+b0dAFrroEGJcnMTSrNz3zQ8su+9\r\nKt9n7g0Gb/1Qw6yZBuew3GQHYGY7VJNsjcBzInzg1aGbo74Jq9eFHO0/Rbd/\r\n4D8KrnOrTcy95x8RtaVgaZiCEt/KhvK1isV6c56mL5xCkClV28SVd21wG/y7\r\n2MVuyK4KBwLCtepxy0phVcgJ4xi0ujX7JPlbKpoQiWbrGXbtqyC9QZX1E3JI\r\nh1PjU3jydWewWNHJuFgV4EaXcyRs/o6fePu8Yv4TuRlWjHIve6n0C3fPNWGh\r\n5KFwbURlC9TRxLp3TglFi04Mfq4TJjrPh4HClyOiCrv2Kb8fi2C4Ou6K4v5Z\r\n1dUoFFwM6BqdJ9SZ25nWncJ4ifjrJB1M2mM=\r\n=wcEn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","module":"dist/index.es.js","gitHead":"2ed527212f810f572909acce6f6fc2c32536189e","scripts":{"lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","lint:ci":"eslint . -c .eslintrc.ci.js --ext .tsx --ext .ts","lint:fix":"npm run lint:ci -- --fix","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"6.14.15","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"14.17.6","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","@types/node":"16.10.3","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@types/luxon":"2.3.1","@types/react":"17.0.43","@types/lodash":"4.14.182","@reduxjs/toolkit":"1.8.1","@types/react-dom":"18.0.3"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","eslint":"8.14.0","rollup":"2.71.1","ts-jest":"27.1.4","prettier":"2.6.2","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.4","@types/jest":"27.4.1","@babel/parser":"7.17.10","pretty-format":"28.0.2","eslint-plugin-react":"7.29.4","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-plugin-import":"2.26.0","eslint-plugin-unicorn":"42.0.0","eslint-config-prettier":"8.5.0","eslint-plugin-prettier":"4.0.0","@rollup/plugin-commonjs":"22.0.0","@typescript-eslint/parser":"5.21.0","eslint-plugin-react-hooks":"4.5.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","eslint-plugin-unused-imports":"2.0.0","@typescript-eslint/eslint-plugin":"5.21.0","eslint-plugin-simple-import-sort":"7.0.0","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.2.3_1658304541004_0.7394026921971639","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"4.2.4":{"name":"@team-plain/react-chat-ui","version":"4.2.4","license":"MIT","_id":"@team-plain/react-chat-ui@4.2.4","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"3fe1f4f2659f91b1e3f0f9d0716e1b264a6e4ce4","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-4.2.4.tgz","fileCount":120,"integrity":"sha512-256IqzgK0LVHbPGwMcLxJgT/9q90QwMSDw7d9c6FNhWnt8UpinkcwtcxrUmqbnMPgSvdQMOhO/9IC/YyQbuSbA==","signatures":[{"sig":"MEUCIQD2OL39HFEPovSMObCJdJVWkZwR3u1+IXgTSbluVKAT/wIge7a68Y/44rIZJiMkFWYUQz6tIU2n0xwrNuUaAa4Whs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5275640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi3qjeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopqA//XzTzm+hyNZjt76cVpHQb8zjUJgo/VSYOjm0hWOTSvuFbOv31\r\nIEleizo8EnUpfNr9PNgVDOzCEQMo4A9IvpR1sSHzc98Onntz0mzuKcIBIn3P\r\n4qBcfwhjroz1V99dil8Mr+KX/EDhXPMa8ZTbbzawlmr470Vbmj5AD/PCVoHh\r\n6nNY4iA6Q4MdhqRNvhFXceAdLf146XhYhThyGIVEcITh8JL9fPfUAWKMFUzJ\r\nhfiuh7+jBcXX//jPcUQ+a5IqkAlrSKwwR8ovrBxt/m0aL+tXoXNJ15NIm7Vl\r\nCnmXd8JUp14Qg3tOgyHCH3WmspMBg0Tt9XypVna5CCPvjrSgEp3ayW0s8TSd\r\nO9dDs4cHiuezSqUzJ3OaOG/klmtkWRmKPjYOcz4UfzqqhOPcZbCAWgkrgJ/o\r\nZFAtN2/zd1Rc8d+agsi6YolXB5WjawdkIBgHslqIbtGE9YAL/r+crLMJXWc7\r\nRVvGbxwpl4m+bMkSmEYuMC4J+rlUwwJV4hfoobqHaeXlSqyq4OosGkj9UG9j\r\nc48FiPhJt1HsvkcrGxsDk/7lJ2OnJQ5tWmHqwrjunThjp9EvCgaPQDtX4exf\r\nGJ9RO39268hjNu7hcWPID9rrLefD0bFZXkflUsONFtMaVT7cRnTg8tS2dI/9\r\nrxf4jgdrEMyCEhBect+Jz0nhhbLOf2+UMFg=\r\n=ECXv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-4.2.4.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/4352cce3d6063910d9d2ecf967ef8481/team-plain-react-chat-ui-4.2.4.tgz","_integrity":"sha512-256IqzgK0LVHbPGwMcLxJgT/9q90QwMSDw7d9c6FNhWnt8UpinkcwtcxrUmqbnMPgSvdQMOhO/9IC/YyQbuSbA==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.11.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.16.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.6.4","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_4.2.4_1658759389872_0.5942678976671092","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"5.0.0":{"name":"@team-plain/react-chat-ui","version":"5.0.0","license":"MIT","_id":"@team-plain/react-chat-ui@5.0.0","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"ceb0420eb9678c9395259572fcb97660bbf63212","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-5.0.0.tgz","fileCount":136,"integrity":"sha512-qrwuYVpEiD0+7h9hybGkeREjpV4BaYCmeo34GI//3UCIzZDoqAGvxIc2Dgxu38HOWhHtv1cPck2p+M02NFQrtw==","signatures":[{"sig":"MEUCIHvgmJPHZyJ4AkGFSvIafvVkPOR//nPVJuPTaop3EH7nAiEAxx2SpIeJgw3kWgn0O6o5odzwEk9olHh8+ukjQXhk9Jc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6316571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6RcqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLTQ//S9i2hU26LWR2nFma3+lLoslTMnsIgKPgtXY07suTP19vvCOQ\r\npILEaseBL8ypb0Ao4/fT3k8MAzEzIqmmvjjPUu2Wuq+GXtjRCHnGAVO8RA5Q\r\nvUBR7AgqPOKxh8gAJFlbd2ZA/2teNw/QTTFPLJg/Y90wR/LCOe3LrlLIcCHz\r\nsC0befvEb/bKXQTb33F4YcnK7voSp9tAoWIVmu0HvW2bxPZqfXSv2TzmqEEb\r\n1uqpy0IaQM3LevlsMYw+8p4YdebPLwxHsuLvEpzJpY1BawnzeHnd4fou2YFU\r\ntWXoy520Bxa86ogSooSNJo63Fw4KLjJrSsg7Jtcw9aa3y3cS7IcEAllIH1t2\r\nQKXHi1l+YMFeDCkXDHNG8dqOcTFuohKB7ungTBDuJBTCQbnljN7Cy1Obt8+i\r\noLSRuLGOKi47WTxX9peKsfBJS+187vpOgjdfxfPGxU35unoZLqtM6uG16ed9\r\nhlkuufUrqw6iTqBdLeBr67Mi+eafyXcg5IJNZH5a2roXoAg/pjWbp3l0smlV\r\nlWKB561XmzwB/1Fm3EJn09BBQGWKu2MRJlpw6BQOORlhRPSJXM4jiGbAwsxI\r\nIJMa5xLW6DUsv/QgHaDdAopgA3weJkHF1T5MuIxNvAVu5Fapjnf2ObNMxARA\r\nQfyZsUWwiXWoZCt6yNwAG6RzdO8+fcRsByw=\r\n=C8iQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-5.0.0.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/3615a0713fec5b5d9b735f4dc6e27a2f/team-plain-react-chat-ui-5.0.0.tgz","_integrity":"sha512-qrwuYVpEiD0+7h9hybGkeREjpV4BaYCmeo34GI//3UCIzZDoqAGvxIc2Dgxu38HOWhHtv1cPck2p+M02NFQrtw==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.11.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.16.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_5.0.0_1659442985736_0.11209962525352202","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"5.0.1":{"name":"@team-plain/react-chat-ui","version":"5.0.1","license":"MIT","_id":"@team-plain/react-chat-ui@5.0.1","maintainers":[{"name":"team-plain-bot","email":"npm-admin@plain.com"},{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"198730ba89fb7b2df058c8941b5e8ed98f1cb0e8","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-5.0.1.tgz","fileCount":150,"integrity":"sha512-u2PW+igfKwNrAJ7ta78QTBjgyARoFS/Zw0I+vbc14qd3eS6AHuYSCYkTzuRhAMSkINxpkVceVXF6lRxlA39/XA==","signatures":[{"sig":"MEYCIQCGmho1jYLuXroHJTXJxTfddEQuxOPnGy9lAyS8Z8FuJgIhALXcA0U7yz36F/BilX1KCr9JfvcYncJaTO7CXZEmJDew","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6330629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6kyzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPSQ/+JC9YNtXQO4rOoFftkC15H0rjBIPSFZQ4AeqcWRluovBI9csP\r\nv8FDqhAGJSAKOduAxuMOlSGuz7kkb3gCRmR+yflSVR/St4ij+Q54LQgbCita\r\n/wmIplHTPb5RQ/4r3AQE1l6xastdIk36BGn3pqxwYj3badtE6VHfTtB0vMZ7\r\nKjGZNRyOlZROoeeIT6GgPHupX2As/3Rtjg1285AZQn2Mkmn8K5ZgMydey+Zl\r\n7hdWiju+ZDUcD6b/E3BhqhcU6YQmONI3cZFNcoUVseLjCd3ORTzZo75ZqQr9\r\n58kKAhgWQrZBiPpyGt30DkCopKe7RawX6VzV95pR+uvaC1yJxBpQjFxgiDSG\r\nIjY0fN9Vr4ahI0PCVvCa/WNmA+DMxSLIJ/SS7tPajYkZ/ncB+VsE1spuxiEm\r\n3QccrOrmUThZ89qb7W0gWSyEQI5hIIpfwQYGXUDy2If/UOAyQXLht5b6BwQ6\r\nVL+BdgWTzceWZsq0iQ/4LFazGakMjkeq7merb8uvN4/yfjtwv9HqJ7XDEJML\r\nb5Dxafbs55pm0sRXCQCrDL6Em7L5VhwcYU/2TlR3FwXhuFmVCTRAw2AjhY+g\r\nJ8AYnQueGLj4BTOL6Hqlwx4YAUwPGop95pJ/rq1uX/IWIVAtivlC1HWkl8uc\r\nFTkEfJzWymq+yvWdyaSzmQQRh+K5j4dB1MY=\r\n=dype\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-5.0.1.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/b63f0cdc75ebdaf42ec36da8b897e045/team-plain-react-chat-ui-5.0.1.tgz","_integrity":"sha512-u2PW+igfKwNrAJ7ta78QTBjgyARoFS/Zw0I+vbc14qd3eS6AHuYSCYkTzuRhAMSkINxpkVceVXF6lRxlA39/XA==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.11.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.16.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_5.0.1_1659522226799_0.18393342127981205","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"5.0.2":{"name":"@team-plain/react-chat-ui","version":"5.0.2","license":"MIT","_id":"@team-plain/react-chat-ui@5.0.2","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"8c528ce9f7edf40e4f96940c2ccbbc3579d3a497","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-5.0.2.tgz","fileCount":150,"integrity":"sha512-7LTPZ26BCJ4bAke6VlpYHkB1YqNgqAhP/cv4R1ZOYdl0/DDsX018OGv/bl5FQ4lZiFECmHrBVjurHncP1dBRXg==","signatures":[{"sig":"MEYCIQDfSG4Mb2G6gsVMGrWIYxl9hxH7yTU+7uGfejhoabI+ZgIhAPs8AzvKUP1bciOJiuESGL5Fdr+6AWbrG1XrsYYS5bLT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6332457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi85u+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1RA//fJ1zkRHNprq1dfSlKq2uBIc60dKut75fkzGAWR1EVgL1OwoH\r\nD2umB5Mzr/NSAAjdqh/nRiaM6sp1/gQEpR8x5eXBu3qTcaYzgjpn50zDQ1r3\r\naMSOvYcTlB88imxFTPhT7zH7vYQceGXyuW2xor+ucEXmnhbQ20JxwYY1aoSf\r\nJoEbspoxnqI/bVLjTbjEnYBJ1MSRKxNY5Kt8vnn+gR7juKHDiUkHbR2QmLh9\r\n15+XxNXQhbJTX43bLgEUJHUFcFgKNWWEZUWupeTx6Fz/WyfYuR7eI5ra/BO0\r\nyWb28LJ7oq+XfK6ZVVlLbvDVCoipcdFuy9sPSMHsQb+IQCSIDereO234sT4p\r\nay0ETPlypjIlZ1N/hV9UDEBx0YNA0q+b1+wVRFKOVmfNZrrg7BBUrs02lZwI\r\ngG2r+ReFHY9vOSiWGvj0UeqPUDm9/aDXhpw3VsWXnAREoDf1EfYPCowY6yRx\r\ni9bTzB1/22fW/8kry0KDowCO2Is5g5dQhqAHAfKNFvVUpKZMTPVp/vN2XvZ/\r\npVreiq5H8U3zI0gfER9y/WX8WTnRFN3RkdypYhaBiqj7vAtsLfZ15q5u2Ogj\r\n7xxVftGViUehjmdFoe9+rgEtgPxPQgK91Ba/iJ/5wnxJ7BT07gHCKQJd77+v\r\nIKIh914FruiKWzZ1hzIhiU2N3SFt0WgNlgM=\r\n=IphL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-5.0.2.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/93577cf41a03c6e08f524d56435c52e3/team-plain-react-chat-ui-5.0.2.tgz","_integrity":"sha512-7LTPZ26BCJ4bAke6VlpYHkB1YqNgqAhP/cv4R1ZOYdl0/DDsX018OGv/bl5FQ4lZiFECmHrBVjurHncP1dBRXg==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.11.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.16.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_5.0.2_1660132285951_0.012253467363221748","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"5.0.3":{"name":"@team-plain/react-chat-ui","version":"5.0.3","license":"MIT","_id":"@team-plain/react-chat-ui@5.0.3","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"fad83ca249b1109f8c5c9179ed0f10d01580a878","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-5.0.3.tgz","fileCount":150,"integrity":"sha512-l0br/gg1lFfUGjmqXLK7+3S3MjrPw8E/T9k1BPaBrXF3CH6evYX998z2bBHd1ZQoI8g+Q1Viz6LeEW1RVjMckQ==","signatures":[{"sig":"MEQCIBkepyZXqdILt+r/FtA3aJqCtFi27JJuJvKIAEvn3g1OAiB9UiQTMOmagkSyvKYHtz590LO4zWgXaCSq+b2e42YkeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6332501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9SD5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmofuw//dwSm3NGzheRf6QgnIQ38xU9GAVv9jN3GS8DA/wUpcq1p87cR\r\nA+gx5dkG/2EsWJKpT7maKw+mbh4kasDycgN0yEY/tK7Y0waxFOycEf0qec02\r\nevtb8LIwn2XX+5UMEOaVqBzfc5Kubh9wL6J0CIjZPsgKNrZK+jRL3vL6EWZf\r\nqUsb00rGOO0kBMUCRnd9LQ+GyE2DAMbQFN/2fKu1ueuYFBrn1JpevU0186/3\r\nPDTsloIYgIUILh1UwA60NcatbiJE7A8SauimWP49nS+ljC7mDj4D+rNkNXku\r\nUsEgQsdh7p4diP5RmvHdfbNR4UzO4G0mGmFIpxKLHkpCVjHTBLyf2hE0itAI\r\nAWYs/amhWlsFYCXYKfl55b+vSTF5r/McsNV5Xj94I4ZcWLJGvaUENWiKYe4Q\r\nr2sIBZMiscmBpyTBJK4Q/uveb/aoW6ucBv5B/iLgCnCh1GR/rPs3uyrDaQVn\r\nf+F8ttey3YfrMzfsnSExiBCW51Vqgv1LurPq+iHlsGZ1fnt1zAISMq9fnJWi\r\nsIFsU3QugM3KGfAfRVgawUXy6TmbLcTUie+COM9nh8ssvgItRi0le9V2HQ0y\r\nELLtxhu3w6qynB7Evt4SXEX168oCnNDyprjdGeA9HzYHoGrRy1b9nQ0Z5DUk\r\nOK5i9hbNg+zdPDJ1SQfg1GMa/np60KAfxO8=\r\n=s3tn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-5.0.3.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/88bbeb96577a8809eac61799c4af3040/team-plain-react-chat-ui-5.0.3.tgz","_integrity":"sha512-l0br/gg1lFfUGjmqXLK7+3S3MjrPw8E/T9k1BPaBrXF3CH6evYX998z2bBHd1ZQoI8g+Q1Viz6LeEW1RVjMckQ==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.11.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.16.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_5.0.3_1660231929348_0.5822434766410038","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"6.0.0":{"name":"@team-plain/react-chat-ui","version":"6.0.0","license":"MIT","_id":"@team-plain/react-chat-ui@6.0.0","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"21db27871ab0d4c192b31773332670068fb3cb62","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-6.0.0.tgz","fileCount":150,"integrity":"sha512-u3FjdUFejh9BdmufWpk5fcwpNfV/KCL5/BObJ+AffpZtbeP/HOpbKiA4OEpel3VFWJ+cCOr1SVQzkYDYUGgbsw==","signatures":[{"sig":"MEYCIQCrUdTFMDza+YAg8kg7mD8tJrK7ph0TJ4HRU2PUMY6onwIhAO4da2g/z5wlv5UovzVun5M9Q0oETJXCIxs/zNMlterE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6331608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+lpuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoU5Q/9ED4cj1keUFeF7aJ3mezvR099MkIojtM/GJLhd+37HTwkH4ON\r\nfO5CZ4eYqHNJuzIp5AgG0AYdmW73SBZTOoEdmvN4ZYXB8kA6nt3MPFPG/K9c\r\n1uq5bM9Qqx2FFPmpJJ+A9pW+4B/Ct4sAIJRPdqqwAyv3IllfcaQkv45NsA5f\r\nfQMYYMnw1hZP/SeJk57HFibik81aimhe2hNUGVJfzrBcbwX4+Zl2Uyjlz0U8\r\nPTIVFs/DA32crckpMCypkLQQPq6rx3/LQh7km6WIGEJOff6UdtBpLsVFtg0K\r\nszs2Dt97Hr2Vo8vPCDil4MdoJJiq3BMEL9iHjbERS6IKJzjsBw91AYY5PPVo\r\nAqhwVwZfC8wdtYX4Uvc7Xq6a1oRO2PjexqKvgmgR44FeGAvzrGbE9oNH9Z7R\r\neS2IJyoqaFSPnEoI6XzOIDuwQSxwjcSAxqdoPQHiX+euCSCpSjjzpezBhxFl\r\nQz7niYQShZGIluv7Re/icQDXfp/PTHx4L2XlqtA1/kYgz9Rbok0e+f5Pgvds\r\niDxJCMabLE3dJBxbWS1xSvFbeDTw4OkAnQppY/vsa9irl/XByKagxnI3yDQU\r\nARNJJEJl5hP61M6tPdWCpiQZ65AG7Qhdh8klGEFd9eniGGYAdlNDjczrEhpH\r\nWJ6WqpAPNT+KhJFE0/Fc2EOXglg6M9xx2Co=\r\n=GMom\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-6.0.0.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/a5ac8e995094cc079a4ee1869721693f/team-plain-react-chat-ui-6.0.0.tgz","_integrity":"sha512-u3FjdUFejh9BdmufWpk5fcwpNfV/KCL5/BObJ+AffpZtbeP/HOpbKiA4OEpel3VFWJ+cCOr1SVQzkYDYUGgbsw==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.11.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.16.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_6.0.0_1660574318066_0.9647968815187971","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"6.0.1":{"name":"@team-plain/react-chat-ui","version":"6.0.1","license":"MIT","_id":"@team-plain/react-chat-ui@6.0.1","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"1d9c026d5296ffe52b35bdace48c45a026602d28","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-6.0.1.tgz","fileCount":150,"integrity":"sha512-fcirPqbXtVQKZtO1/30PaP2s8NXm7l6PWn1iPGajHKal5Dy2knLtAGkyGAZdXYtwnVW0J3zd9ki2zzo2wx+kHA==","signatures":[{"sig":"MEUCIQCgSQfBCuPO5yaLw1Tgy5zPh+cuVjAgsBaUOQ45VUM0PwIgcCftACWzI1lQAowMjwLAYwmr941njMW45fV4nfop0RQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6331469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjA2noACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrymxAAhmLKz+vavISxnhk3s60PwMrdHywTEWj73mnIneQoQ4VNZxNz\r\n/l7XbsLCvv/jwgOQsJP0lxYmWkI/MPRb6dGTmKflqcSGcEaexDxXgiqQvAmx\r\nHZHKLHD6uWzi6aLi50n4YpicVsfN0KkwbPeuOSiMPkPwHNCdKQAgZ0CMmjFC\r\nwZMRS6ANlBxheIHih6GJ3QiAOhXNm8Q5vmPbq/jWZI7rbvTNnLJwxy8bFBOQ\r\nxOTNmFYR8fLIRBW0UA8JiSgtD3yfraHJ49iW10HytWO9bRPX3kJltGYBbMSV\r\nOoB9rA0e4lMd5kYUXn2htqdi3A7HIYBeXvLH5V7+tfS3nuEE2wJiBfrDUfRL\r\nLLxjV3sZdTGJZqOE4941JJp4qiHYcCBAFul3alRPCf3eNuj+y9YI+k9ob3gj\r\nCLsAwD3CozZILJtfWWR0RYCLNkXNrLLPxR7c+3O4EaLAUq/46Rrei4pLML1l\r\n/cH06CKbRDIsCb0P+cE7tpz5ArpNfXnTYxDPeQgfTyfQsyWe8PaYKy4J5l+t\r\nq0xf7c0u0JHkvnCtlQugy1X+IE7jWHmhC2c6arzaRpvhOg24XsrJfm/jKXsu\r\ndU4Moy5HhiHbD41fnrDG5jlsFDFQ7yZpNDeb1npWLtd394EQCSu1nYNwndhk\r\nqm3AavsyGYc0HS/3Xbe7+iOOYEHDrZ9MsMY=\r\n=3Azv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-6.0.1.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","genversion":"rm src/version.ts && pnpm exec genversion src/version.ts --semi --es6","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/967bb5756def2adb3478fff38dda9e8e/team-plain-react-chat-ui-6.0.1.tgz","_integrity":"sha512-fcirPqbXtVQKZtO1/30PaP2s8NXm7l6PWn1iPGajHKal5Dy2knLtAGkyGAZdXYtwnVW0J3zd9ki2zzo2wx+kHA==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.11.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.16.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","genversion":"3.1.1","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_6.0.1_1661168104652_0.3534604027144972","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"6.1.0":{"name":"@team-plain/react-chat-ui","version":"6.1.0","license":"MIT","_id":"@team-plain/react-chat-ui@6.1.0","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"42db74e6d321cef20ee8468b8c513a349ba910fe","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-6.1.0.tgz","fileCount":247,"integrity":"sha512-AHXAz/PJYiZsCXuIG/IunDfbHjg4mKd1D3sUjR9h2Ml5S1BwjLfELiMTy5DAclc6/nE0TdVlZLz4QPx5mrzwQA==","signatures":[{"sig":"MEYCIQCAABWAMLeK1EC8GQGQ3CdLWPl1CrbBhraVYmZHFBEIcQIhALlxO5bD+hEN3A5Bc60MFcq/AvVPWrmen/9QvWlsM4Bv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6679775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDgcRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpefw/+J/4/lodJqnKh/4ooM3+StOW0ysf49p+Mt8WQ1J1T6Nn1jFOg\r\nHTSrkpfQ6xhBTp2xmZOSQlHZzzZjMC7v8lyZiv5JCZ/ihoYdpRZwyKVm/6Vj\r\n9UdWSOTBV7VVrJrQzLjz2UGz6uK5qOtmCKS1o0ETZ2Z2lGJ/iYvg4611cBct\r\nDxBLaXZpmF1B5MjF7vc75iYvrQF+ue410FrCqfeRY87qJZeo1joU3MZ3k965\r\ntJqWWuKS6Levab8BTOd8YgFsmADaAXmHZ5eDNmeoVcb5QD435GwdEVyalB5w\r\neFuproHN2+lCCEQmYP4Eb46z6jHwjArn/DX0smYJ6ZJ77FOW286NdFAj2M8y\r\n8FVxFNd/MR6capIVEQtafc36jWKiQEKYCgtvs3fy+ZpZYoiD1A8L7NeIYSR4\r\nCr4dIgcIM0eZ9yyJ5p98+rkdIF8OAiSXP1xDyInURZD75JRUGN8W0WiCkWtV\r\n6yzOmGzaKamwS4pvcY2FSkEfskTXtGbvp19xEvqgF36iArjkkLHCn/By7cv8\r\ni7T6TGpkoJzH6r2ZEjTFbcQ+Xg5gt2jFDa9xsIZaUl+aJrQS2CKlCluh+C6l\r\nfZCZiPxQupo4puzIMc9lzRDsA010hI4VXFxKVQbv062JGhrUfb/EHOat3fxs\r\nrZPUCDIsUOjIgFIq3/O1DWp8L2isQmBV3gM=\r\n=6quA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-6.1.0.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/2df66d186f6fa09ee156c3f35e2281a7/team-plain-react-chat-ui-6.1.0.tgz","_integrity":"sha512-AHXAz/PJYiZsCXuIG/IunDfbHjg4mKd1D3sUjR9h2Ml5S1BwjLfELiMTy5DAclc6/nE0TdVlZLz4QPx5mrzwQA==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.15.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.17.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_6.1.0_1661863696720_0.20931311813745967","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"6.1.1":{"name":"@team-plain/react-chat-ui","version":"6.1.1","license":"MIT","_id":"@team-plain/react-chat-ui@6.1.1","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"8e7d8004ac56cd3bad016fbd5ccf3dc2e36b3479","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-6.1.1.tgz","fileCount":247,"integrity":"sha512-+wxaUkAhajE09+oy8PE2wj2Io5eWKHp/+cq2jQhl4/sxwOgFSdCicyx+jprZIx3emP5JNjFHPO5qQC2fo2LweQ==","signatures":[{"sig":"MEQCIEzAVoO4SWWuUZc82oRiGs3ZCCo2f7gxNskXvsm1ItwwAiA+AQPDK7E4MzNAzmIXZmnnpKRkmDUB/yaNgrNPlE3hFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6679775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjFe3cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8RQ/+IzFgIULoPNbc492V2k9s9csMluxrzKxJUUdM154grFC8EBy2\r\nWwfPWGZ1t9Bf81xDY/6EFyVA6+6AVrbDQbY3C043cFoyqaV7357eu+tuYbdH\r\nusrnXU/7NqPZX0IgGM6MoYQvUHxbs8Ah3JPHW3ToQTM3w4pGZyLCo4zmz5tG\r\nhUAEgpsv6VoIncS6Wy11mN9fOjqNftCgi28UvBXjcT4B7wyDDnQvWaVScUkh\r\nXz69UNc5RbCLQWGqMDBPVR8MBxgTOej1TI+TdWg6sxr6Dwkm0MKC6a7gagVo\r\nUw3+59iWdHGSBQjdazOxDEO2f+1pl6OcacNPBryYz2iEU7FZslyZnGnvP50i\r\nAyJrnG+bL0CrwUtKdW4fozAll9fykOTWCgB4V6Tg9rCzzu9vxRRmHhx/IkF0\r\n6/YyOzO+9uHZWHsgwIEBfKrQBsJCBk0H6K6g/m4M/5hOl9lazAVhk63iw56Q\r\nhaBq/0wHqvO8S2XFORVFMH+S6zUKwF4xytbLLSI0r64YxLtT50+OEOz9vD+e\r\nLvmwD3iQKNj+g9rv/8VBY/FgjKJA7KUKv5aIByvQ10wcCcAjEWcWmLfpBlpG\r\nZvFw+bHD//vOWVoNf/vLRmbXAvKbIxW11rVomu76jcjC4Ns1cK22enrQdrfr\r\nWn2m0jbXN00L3hZRlNHchw3gJ+SDZC47e0c=\r\n=xIsR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-6.1.1.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/676b071d1917cbf4d311bbe7129907f0/team-plain-react-chat-ui-6.1.1.tgz","_integrity":"sha512-+wxaUkAhajE09+oy8PE2wj2Io5eWKHp/+cq2jQhl4/sxwOgFSdCicyx+jprZIx3emP5JNjFHPO5qQC2fo2LweQ==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.15.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.17.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_6.1.1_1662381531864_0.35354899695098596","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"6.1.2":{"name":"@team-plain/react-chat-ui","version":"6.1.2","license":"MIT","_id":"@team-plain/react-chat-ui@6.1.2","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"a23bcd9efa917821a4f4dad115e6d37cc47388ea","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-6.1.2.tgz","fileCount":247,"integrity":"sha512-CtYU3hA/FsJbEQ42yJDQScVQItc9rDnY4qiFPcMacejs/cwQcjrzClAoVxaM9NjjeV5VP+9lXhAxMJFcQwB+ew==","signatures":[{"sig":"MEUCIBhRa82akjfm+ZuB2VVqQBGMGE+sfhgcj4P/slJZ4VW2AiEA0qlKb8sO6vm7xbb3uggxZFF/6gmKAgWeiQNAcGz6Y2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6679919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH1c5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqU8Q/+Mq5FZqkYRcBWulUZEw0tyqmPFKCpmfPceGK0UtNvLZfvsb6A\r\n6xotqGcMq82gnzrYduj+FFtj3+M1nkQeoEyLv/gVLG7sXnhrt8mklNEr8zIl\r\ncElWmls7sd766UggjOLDFrok/37pJHlPqUDvyo/ZuzXzhPTSsFFvmUiVj1Zc\r\nmqupj/m7vWcj5z41lNBcaFGJ2v04qaxtZCqNhX9vdB85nCZa1Cz1vOy/hx+t\r\ntzifKxV6qZzP7yPEJUjng97RAJI5MjB6Jx/ZANyM8enHD6nj3+kfKqyo9xI3\r\nVQSn4ijyT8QWiXc+iQSzegVxW6CTmkLUEU0bCkxnWeBMLgtqT7XhMWfrEmta\r\n/62GL/y0tXdWfgVtuibUbulYUO0UWQBZ5udY7wI3tqnIvvmjJ55zhYJ9k5sJ\r\nzXSLAXeTK69xCZ3EcyFUoya/llAmrmwRaZmqdZZLK1KVtURS54bVJ+4yHUf5\r\n4FHBhDAwp/d5RY+7mueI9pv9jdNh6bGU9/Qnqra6mPJ3rByv8I/bLOEpefc+\r\nzdeUYiMO2ixSlU6d4AF08B6nTvDy8NCzjuqM8v+bPTq/YupBl6/YYUYBIsq3\r\nxIGf+ae7FAqQk7Twwu/l62Q7yhc6/EKIFb9Eoq83qSA8y3lJbnhGJ2kdb7Qo\r\nL0UY1f6QkeTpZiBhaeQu8/OHTpder1ulfLI=\r\n=xLLq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-6.1.2.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/ad1cf3dde57872c9486363ad8aea5e91/team-plain-react-chat-ui-6.1.2.tgz","_integrity":"sha512-CtYU3hA/FsJbEQ42yJDQScVQItc9rDnY4qiFPcMacejs/cwQcjrzClAoVxaM9NjjeV5VP+9lXhAxMJFcQwB+ew==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.15.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.17.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_6.1.2_1662998329571_0.5066519363907167","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"6.1.3":{"name":"@team-plain/react-chat-ui","version":"6.1.3","license":"MIT","_id":"@team-plain/react-chat-ui@6.1.3","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"ba8854da4bda5368f9e720b996f69f6bb2f306ec","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-6.1.3.tgz","fileCount":247,"integrity":"sha512-iDbKBlJVznkCnRdPu3XTgItsUe4lYixzjcbOOITAckTid1Nz7/z9HBqEtYgGrXshDqNOsG8cEfJRTboHsAcgjQ==","signatures":[{"sig":"MEUCIQD1Z3mtTMwGEySd7ssyKGtAGWO6hDdDcceZExHu6WYjdwIgETy354rvbvA3jyDIqPXm5KEcYJCbZRujs8dWLVOHMMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6680925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIGbAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorEQ//WtPmahDW4S/gQlZ39jT0L5vGN5Ge1JC4prZWtRc+jDGPzJ98\r\n9/Ix/0yYAwQxy/d4RTPWwfDHgY/pJJ+cBPW4dDXaM1g+buvi7n+McwC5DuFq\r\n+sryaPb+5PcQXOWpgMX2kVfgAT2yd+VnpHa6oBOf55ea+aHFbSm38o5c5fAS\r\nhK52lhVAZRRh9pgO5462MzJGQlcua1HGLC2Yq8zB8vCrIV+mkAYeZ07qOjPN\r\nxrXIgaryr7ue7xjsXnl6Y5O3yHJes/N1H2SWCGmU56oFOCJ4wv02NkihKSf3\r\nce8URznwD2smlwnFelOWLtfK+LuqTjcinxC0mjWF2QxVec7+N7LqE2Nh7i15\r\nmV/6kYFOKIqjH1KUH/vL9uXCqg9dxTo+CBHZia4s3oqIcVq1lJN+1xbKHkgg\r\nEHUUpHeyyIFNotM5rvwZrtP1K0elXk6oZtWP1yT3gfvVfyH805hGczWLmaNP\r\nVHGGt5WRbyn8UMnyuOpvMKG3brzyQ2CqVVpFUkgDjiXwmAQG4EZpcu396ocZ\r\n6gZb+pV6YGiUfUBlHeD5Gpczq3sVe5CkAmIMQFQ3skXi/fI79KIxf0JI4cMq\r\nbB0A1aP/mC7fDY2HAq37yXQw3IbhsaRS27hnZdNRe5hHZ3P+M3wB8yPEBTj2\r\nxcPeQ5Ap9JjODZ6AtTl/Z74lbaAGYzOO56Q=\r\n=bQue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-6.1.3.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/e0ea4cf75238c7af94899f52a054d9c0/team-plain-react-chat-ui-6.1.3.tgz","_integrity":"sha512-iDbKBlJVznkCnRdPu3XTgItsUe4lYixzjcbOOITAckTid1Nz7/z9HBqEtYgGrXshDqNOsG8cEfJRTboHsAcgjQ==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.15.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.17.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_6.1.3_1663067840586_0.1310827072110936","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"6.1.4":{"name":"@team-plain/react-chat-ui","version":"6.1.4","license":"MIT","_id":"@team-plain/react-chat-ui@6.1.4","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"da6d094f356e30e749ce6be2a70824ba46438afd","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-6.1.4.tgz","fileCount":247,"integrity":"sha512-YeW9RAevaUal/nkRiHmotppK9APgQl6noRUZHxzAzXfaikMmIEVeWTQgZux82JRMdk/WROTnEm+cuF60NicJGA==","signatures":[{"sig":"MEYCIQDfPV0EHKQ2lAX3YVVTZFZPyRYMA7zXXPMvuamTHGUCngIhALovpUv08c2AFSUXY8d8pNW0I8BMXr723BGQxHOTrY57","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6680996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLE80ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQPw//Sx3WfCLXBXhhIjVXshTnPGHuO9v4nyn/kGy8TbnvEvI/3Z6w\r\nrMd6D0t6sRVjg/vTZl+lID8FCnWNY7s6GqDryuzuxHiofcJnK3yOcyNzZjrf\r\nrTEu1TDsIVo0vEfasbzZsijH/UoAMcO3Xtj0zDRiHGfdtZkWr98C+InPq26J\r\nT5j4PcDFQmqyQ+zIraqWyk3X33MFHf/uIZA5FTbSwgIU04JtD6NDdnB/Ihzq\r\ncZx0HP+Oj9VBi8UMMoGLlJ3z4j19xCKJiAAHSVuKeZb1txmRnPwmw44u6Uou\r\n+qdbIQgGLiLjUFnhtEuhG0MuOS6dsgBAk1uFeR8pcwqJxfz31Vea/yfw0ocJ\r\nArcdf78TcTqHe84g8ID8YhmYcERTDNjxGtPXNFuaJLVaY6KHMxMiFQDzrz5n\r\nCCfPGJB5j0c0C+9ugfzC6g6IqW8sqAgz7KzZ+fmv5e5Rc8awzavlg3KfNEX3\r\nLBjHd03/n7LAKZjSg8Lw9sjYI4skvQr813wWyK1cbq+Bm+tmEzvAGv5RAQho\r\ntM1eYtX22fXvmfNwKgTUQU26muoIZxHyb9osGef6w23wr7BgJ6h+9Yj2Sfxq\r\n3wJ6A24GLKDXZnyPonH2p6vK//DvpkZmXsQRj/SD2nFhWU3zIwnS9AkfubZC\r\nPHOQDVEoJrq8yw1WPNVzdJXOIo+Uobv95W4=\r\n=sbx2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-6.1.4.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/4848e8eef0301db4750be9a65c027853/team-plain-react-chat-ui-6.1.4.tgz","_integrity":"sha512-YeW9RAevaUal/nkRiHmotppK9APgQl6noRUZHxzAzXfaikMmIEVeWTQgZux82JRMdk/WROTnEm+cuF60NicJGA==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.15.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.17.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_6.1.4_1663848244387_0.4892756080242242","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"6.2.0":{"name":"@team-plain/react-chat-ui","version":"6.2.0","license":"MIT","_id":"@team-plain/react-chat-ui@6.2.0","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"894d6eba5b78d2957ef056b0b3cf3db579a8badf","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-6.2.0.tgz","fileCount":247,"integrity":"sha512-zR1kBDbBRlo9O9sdk3lutqEFepowxmK7Nq1qpODGj+NkVp0bk+NcPe/E+SvKDYw/CNUf401bADMKwVBdgeQLmQ==","signatures":[{"sig":"MEYCIQCtkWVxrXSqdNT2p9+Q+drQV3BdJAHqGISKNeHUVMt23gIhAMfDDhyCFI2B4rmj17+WyV8wkZAdnbTYadK4OK2cIQEO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6789757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNaanACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofIw/+JZnJ5ejwXJQPwbFBj+mBGnkN0fjtGihbCv3MlFBapXGeqzKh\r\nOGuyQLFNONzMVZbq0G+n2zOzH/VQNk7Qme6HHKebUcWgnjcL7kzu6+iGJDsd\r\nae/wjHVfWEPOPS1wEXVmD7cZKNdkj64LLrwT92B5vy956qw3cBsd03s9uZ0L\r\nEYNqUx19DbGZ/SWwDWp3H2qrtQ+TgV96lw68zUO4JaGdgirY0CDGO0OlrXAm\r\nhfTqxkXBxjkOPfHdOKgdMbaXaeSlXtpgr1Iy1VHnXIGHkATEvr5jdyzqNBOf\r\nJu+2eH4TobU38C1E9S62g14SmP5IjXlLKqat8wzFghoRU761q9NRAvHp9ar2\r\nuWMRaMVp5T3uoc34EKIG9SNT98shHYvanrg4kF1v/FarIRk6PxiUbxDOdzdA\r\n70v/CBfiXLOnzIDwdKONL/IXe5Ezr4dO3n8iT0pLWZfzupvLIPAS4pBWu3lW\r\n68oreU7zq4ZVu2jr13leAEZCoYSjZfYpodN9Sl8vbQ1NWTiHFA3dNg3LfMch\r\nSLqhExjgtbdVZZI8WVjx0Toiq64gTiJ/SMFGyX9H65hxeRaNH3wnshRjPh9m\r\nS5Lf6qWE61+9N4Xh3hETnv13e7/AIdOJha7mmtpXi9lK1wE1MIZJWpZ/4/SW\r\n8O0EWs83cQMURCscNJhanx6vVuoiaXhinHQ=\r\n=Znwb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-6.2.0.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/132e0e992553020a01cfc73be2dd7729/team-plain-react-chat-ui-6.2.0.tgz","_integrity":"sha512-zR1kBDbBRlo9O9sdk3lutqEFepowxmK7Nq1qpODGj+NkVp0bk+NcPe/E+SvKDYw/CNUf401bADMKwVBdgeQLmQ==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.15.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.17.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_6.2.0_1664460455486_0.6670826359736832","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"6.2.1":{"name":"@team-plain/react-chat-ui","version":"6.2.1","license":"MIT","_id":"@team-plain/react-chat-ui@6.2.1","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"b3d2776484bfe3c1f6979baaf1a500e72522744e","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-6.2.1.tgz","fileCount":247,"integrity":"sha512-RJvD6Vuw2eeMunz95L/qg7r7lGiZPM0Iwe2UFisrxxLmHTvM8hhXH+sFQr+6zai8RX5c0NgRDvjzW/Lg3yGkgA==","signatures":[{"sig":"MEQCIHns41vf/meXWkzOrmYaCWDCfgdeE8IJb8EF6zWa4ghtAiAzxqRBLp76HWPsl4MIZn+ISRxugIgXIYP0m07oLT3b1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6781176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjW5XlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9KQ//cbVdC66uihe4gKhhBIlU2i/aj4OH9JCyIP1OfHP+VD7xzw6G\r\nVF6uDDfv1EY7vw0ODcBo+OddiaKFWzRyy6VM3M/5BA1D14JRheHM4TPE13m9\r\nZ5vvXy9Z2VGi60gdsTgn/nGYvUiOCHdh0FNhefHPcfGB1mZWgepqYLqHKo0B\r\np1SQ8h9usVJx1YBqsySv5C1vbMKWPBmanRcPwP3wC0n706eiOr4vzZmein33\r\nDypcj3n2x6l+UdW5pZSci6+ksmRrYWVM2AfQGeDZ20YOfMZX8SA0srBQFSZp\r\nfavgCEPpPfrSGeE/UrRmz5IHygxVF+VZXKfF83juw0pWvCbmJITxftwU8DzX\r\n3KJeB8JyGYLG3tWV5EQjxmnRlXs/otxqWqzkP2UVeYdQg7XN+hvRAs5IhdRe\r\n0RKbwLCPasSty7aI028crYHMYKK6GZEBBkCZQNGO+1+se6/1SFkUy5zaIVUF\r\nstDLKPni7rONxlgIfBMTEDzmdFyF23TLqNhy8zVlVfqnQRla/eFxGbjYP3YT\r\ngBT4B0lbvb+2PcKjFeaDafCFLqSRvX/clCsSIrP3oT0yXywLIMs5X2JLBMHT\r\nKBe7mSaVWOhgzWzkoCgLA+s6Be4eX7j7BowSV6dps9z0Yj055gD4qU06GK8O\r\nt90j6st6gKGJ75vN7bWItho7sa6fKVTuK6A=\r\n=BLUB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-6.2.1.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit","build-package":"rollup -c"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/cf769cd4a4100078bf3ada156ccb06a4/team-plain-react-chat-ui-6.2.1.tgz","_integrity":"sha512-RJvD6Vuw2eeMunz95L/qg7r7lGiZPM0Iwe2UFisrxxLmHTvM8hhXH+sFQr+6zai8RX5c0NgRDvjzW/Lg3yGkgA==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.15.0","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.17.1","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_6.2.1_1666946532773_0.4764167686881766","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"6.2.2":{"name":"@team-plain/react-chat-ui","version":"6.2.2","license":"MIT","_id":"@team-plain/react-chat-ui@6.2.2","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"1933b8ebae2f651f54dfcdc2bc8e3efa971d009b","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-6.2.2.tgz","fileCount":247,"integrity":"sha512-LEy4doZ7Osqlnw5YAt9a9JSMEpA3D10w21wtqf1RlgHGaHJPaGCSztzIV0RSdYIYV9oz8IgYhjTzwlDUgl7iqw==","signatures":[{"sig":"MEUCIQDrG3AtpN0VMvaFBTDFm9VD8oWJ9VbF44ING8xjhgJI1AIgcPuy+6WBQGHzWVIkQE7EAl7h3A6roIpNmNrrlEDL6l4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6780825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja2lTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEfw/9Fp/y08zfOUZGI1sVmVKT7Dcc31WorWi2MxsVpAL3fpINrR96\r\nJ51EoYm0gmEBeRjMTesXMZWWS4czHfa2MAdXwusv+OUsA2YnlyCMr+y8Qk0+\r\n8l74OwGpQew5EWL4qvTaHbn0PBcczt4Xq6T7fpko9u8Fg4JosMNgEiCOWBJJ\r\nY3GYpREmkmqJKytTAQ99F66UtkcTfZ2PLq+it0V8NfyHRuYqY+gTj11ndLOb\r\n4VEWyC6IWTuSkWjPPQ45U+NswSE5c0cNmyBw7UVUcVN0GcEH+cY7ANs/9qn1\r\nRdPX4BXZKinXp64Nytm2E8oGNs+ijvJsupGgTsZr9aZOiQAcXJhRzdtHH6T9\r\nfBW5lqjINV4C7YwkMAM71LV/Q1ytnwA1PbPsvtuuiIMUXjm6HUWj/6OFtkCH\r\nFs5IVQZImtDOrekztf1hwyGvcNWI/NbeBu+KxfubeE9HSRU2asjmzqvuFGpW\r\neC2blek/vlC8pzAHe9mN1n6zH4J79+j/IQ+T4BMCWFfevG4wUiPqH/tzn+Tc\r\nVxMf3EZpbv0Yw/1YJmkrgr1WnWG9/W0O5IALftptozRtYPjzhTFpR12jseal\r\n8lpWY5aXNedxHawyPMj27oZrV6H3sg9fwVpLlFUrZsV2kySXHJM4elKybk9v\r\nVKOenmSNg+d4+EPOa1YIo7h5Jr9z/hQqllA=\r\n=yu6b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-6.2.2.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rm src/version.ts && genversion src/version.ts --es6 --semi && rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/77a3b72c89990a4d3b5848c9cbfed6f0/team-plain-react-chat-ui-6.2.2.tgz","_integrity":"sha512-LEy4doZ7Osqlnw5YAt9a9JSMEpA3D10w21wtqf1RlgHGaHJPaGCSztzIV0RSdYIYV9oz8IgYhjTzwlDUgl7iqw==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.19.2","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.18.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","genversion":"3.1.1","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_6.2.2_1667983699079_0.4537980180146901","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"6.2.3":{"name":"@team-plain/react-chat-ui","version":"6.2.3","license":"MIT","_id":"@team-plain/react-chat-ui@6.2.3","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"0abeb42aab940fa7655d962c965379637ec68d59","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-6.2.3.tgz","fileCount":247,"integrity":"sha512-hKCXJaUYqtgjyQvBz7qLN2P96AR8oTdN3bt5W6RJioAl2AqGQaSsFJZSqDRBL5bswGvRVhGXAHcJRy8OBqzFnw==","signatures":[{"sig":"MEUCIQCKxyNcn2WX8j/J8w2yF7YexS9OTnzKVxcstyazBy0j7QIgRIehCc3nvNtzzZMwmmHirdX9azYEbYE7xdgnZM75jZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6780775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGWuMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUWBAAnGcxvSX5FM5y/HusLb15T4KqjGyHEr3QVpqdO64W87kcbuTP\r\ntwPUR6AbkYS5ibNjESGQR+7BVRgzyfocURTcs0YP88FmY8Ac62dEbGyIbaX+\r\nLIYFJUCrILVflpayIxai0wYh8KqE5oLFCipGPhbX1cj7BmAD5uJU8zlR7nED\r\nkMADLrFbj1NXH92W13lYpOOcRvTVgGraomdoXwr/xAnsoMjvU2sfDl9CX3at\r\nFNYnUbJJ8kApi5oc7AdijpGtlceoEeWlF46EFnth7VmPxC1RZjP6HupGa8Yo\r\nhp4ymj+EaqLKoGmv/kxZhrzZOHz/dgAzzJF+5YXulwSIMwoLkL2KsdyDdrRf\r\nXT2jaAxuz5p3r0xGBsCZ7tJQamXh/rALtvZI83UhnDHosSEMA49EvNPnAUiY\r\nOFghHrcOaNtTt2lk0sMrOmI5Uv6OQJMwDbQAXYIVQCXVCG3dgrGZr9fj1Nx8\r\nzfl9iu98oLmJko93K782dLEKvJMuk4u9vhca33ojZOaKI3wdGxlrXcnompUX\r\nN18mVooZzKaQx1Cv3j1FF/M1lIU09EsNDZUr2q3HaG5mj99igHqC2Gtixgyd\r\nQAOoCn/3OlrNZa8lDi727Gz/psEL2LkMU+kYM2OU7CdvRZ93N8YYfxNLIZSJ\r\nTlQcrtHS/31qZPeAYefWoKyYICGPFBPaycM=\r\n=AVA4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-6.2.3.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rm src/version.ts && genversion src/version.ts --es6 --semi && rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/31399414d8431ff28f5b8ba32961593d/team-plain-react-chat-ui-6.2.3.tgz","_integrity":"sha512-hKCXJaUYqtgjyQvBz7qLN2P96AR8oTdN3bt5W6RJioAl2AqGQaSsFJZSqDRBL5bswGvRVhGXAHcJRy8OBqzFnw==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.19.3","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.19.1","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","genversion":"3.1.1","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^17.0","react-dom":"^17.0","@types/react":"^17.0","@types/react-dom":"^17.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_6.2.3_1679387531882_0.3411788822474715","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"7.0.0":{"name":"@team-plain/react-chat-ui","version":"7.0.0","license":"MIT","_id":"@team-plain/react-chat-ui@7.0.0","maintainers":[{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"}],"homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"dist":{"shasum":"03405fa7c585e6162fbce18f7e41d20b510164d0","tarball":"https://registry.npmjs.org/@team-plain/react-chat-ui/-/react-chat-ui-7.0.0.tgz","fileCount":247,"integrity":"sha512-y4fP6Lsim3uK/o1oWbIQHNLR50VJIQOH8zVbx9aqhYLW2xp4TE1zq0dH/e1rYFDa8vobS6kWu82cOXVyuxjbgQ==","signatures":[{"sig":"MEUCIQC5tvL+mKU8BFdlKdLhO+rXdv6xddGrV3zLammXkf8klAIgS5eDUWi0NiY1fNe2WzTvKqCO4zOJWzQCTMM5dXdHH5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6780783},"main":"dist/index.js","_from":"file:team-plain-react-chat-ui-7.0.0.tgz","types":"./dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"rollup -c -w","lint":"eslint . -c .eslintrc.js --ext .tsx --ext .ts","test":"jest","build":"rm src/version.ts && genversion src/version.ts --es6 --semi && rollup -c","watch":"rollup -c -w","gen:types":"graphql-codegen","typecheck":"tsc --noEmit"},"_npmUser":{"name":"plain-npm-bot-react-chat-ui","email":"npm-publisher+react-chat-ui@plain.com"},"_resolved":"/tmp/1b68f6392fa92a21640a83913166fc27/team-plain-react-chat-ui-7.0.0.tgz","_integrity":"sha512-y4fP6Lsim3uK/o1oWbIQHNLR50VJIQOH8zVbx9aqhYLW2xp4TE1zq0dH/e1rYFDa8vobS6kWu82cOXVyuxjbgQ==","repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"_npmVersion":"8.19.4","description":"Plain and simple React chat UI","directories":{},"_nodeVersion":"16.20.0","dependencies":{"zod":"3.14.4","axios":"0.27.2","luxon":"2.3.2","redux":"4.2.0","goober":"2.1.9","lodash":"4.17.21","csstype":"2.6.18","graphql":"16.4.0","genversion":"3.1.1","graphql-ws":"5.8.1","graphql-tag":"2.12.6","react-redux":"8.0.1","redux-thunk":"2.4.1","react-dropzone":"14.2.1","react-toastify":"9.0.7","@reduxjs/toolkit":"1.8.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"27","tslib":"2.4.0","rollup":"2.71.1","ts-jest":"27.1.4","tsconfig":"0.0.0","jest-diff":"28.0.2","tsc-watch":"5.0.3","typescript":"4.7","@types/jest":"27.4.1","@types/node":"16.10.3","@types/luxon":"2.3.1","@types/react":"18.0.14","@types/lodash":"4.14.182","pretty-format":"28.0.2","@types/react-dom":"18.0.5","@graphql-codegen/add":"3.1.1","@graphql-codegen/cli":"2.6.2","eslint-config-custom":"0.0.0","@rollup/plugin-commonjs":"22.0.0","rollup-plugin-typescript2":"0.31.2","@graphql-codegen/typescript":"2.4.8","@rollup/plugin-node-resolve":"13.2.1","rollup-plugin-peer-deps-external":"2.2.4","@graphql-typed-document-node/core":"3.1.1","@graphql-codegen/typed-document-node":"2.2.8","@graphql-codegen/typescript-operations":"2.3.5"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-chat-ui_7.0.0_1685357347473_0.44750162878272515","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2021-10-22T14:24:04.371Z","modified":"2024-06-06T07:34:35.537Z","0.0.1":"2021-10-22T14:24:04.565Z","0.0.1-dc1cf92c":"2021-10-22T15:04:00.999Z","0.0.1-50327e18":"2021-10-22T15:50:57.803Z","0.0.2":"2021-10-22T17:33:39.328Z","0.0.2-d49a6c6":"2021-10-22T17:41:03.895Z","0.0.2-44ea49b":"2021-10-25T12:46:53.036Z","0.0.2-7f47484":"2021-10-25T13:15:21.175Z","0.0.2-fce04d8":"2021-10-25T14:44:11.099Z","0.0.2-8eb4d66":"2021-10-26T09:04:56.423Z","0.0.3-068d5b5":"2021-10-26T10:15:08.168Z","0.0.3":"2021-10-26T10:15:20.937Z","0.0.3-abde9fc":"2021-10-26T11:01:29.336Z","0.0.3-fdf2446":"2021-10-26T11:10:15.894Z","0.0.3-3bbb698":"2021-10-26T12:51:24.236Z","0.0.3-3d4d9bb":"2021-10-29T08:52:47.331Z","0.0.3-62434b2":"2021-10-29T13:02:32.417Z","0.0.3-7703fca":"2021-10-29T14:13:05.218Z","1.0.0":"2021-10-29T16:40:51.177Z","1.0.0-68043a0":"2021-10-29T16:40:53.096Z","1.0.0-2f3c023":"2021-11-01T14:19:37.756Z","1.0.0-e31963f":"2021-11-01T17:35:42.307Z","1.0.0-84dcbc8":"2021-11-02T16:03:02.157Z","1.0.0-7bbf48c":"2021-11-02T16:52:22.823Z","1.0.0-fce15e8":"2021-11-02T16:54:30.805Z","1.1.0":"2021-11-02T17:13:31.342Z","1.1.0-f2a7add":"2021-11-02T17:13:34.360Z","1.1.0-9f924cf":"2021-11-04T14:03:44.920Z","1.1.0-5efd0da":"2021-11-05T08:55:58.175Z","1.1.0-2da5ae8":"2021-11-05T14:31:06.828Z","1.1.0-09a77e8":"2021-11-10T09:51:13.732Z","1.1.0-4d0572e":"2021-11-15T10:01:54.784Z","1.1.0-fd5580d":"2021-11-16T15:31:31.852Z","1.1.0-0ed822c":"2021-11-16T15:38:55.829Z","1.1.0-4c5bdf8":"2021-11-16T15:50:00.793Z","1.1.0-d5f764d":"2021-11-18T14:25:57.375Z","1.1.0-d97b0b9":"2021-11-18T15:34:51.204Z","1.2.0":"2021-11-18T15:51:36.728Z","1.2.1-0e64e68":"2021-11-18T16:26:58.168Z","1.2.1":"2021-11-18T16:27:04.292Z","1.2.1-3630a53":"2021-11-22T09:48:49.403Z","1.2.1-77c142c":"2021-11-22T09:53:12.556Z","1.3.0-47bb29a":"2021-11-22T10:02:50.360Z","1.3.0":"2021-11-22T10:02:55.845Z","1.3.0-eb42581":"2021-11-22T15:39:09.745Z","1.3.0-2eebeb4":"2021-11-22T16:07:13.989Z","1.4.0-b23e14b":"2021-11-22T21:27:29.973Z","1.4.0":"2021-11-22T21:27:35.427Z","1.4.0-d044cc3":"2021-11-29T15:20:43.563Z","1.4.0-2fc2ffa":"2021-12-01T08:40:07.707Z","1.5.0-6690563":"2021-12-01T08:47:00.441Z","1.5.0":"2021-12-01T08:47:08.714Z","1.5.0-1e7a934":"2021-12-06T10:58:08.772Z","1.5.0-dcb5b00":"2021-12-17T09:47:10.534Z","1.5.0-b509df3":"2021-12-20T09:50:55.401Z","1.5.0-5d4bcda":"2022-01-04T09:04:43.884Z","1.5.1":"2022-01-04T09:15:49.684Z","1.5.1-dd630c9":"2022-01-04T09:15:54.274Z","1.5.1-a79a5bf":"2022-01-10T09:49:31.711Z","1.5.1-2100b3a":"2022-01-17T09:48:26.721Z","1.5.2-39fbcb4":"2022-01-18T10:04:33.615Z","1.5.3":"2022-01-18T10:46:48.011Z","1.5.3-a56d225":"2022-01-18T10:46:50.988Z","1.5.3-95fe018":"2022-01-19T09:30:09.310Z","1.5.3-525fe7c":"2022-01-24T09:55:26.790Z","1.5.4-b880ad7":"2022-02-04T10:43:53.010Z","1.5.4-8aaed15":"2022-02-07T09:22:04.383Z","1.5.4":"2022-02-07T09:22:12.365Z","1.5.5-eaede4b":"2022-02-10T14:23:50.992Z","1.5.5-42851ae":"2022-02-10T14:59:01.651Z","1.5.5":"2022-02-10T14:59:06.263Z","1.5.5-da49b5b":"2022-02-14T10:24:52.515Z","1.5.5-a481c31":"2022-02-21T12:11:49.286Z","2.0.0-d4a2c99":"2022-02-25T13:42:45.691Z","2.0.0":"2022-02-25T13:42:48.143Z","2.0.0-69a6b79":"2022-02-28T14:45:18.720Z","2.0.0-5960c89":"2022-03-08T10:29:06.265Z","2.0.0-bd8e625":"2022-03-10T16:33:04.644Z","3.0.0":"2022-03-22T08:53:55.202Z","3.0.0-04cdaa8":"2022-03-22T08:54:00.823Z","3.0.1":"2022-03-22T12:51:26.197Z","3.0.1-55c9796":"2022-03-22T12:51:38.945Z","3.1.0":"2022-03-22T15:36:25.555Z","3.1.0-5f1ce72":"2022-03-22T15:36:35.798Z","3.1.0-94bdd90":"2022-03-24T11:02:24.336Z","3.1.0-f226022":"2022-03-24T11:23:49.855Z","3.1.0-3efb92d":"2022-03-24T15:20:28.309Z","3.1.0-f938887":"2022-03-24T17:51:58.716Z","4.0.0-82bc487":"2022-03-24T17:56:28.963Z","4.0.0":"2022-03-24T17:56:31.475Z","4.0.0-661c70d":"2022-03-28T11:09:42.908Z","4.0.0-baa5456":"2022-03-29T13:38:21.054Z","4.0.0-0ac8737":"2022-03-29T13:48:03.130Z","4.0.1":"2022-03-29T13:50:39.358Z","4.0.1-538c14f":"2022-03-29T13:50:46.054Z","4.0.1-c33eeed":"2022-03-29T15:26:32.706Z","4.0.2-f8333bc":"2022-03-29T15:30:03.016Z","4.0.2":"2022-03-29T15:30:05.300Z","4.0.2-16c3884":"2022-04-04T10:18:19.852Z","4.0.2-9217425":"2022-04-07T10:29:43.126Z","4.0.2-857a494":"2022-04-07T16:20:14.974Z","4.0.2-495b5a2":"2022-04-11T12:42:33.196Z","4.0.2-888d6a3":"2022-04-11T13:53:07.887Z","4.0.2-e8b1403":"2022-04-12T09:39:02.452Z","4.0.2-8b2c6d6":"2022-04-12T09:50:05.399Z","4.1.0-c09ca9a":"2022-04-12T13:37:15.266Z","4.1.0":"2022-04-12T13:45:45.572Z","4.1.0-ec5c6f8":"2022-04-14T12:48:15.753Z","4.1.1-31ea14b":"2022-04-14T13:10:31.093Z","4.1.1":"2022-04-14T13:11:22.434Z","4.1.1-fe374c2":"2022-04-19T16:34:26.775Z","4.1.1-55e9dd3":"2022-04-21T09:39:11.763Z","4.1.1-c45d14c":"2022-04-21T09:49:54.575Z","4.1.1-9e7bc00":"2022-04-21T09:51:53.421Z","4.1.1-c43e2e4":"2022-04-22T10:53:06.612Z","4.1.1-c19f7ba":"2022-04-22T10:55:26.400Z","4.2.0-71091f2":"2022-04-22T11:15:06.033Z","4.2.0":"2022-04-22T11:16:11.617Z","4.2.0-ad16dbd":"2022-05-06T10:00:33.163Z","4.2.1-e9d156a":"2022-05-13T12:32:21.064Z","4.2.1":"2022-05-13T12:33:10.108Z","4.2.1-bb87d95":"2022-06-10T08:31:00.460Z","4.2.2-2963f14":"2022-06-10T10:25:47.503Z","4.2.2":"2022-06-10T10:26:37.519Z","4.2.3-2ed5272":"2022-07-20T08:08:10.741Z","4.2.3":"2022-07-20T08:09:01.223Z","4.2.4":"2022-07-25T14:29:50.078Z","5.0.0":"2022-08-02T12:23:06.100Z","5.0.1":"2022-08-03T10:23:47.110Z","5.0.2":"2022-08-10T11:51:26.371Z","5.0.3":"2022-08-11T15:32:09.678Z","6.0.0":"2022-08-15T14:38:38.359Z","6.0.1":"2022-08-22T11:35:04.914Z","6.1.0":"2022-08-30T12:48:17.028Z","6.1.1":"2022-09-05T12:38:52.119Z","6.1.2":"2022-09-12T15:58:49.775Z","6.1.3":"2022-09-13T11:17:20.851Z","6.1.4":"2022-09-22T12:04:04.603Z","6.2.0":"2022-09-29T14:07:35.766Z","6.2.1":"2022-10-28T08:42:12.981Z","6.2.2":"2022-11-09T08:48:19.442Z","6.2.3":"2023-03-21T08:32:12.095Z","7.0.0":"2023-05-29T10:49:07.724Z"},"maintainers":[{"email":"jhdzmar@gmail.com","name":"jesushernandez"},{"email":"mathiasvagni@googlemail.com","name":"mattvagni"}],"repository":{"url":"git+https://github.com/team-plain/react-chat-ui.git","type":"git"},"license":"MIT","homepage":"https://github.com/team-plain/react-chat-ui#readme","bugs":{"url":"https://github.com/team-plain/react-chat-ui/issues"},"readme":"# Plain React Chat UI\n\nThis package provides everything you need to add Plain's chat capabilities to your React website.\n\nIn order to use the 'Plain React Chat UI', you need to sign up with **Plain** at [https://www.plain.com](https://www.plain.com).\n\nPlease refer to [our documentation](https://docs.plain.com/support-channels/chat/overview) to learn how to integrate the\nchat UI in your website.\n\n## What's included in this package?\n\n- A `Chat` component which renders the Plain chat.\n- A custom `usePlain` hook which exposes a function to log out and the number of unread messages for the customer.\n- The `PlainProvider` which provides context for the `Chat` component and the `usePlain` hook.\n\n## Reference\n\n- [PlainProvider](#plainprovider)\n - [appKey](#appkey)\n - [customer](#customer)\n - [theme](#theme)\n- [Chat](#chat)\n- [usePlain()](#useplain)\n\n### `PlainProvider`\n\nThe `PlainProvider` is the required context provider for the `Chat` component and the `usePlain` hook.\n\n#### `appKey`\n\nRequired prop. Used to specify which workspace your chat is for. Learn how to get an app key\nin [our documentation](https://docs.plain.com/support-channels/chat/app-key).\n\n#### `customer`\n\nOptional prop. This is how you specify which kind of customer is currently using your app.\n\nIn the case of a logged-out customer you can provide an object which matches this type. If the customer prop is not\nprovided this is the default.\n\n```tsx\ntype LoggedOutCustomer = {\n type: 'logged-out';\n};\n```\n\nIf you have a logged-in customer you should provide an object which matches this type:\n\n```tsx\ntype LoggedInCustomer = {\n type: 'logged-in';\n getCustomerJwt: () => Promise
\n\n### `Chat`\n\nThe component which renders the chat UI. It can be used anywhere within the `PlainProvider`. It will take the full width\nof its parents.\n\n
\n\n### `usePlain()`\n\nThis hook can be used anywhere within the `PlainProvider`. It returns:\n\n- `logout`: a function you can call when you need to log the customer out and reset any state within the chat\n- `notificationsCount`: a number which is the current number of unread messages a customer has. You can use this to\n render custom badges and such.\n","readmeFilename":"readme.md"}