jibtalk-react 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { JibTalkUser, JibTalkOptions } from 'jibtalk-core';
+export declare function useJibTalk(): {
+    isOpen: boolean;
+    isConnected: boolean;
+    unreadCount: number;
+    currentConversation: any;
+    messages: any[];
+    open: () => void | undefined;
+    close: () => void | undefined;
+    toggle: () => void | undefined;
+    destroy: () => void | undefined;
+    identify: (user: JibTalkUser) => void | undefined;
+    setUser: (user: JibTalkUser) => void | undefined;
+    logout: () => void | undefined;
+    sendMessage: (content: string) => void | undefined;
+    startTyping: () => void | undefined;
+    stopTyping: () => void | undefined;
+    on: (event: any, cb: Function) => void | undefined;
+    off: (event: any, cb: Function) => void | undefined;
+};
+export interface JibTalkProps extends JibTalkOptions {
+    user?: JibTalkUser;
+}
+export declare const JibTalk: React.FC<JibTalkProps>;

package/dist/jibtalk-react.js

@@ -0,0 +1,148 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { getJibTalkInstance as r, injectStyles as i } from "jibtalk-core";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/index.tsx
+function s() {
+	let [t, i] = n(() => {
+		let e = r();
+		return {
+			isOpen: e?.isOpen || !1,
+			isConnected: e?.isConnected || !1,
+			unreadCount: e?.unreadCount || 0,
+			currentConversation: e?.currentConversation || null,
+			messages: e?.messages || []
+		};
+	});
+	e(() => {
+		let e = r();
+		if (!e) return;
+		let t = (e) => {
+			i({
+				isOpen: e.isOpen,
+				isConnected: e.isConnected,
+				unreadCount: e.unreadCount,
+				currentConversation: e.currentConversation,
+				messages: [...e.messages]
+			});
+		};
+		return e.on("stateChange", t), t(e), () => {
+			e.off("stateChange", t);
+		};
+	}, []);
+	let a = r();
+	return {
+		isOpen: t.isOpen,
+		isConnected: t.isConnected,
+		unreadCount: t.unreadCount,
+		currentConversation: t.currentConversation,
+		messages: t.messages,
+		open: () => a?.open(),
+		close: () => a?.close(),
+		toggle: () => a?.toggle(),
+		destroy: () => a?.destroy(),
+		identify: (e) => a?.identify(e),
+		setUser: (e) => a?.setUser(e),
+		logout: () => a?.logout(),
+		sendMessage: (e) => a?.sendMessage(e),
+		startTyping: () => a?.startTyping(),
+		stopTyping: () => a?.stopTyping(),
+		on: (e, t) => a?.on(e, t),
+		off: (e, t) => a?.off(e, t)
+	};
+}
+var c = (c) => {
+	let [l, u] = n(""), d = t(null), f = t(null), p = t(!1);
+	e(() => {
+		i();
+		let e = r(c);
+		e && c.user && e.identify(c.user, c.timestamp, c.signature);
+	}, [
+		c.apiKey,
+		c.theme,
+		c.position,
+		c.primaryColor,
+		c.locale,
+		c.user,
+		c.timestamp,
+		c.signature
+	]), e(() => () => {
+		r()?.destroy();
+	}, []);
+	let { isOpen: m, unreadCount: h, messages: g, toggle: _, sendMessage: v, startTyping: y, stopTyping: b } = s();
+	e(() => {
+		m && d.current?.scrollIntoView({ behavior: "smooth" });
+	}, [g, m]);
+	let x = () => {
+		l.trim() && (v(l), u(""), p.current &&= (b(), !1), f.current && clearTimeout(f.current));
+	};
+	return e(() => () => {
+		f.current && clearTimeout(f.current);
+	}, []), /* @__PURE__ */ a("div", {
+		id: "jibtalk-sdk-root",
+		className: `position-${c.position || "bottom-right"}`,
+		"data-theme": c.theme || "dark",
+		style: { "--primary": c.primaryColor || "#00AC78" },
+		children: m ? /* @__PURE__ */ o("div", {
+			className: "jibtalk-sdk-window",
+			children: [
+				/* @__PURE__ */ o("div", {
+					className: "jibtalk-sdk-header",
+					children: [/* @__PURE__ */ a("h4", { children: c.locale === "fa" ? "پشتیبانی" : "Support" }), /* @__PURE__ */ a("button", {
+						className: "jibtalk-sdk-close-btn",
+						onClick: _,
+						"aria-label": "Close support chat",
+						children: "×"
+					})]
+				}),
+				/* @__PURE__ */ o("div", {
+					className: "jibtalk-sdk-messages",
+					children: [g.map((e, t) => /* @__PURE__ */ a("div", {
+						className: `jibtalk-sdk-message ${e.sender === "visitor" ? "jibtalk-sdk-message-self" : "jibtalk-sdk-message-other"}`,
+						children: e.content
+					}, e.id || t)), /* @__PURE__ */ a("div", { ref: d })]
+				}),
+				/* @__PURE__ */ o("div", {
+					className: "jibtalk-sdk-input-area",
+					children: [/* @__PURE__ */ a("input", {
+						type: "text",
+						className: "jibtalk-sdk-input",
+						placeholder: c.locale === "fa" ? "پیام خود را بنویسید..." : "Type your message...",
+						value: l,
+						onChange: (e) => {
+							u(e.target.value), p.current ||= (y(), !0), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+								b(), p.current = !1;
+							}, 2e3);
+						},
+						onKeyPress: (e) => {
+							e.key === "Enter" && x();
+						}
+					}), /* @__PURE__ */ a("button", {
+						className: "jibtalk-sdk-send-btn",
+						onClick: x,
+						children: c.locale === "fa" ? "ارسال" : "Send"
+					})]
+				})
+			]
+		}) : /* @__PURE__ */ o("button", {
+			className: "jibtalk-sdk-btn",
+			onClick: _,
+			"aria-label": "Open support chat",
+			children: [/* @__PURE__ */ a("svg", {
+				width: "24",
+				height: "24",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: /* @__PURE__ */ a("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+			}), h > 0 && /* @__PURE__ */ a("div", {
+				className: "jibtalk-sdk-unread-badge",
+				children: h
+			})]
+		})
+	});
+};
+//#endregion
+export { c as JibTalk, s as useJibTalk };

package/dist/jibtalk-react.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("jibtalk-core"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`jibtalk-core`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.JibTalkReact={},e.React,e.JibTalkCore,e.JSX))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=s(t),c=0,u=i.length,d;c<u;c++)d=i[c],!l.call(e,d)&&d!==n&&a(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=o(t,d))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:i(c(e)),u(t||!e||!e.__esModule?a(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1);function d(){let[e,r]=(0,t.useState)(()=>{let e=(0,n.getJibTalkInstance)();return{isOpen:e?.isOpen||!1,isConnected:e?.isConnected||!1,unreadCount:e?.unreadCount||0,currentConversation:e?.currentConversation||null,messages:e?.messages||[]}});(0,t.useEffect)(()=>{let e=(0,n.getJibTalkInstance)();if(!e)return;let t=e=>{r({isOpen:e.isOpen,isConnected:e.isConnected,unreadCount:e.unreadCount,currentConversation:e.currentConversation,messages:[...e.messages]})};return e.on(`stateChange`,t),t(e),()=>{e.off(`stateChange`,t)}},[]);let i=(0,n.getJibTalkInstance)();return{isOpen:e.isOpen,isConnected:e.isConnected,unreadCount:e.unreadCount,currentConversation:e.currentConversation,messages:e.messages,open:()=>i?.open(),close:()=>i?.close(),toggle:()=>i?.toggle(),destroy:()=>i?.destroy(),identify:e=>i?.identify(e),setUser:e=>i?.setUser(e),logout:()=>i?.logout(),sendMessage:e=>i?.sendMessage(e),startTyping:()=>i?.startTyping(),stopTyping:()=>i?.stopTyping(),on:(e,t)=>i?.on(e,t),off:(e,t)=>i?.off(e,t)}}e.JibTalk=e=>{let[i,a]=(0,t.useState)(``),o=(0,t.useRef)(null),s=(0,t.useRef)(null),c=(0,t.useRef)(!1);(0,t.useEffect)(()=>{(0,n.injectStyles)();let t=(0,n.getJibTalkInstance)(e);t&&e.user&&t.identify(e.user,e.timestamp,e.signature)},[e.apiKey,e.theme,e.position,e.primaryColor,e.locale,e.user,e.timestamp,e.signature]),(0,t.useEffect)(()=>()=>{(0,n.getJibTalkInstance)()?.destroy()},[]);let{isOpen:l,unreadCount:u,messages:f,toggle:p,sendMessage:m,startTyping:h,stopTyping:g}=d();(0,t.useEffect)(()=>{l&&o.current?.scrollIntoView({behavior:`smooth`})},[f,l]);let _=()=>{i.trim()&&(m(i),a(``),c.current&&=(g(),!1),s.current&&clearTimeout(s.current))};return(0,t.useEffect)(()=>()=>{s.current&&clearTimeout(s.current)},[]),(0,r.jsx)(`div`,{id:`jibtalk-sdk-root`,className:`position-${e.position||`bottom-right`}`,"data-theme":e.theme||`dark`,style:{"--primary":e.primaryColor||`#00AC78`},children:l?(0,r.jsxs)(`div`,{className:`jibtalk-sdk-window`,children:[(0,r.jsxs)(`div`,{className:`jibtalk-sdk-header`,children:[(0,r.jsx)(`h4`,{children:e.locale===`fa`?`پشتیبانی`:`Support`}),(0,r.jsx)(`button`,{className:`jibtalk-sdk-close-btn`,onClick:p,"aria-label":`Close support chat`,children:`×`})]}),(0,r.jsxs)(`div`,{className:`jibtalk-sdk-messages`,children:[f.map((e,t)=>(0,r.jsx)(`div`,{className:`jibtalk-sdk-message ${e.sender===`visitor`?`jibtalk-sdk-message-self`:`jibtalk-sdk-message-other`}`,children:e.content},e.id||t)),(0,r.jsx)(`div`,{ref:o})]}),(0,r.jsxs)(`div`,{className:`jibtalk-sdk-input-area`,children:[(0,r.jsx)(`input`,{type:`text`,className:`jibtalk-sdk-input`,placeholder:e.locale===`fa`?`پیام خود را بنویسید...`:`Type your message...`,value:i,onChange:e=>{a(e.target.value),c.current||=(h(),!0),s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{g(),c.current=!1},2e3)},onKeyPress:e=>{e.key===`Enter`&&_()}}),(0,r.jsx)(`button`,{className:`jibtalk-sdk-send-btn`,onClick:_,children:e.locale===`fa`?`ارسال`:`Send`})]})]}):(0,r.jsxs)(`button`,{className:`jibtalk-sdk-btn`,onClick:p,"aria-label":`Open support chat`,children:[(0,r.jsx)(`svg`,{width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,r.jsx)(`path`,{d:`M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z`})}),u>0&&(0,r.jsx)(`div`,{className:`jibtalk-sdk-unread-badge`,children:u})]})})},e.useJibTalk=d});

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "jibtalk-react",
+  "version": "1.0.0",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/jibtalk-react.umd.cjs",
+  "module": "./dist/jibtalk-react.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/jibtalk-react.js",
+      "require": "./dist/jibtalk-react.umd.cjs"
+    }
+  },
+  "scripts": {
+    "build": "vite build && tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist --rootDir src"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "jibtalk-core": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.12"
+  }
+}