@tincre/promo-chat NPM

promo-chat, by Tincre`.dev`

A chat component for Tincre Promo. Use it in conjunction with the promo-dashboard and other Promo integration applications.

promo-chat, by Tincre.dev

Installation

Use your favorite package manager to rock installation of promo-chat.

Yarn

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

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

Tailwindcss Setup

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.

Environment variables

You'll need the following environment variables available in Node.js:

OPENAI_API_KEY

`.env.local` Example

OPENAI_API_KEY=blahblah

Usage

Import the frontend component
Add backend functionality
Add an environment file, e.g. .env.local
Add environment variables to your deployment
Deploy!

Usage example

<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);

Backend functionality

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: token above is only used if the useRecaptcha property on PromoChat component rendering is true.

Customize styling

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

Tailwindcss Typography Extras

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.

Full CSS Customization Example

The below customizations are an example of how to change the colors of the chat interface and button to your own liking.

A good custom example is Tincre's b00st.com brand button.

#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;
}