Teko Chatbot UI

A React component library that provides a floating chatbot widget with customizable themes, real-time messaging, and easy integration.

Features

• 🚀 SSR Safe: Fully compatible with Next.js and other SSR frameworks
• 🌍 Internationalization: Built-in i18n support
• 🎨 Customizable: Theme and styling customization
• 💬 Real-time Messaging: WebSocket support for live chat
• 📱 Responsive: Works on desktop and mobile devices
• 🔒 Error Handling: Built-in error boundaries and fallbacks

SSR Safety

This library is designed to be completely safe for Server-Side Rendering (SSR) environments like Next.js. The following safety measures are implemented:

✅ SSR Safety Features

1. Window Check: All browser-specific APIs are wrapped with typeof window !== 'undefined' checks
2. localStorage Safety: Safe access to localStorage with try-catch blocks
3. DOM Manipulation: All DOM operations are guarded against SSR execution
4. Event Listeners: Document event listeners are only added after client-side mounting
5. API Calls: Network requests are prevented during SSR
6. UUID Generation: Safe UUID generation that doesn't break SSR
7. Placeholder Rendering: During SSR, only a minimal placeholder is rendered

🔧 How It Works

// The component automatically detects SSR and renders safely
import FloatingChatbot from 'teko-chatbot-ui';

// During SSR: Renders only the floating button placeholder
// During Client: Renders full interactive component
<FloatingChatbot
  terminalId='your-terminal-id'
  // ... other props
/>;

Installation

npm install teko-chatbot-ui
# or
yarn add teko-chatbot-ui

Usage

Basic Usage

import FloatingChatbot from 'teko-chatbot-ui';

function App() {
  return (
    <FloatingChatbot
      terminalId='your-terminal-id'
      aiAgentCode='SGC'
      env='DEV'
      getAccessToken={() => 'your-access-token'}
      getUserId={() => 'user-id'}
    />
  );
}

Next.js Integration

The library works seamlessly with Next.js without any additional configuration:

// pages/index.tsx or app/page.tsx
import FloatingChatbot from 'teko-chatbot-ui';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to our site</h1>
      <FloatingChatbot
        terminalId='your-terminal-id'
        aiAgentCode='SGC'
        env='PROD'
        getAccessToken={() => localStorage.getItem('token') || ''}
        getUserId={() => localStorage.getItem('userId') || ''}
      />
    </div>
  );
}

Props

| Prop | Type | Required | Default | Description | | ---------------- | ------------------------- | -------- | ---------------------- | ---------------------------- | | terminalId | string | ✅ | - | Terminal identifier | | aiAgentCode | string | ❌ | 'SGC' | AI agent code | | env | 'DEV' | 'STAG' | 'PROD' | ❌ | 'DEV' | Environment | | getAccessToken | () => string | ✅ | - | Function to get access token | | getUserId | () => string | ❌ | - | Function to get user ID | | position | 'fixed' | 'absolute' | ❌ | 'fixed' | Position of the chatbot | | theme | 'light' | 'dark' | ❌ | 'light' | Theme | | title | string | ❌ | 'Chat Support' | Chat title | | placeholder | string | ❌ | 'Type your message...' | Input placeholder | | lng | string | ❌ | 'en' | Language code | | onError | (error: Error) => void | ❌ | - | Error handler | | errorFallback | React.ReactNode | ❌ | - | Error fallback component |

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

License

ISC