Messenger AI

Messenger AI is a package that provides a simple messenger component for web applications. It allows you to easily add a messenger feature to your projects.

Installation

You can install the package via npm or yarn:

npm install messanger-ai

or

yarn add messanger-ai

Demo

View demo | Sandbox

Usage

Vanilla TypeScript

import Messenger, { MessangerConfig } from './component/index';

const config: MessangerConfig = {
  holder: 'messenger',
  name: "Open Ai",
  token: 'GPT TOKEN'

};

const messengerElement = document.createElement('div');
messengerElement.id = config.holder;

document.getElementById('app')!.appendChild(messengerElement);

new Messenger(config);

Vue JS

<template>
  <div>
    <div id="messanger"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Messenger } from 'messanger-ai';
import 'messanger-ai/style.css';


onMounted(() => {
    const config = {
      holder: 'messanger',
      name: 'Open Ai',
      token: 'GPT TOKEN'

    };
    new Messenger(options);
});
</script>

React JS

import React, { useEffect } from 'react';
import {Messenger } from 'messanger-ai';
import 'messanger-ai/style.css';

const App = () => {
  useEffect(() => {
    const config = {
      holder: 'messanger',
      name: 'Open Ai',
      token: 'GPT TOKEN'
    };
    const messenger = new Messenger(config); // Use the correct path to the default object
    
    return () => {
      // Clean up on component unmount, if necessary
      // For example: messenger.destroy();
    };
  }, []);

  return (
    <div>
      <div id="messanger"></div>
    </div>
  );
};

export default App;

Config

Menu settings

Props (Parameter)	Type	Default	Description
holder	String	app	ID of the HTML element that should contain the AI messenger
name	String	Admin Ai	The name of the AI
picture	String	'Picture of AI'	The URL to the AI's picture (Logo)
token	String	Token to AI	The token required for interacting with the ChatGPT
socials	Array	-	Social medias
color	String	#5c5cd6	Colors of messanger
header_background	String	url('url_to_picture') or link to img	Background of header
request	Function	Request to our server	Custom request to the server

Example of Socials

  socials: [
    { link: "https://instagram.com/name_of_account", type: "instagram" },
    { link: "https://t.me/name_of_account", type: "telegram" },
    { link: "https://facebook.com/name_of_account", type: "facebook" },
    { link: "https://twitter.com/name_of_account", type: "twitter" }
  ]