Shop Agent Client

A React-based chat widget library for e-commerce websites. This is a work-in-progress project that provides a chat widget interface with basic functionality.

⚠️ Current Status

This is a development version (0.1.1) with the following limitations:

• ✅ Basic Chat Widget: Simple chat interface with floating button
• ✅ React Components: ChatWidget, ChatWindow, FloatingButton components
• ✅ TypeScript Support: Full type definitions included
• ✅ Build System: Vite-based build with ES and UMD modules
• ⚠️ API Integration: Currently uses mock responses (TODO: real API implementation)
• ⚠️ Limited Features: Basic chat UI without advanced AI features
• ❌ No Real Backend: API calls are commented out and use simulated responses

📦 Installation

npm install @shopagent/client

🎯 Basic Usage

JavaScript/TypeScript

import SAClient from "@shopagent/client";

// Initialize the chat widget
SAClient.init({
  apiKey: "your-api-key",
  serverUrl: "https://your-server-url.com",
});

HTML (CDN)

<script src="https://unpkg.com/@shopagent/client@latest/dist/sa-client.umd.js"></script>
<script>
  SAClient.init({
    apiKey: "your-api-key",
    serverUrl: "https://your-server-url.com",
  });
</script>

🛠️ Configuration

| Option | Type | Description | Default | | ----------- | ------ | ------------------------------------------------ | -------------- | | apiKey | string | Your API key (currently not used) | Required | | serverUrl | string | Server URL (currently not used) | Required | | theme | string | Theme: 'light', 'dark', or 'auto' | 'light' | | position | string | Widget position: 'bottom-right' or 'bottom-left' | 'bottom-right' |

🎨 What You Get

Current Features

• Floating Chat Button: Appears in bottom-right corner
• Chat Window: Opens when button is clicked
• Message Interface: Basic send/receive message UI
• Mock Responses: Simulated bot responses (no real AI)
• Responsive Design: Works on mobile and desktop
• TypeScript Support: Full type definitions

What's Missing (TODO)

• ❌ Real API Integration: Currently uses mock responses
• ❌ AI-Powered Responses: No actual AI functionality
• ❌ E-commerce Integration: No shopping cart or product integration
• ❌ Advanced Features: No file upload, typing indicators, etc.
• ❌ Customization: Limited styling options

📱 Demo

PHP Demo (Recommended)

cd demo/php
./start-demo.sh
# Open http://localhost:8000/demo.html

The PHP demo includes:

• Interactive chat simulation
• Configuration interface
• Shopping cart integration example

HTML Demo

open examples/basic.html

🔧 Development

Prerequisites

• Node.js 16+
• npm or yarn

Setup

# Clone the repository
git clone https://github.com/shopAgent/SA-Client.git
cd SA-Client

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

src/
├── components/          # React components
│   ├── ChatWidget/     # Main chat widget
│   ├── ChatWindow/     # Chat window component
│   └── FloatingButton/ # Floating action button
├── services/           # API services (currently mock)
├── types/              # TypeScript definitions
└── styles/             # Global styles

🚧 Known Issues

1. API Integration: The handleSendMessage method has commented-out API calls
2. Mock Responses: Bot responses are simulated, not real
3. Limited Configuration: Only basic theme and position options
4. No Error Handling: Limited error handling for API failures
5. No Session Management: No persistent chat sessions

🔮 Roadmap

Phase 1 (Current)

• [x] Basic chat widget UI
• [x] TypeScript support
• [x] Build system setup
• [x] Demo pages

Phase 2 (Planned)

• [ ] Real API integration
• [ ] AI-powered responses
• [ ] E-commerce integration
• [ ] Advanced customization

Phase 3 (Future)

• [ ] File upload support
• [ ] Typing indicators
• [ ] Multi-language support
• [ ] Analytics integration

📄 License

MIT License

🤝 Contributing

This is a work-in-progress project. Contributions are welcome!

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

⚠️ Disclaimer

This is a development version of the Shop Agent Client. It provides basic chat widget functionality but does not include real AI capabilities or backend integration. Use at your own risk for production applications.

📞 Support

• Issues: GitHub Issues
• Documentation: See demo/php/README.md for detailed integration guide

Made with ❤️ by the Shop Agent Team

This project is currently in active development. Features and APIs may change without notice.