Docshound Chat for React

@docshound/chat-react is a React component library for integrating the DocsHound chat widget into your React / Next.js applications.

Installation

Install the package via npm:

npm install @docshound/chat-react

Usage

Location

To ensure the DocsHoundChat component remains mounted and does not unmount with navigation, you should include it in a global layout component that wraps your application's main content. This layout component will persist across different pages, preventing the chat widget from resetting every time the user navigates.

Basic Example

Here is a simple example of how to use the DocsHoundChat component in your React project:

import React from 'react';
import { DocsHoundChat } from '@docshound/chat-react';

const App = () => {
  return (
    <div>
      <h1>My Application</h1>
      <DocsHoundChat src="https://your-docshound-portal.com" />
    </div>
  );
};

export default App;

Props

The DocsHoundChat component accepts the following props:

• src (required): The domain where the guide is published, e.g., https://docs.docshound.com.
• agentName: The name of the agent responding in the chat. Optional.
• agentAvatarUrl: The URL for the avatar image of the agent. Optional.
• userId: A unique identifier for the user interacting with the chat. Optional.
• userEmail: The email address of the user. Pre-filled when submitting a support ticket. Optional.
• userName: The display name of the user. Defaults to 'You'. Optional.
• platform: Specifies the platform where the chat is being used ('site', 'app', or 'docs'). Optional. Defaults to 'app'.
• userAvatarUrl: The URL for the avatar image of the user. Optional.
• firstMessage: The initial agent message that appears when the chat opens. Optional.
• theme: Defines the theme of the chat interface, either 'light' or 'dark'. Optional.
• position: The position of the chat widget on the screen ('center' or 'right'). Optional. Defaults to 'right'.
• accentColor: The accent color of the chat interface. Optional.
• triggerLabel: The label for the trigger button that starts the chat. Optional.

Hooks

This package also provides a custom hook, useDocsHoundChat, to programmatically control the chat component.

Example

import React from 'react';
import { useDocsHoundChat } from '@docshound/chat-react';

const ChatControls = () => {
  const { show, clear } = useDocsHoundChat();

  return (
    <div>
      <button onClick={() => show(true)}>Show Chat</button>
      <button onClick={() => show(false)}>Hide Chat</button>
      <button onClick={() => clear()}>Clear Chat</button>
    </div>
  );
};

export default ChatControls;

API

Hook's API:

• show(show: boolean): Programmatically show or hide the chat widget.
• clear(): Clears the chat history.

License

MIT