@tugitark/vue-widget 1.5.4 → 1.5.12

package/implementation.md

@@ -1,13 +1,13 @@
  Reimplementing The Widget With A Library
 ==========================================
 
-This library uses [@tugitark/declarative-widget](https://gitlab.com/tugitark/integration/libraries/javascript/declarative-widget) to handle the heavy lifting of detecting property changes, downloading the widget script, and (un)loading the actual widget tags on changes.  Basically that library converts the imperative and static Tugi Tark chat widget in to a functional equivalent.  All this library does is call that library from inside a component.
+This library uses [@tugi/declarative-widget](https://gitlab.com/tugitark-integration/libraries/javascript/declarative-widget) to handle the heavy lifting of detecting property changes, downloading the widget script, and (un)loading the actual widget tags on changes.  Basically that library converts the imperative and static Tugi Tark chat widget in to a functional equivalent.  All this library does is call that library from inside a component.
 
 The code below, while unoptimised, demonstrates how this compoment wraps that library.  See [the source code](index.ts) for more details.
 
 ```vue
 <script setup lang="ts">
-import tugiWidget, { type Props } from '@tugitark/declarative-widget';
+import tugiWidget, { type Props } from '@tugi/declarative-widget';
 
 import { defineProps } from 'vue';
 

package/index.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
-import type { Props, TugiWidget, WidgetInitializeOptions, WidgetFreeVersionOptions, TugiWidgetEvents, WidgetFreeSection } from '@tugitark/declarative-widget';
-export type { Props, TugiWidget, WidgetInitializeOptions, WidgetFreeVersionOptions, TugiWidgetEvents, WidgetFreeSection, };
+import type { Props, TugiWidget as TugiWidgetType, WidgetInitializeOptions, WidgetFreeVersionOptions, TugiWidgetEvents, WidgetFreeSection } from '@tugi/declarative-widget';
+export type { Props, TugiWidgetType as TugiWidget, WidgetInitializeOptions, WidgetFreeVersionOptions, TugiWidgetEvents, WidgetFreeSection, };
 type Sections = NonNullable<Props['sections']>;
 type Customise = NonNullable<Props['customize']>;
 declare const TugiWidget: {
@@ -10,6 +10,7 @@ declare const TugiWidget: {
     props: {
         user: StringConstructor;
         jwtFn: FunctionConstructor;
+        baseAddress: StringConstructor;
         tenantId: StringConstructor;
         brandId: StringConstructor;
         brandName: StringConstructor;
@@ -49,6 +50,8 @@ declare const TugiWidget: {
             immediate: boolean;
         };
     };
+    mounted: () => void;
+    unmounted: () => void;
     render: () => any;
 };
 export default TugiWidget;

package/index.js

@@ -1 +1 @@
-import a,{isFree as r}from"@tugitark/declarative-widget";var n,t=String,e=Function,o={type:Boolean,default:void 0},s={data:function(){return{firstTime_:!0}},props:{user:t,jwtFn:e,tenantId:t,brandId:t,brandName:t,language:t,customize:Object,httpUrl:t,wsUrl:t,chatDisabledReason:t,title:t,body:t,sections:Array,open:o,visible:o,onNotification:e,onReady:e,onOpened:e,onClosed:e,onError:e,proactiveMessage:t,proactiveContext:t,ticketLanguageCode:t},methods:{onNotification_:function(i){r(this)&&!this.firstTime_||(n=this.onNotification)&&n(i)},onReady_:function(){this.firstTime_&&(this.firstTime_=!1,(n=this.onReady)&&n())}},watch:{$props:{handler:function(i){i=Object.assign({},i,{onNotification:this.onNotification_,onReady:this.onReady_}),a(i)},deep:!0,immediate:!0}},render:function(){return null}};export default s;
+import s,{destroy as d,isFree as u}from"@tugi/declarative-widget";var o,a=0,i=!1;function f(){i=!1}function c(){i||(i=!0,queueMicrotask(function(){i&&(i=!1,a===0&&d())}))}var e=String,t=Function,r={type:Boolean,default:void 0},l={data:function(){return{firstTime_:!0}},props:{user:e,jwtFn:t,baseAddress:e,tenantId:e,brandId:e,brandName:e,language:e,customize:Object,httpUrl:e,wsUrl:e,chatDisabledReason:e,title:e,body:e,sections:Array,open:r,visible:r,onNotification:t,onReady:t,onOpened:t,onClosed:t,onError:t,proactiveMessage:e,proactiveContext:e,ticketLanguageCode:e},methods:{onNotification_:function(n){u(this)&&!this.firstTime_||(o=this.onNotification)&&o(n)},onReady_:function(){this.firstTime_&&(this.firstTime_=!1,(o=this.onReady)&&o())}},watch:{$props:{handler:function(n){n=Object.assign({},n,{onNotification:this.onNotification_,onReady:this.onReady_}),s(n)},deep:!0,immediate:!0}},mounted:function(){f(),a+=1},unmounted:function(){a=Math.max(0,a-1),c()},render:function(){return null}};export default l;

package/index.md

@@ -8,11 +8,23 @@ Also see [the original integration guide](https://www.tugitark.com/chat-setup) f
  Minimal Example
 -----------------
 
-This is the smallest number of properties that you can pass to `<TugiWidget>` and have it still operate correctly.  These properties are given to you on signing up with Tugi Tark and must be entered accurately.
+To use the Tugi Tark widget on your page, simply call the exported default component.  With no parameters given the code will try its upmost to determine the current player and brand, falling back to unauthenticated users when it can't (which will require them to verify their e-mail address and will not provide their profile to the AI Agent).
 
 ```vue
 <script setup lang="js">
-import TugiWidget from '@tugitark/vue-widget';
+import TugiWidget from '@tugi/vue-widget';
+</script>
+
+<template>
+	<TugiWidget language="EN" />
+</template>
+```
+
+If your server has the standard `/.tugi` endpoints (as provided by our back-end libraries and documented in our [developer documentation](https://gitlab.com/tugitark-integration/docs)) this is enough to get started with the Tugi Widget.  The `/.tugi/jwt/issue` endpoint will be called with no ID given, and if that can return the data for the current player (e.g. from the HTTP session) this is enough.  Alternatively you can pass an ID explicitly:
+
+```vue
+<script setup lang="js">
+import TugiWidget from '@tugi/vue-widget';
 
 const props = defineProps({
 	userId: {
@@ -28,18 +40,18 @@ const props = defineProps({
 </template>
 ```
 
-If your server has the standard `/.tugi` endpoints (as provided by our back-end libraries and documented in our [developer documentation](https://gitlab.com/tugitark/integration/docs)) this is enough to get started with the Tugi Widget.  `user` is the ID within your system of the current player.  How you determine the current player's unique ID depends entirely on your system and is left as a provided parameter here.  This is the ID that the widget will internally pass to the `/.tugi/jwt/issue` endpoint to retrieve the player's profile, and so must in some way identify an end-user on your server.  Technically even `user` is optional, and not passing this either will use the unauthenticated flow (in which the AI Agent has no information on which to base responses, and where a player will require e-mail verification first), or try to get the user's ID from the server.
+`user` is the ID within your system of the current player.  How you determine the current player's unique ID depends entirely on your system and is left as a provided parameter here.  This is the ID that the widget will internally pass to the `/.tugi/jwt/issue` endpoint to retrieve the player's profile, and so must in some way identify an end-user on your server.
 
-Calls to `render` are idempotent, if the parameter objects are equivalent.  The library will perform deep value comparisons between the parameters of two calls and only act on those that have changed.
+Calls to `<TugiWidget />` are idempotent, if the parameter objects are equivalent.  The library will perform deep value comparisons between the parameters of two calls and only act on those that have changed.
 
  Custom Example
 ----------------
 
-This is a more extensive widget example, with colour-scheme customisation and an explicit JWT lookup function.  The HTTP and websocket addresses are also specified, though match the defaults.  The `brand-id`, `brand-name`, and `tenant-id` will be provided by us based on details provided by you when signing up with our system.  They are not secret, so can safely appear in client-side code, but are case-sensitive so must remain exactly as specified by us.  When not specified (as in the previous example) they are retrieved from the `/.tugi/config` endpoint - either a custom version or one served by the `Tugi Players` library.
+This is a more extensive widget example, with colour-scheme customisation and an explicit JWT lookup function.  The HTTP and websocket addresses are also specified, though match the defaults.  The `brand-id`, `brand-name`, and `tenant-id` will be provided by us based on details provided by you when signing up with our system.  They are not secret, so can safely appear in client-side code, but are case-sensitive so must remain exactly as specified by us.  When not specified (as in the previous example) they are retrieved from the `/.tugi/config` endpoint - either a custom version or one served by the `Tugi Players` library.  `language` will set the language for the ticket.  If it is not given the user will have to select one when they open a new conversation.
 
 ```vue
 <script setup lang="ts">
-import TugiWidget from '@tugitark/vue-widget';
+import TugiWidget from '@tugi/vue-widget';
 
 interface Props {
 	getUserId: () => string;
@@ -74,6 +86,7 @@ async function jwtFn() {
 			homePageBackgroundColor: 'hsla(36, 100%, 37%, 0.2)',
 			homePageTextColor: '#2c3e50',
 		}"
+		language="EN"
 	/>
 </template>
 ```
@@ -99,6 +112,7 @@ The full list of properties that can be passed to the `<TugiWidget>` component a
 * `on-error` Optional.  An event callback triggered when an error occurs.  If this is not given all errors are printed to the console.
 * `open` Optional.  When `true` the widget is forced to be open.  When `false` it is forced to be closed.  When not specified normal user control resumes.
 * `visible` Optional.  When `false` the widget can't be seen.
+* `base-address` Optional.  The JWT and widget config are requested by default from `/.tugi/jwt/issue` and '/.tugi/config` respectively.  When given, the value of `baseAddress` will be prepended to these addresses to use (when, for example, `baseAddress is `/casino`) :`/casino/.tugi/jwt/issue` and `/casino/.tugi/config`.
 
 The following two properties should all be specified together.  If either of them is missing then nothing will happen:
 
@@ -115,7 +129,7 @@ If both `tugi-fn` and `user` are missing from the `<TugiWidget>` properties AND
 
 ```vue
 <script setup lang="js">
-import TugiWidget from '@tugitark/vue-widget';
+import TugiWidget from '@tugi/vue-widget';
 </script>
 
 <template>
@@ -191,7 +205,7 @@ While there can be only one widget on the page there can be multiple `<TugiWidge
 </template>
 ```
 
-[Click here](implementation.md) to see how this component wraps the underlying [@tugitark/declarative-widget](https://gitlab.com/tugitark/integration/libraries/javascript/declarative-widget) library in a react component.
+[Click here](implementation.md) to see how this component wraps the underlying [@tugi/declarative-widget](https://gitlab.com/tugitark-integration/libraries/javascript/declarative-widget) library in a react component.
 
-[Click here](https://gitlab.com/tugitark/integration/libraries/javascript/declarative-widget/implementation.md) to get a better understanding of everything that that library is doing behind the scenes to inject the main widget script in to a page and initialise it.
+[Click here](https://gitlab.com/tugitark-integration/libraries/javascript/declarative-widget/implementation.md) to get a better understanding of everything that that library is doing behind the scenes to inject the main widget script in to a page and initialise it.
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@tugitark/vue-widget",
-	"version": "1.5.4",
-	"description": "Wraps the tugitark widget in a Vue component.",
+	"version": "1.5.12",
+	"description": "Wraps the Tugi Widget in a Vue component.",
 	"scripts": {
 		"build": "npx esbuild index.ts --target=es6 --outfile=index.js && sed -i 's/\\bconst\\b/var/g' index.js && sed -i 's/\\blet\\b/var/g' index.js && npx esbuild index.js --allow-overwrite --minify --target=es5 --outfile=index.js && npx tsc --noErrorTruncation --declaration --emitDeclarationOnly --target es6 --module nodenext --moduleResolution nodenext --outDir . index.ts"
 	},
@@ -12,7 +12,7 @@
 		"index.md"
 	],
 	"dependencies": {
-		"@tugitark/declarative-widget": "^1.3.3"
+		"@tugitark/declarative-widget": "^1.3.10"
 	},
 	"peerDependencies": {
 		"vue": ">=0.0.0"
@@ -26,11 +26,16 @@
 		"Typescript",
 		"Vue",
 		"Tugitark",
+		"Tugi",
 		"Casino",
 		"Integration",
 		"JWT",
 		"Library"
 	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://gitlab.com/tugitark-integration/libraries/javascript/vue-widget.git"
+	},
 	"author": "alex.cole@tugitark.com",
 	"license": "(c) 2026 Tugi Tark OÜ"
-}
+}