@proactive-ai-lab/pal-web-widget
TypeScript icon, indicating that this package has built-in type declarations

1.2.6 • Public • Published

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';
  1. 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
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. 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

Readme

Keywords

none

Package Sidebar

Install

npm i @proactive-ai-lab/pal-web-widget

Weekly Downloads

100

Version

1.2.6

License

ISC

Unpacked Size

112 kB

Total Files

31

Last publish

Collaborators

  • myroslav_vozniak
  • renkelvin