@tugitark/vue-widget 1.0.5 → 1.1.1

package/index.js

@@ -1,7 +1,93 @@
 // Copyright (c) 2026, TugiTark.  All rights reserved.
 
-/// <reference types="Widget" />
+import render from '@tugitark/declarative-widget';
 
-import Widget from './Widget.vue';
-export default Widget;
+// Weirdly, this way of declaring a `vue` component has absolutly no dependencies on `vue`...
+export default {
+	data() {
+		return {
+			firstTime_: true,
+			props_: {},
+			props_: {},
+		};
+	},
+	props: {
+		// Full props.
+		user: [String, null],
+		jwtFn: Function,
+		tenantId: String,
+		brandId: String,
+		brandName: String,
+		language: String,
+		customize: Object,
+		httpUrl: String,
+		wsUrl: String,
+		// Free props.
+		chatDisabledReason: String,
+		title: String,
+		body: String,
+		sections: Array,
+		// Display props.
+		open: {
+			type: Boolean,
+			default: undefined,
+		},
+		visible: {
+			type: Boolean,
+			default: undefined,
+		},
+		onNotification: Function,
+		onReady: Function,
+		onOpened: Function,
+		onClosed: Function,
+		onError: Function,
+		// Two of these are required to open a message.
+		proactiveMessage: String,
+		proactiveContext: String,
+		ticketLanguageCode: String,
+	},
+	methods: {
+		onNotification_(hasNotification) {
+			if (this.jwtFn == null && this.user == null) {
+				if (this.firstTime_) {
+					// Replicate FAQ internal behaviour at a per-component level.
+					this.onNotification?.(hasNotification);
+				}
+			} else {
+				this.onNotification?.(hasNotification);
+			}
+		},
+		onReady_() {
+			if (this.firstTime_) {
+				this.firstTime_ = false;
+				this.onReady?.();
+			}
+		},
+		onOpened_() { return this.onOpened?.(); },
+		onClosed_() { return this.onClosed?.(); },
+		onError_(e) { return this.onError?.(e); },
+	},
+	watc() {
+		return render(this.props_);
+	},
+	watch: {
+		$props: {
+			handler(props) {
+				render({
+					...props,
+					onNotification: this.onNotification_,
+					onReady: this.onReady_,
+					onOpened: this.onOpened_,
+					onClosed: this.onClosed_,
+					onError: this.onError_,
+				});
+			},
+			deep: true,
+			immediate: true,
+		},
+	},
+	render() {
+		return null;
+	},
+};
 

package/index.md

@@ -24,14 +24,14 @@ const props = defineProps({
 <template>
 	<TugiWidget
 		:user="props.userId"
-		brand_id="a040050697fc4b2db16acfbbad1d0da4"
-		brand_name="Super Casino"
-		tenant_id="gb-casinos-ltd"
+		brand-id="a040050697fc4b2db16acfbbad1d0da4"
+		brand-name="Super Casino"
+		tenant-id="gb-casinos-ltd"
 	/>
 </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 `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.
+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 `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.
 
 `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.
 
@@ -63,9 +63,9 @@ async function jwtFn() {
 <template>
 	<TugiWidget
 		:jwt-fn="jwtFn"
-		brand_id="a040050697fc4b2db16acfbbad1d0da4"
-		brand_name="Super Casino"
-		tenant_id="gb-casinos-ltd"
+		brand-id="a040050697fc4b2db16acfbbad1d0da4"
+		brand-name="Super Casino"
+		tenant-id="gb-casinos-ltd"
 		http-url="https://app.tugi.ai/tugi.widget"
 		ws-url="wss://ws.tugi.ai"
 		:customize="{
@@ -155,4 +155,41 @@ The following optional properties are shared with the full version:
 * `open`
 * `visible`
 
+ Notes
+-------
+
+While there can be only one widget on the page there can be multiple `<TugiWidget>` components at once.  Which one will be used is non-deterministic - even if you have one `<TugiWidget>` with `visible={true}` and another one with `visible={false}` this will not guarantee that the visible one is the one that gets shown, the invisible one may be "shown", resulting in neither being seen.  The one selected is based on internal render and update orders.  Further, having two at once may result in the widget being constantly unloaded and reloaded even when nothing has changed as the underlying code flips repeatedly between them.  If you have two versions of the widget shown in different circumstances then make sure that the whole component is conditional:
+
+
+```javascript
+<template>
+	<TugiWidget v-if="disabled"
+		chat-disabled-reason="You are not signed in."
+		title="FAQ"
+		body="Let us help you get started."
+		:sections="[
+			{ title: 'Who are we?', content: 'We are Tugi Tark.' },
+			{ title: 'What do we do?', content: 'Make awesome customer support solutions.' },
+			{ title: 'How?', content: 'Smart AI agents who know all about your customers and services.' },
+			{ title: 'How do I join?', content: 'Click the sign-up botton at the top-right of the page.' },
+		]"
+	/>
+	<TugiWidget v-else
+		:jwt-fn="jwtFn"
+		brand-id="a040050697fc4b2db16acfbbad1d0da4"
+		brand-name="Super Casino"
+		tenant-id="gb-casinos-ltd"
+		http-url="https://app.tugi.ai/tugi.widget"
+		ws-url="wss://ws.tugi.ai"
+		:customize="{
+			title: 'Tugi Casino Help',
+			showTitle: true,
+			fontColor: '#2c3e50',
+			primaryColor: '#2c3e50',
+			secondaryColor: 'hsla(36, 100%, 50%, 1)',
+			homePageBackgroundColor: 'hsla(36, 100%, 37%, 0.2)',
+			homePageTextColor: '#2c3e50',
+		}"
+	/></template>
+```
 

package/package.json

@@ -1,18 +1,16 @@
 {
 	"name": "@tugitark/vue-widget",
-	"version": "1.0.5",
+	"version": "1.1.1",
 	"description": "Wraps the tugitark widget in a Vue component.",
-	"scripts": {
-		"release": "npm publish --access public"
-	},
 	"files": [
-		"Widget.vue",
 		"index.js",
 		"index.md"
 	],
 	"dependencies": {
-		"@tugitark/declarative-widget": "^1.0.0",
-		"vue": "^3.3.0"
+		"@tugitark/declarative-widget": "^1.0.1"
+	},
+	"peerDependencies": {
+		"vue": ">=0.0.0"
 	},
 	"keywords": [
 		"Typescript",

package/Widget.vue

@@ -1,39 +0,0 @@
-// Copyright (c) 2026, TugiTark.  All rights reserved.
-
-<script setup lang="ts">
-	import { watch, ref } from 'vue';
-	import render, { Props } from '@tugitark/declarative-widget';
-
-	// Weird vue behaviour with optional boolean props.	Ensure they don't default to `false`.
-	const props = withDefaults(defineProps<Props>(), {
-		open: void 0,
-		visible: void 0,
-	});
-
-	// Is this the first time this component has been rendered ever?
-	const firstTime = ref(true);
-
-	function onNotification(hasNotification: boolean) {
-		if (props.jwtFn == null && props.user == null) {
-			if (firstTime.value) {
-				// Replicate FAQ internal behaviour at a per-component level.
-				props.onNotification?.(hasNotification);
-			}
-		} else {
-			props.onNotification?.(hasNotification);
-		}
-	}
-
-	function onReady() {
-		if (firstTime.value) {
-			firstTime.value = false;
-			props.onReady?.();
-		}
-	}
-
-	watch(props, (p) => render({ ...p, onReady, onNotification }), { deep: true, immediate: true });
-</script>
-
-<template>
-</template>
-