isometrik-webchat

v5.0.1

Published

22 days ago

Stencil Component Starter

0High
0Medium
0Low

rounit08

appscrip_technologies

🚀 Isometrik WebChat

A powerful, feature-rich, real-time chat web component library built with Stencil. Isometrik WebChat provides a complete chat solution with support for messaging, group conversations, media sharing, reactions, and much more - all packaged as framework-agnostic web components

✨ Features

💬 Core Messaging

Real-time Communication - MQTT-based instant messaging
Group Conversations - Create and manage group chats
1-on-1 Chat - Direct messaging between users
Message Reactions - React to messages with emojis
Message Search - Search through conversation history
Typing Indicators - See when someone is typing

📁 Media & Content

File Sharing - Send and receive files
Image & Video Support - Share multimedia content
Audio Recording - Record and send voice messages
Video Recording - Record and share video messages
QR Code Support - Generate and scan QR codes
Emoji Picker - Rich emoji selection

🎨 Theming & Customization

Light/Dark Mode - Built-in theme switching
Custom Themes - Apply your own custom themes
Theme Provider - Centralized theme management
CSS Variables - Easy customization via CSS

👥 User Management

User Profiles - View and manage user profiles
Contact Information - Access contact details
Group Members - Manage group participants
Membership Control - Add/remove members

📱 Responsive Design

Mobile Optimized - Full mobile support
Desktop Experience - Rich desktop interface
Adaptive Layouts - Responsive to screen sizes
Touch Friendly - Optimized for touch devices

🔔 Additional Features

Unread Count - Track unread messages
Groupcast - Broadcast messages to groups
Message Filtering - Filter conversations
Chat Sidebar - Organized conversation list
Link Preview - Preview shared links
Read Receipts - Message delivery status

📦 Installation

Via NPM

npm install isometrik-webchat

Via Yarn

yarn add isometrik-webchat

Via CDN

<script type="module" src="https://unpkg.com/isometrik-webchat@latest/dist/isometrik-webchat/isometrik-webchat.esm.js"></script>

🚀 Quick Start

1. Using the Initialization Function

The simplest way to get started is using the initializeChat function:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Chat App</title>
</head>
<body>
  <div id="chat-container" style="width: 100%; height: 100vh;"></div>

  <script type="module">
    import { initializeChat } from 'https://unpkg.com/isometrik-webchat@latest/dist/isometrik-webchat/isometrik-webchat.esm.js';

    initializeChat({
      // Required Configuration
      licenseKey: 'YOUR_LICENSE_KEY',
      appSecret: 'YOUR_APP_SECRET',
      userSecret: 'YOUR_USER_SECRET',
      userToken: 'YOUR_USER_TOKEN',
      isometrikUserId: 'USER_ID',
      projectId: 'YOUR_PROJECT_ID',
      keysetId: 'YOUR_KEYSET_ID',
      accountId: 'YOUR_ACCOUNT_ID',
      
      // Optional Configuration
      baseUrl: 'https://apis.isometrik.io',
      hostUrl: 'wss://connections.isometrik.io:2053/mqtt',
      defaultTheme: 'light', // 'light' or 'dark'
      containerId: 'chat-container',
      
    
    });
  </script>
</body>
</html>

2. Using Web Components Directly

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="module" src="https://unpkg.com/isometrik-webchat@latest/dist/isometrik-webchat/isometrik-webchat.esm.js"></script>
</head>
<body>
  <theme-provider mode="light" theme-path="path/to/theme.css">
    <web-chat
      license-key="YOUR_LICENSE_KEY"
      app-secret="YOUR_APP_SECRET"
      user-secret="YOUR_USER_SECRET"
      user-token="YOUR_USER_TOKEN"
      isometrik-user-id="USER_ID"
      project-id="YOUR_PROJECT_ID"
      keyset-id="YOUR_KEYSET_ID"
      account-id="YOUR_ACCOUNT_ID"
      default-theme="light"
      style="width: 100%; height: 100vh;">
    </web-chat>
  </theme-provider>
</body>
</html>

3. Using with React

import { useEffect } from 'react';
import { initializeChat } from 'isometrik-webchat';

function ChatApp() {
  useEffect(() => {
    initializeChat({
      licenseKey: 'YOUR_LICENSE_KEY',
      appSecret: 'YOUR_APP_SECRET',
      userSecret: 'YOUR_USER_SECRET',
      userToken: 'YOUR_USER_TOKEN',
      isometrikUserId: 'USER_ID',
      projectId: 'YOUR_PROJECT_ID',
      keysetId: 'YOUR_KEYSET_ID',
      accountId: 'YOUR_ACCOUNT_ID',
      containerId: 'chat-container',
      defaultTheme: 'light'
    });
  }, []);

  return <div id="chat-container" style={{ width: '100%', height: '100vh' }} />;
}

export default ChatApp;

4. Using with Vue

<template>
  <div id="chat-container" style="width: 100%; height: 100vh;"></div>
</template>

<script>
import { initializeChat } from 'isometrik-webchat';

export default {
  name: 'ChatApp',
  mounted() {
    initializeChat({
      licenseKey: 'YOUR_LICENSE_KEY',
      appSecret: 'YOUR_APP_SECRET',
      userSecret: 'YOUR_USER_SECRET',
      userToken: 'YOUR_USER_TOKEN',
      isometrikUserId: 'USER_ID',
      projectId: 'YOUR_PROJECT_ID',
      keysetId: 'YOUR_KEYSET_ID',
      accountId: 'YOUR_ACCOUNT_ID',
      containerId: 'chat-container',
      defaultTheme: 'light'
    });
  }
};
</script>

5. Using with Angular

import { Component, OnInit } from '@angular/core';
import { initializeChat } from 'isometrik-webchat';

@Component({
  selector: 'app-chat',
  template: '<div id="chat-container" style="width: 100%; height: 100vh;"></div>'
})
export class ChatComponent implements OnInit {
  ngOnInit() {
    initializeChat({
      licenseKey: 'YOUR_LICENSE_KEY',
      appSecret: 'YOUR_APP_SECRET',
      userSecret: 'YOUR_USER_SECRET',
      userToken: 'YOUR_USER_TOKEN',
      isometrikUserId: 'USER_ID',
      projectId: 'YOUR_PROJECT_ID',
      keysetId: 'YOUR_KEYSET_ID',
      accountId: 'YOUR_ACCOUNT_ID',
      containerId: 'chat-container',
      defaultTheme: 'light'
    });
  }
}

🎨 Theme Customization

Switch Between Light and Dark Themes

import { switchChatTheme } from 'isometrik-webchat';

// Switch to dark theme
switchChatTheme('dark');

// Switch to light theme
switchChatTheme('light');

Toggle Theme

import { toggleTheme } from 'isometrik-webchat';

// Toggle between light and dark
toggleTheme();

Apply Custom Theme

Using Theme URL

import { applyCustomTheme } from 'isometrik-webchat';

applyCustomTheme({
  themePath: 'https://your-domain.com/custom-theme.css'
});

Using Theme Object

import { applyCustomTheme } from 'isometrik-webchat';

applyCustomTheme({
  themeObject: {
    '--primary-color': '#007bff',
    '--secondary-color': '#6c757d',
    '--background-color': '#ffffff',
    '--text-color': '#212529',
    '--border-color': '#dee2e6'
  }
});

Custom Theme CSS Variables

Create your own theme by overriding CSS variables:

theme-provider {
  /* Colors */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  
  /* Backgrounds */
  --background-color: #ffffff;
  --sidebar-background: #f8f9fa;
  --chat-background: #ffffff;
  --message-bubble-sent: #007bff;
  --message-bubble-received: #e9ecef;
  
  /* Text */
  --text-color: #212529;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  
  /* Borders */
  --border-color: #dee2e6;
  --border-radius: 8px;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

🔧 API Reference

`initializeChat(config)`

Initializes the chat component with the provided configuration.

Parameters

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | licenseKey | string | ✅ | Your Isometrik license key | | appSecret | string | ✅ | Your application secret | | userSecret | string | ✅ | User secret for authentication | | userToken | string | ✅ | User authentication token | | isometrikUserId | string | ✅ | Unique user identifier | | projectId | string | ✅ | Your project ID | | keysetId | string | ✅ | Your keyset ID | | accountId | string | ✅ | Your account ID | | baseUrl | string | ❌ | API base URL (default: https://apis.isometrik.io) | | hostUrl | string | ❌ | MQTT host URL (default: wss://connections.isometrik.io:2053/mqtt) | | defaultTheme | 'light' | 'dark' | ❌ | Initial theme mode (default: 'light') | | themeUrl | string | ❌ | Custom theme CSS file URL | | containerId | string | ❌ | Container element ID (default: appends to body) | | leofferAccountId | string | ❌ | LeOffer account ID (if applicable) | | getPaymentsData | Function | ❌ | Callback for payment data | | handleBackButtonClick | Function | ❌ | Callback for back button clicks |

Returns

void

Example

initializeChat({
  licenseKey: 'xxx-xxx-xxx',
  appSecret: 'xxx-xxx-xxx',
  userSecret: 'xxx-xxx-xxx',
  userToken: 'xxx-xxx-xxx',
  isometrikUserId: 'user123',
  projectId: 'proj123',
  keysetId: 'key123',
  accountId: 'acc123',
  defaultTheme: 'dark',
  containerId: 'my-chat-container'
});

`switchChatTheme(theme)`

Switches the chat theme.

Parameters

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | theme | 'light' | 'dark' | ✅ | Theme to switch to |

Example

switchChatTheme('dark');

`toggleTheme()`

Toggles between light and dark themes.

Example

toggleTheme();

`applyCustomTheme(customTheme)`

Applies a custom theme to the chat.

Parameters

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | themePath | string | ❌ | URL to custom theme CSS file | | themeObject | object | ❌ | Object with CSS variable key-value pairs |

Example

applyCustomTheme({
  themePath: 'https://example.com/theme.css'
});

// OR

applyCustomTheme({
  themeObject: {
    '--primary-color': '#ff6b6b'
  }
});

`customChatSidebar(props)`

Customizes the chat sidebar behavior.

Parameters

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | isChatFilter | boolean | ❌ | Enable/disable chat filtering |

Example

import { customChatSidebar } from 'isometrik-webchat';

customChatSidebar({
  isChatFilter: true
});

📱 Component Properties

`<web-chat>` Component

| Property | Type | Default | Description | |----------|------|---------|-------------| | license-key | string | - | Your license key | | app-secret | string | - | App secret | | user-secret | string | - | User secret | | user-token | string | - | User token | | isometrik-user-id | string | - | User ID | | project-id | string | - | Project ID | | keyset-id | string | - | Keyset ID | | account-id | string | - | Account ID | | base-url | string | https://apis.isometrik.io | API base URL | | host-url | string | wss://connections.isometrik.io:2053/mqtt | MQTT URL | | default-theme | string | 'light' | Initial theme | | theme-url | string | - | Custom theme URL | | is-chat-filter | boolean | false | Enable chat filtering | | is-all-chat-button | boolean | true | Show all chat button | | is-sidebar-header-label | boolean | true | Show sidebar header | | sidebar-header-label | string | 'Inbox' | Sidebar header text |

`<theme-provider>` Component

| Property | Type | Default | Description | |----------|------|---------|-------------| | mode | 'light' | 'dark' | 'light' | Current theme mode | | theme-path | string | - | Path to theme CSS file |

🎯 Events

Unread Message Count Updated

Listen to changes in unread message count:

const chatComponent = document.querySelector('web-chat');

chatComponent.addEventListener('unreadMessageCountUpdated', (event) => {
  console.log('Unread count:', event.detail);
});

Conversation Not Found

Handle when a conversation is not found:

const chatComponent = document.querySelector('web-chat');

chatComponent.addEventListener('conversationNotFound', (event) => {
  console.log('Conversation not found:', event.detail);
});

🛠️ Development

Prerequisites

Node.js (v16 or higher)
npm or yarn

Setup

# Clone the repository
git clone <your-repo-url>
cd isometrik-webchat

# Install dependencies
npm install

Development Server

# Start development server with hot reload
npm start

The component will be available at http://localhost:3333

Build for Production

# Build the component library
npm run build

Run Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test.watch

Storybook

# Run Storybook
npm run storybook

# Build Storybook
npm run build-storybook

📂 Project Structure

isometrik-webchat/
├── src/
│   ├── api/                    # API integration
│   │   ├── conversations.js
│   │   ├── group-members.js
│   │   ├── groupcast.js
│   │   ├── message-reaction.js
│   │   └── membership-control.js
│   ├── assets/                 # Static assets
│   │   ├── images/
│   │   └── svg/
│   ├── components/             # Web components
│   │   ├── ChatUIComponent/
│   │   ├── my-component/
│   │   └── ...
│   ├── constants/              # App constants
│   ├── lib/                    # Helper libraries
│   ├── store/                  # State management
│   ├── stories/                # Storybook stories
│   ├── types/                  # TypeScript types
│   ├── utils/                  # Utility functions
│   └── index.ts               # Entry point
├── dist/                       # Build output
├── www/                        # Dev server output
├── stencil.config.ts          # Stencil configuration
├── tsconfig.json              # TypeScript configuration
└── package.json               # Package configuration

📝 Browser Support

Isometrik WebChat supports all modern browsers that implement the Custom Elements v1 specification:

✅ Chrome/Edge (latest)
✅ Firefox (latest)
✅ Safari (latest)
✅ Opera (latest)

🔐 Security

Never expose your API keys in client-side code
Always use environment variables for sensitive data
Implement proper authentication on your backend
Use HTTPS in production
Follow security best practices for user authentication

📄 License

MIT License - see the LICENSE file for details

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

For support and questions, please contact the Isometrik team or open an issue in the repository.

🔗 Resources

🎉 Credits

Built with ❤️ using Stencil

Note: Make sure you have valid credentials from Isometrik before using this library. Contact Isometrik to get your licenseKey, appSecret, and other required credentials.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

🚀 Isometrik WebChat

✨ Features

💬 Core Messaging

📁 Media & Content

🎨 Theming & Customization

👥 User Management

📱 Responsive Design

🔔 Additional Features

📦 Installation

Via NPM

Via Yarn

Via CDN

🚀 Quick Start

1. Using the Initialization Function

2. Using Web Components Directly

3. Using with React

4. Using with Vue

5. Using with Angular

🎨 Theme Customization

Switch Between Light and Dark Themes

Toggle Theme

Apply Custom Theme

Using Theme URL

Using Theme Object

Custom Theme CSS Variables

🔧 API Reference

initializeChat(config)

Parameters

Returns

Example

switchChatTheme(theme)

Parameters

Example

toggleTheme()

Example

applyCustomTheme(customTheme)

Parameters

Example

customChatSidebar(props)

Parameters

Example

📱 Component Properties

<web-chat> Component

<theme-provider> Component

🎯 Events

Unread Message Count Updated

Conversation Not Found

🛠️ Development

Prerequisites

Setup

Development Server

Build for Production

Run Tests

Storybook

📂 Project Structure

📝 Browser Support

🔐 Security

📄 License

🤝 Contributing

📞 Support

🔗 Resources

🎉 Credits

`initializeChat(config)`

`switchChatTheme(theme)`

`toggleTheme()`

`applyCustomTheme(customTheme)`

`customChatSidebar(props)`

`<web-chat>` Component

`<theme-provider>` Component