Foodbell Chatbot

A reusable AI chatbot package for online food ordering that works seamlessly with React and Next.js applications. Now with full Webpack 5 compatibility!

Features

• AI-powered chatbot for food ordering
• Seamless integration with React and Next.js applications
• Fully compatible with Webpack 5
• Browser-optimized with no Node.js dependencies
• Customizable UI components
• Order management functionality
• Multi-site support
• SSR-friendly with Next.js

Installation

npm install foodbell-chatbot
# or
yarn add foodbell-chatbot

Usage

React Setup

import React from 'react';
import { ChatbotProvider, ChatbotWidget } from 'foodbell-chatbot';
import 'foodbell-chatbot/dist/chatbot.css'; // Import styles

const App = () => {
  // Configure the chatbot
  const chatbotConfig = {
    apiUrl: 'https://api.yourfoodservice.com',
    storeId: 'your-store-id',
    authToken: 'optional-auth-token',
    greeting: 'Hello! How can I help you with your order today?',
    headers: {}, // Optional additional headers
    webpackCompatible: true, // Enable Webpack 5 compatibility
  };

  return (
    <ChatbotProvider config={chatbotConfig}>
      <div className="your-app">
        {/* Your app content */}
        
        {/* Add the chatbot widget */}
        <ChatbotWidget headerTitle="Food Ordering Assistant" />
      </div>
    </ChatbotProvider>
  );
};

export default App;

Next.js Setup

// components/Chatbot.js
'use client'; // For Next.js App Router

import dynamic from 'next/dynamic';

// Dynamically import the chatbot components with no SSR
const ChatbotProvider = dynamic(
  () => import('foodbell-chatbot').then((mod) => mod.ChatbotProvider),
  { ssr: false }
);

const ChatbotWidget = dynamic(
  () => import('foodbell-chatbot').then((mod) => mod.ChatbotWidget),
  { ssr: false }
);

// Import styles
import 'foodbell-chatbot/dist/chatbot.css';

export function Chatbot({ config }) {
  return (
    <ChatbotProvider config={config}>
      <ChatbotWidget headerTitle="Food Ordering Assistant" />
    </ChatbotProvider>
  );
}

// pages/index.js or app/page.js
import { Chatbot } from '../components/Chatbot';

export default function Home() {
  const chatbotConfig = {
    apiUrl: 'https://api.yourfoodservice.com',
    storeId: 'your-store-id',
    authToken: 'optional-auth-token',
    greeting: 'Hello! How can I help you with your order today?',
    webpackCompatible: true, // Enable Webpack 5 compatibility
  };

  return (
    <main>
      <h1>Your Next.js App</h1>
      <Chatbot config={chatbotConfig} />
    </main>
  );
}

Webpack 5 Compatibility

This package is fully compatible with Webpack 5. The webpackCompatible flag in the configuration enables optimizations for Webpack 5 environments.

Key features that ensure compatibility:

• Browser-optimized code with no Node.js core module dependencies
• Proper handling of environment variables
• Compatible with both React and Next.js applications

If you encounter any issues with Webpack 5 integration, please refer to the WEBPACK5_INTEGRATION.md file for detailed troubleshooting steps.

Running the Build

To build the package, run:

npm run build

This will generate the distribution files in the dist directory.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

For more detailed information, see the [WEBPACK5_INTEGRATION.md](./WEBPACK5_INTEGRATION.md) file.

### Using the Chatbot Hook

You can access chatbot functionality directly in your components:

```jsx
import React from 'react';
import { useChatbot } from 'foodbell-chatbot';

const OrderButton = ({ product }) => {
  const { addToOrder } = useChatbot();

  const handleAddToOrder = () => {
    addToOrder({
      productId: product.id,
      name: product.name,
      price: product.price,
      quantity: 1,
      options: [],
    });
  };

  return (
    <button onClick={handleAddToOrder}>
      Add to Order
    </button>
  );
};

export default OrderButton;

Next.js Integration

// pages/_app.js
import { ChatbotProvider } from 'foodbell-chatbot';
import 'foodbell-chatbot/dist/index.css'; // Import styles

function MyApp({ Component, pageProps }) {
  const chatbotConfig = {
    apiUrl: process.env.NEXT_PUBLIC_API_URL,
    storeId: process.env.NEXT_PUBLIC_STORE_ID,
    greeting: 'Welcome to our food ordering service!',
  };

  return (
    <ChatbotProvider config={chatbotConfig}>
      <Component {...pageProps} />
    </ChatbotProvider>
  );
}

export default MyApp;

// pages/index.js
import { ChatbotWidget } from 'foodbell-chatbot';

export default function Home() {
  return (
    <div>
      <h1>Welcome to our restaurant</h1>
      <ChatbotWidget />
    </div>
  );
}

API Reference

Components

<ChatbotProvider>

Provides chatbot context to the application.

Props:

• config (required): Configuration object for the chatbot
• children (required): React children

<ChatbotWidget>

The main chatbot UI component.

Props:

• className: Optional CSS class name
• headerTitle: Optional title for the chatbot header (default: "Foodbell Assistant")

Hooks

useChatbot()

Hook for accessing chatbot functionality.

Returns:

• isOpen: Boolean indicating if the chatbot is open
• isLoading: Boolean indicating if the chatbot is loading
• messages: Array of chat messages
• orderItems: Array of items in the current order
• error: Error message if any
• toggleChatbot: Function to toggle the chatbot open/closed
• sendMessage: Function to send a message to the chatbot
• addToOrder: Function to add an item to the order
• removeOrderItem: Function to remove an item from the order
• completeOrder: Function to complete the order
• clearOrder: Function to clear the current order

Types

ChatbotConfig

interface ChatbotConfig {
  apiUrl: string;
  storeId: string;
  authToken?: string;
  greeting?: string;
  headers?: Record<string, string>;
}

OrderItem

interface OrderItem {
  productId: string;
  name: string;
  price: number;
  quantity: number;
  options: Array<{
    name: string;
    value: string;
    price?: number;
  }>;
}

Customization

You can customize the appearance of the chatbot by overriding the CSS variables:

:root {
  --foodbell-primary-color: #ff6b6b;
  --foodbell-secondary-color: #4ecdc4;
  --foodbell-text-color: #333333;
  --foodbell-light-color: #f7f7f7;
  --foodbell-border-color: #e0e0e0;
  --foodbell-shadow-color: rgba(0, 0, 0, 0.1);
  --foodbell-success-color: #2ecc71;
  --foodbell-error-color: #e74c3c;
  --foodbell-border-radius: 8px;
}

License

MIT