\n\n# Waku Chat Vue Plugin\n\nThis document describes a plugin made with Waku and Vue, that implements a simple chat.\n\n[Live Demo!](https://doiim.github.io/waku-chat-vue/)\n\n## Usage\n\nFollow these steps to install and use the package in your project:\n\n1. Install the package in your project's folder:\n\n ```sh\n $ npm install @doiim/waku-chat-vue-plugin\n ```\n\n2. In your `main.js` file, import the component and pass it to the `use` function. Passing on the options field\n the app name and rooms available on your chat.\n\n ```js\n import { createApp } from 'vue'\n import App from './App.vue'\n import WakuChatVuePlugin from '@doiim/waku-chat-vue-plugin';\n\n createApp(App).use(WakuChatVuePlugin,\n {\n wakuChannelName: 'my-app-name',\n availableRooms: ['General', 'Off'],\n }).mount('#app');\n ```\n\n3. You can also set other configuration options:\n\n ```js\n import { createApp } from \"vue\";\n import App from \"./App.vue\";\n import WakuChatVuePlugin from \"@doiim/waku-chat-vue-plugin\";\n\n createApp(App)\n .use(WakuChatVuePlugin, {\n wakuChannelName: \"my-app-name\",\n availableRooms: [\"General\", \"Off\"],\n wakuPeers: [\"your/waku/peer/string/address/here\"],\n changeNickMode: \"message\",\n hideClose: false,\n styleConfig: {\n colors: {\n light: {\n primary: \"rgba(41, 79, 204, 1)\",\n secondary: \"rgba(8, 45, 166, 1)\",\n tertiary: \"rgba(182, 201, 242, 1)\",\n quaternary: \"rgba(217, 229, 255, 1)\",\n },\n dark: {\n primary: \"rgba(214, 227, 255, 1)\",\n secondary: \"rgba(168, 191, 240, 1)\",\n tertiary: \"rgba(26, 73, 229, 1)\",\n quaternary: \"rgba(18, 51, 161, 1)\",\n },\n },\n shadows: {\n openedComponent: 0.1,\n messageBalloon: 0.1,\n },\n border: {\n size: \"1px\",\n },\n },\n })\n .mount(\"#app\");\n ```\n\n4. Instantiate the componente inside your template.\n\n ```js\n \n ```\n\nThe configurations available are:\n\n- `externalUserId`: (string) - The user id for identification of message owners\n- `externalUserName`: (string) (optional) - The user name for displaying on messages, after sending a message cannot be changed on that message. If not provided, the user name will be generated using the id.\n- `externalUserType`: (string) (optional) - The user type for displaying on messages, after sending a message cannot be changed on that message.\n- `onOpen`: (() => void) (optional) - A function called everytime user opens the chat window.\n- `onClose`: (() => void) (optional) - A function called everytime user closes the chat window.\n- `onConnect`: (() => void) (optional) - A function called when chat connects from peers.\n- `onDisconnect`: (() => void) (optional) - A function called when chat disconnects from peers, usually when chat is closed and 'disconnectDelay' time passes.\n- `theme`: ('light' | 'dark') (optional) - Choose a theme, it will affect colors. if none is chosen light it will be chosen\n- `chatPos`: (Object) (optional) - Choose the chat position, default is {bottom:'16px',right:'16px'}. You can use any css unit (px, %, etc)\n - `top`: (string) (optional) - Choose top position or let it undefined if you want to set bottom\n - `left`: (string) (optional) - Choose left position or let it undefined if you want to set right\n - `bottom`: (string) (optional) - Choose bottom position or let it undefined if you want to set top\n - `right`: (string) (optional) - Choose right position or let it undefined if you want to set left\n- `balloonPos`: (Object) (optional) - Choose ballon buttons position, default is {bottom:'36px',right:'34px'}. You can use any css unit (px, %, etc)\n - `top`: (string) (optional) - Choose top position or let it undefined if you want to set bottom\n - `left`: (string) (optional) - Choose left position or let it undefined if you want to set right\n - `bottom`: (string) (optional) - Choose bottom position or let it undefined if you want to set top\n - `right`: (string) (optional) - Choose right position or let it undefined if you want to set left\n- `animationDirection`: ('up' | 'down' | 'left' | 'right') (optional) - Define open/close animation direction\n- `chatSize`: (Object) (optional) - Choose chat size, default is {width:'360px',height:'576px'}. You can use any css unit (px, %, calc(), etc)\n - `width`: (string) (optional) - Choose width size or let it undefined for '360px'\n - `height`: (string) (optional) - Choose heigth size or let it undefined for '576px'\n\n5. Define process global variable.\n\nBecause of some updates on current nwaku-sdk version, you need to define globally the variable process on your application:\nOn vite this can be made with:\n\n ```js\n import { defineConfig } from \"vite\";\n import vue from \"@vitejs/plugin-vue\";\n export default defineConfig({\n plugins: [vue()],\n base: \"/waku-chat-vue/\",\n define: { process: \"window.process\" }\n });\n ```\n\n### Configuration Options\n\nHere are the available configuration options:\n\n- `wakuChannelName`: (string) - The name that will be used to create your message's topic on Waku.\n- `availableRooms`: (string[]) - Rooms available on your chat to separate messages.\n- `wakuPeers`: (string[]) (optional) - Waku peers to connect by default. If you don't set this, Waku will use automatic peers. Use this to set your own peers.\n- `disconnectDelay`: (number) (optional) - Time in milisseconds which chat can be minimized before being disconnected. 5 minutes if not set.\n- `groupMessagesTime`: (number) (optional) - Time in milisseconds which messages from the same sender can be grouped. 1 minute if not set.\n- `messageAgeToDownload`: (number) (optional) - Max age of messages in milisseconds which messages would be downloaded when user connects to chat. Default not considering age of messages.\n- `fetchMsgsOnScroll`: (boolean) (optional) (Default = true) - Enable/disable loading messages when scrolling up in chat history. When enabled, messages are loaded in batches as user scrolls. When disabled, messages are loaded based on messageAgeToDownload.\n- `fetchMaxAttempts`: (number) (optional) (Default = 3) - Maximum number of consecutive attempts to fetch messages when receiving low/no responses. After exceeding this limit, fetching pauses temporarily.\n- `fetchTotalLimit`: (number) (optional) (Default 0 or null) - Maximum total number of messages to load when fetchMsgsOnScroll is enabled. Set to 0 for unlimited history. This limit is not applied when fetchMsgsOnScroll is disabled.\n - if `fetchMsgsOnScroll` is true: (default 0 - unlimited)\n - if `fetchMsgsOnScroll` is false: (default null - not applicable)\n- `fetchLimit`: (number) (optional) (Default 10 or 100)- Controls the number of messages retrieved in each fetch operation:\n - if `fetchMsgsOnScroll` is true: (default 10)\n - if `fetchMsgsOnScroll` is false: (default 100)\n- `showSystemMessages`: (boolean) (optional) - Show or not system messages. Default not show.\n- `userChangeNick`: (boolean) (optional) - Allow users to change their nicknames.\n- `hideClose`: (boolean) (optional) - Hides the close button from chat, default is false.\n- `styleConfig`:(Object) (optional) - Allow you to change css. ALl of them are optional, if you don’t set any of them, a default value will be applied. They are:\n - colors:(Object) - Allow you to change colors of components.\n - light: (Object) - Allow you to change colors of light theme.\n - primary: (string) - main color. If not set it will be blue [rgba(41, 79, 204, 1)]\n - secondary: (string) - second color. If not set it will derive from primary color.\n - tertiary: (string) - third color. If not set it will derive from primary color.\n - quaternary: (string) - forth color. If not set it will derive from primary color.\n - dark: (Object) - Allow you to change colors of dark theme.\n - primary: (string) - main color. If not set it will derive from light primary color.\n - secondary: (string) - second color. If not set it will derive from primary color.\n - tertiary: (string) - third color. If not set it will derive from primary color.\n - quaternary: (string) - forth color. If not set it will derive from primary color.\n - shadows: allow you change shadows from component\n - openedComponent: (number) - shadow from the hole chat\n - messageBalloon: (number) - shadow from the message balloon\n - border: allow you change borders from component\n - size: (string) - border size (specify your unit) of the chat component\n\n### Exposed Events\n- `connectChat`: (() => void) - Connects to the chat while in background and fetchs the initial messages.\n- `openChat`: (() => void) - Opens the chat container.\n- `closeChat`: (() => void) - Closes the chat container.\n\n\n## Examples\n\nYou can find a vue example [here](https://github.com/doiim/waku-chat-vue).\n\n## Building the Plugin\n\nTo build the plugin, first clone this repo, install dependencies in the project root, and build the project:\n\n ```sh\n $ git clone https://github.com/doiim/waku-chat-vue-plugin.git\n $ cd waku-chat-vue-plugin\n $ npm install\n $ npm run build\n ```\n\nThis will generate the compiled project in the dist folder.\n\n## References\n\n- [Waku](https://github.com/waku-org/awesome-waku)\n- [VueJS](https://vuejs.org/)\n- [Other Doiim projects](https://github.com/doiim)\n\n```\n\n```\n","readmeFilename":"README.md"}
![\"Doiim](\"https://github.com/doiim/waku-chat-vue-plugin/blob/main/assets/logos.png\")