@alfatech/livechat 2024.12.3-1.1

package/src/components/app/input/toggle.tsx

@@ -0,0 +1,162 @@
+import classNames from "classnames";
+import { useEffect, useState } from "react";
+
+type Variant = "blue" | "indigo" | "emerald" | "red" | "orange";
+type Size = "sm" | "md" | "lg";
+
+type Props = {
+	defaultChecked?: boolean;
+	indigo?: boolean;
+	checked?: boolean;
+	disabled?: boolean;
+	onChange?: (checked: boolean) => void;
+	variant?: Variant;
+	size?: Size;
+	title?: string;
+};
+
+type ToggleGroupProps = {
+	className?: string;
+	noMargin?: boolean;
+	label?: string;
+	required?: boolean;
+	id?: string;
+} & Props;
+
+type Variants = {
+	default: string;
+	checked: string;
+	circle: string;
+	circleChecked: string;
+};
+
+type Sizes = {
+	default: string;
+	circle: string;
+	circleChecked: string;
+};
+
+const variants: Record<Variant, Variants> = {
+	blue: {
+		default: "bg-gray-200 dark:bg-zink-500",
+		checked: "bg-blue-500",
+		circleChecked: "bg-blue-500",
+		circle: "bg-white",
+	},
+	indigo: {
+		default: "bg-gray-200 dark:bg-zink-500",
+		checked: "bg-indigo-500",
+		circleChecked: "bg-indigo-500",
+		circle: "bg-white",
+	},
+	emerald: {
+		default: "bg-gray-200 dark:bg-zink-500",
+		checked: "bg-green-500",
+		circleChecked: "bg-green-500",
+		circle: "bg-white",
+	},
+	red: {
+		default: "bg-gray-200 dark:bg-zink-500",
+		checked: "bg-red-500",
+		circleChecked: "bg-red-500",
+		circle: "bg-white",
+	},
+	orange: {
+		default: "bg-gray-200 dark:bg-zink-500",
+		checked: "bg-orange-500",
+		circleChecked: "bg-orange-500",
+		circle: "bg-white",
+	},
+};
+
+const sizes: Record<Size, Sizes> = {
+	sm: {
+		default: "w-10 h-5",
+		circle: "w-4 h-4",
+		circleChecked: "translate-x-5",
+	},
+	md: {
+		default: "w-12 h-6",
+		circle: "w-5 h-5",
+		circleChecked: "translate-x-6",
+	},
+	lg: {
+		default: "w-14 h-7",
+		circle: "w-6 h-6",
+		circleChecked: "translate-x-7",
+	},
+};
+
+function Toggle({
+	defaultChecked = false,
+	checked: checkedProp,
+	variant = "blue",
+	size = "md",
+	disabled = false,
+	title,
+	onChange,
+}: Props) {
+	const [checked, setChecked] = useState(defaultChecked);
+
+	const handleChange = () => {
+		const newChecked = !checked;
+		setChecked(newChecked);
+		if (onChange) {
+			onChange(newChecked);
+		}
+	};
+
+	useEffect(() => {
+		if (checkedProp !== undefined) {
+			setChecked(checkedProp);
+		}
+	}, [checkedProp]);
+
+	return (
+		<button
+			type="button"
+			className={classNames(
+				sizes[size].default,
+				{
+					[variants[variant].checked]: checked,
+					[variants[variant].default]: !checked,
+				},
+				"disable-highlight relative inline-flex items-center rounded-full shadow-none transition-colors focus:ring-0 focus:ring-transparent focus:ring-offset-0 focus:ring-offset-transparent",
+			)}
+			onClick={handleChange}
+			disabled={disabled}
+			title={title}
+			aria-label={title}
+		>
+			<span
+				className={`inline-block transform rounded-full transition-transform ease-in-out ${variants[variant].circle} ${
+					sizes[size].circle
+				} ${checked ? `${sizes[size].circleChecked} ${variants[variant].circleChecked}` : "translate-x-1"}`}
+			/>
+		</button>
+	);
+}
+
+Toggle.WithGroup = function ToggleGroup({
+	className,
+	noMargin = false,
+	required,
+	label,
+	id,
+	...props
+}: ToggleGroupProps) {
+	return (
+		<div className={classNames({ "mb-3": !noMargin }, className)}>
+			{label && (
+				<label id={id} className="block mb-2 text-base font-medium">
+					{label} {required && <span className="text-red-500">*</span>}
+				</label>
+			)}
+			<div className="flex items-center">
+				<Toggle {...props} title={label} />
+			</div>
+		</div>
+	);
+};
+
+export default Toggle;

package/src/components/app/input/verification.tsx

@@ -0,0 +1,111 @@
+import classNames from "classnames";
+import type React from "react";
+import { useRef, useState } from "react";
+
+type Props = {
+	length?: number;
+	label?: string;
+	value?: string;
+	onChange?: (value: string) => void;
+	withoutBackground?: boolean;
+};
+
+export default function VerificationCode({
+	length = 6,
+	label = "Doğrulama Kodu",
+	onChange,
+	withoutBackground = true,
+}: Props) {
+	const [otp, setOtp] = useState(Array(length).fill(""));
+	const inputRefs = useRef([]);
+
+	const setValue = (value: string[]) => {
+		setOtp(value);
+		if (onChange) onChange(value.join(""));
+	};
+
+	const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
+		if (
+			!/^[0-9]{1}$/.test(e.key) &&
+			e.key !== "Backspace" &&
+			e.key !== "Delete" &&
+			e.key !== "Tab" &&
+			!e.metaKey
+		) {
+			e.preventDefault();
+		}
+
+		if (e.key === "Delete" || e.key === "Backspace") {
+			// @ts-ignore
+			const index = inputRefs.current.indexOf(e.target);
+
+			const newOtp = [...otp];
+			newOtp[index] = "";
+			setValue(newOtp);
+			// @ts-ignore
+			inputRefs.current[index - 1].focus();
+		}
+	};
+
+	const handleInput: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+		const { target } = e;
+		// @ts-ignore
+		const index = inputRefs.current.indexOf(target);
+		if (target.value) {
+			const newOtp = [...otp];
+			newOtp[index] = target.value;
+			setValue(newOtp);
+			if (index < otp.length - 1) {
+				// @ts-ignore
+				inputRefs.current[index + 1].focus();
+			}
+		}
+	};
+
+	const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+		e.target.select();
+	};
+
+	const handlePaste: React.ClipboardEventHandler<HTMLInputElement> = (e) => {
+		e.preventDefault();
+		const text = e.clipboardData.getData("text");
+		if (!new RegExp(`^[0-9]{${otp.length}}$`).test(text)) {
+			return;
+		}
+		const digits = text.split("");
+		setValue(digits);
+		// @ts-ignore
+		inputRefs.current[digits.length - 1].focus();
+	};
+
+	return (
+		<section
+			className={classNames("pb-5", {
+				"bg-white": !withoutBackground,
+			})}
+		>
+			<div className="container">
+				<div>
+					{label && <p className="mb-1.5 text-sm font-medium">{label}</p>}
+					<form id="otp-form" className="flex gap-2">
+						{otp.map((digit, index) => (
+							<input
+								key={index}
+								type="text"
+								maxLength={1}
+								value={digit}
+								onChange={handleInput}
+								onKeyDown={handleKeyDown}
+								onFocus={handleFocus}
+								onPaste={handlePaste}
+								// @ts-ignore
+								ref={(el) => (inputRefs.current[index] = el)}
+								className="shadow-xs flex w-[64px] items-center justify-center rounded-lg border border-stroke bg-slate-100 p-2 text-center text-2xl font-medium text-gray-5 outline-none sm:text-4xl dark:border-slate-500 dark:bg-white/5 dark:text-zink-100"
+							/>
+						))}
+					</form>
+				</div>
+			</div>
+		</section>
+	);
+}

package/src/features/chat/chat.api.ts

@@ -0,0 +1,30 @@
+import { req } from "@/api/base.api";
+import type { ChatCreateReq } from "./chat.types";
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+export const useChatCreate = () => {
+	return useMutation({
+		mutationFn: (dto: ChatCreateReq) =>
+			req(`clients/${dto.client_id}/chats`, {
+				method: "POST",
+				body: JSON.stringify({ ...dto, client_id: undefined }),
+			}),
+	});
+};
+
+export const useChatCheck = (client_id: string) => {
+	return useQuery({
+		queryFn: () => chatCheck(client_id),
+		queryKey: ["clients", client_id, "chats"],
+	});
+};
+
+export const chatCheck = (client_id: string) => {
+	return req(`clients/${client_id}/chats`);
+};
+
+export const chatClear = (client_id: string) => {
+	return req(`clients/${client_id}/chats`, {
+		method: "DELETE",
+	});
+};

package/src/features/chat/chat.types.ts

@@ -0,0 +1,50 @@
+export type ChatCreateReq = {
+	email: string;
+	name: string;
+	client_id: string;
+	history: string[];
+};
+
+export type ChatViewResult = {
+	agent_name?: string;
+	agent_avatar?: string;
+	is_uploadable: boolean;
+};
+
+export type MessageListItem = {
+	id: string;
+	sender_name?: string;
+	sender_type: MessageSenderType;
+	activity_type?: MessageActivityType;
+	reply_id?: string;
+	answers?: string[];
+	content: string;
+	files: string[];
+	created_at: Date;
+};
+
+export enum MessageActivityType {
+	AdminJoin = "admin_join",
+}
+
+export enum MessageSenderType {
+	Customer = "customer",
+	User = "user",
+	System = "system",
+	Activity = "activity",
+}
+
+export type MessageEntity = {
+	_id: string;
+	property_id: string;
+	chat_id: string;
+	sender_id: string;
+	reply_id?: string;
+	is_shortcut?: boolean;
+	sender_type: MessageSenderType;
+	content: string;
+	files: string[];
+	who_read: string[]; // user_id, customer_id
+	answers?: string[];
+	created_at: Date;
+};

package/src/features/chat/partials/ChatCreateForm.tsx

@@ -0,0 +1,103 @@
+import * as yup from "yup";
+import { useChatCreate } from "../chat.api";
+import { useForm } from "@/lib/hooks/form";
+import { isSuccess } from "@/api/base.api";
+import { handleApiErrorResult } from "@/api/error";
+import { checkObjSame } from "@/lib/obj";
+import Input from "@/components/app/input";
+import Button from "@/components/app/button";
+import { setCookie } from "@/lib/hooks/cookie";
+import { usePageTracker } from "@/features/widget/contexts/page-tracker";
+
+type Props = {
+	clientId: string;
+	onOk?: () => void;
+	savedEmail?: string;
+	savedName?: string;
+};
+
+type FormContent = {
+	name: string;
+	email: string;
+};
+
+const formContentValidation = yup.object<FormContent>({
+	name: yup.string().required("Name is required"),
+	email: yup.string().email("Invalid email").required("Email is required"),
+});
+
+const initialValues: FormContent = {
+	email: "",
+	name: "",
+};
+
+export default function ChatCreateForm({
+	onOk,
+	savedEmail,
+	savedName,
+	clientId,
+}: Props) {
+	const pageTracker = usePageTracker();
+	const chatCreate = useChatCreate();
+	const form = useForm<FormContent>({
+		init: {
+			email: savedEmail || "",
+			name: savedName || "",
+		},
+		schema: formContentValidation,
+		action: async (values) => {
+			const [res, status] = await chatCreate.mutateAsync({
+				...values,
+				history: pageTracker.history,
+				client_id: clientId,
+			});
+			if (isSuccess(status)) {
+				pageTracker.clearHistory();
+				setCookie("email", values.email);
+				setCookie("name", values.name);
+				onOk?.();
+				return;
+			}
+			handleApiErrorResult(res, { form });
+		},
+	});
+
+	const isChanged = !checkObjSame(initialValues, form.values);
+	return (
+		<form
+			className="grid grid-cols-1 gap-4"
+			onSubmit={(e) => {
+				e.preventDefault();
+				form.handleSubmit();
+			}}
+		>
+			<Input
+				id="name"
+				name="name"
+				value={form.values.name}
+				onChange={form.handleChange}
+				onBlur={form.handleBlur}
+				placeholder="Adınız, ör: John Doe"
+				error={form.errors.name}
+				ariaInvalid={form.errors.name ? true : undefined}
+				required
+				noMargin
+			/>
+			<Input
+				id="email"
+				name="email"
+				value={form.values.email}
+				onChange={form.handleChange}
+				onBlur={form.handleBlur}
+				placeholder="Email, ör: john@doe.com"
+				error={form.errors.email}
+				ariaInvalid={form.errors.email ? true : undefined}
+				required
+				noMargin
+			/>
+			<Button kind="soft" type="submit" disabled={!isChanged}>
+				Sohbet Oluştur
+			</Button>
+		</form>
+	);
+}

package/src/features/chat/partials/ChatMessageFormFooter.tsx

@@ -0,0 +1,67 @@
+import { SendEvents } from "@/ws/events";
+import { useWebsocket } from "@/ws/hooks";
+import { useState } from "react";
+import type { MessageListItem } from "../chat.types";
+import Input from "@/components/app/input";
+import Button from "@/components/app/button";
+import debounce from "@/lib/debounce";
+
+type Props = {
+	onNewMessage: (msg: MessageListItem) => void;
+};
+
+export default function ChatMessageFormFooter({ onNewMessage }: Props) {
+	const socket = useWebsocket();
+	const [query, setQuery] = useState("");
+
+	const sendMessage = () => {
+		socket?.emit(
+			SendEvents.MessageCreate,
+			{
+				content: query,
+			},
+			(msg) => {
+				setQuery("");
+				onNewMessage(msg);
+				onChange("");
+			},
+		);
+	};
+
+	const onChange = (val: string) => {
+		socket?.emit(SendEvents.MessageTyping, {
+			content: val,
+		});
+	};
+
+	const debouncedChange = debounce(onChange, 300);
+
+	return (
+		<form
+			className="border-t p-2 flex items-center gap-2"
+			onSubmit={(e) => {
+				e.preventDefault();
+				sendMessage();
+				e.currentTarget.reset();
+			}}
+		>
+			<div className="grow relative">
+				<Input
+					id="message"
+					className="grow"
+					noMargin
+					onChange={(e) => {
+						setQuery(e.target.value);
+						debouncedChange(e.target.value);
+					}}
+					placeholder="Bir mesaj yazın"
+				/>
+			</div>
+			<div className="flex items-center justify-center h-full">
+				<Button className="rounded-md" type="submit">
+					Gönder
+				</Button>
+			</div>
+		</form>
+	);
+}

package/src/features/chat/partials/ChatMessageSection.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from "react";
+import { MessageSenderType, type MessageListItem } from "../chat.types";
+import classNames from "classnames";
+import Button from "@/components/app/button";
+import Icon from "@/components/app/icon";
+
+type Props = {
+	messages: MessageListItem[];
+	isTyping: boolean;
+};
+
+export default function ChatMessageSection({ messages, isTyping }: Props) {
+	const messagesEndRef = useRef<HTMLDivElement | null>(null);
+	const messagesContainerRef = useRef<HTMLDivElement | null>(null);
+	const [isAutoScrollEnabled, setIsAutoScrollEnabled] = useState<boolean>(true);
+
+	const scrollToBottom = () => {
+		messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+	};
+
+	// Scroll pozisyonunu kontrol et
+	const handleScroll = () => {
+		if (messagesContainerRef.current) {
+			const { scrollTop, scrollHeight, clientHeight } =
+				messagesContainerRef.current;
+			const isAtBottom = scrollHeight - scrollTop <= clientHeight + 10;
+			setIsAutoScrollEnabled(isAtBottom);
+		}
+	};
+
+	// Yeni mesaj geldiğinde otomatik scroll yap
+	useEffect(() => {
+		if (isAutoScrollEnabled) {
+			scrollToBottom();
+		}
+	}, [messages, isAutoScrollEnabled]);
+	return (
+		<section
+			onScroll={handleScroll}
+			ref={messagesContainerRef}
+			className="flex flex-col gap-2 w-full h-full grow pt-4 px-4 overflow-y-auto"
+			style={{
+				height: "calc(100vh - 122px)",
+			}}
+		>
+			{messages.map((msg, idx) => (
+				<div
+					key={msg.id || idx}
+					className={classNames("flex w-full items-center break-all", {
+						"justify-end": msg.sender_type === MessageSenderType.Customer,
+						"justify-start": msg.sender_type === MessageSenderType.User,
+						"justify-center":
+							msg.sender_type === MessageSenderType.System ||
+							msg.sender_type === MessageSenderType.Activity,
+					})}
+				>
+					{msg.sender_type === MessageSenderType.System && <>{msg.content}</>}
+					{[MessageSenderType.Customer, MessageSenderType.User].includes(
+						msg.sender_type,
+					) && <div className="border rounded-md px-2 py-1">{msg.content}</div>}
+					{msg.sender_type === MessageSenderType.Activity &&
+						(msg.content.split("_").length === 3 ? (
+							<div className="border rounded-md px-2 py-1 text-xs">
+								{msg.content.split("_")[2]} odaya katıldı
+							</div>
+						) : (
+							msg.content
+						))}
+					{MessageSenderType.System === msg.sender_type && (
+						<div className="text-xs text-neutral-400">
+							{msg.created_at.toLocaleString()}
+						</div>
+					)}
+				</div>
+			))}
+			{isTyping && (
+				<div className="flex w-full items-center justify-end">
+					<div className="h-full flex items-center">
+						<Icon.MessageTyping />
+					</div>
+				</div>
+			)}
+
+			{!isAutoScrollEnabled && (
+				<div className="fixed bottom-[7.5rem] right-16">
+					<Button
+						type="button"
+						className="size-10 flex items-center justify-center !p-0"
+						onClick={() => {
+							messagesContainerRef.current?.scrollTo({
+								top: messagesContainerRef.current?.scrollHeight,
+								behavior: "smooth",
+							});
+						}}
+					>
+						<Icon.ArrowDown className="size-5" />
+					</Button>
+				</div>
+			)}
+			<div ref={messagesEndRef} />
+		</section>
+	);
+}

package/src/features/widget/components/WidgetIcon.tsx

@@ -0,0 +1,26 @@
+import Icon from "@/components/app/icon";
+import classNames from "classnames";
+
+type Props = {
+	image_url?: string;
+	name: string;
+	size?: string;
+};
+
+export default function WidgetIcon({
+	image_url,
+	name,
+	size = "size-9",
+}: Props) {
+	return image_url ? (
+		<img
+			src={image_url}
+			alt={name}
+			className={classNames("rounded-md", size)}
+		/>
+	) : (
+		<div className="flex items-center justify-center gap-1">
+			<Icon.Website className={classNames("text-slate-500", size)} />
+		</div>
+	);
+}