@caesor/wesley-chat-components

Shared React components for AI chat integration with context-aware interactions.

Installation

Using GitHub Package Registry

1. Create a .npmrc file in your project root:

@caesor:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

2. Set your GitHub token as an environment variable:

export GITHUB_TOKEN=your_github_personal_access_token

Note: You need a GitHub personal access token with read:packages permission. Create one here.

3. Install the package:

# Using npm
npm install @caesor/wesley-chat-components

# Using yarn
yarn add @caesor/wesley-chat-components

# Using pnpm
pnpm add @caesor/wesley-chat-components

Features

• 🤖 AI Chat Widget - Full-featured chat interface with streaming support
• 🎯 Context-Aware - Different behaviors based on trigger context
• 🎨 Customizable - Flexible theming and configuration options
• 📝 Markdown Support - Rich text rendering with syntax highlighting
• 🔄 Streaming Responses - Real-time message streaming
• 📱 Responsive - Works on all devices

Quick Start

Basic Chat Widget

import { ChatWidget } from '@caesor/wesley-chat-components';

function App() {
  return (
    <ChatWidget
      apiEndpoint="/api/chat"
      variant="floating"
      position="bottom-right"
      title="AI Assistant"
      initialMessage="Hello! How can I help you today?"
    />
  );
}

Replace Email Links with AI Agent

Replace traditional mailto: links with AI-powered interactions:

import { AgentDialog, createAgentContext } from '@caesor/wesley-chat-components';

// Before: <a href="mailto:[email protected]">Contact Us</a>

// After:
<AgentDialog
  context={createAgentContext('contact')}
  className="contact-button"
>
  Contact Us
</AgentDialog>

Context-Aware Templates

Different contexts for different interaction points:

// Template inquiry
<AgentDialog
  context={{
    trigger: 'template',
    metadata: {
      templateId: 'tech-startup',
      templateTitle: 'Tech Startup Template',
      templateFeatures: ['Hero animations', 'Feature cards', 'Pricing tables']
    }
  }}
>
  Request This Design
</AgentDialog>

// Service inquiry
<AgentDialog
  context={{
    trigger: 'service',
    metadata: {
      serviceType: 'AI Integration'
    }
  }}
>
  Learn More About AI Integration
</AgentDialog>

Components

ChatWidget

Main chat interface component with multiple display variants.

<ChatWidget
  // API Configuration
  apiEndpoint="/api/chat/stream"
  apiKey="your-api-key"

  // UI Configuration
  variant="floating" // 'floating' | 'inline' | 'modal'
  position="bottom-right"
  theme="light"

  // Content
  title="AI Assistant"
  subtitle="How can I help?"
  placeholder="Type your message..."
  initialMessage="Welcome! How can I assist you today?"
  suggestedQuestions={[
    "Tell me about your services",
    "I need help with a project"
  ]}

  // Behavior
  autoOpen={false}
  useStreaming={true}
  persistMessages={false}

  // Events
  onOpen={() => console.log('Chat opened')}
  onClose={() => console.log('Chat closed')}
  onMessageSent={(message, context) => console.log('Sent:', message)}
  onMessageReceived={(message) => console.log('Received:', message)}
  onError={(error) => console.error('Error:', error)}
/>

AgentDialog

Button wrapper that opens chat with specific context.

<AgentDialog
  context={{
    trigger: 'header',
    metadata: { page: 'home' }
  }}
  widgetProps={{
    apiEndpoint: '/api/chat',
    title: 'Sales Assistant'
  }}
  className="cta-button"
  disabled={false}
>
  Start Conversation
</AgentDialog>

MarkdownRenderer

Renders markdown content with syntax highlighting.

import { MarkdownRenderer } from '@caesor/wesley-chat-components';

<MarkdownRenderer
  content="# Hello World\n\nThis is **markdown** content with `code`."
  className="markdown-content"
/>

Context System

The context system helps provide relevant initial messages and suggestions based on where the user triggered the chat.

Available Contexts

• header - Navigation/header interactions
• template - Template/product inquiries
• service - Service-specific questions
• contact - General contact requests
• footer - Footer link interactions
• general - Default context

Using Hooks

import { useAgentContext } from '@caesor/wesley-chat-components';

function MyComponent() {
  const context = useAgentContext({
    trigger: 'template',
    metadata: {
      templateId: 'portfolio',
      templateTitle: 'Portfolio Template'
    }
  });

  return (
    <ChatWidget
      context={context}
      // Context will automatically set initial message and suggestions
    />
  );
}

API Endpoint Requirements

Your API endpoint should accept POST requests with the following format:

Request

{
  message: string;
  context?: AgentContext;
  messages?: Message[];
}

Response (Streaming)

For streaming responses, return Server-Sent Events:

data: {"type": "content", "content": "Hello "}
data: {"type": "content", "content": "world!"}
data: {"type": "done"}

Response (Non-streaming)

{
  "message": "Response from the AI assistant",
  "metadata": {}
}

Styling

The components use Ant Design (antd) for UI elements. Make sure to import antd styles in your app:

// In your main app file
import 'antd/dist/reset.css';

TypeScript

Full TypeScript support with exported types:

import type {
  ChatWidgetProps,
  AgentDialogProps,
  AgentContext,
  Message,
  ChatState
} from '@caesor/wesley-chat-components';

Development

Local Development

# Clone the repository
git clone https://github.com/Caesor/wesley-chat-components.git
cd wesley-chat-components

# Install dependencies
npm install

# Build the package
npm run build

# Link for local testing
npm link

Testing Locally

In your project:

npm link @caesor/wesley-chat-components

Security

See SECURITY.md for our security policy and how to report vulnerabilities.

License

MIT - See LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

• GitHub Issues: Report bugs
• Email: [email protected]