chatsooner v0.2.3-development

Chatsooner-JS

The official Chatsooner Javascript package is here!

Get Started

1. Run npm install chatsooner in your terminal

Quick Start

import Visualizer from 'chatsooner'

interface VisualizerContext {
            type: string,
            children: Array<VisualizerContext>,
            message:string,
            name:string,
            imageUrl?:"",
            container : PIXI.Container,
            onclick?: (context: VisualizerContext) => void,
            id:string
        }
        var visualizer = new Visualizer()
        visualizer.attach()

        const context : VisualizerContext = {
            id:'Les go',
            name:'Bonjour',
            message:'Esa vu bleau',
            type:'agent.selection',
            children:[]
        }
        visualizer.setContext(context)

If you want to listen to click events:

visualizer.onContextClick = (context: VisualizerContext) => {

    /**To perform different actions on forms of different types you can use
     * a switch case block
    */
    console.log(`The element with id ${context.id} and type ${context.type} has been clicked`)
   

    switch (context.type) {
        case 'agent.selection':
          
            break;
    
        default:
            break;
    }

    //OR HERE

    /**
     * Inside your application code you can call visualizer.editContext()
     *  visualizer.editContext(context.id, 'message', 'Clicked!')
        visualizer.editContext(context.id, 'name', 'Clicked!')
     */

}

If you want to listen to drop events:

visualizer.onContextDrop = (context) => {
    console.log("The context has been dropped")
    console.log(context)
}

If you want to clear a context

visualizer.clearContext()

Subsequent calls to

visualizer.setContext(context) 

creates children on the first setContext(context)

To edit a context simply pass in it's id the field and the value

visualizer.editContext('id', 'name', 'Hello World')

To get the current context call getContext()