@alfatech/livechat 2024.12.3-1.1

package/src/pages/chat/chat-detail-view.tsx

@@ -0,0 +1,200 @@
+import ProfileCard from "@/components/app/card/profile";
+import Icon from "@/components/app/icon";
+import WidgetProvider from "@/components/app/WidgetProvider";
+import { chatClear } from "@/features/chat/chat.api";
+import type {
+	ChatViewResult,
+	MessageListItem,
+} from "@/features/chat/chat.types";
+import ChatMessageFormFooter from "@/features/chat/partials/ChatMessageFormFooter";
+import ChatMessageSection from "@/features/chat/partials/ChatMessageSection";
+import { usePageTrackingWS } from "@/features/widget/hooks/page-tracker";
+import { useWidgetStore } from "@/features/widget/widget.store";
+import WidgetChatLayout from "@/layouts/chat";
+import { useRouter } from "@/lib/hooks/router";
+import { ReceiveEvents, SendEvents } from "@/ws/events";
+import WebsocketGuard from "@/ws/guard";
+import { useWebsocket } from "@/ws/hooks";
+import { useCallback, useEffect, useState } from "react";
+
+function ChatDetailView() {
+	const { widget, setOpen } = useWidgetStore();
+	const socket = useWebsocket();
+	const router = useRouter();
+	const [chat, setChat] = useState<ChatViewResult | null>(null);
+	const [messages, setMessages] = useState<MessageListItem[]>([]);
+	const [isTyping, setIsTyping] = useState(false);
+	const [closeVisible, setCloseVisible] = useState(false);
+	const [shortcutMessages, setShortcutMessages] = useState<MessageListItem[]>(
+		[],
+	);
+
+	const onClose = () => {
+		socket?.emit(SendEvents.ChatClose, {});
+		setOpen(false);
+		chatClear(widget!.client_id);
+	};
+
+	useEffect(() => {
+		socket?.emit(SendEvents.ChatView, {}, (chat) => {
+			if (chat === null) {
+				setOpen(false);
+				chatClear(widget!.client_id);
+				router.push("registration");
+				return;
+			}
+			setChat(chat);
+		});
+	}, []);
+
+	const addNewMessage = useCallback(
+		(msg: MessageListItem) => {
+			setMessages([...messages, msg]);
+		},
+		[messages],
+	);
+
+	useEffect(() => {
+		if (!socket) return;
+		socket.on(ReceiveEvents.MessageAgentCreate, (msg) => {
+			const m = {
+				content: msg.content,
+				created_at: msg.created_at,
+				files: msg.files,
+				id: msg._id,
+				sender_type: msg.sender_type,
+				answers: msg.answers,
+				reply_id: msg.reply_id,
+			};
+			if (shortcutMessages.length > 0) {
+				setShortcutMessages((prev) => [...prev, m]);
+				return;
+			}
+			if (msg.is_shortcut) setShortcutMessages([m]);
+			else addNewMessage(m);
+		});
+		socket.on(ReceiveEvents.ChatUserAssignee, (assignee) => {
+			setChat({
+				...chat,
+				agent_name: assignee.name,
+				agent_avatar: assignee.avatar,
+				is_uploadable: chat?.is_uploadable ?? false,
+			});
+		});
+		socket.on(ReceiveEvents.MessageAgentTyping, () => {
+			setIsTyping(true);
+		});
+		return () => {
+			socket.off(ReceiveEvents.MessageAgentCreate);
+			socket.off(ReceiveEvents.ChatUserAssignee);
+			socket.off(ReceiveEvents.MessageAgentTyping);
+		};
+	}, [addNewMessage]);
+
+	useEffect(() => {
+		if (!socket) return;
+		socket.emit(SendEvents.MessageList, {}, (msgs) => {
+			setMessages(msgs);
+		});
+	}, []);
+
+	useEffect(() => {
+		const timeout = setTimeout(() => {
+			setIsTyping(false);
+		}, 1000);
+		return () => clearTimeout(timeout);
+	}, [isTyping]);
+
+	useEffect(() => {
+		if (!widget || shortcutMessages.length === 0) return;
+		const tmMS =
+			(widget.writing_timeout || 650) *
+			shortcutMessages[0].content.split(" ").length;
+		const timeout = setTimeout(() => {
+			addNewMessage(shortcutMessages[0]);
+			setShortcutMessages(shortcutMessages.slice(1));
+		}, tmMS);
+		return () => clearTimeout(timeout);
+	}, [shortcutMessages, widget]);
+
+	if (!chat) return null;
+	return (
+		<>
+			{closeVisible && (
+				<div className="absolute top-0 left-0 backdrop-blur-sm bg-slate-950/20 z-50 h-full w-full rounded-md">
+					<div className="flex flex-col items-center justify-center h-full mx-5">
+						<div className="bg-white p-4 rounded-md">
+							<div className="text-lg font-semibold text-neutral-900">
+								Sohbeti kapatmak istediğinize emin misiniz?
+							</div>
+							<div className="flex justify-between mt-4">
+								<button
+									type="button"
+									className="bg-red-500 text-white px-4 py-2 rounded-md"
+									onClick={onClose}
+								>
+									Evet
+								</button>
+								<button
+									type="button"
+									className="bg-neutral-200 text-neutral-900 px-4 py-2 rounded-md"
+									onClick={() => setCloseVisible(false)}
+								>
+									Vazgeç
+								</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			)}
+
+			<section className="bg-white h-full w-full rounded-md border flex flex-col">
+				<header className="border-b p-4 bg-zink-600 rounded-t-md flex justify-between items-center">
+					{chat?.agent_name ? (
+						<ProfileCard
+							name={chat.agent_name}
+							avatar={chat.agent_avatar}
+							className="text-neutral-300"
+						/>
+					) : (
+						<div className="text-white">Chat with us</div>
+					)}
+					<button
+						type="button"
+						className="text-white"
+						onClick={() => setCloseVisible(true)}
+					>
+						<Icon.X className="w-6 h-6 cursor-pointer" />
+					</button>
+				</header>
+				<ChatMessageSection
+					messages={messages}
+					isTyping={isTyping || shortcutMessages.length > 0}
+				/>
+				<ChatMessageFormFooter
+					onNewMessage={(msg) => {
+						addNewMessage(msg);
+					}}
+				/>
+			</section>
+		</>
+	);
+}
+
+function Tracking() {
+	usePageTrackingWS();
+	return null;
+}
+
+export default function ChatDetail() {
+	return (
+		<WebsocketGuard>
+			<WidgetProvider defaultOpen>
+				<WidgetChatLayout>
+					<ChatDetailView />
+				</WidgetChatLayout>
+			</WidgetProvider>
+			<Tracking />
+		</WebsocketGuard>
+	);
+}

package/src/router/router.tsx

@@ -0,0 +1,17 @@
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { protectedRoutes, publicRoutes } from "./routes";
+
+export default function AppRouter() {
+	return (
+		<MemoryRouter future={{ v7_startTransition: true }}>
+			<Routes>
+				{protectedRoutes.map((route: any, idx: number) => (
+					<Route key={idx} path={route.path} element={<route.component />} />
+				))}
+				{publicRoutes.map((route: any, idx: number) => (
+					<Route path={route.path} key={idx} element={<route.component />} />
+				))}
+			</Routes>
+		</MemoryRouter>
+	);
+}

package/src/router/routes/auth-routes.ts

@@ -0,0 +1,7 @@
+import RegistrationView from "../../pages/auth/registration-view";
+
+export const authRoutes = [
+	{ path: "/", component: RegistrationView, name: "registration" },
+] as const;
+
+export type AuthRouteNames = (typeof authRoutes)[number]["name"];

package/src/router/routes/chat-routes.ts

@@ -0,0 +1,7 @@
+import ChatDetailView from "@/pages/chat/chat-detail-view";
+
+export const chatRoutes = [
+	{ path: "/chat", component: ChatDetailView, name: "chat" },
+] as const;
+
+export type ChatRouteNames = (typeof chatRoutes)[number]["name"];

package/src/router/routes/index.ts

@@ -0,0 +1,8 @@
+import { authRoutes } from "./auth-routes";
+import { chatRoutes } from "./chat-routes";
+
+export const protectedRoutes = [...chatRoutes];
+
+export const publicRoutes = [...authRoutes];
+
+export const allRoutes = [...protectedRoutes, ...publicRoutes];

package/src/types/i18n.ts

@@ -0,0 +1,11 @@
+export enum Timezone {
+	Istanbul = "Europe/Istanbul",
+	Berlin = "Europe/Berlin",
+	London = "Europe/London",
+	NewYork = "America/New_York",
+}
+
+export enum Lang {
+	Tr = "tr",
+	En = "en",
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/widget.tsx

@@ -0,0 +1,19 @@
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./main.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+type Options = {
+	container: HTMLElement;
+	link_id: string;
+};
+
+const queryClient = new QueryClient();
+
+export default function widget({ container, link_id }: Options) {
+	createRoot(container).render(
+		<QueryClientProvider client={queryClient}>
+			<App link_id={link_id} />
+		</QueryClientProvider>,
+	);
+}

package/src/ws/events.tsx

@@ -0,0 +1,69 @@
+import type {
+	ChatViewResult,
+	MessageEntity,
+	MessageListItem,
+} from "@/features/chat/chat.types";
+
+export enum SendEvents {
+	ChatView = "chat:user:view",
+	ChatClose = "chat:user:close",
+	MessageList = "message:list",
+	MessageCreate = "message:create",
+	MessageTyping = "message:typing",
+	WidgetOpen = "widget:open",
+	WidgetClose = "widget:close",
+	PageChange = "page-change",
+}
+
+export enum ReceiveEvents {
+	MessageAgentCreate = "message:agent:create",
+	MessageAgentTyping = "message:agent:typing",
+	Banned = "banned",
+	ChatUserClose = "chat:user:close",
+	ChatUserAssignee = "chat:user:assignee",
+}
+
+export type ReceiveEventTypes = {
+	[ReceiveEvents.MessageAgentCreate]: MessageEntity;
+	[ReceiveEvents.MessageAgentTyping]: {};
+	[ReceiveEvents.Banned]: {};
+	[ReceiveEvents.ChatUserClose]: {};
+	[ReceiveEvents.ChatUserAssignee]: {
+		chat_id: string;
+		id: string;
+		title: string;
+		name: string;
+		avatar: string;
+	};
+};
+
+export type SendEventTypes = {
+	[SendEvents.ChatView]: {};
+	[SendEvents.MessageList]: {};
+	[SendEvents.ChatClose]: {};
+	[SendEvents.MessageCreate]: {
+		content: string;
+	};
+	[SendEvents.WidgetOpen]: {};
+	[SendEvents.WidgetClose]: {};
+	[SendEvents.PageChange]: {
+		page: string;
+	};
+	[SendEvents.MessageTyping]: {
+		content: string;
+	};
+};
+
+export type EventCallbackTypes = {
+	[SendEvents.ChatView]: ChatViewResult;
+	[SendEvents.ChatClose]: boolean;
+	[SendEvents.MessageList]: MessageListItem[];
+	[SendEvents.MessageCreate]: MessageListItem;
+	[SendEvents.WidgetOpen]: {};
+	[SendEvents.WidgetClose]: {};
+	[SendEvents.PageChange]: {};
+	[SendEvents.MessageTyping]: {};
+};
+
+export type EventCallbackAndSendTypeKeys = keyof EventCallbackTypes &
+	keyof SendEventTypes;

package/src/ws/guard.tsx

@@ -0,0 +1,16 @@
+import { type PropsWithChildren, useEffect } from "react";
+import { useWebsocket } from "./hooks";
+
+export default function WebsocketGuard({ children }: PropsWithChildren) {
+	const socket = useWebsocket();
+
+	useEffect(() => {
+		if (!socket) return;
+		socket.connect();
+	}, []);
+
+	if (!socket || !socket.connected) {
+		return null;
+	}
+	return children;
+}

package/src/ws/hooks.tsx

@@ -0,0 +1,122 @@
+import { createContext, useContext, useState } from "react";
+import { type Socket, io } from "socket.io-client";
+import type {
+	EventCallbackAndSendTypeKeys,
+	EventCallbackTypes,
+	ReceiveEventTypes,
+	SendEventTypes,
+} from "./events";
+import { getCookieVal } from "@/lib/cookie";
+
+type EventHandler<T = any> = (e: T) => void;
+
+type WebSocketContext = {
+	socket: Socket | null;
+	connected: boolean;
+	events: Record<string, EventHandler>;
+	connect: () => void;
+	reconnect: () => void;
+	disconnect: () => void;
+	on: <T extends keyof ReceiveEventTypes>(
+		event: T,
+		handler: EventHandler<ReceiveEventTypes[T]>,
+	) => void;
+	off: <T extends keyof ReceiveEventTypes>(event: T) => void;
+	emit: <T extends keyof SendEventTypes>(
+		event: T,
+		data: SendEventTypes[T],
+		callback?: (data: EventCallbackTypes[T]) => void,
+	) => void;
+};
+
+const websocketContext = createContext<WebSocketContext | null>(null);
+
+export const useWebsocket = () => {
+	return useContext(websocketContext);
+};
+
+export const WebSocketProvider = ({ children }: React.PropsWithChildren) => {
+	const [socket, setSocket] = useState<Socket | null>(null);
+	const [connected, setConnected] = useState<boolean>(false);
+	const [events, setEvents] = useState<Record<string, EventHandler>>({});
+
+	const connect = () => {
+		const s = io(import.meta.env.VITE_WS_URL as string, {
+			transports: ["websocket"],
+			auth: {
+				customer_token: getCookieVal("customer_token"),
+				device_id: getCookieVal("device_id"),
+				customer_refresh_token: getCookieVal("customer_refresh_token"),
+			},
+		});
+		s.on("error", (err) => {
+			console.error("Websocket error", err);
+		});
+
+		s.on("connect", () => {
+			setSocket(s);
+			setConnected(true);
+		});
+	};
+
+	const reconnect = () => {
+		if (socket) {
+			socket.connect();
+			setConnected(true);
+		}
+	};
+
+	const disconnect = () => {
+		if (socket) {
+			socket.disconnect();
+			setConnected(false);
+		}
+	};
+
+	const on = <T extends keyof ReceiveEventTypes>(
+		event: T,
+		handler: EventHandler<ReceiveEventTypes[T]>,
+	) => {
+		if (socket) {
+			socket.on(event as any, (args: any) => {
+				handler(args);
+			});
+			setEvents({ ...events, [event]: handler });
+		}
+	};
+
+	const off = <T extends keyof ReceiveEventTypes>(event: T) => {
+		if (socket && events[event]) {
+			socket.off(event, events[event] as any);
+			delete events[event];
+		}
+	};
+
+	const emit = <T extends EventCallbackAndSendTypeKeys>(
+		event: T,
+		data: SendEventTypes[T],
+		callback?: (data: EventCallbackTypes[T]) => void,
+	) => {
+		if (socket) {
+			socket.emit(event, data, callback);
+		}
+	};
+
+	return (
+		<websocketContext.Provider
+			value={{
+				socket,
+				connected,
+				events,
+				connect,
+				reconnect,
+				disconnect,
+				on,
+				off,
+				emit,
+			}}
+		>
+			{children}
+		</websocketContext.Provider>
+	);
+};

package/tailwind.config.js

@@ -0,0 +1,27 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+	theme: {
+		extend: {
+			width: {
+				86: "22.5rem",
+			},
+			colors: {
+				zink: {
+					50: "#E2EAF3",
+					100: "#C8D7E9",
+					200: "#92AFD3",
+					300: "#5885BC",
+					400: "#395F8E",
+					500: "#233A57",
+					600: "#1C2E45",
+					700: "#132337",
+					800: "#0F1824",
+					900: "#070C12",
+					950: "#030507",
+				},
+			},
+		},
+	},
+	plugins: [],
+};

package/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["./src/*"],
+      "~/*": ["/*"]
+    },
+    "baseUrl": ".",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/tsconfig.app.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/widget.tsx","./src/api/base.api.ts","./src/api/error.ts","./src/components/app/WidgetProvider.tsx","./src/components/app/button/index.tsx","./src/components/app/button/types.ts","./src/components/app/card/profile.tsx","./src/components/app/icon/index.tsx","./src/components/app/input/checkbox.tsx","./src/components/app/input/index.tsx","./src/components/app/input/label.tsx","./src/components/app/input/radio.tsx","./src/components/app/input/select.tsx","./src/components/app/input/textarea.tsx","./src/components/app/input/toggle.tsx","./src/components/app/input/verification.tsx","./src/features/chat/chat.api.ts","./src/features/chat/chat.types.ts","./src/features/chat/partials/ChatCreateForm.tsx","./src/features/chat/partials/ChatMessageFormFooter.tsx","./src/features/chat/partials/ChatMessageSection.tsx","./src/features/widget/widget.api.ts","./src/features/widget/widget.store.ts","./src/features/widget/widget.types.ts","./src/features/widget/components/WidgetIcon.tsx","./src/features/widget/contexts/page-tracker.tsx","./src/features/widget/hooks/page-tracker.tsx","./src/layouts/auth.tsx","./src/layouts/chat.tsx","./src/lib/cdn.tsx","./src/lib/cookie.tsx","./src/lib/debounce.tsx","./src/lib/list.tsx","./src/lib/obj.tsx","./src/lib/phone.tsx","./src/lib/hooks/cookie.tsx","./src/lib/hooks/dayjs.tsx","./src/lib/hooks/dom.tsx","./src/lib/hooks/form.tsx","./src/lib/hooks/router.tsx","./src/pages/auth/registration-view.tsx","./src/pages/chat/chat-detail-view.tsx","./src/router/router.tsx","./src/router/routes/auth-routes.ts","./src/router/routes/chat-routes.ts","./src/router/routes/index.ts","./src/router/routes/routes.types.ts","./src/types/i18n.ts","./src/ws/events.tsx","./src/ws/guard.tsx","./src/ws/hooks.tsx"],"version":"5.7.2"}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/tsconfig.node.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.7.2"}

package/version.cjs

@@ -0,0 +1,5 @@
+var fs = require("fs");
+var pjson = require("./package.json");
+var nversion = process.argv[2];
+pjson.version = nversion;
+fs.writeFileSync("./package.json", JSON.stringify(pjson, null, 2));

package/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { resolve } from "node:path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [react()],
+	resolve: {
+		alias: {
+			"@": resolve(__dirname, "src"),
+			"~": resolve(__dirname),
+		},
+	},
+});