# @chatjet-ai/web

> A web component for adding GPT-4 powered search using the Markprompt API.

Latest version **0.5.3** (published 2023-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chatjet-ai/web
pnpm add @chatjet-ai/web
yarn add @chatjet-ai/web
bun add @chatjet-ai/web
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.3 |
| Published | 2023-06-19 |
| First published | 2023-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 3.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Markprompt |
| Maintainers | chatjet-ai |

## Links

- npm: https://www.npmjs.com/package/@chatjet-ai/web
- Repository: https://github.com/motifland/markprompt-js
- Homepage: https://github.com/motifland/markprompt-js#readme
- Issues: https://github.com/motifland/markprompt-js/issues
- npm.io page: https://npm.io/package/@chatjet-ai/web

## Dependencies (6)

- [clsx](https://npm.io/package/clsx.md) ^1.2.1
- [use-presence](https://npm.io/package/use-presence.md) ^1.2.0
- [transition-hook](https://npm.io/package/transition-hook.md) ^1.5.2
- [@chatjet-ai/core](https://npm.io/package/@chatjet-ai/core.md) 0.5.0
- [@react-spring/web](https://npm.io/package/@react-spring/web.md) ^9.7.2
- [react-simple-animate](https://npm.io/package/react-simple-animate.md) ^3.5.2

## Recent versions

- 0.5.3 (latest) — 2023-06-19
- 0.5.1 — 2023-06-17
- 0.5.0 — 2023-06-17

## README

# `@chatjet-ai/web`

A prebuilt version of the Markprompt dialog, based on `@chatjet-ai/react`, built with Preact for bundle-size savings. Viable for use from vanilla JavaScript or any framework.

<br />
<p align="center">
  <a aria-label="NPM version" href="https://www.npmjs.com/package/markprompt">
    <img alt="" src="https://badgen.net/npm/v/markprompt">
  </a>
  <a aria-label="License" href="https://github.com/motifland/markprompt/blob/main/LICENSE">
    <img alt="" src="https://badgen.net/npm/license/markprompt">
  </a>
  <a aria-label="Coverage" href="https://app.codecov.io/gh/motifland/markprompt-js/tree/main/packages%2Fweb">
    <img alt="" src="https://codecov.io/gh/motifland/markprompt-js/branch/main/graph/badge.svg" />
  </a>
</p>

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [Usage via `<script>` tag](#usage-via-script-tag)
- [API](#api)
  - [`markprompt(projectKey, container, options?)`](#markpromptprojectkey-container-options)
    - [Arguments](#arguments)
    - [Options](#options)
- [Documentation](#documentation)
- [Community](#community)
- [Authors](#authors)
- [License](#license)

## Installation

Install the package from NPM:

```sh
npm add @chatjet-ai/web @chatjet-ai/css
```

## Usage

Include the CSS on your page, via a link tag or by importing it in your JavaScript:

```html
<!-- load from a CDN: -->
<link rel="stylesheet" href="https://esm.sh/@chatjet-ai/css@0.0.2?css" />
```

```js
import '@chatjet-ai/css';
```

Call the `markprompt` function with your project key:

```js
import { markprompt } from '@chatjet-ai/web';

const markpromptEl = document.querySelector('#markprompt');

markprompt('<project-key>', markpromptEl, {
  references: {
    transformReferenceId: (referenceId) => ({
      text: referenceId.replace('-', ' '),
      href: `/docs/${referenceId}`,
    }),
  },
});
```

where `project-key` can be obtained in your project settings on [chatjet](https://chatjet.co/).

Options are optional and allow you to configure the texts used in the component to some extent. You will most likely want to pass `transformReferenceId` to transform your reference ids into links to your corresponding documentation.

```ts
type Options = {
  /** Props for the close modal button */
  close?: {
    /** Aria-label for the close modal button */
    label?: string;
  };
  /** Props for the description */
  description?: {
    /** Whether to hide the description, default: `true` */
    hide?: boolean;
    /** Text for the description */
    text?: string;
  };
  /** Props for the prompt */
  prompt?: {
    /** Label for the prompt input, default: `Ask me anything…` */
    label?: string;
    /** Placeholder for the prompt input, default: `Ask me anything…` */
    placeholder?: string;
  };
  references?: {
    /** Callback to transform a reference id into an href and text */
    transformReferenceId?: (referenceId: string) => {
      href: string;
      text: string;
    };
    /** Loading text, default: `Fetching relevant pages…` */
    loadingText?: string;
    /** References title, default: `Answer generated from the following sources:` */
    referencesText?: string;
  };
  search?: {
    /** Enable search **/
    enable?: boolean;
    /** Callback to transform a search result into an href */
    getResultHref?: (result: FlattenedSearchResult) => string;
  };
  /** Props for the trigger */
  trigger?: {
    /** Aria-label for the trigger button */
    label?: string;
  };
  /** Props for the title */
  title?: {
    /** Whether to hide the title, default: `true` */
    hide?: boolean;
    /** Text for the title: default `Ask me anything` */
    text?: string;
  };
};
```

Styles are easily overridable for customization via targeting classes. Additionally, see the [styling section](https://markprompt.com/docs#styling) in our documentation for a full list of variables.

## Usage via `<script>` tag

Besides initializing the Markprompt component yourselves from JavaScript, you can load the script from a CDN. You can attach the options for the Markprompt component to the window prior to loading our script:

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@chatjet-ai/css@0.1.1/markprompt.css"
/>
<script>
  window.markprompt = {
    projectKey: `<your-project-key>`,
    container: `#markprompt`,
    options: {
      references: {
        transformReferenceId: (referenceId) => ({
          text: referenceId.replace('-', ' '),
          href: `/docs/${referenceId}`,
        }),
      },
    },
  };
</script>
<script
  async
  src="https://unpkg.com/@chatjet-ai/web@0.4.1/dist/init.js"
></script>
```

## API

### `markprompt(projectKey, container, options?)`

Render a Markprompt dialog button.

#### Arguments

- `projectKey` (`string`): Your Markprompt project key.
- `container` (`HTMLElement | string`): The element or selector to render Markprompt into.
- `options` (`object`): Options for customizing Markprompt.

#### Options

- `completionsUrl` (`string`): URL at which to fetch completions
- `iDontKnowMessage` (`string`): Message returned when the model does not have an answer
- `model` (`OpenAIModelId`): The OpenAI model to use
- `promptTemplate` (`string`): The prompt template
- `temperature` (`number`): The model temperature
- `topP` (`number`): The model top P
- `frequencyPenalty` (`number`): The model frequency penalty
- `presencePenalty` (`number`): The model present penalty
- `maxTokens` (`number`): The max number of tokens to include in the response
- `sectionsMatchCount` (`number`): The number of sections to include in the prompt context
- `sectionsMatchThreshold` (`number`): The similarity threshold between the input question and selected sections
- `signal` (`AbortSignal`): AbortController signal
- `close.label` (`string`): `aria-label` for the close modal button. (Default: `"Close Markprompt"`)
- `decription.hide` (`boolean`): Visually hide the description. (Default `true`)
- `decription.text` (`string`): Description text.
- `prompt.label` )`string`): Label for the prompt input. (Default `"Your prompt"`)
- `prompt.placeholder` )`string`): Placeholder for the prompt input. (Default `"Ask me anything…"`)
- `references.transformReferenceId` (`Function`): Callback to transform a reference id into an href and text.
- `references.loadingText` (`string`) Loading text. (Default: `Fetching relevant pages…`)
- `references.referencesText` (`string`): References title. (Default: `"Answer generated from the following sources:"`)
- `trigger.label` (`string`): `aria-label` for the open button. (Default: `"Open Markprompt"`)
- `title.hide` (`boolean`): Visually hide the title. (Default: `true`)
- `title.text` (`string`): Text for the title. (Default: `"Ask me anything"`)
- `showBranding` (`boolean`): Show Markprompt branding. (Default: `true`)

## Documentation

The full documentation for `@chatjet-ai/web` can be found on the [Markprompt docs](https://markprompt.com/docs#%40markprompt%2Fweb).

## Community

- [Twitter @chatjet-ai](https://twitter.com/markprompt)
- [Discord](https://discord.gg/MBMh4apz6X)

## Authors

This library is created by the team behind [Markprompt](https://markprompt.com)
([@chatjet-ai](https://twitter.com/markprompt)).

## License

[MIT](./LICENSE) © [Motif](https://motif.land)

---
_Source: https://npm.io/package/@chatjet-ai/web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._