Witty Twilio Plugin

INSTALLATION

Download & install applications

• Git
• NodeJS {download current and latest}
• XAMPP / WAMP or Any LAMP server you are comfortable with

Application Install

1. Clone the repository https://gitlab.com/jason.posbang/witty-twilio-plugin.git
2. Navigate to the app root directory using Cmder or Git Bash CLI Example: cd c:\xampp\htdocs\witty-video-chat-plugin\
3. Run npm install

Testing

1. Run npm run build
2. Run npm pack
3. Copy the created zip file and extract to the project node_modules

Publish

1. Run npm run build
2. Run npm publish
3. In the project, run npm install --save witty-twilio-plugin

Local Testing

1. Run npm link on current witty-video-chat-plugin folder
2. Run npm link witty-twilio-plugin to target project folder
3. Import package import WittyVideoChatPlugin from 'witty-twilio-plugin' Vue.use(WittyVideoChatPlugin);

Sample WittyVideoChat Implementation

<template>
    <div id="app">
        <!-- Dont forget to provide props and functions to events -->

        <witty-video-chat
            :user="user"
            :token="token"
            :config="config"
            :events="events"
        >
            <witty-chat>
                <witty-container>
                    <witty-user
                        :search.sync="search"
                    />
                    <witty-channels
                        @onActiveChannelChanged="activeChannelChanged"
                        :search="search"
                    />
                </witty-container>

                <!-- Witty conversations -->
                <witty-conversations
                    @onInfoClicked="onInfoClicked"
                    @onVideoClicked="onVideoClicked"
                    :disable-video="disableCreateVideo"
                    ref="wittyConversations"
                >
                    <!-- You can add slots here. See WittyConverstions for available slots. -->
                </witty-conversations>

                <!-- Witty overview -->
                <witty-overview
                    v-if="showOverview"
                    @close="showOverview = false"
                >
                    <!-- Slots implementation for WittyOverview -->
                    <template slot="collapse-item-prefix" slot-scope="{scope}">
                        <el-collapse-item name="test">
                            <template slot="title">
                                <div class="title_container">
                                    <label>{{ 'Sample Slot' }}</label>
                                </div>
                            </template>

                            <p>Data: {{ scope.name }}</p>
                            </p>Attrbs: {{ scope.attributes }}</p>
                        </el-collapse-item>
                    </template>

                    <template slot="collapse-item-postfix" slot-scope="{scope}">
                        <el-collapse-item name="test2">
                            <template slot="title">
                                <div class="title_container">
                                    <label>{{ 'Sample Slot 2' }}</label>
                                </div>
                            </template>

                            <p>Data: {{ scope.name }}</p>
                            </p>Attrbs: {{ scope.attributes }}</p>
                        </el-collapse-item>
                    </template>
                </witty-overview>
            </witty-chat>
        </witty-video-chat>
    </div>
</template>

<script>
    import WittyVideoChat from 'witty-twilio-plugin'
    import WittyChat from 'witty-twilio-plugin'
    import WittyContainer from 'witty-twilio-plugin'
    import WittyUser from 'witty-twilio-plugin'
    import WittyChannels from 'witty-twilio-plugin'
    import WittyConversations from 'witty-twilio-plugin'
    import WittyOverview from 'witty-twilio-plugin'
    import ChatParticipantDetailsProfile from './Overview/ChatParticipantDetailsProfile'
    import ChatParticipantDetailsCards from './Overview/ChatParticipantDetailsCards'
    import axios from 'axios'
    import Noty from 'noty';

    Vue.use(WittyVideoChat)
    Vue.use(WittyChat)
    Vue.use(WittyContainer)
    Vue.use(WittyUser)
    Vue.use(WittyChannels)
    Vue.use(WittyConversations)
    Vue.use(WittyOverview)
    Vue.use(WittyOverview)

    /// your codes here
</script>

<style lang="scss">
    @import '../src/themes/Witty/scss/style.scss';
    /* you styles here */
</style>

WittyVideo

Props

|Name|Description|Type|Required|Default| |---|---|---|---|---| |visible| If the component is inside a modal. This must be synced with the modal visibility. | Boolean |false|true| |name| Meeting room name. | String|false|Room| |label| Label for meeting room. name would be used if not set. |—|false|Room| |token| Twilio Access Token with Video Grant. |String|true|-| |identity| Current user identity. Must match token. |String|false|null| |userData| Array or Function return a list of users. If function must accept params callback, identities(optional or null), searchQuery |Array or Function|false|[]| |theme| For theming, not yet used. |String|false|default| |translate|Translation function.|Function|false|null| |customClasses| Sets custom classes for buttons and other elements used in components. Optional. |Object|false|{"btnPrimary":"","btnCircle":"","btnCircleDanger":"","btnDefault":"","selectSingle":"","selectMultiple":""}| |trial| If set will enable trial and limit room duration to provided duration. Set is_trial to true to enable trial. |Object|false|{"is_trial":false,"duration":0}| |recordFunction| Function to start/end recording. Recording must be implemented in the backend. Params roomd_id, record(Boolean). If record is true start recording, end recording if false. |—|false|null| |enableKickParticipant| Enable user to kick a room participant. |Object|false|false| |enableEndMeeting| Show end meeting button. Must have handling for room-disconnected event. |Boolean|false|false| |enableInviteParticipant|Enable inviting other participants.|Boolean|false|false| |startVideoText|Text to display in start video button.|String|false|Start|

Events

|Event Name|Description|Parameters| |---|---|---| |created-room| New room has been created. | Room data | |joined-room| User has joined a room. | Room data | |invite-participants| Invite participants. | Array of participants. | |remove-participant| Remove participant. | (Object){room: [sid], participant_sid:[sid], identity:[participant identity]}| |room-disconnected| Current user has disconnected from the room. If endMeeting is true, room must be terminated in the backend. | (Object){endMeeting: [Boolean], meetingDuration: [int seconds], meetingStatus: [status], roomSid: [sid]} |

Slots

|Name|Description|Default Slot Content| |---|---|---| |unsported-browser-warning|Warning message if current browser is not supported.|-| |trial-ended-warning|Warning message if trial has ended. If trial is enabled.|-| |chat-channel-component|Slot for adding chat channels or other functions to side bar.|-|

MixIns

Some events are from this mixin.

|MixIn| |---| |twilioVideoCallHelper|

WittyVideoChat

Props

|Name|Description|Type|Required|Default| |---|---|---|---|---| |token|Twilio Access Token, must have chat grant. Must be provided but is not required to use the component.|String|false|null| |user|Current user. Must match with prodivded token. Object must contain first_name, last_name, image_path, {identity property provided in config}. See : Props > user |Object|false|null| |config|Configuration settings for witty video chat. See : Props > config |Object|true|null| |events|Object containing necessary events for witty twilio plugin integration. List of events: ( onGetChannelUsers, onCreateChanneluser, onImageUpload, onGetAccessToken, onMention, onNewChannelCreated, onVideoInvalidToken, onVideoRoomCreated, onVideoRoomJoined, onVideoRoomRecord, onVideoRoomExit, onVideoRoomKickParticipant ). See : Props > events.|Object|true|null|

Props > user

|Name|Description|Type|Required|Default| |---|---|---|---|---| |first_name| First name of user. |String|false|null| |last_name| Last name of user. |String|false|null| |{ identity key }| Twilio identity of the user. Must match with current Twilio Access Token. Must match with identity provided in config prop. |String|true|email|

Note: You can add other properties aside from these. Those properties can be used in events.

Sample:

{
    first_name: 'User',
    last_name: '',
    org_id: 3780,
    id: 1234,
    email: '[email protected]',
    image_path: '//hr.wittymanager.com/images/employee/3780-1599534873.jpg'
}

Props > config

|Name|Description|Type|Required|Default| |---|---|---|---|---| |identity| Key of identity used in users prop. |String|true|email| |secondaryLabel| Use for displaying labels for users in user info. |String|false|null| |tertiaryLabel| Use for displaying labels for users in user info. |String|false|null| |groups| Used for grouping channels. Array containing group object data. See: Props > config > groups |Array of Objects|true|null| |actions| Object containing allow actions for current user. See: Props > config > actions |String|true|email| |api| Object containing API Endpoints for additional data required for creating channels and refreshing token. See: Props > config > api |String|true|email| |video| Object containing config data for Video Components. See: Props > config > video |Object|optional *Required if using video comnponents. |null| |messageOptions| Array of objects containing additional options to messages with right clicked. See: Props > config > messageOptions > item |Array of Objects|false|null| |chatStatus| Object containing list of available chat status for users. Status can also be updated by users. See Props > config > chatStatus > item |Object|false|See Props > config > chatStatus > sample | |pattern| Object containing channel name pattern and default channel attribute. Used when creating new channels. See: Props > config > patter |Object|false|null| |filterConversation| Method for filter channels. |Function|false|null| |enableMentions| Enables mention function. Events for mentions must be provided if true. |Boolean|false|null|

Sample:

config: {
    actions: {
        addChannel: false,
        editChannel: true,
        deleteChannel: true,
        pinConversation: true,
        removeParticipant: false
    },
    groups: [
        {
            type: 'multiple', 
            name: 'team', 
            isRemote: true,
            customNaming: true
        },
        {
            type: 'single',
            name: 'personal',
            isRemote: true
        }
    ],
    identity: 'email',
    secondaryLabel: 'position_name',
    tertiaryLabel: 'email',
    api: {
        users: {
            list: {
                url: 'http://witty2.witme/chat/get-users',
                method: 'get',
            },
            create: null
        },
        token: {
            get: null/
        },
        headers: {
            'X-CSRF-TOKEN' : 'e5-sNBWmdWTqsgJppj0UIdkvOWt0PvxslPT_EuZAj8pC-5xEY80eC7PqMhPJTlVTintbJjxhlTnezahEsA_rjw==',
            'X-Requested-With' : 'XMLHttpRequest',
            'Set-Cookie' : "HttpOnly;Secure;SameSite=Strict",
        },
    },
    video: {
        enableEndMeeting: false,
        enableKickParticipant: true,
        enableInviteParticipant: true
    },
    messageOptions: [
        {
            name: 'Convert to Task',
            class: ['divided'],
            key: 'task',
            event: ((data) => {})
        },
        {
            name: 'Convert to Ticket',
            key: 'ticket',
            event: ((data) => { console.log("data", data)})
        }
    ],
    chatStatus: {
        online: {
            orbStyle: {
                background: '#2EB67D',
            },
            textStyle: {
                color: '#2EB67D',
            },
            online: true,
            defaultOnline: true,
            label: 'Available'
        },
        busy: {
            orbStyle: {
                backgroundColor: '#EC5E5E',
            },
            textStyle: {
                color: '#EC5E5E',
            },
            online: true,
            label: 'Busy'
        },
        away: {
            orbStyle: {
                backgroundColor: '#f18700',
            },
            textStyle: {
                color: '#f18700',
            },
            online: true,
            label: 'Away'
        },
        offline: {
            orbStyle: {
                backgroundColor: 'grey',
            },
            textStyle: {
                color: 'grey',
            },
            online: false,
            defaultOffline: true,
            label: 'Offline'
        },
    },
    pattern: {
        conversation: '{email}',
        attributes: {
            org_id: 3780
        },
    },
    filterConversation: (channel) => {
        let orgId = channel && channel.attributes && channel.attributes.org_id || channel && channel.attributes && channel.attributes.orgId || null
        return orgId == 3780 ? true : false
    },
    enableMentions: true,
},

Props > config > groups

|Name|Description|Type|Required|Default| |---|---|---|---|---| |type| Type of group. |String 'multiple' or 'single' | true |null| |name| Display name of group. |String|true|null| |isRemote| Used in markethammer. Just set to true. |Boolean|true|true|

Note: Just set isRemote to true.

Sample:

[
    {
        type: 'multiple', 
        name: 'team', 
        isRemote: true,
    },
    {
        type: 'single',
        name: 'personal',
        isRemote: true
    }
]

Props > config > actions

|Name|Description|Type|Required|Default| |---|---|---|---|---| |addChannel| Allow creating channels. |Bolean | true |true| |editChannel| Allow editing channels with type: multiple. |Bolean | true |true| |deleteChannel| Allow deleting channels. |Bolean | true |true| |pinConversation| Allow pinning conversations channels. Pinning a channel puts it on top of the list. |Bolean | true |true| |removeParticipant| Allow removing other participants from a channel channels. |Bolean | true |true|

Note: All actions are true by default. All properties must be set.

Sample:

{
    addChannel: false,
    editChannel: true,
    deleteChannel: true,
    pinConversation: true,
    removeParticipant: false
}

Props > config > api

|Name|Description|Type|Required|Default| |---|---|---|---|---| |users| Object containing API Enpoints for user actions. See: Props > config > api > user |Object | true |null| |token| Object containing API Enpoints for refreshing token. Twilio Access Token only lasts 30mins by default. |Object|true|null| | headers | Headers to for API requests. Must be in key(Header) value(Header value) structure. |Object|false|null|

Note: Just set isRemote to true.

Sample:

users: {
    list: {
        url: 'http://witty2.witme/chat/get-users',
        method: 'get',
    },
    create: {
        url: 'http://witty2.witme/chat/create-user',
        method: 'post',
    }
},
token: {
    get: {
        url: 'http://witty2.witme/chat/authenticate',
        method: 'get'
    }
},
headers: {
    'X-CSRF-TOKEN' : 'e5-sNBWmdWTqsgJppj0UIdkvOWt0PvxslPT_EuZAj8pC-5xEY80eC7PqMhPJTlVTintbJjxhlTnezahEsA_rjw==',
    'X-Requested-With' : 'XMLHttpRequest',
    'Set-Cookie' : "HttpOnly;Secure;SameSite=Strict",
},

Props > config > api > user

|Name|Description|Type|Required|Default| |---|---|---|---|---| |list | Object containing API Enpoints for retrieving existing twilio user list. Used in creating new channels. See: Props > config > api > 'Enpoint Setup' |Object | true |null| |create | Object containing API Enpoints for creating new twilio user. Used when creating new channels. See: Props > config > api > 'Enpoint Setup' |Object | true |null|

Sample:

list: {
    url: 'http://witty2.witme/chat/get-users',
    method: 'get',
},
create: {
    url: 'http://witty2.witme/chat/create-user',
    method: 'post',
}

Props > config > api > Enpoint Setup

|Name|Description|Type|Required|Default| |---|---|---|---|---| |url | URL of endpoint |String | true |null| |method | HTTP Method to use for request. |String | get, post |null|

Sample:

{
    url: 'http://witty2.witme/chat/get-users',
    method: 'get',
}

Props > config > api > token

|Name|Description|Type|Required|Default| |---|---|---|---|---| | get | Object containing API Enpoints for retrieving new token. Used in creating new channels. See: Props > config > api > 'Enpoint Setup' |Object | true |null|

Note: Not required if Props > events > onGetAccessToken is provided.

Sample:

get: {
    url: 'http://witty2.witme/chat/authenticate',
    method: 'get'
}

Props > config > video

|Name|Description|Type|Required|Default| |---|---|---|---|---| | enableEndMeeting | Enable users to end current active meeting. Only allows leaving meeting if set to false |Boolean | true |false| | enableKickParticipant | Enable removing other participants from active meeting. |Boolean | true |false| | enableInviteParticipant | Enable inviting other participants to active meeting. |Boolean | true |false|

Sample:

{
    enableEndMeeting: false,
    enableKickParticipant: true,
    enableInviteParticipant: true
}

Props > config > messageOptions > sample

Sample:

[
    {
        name: 'Convert to Task',
        class: ['divided'],
        key: 'task',
        event: ((data) => {})
    },
    {
        name: 'Convert to Ticket',
        key: 'ticket',
        event: ((data) => { console.log("data", data)})
    }
]

Props > config > messageOptions > item

|Name|Description|Type|Required|Default| |---|---|---|---|---| |name| Label to display for current option. |String | true |null| |class| Class to add to option div. |String|false|null| |key| Key for item. Must be unique. Must no be in list (reply, edit, copy, download, forward, delete)|String|true|null| |event| Function to do when option is selected |Function | true |null|

Sample:

{
    name: 'Convert to Task',
    class: ['divided'],
    key: 'task',
    event: ((data) => {})
},

Props > config > chatStatus > sample

Sample:

{
    offline: {
        orbStyle: {
            backgroundColor: 'var(--witty-avatar-status-orb-background)',
        },
        textStyle: {
            color: 'var(--witty-avatar-status-orb-background)',
        },
        online: false,
        defaultOffline: true,
        name
    },
    online: {
        orbStyle: {
            background: 'var(--witty-success-color)',
        },
        textStyle: {
            color: 'var(--witty-success-color)',
        },
        online: true,
        defaultOnline: true
    }
}

Props > config > chatStatus > item

|Name|Description|Type|Required|Default| |---|---|---|---|---| |orbStyle| Style for orb display. Sample {background: '#2EB67D'} |Object | true |null| |textStyle| Style for text display. Sample {color: '#2EB67D'} |Object | true |null| |online| User must be online to select status. |Boolean | true |true| |defaultOnline| If true, this item would be used as default status if user is online. |Object | true |false| |label| Status label |Object | true |null|

Sample:

online: {
    orbStyle: {
        background: '#2EB67D',
    },
    textStyle: {
        color: '#2EB67D',
    },
    online: true,
    defaultOnline: true,
    label: 'Available'
},

Props > config > chatStatus > pattern

|Name|Description|Type|Required|Default| |---|---|---|---|---| |conversation| Pattern for channel name for type: single channels |String '{email}' | false |null| |attributes| Any object you want to add to channel attributes. |'Object' | false |null|

Sample:

{
    conversation: '{email}',
    attributes: {
        org_id: 3780
    },
}

Props > events

|Name|Description|Type|Required|Default| |---|---|---|---|---| |onGetChannelUsers| Function used for retrieving list of users and user details. Must have the following params: callback, identities, search |Function|true|null| |onCreateChanneluser| Function for creating new Twilio user. Called when creating new channels if invited user does not exist in twilio. Must have the following params: data (user data) |Function|true|null| |onImageUpload| Function used for uploading images if pasted text to message input has images. Is not used for mesasge attachments. Must have the following params: data (file data) |Function|true|null| |onMention| Function used for handling mentions within the project implement twilio chat plugin. Twilio chat plugin only handles displaying mentions on message list, not notifications. Must have the following params: data (user data) |Function|true|null| |onNewChannelCreated| Called when a new channel is created. Must have the following params: channel (new channel data) |Function|false|null| |onVideoInvalidToken| Called when token is invalid for use in meetings. Token might have expired or does no have Video Grant. |Function|false|null| |onVideoRoomCreated| Called when a new meeting room is created. |Function|false|null| |onVideoRoomJoined| Called when a new user has joined a meeting room. |Function|false|null| |onVideoRoomRecord| Function for implementing meeting room recording. Meeting room recording cannot be handled from plugin. Must have the following params: data (room data) |Function|false|null| |onVideoRoomExit| Function for terminating meeting room. Meeting room termination cannot be handled from plugin. All users are kicked out of the room once the room is terminated. Must have the following params: data (room data) |Function|false|null| |onVideoRoomKickParticipant| Function for removing meeting participants. Meeting room participants cannot be removed from plugin. Must have the following params: data (room data) |Function|false|null|

Note: All video events if not provided are disabled. Video Call events are not required if not using Video Plugin, or implementing Video Plugin separately from Chat.

Sample:

events: {
    onGetChannelUsers: vm.onGetChannelUsers,
    onCreateChanneluser: vm.onCreateChanneluser,
    onImageUpload: null,//(data) => { console.log("image upload", data)},
    onGetAccessToken: vm.onGetNewToken,
    onMention: (data) => { console.log("mention", data)},
    onNewChannelCreated: (channel) => {
        console.log("new channel created", channel)
    },

    //Video
    onVideoInvalidToken: vm.onVideoInvalidToken,
    onVideoRoomCreated: vm.onVideoRoomCreated,
    onVideoRoomJoined: vm.onVideoRoomJoined,
    onVideoRoomRecord: vm.onVideoRoomRecord,
    onVideoRoomExit: vm.onVideoRoomExit,
    onVideoRoomKickParticipant: vm.onVideoRoomKickParticipant
    //End Video
}

methods: {
	onVideoInvalidToken,() {
		// refresh token
	},

	onVideoRoomCreated (data) {
		// save data to db or do anything else
		/*
            data => {
                sid => Twilio Room Sid
                room => Twilio Room Name
                token => Token Used
            }
        */
	},

	onVideoRoomJoined (data) {
		// save data to db or do anything else
		/*
            data => {
                sid => Twilio Room Sid
                room => Twilio Room Name
                token => Token Used
            }
        */
	},

	onVideoRoomRecord(data) {
		// call record function in the backend
		/*
            data => {
                sid => string | room sid
                record => boolean | true to start recording, false to stop recording
            }
        */
	},

	onVideoRoomExit() {
		/*
            data => {
                endMeeting => boolean | Must terminate room in backend if true | Room terminated is handled in backend
                meetingDuration: int | duration in seconds
                meetingStatus: string | current meeting status
                roomSid: string | Twilio Room Sid
            }
        */
	},

	onVideoRoomKickParticipant() {
		// call kick function in the backend
		/*
            data => {
                identity => string | identity of participant that must be kicked
                participant => string | participant sid
                room => string | room sid
            }
        */
	}
}

Slots

|Name|Description|Default Slot Content| |---|---|---| |default|-|-|

WittyConversations

Props

|Name|Description|Type|Required|Default| |---|---|---|---|---| |hideHeader| Hide header. |—|false|false| |disableVideo| Hide video action. |—|false|false|

Events

|Event Name|Description|Parameters| |---|---|---| |onInfoClicked| Info action button is clicked. |-| |onVideoClicked| Video action button is clicked. |-|

Slots

|Name|Description|Default Slot Content| |---|---|---| |conversation-actions| Slot for adding additional actions for selected channel. |-| |message-prefix| Slot for adding prefix to message item. |-| |message-postfix| Slot for adding postfix to message item. |-| |participant-view| Slot for viewing participant details. |-| |participant-view-postfix| Slot for viewing participant details. |-| |participant-view-action-prefix| Slot for viewing participant details. |-| |participant-view-action-postfix| Slot for viewing participant details. |-|

WittyOverview

Events

|Event Name|Description|Parameters| |---|---|---| |close| Close button is clicked. Does not hide WittyOverview. Only fires an event. |-|

Slots

|Name|Description|Default Slot Content| |---|---|---| |collapse-item-prefix| Add additional overview items before list. |-| |collapse-item-postfix| Add additional overview items after list. |-|

WittyUser

Props

|Name|Description|Type|Required|Default| |---|---|---|---|---| |search| Search input. Implements .sync. |String|true|null|

WittyChannels

Props

|Name|Description|Type|Required|Default| |---|---|---|---|---| |search| Search input from WittyUser |String|false|null|

Events

|Event Name|Description|Parameters| |---|---|---| |unread-count-changed| Active Channel unread count has changed. | Count | |onActiveChannelChanged| Selected channel changed | ChannelSid |