TJChatJS

A modern, UI-only React chat SDK built with Shadcn UI components and Tailwind CSS. Perfect for embedding chat functionality in web applications with a beautiful, customizable interface.

✨ Features

• 🎨 Beautiful UI - Built with Shadcn UI components and Tailwind CSS
• 🌓 Theme Support - Light/dark mode with custom primary colors
• 📱 Responsive Design - Mobile-first approach with adaptive layouts
• 💬 Two Modes - Floating chat button or full-screen interface
• 👥 Chat Types - One-on-one, group, and help chat support
• ✏️ Message Actions - Edit and delete messages with confirmation
• 📎 File Support - Drag & drop file uploads with preview
• 🎯 Developer Friendly - TypeScript support and easy integration
• 🚀 Zero Backend - Pure UI components ready for API integration

📦 Installation

npm install tjchatjs

🚀 Quick Start

Basic Usage

import { ChatSDK } from "tjchatjs";
import "tjchatjs/styles/globals.css";

function App() {
	return (
		<ChatSDK
			userId="user123"
			authToken="your-auth-token"
			config={{
				mode: "floating", // or "full"
				showHelpChat: true,
				theme: {
					mode: "light", // or "dark"
					primaryColor: "#3A8289",
					background: "#ffffff",
				},
			}}
		/>
	);
}

Floating Chat Mode

Perfect for customer support or quick chat access:

import { ChatSDK } from "tjchatjs";

function App() {
	return (
		<div>
			<h1>Your Website</h1>
			<p>Your content here...</p>

			<ChatSDK
				userId="user123"
				authToken="your-auth-token"
				config={{
					mode: "floating",
					showHelpChat: true,
					theme: {
						mode: "light",
						primaryColor: "#3A8289",
						background: "#ffffff",
					},
				}}
			/>
		</div>
	);
}

Full Screen Mode

For dedicated chat applications:

import { ChatSDK } from "tjchatjs";

function ChatApp() {
	return (
		<div style={{ height: "100vh" }}>
			<ChatSDK
				userId="user123"
				authToken="your-auth-token"
				config={{
					mode: "full",
					showHelpChat: true,
					theme: {
						mode: "dark",
						primaryColor: "#6366f1",
						background: "#1f2937",
					},
				}}
			/>
		</div>
	);
}

🎨 Configuration

ChatSDK Props

interface ChatSDKProps {
	userId: string; // Current user ID
	authToken: string; // Authentication token
	config: ChatConfig; // Configuration object
}

ChatConfig Options

interface ChatConfig {
	mode: "floating" | "full"; // Chat display mode
	showHelpChat: boolean; // Show help/support chat
	theme: ChatTheme; // Theme configuration
}

interface ChatTheme {
	mode: "light" | "dark"; // Color scheme
	primaryColor: string; // Primary brand color (hex)
	background: string; // Background color (hex)
}

📱 Responsive Behavior

Desktop (≥ 768px)

• Floating Mode: Button in bottom-right, popup panel
• Full Mode: Side-by-side conversation list and chat interface

Mobile (< 768px)

• Floating Mode: Same as desktop
• Full Mode: Stacked view - conversations first, then chat interface

🎯 Usage Examples

Customer Support Chat

function SupportPage() {
	return (
		<div>
			<header>Customer Support</header>
			<main>Your support content...</main>

			<ChatSDK
				userId={currentUser.id}
				authToken={authToken}
				config={{
					mode: "floating",
					showHelpChat: true,
					theme: {
						mode: "light",
						primaryColor: "#059669", // Green for support
						background: "#ffffff",
					},
				}}
			/>
		</div>
	);
}

Dark Theme Chat

function DarkChatApp() {
	return (
		<div className="dark">
			<ChatSDK
				userId="user123"
				authToken="token"
				config={{
					mode: "full",
					showHelpChat: false,
					theme: {
						mode: "dark",
						primaryColor: "#8b5cf6", // Purple
						background: "#0f172a",
					},
				}}
			/>
		</div>
	);
}

Custom Brand Colors

function BrandedChat() {
	return (
		<ChatSDK
			userId="user123"
			authToken="token"
			config={{
				mode: "floating",
				showHelpChat: true,
				theme: {
					mode: "light",
					primaryColor: "#dc2626", // Red brand color
					background: "#fefefe",
				},
			}}
		/>
	);
}

🔧 Integration with Backend

The SDK is UI-only and uses mock data by default. To integrate with your backend:

1. Replace ChatProvider with your own context
2. Connect message handlers to your API
3. Add real-time updates with WebSocket or polling
4. Implement authentication in your app

Example integration:

// Custom provider with real API
function CustomChatProvider({ children, theme }) {
	const [messages, setMessages] = useState([]);
	const [conversations, setConversations] = useState([]);

	const sendMessage = async (content) => {
		const response = await fetch("/api/messages", {
			method: "POST",
			body: JSON.stringify({ content }),
			headers: { Authorization: `Bearer ${authToken}` },
		});
		const newMessage = await response.json();
		setMessages((prev) => [...prev, newMessage]);
	};

	return (
		<ChatContext.Provider
			value={{
				messages,
				conversations,
				sendMessage,
				// ... other values
			}}
		>
			{children}
		</ChatContext.Provider>
	);
}

🎨 Customization

Styling with Tailwind

The SDK uses Tailwind CSS classes that you can override:

/* Custom styles */
.tjchatjs-floating-button {
	@apply shadow-2xl;
}

.tjchatjs-message-bubble {
	@apply rounded-xl;
}

Theme Variables

Customize CSS variables for advanced theming:

:root {
	--tjchatjs-primary: #3a8289;
	--tjchatjs-background: #ffffff;
	--tjchatjs-text: #1f2937;
}

📋 TypeScript Support

Full TypeScript support with exported types:

import {
	ChatSDK,
	ChatUser,
	ChatMessage,
	ChatConversation,
	ChatTheme,
	ChatConfig,
} from "tjchatjs";

// Use types in your code
const user: ChatUser = {
	id: "user123",
	name: "John Doe",
	avatar: "https://example.com/avatar.png",
	isOnline: true,
};

🚀 Development

Local Development

# Clone the repository
git clone https://github.com/your-username/tjchatjs.git
cd tjchatjs

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

src/
├── components/
│   ├── ui/           # Shadcn UI components
│   ├── ChatSDK.tsx   # Main SDK component
│   ├── ChatInterface.tsx
│   ├── MessageList.tsx
│   └── ...
├── providers/
│   └── ChatProvider.tsx
├── types/
│   └── index.ts
└── styles/
    └── globals.css

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

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

🆘 Support

• 📧 Email: [email protected]
• 💬 Discord: Join our community
• 📖 Documentation: docs.tjchatjs.com
• 🐛 Issues: GitHub Issues

Made with ❤️ by the TJChatJS team