WebChat — Docs

Source

Local app path

/var/www/html/webchat

Stack

Frontend, backend, transport

Frontend

React 19 + TypeScript + Vite + Tailwind v4

State

Zustand auth store + React 19 hooks

Realtime

Socket.IO client for live support queue/chat

HTTP client

Axios

Auth API

Calls apigateway.webtour.ph

Routing

react-router-dom v7

Routes

Entry points in /webchat/src/App.tsx

/chat

Protected main chat page. Contains two tabs: AI Assistant and Live Support. Wired by /webchat/src/pages/Chat.tsx.

/support-dashboard

Agent-only support queue + conversation view. Join as agent, pickup customer sessions, send replies. Wired by /webchat/src/pages/SupportDashboard.tsx.

/login

Guest-only login. Submits to /auth/signin via API.

/register

Guest-only registration. Submits to /auth/signup via API.

Integration

External calls and how they work

Auth API

Axios base URL: https://apigateway.webtour.ph. Endpoints used: POST /auth/signin, POST /auth/signup. Token is stored and attached as Authorization: Bearer ... on requests.

Realtime chat

Uses Socket.IO for live support sessions and queues. Messages flow through socket events: user:join, user:message, agent:join, agent:pickup, agent:message, agent:close. Client listens for session:joined, chat:message, session:status, queue_update, session:history, session:message.

Build & deploy

Local output and serving

Build

Run npm run build from /var/www/html/webchat. Output goes to /var/www/html/webchat/dist.

Local dev proxy

Vite proxies /api and /socket.io to http://localhost:3003 via /webchat/vite.config.ts.

Production hosting

Apache vhost: webchat.webtour.ph. Static files served from /var/www/html/webchat/dist. Frontend API/socket calls are forwarded to a backend on port 3004 via Apache proxy.

Key files

Where routes, sockets, auth, and state live

/webchat/src/App.tsx — route map: login, register, chat, support-dashboard.

/webchat/src/pages/Chat.tsx — AI Assistant + Live Support tab container.

/webchat/src/pages/SupportDashboard.tsx — agent queue, pickup, close session.

/webchat/src/context/SupportContext.tsx — Socket.IO bindings, queue/session state.

/webchat/src/services/api.ts — axios auth clients to apigateway.

/webchat/src/store/authStore.ts — logged-in user state.

Caveat

Known runtime note

Port 3003 currently belongs to another app on this server, not WebChat. Production site should talk to the WebChat backend on the port configured in Apache, currently 3004. The docs site itself does not depend on chat backend availability.

WebChat Docs