@taximiami/dify-chat

An AI-powered chat widget for taxi/transfer booking services. Connects to a Dify-based AI backend and provides interactive booking flows.

Installation

npm install @taximiami/dify-chat

Quick Start

import { DifyChatProvider, ChatWidget } from '@taximiami/dify-chat';
import '@taximiami/dify-chat/styles';

function App() {
  return (
    <DifyChatProvider config={{
      apiEndpoint: 'https://your-dify-proxy.workers.dev/v1/chat-messages',
      apis: {
        googleMapsKey: 'YOUR_GOOGLE_MAPS_KEY',
        quotesEndpoint: '/api/quotes/multi',
      },
      callbacks: {
        onBookingComplete: (bookingUrl) => {
          console.log('Booking created:', bookingUrl);
        }
      }
    }}>
      <ChatWidget />
    </DifyChatProvider>
  );
}

Tailwind Setup

Add the preset to your tailwind.config.js:

import difyChatPreset from '@taximiami/dify-chat/tailwind-preset';

export default {
  presets: [difyChatPreset],
  content: [
    './src/**/*.{js,tsx}',
    './node_modules/@taximiami/dify-chat/dist/**/*.js',
  ],
};

Configuration

DifyChatProvider Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiEndpoint | string | Yes | URL of your Dify chat proxy worker | | title | string | No | Chat widget title (default: "Chat Assistant") | | subtitle | string | No | Chat widget subtitle | | placeholder | string | No | Input placeholder text | | welcomeMessage | string | No | Initial message from assistant | | welcomeQuickReplies | QuickReply[] | No | Initial quick reply buttons | | features.googlePlaces | boolean | No | Enable Google Places autocomplete | | features.flightTracking | boolean | No | Enable flight tracking | | features.bookingLookup | boolean | No | Enable booking lookup feature | | features.vehicleSelector | boolean | No | Enable vehicle selector | | apis.googleMapsKey | string | No | Google Maps API key | | apis.quotesEndpoint | string | No | Endpoint for vehicle quotes | | apis.bookingSessionEndpoint | string | No | Endpoint for booking creation | | apis.bookingLookupEndpoint | string | No | Endpoint for booking lookup | | apis.flightValidationEndpoint | string | No | Endpoint for flight validation | | phones.support | string | No | Support phone number | | phones.escalation | string | No | Escalation phone number | | callbacks.onBookingComplete | function | No | Called when booking is created | | callbacks.onError | function | No | Called on errors | | callbacks.onStageChange | function | No | Called when conversation stage changes |

ChatWidget Props

| Prop | Type | Description | |------|------|-------------| | apiEndpoint | string | Override provider's API endpoint | | title | string | Override provider's title | | subtitle | string | Override provider's subtitle | | placeholder | string | Override provider's placeholder | | pageContext | string | Current page context (home, book, fleet, pricing, other) | | showBadge | boolean | Show notification badge on chat button | | badgeText | string | Text to show in the badge |

Backend Requirements

This widget works with a Cloudflare Worker proxy that connects to Dify. The proxy should:

1. Accept POST requests to /v1/chat-messages
2. Forward requests to Dify with appropriate API key
3. Parse SSE streams and return JSON responses
4. Inject quick reply buttons based on conversation stage

See @taximiami/dify-chat-worker for a ready-to-deploy worker template.

API Endpoints

Your backend should implement these endpoints:

• POST /api/quotes/multi - Returns vehicle quotes
• POST /api/chat/booking-session - Creates a booking session
• POST /api/bookings/lookup - Looks up a booking by reference
• POST /api/bookings/:ref/cancel - Cancels a booking
• GET /api/flight/validate - Validates flight numbers

Using Individual Components

import {
  ChatWidget,
  LocationPickerModal,
  DateTimePicker,
  VehicleSelector,
  BookingSummaryCard,
} from '@taximiami/dify-chat';

Customization

Custom Styling

Override CSS variables in your stylesheet:

:root {
  --accent: 200 90% 50%;  /* Your brand color */
  --radius: 0.75rem;      /* Border radius */
}

Quick Replies

Customize welcome quick replies:

<DifyChatProvider config={{
  apiEndpoint: '...',
  welcomeQuickReplies: [
    { text: 'Book a Ride', payload: '__GET_QUOTE__' },
    { text: 'Track My Booking', payload: '__BOOKING_LOOKUP__' },
    { text: 'Call Us', payload: '__CALL_SUPPORT__' },
  ]
}}>

Special Payloads

The widget recognizes these special payloads for interactive components:

• __LOCATION_PICKER__:pickup - Opens pickup location picker
• __LOCATION_PICKER__:dropoff - Opens dropoff location picker
• __DATETIME_PICKER__ - Opens date/time picker
• __PASSENGER_PICKER__ - Opens passenger count selector
• __CONTACT_FORM__ - Opens contact information form
• __VEHICLE_SELECTOR__ - Opens vehicle selection modal
• __BOOKING_LOOKUP__ - Opens booking lookup modal
• __CALL_SUPPORT__ - Triggers phone call to support

License

MIT