https://github.com/cagcak/vue-chat-session
Simple UI chat simulation web component
https://github.com/cagcak/vue-chat-session
chat simulation vue vue-components webcomponents
Last synced: 10 months ago
JSON representation
Simple UI chat simulation web component
- Host: GitHub
- URL: https://github.com/cagcak/vue-chat-session
- Owner: cagcak
- Created: 2019-09-15T10:30:57.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T10:25:38.000Z (about 3 years ago)
- Last Synced: 2025-03-18T15:57:44.511Z (11 months ago)
- Topics: chat, simulation, vue, vue-components, webcomponents
- Language: Vue
- Size: 2.49 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-chat-simulation
[](https://circleci.com/gh/cagcak/vue-chat-session/tree/master)
Simple UI chat simulation web component with a sender and a recipient
## Setting up
```bash
npm install vue-chat-simulation
```
## Usage
You can use the component as a webcomponent or as a vue component.
### Using as a web component
Add the following to ``head``:
```html
```
or as bundle:
```html
```
Now you can use the component as web component in your ``HTML`` document with its props and attributes:
```html
```
To provide a chat data, you need to keep registered component in a variable or constant:
```javascript
const Chat = window.ChatSession._wrapper.$refs.inner
```
The chat data format must be in form of either javascript array or parsed JSON as in ``/node_modules/vue-chat-simulation/src/assets/data.js``:
```javascript
export const sampleSessionData = [
{
id: 0,
sender: {
messages: {
correct: 'Sample correct typed Message from id 0',
close: null,
wrong: 'Sample wrong typed Message from id 0'
},
status: 0
},
recipient: {
messages: {
correct: 'Sample correct typed respond from id 0',
close: null,
wrong: 'Sample wrong typed respond from id 0'
},
status: 0
},
redirect: {
correct: 1,
close: null,
wrong: -1
},
respond: null,
feedback: 'Some optional feedback text for id 0',
status: 0
},
{
id: 1,
...
},
...
]
```
You can override the data as follows:
```javascript
const sampleOverrideData = [
{
id: 0,
sender: {
messages: {
correct: 'Sample correct typed Message from id 0',
close: 'Sample close typed Message from id 0',
wrong: 'Sample wrong typed Message from id 0'
},
status: 0
},
recipient: {
messages: {
correct: 'Sample correct typed respond from id 0',
close: 'Sample close typed respond from id 0',
wrong: 'Sample wrong typed respond from id 0'
},
status: 0
},
redirect: {
correct: -1,
close: -1,
wrong: -1
},
respond: null,
feedback: 'Some optional feedback text for id 0',
status: 0
}
]
Chat.sessionData = sampleOverrideData
```
#### Callbacks
There are some component lifecycle based callbacks and a chat session finished callback
```javascript
Chat.onCreate = () => {
console.log('Callback tick for onCreate')
}
Chat.onMount = () => {
console.log('Callback tick for onMount')
}
Chat.onUpdate = () => {
console.log('Callback tick for onUpdate')
}
Chat.onDestroyed = () => {
console.log('Callback tick for onDestroyed')
}
Chat.onFinishSession = (redirect, sessions) => {
console.log('Callback tick for onFinishSession')
console.log(redirect, sessions)
}
```
### Using as a vue component
For global or local usage of component add the following
```javascript
import ChatSimulation from 'vue-chat-simulation'
```
then register as a component in your component definition:
```javascript
components: [
ChatSimulation
]
```
and finally use in the template:
```html
```
### Tech stack
- Bootstrap 4
- Vue CLI 3
- webcomponentsjs
### Contribution
Any contribution is welcome. You can play with the vue component (``src/components/ChatSession.vue``) any way you want
### License
ISC