promo-chat, by Tincre.dev
A chat component for Tincre Promo. Use it in conjunction with the promo-dashboard and other Promo integration applications.
Use your favorite package manager to rock installation of promo-chat.
yarn add @tincre/promo-chat@latest @tincre/promo-types@latest @tailwindcss/typography markdown-to-jsx # -D if you want this as a dev dep
npm install @tincre/promo-chat@latest @tincre/promo-types@latest @tailwindcss/typography markdown-to-jsx # --save-dev if you want it as a dev dep
Make sure you add to your tailwind.config.js configuration file a
new element in the content property array.
For example,
content: [
'./src/**/*.{js,jsx,ts,tsx}',
'./src/*.{js,jsx,ts,tsx}',
'./node_modules/@tincre/promo-button/**',
'./node_modules/@tincre/promo-dashboard/**',
'./node_modules/@tincre/promo-chat/**',
],Your configuration file will likely look different from the above, depending on your source directories.
You'll need the following environment variables available in Node.js:
OPENAI_API_KEY
OPENAI_API_KEY=blahblah- Import the frontend component
- Add backend functionality
- Add an environment file, e.g. .env.local
- Add environment variables to your deployment
- Deploy!
<PromoChat
promoData={undefined}
apiRoute="/api/sales"
inputMessagePlaceholder="What is my ad spend today?"
executeRecaptcha={executeRecaptcha}
/>Where executeRecaptcha is a function, e.g.
const executeRecaptcha = (actionName: string) =>
generateRecaptchaTokenString(actionName);The backend path given should accept a POST request with a JSON body containing
at least a message property.
A full example:
{
message: 'My user message',
promoData: {foo: bar, foo2: bar2},
userId: 'my-public-user-id',
token,
}Note:
tokenabove is only used if theuseRecaptchaproperty onPromoChatcomponent rendering istrue.
Just add the following classes to your tailwindcss or regular css. If
using tailwindcss, use an @apply directive.
Since the chat is expandable you will need to add some customization boilerplate
for the *-expanded ids below.
#promo-chat-button-not-clicked
#promo-chat-container
#promo-chat-window-container
#promo-chat-header-container
#promo-chat-header-text
#promo-chat-beta-label
#promo-chat-close-chat-button
#promo-chat-close-chat-icon
#promo-chat-latest-messages
#promo-chat-input-container
#promo-chat-input-only-container
#promo-chat-text-input
#promo-chat-input-submit-button
#promo-chat-user-message-display
#promo-chat-assistant-message-display
#promo-chat-error-message-display
#promo-chat-container-expanded
#promo-chat-window-container-expanded
#promo-chat-latest-messages-expanded
#promo-chat-input-only-container-expanded
#promo-chat-text-input-expanded
#promo-chat-input-submit-button-expanded
#promo-chat-header-container-expanded
#promo-chat-expand-button-icon
#promo-chat-shrink-button-icon
Blockquotes in the default @tailwindcss/typography component have " around
them. If you'd like to remove those for your chat component, simply extend the
typography directive within your tailwind.config.js file. For example:
typography: {
'quoteless-promo-chat': {
css: {
'blockquote p:first-of-type::before': { content: 'none' },
'blockquote p:first-of-type::after': { content: 'none' },
},
},
},The className prose-quoteless-promo-chat will automatically be activated.
In fact, you can make this blockquote do whatever you'd like and we'll render
it.
The below customizations are an example of how to change the colors of the chat interface and button to your own liking.
#promo-chat-button-not-clicked {
@apply fixed bottom-10 right-10 z-[90] flex h-16 w-16 animate-wave items-center justify-center rounded-full bg-red-900 text-2xl text-slate-50 shadow-lg transition duration-300 ease-in-out hover:scale-105 hover:bg-red-800 hover:shadow-xl dark:bg-red-100 dark:text-red-900 hover:dark:bg-red-200;
}
#promo-chat-container {
@apply fixed bottom-0 z-[90] w-full select-none sm:bottom-6 sm:right-6 sm:w-96;
}
#promo-chat-window-container {
@apply w-full max-w-lg rounded-lg bg-white shadow-md;
}
#promo-chat-header-container {
@apply flex items-center justify-between rounded-t-lg border-b bg-red-800 p-4 text-white;
}
#promo-chat-header-text {
@apply text-lg font-semibold;
}
#promo-chat-close-chat-button {
@apply z-[90] text-red-50 hover:text-red-200 focus:text-red-200 focus:outline-red-200 focus:ring-2 focus:ring-inset focus:ring-red-200;
}
#promo-chat-close-chat-icon {
@apply z-[90] h-6 w-6 text-red-50 hover:text-red-200 focus:text-red-200 focus:outline-none;
}
#promo-chat-latest-messages {
@apply h-80 overflow-y-auto p-4;
}
#promo-chat-input-container {
@apply flex flex-col items-center border-t px-3 py-4 sm:flex-row;
}
#promo-chat-input-only-container {
@apply w-full sm:max-w-xs;
}
#promo-chat-text-input {
@apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-red-600 sm:text-sm sm:leading-6;
}
#promo-chat-input-submit-button {
@apply mt-3 w-full items-center justify-center rounded-md bg-red-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 sm:ml-3 sm:mt-0 sm:w-auto sm:flex-row;
}
#promo-chat-user-message-display {
@apply inline-block rounded-lg bg-red-700 px-4 py-2 text-white;
}
#promo-chat-assistant-message-display {
@apply inline-block rounded-lg bg-gray-200 px-4 py-2 text-gray-700;
}
#promo-chat-container-expanded {
@apply fixed bottom-0 w-screen h-full z-[90] p-4;
}
#promo-chat-window-container-expanded {
@apply w-full h-full rounded-lg bg-white shadow-md;
}
#promo-chat-latest-messages-expanded {
@apply h-3/4 sm:h-5/6 overflow-y-auto p-4;
}
#promo-chat-input-only-container-expanded {
@apply w-full sm:w-3/4 xl:w-5/6;
}
#promo-chat-text-input-expanded {
@apply inline-flex w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-red-600 sm:text-sm sm:leading-6;
}
#promo-chat-input-submit-button-expanded {
@apply mt-3 w-full items-center justify-center rounded-md bg-red-700 px-6 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 sm:ml-3 sm:mt-0 sm:w-1/4 sm:flex-row xl:mx-10 xl:w-1/6;
}
#promo-chat-header-container-expanded {
@apply flex items-center justify-between rounded-t-lg border-b bg-red-800 p-4 text-white;
}
#promo-chat-expand-button-icon {
@apply h-6 w-6 text-red-50 hover:text-red-200 focus:text-red-200 focus:outline-none z-[90];
}
#promo-chat-shrink-button-icon {
@apply h-6 w-6 text-blue-50 hover:text-blue-200 focus:text-blue-200 focus:outline-none z-[90] mr-4;
}- Documentation: tincre.dev/docs
- Guides and how-tos: tincre.dev/docs/guides
- Reference docs: tincre.dev/docs/reference
- Community: community.tincre.dev
This code is free to use for your commercial or personal projects. It is open-source licensed under the Mozilla Public License 2.0.
You will see various headers throughout the codebase and can reference the license directly via LICENSE herein.
We use npm for releases. In particular, we use
npm --publish to publish.
Currently, only @thinkjrs has the ability to release.
Prior to using npm --publish a release tag needs to be created for
the library using our standard tagging practices.
Ensure that tests ✅ pass during this process prior to releasing via npm.
To do a proper release, ensure you're in the base repo directory and run
npm publish . --access public --dry-run.
To complete a full release to the latest npm dist-tag, ensure you're in
the base repo directory and run npm publish . --access public.
🎉 That's it! 🎉