Chatbot React

Overview

@docshound/chat-react package enables integration of the DocsHound Chat widget into your React applications.

Learn more about specific attributes and use-cases here.

Install Package

Install via npm

To install the @docshound/chat-react package using npm, run the following command in your terminal: npm install @docshound/chat-react.

Visit npm page.

Use DocsHoundChat Component

Include in Global Layout

Including the DocsHoundChat component in a global layout component prevents it from unmounting during page navigation. This ensures the chat widget remains persistent and does not reset, improving user experience by maintaining conversation context.

To implement this in a React application, place the DocsHoundChat component within a layout component that wraps your entire app. Here's an example:

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

const Layout = ({ children }) => {
  return (
    <div>
      <DocsHoundChat src="https://your-docshound-portal.com" />
      {children}
    </div>
  );
};

const App = () => {
  return (
    <Layout>
      <h1>My Application</h1>
      {/* Other components and content */}
    </Layout>
  );
};

export default App;

Configure Component Props

These examples cover some ways to personalize your chat widget according to specific requirements.

<DocsHoundChat
  src="https://your-docshound-portal.com"
  userAvatarUrl="https://your-avatar-url.com/user.png"
  userId="ID_OF_THE_USER_IN_YOUR_SYSTEM"
/>

Hook

Control Chat Programmatically

The useDocsHoundChat hook allows you to control the DocsHound chat widget programmatically. It provides methods for showing, hiding, and clearing the chat. Here's how you can use it in your React project.

First, import the hook and define your component. Use the hook to access the show and clear functions, which control the visibility and state of the chat widget.

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;

Hook API Details

The useDocsHoundChat hook provides specific methods for programmatic control of the DocsHound chat component. The hook's API includes the following methods:

- show(show: boolean): This method is used to programmatically show or hide the chat widget. Passing true as the argument displays the chat, while false hides it.

- clear(): This method clears the chat history. It removes previous messages and starts the chat fresh.