argide_flutter 0.2.1

Argide chat widget for Flutter apps. Provides a floating chat bubble, full-screen chat view, and headless notifier.

ourguide_flutter

Ourguide chat widget for Flutter apps. Provides a floating chat bubble, full-screen chat view, and a headless notifier for building custom UIs.

Features

• Floating chat bubble — drop-in OurguideWidget with animated slide-up panel
• Full-screen chat view — OurguideChatView for embedded or standalone use
• Headless notifier — OurguideChatNotifier for fully custom UIs
• Markdown rendering — assistant messages rendered with flutter_markdown
• File attachments — images, PDFs, and documents up to 20 MB
• SSE streaming — real-time response streaming from the backend
• Theming — fully customizable colors, typography, and dimensions via OurguideTheme
• Backend config — appearance and bubble settings auto-applied from your Ourguide dashboard
• Conversation history — save, restore, and switch between conversations
• Session persistence — messages and session IDs persisted via SharedPreferences
• User identification — JWT-based identity for authenticated users

Getting started

Add the package to your pubspec.yaml:

dependencies:
  ourguide_flutter: ^0.1.0

Then run:

flutter pub get

Requirements

• Flutter >= 3.10.0
• Dart >= 3.0.0

Usage

1. Wrap your app with OurguideScope

import 'package:ourguide_flutter/ourguide_flutter.dart';

void main() {
  runApp(
    OurguideScope(
      productId: 'YOUR_PRODUCT_ID',
      apiUrl: 'https://your-api.com',
      child: MaterialApp(
        home: const HomeScreen(),
      ),
    ),
  );
}

2. Add the floating chat bubble

final _navKey = GlobalKey<NavigatorState>();

MaterialApp(
  navigatorKey: _navKey,
  builder: (context, child) => Stack(
    children: [
      child!,
      OurguideWidget(navigatorKey: _navKey),
    ],
  ),
  home: const HomeScreen(),
)

3. Or use the full-screen chat view

Scaffold(
  body: OurguideChatView(
    agentName: 'Support',
    welcomeMessage: 'Hi! How can I help you today?',
  ),
)

4. Customize the theme

OurguideWidget(
  theme: OurguideTheme(
    bubbleColor: Colors.blue,
    userBubbleColor: const Color(0xFF1E3A5F),
    userBubbleTextColor: Colors.white,
    assistantBubbleColor: const Color(0xFFF4F4F5),
    sendButtonColor: Colors.blue,
  ),
)

5. Headless usage with OurguideChatNotifier

Access the notifier from anywhere in the widget tree:

final notifier = OurguideScope.chatOf(context);

// Send a message
notifier.sendMessage('How do I reset my password?');

// Listen to state changes
ListenableBuilder(
  listenable: notifier,
  builder: (context, _) {
    final messages = notifier.state.messages;
    // Build your own UI...
  },
)

6. Authenticated users

OurguideScope(
  productId: 'YOUR_PRODUCT_ID',
  apiUrl: 'https://your-api.com',
  getIdentityToken: () async => await myAuthService.getToken(),
  child: MaterialApp(...),
)

Additional information

• GitHub Repository
• Issue Tracker

This package is the Flutter counterpart of the @ourguide-ai/ui React widget.

License

MIT — see LICENSE for details.