+
+
+ {filtered.filter((row) => row.id).length} /{' '}
+ {
+ allRows.filter(
+ (row) => row.id && (filters.showRecent || row.active),
+ ).length
+ }{' '}
+ companies
+
+
+
+
+
+ {(selectedRows.length > 0 || selectedOnly) && (
+ <>
+
+
+ {
+ setSelection({})
+ setSelectedOnly(false)
+ }}
+ >
+ Clear selection
+
+
+ )}
+ {filterCount > 0 && (
+ {
+ setFilters(emptyCompanyFilters)
+ setSelectedOnly(false)
+ setPagination(initialPagination)
+ }}
+ >
+ Clear filters ({filterCount})
+
+ )}
+
+ {facets.some((facet) => filters[facet].length > 0) && (
+
+ {facets.flatMap((facet) =>
+ filters[facet].map((value) => (
+ toggleFacet(facet, [value])}
+ className="flex items-center gap-1 rounded border border-emerald-500/20 bg-emerald-500/10 px-1.5 py-0.5 text-[10px] text-emerald-700 dark:text-emerald-400"
+ aria-label={`Remove ${facetLabels[facet]} filter ${value}`}
+ >
+ {facetLabels[facet]}: {value}
+
+ )),
+ )}
+
+ )}
+
-
+
{table.getHeaderGroups().map((group) => (
{group.headers.map((header) => {
const sort = header.column.getIsSorted()
+ const index = sorting.findIndex(
+ (item) => item.id === header.column.id,
+ )
return (
- {header.column.getCanSort() ? (
+ {header.column.id === 'select' ? (
+
+
{sort === 'asc' ? 'โ' : 'โ'}
+ {sorting.length > 2 ? index : ''}
) : (
@@ -262,116 +1024,127 @@ export function LiveVisitors({ data }: { data: LiveData }) {
return (
-
- toggle(row.id)}
- className="flex w-full items-center gap-3 text-left rounded-sm focus-visible:outline focus-visible:outline-emerald-500"
+ {row.getVisibleCells().map((cell) => (
+
- {open ? (
-
+ row.toggleSelected(event.target.checked)
+ }
+ className="accent-emerald-600"
/>
- )}
-
- {company.id
- ? company.name.slice(0, 1).toUpperCase()
- : '?'}
-
-
-
- {company.name}
-
- {company.id &&
- company.name.toLowerCase() !== company.id && (
-
- {company.id}
-
+ ) : cell.column.id === 'name' ? (
+ toggleCompany(row.id)}
+ className="flex w-full items-center gap-2 text-left focus-visible:outline focus-visible:outline-emerald-500"
+ >
+ {open ? (
+
- Recently left
+
+ {company.name}
- )}
-
-
-
-
-
- {company.company?.industry || 'Unknown'}
-
-
-
- {company.company?.company_size || 'Unknown'}
-
-
-
- {company.libraries.slice(0, 2).map((library) => (
+
+ ) : cell.column.id === 'lastSeen' ? (
- {library}
-
- ))}
- {company.libraries.length > 2 && (
-
- +{company.libraries.length - 2}
+ {age(company.lastSeen, data.now)}
+ ) : (
+
)}
-
-
- {company.pages.length}
-
-
- {company.actions}
-
-
-
+
+ ))}
{open && (
-
+
+
{company.name}
+ {company.id && (
+
+ {company.id}
+
+ )}
+
+ {company.activeSessions} active sessions ยท{' '}
+ {company.activeTabs} tabs
+
+ {company.company?.linkedin_url &&
+ /^https:\/\/(www\.)?linkedin\.com\//.test(
+ company.company.linkedin_url,
+ ) && (
+
+ LinkedIn
+
+ )}
+
+
+
)}
)
})}
- {rows.length === 0 && (
+ {!rows.length && (
- {search
- ? 'No companies or pages match your search.'
+ {filterCount || selectedOnly
+ ? 'No companies match these filters.'
: 'No companies on public pages right now.'}
@@ -379,137 +1152,54 @@ export function LiveVisitors({ data }: { data: LiveData }) {
-
-
- Company matches describe the network, not a verified employer.
-
-
Missing heartbeats expire after 65 seconds.
+
+
Network matches, not verified employers.
+
+
+ Rows
+
+ table.setPageSize(Number(event.target.value))
+ }
+ className="rounded border border-gray-500/20 bg-transparent px-1"
+ >
+ {[25, 50, 100, 250].map((size) => (
+
+ {size}
+
+ ))}
+
+
+ table.previousPage()}
+ className="px-1 disabled:opacity-30"
+ >
+ Previous
+
+
+ {Math.min(
+ pagination.pageIndex + 1,
+ Math.max(1, table.getPageCount()),
+ )}{' '}
+ / {Math.max(1, table.getPageCount())}
+
+ table.nextPage()}
+ className="px-1 disabled:opacity-30"
+ >
+ Next
+
+
)
}
-
-function CompanySessions({
- company,
- now,
-}: {
- company: LiveCompanyRow
- now: string
-}) {
- return (
-
-
-
Sessions at {company.name}
-
- {
- company.sessions.filter((tabs) => tabs.some((tab) => tab.active))
- .length
- }{' '}
- active ยท {company.sessions.length} in view
-
-
-
- {company.sessions.map((tabs) => (
-
-
- )
-}
-
-function SessionDetails({ tabs, now }: { tabs: LiveTab[]; now: string }) {
- const first = tabs[0]
- const current =
- tabs.find((tab) => tab.active && tab.visible) ??
- tabs.find((tab) => tab.active) ??
- first
- const active = tabs.some((tab) => tab.active)
- const activity = tabs
- .flatMap((tab) => tab.activity)
- .sort((a, b) => b.at.localeCompare(a.at))
- .slice(0, 40)
- return (
-
-
- Visitor {first.sessionId.slice(0, 8)}
-
- {active ? (current.visible ? 'Visible' : 'Background') : 'Left'}
-
-
- {current.page}
-
- {!first.company && (
-
- {lookupLabels[first.lookupStatus]}
-
- )}
-
- {age(current.lastSeen, now)}
-
-
-
-
-
- Tabs {tabs.length}
-
-
- {tabs.map((tab) => (
-
-
- {tab.active
- ? tab.visible
- ? 'Visible'
- : 'Background'
- : 'Left'}
-
- {tab.page}
-
- ))}
-
-
- Arrived {age(first.arrivedAt, now)}
-
-
-
- Recent activity
- {activity.length ? (
-
- {activity.map((event, index) => (
-
-
- {age(event.at, now)}
-
-
-
{liveActions[event.action]}
-
- {event.page}
-
-
- ))}
-
- ) : (
- No actions recorded yet.
- )}
-
-
- )
-}
diff --git a/src/components/visitor-chat/AdminVisitorChats.css b/src/components/visitor-chat/AdminVisitorChats.css
new file mode 100644
index 000000000..7bc9ef3f4
--- /dev/null
+++ b/src/components/visitor-chat/AdminVisitorChats.css
@@ -0,0 +1,35 @@
+@layer utilities {
+ .visitor-chat-dock {
+ @tailwind utilities source(none);
+ }
+}
+@reference 'tailwindcss/theme.css';
+@custom-variant dark (&:is(.dark, .dark *));
+@source './AdminVisitorChats.tsx';
+
+.visitor-chat-dock {
+ position: fixed;
+ z-index: 60;
+ right: 12px;
+ bottom: 0;
+ display: flex;
+ align-items: flex-end;
+ gap: 8px;
+ max-width: calc(100vw - 24px);
+ overflow-x: auto;
+ pointer-events: none;
+}
+
+.visitor-chat-panel {
+ flex: 0 0 320px;
+ width: 320px;
+ max-width: calc(100vw - 24px);
+ height: min(520px, calc(100dvh - 80px));
+ pointer-events: auto;
+}
+
+.visitor-chat-panel.visitor-chat-minimized {
+ flex-basis: 200px;
+ width: 200px;
+ height: auto;
+}
diff --git a/src/components/visitor-chat/AdminVisitorChats.tsx b/src/components/visitor-chat/AdminVisitorChats.tsx
new file mode 100644
index 000000000..b78e399b9
--- /dev/null
+++ b/src/components/visitor-chat/AdminVisitorChats.tsx
@@ -0,0 +1,526 @@
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import './AdminVisitorChats.css'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+ closeVisitorChat,
+ deleteVisitorChat,
+ getVisitorChat,
+ getVisitorChats,
+ reopenVisitorChat,
+ sendVisitorChat,
+ startVisitorChat,
+} from '~/utils/visitor-chat/admin.functions'
+import {
+ chatPollMs,
+ chatStateSchema,
+ mergeChatState,
+ type VisitorChatState,
+} from '~/utils/visitor-chat/contract'
+
+type ChatTarget = { sessionId: string; label: string; chatId?: string | null }
+
+export default function AdminVisitorChats({
+ target,
+ request,
+}: {
+ target: ChatTarget | null
+ request: number
+}) {
+ const [tabs, setTabs] = useState((): ChatTarget[] => [])
+ const [minimized, setMinimized] = useState((): string[] => [])
+ const [inboxOpen, setInboxOpen] = useState(false)
+ const open = (next: ChatTarget) => {
+ const existing = tabs.find(
+ (item) =>
+ item.sessionId === next.sessionId ||
+ (next.chatId && item.chatId === next.chatId),
+ )
+ setTabs((previous) =>
+ existing
+ ? previous.map((item) =>
+ item.sessionId === existing.sessionId
+ ? { ...item, chatId: next.chatId || item.chatId }
+ : item,
+ )
+ : [...previous, next],
+ )
+ setMinimized((previous) =>
+ previous.filter((id) => id !== (existing?.sessionId || next.sessionId)),
+ )
+ }
+
+ useEffect(() => {
+ if (target) open(target)
+ else if (request > 0) setInboxOpen(true)
+ }, [target, request])
+ return createPortal(
+
+ {tabs.map((item) => (
+
+ setMinimized((previous) =>
+ previous.includes(item.sessionId)
+ ? previous.filter((id) => id !== item.sessionId)
+ : [...previous, item.sessionId],
+ )
+ }
+ onClose={() =>
+ setTabs((previous) =>
+ previous.filter((tab) => tab.sessionId !== item.sessionId),
+ )
+ }
+ onOpen={open}
+ />
+ ))}
+ setInboxOpen((value) => !value)}
+ onClose={() => setInboxOpen(false)}
+ onOpen={open}
+ />
+
,
+ document.body,
+ )
+}
+
+function ChatPanel({
+ target,
+ minimized,
+ onToggle,
+ onClose,
+ onOpen,
+}: {
+ target: ChatTarget | null
+ minimized: boolean
+ onToggle: () => void
+ onClose: () => void
+ onOpen: (target: ChatTarget) => void
+}) {
+ const client = useQueryClient()
+ const [selected, setSelected] = useState(target?.chatId || '')
+ const [search, setSearch] = useState('')
+ const [includeClosed, setIncludeClosed] = useState(false)
+ const [chat, setChat] = useState((): VisitorChatState | undefined => {
+ const cached = chatStateSchema.safeParse(
+ client.getQueryData(['admin', 'visitor-chat', selected]),
+ )
+ return cached.success ? cached.data : undefined
+ })
+ const [draft, setDraft] = useState('')
+ const [sending, setSending] = useState(false)
+ const [error, setError] = useState('')
+ const pending: { current: { id: string; body: string } | undefined } =
+ useRef(undefined)
+ const tail: { current: HTMLDivElement | null } = useRef(null)
+ const inbox = useQuery({
+ queryKey: ['admin', 'visitor-chats', search, includeClosed],
+ queryFn: () => getVisitorChats({ data: { search, includeClosed } }),
+ enabled: !target && !minimized,
+ refetchInterval: chatPollMs,
+ retry: false,
+ })
+ const thread = useQuery({
+ queryKey: ['admin', 'visitor-chat', selected],
+ queryFn: () => getVisitorChat({ data: { chatId: selected } }),
+ enabled: Boolean(selected),
+ refetchInterval: chatPollMs,
+ retry: false,
+ })
+ useEffect(() => {
+ setChat(undefined)
+ setDraft('')
+ setError('')
+ pending.current = undefined
+ }, [selected])
+ useEffect(() => {
+ const next = thread.data
+ if (next) setChat((previous) => mergeChatState(previous, next))
+ else if (thread.isSuccess && next === null) {
+ setChat(undefined)
+ onClose()
+ void client.invalidateQueries({ queryKey: ['admin', 'visitor-chats'] })
+ }
+ }, [thread.data, thread.isSuccess, client])
+ const lastSequence = chat?.messages.at(-1)?.sequence
+ useEffect(() => {
+ tail.current?.scrollIntoView({ block: 'nearest' })
+ }, [lastSequence])
+ const send = async () => {
+ const body = draft.trim()
+ if (!body || sending || (!selected && !target)) return
+ const message =
+ pending.current?.body === body
+ ? pending.current
+ : { id: crypto.randomUUID(), body }
+ pending.current = message
+ setSending(true)
+ setError('')
+ try {
+ const next = selected
+ ? await sendVisitorChat({ data: { chatId: selected, message } })
+ : target
+ ? await startVisitorChat({
+ data: { sessionId: target.sessionId, message },
+ })
+ : undefined
+ if (next) {
+ if (target) onOpen({ ...target, chatId: next.id })
+ setSelected(next.id)
+ setChat((previous) => mergeChatState(previous, next))
+ client.setQueryData(['admin', 'visitor-chat', next.id], next)
+ }
+ setDraft('')
+ pending.current = undefined
+ void client.invalidateQueries({ queryKey: ['admin', 'visitor-chats'] })
+ } catch (error) {
+ setError(
+ error instanceof Error ? error.message : 'Could not send. Try again.',
+ )
+ } finally {
+ setSending(false)
+ }
+ }
+ const label = selected
+ ? target?.label || `Visitor ${selected.slice(0, 8)}`
+ : target?.label || 'Select a chat'
+ return (
+
+
+
+ {target ? label : 'Chats'}
+ {chat?.messages.at(-1)?.senderRole === 'visitor' && (
+
+ Reply
+
+ )}
+
+
+ {minimized ? 'โด' : 'โพ'}
+
+
+ ร
+
+
+
+ {!target && (
+
+
+
+ {inbox.isError && (
+ inbox.refetch()}
+ >
+ Could not load chats. Retry
+
+ )}
+
+ {inbox.data?.chats.map((item) => (
+
{
+ onOpen({
+ chatId: item.id,
+ sessionId: item.originSessionId,
+ label:
+ item.company?.name ||
+ item.company?.domain ||
+ `Visitor ${item.originSessionId.slice(0, 8)}`,
+ })
+ }}
+ aria-current={selected === item.id ? 'true' : undefined}
+ className={`block w-full border-b border-gray-500/10 p-3 text-left text-xs hover:bg-gray-500/10 ${selected === item.id ? 'bg-emerald-500/10' : ''}`}
+ >
+
+ {item.company?.name ||
+ item.company?.domain ||
+ `Visitor ${item.originSessionId.slice(0, 8)}`}
+
+
+ {item.mutedAt
+ ? 'Visitor stopped chat'
+ : item.closedAt
+ ? 'Closed'
+ : item.lastSenderRole === 'visitor'
+ ? 'Needs reply'
+ : item.lastVisitorSeenAt
+ ? 'Open'
+ : 'Waiting for visitor'}{' '}
+ ยท{' '}
+ {new Date(item.updatedAt).toLocaleString([], {
+ month: 'short',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: '2-digit',
+ })}
+
+
+ ))}
+ {inbox.data?.truncated && (
+
+ Showing 200 matches. Narrow the search.
+
+ )}
+ {inbox.data && !inbox.data.chats.length && (
+
No matching chats.
+ )}
+
+ )}
+ {target && (
+
+
+ {chat && (
+ <>
+ {
+ try {
+ const next = chat.closed
+ ? await reopenVisitorChat({
+ data: { chatId: chat.id },
+ })
+ : await closeVisitorChat({
+ data: { chatId: chat.id },
+ })
+ setChat((previous) => mergeChatState(previous, next))
+ await thread.refetch()
+ await inbox.refetch()
+ } catch {
+ setError('Could not update chat.')
+ }
+ }}
+ >
+ {chat.closed ? 'Reopen' : 'Close chat'}
+
+ {
+ if (
+ !window.confirm(
+ 'Delete this chat and every message permanently?',
+ )
+ )
+ return
+ try {
+ await deleteVisitorChat({ data: { chatId: chat.id } })
+ onClose()
+ setChat(undefined)
+ await inbox.refetch()
+ } catch {
+ setError('Could not delete chat.')
+ }
+ }}
+ >
+ Delete
+
+
+ )}
+
+
+ {chat?.hasOlder && (
+
{
+ try {
+ const older = await getVisitorChat({
+ data: {
+ chatId: chat.id,
+ before: chat.messages[0]?.sequence,
+ },
+ })
+ if (older)
+ setChat((previous) =>
+ mergeChatState(previous, older, true),
+ )
+ else {
+ setChat(undefined)
+ setSelected('')
+ }
+ } catch {
+ setError('Could not load earlier messages.')
+ }
+ }}
+ >
+ Earlier messages
+
+ )}
+ {chat?.messages.map((message) => (
+
+
+ {message.senderImage && (
+
+ )}
+ {message.senderName} ยท{' '}
+ {new Date(message.createdAt).toLocaleString([], {
+ month: 'short',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: '2-digit',
+ })}
+
+
+ {message.body}
+
+ {message.senderRole === 'admin' && (
+
+ {chat.readThrough >= message.sequence
+ ? 'Seen'
+ : chat.deliveredThrough >= message.sequence
+ ? 'Delivered'
+ : 'Sent'}
+
+ )}
+
+ ))}
+ {!selected && target && (
+
+ Your first message opens a chat on this visitor's browser. It
+ may take up to 20 seconds to appear.
+
+ )}
+ {thread.isError && (
+
thread.refetch()}
+ >
+ Could not load messages. Retry
+
+ )}
+
+
+ {error}
+
+ )}
+ {(target || selected) &&
+ (chat?.closed || chat?.muted ? (
+
+ {chat.muted
+ ? 'The visitor stopped this chat.'
+ : 'This chat is closed.'}
+
+ ) : (
+