witty-twilio-plugin v0.0.15

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

Events

Slots

MixIns

Some events are from this mixin.

WittyVideoChat

Props

Props > user

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: 'jasonu@wittymanager.com',
    image_path: '//hr.wittymanager.com/images/employee/3780-1599534873.jpg'
}

Props > config

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

Note: Just set isRemote to true.

Sample:

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

Props > config > actions

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

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

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

Sample:

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

Props > config > api > token

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

Sample:

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

Props > config > video

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

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

Sample:

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

Props > config > chatStatus > pattern

Sample:

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

Props > events

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

WittyConversations

Props

Events

Slots

WittyOverview

Events

Slots

WittyUser

Props

WittyChannels

Props

Events