# 🧠 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: _baseUrlController.text,
        appId: _appIdController.text,
        history: History(show: _showHistory),
      ),
      customData: const {
        "customerType": "normal",
      },
      user: User(
        participantId: _participantIdController.text,
        name: _nameController.text,
        fcmToken: _fcmTokenController.text,
      ),
      backgroundDecoration: const BoxDecoration(
        color: Colors.white,
      ),

      appBarTitleStyle: const TextStyle(color: Colors.white),
      appBarBgColor: Colors.blue,
      appBarIconTheme: const IconThemeData(color: Colors.greenAccent),
      appBarCenterTitle: true,
      loaderColor: Colors.red,

      feedBackContainerDecoration: const BoxDecoration(),
      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),
        shape: BoxShape.rectangle,
        boxShadow: [
          BoxShadow(
            color: Colors.blueAccent.withOpacity(0.25),
            blurRadius: 8,
            spreadRadius: 2,
            offset: const Offset(2, 4),
            blurStyle: BlurStyle.normal,
          ),
        ],
      ),
      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,
          ),
        ],
      ),

      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