398 lines
15 KiB
TypeScript
398 lines
15 KiB
TypeScript
'use client';
|
||
|
||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||
import { LayoutGrid, Loader2, Pin, Send, X } from 'lucide-react';
|
||
import { BotMessageKeyboard } from '@/components/chat/bot-message-keyboard';
|
||
import { BotChatMessageContextMenu } from '@/components/chat/bot-chat-message-context-menu';
|
||
import { useRealtime } from '@/components/notifications/realtime-provider';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import {
|
||
BotChatMessage,
|
||
BotChatMeta,
|
||
fetchBotChatMessages,
|
||
sendBotMessage
|
||
} from '@/lib/api';
|
||
import { postEmbeddedAuthToIframe, EMBEDDED_AUTH_REQUEST } from '@/lib/embedded-auth-bridge';
|
||
import { AUTH_REFRESH_KEY, AUTH_SESSION_KEY, AUTH_TOKEN_KEY } from '@/lib/api';
|
||
import { normalizeMiniAppUrl, resolveMiniAppTargetOrigin } from '@/lib/mini-app-url';
|
||
import { extractMessageReplyMarkup, serializeInlineKeyboardMarkup } from '@/lib/bot-reply-markup';
|
||
import { resolveComposerMenuButton, type ComposerMenuButton } from '@/lib/bot-menu-button';
|
||
import { cn } from '@/lib/utils';
|
||
import { useToast } from '@/components/id/toast-provider';
|
||
|
||
function formatMessageTime(value: string) {
|
||
return new Intl.DateTimeFormat('ru-RU', { hour: '2-digit', minute: '2-digit' }).format(new Date(value));
|
||
}
|
||
|
||
function resolveBotRef(botRef: string, payloadBotUsername?: unknown) {
|
||
if (typeof payloadBotUsername === 'string' && payloadBotUsername.trim()) {
|
||
return payloadBotUsername.trim();
|
||
}
|
||
return botRef;
|
||
}
|
||
|
||
function markupJsonFromPayload(payload: Record<string, unknown>) {
|
||
const rows = extractMessageReplyMarkup({
|
||
replyMarkup: payload.replyMarkup,
|
||
telegramReplyMarkup: payload.telegramReplyMarkup,
|
||
reply_markup: payload.reply_markup
|
||
});
|
||
return serializeInlineKeyboardMarkup(rows);
|
||
}
|
||
|
||
interface FamilyBotChatProps {
|
||
botRef: string;
|
||
botName: string;
|
||
token: string | null;
|
||
className?: string;
|
||
inputPlaceholder?: string;
|
||
onOpenMiniApp?: (url: string) => void;
|
||
onBotMetaChange?: (meta: BotChatMeta) => void;
|
||
}
|
||
|
||
export function FamilyBotChat({
|
||
botRef,
|
||
botName,
|
||
token,
|
||
className,
|
||
inputPlaceholder = 'Сообщение боту',
|
||
onOpenMiniApp,
|
||
onBotMetaChange
|
||
}: FamilyBotChatProps) {
|
||
const [messages, setMessages] = useState<BotChatMessage[]>([]);
|
||
const [draft, setDraft] = useState('');
|
||
const [loading, setLoading] = useState(true);
|
||
const [sending, setSending] = useState(false);
|
||
const [composerMenuButton, setComposerMenuButton] = useState<ComposerMenuButton | null>(null);
|
||
const [internalMiniAppUrl, setInternalMiniAppUrl] = useState<string | null>(null);
|
||
const [botMeta, setBotMeta] = useState<BotChatMeta | null>(null);
|
||
const { subscribe } = useRealtime();
|
||
const { showToast } = useToast();
|
||
|
||
const openMiniApp = useCallback(
|
||
(url: string) => {
|
||
if (onOpenMiniApp) {
|
||
onOpenMiniApp(url);
|
||
return;
|
||
}
|
||
setInternalMiniAppUrl(url);
|
||
},
|
||
[onOpenMiniApp]
|
||
);
|
||
|
||
const loadMessages = useCallback(async () => {
|
||
if (!token) return;
|
||
setLoading(true);
|
||
try {
|
||
const response = await fetchBotChatMessages(botRef, token);
|
||
setMessages(response.messages ?? []);
|
||
const menuButton = resolveComposerMenuButton({
|
||
composerMenuButtonJson: response.composerMenuButtonJson,
|
||
composerWebAppUrl: response.composerWebAppUrl
|
||
});
|
||
setComposerMenuButton(menuButton);
|
||
const meta: BotChatMeta = {
|
||
botId: response.botId,
|
||
botOwnerId: response.botOwnerId,
|
||
botUsername: response.botUsername,
|
||
botDisplayName: response.botDisplayName,
|
||
composerWebAppUrl: menuButton?.web_app.url ?? (response.composerWebAppUrl?.trim() || null),
|
||
composerMenuButtonJson: response.composerMenuButtonJson ?? (menuButton ? JSON.stringify(menuButton) : null),
|
||
manageWebAppUrl: response.manageWebAppUrl
|
||
};
|
||
setBotMeta(meta);
|
||
onBotMetaChange?.(meta);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [botRef, onBotMetaChange, token]);
|
||
|
||
useEffect(() => {
|
||
void loadMessages();
|
||
}, [loadMessages]);
|
||
|
||
useEffect(() => {
|
||
return subscribe((event) => {
|
||
const payload = event.payload ?? {};
|
||
const eventBotRef = resolveBotRef(botRef, payload.botUsername);
|
||
if (eventBotRef !== botRef && eventBotRef.replace(/_bot$/i, '') !== botRef.replace(/_bot$/i, '')) {
|
||
return;
|
||
}
|
||
|
||
if (event.type === 'bot_message') {
|
||
const messageId = Number(payload.messageId);
|
||
if (!Number.isFinite(messageId)) {
|
||
void loadMessages();
|
||
return;
|
||
}
|
||
|
||
const replyMarkupJson = markupJsonFromPayload(payload);
|
||
const outbound: BotChatMessage = {
|
||
id: `out-ws-${messageId}`,
|
||
direction: 'out',
|
||
text: typeof payload.text === 'string' ? payload.text : '',
|
||
messageType: typeof payload.messageType === 'string' ? payload.messageType : 'text',
|
||
messageId,
|
||
createdAt: new Date().toISOString(),
|
||
replyMarkupJson,
|
||
isPinned: Boolean(payload.isPinned),
|
||
pinnedAt: typeof payload.pinnedAt === 'string' ? payload.pinnedAt : null
|
||
};
|
||
|
||
setMessages((current) => {
|
||
const withoutDuplicate = current.filter((item) => item.messageId !== messageId || item.direction !== 'out');
|
||
return [...withoutDuplicate, outbound].sort((a, b) => a.createdAt.localeCompare(b.createdAt));
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (event.type === 'bot_menu_button_updated') {
|
||
const menuButton = resolveComposerMenuButton({
|
||
composerMenuButtonJson:
|
||
typeof payload.composerMenuButtonJson === 'string' ? payload.composerMenuButtonJson : null,
|
||
composerWebAppUrl: typeof payload.composerWebAppUrl === 'string' ? payload.composerWebAppUrl : null
|
||
});
|
||
setComposerMenuButton(menuButton);
|
||
setBotMeta((current) =>
|
||
current
|
||
? {
|
||
...current,
|
||
composerWebAppUrl: menuButton?.web_app.url ?? null,
|
||
composerMenuButtonJson: menuButton ? JSON.stringify(menuButton) : null
|
||
}
|
||
: current
|
||
);
|
||
return;
|
||
}
|
||
|
||
if (event.type === 'bot_message_edited') {
|
||
const messageId = Number(payload.messageId);
|
||
if (!Number.isFinite(messageId)) {
|
||
void loadMessages();
|
||
return;
|
||
}
|
||
|
||
const replyMarkupJson = markupJsonFromPayload(payload);
|
||
setMessages((current) =>
|
||
current.map((item) =>
|
||
item.messageId === messageId && item.direction === 'out'
|
||
? {
|
||
...item,
|
||
text: typeof payload.text === 'string' ? payload.text : item.text,
|
||
replyMarkupJson: replyMarkupJson ?? item.replyMarkupJson ?? null
|
||
}
|
||
: item
|
||
)
|
||
);
|
||
return;
|
||
}
|
||
|
||
if (event.type === 'bot_message_pinned') {
|
||
const messageId = Number(payload.messageId);
|
||
if (!Number.isFinite(messageId)) {
|
||
void loadMessages();
|
||
return;
|
||
}
|
||
|
||
setMessages((current) =>
|
||
current.map((item) =>
|
||
item.messageId === messageId && item.direction === 'out'
|
||
? {
|
||
...item,
|
||
isPinned: Boolean(payload.isPinned),
|
||
pinnedAt: typeof payload.pinnedAt === 'string' ? payload.pinnedAt : null
|
||
}
|
||
: item
|
||
)
|
||
);
|
||
}
|
||
});
|
||
}, [botRef, loadMessages, subscribe]);
|
||
|
||
async function handleSend() {
|
||
if (!token || !draft.trim() || sending) return;
|
||
const text = draft.trim();
|
||
setSending(true);
|
||
setDraft('');
|
||
setMessages((current) => [
|
||
...current,
|
||
{
|
||
id: `in-local-${Date.now()}`,
|
||
direction: 'in',
|
||
text,
|
||
messageType: 'text',
|
||
messageId: 0,
|
||
createdAt: new Date().toISOString()
|
||
}
|
||
]);
|
||
try {
|
||
await sendBotMessage(botRef, text, token);
|
||
await loadMessages();
|
||
} finally {
|
||
setSending(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className={cn('flex min-h-0 flex-1 flex-col', className)}>
|
||
<div className="flex-1 space-y-2 overflow-y-auto px-4 py-4">
|
||
{loading ? (
|
||
<div className="flex items-center justify-center gap-2 py-8 text-sm text-[#667085]">
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
Загрузка...
|
||
</div>
|
||
) : messages.length ? (
|
||
messages.map((message) => {
|
||
const mine = message.direction === 'in';
|
||
const hasKeyboard = Boolean(message.replyMarkupJson?.trim());
|
||
return (
|
||
<div key={message.id} className={cn('flex', mine ? 'justify-end' : 'justify-start')}>
|
||
<BotChatMessageContextMenu text={message.text} onCopy={() => showToast('Текст скопирован')}>
|
||
<div className={cn('max-w-[78%] rounded-[18px] px-3 py-2 shadow-sm', mine ? 'rounded-br-md bg-[#effdde]' : 'rounded-bl-md bg-white')}>
|
||
{message.isPinned ? (
|
||
<div className={cn('mb-1 flex items-center gap-1 text-[11px] font-medium', mine ? 'text-[#6c8f56]' : 'text-[#3390ec]')}>
|
||
<Pin className="h-3 w-3" />
|
||
Закреплено
|
||
</div>
|
||
) : null}
|
||
{!mine ? <p className="mb-0.5 text-[11px] font-semibold text-[#3390ec]">{botName}</p> : null}
|
||
<p className="whitespace-pre-wrap text-sm">{message.text || '…'}</p>
|
||
{!mine && hasKeyboard && message.messageId > 0 ? (
|
||
<BotMessageKeyboard
|
||
botRef={botRef}
|
||
botId={botMeta?.botId}
|
||
messageId={message.messageId}
|
||
markup={message.replyMarkupJson}
|
||
token={token}
|
||
onOpenMiniApp={openMiniApp}
|
||
/>
|
||
) : null}
|
||
<p className="mt-1 text-[10px] text-[#a8adbc]">{formatMessageTime(message.createdAt)}</p>
|
||
</div>
|
||
</BotChatMessageContextMenu>
|
||
</div>
|
||
);
|
||
})
|
||
) : (
|
||
<p className="py-8 text-center text-sm text-[#667085]">Напишите /help, чтобы начать</p>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-2 border-t border-[#dce3ec] bg-white px-4 py-3">
|
||
{composerMenuButton ? (
|
||
<Button
|
||
type="button"
|
||
variant="secondary"
|
||
className="h-10 shrink-0 rounded-full border border-[#3390ec]/20 bg-[#3390ec]/10 px-3 text-[#3390ec] transition hover:bg-[#3390ec]/15"
|
||
aria-label={composerMenuButton.text}
|
||
title={composerMenuButton.text}
|
||
onClick={() => openMiniApp(composerMenuButton.web_app.url)}
|
||
>
|
||
<LayoutGrid className="mr-1.5 h-4 w-4" />
|
||
<span className="max-w-[96px] truncate text-xs font-medium">{composerMenuButton.text}</span>
|
||
</Button>
|
||
) : null}
|
||
<Input
|
||
value={draft}
|
||
onChange={(event) => setDraft(event.target.value)}
|
||
placeholder={inputPlaceholder}
|
||
className="rounded-xl"
|
||
onKeyDown={(event) => {
|
||
if (event.key === 'Enter' && !event.shiftKey) {
|
||
event.preventDefault();
|
||
void handleSend();
|
||
}
|
||
}}
|
||
/>
|
||
<Button className="h-10 w-10 shrink-0 rounded-full p-0" disabled={sending || !draft.trim()} onClick={() => void handleSend()}>
|
||
{sending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
|
||
</Button>
|
||
</div>
|
||
<BotMiniAppSheet
|
||
url={internalMiniAppUrl}
|
||
title={composerMenuButton?.text ?? 'Mini App'}
|
||
authToken={token}
|
||
onClose={() => setInternalMiniAppUrl(null)}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface BotMiniAppSheetProps {
|
||
url: string | null;
|
||
title?: string;
|
||
authToken?: string | null;
|
||
authRefreshToken?: string | null;
|
||
authSessionId?: string | null;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export function BotMiniAppSheet({
|
||
url,
|
||
title = 'Mini App',
|
||
authToken,
|
||
authRefreshToken,
|
||
authSessionId,
|
||
onClose
|
||
}: BotMiniAppSheetProps) {
|
||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||
const normalizedUrl = url ? normalizeMiniAppUrl(url) : null;
|
||
const resolvedAuthToken =
|
||
authToken ?? (typeof window !== 'undefined' ? window.localStorage.getItem(AUTH_TOKEN_KEY) : null);
|
||
|
||
const pushAuthToIframe = useCallback(() => {
|
||
if (!iframeRef.current || !resolvedAuthToken) return;
|
||
postEmbeddedAuthToIframe(iframeRef.current, {
|
||
token: resolvedAuthToken,
|
||
refreshToken: authRefreshToken ?? window.localStorage.getItem(AUTH_REFRESH_KEY),
|
||
sessionId: authSessionId ?? window.localStorage.getItem(AUTH_SESSION_KEY)
|
||
});
|
||
}, [authRefreshToken, authSessionId, resolvedAuthToken]);
|
||
|
||
useEffect(() => {
|
||
function handleMessage(event: MessageEvent) {
|
||
const iframeOrigin = iframeRef.current
|
||
? resolveMiniAppTargetOrigin(iframeRef.current.getAttribute('src') || iframeRef.current.src, window.location.origin)
|
||
: window.location.origin;
|
||
if (event.origin !== iframeOrigin && event.origin !== window.location.origin) return;
|
||
if (event.data?.type !== EMBEDDED_AUTH_REQUEST) return;
|
||
pushAuthToIframe();
|
||
}
|
||
window.addEventListener('message', handleMessage);
|
||
return () => window.removeEventListener('message', handleMessage);
|
||
}, [pushAuthToIframe]);
|
||
|
||
useEffect(() => {
|
||
if (!normalizedUrl || !resolvedAuthToken) return;
|
||
pushAuthToIframe();
|
||
const interval = window.setInterval(pushAuthToIframe, 350);
|
||
const timeout = window.setTimeout(() => window.clearInterval(interval), 3500);
|
||
return () => {
|
||
window.clearInterval(interval);
|
||
window.clearTimeout(timeout);
|
||
};
|
||
}, [normalizedUrl, pushAuthToIframe, resolvedAuthToken]);
|
||
|
||
if (!normalizedUrl) return null;
|
||
return (
|
||
<div className="fixed inset-0 z-[70] flex items-end justify-center bg-black/40 p-4 sm:items-center">
|
||
<div className="flex h-[min(88vh,720px)] w-full max-w-[520px] flex-col overflow-hidden rounded-[24px] bg-white shadow-2xl">
|
||
<div className="flex items-center justify-between border-b border-[#eceef4] px-4 py-3">
|
||
<p className="font-semibold">{title}</p>
|
||
<Button type="button" variant="ghost" size="icon" className="h-8 w-8" aria-label="Закрыть" onClick={onClose}>
|
||
<X className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
<iframe
|
||
ref={iframeRef}
|
||
src={normalizedUrl}
|
||
title={title}
|
||
className="min-h-0 flex-1 border-0"
|
||
allow="clipboard-read; clipboard-write"
|
||
onLoad={pushAuthToIframe}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|