Markprompt React

The Chatjet-ai React component is a headless component that offers you a simple, accessible and fully customizable way to add a prompt UI to your React applications. It is based off of Radix UI's Dialog component, and presents a similar API.

Installation

Install the @chatjet-ai/react package via NPM or Yarn:

# NPM
npm install @chatjet-ai/react
# Yarn
yarn add @chatjet-ai/react

Usage

Example:

import { Markprompt } from '@chatjet-ai/react';
import { ChatIcon, CloseIcon, SearchIcon, Caret } from './icons';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { useContext } from 'react';

function Component() {
  return (
    <Markprompt.Root projectKey="<your-markprompt-project-key>">
      <Markprompt.DialogTrigger
        aria-label="Open Markprompt"
        className="MarkpromptButton"
      >
        <ChatIcon className="MarkpromptIcon" />
      </Markprompt.DialogTrigger>
      <Markprompt.Portal>
        <Markprompt.Overlay className="MarkpromptOverlay" />
        <Markprompt.Content className="MarkpromptContent">
          <Markprompt.Close className="MarkpromptClose">
            <CloseIcon />
          </Markprompt.Close>

          {/* Markprompt.Title is required for accessibility reasons. It can be hidden using an accessible content hiding technique. */}
          <VisuallyHidden asChild>
            <Markprompt.Title>
              Ask me anything about Markprompt
            </Markprompt.Title>
          </VisuallyHidden>

          {/* Markprompt.Description is included for accessibility reasons. It is optional and can be hidden using an accessible content hiding technique. */}
          <VisuallyHidden asChild>
            <Markprompt.Description>
              I can answer your questions about Markprompt's client-side
              libraries, onboarding, API's and more.
            </Markprompt.Description>
          </VisuallyHidden>

          <Markprompt.Form>
            <SearchIcon className="MarkpromptSearchIcon" />
            <Markprompt.Prompt
              className="MarkpromptPrompt"
              placeholder="Ask me anything…"
            />
          </Markprompt.Form>

          <Markprompt.AutoScroller className="MarkpromptAnswer">
            <Caret />
            <Markprompt.Answer />
          </Markprompt.AutoScroller>

          <References />
        </Markprompt.Content>
      </Markprompt.Portal>
    </Markprompt.Root>
  );
}

const capitalize = (text: string) => {
  return text.charAt(0).toUpperCase() + text.slice(1);
};

const removeFileExtension = (fileName: string) => {
  const lastDotIndex = fileName.lastIndexOf('.');
  if (lastDotIndex === -1) {
    return fileName;
  }
  return fileName.substring(0, lastDotIndex);
};

const Reference = ({
  referenceId,
  index,
}: {
  referenceId: string,
  index: number,
}) => {
  return (
    <li
      key={referenceId}
      className="reference"
      style={{
        animationDelay: `${100 * index}ms`,
      }}
    >
      <a href={removeFileExtension(referenceId)}>
        {capitalize(removeFileExtension(referenceId.split('/').slice(-1)[0]))}
      </a>
    </li>
  );
};

const References = () => {
  const { state, references } = useContext(Markprompt.Context);

  if (state === 'indeterminate') return null;

  let adjustedState: string = state;
  if (state === 'done' && references.length === 0) {
    adjustedState = 'indeterminate';
  }

  return (
    <div data-loading-state={adjustedState} className={styles.references}>
      <div className={styles.progress} />
      <p>Fetching relevant pages…</p>
      <p>Answer generated from the following sources:</p>
      <Markprompt.References RootElement="ul" ReferenceElement={Reference} />
    </div>
  );
};

replacing <projectKey> with the key associated to your project. It can be obtained in the project settings under "Project key".

API

<Answer />

Render the markdown answer from the Markprompt API. It accepts the same props as react-markdown, except children.

<AutoScroller />

A component automatically that scrolls to the bottom. It accepts the following props:

• autoScroll (boolean): Whether or not to enable automatic scrolling. (Default: true)
• scrollBehaviour (string): The behaviour to use for scrolling. (Default: smooth)

All other props will be passed to the underlying <div> element.

<Close />

A button to close the Markprompt dialog and abort an ongoing request. It accepts the same props as Radix UI Dialog.Close.

<Content />

The Markprompt dialog content. It accepts the same props as Radix UI Dialog.Content, with the following additional prop:

• showBranding (boolean): Show the Markprompt footer.

<Description />

A visually hidden aria description. It accepts the same props as Radix UI Dialog.Description, with the following additional prop:

• hide (boolean): Hide the description.

<Form />

A form which, when submitted, submits the current prompt. It accepts the same props as <form>.

<Overlay />

The Markprompt dialog overlay. It accepts the same props as Radix UI Dialog.Overlay.

<Portal />

The Markprompt dialog portal. It accepts the same props as Radix UI Dialog.Portal.

<Prompt />

The Markprompt input prompt. User input will update the prompt in the Markprompt context. It accepts the following props:

• label (ReactNode): The label for the input.
• labelClassName (string): The class name of the label element.

<References />

Render the references that Markprompt returns. It accepts the following props:

• RootComponent (Component): The wrapper component to render. (Default: 'ul')
• ReferenceComponent (Component): The component to render for each reference. (Default: 'li')

<Root />

The Markprompt context provider and dialog root. It accepts the Radix UI Dialog.Root props and the useMarkpromptoptions as props.

<Title />

A visually hidden aria title. It accepts the same props as Radix UI Dialog.Title, with the following additional prop:

• hide (boolean): Hide the title.

<Trigger />

A button to open the Markprompt dialog. It accepts the same props as Radix UI Dialog.Trigger.

useMarkprompt(options)

Create an interactive stateful Markprompt prompt. It takes the same options as submitPrompt(), and the project key.

Documentation

The full documentation for the component can be found on the Markprompt docs.

Starter Template

For a working setup based on Next.js + Tailwind, check out the Markprompt starter template.

Community

• Twitter @chatjet-ai
• Discord

Authors

This library is created by the team behind Chatjet-ai (@chatjet-ai).

License

MIT © Motif