# 🧠 Intellicon Chat SDK Integration

## πŸš€ Getting Started

To get started with the **Intellicon Chat SDK**, run the following command in your terminal:

```bash
flutter pub add intellicon_chat_sdk

πŸ’‘ Usage

Add the following code snippet to any button click event or wherever you want to initiate the chat:

Navigator.push<void>(
  context,
  MaterialPageRoute(
    builder: (context) => Chat(
      config: Config(
        baseUrl: "https://your-api-url.com",
        appId: "your-app-id",
        history: History(show: true),
      ),
      customData: const {"customerType": "normal"},
      user: User(
        participantId: "12345",
        name: "Arham",
        fcmToken: "your-fcm-token",
      ),
      backgroundDecoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [Colors.red, Colors.orange],
        ),
      ),
      appBarTitleStyle: const TextStyle(color: Colors.white),
      appBarBgColor: Colors.transparent,
      appBarGradientBgColor: const LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [Colors.red, Colors.orange],
      ),
      appBarIconTheme: const IconThemeData(color: Colors.greenAccent),
      appBarCenterTitle: true,
      loaderColor: Colors.red,
      attachmentModalBgColor: Colors.brown,
      feedBackContainerDecoration: const BoxDecoration(color: Colors.white),
      feedBackActiveColor: Colors.red,
      feedBackInActiveColor: Colors.red,
      feedbackTextActiveColor: Colors.blue,
      feedbackTextInActiveColor: Colors.grey,
      emojiIconColor: Colors.black,
      attachmentIconColor: Colors.black,
      micInActiveIconColor: Colors.white,
      micActiveIconColor: Colors.brown,
      micSendBgColor: Colors.greenAccent,
      sendIconColor: Colors.black,
      dateBoxDecoration: BoxDecoration(
        border: Border.all(
          color: Colors.blueAccent,
          width: 2.0,
          style: BorderStyle.solid,
          strokeAlign: BorderSide.strokeAlignInside,
        ),
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.blueAccent.withOpacity(0.25),
            blurRadius: 8,
            spreadRadius: 2,
            offset: const Offset(2, 4),
          ),
        ],
      ),
      dateTextStyle: const TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.w600,
      ),
      messageTextStyle: const TextStyle(
        color: Colors.black,
        fontSize: 14,
        fontWeight: FontWeight.normal,
        fontStyle: FontStyle.normal,
        backgroundColor: Colors.transparent,
        decoration: TextDecoration.none,
        shadows: [
          Shadow(
            color: Colors.black26,
            offset: Offset(1, 1),
            blurRadius: 2,
          ),
        ],
      ),
      hintStyle: const TextStyle(
        color: Colors.grey,
        fontSize: 14,
        fontWeight: FontWeight.normal,
        fontStyle: FontStyle.italic,
        height: 1.5,
        shadows: [
          Shadow(
            color: Colors.black26,
            offset: Offset(1, 1),
            blurRadius: 2,
          ),
        ],
      ),
      sendVoiceMessageIconColor: Colors.blue,
      deleteVoiceMessageIconColor: Colors.blue,
      messageBoxBgColor: Colors.purpleAccent,
      chatStyle: ChatStyle(
        appBarColor: _appBarColor,
        appBarTextColor: _appBarTextColor,
        appbarEnabled: _appbarEnabled,
        bubbleStyle: BubbleStyle(
          agent: const AgentBubble(
            bgColor: Colors.black,
            textStyle: TextStyle(
              color: Colors.red,
              fontSize: 15,
              fontWeight: FontWeight.w400,
            ),
            audioMessage: AudioMessageStyle(
              sliderColor: Colors.red,
              inactiveColor: Colors.blue,
              playPauseIconColor: Colors.red,
              downloadIconColor: Colors.red,
              durationStyle: TextStyle(
                color: Colors.lightBlue,
                fontSize: 15,
              ),
            ),
            videoMessage: VideoMessageStyle(
              playButtonColor: Colors.greenAccent,
            ),
            documentMessage: DocumentMessageStyle(
              downloadIconColor: Colors.pink,
              copyIconColor: Colors.brown,
              attachmentIconColor: Colors.white,
              textStyle: TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 15,
                color: Colors.white,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
          visitor: const VisitorBubble(
            bgColor: Colors.blueAccent,
            textStyle: TextStyle(
              color: Colors.white,
              fontSize: 15,
              fontWeight: FontWeight.w400,
            ),
            audioMessage: AudioMessageStyle(
              sliderColor: Colors.red,
              inactiveColor: Colors.white,
              playPauseIconColor: Colors.black,
              downloadIconColor: Colors.black,
              durationStyle: TextStyle(
                color: Colors.black,
                fontSize: 15,
              ),
            ),
            videoMessage: VideoMessageStyle(
              playButtonColor: Colors.red,
            ),
            documentMessage: DocumentMessageStyle(
              downloadIconColor: Colors.pink,
              copyIconColor: Colors.brown,
              attachmentIconColor: Colors.white,
              textStyle: TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 15,
                color: Colors.white,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
        ),
      ),
    ),
    fullscreenDialog: true,
  ),
);

βš™οΈ Configuration

Property Description
baseUrl The base URL of your domain where the chat service is hosted.
appId The unique identifier for your chat bot application.
participantId A unique identifier for the user participating in the chat.
name The name of the user using the chat bot.
fcmToken (Optional) The Firebase Cloud Messaging token for enabling notifications.

🎨 Chat Style Customization

Property Description
appBarColor The color of the app bar.
appBarTextColor The color of the text in the app bar.
bubbleStyle Customize the chat bubble style.
    β€’ visitorBgColor Background color of the visitor's chat bubble.
    β€’ agentBgColor Background color of the agent's chat bubble.
    β€’ textStyle Text style of messages inside bubbles.
    β€’ audioMessage Customize play/pause icons, sliders, duration style, etc.
    β€’ videoMessage Customize the play button color.
    β€’ documentMessage Customize download/copy/attachment icons and

πŸ“± Android Permissions

Add the following permissions inside your android/app/src/main/AndroidManifest.xml file: