@tugitark/react-widget 1.0.0 → 1.1.0

package/index.d.ts

@@ -0,0 +1,3 @@
+import type { Props } from '@tugitark/declarative-widget';
+declare function Widget(p: Props): null;
+export default Widget;

package/index.js

@@ -1,7 +1,35 @@
 // Copyright (c) 2026, TugiTark.  All rights reserved.
 
-/// <reference types="Widget" />
+import { useState } from 'react';
+
+import render from '@tugitark/declarative-widget';
+
+function Widget(props) {
+	// Is this the first time this component has been rendered ever?
+	const [firstTime, setFirstTime] = useState(true);
+
+	function onNotification(hasNotification: boolean) {
+		if (props.jwtFn == null && props.user == null) {
+			if (firstTime) {
+				// Replicate FAQ internal behaviour at a per-component level.
+				props.onNotification?.(hasNotification);
+			}
+		} else {
+			props.onNotification?.(hasNotification);
+		}
+	}
+
+	function onReady() {
+		if (firstTime) {
+			setFirstTime(false);
+			props.onReady?.();
+		}
+	}
+
+	render({ ...props, onReady, onNotification });
+
+	return null;
+}
 
-import Widget from './Widget.tsx';
 export default Widget;
 

package/index.md

@@ -145,4 +145,43 @@ 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
+return (
+	disabled
+		? <TugiWidget
+			chatDisabledReason="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
+			jwtFn={jwtFn}
+			brandId="a040050697fc4b2db16acfbbad1d0da4"
+			brandName="Super Casino"
+			tenantId="gb-casinos-ltd"
+			httpUrl="https://app.tugi.ai/tugi.widget"
+			wsUrl="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',
+			}}
+		/>
+	);
+```
 

package/package.json

@@ -1,18 +1,20 @@
 {
 	"name": "@tugitark/react-widget",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Wraps the tugitark widget in a React component.",
 	"scripts": {
 		"release": "npm publish --access public"
 	},
 	"files": [
-		"Widget.tsx",
+		"index.d.ts",
 		"index.js",
 		"index.md"
 	],
 	"dependencies": {
-		"@tugitark/declarative-widget": "^1.0.0",
-		"react": ">=16.3.0"
+		"@tugitark/declarative-widget": "^1.0.2"
+	},
+	"peerDependencies": {
+		"react": ">=0.0.0"
 	},
 	"keywords": [
 		"Typescript",

package/Widget.tsx

@@ -1,38 +0,0 @@
-// Copyright (c) 2026, TugiTark.  All rights reserved.
-
-import * as React from 'react';
-import { useState } from 'react';
-
-import render, { Props } from '@tugitark/declarative-widget';
-
-function Widget(props: Props) {
-	// Is this the first time this component has been rendered ever?
-	const [firstTime, setFirstTime] = useState(true);
-
-	function onNotification(hasNotification: boolean) {
-		if (props.jwtFn == null && props.user == null) {
-			if (firstTime) {
-				// Replicate FAQ internal behaviour at a per-component level.
-				props.onNotification?.(hasNotification);
-			}
-		} else {
-			props.onNotification?.(hasNotification);
-		}
-	}
-
-	function onReady() {
-		if (firstTime) {
-			setFirstTime(false);
-			props.onReady?.();
-		}
-	}
-
-	render({ ...props, onReady, onNotification });
-
-	return (
-		<></>
-	);
-}
-
-export default Widget;
-