vCon Desktop

A modern web-based desktop application for viewing, validating, and analyzing vCon (Virtual Conversation) files. Built with React and TypeScript, vCon Desktop provides a comprehensive platform for working with conversation data according to the IETF vCon specification.

🚀 Features

Core Functionality

• 📁 File Upload & Validation - Upload and validate vCon JSON files with real-time schema validation
• 🔍 Advanced Search - Search through stored vCons with filtering by tags, parties, content, and metadata
• 📦 Bulk Import - Process multiple vCon files simultaneously with batch operations
• 📊 Analysis & Insights - View conversation analysis, transcripts, and consent information
• 🏷️ Tag Management - Organize and categorize vCons with custom tagging system

Data Sources & Integration

• ☁️ Supabase Integration - Cloud storage and database for persistent vCon management
• 🔧 Configurable Instances - Connect to your own Supabase instance or use the default
• 🔐 User Authentication - Secure user accounts with Row Level Security (RLS)
• 📱 Responsive Design - Works seamlessly on desktop and mobile devices
• 🌙 Modern UI - Clean, accessible interface with collapsible sidebar navigation

Standards Compliance

• ✅ IETF vCon Specification - Full compliance with vCon Working Group standards
• 🔒 Privacy & Consent - Built-in consent analysis and privacy protection features
• 📋 Schema Validation - Comprehensive validation against current vCon IETF draft

🛠️ Technology Stack

• Frontend: React 18, TypeScript, Vite
• Styling: Tailwind CSS, shadcn/ui components
• Backend: Supabase (PostgreSQL, Auth, Edge Functions)
• State Management: React Query (TanStack Query)
• Routing: React Router v6
• Icons: Lucide React
• Form Handling: React Hook Form with Zod validation

📦 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn package manager

Installation

1. Clone the repository

   git clone <YOUR_GIT_URL>
   cd vcon-desktop

2. Install dependencies

   npm install

3. Configure Supabase (Optional)

   • By default, the app uses a hosted Supabase instance
   • To use your own Supabase instance, configure it in the app settings
   • See the Supabase Configuration section below

4. Start the development server

   npm run dev

5. Open in browser

   http://localhost:5173
   

🔧 Supabase Configuration

vCon Desktop supports multiple Supabase configurations, allowing you to use the default hosted instance or connect to your own Supabase project.

Default Configuration

The application comes pre-configured with a hosted Supabase instance for immediate use. No setup required - just start using the app!

Custom Supabase Instance

To connect your own Supabase instance:

1. Access Settings

   • Click the "Supabase" button in the sidebar
   • Or navigate to /settings in the application

2. Configure Connection

   • Enter your Supabase project URL (e.g., https://your-project.supabase.co)
   • Provide your Supabase anon key from your project dashboard
   • Optionally name your configuration for easy identification

3. Test Connection

   • Use the "Test Connection" button to verify your configuration
   • The app will validate access to your Supabase instance

4. Save Configuration

   • Configuration is stored locally in your browser
   • Switch between multiple Supabase instances as needed

Setting Up Your Own Supabase Instance

If you're creating a new Supabase project for vCon Desktop:

1. Create Supabase Project

   • Visit supabase.com and create a new project
   • Note your project URL and anon key from Settings → API

2. Deploy Schema

   • The vCon Desktop schema includes tables for vcons, parties, dialog, analysis, attachments
   • Required RLS policies for user data isolation
   • Database functions for advanced search and analytics

3. Configure Edge Functions (Optional)

   • vCon crypto functions for signing and encryption
   • Requires deployment of the vcon-crypto edge function

Schema Requirements

Your Supabase instance must have the following components:

• Tables: vcons, parties, dialog, analysis, attachments, user_profiles, user_roles
• RLS Policies: User-scoped data access and security
• Database Functions: search_vcons, get_analysis_summary, get_vcons_with_parties
• Edge Functions: vcon-crypto for cryptographic operations

For detailed schema information, see the Supabase Architecture documentation.

🔧 Development

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint
npm run type-check   # Run TypeScript compiler check

Project Structure

src/
├── components/          # React components
│   ├── ui/             # shadcn/ui components
│   ├── VConViewer/     # vCon-specific components
│   └── AppSidebar.tsx  # Main navigation
├── hooks/              # Custom React hooks
├── integrations/       # External service integrations
│   └── supabase/       # Supabase client and types
├── pages/              # Route components
├── types/              # TypeScript definitions
├── utils/              # Utility functions
└── examples/           # Sample vCon files

📖 Usage Guide

Getting Started

1. Upload a vCon File

   • Drag and drop a JSON file onto the upload area
   • Or use the "Browse Files" button to select a file
   • Try the example files to get started quickly

2. Create an Account (Optional)

   • Sign up to save and search your vCons
   • Access advanced features like bulk import
   • Sync across devices with cloud storage

3. Explore Features

   • Validation Tab: Check vCon compliance and schema validation
   • Overview: View conversation details, parties, and metadata
   • Consent Panel: Analyze consent and privacy information
   • Export Options: Export vCons in various formats

Example vCon Files

The application includes three sample vCon files to help you get started:

1. Sales Email - Chevrolet Blazer EV: Automotive follow-up email example
2. Meeting Transcript - Sales Call: Phone conversation with transcript
3. Voicemail Call - Suburban Inquiry: Outbound voicemail message

🔍 vCon Specification

vCon (Virtual Conversation) is an IETF standard for representing and storing conversation data. Learn more:

• vCon Working Group - IETF standards development
• Conserver.io Documentation - Implementation guides and resources
• IETF Mission - Internet standards organization

Key vCon Features Supported

• ✅ Party management and identification
• ✅ Dialog content (text, audio, video)
• ✅ Analysis data and transcripts
• ✅ Attachment handling
• ✅ Consent and privacy metadata
• ✅ Cryptographic signatures and security
• ✅ Redaction and data protection

🚀 Deployment

Deploy to Lovable

Click the deploy button above or visit the Lovable Project and click Share → Publish.

Local Development Options

Use Lovable (Recommended)

Simply visit the Lovable Project and start prompting. Changes made via Lovable will be committed automatically to this repo.

Use your preferred IDE

If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.

Edit directly in GitHub

Navigate to files and click the "Edit" button (pencil icon) to make changes directly.

Use GitHub Codespaces

Click on "Code" → "Codespaces" → "New codespace" to launch a cloud development environment.

Manual Deployment

1. Build the application

   npm run build

2. Deploy the dist/ folder to your preferred hosting service

Custom Domain

To connect a custom domain, navigate to Project → Settings → Domains and click Connect Domain in Lovable.

🤝 Contributing

We welcome contributions from the community! Here's how to get started:

Development Process

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/your-feature-name

3. Make your changes
   • Follow existing code style and conventions
   • Add tests for new functionality
   • Update documentation as needed
4. Submit a pull request

Code Standards

• TypeScript: All code must be properly typed
• ESLint: Follow the configured linting rules
• Components: Use functional components with hooks
• Styling: Use Tailwind CSS classes and design system tokens
• Testing: Add tests for new features and bug fixes

Areas for Contribution

• 🐛 Bug fixes and improvements
• ✨ New vCon analysis features
• 📱 Mobile experience enhancements
• 🔒 Security and privacy improvements
• 🔧 Supabase deployment automation
• 📚 Documentation and tutorials
• 🌐 Internationalization support

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• IETF vCon Working Group - For developing the vCon specification
• Conserver.io Team - For vCon implementation guidance and documentation
• Supabase - For providing the backend infrastructure
• shadcn/ui - For the beautiful UI component library
• Lovable Platform - For hosting and deployment capabilities

📞 Support & Community

• 📧 Issues: Report bugs and request features via GitHub Issues
• 💬 Discussions: Join community discussions in GitHub Discussions
• 📖 Documentation: Visit conserver.io for detailed vCon guides
• 🌐 IETF: Contribute to vCon standards at the IETF vCon Working Group

---

Help us make the Internet work better by contributing to open standards and conversation data interoperability! 🌐✨