test-chat-component-per

v1.1.1

Published

23 days ago

AI Chat Web Component - Universal chat component for web applications

Downloads

302

0High
0Medium
0Low

lokeshthakur

web-component custom-element chat ai webcomponent shadow-dom framework-agnostic chat-ui ai-chat

DelaChat Web Component

A universal AI chat component for Deltek PPM applications. Built as a standard Web Component, it works seamlessly across all frameworks and platforms.

Features

✅ Framework Agnostic - Works with React, Vue, Angular, or vanilla JavaScript
✅ Shadow DOM Encapsulation - Styles don't leak or conflict
✅ Zero Dependencies - Pure Web Standards (Custom Elements API)
✅ TypeScript Support - Includes type definitions
✅ Responsive - Works on desktop and mobile
✅ Session Management - Integrates with PPM.Auth sessions
✅ Event-Driven - Listen to messages, errors, and state changes

Installation

NPM

npm install chat-component

CDN

<script src="https://cdn.company.com/delachat/v1.0.0/delachat-webcomponent.min.js"></script>

Quick Start

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
    <script src="node_modules/chat-component/dist/delachat-webcomponent.min.js"></script>
</head>
<body>
    <dela-chat
        api-url="https://api.company.com"
        session-uid="your-session-uid"
        datasource="EPMSCA"
        product-id="200"
        token="your-token">
    </dela-chat>

    <script>
        const chat = document.querySelector('dela-chat');

        chat.addEventListener('message-sent', (e) => {
            console.log('User sent:', e.detail.message);
        });

        chat.addEventListener('message-received', (e) => {
            console.log('AI replied:', e.detail.message);
        });
    </script>
</body>
</html>

React

import 'chat-component';
import { useRef, useEffect } from 'react';

function ChatWidget({ sessionUid, token }) {
    const chatRef = useRef(null);

    useEffect(() => {
        const chat = chatRef.current;

        const handleMessage = (e) => {
            console.log('Message sent:', e.detail.message);
        };

        chat.addEventListener('message-sent', handleMessage);
        return () => chat.removeEventListener('message-sent', handleMessage);
    }, []);

    return (
        <dela-chat
            ref={chatRef}
            api-url="https://api.company.com"
            session-uid={sessionUid}
            datasource="EPMSCA"
            product-id="200"
            token={token}
        />
    );
}

Vue

<template>
    <dela-chat
        :api-url="apiUrl"
        :session-uid="sessionUid"
        :datasource="datasource"
        :product-id="productId"
        :token="token"
        @message-sent="handleMessageSent"
    />
</template>

<script>
import 'chat-component';

export default {
    props: ['sessionUid', 'token'],
    data() {
        return {
            apiUrl: 'https://api.company.com',
            datasource: 'EPMSCA',
            productId: 200
        };
    },
    methods: {
        handleMessageSent(e) {
            console.log('Sent:', e.detail.message);
        }
    }
};
</script>

Angular

import { Component, ViewChild, ElementRef, AfterViewInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import 'chat-component';

@Component({
    selector: 'app-chat',
    template: `
        <dela-chat #chat
            [attr.api-url]="apiUrl"
            [attr.session-uid]="sessionUid"
            [attr.datasource]="datasource"
            [attr.product-id]="productId"
            [attr.token]="token">
        </dela-chat>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ChatComponent implements AfterViewInit {
    @ViewChild('chat') chatElement: ElementRef;

    apiUrl = 'https://api.company.com';
    sessionUid = 'session-123';
    datasource = 'EPMSCA';
    productId = 200;
    token = 'token-456';

    ngAfterViewInit() {
        const chat = this.chatElement.nativeElement;
        chat.addEventListener('message-sent', (e: any) => {
            console.log('Sent:', e.detail.message);
        });
    }
}

API Reference

Attributes

| Attribute | Type | Required | Description | |-----------|------|----------|-------------| | api-url | string | Yes | API base URL | | session-uid | string | Yes | PPM.Auth session UID | | datasource | string | Yes | Datasource name | | product-id | number | Yes | Product ID (e.g., 200) | | token | string | Yes | Verification token | | theme | 'light' | 'dark' | No | Color theme (default: 'light') | | height | string | No | Component height (default: '600px') | | width | string | No | Component width (default: '100%') |

Methods

const chat = document.querySelector('dela-chat');

// Send a message programmatically
await chat.sendMessage('Hello AI!');

// Open chat
chat.open();

// Close chat
chat.close();

// Clear history
chat.clearHistory();

// Reload history from server
await chat.loadHistory();

Events

const chat = document.querySelector('dela-chat');

// Component is ready
chat.addEventListener('ready', () => {
    console.log('Chat ready');
});

// User sent a message
chat.addEventListener('message-sent', (e) => {
    console.log('User sent:', e.detail.message);
});

// AI sent a response
chat.addEventListener('message-received', (e) => {
    console.log('AI replied:', e.detail.message);
});

// An error occurred
chat.addEventListener('error', (e) => {
    console.error('Error:', e.detail.error);
});

// Chat was closed
chat.addEventListener('close', () => {
    console.log('Chat closed');
});

WinForms / WPF Integration

using Microsoft.Web.WebView2.WinForms;

public class ChatForm : Form
{
    private WebView2 webView;

    private async void LoadChat()
    {
        webView = new WebView2 { Dock = DockStyle.Fill };
        this.Controls.Add(webView);

        await webView.EnsureCoreWebView2Async();

        // Load HTML with component
        string html = @"
            <!DOCTYPE html>
            <html>
            <head>
                <script src='https://cdn.company.com/delachat/v1.0.0/delachat-webcomponent.min.js'></script>
            </head>
            <body style='margin: 0'>
                <dela-chat id='chat'
                    api-url='https://api.company.com'
                    datasource='EPMSCA'
                    product-id='200'
                    height='100vh'>
                </dela-chat>
            </body>
            </html>";

        webView.NavigateToString(html);

        // Set session after load
        webView.NavigationCompleted += async (s, e) =>
        {
            await webView.ExecuteScriptAsync($@"
                const chat = document.getElementById('chat');
                chat.setAttribute('session-uid', '{sessionUid}');
                chat.setAttribute('token', '{token}');
            ");
        };
    }
}

Browser Support

Chrome/Edge 79+
Firefox 63+
Safari 12.1+
Opera 66+

All modern browsers that support Custom Elements v1 and Shadow DOM.

License

Support

For issues and questions, contact Deltek support or file an issue in the repository.