npm package: @knowlayer/rag-widgets
Description: Plug-and-play RAG chat widgets for any React app — by KnowLayer
Author: KnowLayer
Latest version: 1.1.0

# @knowlayer/rag-widgets

Plug-and-play RAG chat widgets for any React app — by **KnowLayer**.

Drop an AI-powered chat assistant into your product in under 5 minutes. Connect it to any KnowLayer RAG backend and let your users ask questions against your knowledge base.

## Installation

```bash
npm install @knowlayer/rag-widgets
# or
pnpm add @knowlayer/rag-widgets
# or
yarn add @knowlayer/rag-widgets
```

> **Peer dependencies:** `react` ≥ 18 and `react-dom` ≥ 18

## Widgets

| Widget | Description |
|--------|-------------|
| `<FloatingChat />` | Floating bubble button that opens a chat popup — great for support overlays |
| `<EmbeddedChat />` | Inline chat panel that fits inside any container |
| `<SearchWidget />` | Single-question search box with answer + sources |

## Quick Start

### Floating Chat (overlay bubble)

```tsx
import { FloatingChat } from "@knowlayer/rag-widgets";

function App() {
  return (
    <FloatingChat
      apiUrl="https://your-api.example.com"
      clientId="your-client-id"
      clientSecret="your-client-secret"
    />
  );
}
```

### Embedded Chat (inline panel)

```tsx
import { EmbeddedChat } from "@knowlayer/rag-widgets";

function App() {
  return (
    <EmbeddedChat
      apiUrl="https://your-api.example.com"
      clientId="your-client-id"
      clientSecret="your-client-secret"
      title="Ask our docs"
      height="600px"
      theme="dark"
    />
  );
}
```

### Search Widget (one-shot Q&A)

```tsx
import { SearchWidget } from "@knowlayer/rag-widgets";

function App() {
  return (
    <SearchWidget
      apiUrl="https://your-api.example.com"
      clientId="your-client-id"
      clientSecret="your-client-secret"
      placeholder="Search the knowledge base…"
    />
  );
}
```

## Props

### Common Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `apiUrl` | `string` | Yes | Base URL of your KnowLayer RAG API |
| `clientId` | `string` | Yes | OAuth client ID for authentication |
| `clientSecret` | `string` | Yes | OAuth client secret for authentication |
| `theme` | `"light" \| "dark"` | No | Color theme (default: `"light"`) |
| `placeholder` | `string` | No | Input placeholder text |

### FloatingChat Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `"KnowLayer Assistant"` | Chat window title |
| `welcomeMessage` | `string` | — | Initial greeting message |
| `position` | `"bottom-right" \| "bottom-left"` | `"bottom-right"` | Bubble position |
| `buttonSize` | `number` | — | Size of the floating button in px |
| `popupWidth` | `string` | — | Width of the chat popup |
| `popupHeight` | `string` | — | Height of the chat popup |
| `suggestedQuestions` | `string[]` | — | Pre-defined question chips |

### EmbeddedChat Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `"KnowLayer Assistant"` | Chat panel title |
| `welcomeMessage` | `string` | — | Initial greeting message |
| `height` | `string` | `"500px"` | Panel height |
| `className` | `string` | — | Additional CSS class |
| `suggestedQuestions` | `string[]` | — | Pre-defined question chips |

## TypeScript

All components and prop interfaces are fully typed and exported:

```ts
import type {
  FloatingChatProps,
  EmbeddedChatProps,
  SearchWidgetProps,
  ChatSource,
} from "@knowlayer/rag-widgets";
```

## License

MIT