@rws-framework/client 2.1.0 → 2.1.1

package/README.md

@@ -8,13 +8,14 @@ Realtime Web Suit is a web-component powered, MS FAST powered fullstack-oriented
 2. [Getting Started](#getting-started)
 3. [Key Components: RWSClient & RoutingService](#key-components-rwsclient--routingservice)
 4. [Component Initialization](#component-initialization)
-5. [Frontend routes](#frontend-routes)
-6. [Backend Imports](#backend-imports)
-7. [Utilizing APIService](#utilizing-apiservice)
-8. [Notifier](#notifier)
-9. [Service Worker](#service-worker)
-10. [Example: WebChat Component](#example-webchat-component)
-11. [Links](#links)
+5. [DI](#dependency-injection)
+6. [Frontend routes](#frontend-routes)
+7. [Backend Imports](#backend-imports)
+8. [Utilizing APIService](#utilizing-apiservice)
+9. [Notifier](#notifier)
+10. [Service Worker](#service-worker)
+11. [Example: WebChat Component](#example-webchat-component)
+12. [Links](#links)
 
 ## Overview
 
@@ -30,12 +31,12 @@ from your project dir do:
 yarn
 ```
 
-Initiate cfg files:
+Initiate cfg files and webpack build:
 ```bash
 rws-client init
 ```
 
-to install once and then to build after preparing compionents:
+to install once and then to build after preparing components:
 
 ```bash
 yarn build
@@ -48,7 +49,18 @@ yarn watch
 then start engine in the site javascript (can be inline):
 
 ```javascript
-window.RWSClient.start(CFG);
+window.RWSClient.start(CFG).then();
+```
+
+*or for initial setup then start on certain event (example)* 
+
+```javascript
+window.RWSClient.setup(CFG).then(() => {    
+    $.on('loaded', function(data){
+        const optionalNewCfg = { backendRoutes: data.backendRoutes };
+        window.RWSClient.start(optionalNewCfg).then();
+    })    
+});
 ```
 
 example config with interface:
@@ -56,23 +68,89 @@ example config with interface:
 ```javascript
 const CFG = {
     backendUrl: 'http://localhost:1337',
-    wsUrl: 'http://localhost:1338'
+    wsUrl: 'http://localhost:1338',
+    transports: ['websocket'],
+    user: rwsUser,
+    parted: true,
+    splitFileDir: '/lib/rws',
+    splitPrefix: 'myapp'     
 }
 ```
 
+### The FRONT config interface:
+
 ```typescript
-export default interface IRWSConfig {
-    defaultLayout?: typeof RWSViewComponent;
-    backendUrl?: string,
-    wsUrl?: string,
-    backendRoutes?: any[] // routes from backend
+interface IRWSConfig {
+    defaultLayout?: typeof RWSViewComponent
+    backendUrl?: string // url to backend request/response gateway
+    wsUrl?: string // url to backend websockets gateway
+     backendRoutes?: any[] // routes from backend
     apiPrefix?: string // f.e /api after host
     routes?: IFrontRoutes, //override front routes
     transports?: string[], //ws transports setup
     user?: any, //user data if logged
     ignoreRWSComponents?: boolean //do not register base RWS components
+    pubUrl?: string //the url for accessing public dir from browser URL (default: /)
+    pubPrefix?: string 
+    parted?: boolean //sets async partitioning mode for components. Those wil be parted and loaded in BG.
+    splitFileDir?: string //the url for accessing split dir from browser URL (default: /)
+    splitPrefix?: string // prefix for parted file (`${pubPrefix}.${cmpName}.ts`)
+    routing_enabled?: boolean
+    _noLoad?: boolean    
 }
 ```
+### The FRONT webpack config:
+
+```javascript
+const path = require('path');
+const fs = require('fs');
+const { spawn } = require('child_process');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const RWSWebpackWrapper  = require('rws-js-client/rws.webpack.config');
+const { RuntimeGlobals } = require('webpack');
+
+
+const executionDir = process.cwd();
+
+const libdir = path.resolve(executionDir, '..', '..', 'target', 'app', 'lib', 'rws');
+const pubdir = path.resolve(executionDir, '..', '..', 'target', 'app');
+
+if(!fs.existsSync(libdir)){
+  fs.mkdirSync(libdir);
+}
+
+const copies = {
+  [libdir]: [
+    './build',
+    './src/styles/compiled/main.rws.css',
+  ],
+  [pubdir]: [
+    './public/service_worker.js',
+    './public/service_worker.js.map'
+  ]
+}
+
+const myappFrontPath = path.resolve(__dirname, '../myapp/frontend');
+
+module.exports = RWSWebpackWrapper({
+  dev: true,
+  hot: false,
+  tsConfigPath: executionDir + '/tsconfig.json',
+  entry: `${executionDir}/src/index.ts`,
+  executionDir: executionDir,
+  publicDir:  path.resolve(executionDir, 'public'),
+  outputDir:  path.resolve(executionDir, 'build'),
+  outputFileName: 'junction.client.js',
+  copyToDir: copies,
+  serviceWorker: './src/service_worker/MyServiceWorker.ts',
+  parted: true,
+  partedPrefix: 'myapp',
+  partedComponentsLocations: ['../myapp', './src'],
+  customServiceLocations: ['${myappFrontPath}/src/services']
+});
+```
+
+
 
 ## Key Components
 
@@ -98,26 +176,34 @@ import RWSClient, { NotifyUiType, NotifyLogType } from '@rws-framework/client';
 //@ts-ignore
 import alertify from 'alertifyjs';
 
-import './styles/main.scss';
-
-import routes from './routing/routes';
-
+import './styles/main.rws.scss';
 import { backendRoutes } from './backendImport';
-
-import initComponents from './application/_initComponents';
 import { provideFASTDesignSystem, allComponents } from '@microsoft/fast-components';
 
-async function initializeApp() {    
-    const theClient = new RWSClient();
+// For single file output (will inject itself to DI on import):
+//import initComponents from './application/_initComponents'
 
+async function initializeApp() {       
+    const theClient = RWSContainer().get(RWSClient);
+    
     theClient.setBackendRoutes(backendRoutes());
-    theClient.addRoutes(routes);    
     
-    theClient.onInit(async () => {
-        initComponents();
+    theClient.onInit(async () => {        
+
+        // For single file output:
+        //initComponents();
+
         provideFASTDesignSystem().register(allComponents);
-    });    
 
+        // const swFilePath: string = `${theClient.appConfig.get('pubUrl')}/service_worker.js`;          
+
+        await theClient.swService.registerServiceWorker();        
+
+        if(theClient.getUser()){
+            theClient.pushUserToServiceWorker({...theClient.getUser(), instructor: false});  
+        }
+
+    });
 
     theClient.setNotifier((message: string, logType: NotifyLogType, uiType: NotifyUiType = 'notification', onConfirm: (params: any) => void) => {
         switch(uiType){
@@ -148,11 +234,11 @@ async function initializeApp() {
                 return;    
         }
     });
-    (window as any).RWSClient = theClient;    
+    
+    theClient.assignClientToBrowser();
 }
 
 initializeApp().catch(console.error);
-
 ```
 
 ## Component Initialization
@@ -203,22 +289,27 @@ component-dir/
 
 ### application/_initComponents.ts
 
+Only if parted mode is false.
+
 ```typescript
-import { ChatNav } from '../components/chat-nav/component';
-import { DefaultLayout } from '../components/default-layout/component';
-import { RWSIcon } from '../components/rws-icon/component';
-import { Loader } from '../components/loader/component';
-import { LineSplitter } from '../components/line-splitter/component';
+import jTrainerComponents from '../../../jtrainer/frontend/src/application/_initComponents';
+
+import { WebChat } from '../../../jtrainer/frontend/src/components/webchat/component';
+import { JunctionTrainer } from '../../../jtrainer/frontend/src/components/trainer/component';
+
+import { BookLoader } from '../components/book-loader/component'
+import { ChatLoader } from '../components/chat-loader/component'
 
 import { registerRWSComponents } from '@rws-framework/client';
 
 export default () => {
-    LineSplitter;
-    DefaultLayout;
-    ChatNav;
-    RWSIcon;
-    Loader;
-    registerRWSComponents(); //register rws components like <rws-uploader> and other comfy components
+    jTrainerComponents();
+    WebChat;
+    JunctionTrainer;
+    BookLoader;    
+    ChatLoader;
+
+    RWSClientInstance.defineAllComponents();
 }
 
 ```
@@ -232,7 +323,7 @@ export default () => {
     theClient.addRoutes(routes);    //routes are optional
     
     theClient.onInit(async () => {
-        initComponents(); //user components from _initComponents.ts
+        initComponents(); //user components from _initComponents.ts (dont run and import when parted: true)
         provideFASTDesignSystem().register(allComponents); // @microsoft/fast-components ready components init
     });    
 
@@ -246,7 +337,12 @@ import { RWSViewComponent,  RWSView, observable, attr } from '@rws-framework/cli
 const options?: RWSDecoratorOptions;
 
 @RWSView('tag-name', options)
-class WebChat extends RWSViewComponent {  
+class WebChat extends RWSViewComponent {
+    @attr tagAttr: string; //HTML tag attr
+    @ngAttr fromNgAttr: string; //HTML attr from angular template
+    @sanitizedAttr htmlAttr: string; //HTML attr that's sanitized with every val change
+    @observable someVar: any; //Var for templates/value change observation
+}
 ```
 
 The decorator options type:
@@ -257,6 +353,65 @@ interface RWSDecoratorOptions{
     styles?: string //relative path to SCSS file (./styles/layout.scss)
     fastElementOptions?: any //the stuff you would insert into static definition in FASTElement class.
 }
+
+```
+
+# Dependency Injection
+
+## Default service usage:
+
+```typescript
+import { RWSViewComponent, RWSView } from 'rws-js-client';
+
+@RWSView('your-tag');
+class YourComponent extends RWSViewComponent {
+    someMethod(url: string): void
+    {
+        this.apiService.get(url);
+    }
+}
+ 
+```
+
+Default services: https://github.com/papablack/rws-client/blob/7d16d9c6d83c81c9fe470eb0f507756bc6c71b35/src/components/_component.ts#L58
+
+## Custom service usage:
+
+```typescript
+import { 
+    NotifyService, RWSView, RWSViewComponent, 
+    WSService, ApiService, ConfigService, 
+    ConfigServiceInstance, UtilsServiceInstance, ApiServiceInstance, 
+    UtilsService, DOMServiceInstance, DOMService, 
+    NotifyServiceInstance, WSServiceInstance, RoutingService, 
+    RoutingServiceInstance, RWSInject
+} from 'rws-js-client';
+
+import DateService, {DateServiceInstance} from '../../my-custom-services/DateService';
+
+
+@RWSView('your-tag')
+class YourComponent extends RWSViewComponent {
+    constructor(
+        @RWSInject(DateService) protected dateService: DateServiceInstance, //custom service - default services from RWSViewComponent below
+        @RWSInject(ConfigService) protected config: ConfigServiceInstance,
+        @RWSInject(RoutingService) protected routingService: RoutingServiceInstance,
+        @RWSInject(DOMService) protected domService: DOMServiceInstance,
+        @RWSInject(UtilsService) protected utilsService: UtilsServiceInstance,
+        @RWSInject(ApiService) protected apiService: ApiServiceInstance,
+        @RWSInject(WSService) protected wsService: WSServiceInstance,
+        @RWSInject(NotifyService) protected notifyService: NotifyServiceInstance
+    ) {
+        super(config, routingService, domService, utilsService, apiService, wsService, notifyService);
+        applyConstructor(this);   //fix-incoming: DI constructor data inheritance problem - applyConstructor in super is bugged. Need tmp workaround.
+    }
+
+    someMethod(url: string): void
+    {
+        this.dateService.get(url);
+    }
+}
+ 
 ```
 
 ## Frontend routes
@@ -321,7 +476,7 @@ after control method we have dynamic types those are: <**ResponseType**, **Paylo
 Example Usage by controller route
 
 ```typescript
-  const apiPromise: Promise<ITalkApiResponse> = ApiService.back.post<ITalkApiResponse, IApiTalkPayload>('talk:models:prompt', {        
+  const apiPromise: Promise<ITalkApiResponse> = this.apiService.back.post<ITalkApiResponse, IApiTalkPayload>('talk:models:prompt', {        
         message: msg,
         model: this.chosenModel,
       });
@@ -330,7 +485,7 @@ Example Usage by controller route
 Example Usage by url
 
 ```typescript
-  const apiPromise: Promise<ITalkApiResponse> = ApiService.post<ITalkApiResponse, IApiTalkPayload>('/api/path/to/action', {        
+  const apiPromise: Promise<ITalkApiResponse> = this.apiService.post<ITalkApiResponse, IApiTalkPayload>('/api/path/to/action', {        
         message: msg,
         model: this.chosenModel,
       });
@@ -388,95 +543,123 @@ import { RWSWSService as WSService } from '@rws-framework/client/src/services/WS
 
 declare const self: ServiceWorkerGlobalScope;
 
-class ServiceWorker extends RWSServiceWorker {
+class MyServiceWorker extends RWSServiceWorker {
+   public tracker: { currentTracker: TimeTracker | null };    
+    public trackersToSync: TimeTracker[];
+
+    protected regExTypes: { [key: string]: RegExp } = {
+        SOME_VIEW: new RegExp('.*:\\/\\/.*\\/#\\/([a-z0-9].*)\\/route\\/action$')
+    };
     ignoredUrls = [
         new RegExp('(.*(?=.[^.]*$).*)/#/login'),
         new RegExp('(.*(?=.[^.]*$).*)/#/logout'),
-    ];
-
-    protected regExTypes = {
-        FLASHCARDS_VIEW: new RegExp('.*:\\/\\/.*\\/#\\/([a-z0-9].*)\\/reports\\/flashcards$')
-    };
+    ];   
 
-    async onInit(): Promise<void>
-    {        
-        type ITheUser = any;
+    constructor(){        
+        super(self, RWSContainer());
+    }
+  
+    checkForbidden(url: string): boolean {
+        if (!url) {
+            return true;
+        }
+  
+        console.log('[SW] Check forbidden', url);
 
-        let THE_USER: ITheUser | null = null;        
-        const toSync: TimeTracker[] = [];
+        return this.ignoredUrls.some((item) => url.match(item));
+    }
 
-        let WS_URL: string | null;
-        self.addEventListener('install', () => {
-            console.log('Service Worker: Installed');
+    isExtraType(id: string){
+        let result: string | null = null;
+        const _self = this;
+      
+        Object.keys(this.regExTypes).forEach(function(key){
+            if(result === null && _self.regExTypes[key].exec(id) !== null){
+                result = key;
+            }
         });
+      
+        return result;
+    }    
 
-        self.addEventListener('activate', () => {
-            console.log('[SW] Service Worker: Activated'); 
-
-            return self.clients.claim();
-        });
+    startServiceWorker(regExTypes: { [key: string]: RegExp }, forbiddenUrls: RegExp[]): JunctionServiceWorker 
+    {        
+        this.tracker = { currentTracker: null };
+        this.ignoredUrls = forbiddenUrls;
+        this.trackersToSync = [];
+        this.regExTypes = regExTypes;       
 
+        return this;
+    }     
 
-        // Send a message to the client page
-        const sendMessageToClient = (clientId: string, payload: any) => {
-            return self.clients.get(clientId)
-                .then((client: any) => {
-                    if (client) {
-                        client.postMessage(payload);
-                    }
-                });
-        };
-
-        interface MSGEvent{
-        data?: {
-            command: string,
-            asset_type?: string,
-            params: any
-        }
-        }
+    async onInit(): Promise<void>
+    {
+        const _self: JunctionServiceWorker = this;
+        let THE_USER: IJunctionUser | null = null;        
+        const toSync: TimeTracker[] = [];
 
-        const checkWs = (): void => {
-            if(!WSService.socket() && WS_URL){
-                WSService.init(WS_URL, THE_USER);
-            }
-        };
+        let WS_URL: string | null;   
+        
+        console.log('Initiating ServiceWorker');
 
-        // Listen for messages from the client page
-        self.addEventListener('message', (event: MSGEvent) => {
+        this.workerScope.addEventListener('message', (event: MSGEvent) => {
+            // console.log(event);
             if(!event.data){
+                console.warn('[SW] Got empty message');
                 return;
             }  
 
             if (event.data.command){
-                console.log('[SW] OP Message:', event.data);
+                console.log('[SW] OP Message:', event.data.command);
             
                 switch (event.data.command) {
                 case 'SET_WS_URL':
                     WS_URL = event.data.params.url;
                     break;
                 case 'SET_USER':      
-                    THE_USER = event.data.params;
-                    checkWs();
+                    if(!this.getUser()){
+                        THE_USER = event.data.params;                        
+                        this.setUser(THE_USER);
+                    }
+                    _self.checkWs(WS_URL, this.getUser());
                     break;
                 case 'START_TRACKING':
-                    checkWs();
-                    if(!WSService.socket() && THE_USER){
+                    _self.checkWs(WS_URL, this.getUser());
+                    if(!this.wsService.socket() && this.getUser()){
                         break;
                     }
-                    SWService.trackActivity(event.data.asset_type, event.data.params.page_location, event.data.params, toSync);
+                    _self.trackActivity(event.data.asset_type, event.data.params.page_location, event.data.params, toSync);
                     break;
                 case 'TRACKER_SAVED':
                     const { clientId, tracker } = event.data.params;
         
-                    sendMessageToClient(clientId, { message: 'TRACKER_SAVED_RESPONSE', data: tracker });
+                    _self.sendMessageToClient(clientId, { message: 'TRACKER_SAVED_RESPONSE', data: tracker });
                     break;  
                 }
             }
-        });
+        });  
     }
+
+    async onActivate(): Promise<void>
+    {        
+        console.log('Activated ServiceWorker');
+     
+        this.startServiceWorker(this.regExTypes, this.ignoredUrls);
+    }
+
+    private checkWs(WS_URL: string, THE_USER: IJunctionUser): boolean 
+    {
+        if(!this.wsService.socket() && WS_URL){
+            this.wsService.init(WS_URL, THE_USER);
+
+            return true;
+        }
+
+        return false;
+    };
 }
 
-ServiceWorker.create();
+MyServiceWorker.create();
 ```
 
 ## Example: WebChat Component
@@ -497,136 +680,181 @@ import { IMessage } from '../chat-message/component';
 import { ITalkApiResponse, BedrockBaseModel, IHyperParameter, 
 
 @RWSView('web-chat')
-class WebChat extends RWSViewComponent {  
+class WebChat extends RWSViewComponent {
 
-  @observable chatContext: IContext = null;
-  @observable chosenModel: BedrockBaseModel = null;
-  @observable injectMessages: IMessage[] = [];
-  @observable hyperParameters: { key: string, value: any }[] = [];
+    static fileList: string[] = [
+        'svg/icon_talk_1.svg'
+    ];
 
-  connectedCallback() {
-    super.connectedCallback();
-    
-    this.on<{ item: IContext }>(WebChatEvents.item.click, (event: CustomEvent<{ item: IContext }>) => {           
-      this.chatContext = event.detail.item;      
-    });  
+    @observable messages: IMessage[] = [];
+    @observable hyperParameters: { key: string, value: any } | any = {};
+    @observable bookId: string = null;
+    @observable chapterNr: string = null;
 
-    this.on<{ item: BedrockBaseModel }>(WebChatEvents.model.set, (event: CustomEvent<{ item: BedrockBaseModel }>) => {
-      if(!event.detail.item){
-        this.chosenModel = null;
-        return;
-      }      
+    @observable chosenModel: BedrockBaseModel = null;
+    @observable chatContext: IContext = { label: 'Book chat' };
 
-      this.chosenModel = {...event.detail.item};    
+    @observable bookModel: IBook = null;
 
-      this.setupModel();
-    });  
+    @observable minified: boolean = true;
 
-    if(!this.chosenModel){
-      this.chosenModel = ClaudeModel;
-      this.setupModel();
-    }
+    @ngAttr custombookid: string = null;
+    @ngAttr customchapternr: string = null;
 
-    this.on<{ item: IMessage }>(WebChatEvents.message.send, (event: CustomEvent<{ item: IMessage }>) => {          
-      this.injectMessages = [event.detail.item];      
-      // this.callStreamApi(event.detail.item);
-      this.callTalkApi(event.detail.item);
-    });    
-   
-  }  
-  setupModel() {
-    // other code
-  }
+    @observable customTemperature: number = 0.7;
+    @observable customTopK: number = 250;
+    @observable customMaxTokensToSample: number = 1024;
+    @observable customTopP: number = 0.7;
 
-  setHyperParam(key: string, value: any): void
-  {
-   // other code
-  }
+    @ngAttr hTemperature?: string = '0.7';
+    @ngAttr hTopK?: string = '250';
+    @ngAttr hMaxTokensToSample?: string = '1024';
+    @ngAttr hTopP?: string = '0.7';
 
-  
-    
-    this.hyperParameters = [
-      ...this.hyperParameters,
-      {
-        key,
-        value
-      }
-    ];
-  }
+    @observable convoId: string;
+    @observable wsId: string;
 
-  private getDefaultParams(provider: string | null)
-  {
-   // other code
-  }
+    @ngAttr dev: PseudoBool = 'false';
+    @ngAttr opened: PseudoBool = 'false';
 
+    @ngAttr userImage: string | null = null;
+    @ngAttr initials: string | null = 'U';
 
-  private async callTalkApi(msg: IMessage): Promise<void>
-  {
+    handlers: (this: WebChat) => IWebChatHandlers = assignHandlers;
+    streamCall: (msg: IMessage) => Promise<void> = callStreamApi;
 
-    type IApiTalkPayload = {
-      message: IMessage;
-      model: any;
-    }    
+    getDefaultHyperParams = getDefaultParams;
+    setHyperParam = setHyperParam;
 
-    try {
-      const apiPromise: Promise<ITalkApiResponse> = ApiService.back.post<ITalkApiResponse, IApiTalkPayload>('talk:models:prompt', {        
-        message: msg,
-        model: this.chosenModel,
-      });
-      
-      this.injectMessages = [msg, {
-        _promise: apiPromise,
-        me: false,
-        author: this.chosenModel.modelName, 
-        content: null,
-        model: this.chosenModel,
-        created_at: new Date()
-      }];        
+    public msgOptions: IConvoMsgOptions = {
+        headerEnabled: false,
+        dateEnabled: false
+    };
 
-    } catch(e: Error | any) {
-      console.error(e);
-    }      
-  }
+    connectedCallback() {
+        super.connectedCallback();
 
-  private async callStreamApi(msg: IMessage): Promise<void>
-  {
+        if (this.routeParams?.dev || this.dev === 'true') {
+            this.dev = 'true';
+        } else {
+            this.dev = 'false';
+        }
 
-    type IApiTalkPayload = {
-      message: IMessage;
-      model: any;
-    }    
+        this.checkForBookId();
+        this.checkForBookChapter();
 
-    const llmStream = new ReadableStream();
+        this.chosenModel = ClaudeModel;
 
-    const sendMsg: IMessage = {       
-      me: false,
-      author: this.chosenModel.modelName, 
-      content: null,
-      model: this.chosenModel,
-      created_at: new Date()
-    };   
+        const provider = this.chosenModel?.providerName?.toLowerCase() || null;
+        const defParams = this.getDefaultHyperParams(provider);
 
-    WSService.sendMessage('send_msg', {
-      modelId: this.chosenModel.modelId,
-      prompt: msg.content
-    });
+        const defaultParams: { [key: string]: any } = {};
+
+        Object.keys(defParams).forEach(paramKey => {
+            if (defParams[paramKey]) {
+                defaultParams[paramKey] = this.setHyperParam(paramKey, defParams[paramKey]);
+            }
+        });
 
-    try {      
-      this.injectMessages = [msg, {          
-          ...sendMsg,
-          _stream: llmStream,
-        }];        
+        this.hyperParameters = { ...defaultParams, ...this.hyperParameters };
 
-    } catch(e: Error | any) {
-      console.error(e);
-    }      
-  }
+        this.wsId = uuid();
+
+        this.on<{ item: IMessage }>(WebChatEvents.message.send, (event: CustomEvent<{ item: IMessage }>) => {
+
+
+            this.streamCall(event.detail.item);
+        });
+
+        if (this.routeParams?.opened || this.opened === 'true') {
+            this.minified = false;
+        }
+
+        if (this.hTemperature) {
+            this.hHandlers.hTemperature(null, this.hTemperature);
+        }
+
+        if (this.hMaxTokensToSample) {
+            this.hHandlers.hMaxTokensToSample(null, this.hMaxTokensToSample);
+        }
+
+        if (this.hTopK) {
+            this.hHandlers.hTopK(null, this.hTopK);
+        }
+
+        if (this.hTopP) {
+            this.hHandlers.hTopP(null, this.hTopP);
+        }
+    }
+    checkForBookId() {
+        this.bookId = this.routeParams.bookId || this.custombookid || null;
+
+        if (this.bookId) {
+            this.apiService.back.get<IBook>('train:get:book', { routeParams: { bookId: this.bookId } }).then((data: IBook) => {
+                this.bookModel = data;
+            });
+        }
+    }
+
+    checkForBookChapter() {
+        this.chapterNr = this.routeParams.chapterNr || this.customchapternr || null;
+    }
+
+    custombookidChanged(oldVal: string, newVal: string) {
+        if (newVal) {
+            this.custombookid = newVal;
+            this.checkForBookId();
+        } else {
+            this.custombookid = null;
+        }
+    }
+
+    customchapternrChanged(oldVal: string, newVal: string) {
+        if (newVal) {
+            this.customchapternr = newVal;
+            this.checkForBookChapter();
+        } else {
+            this.customchapternr = null;
+        }
+    }
+
+    devChanged(oldVal: string, newVal: string) {
+        if (oldVal !== newVal) {
+            this.dev = newVal === 'true' ? 'true' : 'false';
+        }
+    }
+
+    hHandlers: IHyperHandler = getParamChangeHandlers.bind(this)();
+
+    hTemperatureChanged: ChangeHandlerType<string> = this.hHandlers.hTemperature;
+    hMaxTokensToSampleChanged: ChangeHandlerType<string> = this.hHandlers.hMaxTokensToSample;
+    hTopKChanged: ChangeHandlerType<string> = this.hHandlers.hTopK;
+    hTopPChanged: ChangeHandlerType<string> = this.hHandlers.hTopP;
+
+    userImageChanged(oldVal: string, newVal: string) {
+        if (newVal && oldVal !== newVal) {
+            this.userImage = newVal;
+        }
+    }
+
+    initialsChanged(oldVal: string, newVal: string) {
+        if (newVal && oldVal !== newVal) {
+            this.initials = newVal;
+        }
+    }
+
+    convoIdChanged(oldVal: string, newVal: string) {
+        if (newVal && oldVal !== newVal) {
+            console.log(this.convoId);
+            this.convoId = newVal;
+        }
+    }
 }
 
 WebChat.defineComponent();
 
 
-export { WebChat }
+export { WebChat, IContext };
 
 ```
 
@@ -672,7 +900,7 @@ and src/config/config
 Socket route from
 
 ```typescript
- WSService.sendMessage('send_msg', {
+ WSService.sendMessage<PayloadType>('send_msg', {
       modelId: this.chosenModel.modelId,
       prompt: msg.content
     });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rws-framework/client",
   "private": false,
-  "version": "2.1.0",
+  "version": "2.1.1",
   "main": "src/index.ts",
   "scripts": {
     "docs": "typedoc --tsconfig ./tsconfig.json"

package/src/service_worker/src/_service_worker.ts

@@ -74,9 +74,8 @@ abstract class RWSServiceWorker<UserType extends IRWSUser> {
     {
         const className = this.name;
 
-        if (!RWSServiceWorker._instances[className]) {
-            const WSService = RWSContainer().get<WSServiceInstance>(WSServiceInstance);
-            RWSServiceWorker._instances[className] = new this(workerScope, WSService);
+        if (!RWSServiceWorker._instances[className]) {            
+            RWSServiceWorker._instances[className] = new this(workerScope, RWSContainer());
         }
 
         return RWSServiceWorker._instances[className] as InstanceType<T>;

package/src/services/ConfigService.ts

@@ -3,9 +3,11 @@ import IRWSConfig from '../interfaces/IRWSConfig';
 
 
 const _DEFAULTS: {[property: string]: any} = {
-    'pubPrefix': '/',
-    'pubUrl' : window.origin,
-};
+    pubPrefix: '/',
+    pubUrl : window.origin,
+    splitFileDir: '/',
+    splitPrefix: 'rws'
+}
 
 const __SENT_TO_COMPONENTS: string[] = [];
 

package/typedoc.json

@@ -1,6 +1,6 @@
 {
     "out": "docs",
-    "exclude": ["**/node_modules/**", "**/*.spec.ts"],       
+    "exclude": ["**/node_modules/**", "**/*.spec.ts", "**/*.d.ts"],       
     "plugin": ["typedoc-theme-hierarchy", "typedoc-plugin-rename-defaults"],
     "theme": "hierarchy",
     "readme": "./README.md",