@elia-assistant/chatui 1.0.25 → 2.0.0

package/README.md

@@ -15,20 +15,74 @@ Ships as a pre-built ESM bundle and a CDN-ready IIFE bundle. Config-compatible w
 npm install @elia-assistant/chatui
 ```
 
-```ts
-// src/main.tsx
-import { App as ChatWidget } from '@elia-assistant/chatui'
-import { useSettingsStore } from '@elia-assistant/chatui/store'
+```tsx
+// src/ChatWidget.tsx
+import { useEffect, useRef } from 'react'
+import { createChat, type ChatInstance } from '@elia-assistant/chatui'
+
+export function ChatWidget() {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const instanceRef = useRef<ChatInstance | null>(null)
+
+  useEffect(() => {
+    if (!containerRef.current || instanceRef.current) return
+    instanceRef.current = createChat({
+      target: containerRef.current,
+      webhookUrl: 'https://your-n8n.example.com/webhook/abc',
+      mode: 'window',
+    })
+    return () => {
+      // Deferred so StrictMode's double-invoke doesn't unmount mid-render.
+      const instance = instanceRef.current
+      instanceRef.current = null
+      setTimeout(() => instance?.unmount(), 0)
+    }
+  }, [])
+
+  return <div ref={containerRef} style={{ height: '100%' }} />
+}
+```
+
+`createChat()` mounts into a shadow root, so the widget's CSS is fully isolated from your app's.
+
+The host's `vite.config.ts` needs `optimizeDeps.exclude: ['@elia-assistant/chatui']` so Vite doesn't re-bundle the already-bundled package. See [example.html](./example.html) for the full integration guide.
+
+#### Raw component tree (no shadow root)
+
+If you need the widget inside your own React tree rather than a shadow root, render `<App />` directly. It reads its stores and translations from context, so you must build them and supply both providers:
 
-useSettingsStore.getState().setConfig({
+```tsx
+import { I18nextProvider } from 'react-i18next'
+import {
+  App,
+  StoreProvider,
+  createChatI18n,
+  createSettingsStore,
+  createChatStore,
+} from '@elia-assistant/chatui'
+
+// Create these once, outside the component - not on every render.
+const i18n = createChatI18n()
+const settingsStore = createSettingsStore(i18n)
+const chatStore = createChatStore()
+
+settingsStore.getState().setConfig({
   webhookUrl: 'https://your-n8n.example.com/webhook/abc',
   mode: 'window',
 })
 
-// then render <ChatWidget /> inside a full-height container
+export function ChatWidget() {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <StoreProvider settingsStore={settingsStore} chatStore={chatStore}>
+        <App />
+      </StoreProvider>
+    </I18nextProvider>
+  )
+}
 ```
 
-The host's `vite.config.ts` needs `optimizeDeps.exclude: ['@elia-assistant/chatui']` so Vite doesn't re-bundle the already-bundled package. See [example.html](./example.html) for the full integration guide.
+Without both providers `<App />` throws `useSettingsStore must be used within a <StoreProvider>`. Note that this path does not inject the widget's CSS for you - prefer `createChat()` unless you specifically need to avoid the shadow root.
 
 ### Plain HTML (CDN, no bundler)
 
@@ -56,9 +110,24 @@ const instance = createChat({
   webhookUrl: '...',
   mode: 'window',
 })
-// instance.unmount() to remove
+
+instance.setConfig({ botName: 'Support' })  // patch config without remounting
+instance.setTheme('cosmos')
+instance.setLanguage('sk')
+instance.unmount()                          // remove
+```
+
+### Multiple widgets on one page
+
+Every `createChat()` call gets its own config, theme, language and conversation state, so two widgets never fight over each other's settings. They do share `localStorage`, though - pass `storageNamespace` to keep their persisted state apart:
+
+```ts
+createChat({ target: '#support', webhookUrl: '...' })
+createChat({ target: '#demo', webhookUrl: '...', storageNamespace: 'demo' })
 ```
 
+Omit `storageNamespace` for the single-widget case and the default storage keys are used, so existing installs keep their saved settings and history.
+
 ---
 
 ## Features
@@ -69,15 +138,16 @@ const instance = createChat({
 - **Bottom-sheet style** — opt-in `fullscreenSheet` mode covers ~3/4 of the screen with a rounded top instead of going edge-to-edge
 - **Optional tabs** — surface a Notifications feed (URL or inline JSON) and a searchable FAQ alongside the chat
 - **SSE streaming** — optional word-by-word bot responses
-- **10 built-in themes** — Midnight, Ivory, Sunrise, Cosmos, Forest, Ocean, Cherry, Navy, Lavender, Amber; switch at runtime
+- **16 built-in themes** — Sunrise, Ivory, Cherry, Sky, Lavender, Nice, Navy, Amber, Slate, Graphite, Stone, Cosmos, Forest, Ocean, Cherry Dark, Midnight; switch at runtime
 - **30 built-in avatars** + file upload (max 500 KB) or URL — same picker for the floating button icon
 - **CTA popup** — timed speech-bubble with optional Web Audio notification, window mode only
 - **Conversation history** — optional sidebar with persistent multi-session history
 - **Per-language content** — initial messages, bot name, CTA text, welcome subtitle, tab titles, all configurable per language
-- **Multilingual UI** — English and Slovak bundled; extend via `i18next.addResourceBundle` at runtime
+- **Multilingual UI** — English and Slovak bundled; extend via `instance.i18n.addResourceBundle` at runtime
 - **Markdown rendering** — bot messages render full GFM via `react-markdown`
 - **Configurable "Powered by" footer** — change the link text/URL or hide it entirely
 - **Persistent settings** — config + theme + language survive page reloads (`localStorage`)
+- **Multi-instance safe** — every `createChat()` call is fully isolated; `storageNamespace` separates their persisted state too
 - **Lockable UI** — `hideSettings: true` removes the gear, theme picker, and settings modal (default for npm consumers)
 - **Export config** — generate ready-to-paste host code from the settings modal
 
@@ -85,7 +155,7 @@ const instance = createChat({
 
 ## Configuration
 
-All options live on `ChatConfig`. Set them once at boot via `setConfig()` (or pass to `createChat()`).
+All options live on `ChatConfig`. Pass them to `createChat()`, or patch them later via `instance.setConfig()`.
 
 ### Required
 
@@ -160,7 +230,7 @@ A tab is shown only if its block has `feedUrl` or `items`. If neither tab is con
 | `initialMessages` | `string[]` | Global fallback initial bot messages |
 | `i18n[lang]` | `LangOverride` | Per-language content overrides |
 
-To set the initial UI language, call `useSettingsStore.getState().setLanguage('sk')` after `setConfig()` (or pass `language: 'sk'` to `createChat()`). On a fresh browser, the default falls back to `navigator.language` then `'en'`.
+To set the initial UI language, pass `language: 'sk'` to `createChat()` (or call `instance.setLanguage('sk')` later). On a fresh browser, the default falls back to `navigator.language` then `'en'`.
 
 `LangOverride` fields: `initialMessages`, `ctaText`, `botName`, `welcomeSubtitle`, `tabs.{notifications,help,chat}.title`.
 
@@ -172,16 +242,22 @@ Resolution chain: `i18n[activeLang].X` -> `i18n['en'].X` -> global `config.X`.
 
 | ID | Name | Style | Accent |
 |---|---|---|---|
-| `midnight` | Midnight | Dark | Indigo `#6366f1` |
-| `ivory` | Ivory | Light | Indigo `#4338ca` |
 | `sunrise` | Sunrise | Light | Orange `#f97316` |
-| `cosmos` | Cosmos | Dark | Purple `#a855f7` |
-| `forest` | Forest | Dark | Green `#22c55e` |
-| `ocean` | Ocean | Dark | Cyan `#06b6d4` |
+| `ivory` | Ivory | Light | Indigo `#4338ca` |
 | `cherry` | Cherry | Light | Red `#ef4444` |
-| `navy` | Navy | Dark | Blue `#3b82f6` |
+| `sky` | Sky | Light | Blue `#5ba1da` |
 | `lavender` | Lavender | Light | Violet `#8b5cf6` |
+| `nice` | Nice | Light | Cyan `#3f7e83` |
+| `navy` | Navy | Light | Blue `#ebf3f2` |
 | `amber` | Amber | Dark | Amber `#f59e0b` |
+| `slate` | Slate | Light | Blue `#38bdf8` |
+| `graphite` | Graphite | Blue `#4185eb` |
+| `stone` | Stone | Light | Orange `#fbbf24` |
+| `cosmos` | Cosmos | Dark | Purple `#a855f7` |
+| `forest` | Forest | Dark | Green `#22c55e` |
+| `ocean` | Ocean | Dark | Cyan `#06b6d4` |
+| `cherryDark` | Cherry Dark | Dark | Red `#ef4444` |
+| `midnight` | Midnight | Dark | Indigo `#6366f1` |
 
 Defined in `src/themes.ts` — add your own by appending to the array.
 
@@ -256,19 +332,22 @@ The FAQ tab includes a search box that filters by case-insensitive substring acr
 Bundled languages: `en`, `sk` (split into `dist/chunks/translation-*.js`, lazy-loaded).
 To add another without rebuilding chatui, register the bundle yourself:
 
+Each instance owns a private i18next instance, exposed as `instance.i18n`. Register the bundle there - a bundle added to the global `i18next` singleton will not reach the widget:
+
 ```ts
-import i18n from 'i18next'
-import { useSettingsStore } from '@elia-assistant/chatui/store'
+const instance = createChat({ target: '#chat', webhookUrl: '...' })
 
-i18n.addResourceBundle('fr', 'translation', {
+instance.i18n?.addResourceBundle('fr', 'translation', {
   welcome:  { subtitle: 'Commencez une conversation.' },
   input:    { placeholder: 'Tapez un message...' },
   // ...full keys: see node_modules/@elia-assistant/chatui/dist/chunks/translation-*.js
 })
 
-useSettingsStore.getState().setLanguage('fr')
+instance.setLanguage('fr')
 ```
 
+`instance.i18n` is `undefined` only when `createChat()` was called before `DOMContentLoaded` and the widget has not mounted yet.
+
 Then any per-language overrides live under `config.i18n.fr`.
 
 ---
@@ -278,13 +357,14 @@ Then any per-language overrides live under `config.i18n.fr`.
 Hidden by default for npm consumers — configuration is expected to live in code. Flip `hideSettings: false` to expose the gear, theme picker, and settings modal (handy for admin dashboards, internal tools, live demos):
 
 ```ts
-useSettingsStore.getState().setConfig({
+createChat({
+  target:       '#chat',
   webhookUrl:   '...',
   hideSettings: false,
 })
 ```
 
-The settings modal includes an **Export config** button that generates the exact `setConfig()` call for pasting into a host project.
+The settings modal includes an **Export config** button that generates the exact `instance.setConfig()` call for pasting into a host project.
 
 The chatui repo's own `npm run dev` unlocks the UI automatically.
 
@@ -333,6 +413,26 @@ React 19 is a peer dependency for the ESM bundle. The IIFE bundle includes React
 
 ---
 
+## Migrating from 1.x
+
+2.0 removed the module-level global stores. Each `createChat()` call now owns its config, theme, language and conversation state, which is what makes multiple widgets on one page possible. `createChat()` itself is unchanged, so **CDN / `Chatui.createChat()` integrations need no changes** - and the default `localStorage` keys are unchanged, so saved settings and chat history carry over.
+
+What did change:
+
+| 1.x | 2.0 |
+|---|---|
+| `import { useSettingsStore } from '@elia-assistant/chatui/store'` | removed - use the `createChat()` instance |
+| `useSettingsStore.getState().setConfig({...})` | `instance.setConfig({...})`, or pass the options to `createChat()` |
+| `useSettingsStore.getState().setTheme(id)` | `instance.setTheme(id)` |
+| `useSettingsStore.getState().setLanguage(lang)` | `instance.setLanguage(lang)` |
+| `useChatStore` from `@elia-assistant/chatui/chat-store` | removed - no global chat store exists |
+| `i18next.addResourceBundle(...)` on the global singleton | `instance.i18n?.addResourceBundle(...)` |
+| `<App />` rendered directly | still supported, but must be wrapped in `<I18nextProvider>` + `<StoreProvider>` (see [Install](#raw-component-tree-no-shadow-root)) |
+
+The `./store` and `./chat-store` subpath exports now expose only the `createSettingsStore` / `createChatStore` factories and their state types. Importing `useSettingsStore` from them fails at import time rather than silently returning something without `.getState()`.
+
+---
+
 ## License
 
 MIT - see [LICENSE](./LICENSE). Built by [Igor Demovic](https://github.com/idemovic).

package/dist/App.d.ts

@@ -1,3 +1,2 @@
-import './i18n.ts';
 import './index.css';
 export declare function App(): import("react/jsx-runtime").JSX.Element;

package/dist/chat-store.js

@@ -1,149 +1,151 @@
-import { n as e, t } from "./chunks/middleware-Brf3TxqP.js";
+import { n as e, r as t, t as n } from "./chunks/middleware-BG8DEvI8.js";
 //#region src/store/chatStore.ts
-function n() {
+function r() {
 	return Math.random().toString(36).slice(2) + Date.now().toString(36);
 }
-var r = e()(t((e, t) => ({
-	sessions: [],
-	activeSessionId: null,
-	messages: {},
-	isStreaming: !1,
-	awaitingAgentReply: {},
-	tokens: {},
-	createSession() {
-		let t = n(), r = {
-			id: t,
-			title: "New conversation",
-			createdAt: Date.now()
-		};
-		return e((e) => ({
-			sessions: [r, ...e.sessions],
-			activeSessionId: t,
-			messages: {
-				...e.messages,
-				[t]: []
-			}
-		})), t;
-	},
-	setToken(t, n, r) {
-		e((e) => ({ tokens: {
-			...e.tokens,
-			[t]: {
-				token: n,
-				expiresAt: r
-			}
-		} }));
-	},
-	setActiveSession(t) {
-		e({ activeSessionId: t });
-	},
-	addMessage(t, n) {
-		e((e) => {
-			let r = e.messages[t] ?? [];
-			if (r.some((e) => e.id === n.id)) return {};
-			let i = [...r, n];
-			return {
-				sessions: e.sessions.map((e) => e.id !== t || e.title !== "New conversation" || n.role !== "user" ? e : {
-					...e,
-					title: n.content.slice(0, 50)
-				}),
+function i(i) {
+	return e()(n((e, t) => ({
+		sessions: [],
+		activeSessionId: null,
+		messages: {},
+		isStreaming: !1,
+		awaitingAgentReply: {},
+		tokens: {},
+		createSession() {
+			let t = r(), n = {
+				id: t,
+				title: "New conversation",
+				createdAt: Date.now()
+			};
+			return e((e) => ({
+				sessions: [n, ...e.sessions],
+				activeSessionId: t,
 				messages: {
 					...e.messages,
-					[t]: i
+					[t]: []
 				}
-			};
-		});
-	},
-	appendToLastBot(t, n) {
-		e((e) => {
-			let r = e.messages[t] ?? [];
-			if (r.length === 0) return {};
-			let i = r[r.length - 1];
-			if (i.role !== "bot") return {};
-			let a = [...r.slice(0, -1), {
-				...i,
-				content: i.content + n
-			}];
-			return { messages: {
-				...e.messages,
-				[t]: a
-			} };
-		});
-	},
-	removeLastBotIfEmpty(t) {
-		e((e) => {
-			let n = e.messages[t] ?? [];
-			if (n.length === 0) return {};
-			let r = n[n.length - 1];
-			return r.role !== "bot" || r.content !== "" ? {} : { messages: {
-				...e.messages,
-				[t]: n.slice(0, -1)
-			} };
-		});
-	},
-	setStreaming(t) {
-		e({ isStreaming: t });
-	},
-	setAwaitingAgentReply(t, n) {
-		e((e) => {
-			let r = { ...e.awaitingAgentReply };
-			return n ? r[t] = !0 : delete r[t], { awaitingAgentReply: r };
-		});
-	},
-	updateMessageStatus(t, n, r) {
-		e((e) => {
-			let i = e.messages[t];
-			if (!i) return {};
-			let a = !1, o = i.map((e) => e.id !== n || e.status === r ? e : (a = !0, {
-				...e,
-				status: r
-			}));
-			return a ? { messages: {
-				...e.messages,
-				[t]: o
-			} } : {};
-		});
-	},
-	deleteSession(t) {
-		e((e) => {
-			let n = e.sessions.filter((e) => e.id !== t), r = { ...e.messages };
-			delete r[t];
-			let i = { ...e.awaitingAgentReply };
-			return delete i[t], {
-				sessions: n,
-				messages: r,
-				awaitingAgentReply: i,
-				activeSessionId: e.activeSessionId === t ? n[0]?.id ?? null : e.activeSessionId
-			};
-		});
-	},
-	renameSession(t, n) {
-		e((e) => ({ sessions: e.sessions.map((e) => e.id === t ? {
-			...e,
-			title: n
-		} : e) }));
-	},
-	clearMessages(n) {
-		e((e) => {
-			let t = { ...e.awaitingAgentReply };
-			return delete t[n], {
-				messages: {
+			})), t;
+		},
+		setToken(t, n, r) {
+			e((e) => ({ tokens: {
+				...e.tokens,
+				[t]: {
+					token: n,
+					expiresAt: r
+				}
+			} }));
+		},
+		setActiveSession(t) {
+			e({ activeSessionId: t });
+		},
+		addMessage(t, n) {
+			e((e) => {
+				let r = e.messages[t] ?? [];
+				if (r.some((e) => e.id === n.id)) return {};
+				let i = [...r, n];
+				return {
+					sessions: e.sessions.map((e) => e.id !== t || e.title !== "New conversation" || n.role !== "user" ? e : {
+						...e,
+						title: n.content.slice(0, 50)
+					}),
+					messages: {
+						...e.messages,
+						[t]: i
+					}
+				};
+			});
+		},
+		appendToLastBot(t, n) {
+			e((e) => {
+				let r = e.messages[t] ?? [];
+				if (r.length === 0) return {};
+				let i = r[r.length - 1];
+				if (i.role !== "bot") return {};
+				let a = [...r.slice(0, -1), {
+					...i,
+					content: i.content + n
+				}];
+				return { messages: {
 					...e.messages,
-					[n]: []
-				},
-				awaitingAgentReply: t
-			};
-		}), t().renameSession(n, "New conversation");
-	}
-}), {
-	name: "chatui-chat",
-	partialize: (e) => ({
-		sessions: e.sessions,
-		activeSessionId: e.activeSessionId,
-		messages: e.messages
-	})
-}));
+					[t]: a
+				} };
+			});
+		},
+		removeLastBotIfEmpty(t) {
+			e((e) => {
+				let n = e.messages[t] ?? [];
+				if (n.length === 0) return {};
+				let r = n[n.length - 1];
+				return r.role !== "bot" || r.content !== "" ? {} : { messages: {
+					...e.messages,
+					[t]: n.slice(0, -1)
+				} };
+			});
+		},
+		setStreaming(t) {
+			e({ isStreaming: t });
+		},
+		setAwaitingAgentReply(t, n) {
+			e((e) => {
+				let r = { ...e.awaitingAgentReply };
+				return n ? r[t] = !0 : delete r[t], { awaitingAgentReply: r };
+			});
+		},
+		updateMessageStatus(t, n, r) {
+			e((e) => {
+				let i = e.messages[t];
+				if (!i) return {};
+				let a = !1, o = i.map((e) => e.id !== n || e.status === r ? e : (a = !0, {
+					...e,
+					status: r
+				}));
+				return a ? { messages: {
+					...e.messages,
+					[t]: o
+				} } : {};
+			});
+		},
+		deleteSession(t) {
+			e((e) => {
+				let n = e.sessions.filter((e) => e.id !== t), r = { ...e.messages };
+				delete r[t];
+				let i = { ...e.awaitingAgentReply };
+				return delete i[t], {
+					sessions: n,
+					messages: r,
+					awaitingAgentReply: i,
+					activeSessionId: e.activeSessionId === t ? n[0]?.id ?? null : e.activeSessionId
+				};
+			});
+		},
+		renameSession(t, n) {
+			e((e) => ({ sessions: e.sessions.map((e) => e.id === t ? {
+				...e,
+				title: n
+			} : e) }));
+		},
+		clearMessages(n) {
+			e((e) => {
+				let t = { ...e.awaitingAgentReply };
+				return delete t[n], {
+					messages: {
+						...e.messages,
+						[n]: []
+					},
+					awaitingAgentReply: t
+				};
+			}), t().renameSession(n, "New conversation");
+		}
+	}), {
+		name: t("chatui-chat", i),
+		partialize: (e) => ({
+			sessions: e.sessions,
+			activeSessionId: e.activeSessionId,
+			messages: e.messages
+		})
+	}));
+}
 //#endregion
-export { r as useChatStore };
+export { i as createChatStore };
 
 //# sourceMappingURL=chat-store.js.map