Palona Web Widget

A React-based chat widget for integrating the Proactive AI Language (PAL) system into web applications. This widget provides a seamless chat interface for users to interact with PAL.

Features

• 🎨 Beautiful, modern UI with gradient backgrounds
• 💬 Real-time chat interface
• 🔄 Loading states and typing indicators
• 🎯 Message history management
• 🌈 Clean and responsive design
• 🔒 Secure API key handling

Installation

npm install @proactive-ai-lab/pal-web-widget@<INSERT_VERSION_HERE>
# or
yarn add @proactive-ai-lab/pal-web-widget@<INSERT_VERSION_HERE>

Environment Variables

Create a .env.local file in your project root and add:

NEXT_PUBLIC_PAL_PROJECT_NAME=your_project_name
NEXT_PUBLIC_PAL_API_URL=palona_api_url_here
NEXT_PUBLIC_PAL_API_KEY=your_api_key_here

Usage

1. Import the widget with the following line at the top of your file:

import { PalWebWidget } from '@proactive-ai-lab/pal-web-widget';

2. Add it to your React component:

<div id="Your Component">
  <PalWebWidget
    userId="Insert User Here"
    apiKey="Insert API Key Here"
    projectName="Insert Project Name Here"
    initialMessage="" // optional
    loadingMessage="" // optional
    context="" // optional
    showIntroVideo={false} // optional
    borderStyle="2px solid rgba(0, 0, 0, 0.15)" // optional
  />
</div>

Your code should look similar to the following:

import "./styles.css";
import { PalWebWidget } from '@proactive-ai-lab/pal-web-widget';

export default function App() {
  return (
      <div id="Your Component">
        <PalWebWidget
          userId="Insert User Here"
          apikey="Insert API Key Here"
          projectName="Insert Project Name Here"
      />
    </div>
  );
}

For more info for PAL members, see this following article: https://www.notion.so/proactiveailab/Web-SDK-Installation-Guide-1578c0822e498054a82bc6afefdd46e2

Props

The widget accepts the following props:

| Prop | Type | Required | Description | |----------------|---------|----------|--------------------------------------------| | apiKey | string | Yes | Your PAL API key for authentication | | userId | string | Yes | Identifier for the current user | | projectName | string | Yes | Identifier for your business' custom agent | | initialMessage | string | No | Your custom initial message | | loadingMessage | string | No | Your custom loading message | | context | string | No | Agent context | | showIntroVideo | boolean | No | | | borderStyle | string | No | Border style |

Development

1. Clone the repository:

git clone this-repo

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Build for production:

npm run build

Project Structure

pal-sdk-web/
├── app/                   # Next.js app directory
│   ├── page.tsx           # Demo page
│   └── layout.tsx         # Root layout
├── components/            # React components
│   ├── chat/              # Chat-related components
│   └── pal-web-widget.tsx # Main widget component
├── lib/                   # Utility functions
├── hooks/                 # Custom React hooks
└── types/                 # TypeScript type definitions