OmniChannel Svelte Themes

Omnichannel

This repository hosts a chat platform that bridges external messaging channels with a custom frontend built in Svelte and a backend powered by Rust Actix Web.

Chat Platform

Overview

This repository hosts a chat platform that bridges external messaging channels with a custom frontend built in Svelte and a backend powered by Rust Actix Web. LINE is the first connector, but the architecture allows adding other platforms (e.g. Facebook Messenger, WhatsApp, web chat) without rewriting the operator experience. The backend is responsible for serving the compiled frontend bundle, exposing APIs, and relaying webhook events so operators get a seamless experience when replying to customers, managing context, and extending the conversation with internal tooling.

Key Capabilities

  • Channel connectors: Start with LINE webhook ingestion, then expand to other messaging platforms by normalising incoming events into a shared format.
  • Unified chat console: Svelte UI (built once and served by Actix) for viewing conversation timelines, composing replies, and previewing attachments before sending them back to LINE users.
  • Session orchestration: Actix backend handles conversation state, persistence, and integration with third-party services (e.g. CRM, analytics).
  • Extensible automation: Hooks for adding bots, canned responses, or AI-assisted replies without blocking the manual operator flow.

Tech Stack

  • Frontend: SvelteKit (TypeScript, Vite) with Tailwind CSS for rapid UI composition. Production builds are emitted to frontend/dist and mounted as static assets inside the Actix service.
  • Backend: Rust stable toolchain with Actix Web, SQLx (PostgreSQL) for persistence, and Redis for ephemeral state or rate limiting.
  • Messaging: Channel connector framework with LINE Messaging API as the initial implementation.
  • Tooling: Docker/Docker Compose for local orchestration, PNPM for frontend dependencies, Justfile or Makefile for scripted workflows.

Planned Project Structure

.
├── frontend/           # SvelteKit app (chat console, operator tools)
├── backend/            # Actix services, domain logic, integrations
├── infra/              # Docker Compose, infrastructure as code, deployment manifests
├── docs/               # Architecture docs, task lists, integration guides
├── scripts/            # Helper scripts (database migrations, data import)
└── README.md

Prerequisites

  • Rust 1.76+ with rustup, cargo and the wasm32-unknown-unknown target (for potential Svelte adapters).
  • Node.js 20+ with pnpm (preferred) or npm.
  • PostgreSQL 15+ and Redis 7+ running locally or accessible remotely.
  • Docker Desktop (optional but recommended) for running supporting services and integration tests.
  • LINE Developer account with Messaging API channel configured.

Environment Variables

Create a .env file for both backend and frontend build steps. Suggested keys:

# Backend
DATABASE_URL=postgres://user:password@localhost:5432/line_chat
REDIS_URL=redis://localhost:6379/0
LINE_CHANNEL_SECRET=<line-channel-secret>
LINE_CHANNEL_ACCESS_TOKEN=<line-channel-access-token>
LINE_WEBHOOK_PATH=/line/webhook
FRONTEND_ORIGIN=http://localhost:8080
RUST_LOG=info

# Frontend
VITE_API_BASE_URL=http://localhost:8080
VITE_LINE_LIFF_ID=<optional-liff-id>

Local Development

  1. Bootstrap dependencies
    rustup target add wasm32-unknown-unknown
    pnpm install
    
  2. Run supporting services (PostgreSQL, Redis) via Docker Compose or your preferred stack.
  3. Watch frontend during development (hot reload)
    cd frontend
    pnpm dev
    
  4. Start backend (serves API and, in production mode, the compiled frontend)
    cd backend
    cargo run
    
  5. Expose webhook using a tunneling service such as ngrok or Cloudflared and register the public URL with the LINE channel.

Build & Serve Flow

For integrated testing or production, build the frontend once and let Actix serve the static files:

cd frontend
pnpm build

cd ../backend
cargo run --release # ensure Actix is configured to serve ../frontend/dist

The backend should mount the compiled bundle (e.g. using actix-files) and fall back to index.html for client-side routing.

Testing & Quality

  • Use cargo test --all for backend unit/integration tests. Add structured logging (tracing) and contract tests for external integrations.
  • Use pnpm test / pnpm check for frontend unit tests and type checks.
  • Define end-to-end scenarios (e.g. receiving text, image, sticker messages) with Playwright or Cypress.
  • Configure CI to run linting, tests, and security scans on every pull request.

Deployment Notes

  • Package backend as a Docker image (multi-stage build using cargo-chef for caching) and deploy to container orchestrators (Fly.io, AWS ECS, Kubernetes, etc.).
  • Embed the frontend build artifacts into the backend container image or mount them at runtime so Actix can serve static assets from /frontend/dist.
  • Secure webhooks via HTTPS, IP allowlists, and HMAC validation using the LINE channel secret.
  • Manage configuration through environment variables and secret managers (AWS Secrets Manager, Vault, Doppler, etc.).

Task Tracking

High-level task breakdown with statuses lives in docs/tasks.md. Keep it updated as work progresses.

Resources & References

Top categories

Loading Svelte Themes