1.1.4 • Published 10 months ago
messanger-ai v1.1.4
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
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" }
]
1.1.4
10 months ago
1.1.3
11 months ago
1.1.2
11 months ago
1.1.1
11 months ago
1.1.0
11 months ago
1.0.8
11 months ago
1.0.7
11 months ago
1.0.6
11 months ago
1.0.5
11 months ago
1.0.4
11 months ago
1.0.3
11 months ago
1.0.1
11 months ago
1.0.0
11 months ago
0.2.5
11 months ago
0.2.4
12 months ago
0.2.3
12 months ago
0.2.2
12 months ago
0.2.1
12 months ago
0.2.0
12 months ago
0.1.9
12 months ago
0.1.8
12 months ago
0.1.7
12 months ago
0.1.6
12 months ago
0.1.5
12 months ago
0.1.4
12 months ago
0.1.3
12 months ago
0.1.2
12 months ago
0.1.0
12 months ago
0.0.1
12 months ago