@daisy-plus/embed-react

React library to embed Daisy+ chat interfaces on your website, with optional CopilotKit integration for AI-powered actions.

Install

npm install @daisy-plus/embed @daisy-plus/embed-react

For CopilotKit integration (optional):

npm install @copilotkit/react-core @copilotkit/react-ui

Basic Usage

Full Page Chat

import { FullPageChat } from "@daisy-plus/embed-react";

const App = () => {
  return (
    <FullPageChat
      chatflowid="your-chatflow-id"
      apiHost="https://your-api.com"
    />
  );
};

Popup Bubble Chat

import { BubbleChat } from "@daisy-plus/embed-react";

const App = () => {
  return (
    <BubbleChat
      chatflowid="your-chatflow-id"
      apiHost="https://your-api.com"
    />
  );
};

Triggering Chatflows

There are multiple ways to trigger Daisy+ chatflows from your site:

| Method | Use Case | Requires CopilotKit | |--------|----------|---------------------| | useDaisyAction | Single chatflow as AI action | Yes | | DaisyProvider | Multiple chatflows as AI actions | Yes | | BubbleChat | Floating chat widget | No | | FullPageChat | Embedded full-page chat | No |

CopilotKit Integration

useDaisyAction Hook

Register a single chatflow as a CopilotKit action that the AI can call:

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import { useDaisyAction } from "@daisy-plus/embed-react";
import "@copilotkit/react-ui/styles.css";

function ChatWithKnowledgeBase() {
  useDaisyAction({
    chatflowId: "your-chatflow-id",
    apiHost: "https://your-api.com",
    name: "queryKnowledgeBase",
    description: "Search the company knowledge base for answers",
  });

  return <div>Your app content</div>;
}

function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <CopilotSidebar>
        <ChatWithKnowledgeBase />
      </CopilotSidebar>
    </CopilotKit>
  );
}

DaisyProvider (Multiple Chatflows)

Auto-register multiple business chatflows as CopilotKit actions:

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import { DaisyProvider } from "@daisy-plus/embed-react";
import "@copilotkit/react-ui/styles.css";

function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <DaisyProvider
        businesses={[
          {
            businessId: "support",
            chatflowId: "abc123",
            name: "Support Bot",
            apiHost: "https://your-api.com"
          },
          {
            businessId: "sales",
            chatflowId: "def456",
            name: "Sales Bot"
          },
        ]}
        defaultApiHost="https://your-api.com"
        autoRegisterActions={true}
      >
        <CopilotSidebar>
          <MainApp />
        </CopilotSidebar>
      </DaisyProvider>
    </CopilotKit>
  );
}

The AI can now call daisy_support or daisy_sales actions when users ask relevant questions.

Daisy-Themed CopilotKit Components

Pre-styled CopilotKit components with Daisy+ defaults:

import { CopilotKit } from "@copilotkit/react-core";
import {
  DaisyCopilotChat,
  DaisyCopilotPopup,
  DaisyCopilotSidebar,
  DaisyThemeProvider,
} from "@daisy-plus/embed-react";
import "@copilotkit/react-ui/styles.css";

function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <DaisyThemeProvider theme={{ primaryColor: "#3b81f6" }}>
        <DaisyCopilotSidebar position="right">
          <MainApp />
        </DaisyCopilotSidebar>
      </DaisyThemeProvider>
    </CopilotKit>
  );
}

Theming

Unified Theme Provider

Apply consistent theming across both Daisy+ and CopilotKit components:

import { DaisyThemeProvider, FullPageChat } from "@daisy-plus/embed-react";

function App() {
  return (
    <DaisyThemeProvider
      theme={{
        primaryColor: "#3b81f6",
        backgroundColor: "#ffffff",
        textColor: "#333333",
        chatWindow: {
          title: "Support Chat",
          welcomeMessage: "How can I help you today?",
        },
        botMessage: {
          backgroundColor: "#f0f0f0",
          textColor: "#333",
          showAvatar: true,
          avatarSrc: "/bot-avatar.png",
        },
        userMessage: {
          backgroundColor: "#3b81f6",
          textColor: "#fff",
        },
      }}
    >
      <FullPageChat chatflowid="xxx" apiHost="https://api.com" />
    </DaisyThemeProvider>
  );
}

Dynamic Business Theming

import { DaisyProvider, DaisyThemeProvider } from "@daisy-plus/embed-react";

function App({ business }) {
  return (
    <DaisyThemeProvider
      theme={{
        primaryColor: business.brandColor,
        chatWindow: {
          title: `${business.name} Support`,
          titleAvatarSrc: business.logo,
        },
      }}
    >
      <DaisyProvider
        businesses={[{
          businessId: business.id,
          chatflowId: business.chatflowId,
          name: business.name,
        }]}
        autoRegisterActions
      >
        <App />
      </DaisyProvider>
    </DaisyThemeProvider>
  );
}

API Reference

Components

| Component | Description | |-----------|-------------| | FullPageChat | Full-page embedded chat interface | | BubbleChat | Floating popup chat bubble | | DaisyCopilotChat | CopilotKit Chat with Daisy+ styling | | DaisyCopilotPopup | CopilotKit Popup with Daisy+ styling | | DaisyCopilotSidebar | CopilotKit Sidebar with Daisy+ styling |

Providers

| Provider | Description | |----------|-------------| | DaisyProvider | Registers chatflows as CopilotKit actions | | DaisyThemeProvider | Unified theming for all components |

Hooks

| Hook | Description | |------|-------------| | useDaisyAction | Register a single chatflow as CopilotKit action | | useDaisyTheme | Access current theme from DaisyThemeProvider | | useDaisyContext | Access businesses from DaisyProvider | | useCopilotAction | Re-exported from @copilotkit/react-core | | useCopilotChat | Re-exported from @copilotkit/react-core | | useCopilotReadable | Re-exported from @copilotkit/react-core |

Types

interface BusinessConfig {
  businessId: string;
  chatflowId: string;
  apiHost?: string;
  name?: string;
  branding?: BusinessBranding;
  features?: BusinessFeatures;
  disclaimer?: BusinessDisclaimer;
  starterPrompts?: string[];
  chatflowConfig?: Record<string, unknown>;
}

interface DaisyUnifiedTheme {
  primaryColor?: string;
  secondaryColor?: string;
  backgroundColor?: string;
  textColor?: string;
  chatWindow?: ChatWindowTheme;
  userMessage?: MessageTheme;
  botMessage?: MessageTheme;
  textInput?: TextInputTheme;
  footer?: FooterTheme;
  // ... and more
}

License

MIT