npm package: @kosmas10/chat-and-verify
Description: A chatbot with citations and highlights in the source document for easy verification of answers. Supports PDF and Word documents. Built with React for maximum reliability.
Author: Kosmas Karadimitriou
Latest version: 0.0.22

# Chat & Verify

**Version:** 0.0.11  
**Package:** `@kosmas10/chat-and-verify`

A web-based chatbot application that provides citations and highlights in source documents for easy verification of AI-generated answers. Supports PDF and Word documents with an intelligent question-answering system powered by Claude or OpenAI.

## 🎯 Key Features

- **📄 Document Support**: Upload and analyze PDF and Word (DOCX) documents
- **💬 AI-Powered Chat**: Ask questions about your documents using Claude or OpenAI
- **🔍 Source Verification**: Every answer includes exact quotes from the source document
- **✨ Smart Highlighting**: Automatically highlights relevant passages in the document
- **🎨 Modern UI**: Clean, responsive interface with real-time document viewing
- **🔒 Privacy-First**: Your API keys are stored locally, never sent to third parties
- **⚡ Fast Loading**: 2-stage bundled React architecture for reliable, efficient loading
- **🎯 Claude Artifact Support**: Automatically detects and uses Claude when running as a Claude Artifact

## 🏗️ Architecture: 2-Stage Bundled React

This application uses a **simplified 2-stage loading architecture** with bundled React:

### Stage 1: Bootstrap (User Installs This)
- **File**: `chat-and-verify-bootstrap.html`
- **Purpose**: Ultra-minimal loader (~25 lines)
- **What it does**: Fetches the latest bundled app from npm/CDN

### Stage 2: Bundled Application (Auto-Updates)
- **Package**: `@kosmas10/chat-and-verify` (this package)
- **File**: `dist/chat-and-verify.html`
- **Purpose**: The full Chat & Verify application
- **What it does**: Provides the complete document chat experience

### Why This Architecture?

1. **🛡️ Future-Proof**: Stage 1 never changes, so users never need to update their local file
2. **🔄 Auto-Updates**: The application updates automatically via npm/CDN
3. **📦 Self-Contained**: All dependencies are bundled - no external CDN issues
4. **⚡ Fast**: Single HTML file with all assets inlined

## 🚀 Quick Start

### Option A: Using the Bootstrap (Recommended)

1. **Download the bootstrap file** (one time only):
   ```bash
   curl -O https://cdn.jsdelivr.net/npm/@kosmas10/chat-and-verify@latest/chat-and-verify-bootstrap.html
   ```

2. **Open it in your browser**:
   - Double-click the file, or
   - Open it from your browser's File menu

3. **That's it!** The application will load automatically and stay up-to-date.

### Option B: Direct CDN Link

Simply navigate to:
```
https://cdn.jsdelivr.net/npm/@kosmas10/chat-and-verify@latest/chat-and-verify-bootstrap.html
```

## 📖 Usage

### 1. Configure Your LLM

**If running as a Claude Artifact**: The app automatically detects the Claude environment and uses Claude directly - no configuration needed!

**If running standalone**: On first launch, you'll be prompted to configure your AI provider:

- **OpenAI**: Requires an API key from [platform.openai.com](https://platform.openai.com)
- **Claude**: Requires an API key from [console.anthropic.com](https://console.anthropic.com)

Your API key is stored locally in your browser and never sent anywhere except to your chosen LLM provider.

### 2. Upload a Document

Click "Select PDF or Word File" and choose:
- PDF files (.pdf)
- Word documents (.docx)

### 3. Ask Questions

Type your question in the chat box and press Enter or click the send button.

### 4. Verify Answers

- Click the 🔍 icon next to any quote to find it in the document
- Highlighted passages show you exactly where information came from
- Scroll through the document while chatting

## 🎨 Features in Detail

### Document Viewer
- **PDF Rendering**: High-quality PDF display with text selection
- **Word Support**: Native DOCX rendering with formatting preserved
- **Responsive Scaling**: Automatically adjusts to your screen size
- **Search & Highlight**: Find and highlight text across pages
- **Resizable Panel**: Drag the divider to adjust viewer/chat sizes

### Chat Interface
- **Markdown Support**: Rich text formatting in responses
- **Source Citations**: Every answer includes exact quotes
- **Message History**: Scroll through your conversation
- **Context Awareness**: AI remembers the conversation context

### LLM Configuration
- **Multiple Providers**: Choose between OpenRouter (GPT, Claude, Gemini) and direct OpenAI
- **Model Selection**: Pick specific models (GPT-4, Claude Sonnet, etc.)
- **Secure Storage**: API keys stored locally in browser
- **Easy Reconfiguration**: Change providers anytime

## 🔧 Development

### Prerequisites
- Node.js >= 18.0.0
- npm

### Setup
```bash
cd chat-and-verify
npm install
```

### Development Server
```bash
npm run dev
```

### Build
```bash
npm run build
```

The build produces a single HTML file at `dist/chat-and-verify.html`.

## 📦 Package Structure

```
@kosmas10/chat-and-verify/
├── dist/
│   └── chat-and-verify.html      # Bundled application
├── chat-and-verify-bootstrap.html # Bootstrap loader
├── README.md                      # This file
└── LICENSE                        # MIT License
```

## 🌐 Browser Compatibility

- ✅ Chrome/Chromium 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+

## 🔒 Privacy & Security

- **Local Storage**: API keys stored in browser localStorage only
- **No Tracking**: No analytics or tracking code
- **Direct API Calls**: Your data goes directly to your chosen LLM provider
- **Open Source**: Full source code available for inspection

## 🐛 Troubleshooting

### Application Won't Load

1. Check your internet connection
2. Ensure cdn.jsdelivr.net is accessible (not blocked by firewall)
3. Try clearing browser cache
4. Check browser console for errors (F12)

### LLM Not Responding

1. Verify your API key is correct
2. Check you have API credits/quota available
3. Ensure the API endpoint is accessible
4. Try reconfiguring with the LLM Config button

### Document Won't Upload

1. Ensure file is PDF or DOCX format
2. Check file size (very large files may be slow)
3. Try a different document to isolate the issue

## 📝 Version History

### 0.0.8 (Current)
- **Complete React rewrite** using V2 architecture
- Bundled React application with Tailwind CSS
- Simplified 2-stage loading (no intermediate loader needed)
- All dependencies bundled (PDF.js, mammoth, lucide-react)
- Improved component-based architecture for maintainability
- TypeScript for type safety

### 0.0.7
- Removed all remaining console.log statements
- Console now completely silent during normal operation

### 0.0.6
- Removed initial non-error console output
- Bootstrap file updated with cleaner code structure

### 0.0.5
- Improved Claude Artifact detection

### 0.0.4
- Added Claude Artifact detection and automatic configuration
- LLM Config button automatically hidden when running as Claude Artifact

### 0.0.3
- Bug fixes and improvements

### 0.0.2
- Added bootstrap loader for future-proof installations

### 0.0.1
- Initial release

## 🤝 Contributing

Contributions are welcome! Please visit:
https://github.com/kosmas10/ai-chat-extensions

## 📄 License

MIT License - See LICENSE file for details

## 🆘 Support

For issues, questions, or feature requests:
- **GitHub Issues**: https://github.com/kosmas10/ai-chat-extensions/issues
- **Package**: https://www.npmjs.com/package/@kosmas10/chat-and-verify

---

**Made with ❤️ for better AI verification**