{"id":19961709,"url":"https://github.com/doiim/waku-chat-vue-plugin","last_synced_at":"2025-03-01T16:41:41.739Z","repository":{"id":227931360,"uuid":"772740221","full_name":"doiim/waku-chat-vue-plugin","owner":"doiim","description":"Vue3 Chat plugin for Waku.","archived":false,"fork":false,"pushed_at":"2024-05-22T13:45:59.000Z","size":290,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-05-22T14:57:32.132Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doiim.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-15T19:51:10.000Z","updated_at":"2024-06-21T12:44:53.253Z","dependencies_parsed_at":"2024-05-22T14:55:51.462Z","dependency_job_id":"e800d56b-bcd1-4bdd-8592-4bb5941b742e","html_url":"https://github.com/doiim/waku-chat-vue-plugin","commit_stats":null,"previous_names":["doiim/waku-chat-vue-plugin"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doiim%2Fwaku-chat-vue-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doiim%2Fwaku-chat-vue-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doiim%2Fwaku-chat-vue-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doiim%2Fwaku-chat-vue-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doiim","download_url":"https://codeload.github.com/doiim/waku-chat-vue-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241396739,"owners_count":19956404,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T02:08:15.696Z","updated_at":"2025-03-01T16:41:41.719Z","avatar_url":"https://github.com/doiim.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/doiim/waku-chat-vue-plugin/blob/main/assets/logos.png\" alt=\"Doiim + Waku Logo\"\u003e\n\u003c/p\u003e\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      \u003cWakuChatVuePlugin :externalUserId=\"externalId\" :externalUserName=\"externalName\" :externalUserType=\"externalType\"\n      :onOpen=\"externalOnOpen\" :onClose=\"externalOnClose\"\n      :onConnect=\"externalOnConnect\" :onDisconnect=\"externalOnDisconnect\" :theme=\"dark\"/\u003e\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`: (() =\u003e void) (optional) - A function called everytime user opens the chat window.\n- `onClose`: (() =\u003e void) (optional) - A function called everytime user closes the chat window.\n- `onConnect`: (() =\u003e void) (optional) - A function called when chat connects from peers.\n- `onDisconnect`: (() =\u003e 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`: (() =\u003e void) - Connects to the chat while in background and fetchs the initial messages.\n- `openChat`: (() =\u003e void) - Opens the chat container.\n- `closeChat`: (() =\u003e 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoiim%2Fwaku-chat-vue-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoiim%2Fwaku-chat-vue-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoiim%2Fwaku-chat-vue-plugin/lists"}