@waii-ai/widgets

Waii Widgets

A collection of React UI components featuring the WaiiChat widget, which provides embedded chat functionality powered by Waii's text-to-SQL API.

Features

• 🚀 Easy to integrate with multiple implementation options
• 💅 Customizable themes and styling
• 📱 Mobile-responsive
• 🔒 TypeScript support
• ⚡ Lightweight
• 🎯 Three integration methods: React Component, Standalone Script, or iFrame Embed

Installation

# Using npm
npm install @waii-ai/widgets

# Using yarn
yarn add @waii-ai/widgets

# Using pnpm
pnpm add @waii-ai/widgets

Integration Methods

1. React Component

import { WaiiChat } from '@waii-ai/widgets';

function App() {
  return (
    <WaiiChat 
      apiKey="your-api-key"
      databaseKey="your-database-key"
      theme="light"
      handleChatResponse={(response) => {
        console.log('Chat response:', response);
      }}
    />
  );
}

2. Standalone Script

<script src="https://unpkg.com/@waii-ai/widgets/dist/waii-widgets.js"></script>

<div id="waii-chat"></div>
<script>
  WaiiWidgets.WaiiChatLoader.init({
    containerId: 'waii-chat',
    apiKey: 'your-api-key',
    databaseKey: 'your-database-key',
    theme: 'light',
    onMessage: (message) => console.log('New message:', message)
  });
</script>

3. iFrame Embed

<script src="https://unpkg.com/@waii-ai/widgets/dist/embed.js"></script>

<div id="chat-container"></div>
<script>
  const chatWidget = new WaiiWidgets.WaiiChatEmbed('#chat-container', {
    apiKey: 'your-api-key',
    databaseKey: 'your-database-key',
    theme: 'light',
    onChatResponse: (response) => {
      console.log('Chat response:', response);
    }
  });
</script>

Configuration Options

Core Properties

Property	Type	Required	Description
apiKey	string	Yes	Your Waii API key
databaseKey	string	Yes	Your database connection string
apiUrl	string	No	Custom API endpoint (if different from default)
theme	'light' | 'dark'	No	Widget theme (default: 'light')

Styling Options

Property	Type	Description
className	string	CSS class for the container
style	React.CSSProperties	Inline styles for the container
contentStyle	React.CSSProperties	Styles for the content area
messageListStyle	React.CSSProperties	Styles for the message list
inputStyle	React.CSSProperties	Styles for the input area

Branding Options

Property	Type	Description
botName	string	Custom name for the chat bot
botAvatarUrl	string	Custom avatar URL for the bot

AI Configuration

Property	Type	Description
useFewShotLearning	boolean	Enable few-shot learning
useReflection	boolean	Enable reflection capabilities
useStrictHallucinationCheck	boolean	Enable strict hallucination checking
model	string	Specify the AI model to use

Callback Functions

Property	Type	Description
handleChatResponse	(response: any) => void	Called when a chat response is received
handleReset	() => void	Called when the chat is reset
handleEditChat	Function	Called when a chat message is edited
onQueryProcessed	() => void	Called when a query is processed

State Management

Property	Type	Description
chatHistoryList	any[]	Pre-populate chat with history
selectedDBConnector	any	Set the selected database connector
chatQueryEdited	string | null	Pre-set edited query
chatAskEdited	string | null	Pre-set edited question

Development

# Install dependencies
npm install

# Build for production
npm run build

# Run tests
npm run test

Support

For issues and feature requests, please contact Waii support.