@codedevin/dify-cchat

Dify Chat Tools

A beautiful and configurable chatbot widget library for Dify integration with multiple display modes.

Features

• 🎨 Multiple Display Modes: Embedded, floating, and text-selection chatbots
• 🎯 Easy Integration: Simple React components with TypeScript support
• 🎨 Customizable Themes: Pre-built themes and custom styling options
• 📱 Responsive Design: Works on desktop and mobile devices
• 🔄 Real-time Streaming: Advanced SSE parsing with proper event handling
• 📎 File Upload: Support for file attachments with validation
• 🌐 Text Selection: Interactive text selection chatbot with context
• ⚡ Lightweight: Optimized bundle size (~40KB gzipped)
• 🚀 Production Ready: Comprehensive error handling and loading states
• 🎭 Animations: Smooth animations with Framer Motion
• 🔧 Developer Friendly: Full TypeScript support with detailed types

Installation

npm install dify-chat-tools

Quick Start

Basic Embedded Chatbot

import React from "react";
import { DifyChatbot } from "dify-chat-tools";

const config = {
  apiKey: "app-xxx", // Replace with your actual Dify app token
  baseUrl: "https://api.dify.ai/v1",
  userId: "user-id",
  inputs: {},
};

function App() {
  return (
    <div style={{ height: "500px", width: "400px" }}>
      <DifyChatbot
        config={config}
        title="AI Assistant"
        placeholder="Type your message..."
      />
    </div>
  );
}

Floating Chatbot

import React from "react";
import { DifyFloatingChatbot } from "dify-chat-tools";

function App() {
  return (
    <div>
      {/* Your app content */}
      <DifyFloatingChatbot
        config={config}
        position="bottom-right"
        title="Help Assistant"
      />
    </div>
  );
}

Text Selection Chatbot

import React from "react";
import { DifyTextSelectionChatbot } from "dify-chat-tools";

function App() {
  return (
    <div>
      {/* Your content with selectable text */}
      <p>Select any text to ask questions about it!</p>

      <DifyTextSelectionChatbot
        config={config}
        enabled={true}
        title="Text Assistant"
      />
    </div>
  );
}

Configuration

Dify Config

interface DifyConfig {
  apiKey: string; // Your Dify app token (format: app-xxx)
  baseUrl: string; // Your Dify API base URL (default: https://api.dify.ai/v1)
  userId?: string; // Optional user ID
  inputs?: Record<string, any>; // Optional input variables
}

Example Configuration

const config = {
  apiKey: "app-xxx", // Replace with your actual Dify app token
  baseUrl: "https://api.dify.ai/v1",
  userId: "user-123",
  inputs: {
    language: "en",
    context: "customer-support",
  },
};

Themes

Using Preset Themes

import { DifyChatbot, presetThemes } from "dify-chat-tools";

// Use light theme (default)
<DifyChatbot config={config} theme={presetThemes.light} />;

// Use dark theme
<DifyChatbot config={config} theme={presetThemes.dark} />;

Available preset themes:

• light - Light theme with blue accents (default)
• dark - Dark theme

Custom Theme

const customTheme = {
  primary: "220 100% 50%",
  secondary: "210 40% 96%",
  background: "0 0% 100%",
  text: "222.2 84% 4.9%",
  border: "214.3 31.8% 91.4%",
  borderRadius: "0.75rem",
  fontFamily: "Inter, sans-serif",
};

<DifyChatbot config={config} theme={customTheme} />;

Components

DifyChatbot

Main chatbot component for embedded use.

<DifyChatbot
  config={config}
  theme={theme}
  title="AI Assistant"
  subtitle="How can I help you?"
  placeholder="Type your message..."
  showHeader={true}
  showAvatar={true}
  allowFileUpload={true}
  maxHeight={500}
  maxWidth={400}
/>

DifyFloatingChatbot

Floating chatbot that appears as a button and expands into a chat window.

<DifyFloatingChatbot
  config={config}
  position="bottom-right"
  offset={{ x: 20, y: 20 }}
  defaultOpen={false}
  onOpenChange={(open) => console.log("Chat is", open ? "open" : "closed")}
/>

DifyTextSelectionChatbot

Chatbot that appears when users select text on the page.

<DifyTextSelectionChatbot
  config={config}
  enabled={true}
  minSelectionLength={5}
  maxSelectionLength={1000}
  targetAttribute="pfchat"
  onSelectionChange={(text) => console.log("Selected:", text)}
/>

Target Attribute Usage

You can restrict text selection to specific elements by using the targetAttribute prop:

// Only text within elements with 'pfchat' attribute can trigger the chatbot
<DifyTextSelectionChatbot
  config={config}
  targetAttribute="pfchat"
/>

// In your HTML/JSX:
<div pfchat>
  <p>This text can trigger the chatbot when selected.</p>
</div>

<div>
  <p>This text will NOT trigger the chatbot when selected.</p>
</div>

API Reference

Props

Common Props (all components)

Prop	Type	Default	Description
config	DifyConfig	Required	Dify configuration
theme	ChatTheme	defaultTheme	Theme configuration
title	string	"Chat Assistant"	Chatbot title
subtitle	string	-	Chatbot subtitle
placeholder	string	"Type your message..."	Input placeholder
showHeader	boolean	true	Show header
showAvatar	boolean	true	Show avatars
allowFileUpload	boolean	true	Allow file uploads
disabled	boolean	false	Disable chatbot

DifyFloatingChatbot Specific

Prop	Type	Default	Description
position	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	'bottom-right'	Position on screen
offset	{ x: number; y: number }	{ x: 0, y: 0 }	Offset from position
defaultOpen	boolean	false	Initially open

DifyTextSelectionChatbot Specific

Prop	Type	Default	Description
enabled	boolean	true	Enable text selection
minSelectionLength	number	3	Minimum selection length
maxSelectionLength	number	1000	Maximum selection length
targetAttribute	string	-	Only trigger on elements with this attribute

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Type check
npm run type-check

License

MIT