Golia Bot

Golia is a customizable, embeddable chat widget for websites that provides an interactive chatbot experience with streaming responses. It's designed to be easy to integrate, visually appealing, and functional across different devices.

icon:

Features

• 💬 Real-time Streaming Responses: See bot responses as they're being generated
• 🔄 Persistent Chat History: Chat history is saved in localStorage
• 🎨 Customizable UI: Easily change colors, position, and bot avatar
• 📱 Responsive Design: Works on desktop and mobile devices
• 🌐 Multilingual Support: Default French responses with easy customization options
• 🔌 API Integration: Connect to your own backend service
• 🔄 TypeScript Support: Fully typed for better development experience

Installation

# Using npm
npm install golia-chatbot

# Using yarn
yarn add golia-chatbot

# Using pnpm
pnpm add golia-chatbot

Quick Start

import React from "react";
import { GoliaBot, GoliaWidget } from "golia-chatbot";

function App() {
  // Initialize the bot with your configuration
  const goliaBot = new GoliaBot({
    name: "Golia",
    apiEndpoint: "https://your-api-endpoint.com/",
    greeting: "Hello! How can I help you today?",
    user: {
      email: "[email protected]",
      firstName: "John",
      lastName: "Doe",
    },
  });

  return (
    <div>
      <h1>Your Website</h1>
      {/* Add the Golia Widget to your page */}
      <GoliaWidget
        bot={goliaBot}
        position="bottom-right"
        placeholder="Ask me anything..."
        primaryColor="#4361ee"
        botAvatarUrl="https://example.com/bot-avatar.jpg"
      />
    </div>
  );
}

export default App;

Configuration Options

GoliaBot Options

| Option | Type | Description | Default | | ---------------- | -------- | ----------------------------------- | --------------------------------------------------- | | name | string | The name of your bot | "Golia" | | greeting | string | Initial greeting message | "Salam, je suis Golia, comment je peux vous aider?" | | responses | object | Custom response messages | See below | | apiKey | string | Authentication key for your API | - | | apiEndpoint | string | URL for your chat API | - | | user | object | User information for authentication | Required | | onNewMessage | function | Callback when a new message is sent | - | | onStreamUpdate | function | Callback for streaming updates | - |

Default Responses

{
  greeting: ["Bonjour!", "Salam!", "Bienvenue!"],
  notUnderstood: "Je n'ai pas compris. Pouvez-vous reformuler?",
  goodbye: "Au revoir! À bientôt!"
}

GoliaWidget Props

| Prop | Type | Description | Default | | -------------------- | -------- | ------------------------------------------------- | -------------------------- | | bot | GoliaBot | Initialized GoliaBot instance | Required | | userId | string | Unique identifier for the user | "user1" | | position | string | Widget position ("bottom-right" or "bottom-left") | "bottom-right" | | placeholder | string | Input placeholder text | "Écrivez votre message..." | | maxHistoryMessages | number | Maximum number of messages to store | 50 | | primaryColor | string | Main color for the widget | "#4F46E5" | | botAvatarUrl | string | URL for the bot avatar image | Default bot icon | | style | object | Custom styles for the widget | - | | containerStyle | object | Custom styles for the container | - |

API Integration

Golia is designed to connect to your own backend API. The API should:

1. Authenticate users via a POST request to {apiEndpoint}auth/golia/signOrCreate
2. Process messages via a POST request to {apiEndpoint}question
3. Support message streaming using server-sent events (SSE)

Expected API Response Format

For streaming responses, your API should return server-sent events with the following format:

data: {"message": {"content": "part of the response"}}

Custom Styling

The widget comes with a modern, clean design by default. You can customize the appearance by:

1. Changing the primaryColor prop
2. Adding your own CSS overrides for the .golia-widget classes
3. Providing a custom avatar via the botAvatarUrl prop

Browser Support

Golia works in all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT