Features

✨ Features

A breakdown of every major capability across all three subprojects.

---

→ Navigation: Home · Architecture · API Reference

---

Client — Chat UI

💬 Real-time WebSocket chat

Messages stream instantly over Direct Line's WebSocket connection. The client connects to the streamUrl returned by the server on conversation start — no polling, no delay.

📝 Markdown rendering

Bot responses are passed through a Markdown utility layer before display. This means Copilot Studio can return structured answers with headings, bullet lists, code blocks, links, and bold/italic text — all rendered beautifully in the chat bubble.

💾 Persistent session storage

Three keys are written to sessionStorage so a page refresh doesn't lose context:

Key	Contents
opotin_chat_messages	Full chat history array
opotin_conversation	Conversation metadata (ID, token, streamUrl)
opotin_watermark	Direct Line watermark for deduplication

🔁 Message deduplication

The Direct Line watermark is persisted so that reconnecting after a refresh doesn't re-deliver messages the user has already seen. Only activities newer than the last watermark are processed.

🗑️ Clear conversation control

A built-in control wipes all three sessionStorage keys and starts a fresh conversation — useful when testing or when a student wants a clean start.

---

Server — Proxy + API

🔒 Secure Direct Line proxy

DIRECT_LINE_SECRET never reaches the browser. The server exchanges it for a short-lived token and returns only the token and streamUrl to the client. See Architecture → Security Model for the full flow.

🗄️ SQLite persistence

Every conversationId is automatically stored in data/database.db the moment a conversation starts. The database file is created on first run — no setup needed.

⭐ Feedback API

Students can rate any conversation from 1–5 stars via POST /feedback/:conversationId. Ratings are stored alongside the conversation record and exposed to the admin dashboard.

🛡️ Admin endpoint protection

All analytics endpoints require an X-Admin-Token header matching the ADMIN_TOKEN value in server/.env. Requests without a valid token receive a 401 response.

---

Admin Dashboard

📊 Feedback analytics

The Overview tab shows:

• Average rating across all conversations
• Distribution bars — visual breakdown of how many 1★ through 5★ ratings were given
• Donut chart — proportional view of the rating spread
• Summary cards — total conversations rated, total feedback entries

🗂️ Conversation insights

The Conversations tab lists every rated conversation with sorting controls by date and rating. Each entry expands to show the full conversation details via ConversationCard.

🔑 Token-based authentication

Login submits the admin token, which is tested immediately against the backend. On success, the token is persisted to sessionStorage under opotin_admin_token so the admin stays logged in across tab refreshes.

🔄 Data refresh

The navbar includes a refresh button that re-fetches both /feedback and /conversations in parallel — no need to reload the page.

---

Developer Experience

📦 One-command startup

npm run dev   # starts client + server + admin concurrently

The root package.json uses concurrently to orchestrate all three Vite/Node processes in a single terminal session.

🔧 Independent subproject scripts

Each subproject can also be run on its own:

cd client && npm run dev    # Chat UI only
cd server && npm start      # API only
cd admin  && npm run dev    # Dashboard only

---

→ Next: 🔌 API Reference · 🚀 Setup & Configuration