0.8.9 • Published 2 days ago

@doiim/waku-chat-vue-plugin v0.8.9

Weekly downloads
-
License
-
Repository
-
Last release
2 days ago

Waku Chat Vue Plugin

This document describes a plugin made with Waku and Vue, that implements a simple chat.

Live Demo!

Usage

Follow these steps to install and use the package in your project:

  1. Install the package in your project's folder:

    $ npm install @doiim/waku-chat-vue-plugin

  2. In your main.js file, import the component and pass it to the use function. Passing on the options field the app name and rooms available on your chat.

    ```js
import { createApp } from 'vue'
import App from './App.vue'
import WakuChatVuePlugin from '@doiim/waku-chat-vue-plugin';

createApp(App).use(WakuChatVuePlugin,
{
    wakuChannelName: 'my-app-name',
    availableRooms: ['General', 'Off'],
}).mount('#app');
```

  3. You can also set other configuration options:

    import { createApp } from "vue";
import App from "./App.vue";
import WakuChatVuePlugin from "@doiim/waku-chat-vue-plugin";

createApp(App)
  .use(WakuChatVuePlugin, {
    wakuChannelName: "my-app-name",
    availableRooms: ["General", "Off"],
    wakuPeers: ["your/waku/peer/string/address/here"],
    changeNickMode: "message",
    cssConfig: {
      colors: {
        header: {
          main: 'rgba(219, 234, 254, 1)',
          text: 'rgba(107, 114, 128, 1)',
          btn: 'rgba(37, 99, 235, 1)',
          btnHover: 'rgba(30, 64, 175, 1)',
        },
        room: {
          btn: {
            text: 'rgba(37, 99, 235, 1)',
            textHover: 'rgba(30, 64, 175, 1)',
          },
          dropdown: {
            main: 'rgba(255, 255, 255, 1)',
            text: 'rgba(31, 41, 55, 1)',
            hover: 'rgba(243, 244, 246, 1)',
            selected: 'rgba(29, 78, 216, 1)'
          }
        },
        subHeader: {
          main: 'rgba(239, 246, 255, 1)',
          text: 'rgba(37, 99, 235, 1)',
          textHover: 'rgba(30, 64, 175, 1)',
          editName: {
            main: 'rgba(229, 231, 235, 1)',
            placeholder: 'rgba(156, 163, 175, 1)',
            text: 'rgba(31, 41, 55, 1)',
            disabled: 'rgba(229, 231, 235, 1)',
          }
        },
        loadBtn: {
          main: 'rgba(37, 99, 235, 1)',
          hover: 'rgba(30, 64, 175, 1)',
          text: 'rgba(249, 250, 251, 1)',
          textHover: 'rgba(249, 250, 251, 1)',
        },
        loadingBtn: {
          main: 'rgba(37, 99, 235, 1)',
          text: 'rgba(249, 250, 251, 1)',
        },
        openBtn: {
          main: 'rgba(37, 99, 235, 1)',
          hover: 'rgba(30, 64, 175, 1)',
          text: 'rgba(249, 250, 251, 1)',
          textHover: 'rgba(249, 250, 251, 1)',
        },
        sendBtn: {
          main: 'rgba(37, 99, 235, 1)',
          hover: 'rgba(30, 64, 175, 1)',
          text: 'rgba(249, 250, 251, 1)',
          textHover: 'rgba(249, 250, 251, 1)',
          disabled: 'rgba(75, 85, 99, 1)',
        },
        input: {
          main: 'rgba(229, 231, 235, 1)',
          placeholder: 'rgba(156, 163, 175, 1)',
          text: 'rgba(31, 41, 55, 1)',
          disabled: 'rgba(229, 231, 235, 1)',
          response: {
            main: 'rgba(229, 231, 235, 1)',
            text: 'rgba(31, 41, 55, 1)',
            close: 'rgba(107, 114, 128, 1)',
            closeHover: 'rgba(30, 64, 175, 1)',
          }
        },
        minimizeBtn: {
          main: 'rgba(107, 114, 128, 1)',
          hover: 'rgba(30, 64, 175, 1)',
        },
        chat: {
          myMessage: {
            main: 'rgba(37, 99, 235, 1)',
            user: 'rgba(37, 99, 235, 1)',
            text: 'rgba(249, 250, 251, 1)',
            response: {
              main: 'rgb(104 144 231)',
              text: 'rgba(249, 250, 251, 1)',
            }
          },
          otherMessage: {
            main: 'rgba(229, 231, 235, 1)',
            user: 'rgba(156, 163, 175, 1)',
            text: 'rgba(31, 41, 55, 1)',
            response: {
              main: 'rgb(180 199 235)',
              text: 'rgba(31, 41, 55, 1)',
            }
          },
          systemMessage: {
            main: 'rgba(229, 231, 235, 1)',
            text: 'rgba(37, 99, 235, 1)',
          },
          timestamp: 'rgba(156, 163, 175, 1)',
          responseIcon: 'rgba(37, 99, 235, 1)'
        },
        background: 'rgba(249, 250, 251, 1)',
        border: 'rgba(37, 99, 235, 1)',
      },
      shadows: {
        openedComponent: 0.1,
        messageBalloon: 0.1
      },
      border: {
        size: '1px'
      }
    },
  })
  .mount("#app");

  4. Instantiate the componente inside your template.

      <WakuChatVuePlugin :externalUserId="externalId" :externalUserName="externalName" />

Note that externalUserName is optional, if not provided, the user name will be generated using the id.

Configuration Options

Here are the available configuration options:

  • wakuChannelName: (string) - The name that will be used to create your message's topic on Waku.
  • availableRooms: (string[]) - Rooms available on your chat to separate messages.
  • 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.
  • disconnectDelay: (number) (optional) - Time in milisseconds which chat can be minimized before being disconnected. 5 minutes if not set.
  • groupMessagesTime: (number) (optional) - Time in milisseconds which messages from the same sender can be grouped. 1 minute if not set.
  • messagesToDownload: (number) (optional) - Max number of messages to retrieve when user connects to chat. Default 100 messages.
  • 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.
  • showSystemMessages: (boolean) (optional) - Show or not system messages. Default not show.
  • userChangeNick: (boolean) (optional) - Allow users to change their nicknames.
  • cssConfig:(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:
    • colors:(Object) - Allow you to change colors of components.
      • header: (Object) - Allow you to change colors from header.
        • main: (string) - main color.
        • text: (string) - text color
        • btn: (string) - buttons color
        • btnHover: (string) - buttons hover color.
      • room: (Object) - Allow you to change colors from room components.
        • btn: (Object) - Allow you to change colors from room button.
          • text: (string) - text color.
          • textHover: (string) - text hover color.
        • dropdown: (Object) - Allow you to change colors from room dropdown.
          • main: (string) - main color.
          • text: (string) - text color.
          • hover: (string) - hover option color.
          • selected: (string) - selected option color.
      • subHeader: (Object) - Allow you to change colors from sub header.
        • main: (string) - main color.
        • text: (string) - text color.
        • textHover: (string) - text hover color.
        • editName - Change color for change name input
          • main - main color
          • placeholder - placeholder text color
          • text - text color
          • disabled - disabled color
      • loadBtn: (Object) - Allow you to change colors from load button.
        • main: (string) - main color.
        • hover: (string) - hover color.
        • text: (string) - text color.
        • textHover: (string) - text hover color.
      • loadingBtn: (Object) - Allow you to change colors from loading spinner.
        • main: (string) - main color.
        • text: (string) - text color.
      • openBtn: (Object) - Allow you to change colors from open button.
        • main: (string) - main color.
        • hover: (string) - hover color.
        • text: (string) - text color.
        • textHover: (string) - text hover color.
      • sendBtn: (Object) - Allow you to change colors from send button.
        • main: (string) - main color.
        • hover: (string) - hover color.
        • text: (string) - text color.
        • textHover: (string) - text hover color.
        • disabled: (string) - disabled color.
      • input: (Object) - Allow you to change colors from message input.
        • main: (string) - main color.
        • placeholder: (string) - placeholder text color.
        • text: (string) - text color.
        • disabled: (string) - disabled background color.
        • response: (Object) - Allow you to change colors from response preview on input.
          • main: (string) - main color.
          • text: (string) - text color.
          • close: (string) - close button color.
          • closeHover: (string) - close button hover color.
      • minimizeBtn: (Object) - Allow you to change colors from minimize button.
        • main: (string) - main color.
        • hover: (string) - hover button color.
      • chat: (Object) - Allow you to change colors from chat content.
        • myMessage: (Object) - Allow you to change colors from use messages.
          • main: (string) - main color.
          • user: (string) - user name color.
          • text: (string) - text color.
          • response: (Object) - Allow you to change colors from response.
            • main: (string) - main color.
            • text: (string) - text color.
        • otherMessage: (Object) - Allow you to change colors from others messages.
          • main: (string) - main color.
          • user: (string) - user name color.
          • text: (string) - text color.
          • response: (Object) - Allow you to change colors from response.
            • main: (string) - main color.
            • text: (string) - text color.
        • systemMessage: (Object) - Allow you to change colors from system messages.
          • main: (string) - main color.
          • text: (string) - text color.
        • reaction: (Object) - Allow you to change colors from reaction.
          • main: (string) - main color.
          • text: (string) - text color.
        • disabledResponse: (Object) - Allow you to change colors from disabled messages.
          • main: (string) - main color.
          • text: (string) - text color.
        • timestamp: (string) - timestamp text color.
        • interactIcons: (string) - interaction icons color.
      • background: (string) - Allow you to change background color.
      • border: (string) - Allow you to change border color.
    • shadows: allow you change shadows from component
      • openedComponent: (number) - shadow from the hole chat
      • messageBalloon: (number) - shadow from the message balloon
    • border: allow you change borders from component
      • size: (string) - border size (specify your unit) of the chat component

Examples

You can find a vue example here.

Building the Plugin

To build the plugin, first clone this repo, install dependencies in the project root, and build the project:

```bash
$ git clone https://github.com/doiim/waku-chat-vue-plugin.git
$ cd waku-chat-vue-plugin
$ npm install
$ npm run build
```

This will generate the compiled project in the dist folder.

References

chatvuewakudoiim
@libp2p/bootstrap@waku/sdkprotobufjsrandom-wordsvuevue-shadow-dom
0.8.9

2 days ago

0.8.8

13 days ago

0.8.7

16 days ago

0.8.5

24 days ago

0.8.4

24 days ago

0.8.6

24 days ago

0.8.3

25 days ago

0.8.2

26 days ago

0.8.1

27 days ago

0.8.0

27 days ago