Clappit Chat Element

A customizable chat interface web component for Clappit's agentic workflow engine. This component can be used with any web framework or vanilla JavaScript.

Installation

npm install @clappit/chat-element

Usage

Vanilla JavaScript/HTML

<script src="node_modules/@clappit/chat-element/dist/clappit-element/clappit-chat.js"></script>
<link rel="stylesheet" href="node_modules/@clappit/chat-element/dist/clappit-element/clappit-chat.css">

<clappit-chat
  title="Chat with Agent"
  primary-color="#007bff"
  secondary-color="#6c757d"
  accent-color="#28a745"
  background-color="#ffffff"
  text-color="#212529"
  font-family="Arial"
  api-endpoint="https://your-api-endpoint.com"
></clappit-chat>

React

import { ClappitChat } from '@clappit/chat-element/react';
import '@clappit/chat-element/dist/clappit-element/clappit-chat.css';

function App() {
  return (
    <ClappitChat
      title="Chat with Agent"
      primaryColor="#007bff"
      secondaryColor="#6c757d"
      accentColor="#28a745"
      backgroundColor="#ffffff"
      textColor="#212529"
      fontFamily="Arial"
      apiEndpoint="https://your-api-endpoint.com"
      onMessageSent={(message) => console.log('Message sent:', message)}
      onMessageReceived={(message) => console.log('Message received:', message)}
      onError={(error) => console.error('Error:', error)}
    />
  );
}

Angular

// app.module.ts
import '@clappit/chat-element';
import '@clappit/chat-element/dist/clappit-element/clappit-chat.css';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ...
})
export class AppModule { }

// app.component.html
<clappit-chat
  [title]="'Chat with Agent'"
  [primary-color]="'#007bff'"
  [secondary-color]="'#6c757d'"
  [accent-color]="'#28a745'"
  [background-color]="'#ffffff'"
  [text-color]="'#212529'"
  [font-family]="'Arial'"
  [api-endpoint]="'https://your-api-endpoint.com'"
  (message-sent)="onMessageSent($event)"
  (message-received)="onMessageReceived($event)"
  (error)="onError($event)"
></clappit-chat>

Properties

| Property | Type | Description | |----------|------|-------------| | title | string | The title displayed in the chat window header | | primary-color | string | Primary color for the chat interface | | secondary-color | string | Secondary color for the chat interface | | accent-color | string | Accent color for highlights and buttons | | background-color | string | Background color of the chat window | | text-color | string | Color of the text content | | font-family | string | Font family for the chat interface | | api-endpoint | string | API endpoint for the chat service |

Events

| Event | Detail Type | Description | |-------|-------------|-------------| | message-sent | string | Fired when a message is sent by the user | | message-received | string | Fired when a message is received from the agent | | error | any | Fired when an error occurs |

Browser Support

This component uses Web Components and requires the following browser features:

• Custom Elements v1
• Shadow DOM v1
• ES2015 (ES6)

For older browsers, you may need to include polyfills.

Development

1. Clone the repository
2. Install dependencies: npm install
3. Start development server: npm start
4. Build: npm run build:element

License

MIT