copilot-sales Svelte Themes

Copilot Sales

CoPilot Sales - AI sales agent frontend built with Svelte

Download

CoPilot Sales

AI-powered sales assistant frontend built with Svelte + Vite, based on the [sbbot] agent architecture prototype.

The UI covers all three core use-case flows — meeting preparation, live in-call advising, and post-meeting analysis — each driven by a dedicated AI agent.

Architecture

Orchestrator / Router
├── Prep Agent          — pre-meeting dossier & plan (US2, US3)
├── Live Advisor Agent  — real-time advice during the call (US1)
└── Post-Meeting Agent  — summary, action items & coaching (US4, US5)

Shared Memory (client context + meeting history) is accessible by all agents. The Tool Layer connects to CRM, ЕГРЮЛ, zakupki.gov.ru, GigaSearch, and AssemblyAI Streaming.

Screens

📅 Today — Prep Agent

  • List of today's meetings with time, client, contact and topic
  • Per-meeting Prep Agent status (ready / loading / pending)
  • Client Dossier panel for the selected meeting:
    • Company stats pulled from CRM + ЕГРЮЛ (get_client_card)
    • Pain-point hypotheses and key meeting questions (generated by LLM)
    • Latest news from GigaSearch / Tavily (search_news)
    • Active procurement tenders from zakupki.gov.ru (search_procurement)
    • Competitor map
    • "Start Meeting" button → transitions to Live Advisor view

🎙️ Live — Live Advisor Agent

  • Real-time WebSocket connection to DialogScribe (/api/live-hints/ws)
  • Microphone recording via MediaRecorder (stop-start cycling, 6-sec segments)
  • Audio sent as base64 WebM → backend converts to WAV via ffmpeg → Mistral Voxtral ASR
  • Two-tier cascade indicator:
    • Fast layer — local keyword classifier detects triggers (price, objection, competitor)
    • Slow layer — LLM cascade generates contextual tips via WebSocket
  • Contextual tip cards appear on detection of key markers: цена, возражение, конкурент
  • Shared Memory chip showing loaded client profile
  • Elapsed call timer + "End Meeting" → transitions to Post-Meeting view

📊 Post-Meeting — Post-Meeting Agent

  • Processing animation showing the map-reduce pipeline: transcribe_file → parallel LLM calls → save_meeting
  • Results panel:
    • Summary — full meeting summary (GigaChat Max)
    • Action Items — checklist with owner and priority
    • Key Decisions — bullet list of agreements reached
    • Competency Coaching — per-skill score (1–5) + improvement tip (get_competency_tips)
  • Export to CRM button

Backend Integration — DialogScribe

The Post-Meeting and Live Advisor screens connect to DialogScribe — a self-hosted speech-to-text + LLM analysis backend (FastAPI, port 7860).

Endpoints used

Endpoint Used by Purpose
GET /health AgentStatusBar Backend health polling (every 30 s)
POST /api/auth/login src/lib/api.js Auto-login → JWT token
WS /api/live-hints/ws LiveAdvisor Real-time mic audio → transcript + hints (WebSocket)
POST /api/transcribe PostMeeting Upload audio/video → transcript + diarization
POST /api/summary PostMeeting Generate structured meeting summary
POST /api/insights PostMeeting Extract action items, decisions, insights
POST /api/chat LiveAdvisor Fallback advisor tip endpoint

Authentication

DialogScribe requires a JWT Bearer token for all /api/* routes. The API client handles this transparently:

  1. On the first call, api.js posts VITE_DS_EMAIL / VITE_DS_PASSWORD to /api/auth/login
  2. The returned access_token is cached in memory for all subsequent requests
  3. If a request returns 401 (token expired), the client re-logs in and retries automatically

Credentials default to [email protected] / admin123 — matching the values set by docker-compose.fullstack.yaml.

API wire format notes

DialogScribe's endpoints differ slightly from generic OpenAI conventions:

Endpoint Field sent Field returned
POST /api/transcribe diarization_mode: "simple" {text, segments, duration, language}
POST /api/summary {text, template_key?} {summary_markdown, summary_html}
POST /api/chat {text, messages: [{role,content}]} {answer}

api.js normalises these into a consistent shape so components don't need to know the details.

Eliminates CORS entirely — nginx serves the frontend and proxies all /api/*, /health, /v1/* requests to DialogScribe on the internal Docker network.

Prerequisites: Docker Desktop, a Mistral API key.

# 1. Clone DialogScribe alongside this repo
git clone https://github.com/Timik232/DialogScribe ../DialogScribe

# 2. Set your Mistral key in docker-compose.fullstack.yaml
#    (MISTRAL_API_KEY / LLM_API_KEY fields in the dialogscribe service)

# 3. Build and start both services
docker compose -f docker-compose.fullstack.yaml up --build

# → Frontend + API available at http://localhost:5173

The dialogscribe service exposes only port 7860 on the internal app-net network (not to the host), so the browser always talks to a single origin through nginx.

Dev setup (frontend only, no Docker)

npm install
# Leave VITE_API_BASE_URL empty in .env — Vite proxy handles forwarding
echo "VITE_API_BASE_URL=" > .env
npm run dev

In this mode Vite dev server proxies all /api/*, /health, /v1/* requests (including WebSocket) to DialogScribe on localhost:7860. Start DialogScribe separately via docker compose -f docker-compose.dev.yaml up -d.

Fallback behaviour

Both live components degrade gracefully when the backend is offline:

  • Live Advisor — shows connection error with retry button; does not block the UI
  • Post-Meeting — "Демо-режим" button runs the full UI flow with mock data so the demo never breaks

Tech Stack

Layer Choice
Framework Svelte 4
Build tool Vite 5
Backend DialogScribe (FastAPI + Mistral Voxtral)
Styling Scoped CSS (dark theme, no external CSS lib)
Font Inter (Google Fonts)
State Svelte stores + component props

Getting Started

Option A — Full stack (Docker, recommended)

git clone https://github.com/Timik232/DialogScribe ../DialogScribe
# edit docker-compose.fullstack.yaml → set MISTRAL_API_KEY / LLM_API_KEY
docker compose -f docker-compose.fullstack.yaml up --build
# → http://localhost:5173

Option B — Frontend only (npm)

npm install
cp .env.example .env
# set VITE_API_BASE_URL=http://localhost:7860 and start DialogScribe separately
npm run dev
# → http://localhost:5173

# Production build
npm run build

Project Structure

src/
├── main.js
├── App.svelte                  # Root shell + view router
├── lib/
│   └── api.js                  # DialogScribe API client (all endpoints)
└── components/
    ├── Sidebar.svelte          # Navigation: Сегодня / В эфире / Итоги
    ├── AgentStatusBar.svelte   # Agent status chips + DialogScribe health indicator
    ├── MeetingList.svelte      # Today's schedule with Prep Agent status
    ├── ClientDossier.svelte    # Client dossier: stats, pain points, news, competitors
    ├── LiveAdvisor.svelte      # Live transcript + real-time tips via /api/chat
    └── PostMeeting.svelte      # File upload → transcribe → summary/insights pipeline

Agent → UI Mapping

Agent Use Cases UI Component
Prep Agent US2, US3 MeetingList + ClientDossier
Live Advisor Agent US1 LiveAdvisor
Post-Meeting Agent US4, US5 PostMeeting

Prototype Scope

Per the architecture doc, this prototype intentionally excludes:

  • Multi-step autonomous planning (agents do 1–3 steps max)
  • Write actions in real systems (CRM task creation, sending emails)
  • Fine-tuning — prompt engineering + RAG only
  • Cross-client long-term memory accumulation

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes