teko-chatbot-ui

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

• Window Check: All browser-specific APIs are wrapped with typeof window !== 'undefined' checks
• localStorage Safety: Safe access to localStorage with try-catch blocks
• DOM Manipulation: All DOM operations are guarded against SSR execution
• Event Listeners: Document event listeners are only added after client-side mounting
• API Calls: Network requests are prevented during SSR
• UUID Generation: Safe UUID generation that doesn't break SSR
• 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