npm package: @tabtree/workchat
Description: Tabtree Workchat by AM
Author: Anoop Mohan
Latest version: 1.0.71

# @tabtree/workchat

A customizable React chat component for integrating chat functionality into your applications as a global chat widget. This component is exclusively for use within TabTree family products powered by TabTree Software Solutions.

## Important Usage Restrictions

**PLEASE NOTE:** This widget can only be used in TabTree family products powered by TabTree Software Solutions. Use in any other applications is prohibited by the license terms.

## Installation

```bash
npm install @tabtree/workchat
```

## Usage

Add the Workchat component to your main application layout to make it globally accessible throughout your app. The component will appear as a chat button in the bottom right corner of the screen that users can click to open the chat interface.

```jsx
import { Workchat } from '@tabtree/workchat';
import '@tabtree/workchat/dist/tailwindChat.css';

function App() {
  return (
    <>
      {/* Your main application components */}
      <div className="app-container">
        
        <main>
          {/* Your application content */}
        </main>
      </div>
      
      {/* Add Workchat component at the bottom level */}
      <Workchat 
        color="#1a2c5b"
        noOfChat={1}
        senderContainerColor="#008293"
        senderTextColor="#fff"
        senderDateTextColor="#000"
        senderLinkTextColor="red"
        receiverContainerColor="#000"
        receiverTextColor="#fff"
        receiverDateTextColor="#fff"
        receiverLinkTextColor="pink"
        sendButtonColor="#008293"
        chatWidth="300px"
        chatHeight="400px"
        cognitoUserId="id"
        email="mail"
        groupUserNameColors={['#3B82F6', '#8B5CF6', '#EF4444', '#10B981',
            '#F59E0B', '#6366F1', '#EC4899', '#14B8A6', '#F97316', '#A855F7']}
        ctaButtonColor={"#fff"}
        ctaButtonText={"#000fff"}
                headerTextColor='#fff'
                workchatUrl="https://chat.nte.ai/app"

      />
    </>
  );
}

export default App;
```

## Component Props

| Prop | Type | Description | Default | Required |
|------|------|-------------|---------|----------|
| `cognitoUserId` | string | AWS Cognito user ID for authentication | N/A | **YES** |
| `email` | string | User's email address | N/A | **YES** |
| `color` | string | Main theme color for the chat component | `"#1a2c5b"` | No |
| `noOfChat` | number | Number of chat instances to display | `1` | No |
| `senderContainerColor` | string | Background color of the sender's message bubbles | `"#008293"` | No |
| `senderTextColor` | string | Text color of the sender's messages | `"#fff"` | No |
| `senderDateTextColor` | string | Text color for the timestamp on sender's messages | `"#000"` | No |
| `senderLinkTextColor` | string | Text color for links in sender's messages | `"red"` | No |
| `receiverContainerColor` | string | Background color of the receiver's message bubbles | `"#000"` | No |
| `receiverTextColor` | string | Text color of the receiver's messages | `"#fff"` | No |
| `receiverDateTextColor` | string | Text color for the timestamp on receiver's messages | `"#fff"` | No |
| `receiverLinkTextColor` | string | Text color for links in receiver's messages | `"pink"` | No |
| `sendButtonColor` | string | Color of the send button | `"#008293"` | No |
| `chatWidth` | string | Width of the chat component when expanded | `"300px"` | No |
| `chatHeight` | string | Height of the chat component when expanded | `"400px"` | No |

## Global Chat Widget

The Workchat component is designed to be added at the bottom of your application layout to provide a persistent chat experience across all pages. When implemented:

1. A chat button will appear in the bottom-right corner of the viewport
2. Users can click the button to expand the chat interface
3. The chat stays in place as users navigate through different parts of your application
4. The interface can be collapsed when not in use

This implementation follows common patterns for customer support or team collaboration widgets, allowing users to access chat functionality without disrupting their current workflow.

## Customization

You can customize the appearance of the chat component by adjusting the props. The component supports custom colors for different elements, as well as sizing options.

### Example with Custom Styling

```jsx
<Workchat 
  color="#0047AB"                     // Royal blue for theme color
  noOfChat={1}
  senderContainerColor="#4682B4"      // Steel blue for sender messages
  senderTextColor="#FFFFFF"           // White text for sender
  senderDateTextColor="#CCCCCC"       // Light gray for sender timestamps
  senderLinkTextColor="#FFD700"       // Gold color for links in sender messages
  receiverContainerColor="#2F4F4F"    // Dark slate gray for receiver
  receiverTextColor="#F0F8FF"         // Alice blue text for receiver
  receiverDateTextColor="#A9A9A9"     // Dark gray for receiver timestamps
  receiverLinkTextColor="#FF69B4"     // Hot pink for links in receiver messages
  sendButtonColor="#1E90FF"           // Dodger blue for send button
  chatWidth="350px"                   // Wider chat window
  chatHeight="500px"                  // Taller chat window
  cognitoUserId="user123"
  email="user@example.com"
  groupUserNameColors={['#3B82F6', '#8B5CF6', '#EF4444', '#10B981',
            '#F59E0B', '#6366F1', '#EC4899', '#14B8A6', '#F97316', '#A855F7']}
  ctaButtonColor={"#fff"}
  ctaButtonText={"#000fff"}
          headerTextColor='#fff'
          workchatUrl="https://chat.nte.ai/app"

/>
```

## Integration with Navigation

For applications with multiple routes or pages, add the Workchat component to your root layout component to ensure it persists across all routes:

```jsx
// In your App.js or root layout component
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Workchat } from '@tabtree/workchat';
import '@tabtree/workchat/dist/tailwindChat.css';
import Home from './pages/Home';
import Profile from './pages/Profile';

function App() {
  return (
    <BrowserRouter>
      <div className="app-container">

        </header>
        
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
      
      {/* Workchat component added outside of route structure */}
      <Workchat 
        color="#1a2c5b"
        noOfChat={1}
        senderContainerColor="#008293"
        senderTextColor="#fff"
        senderDateTextColor="#000"
        senderLinkTextColor="red"
        receiverContainerColor="#000"
        receiverTextColor="#fff"
        receiverDateTextColor="#fff"
        receiverLinkTextColor="pink"
        sendButtonColor="#008293"
        chatWidth="300px"
        chatHeight="400px"
        cognitoUserId="id"
        email="mail"
        groupUserNameColors={['#3B82F6', '#8B5CF6', '#EF4444', '#10B981',
            '#F59E0B', '#6366F1', '#EC4899', '#14B8A6', '#F97316', '#A855F7']}
        ctaButtonColor={"#fff"}
        ctaButtonText={"#000fff"}
                headerTextColor='#fff'
                workchatUrl="https://chat.nte.ai/app"

      />
    </BrowserRouter>
  );
}
}
}

export default App;

## Authentication

**REQUIRED PARAMETERS**

The following parameters are mandatory for the component to function:

- `cognitoUserId`: The user's Cognito ID - **REQUIRED**
- `email`: The user's email address - **REQUIRED**

These credentials are essential for the chat functionality and must be provided in every implementation. The component will not work without valid credentials.

```jsx
// Example of required authentication parameters
<Workchat 
  cognitoUserId="id"  // REQUIRED - Must be a valid Cognito User ID
  email="mail"        // REQUIRED - Must be a valid email address
  // Other optional styling parameters
/>
```

The authentication is handled through AWS Cognito and is configured specifically for TabTree applications. The authentication parameters must correspond to valid TabTree user accounts.

## Accessibility

The chat widget is designed to be minimally intrusive when not in use. When collapsed, it appears as a small button in the bottom-right corner of the viewport, similar to the screenshot provided. This ensures it doesn't interfere with the main content of your application while remaining easily accessible to users.

## Advanced Usage

### Handling Chat Notifications

To handle notifications when new messages are received while the chat is collapsed, you can use the following approach:

```jsx
import { useState } from 'react';
import { Workchat } from '@tabtree/workchat';
import '@tabtree/workchat/dist/tailwindChat.css';

function App() {
  const [unreadMessages, setUnreadMessages] = useState(0);
  
  const handleNewMessage = (count) => {
    setUnreadMessages(count);
    // Add notification sound or visual indicator if needed
  };

  return (
    <>
      {/* Your app content */}
      
      <Workchat 
        color="#1a2c5b"
        noOfChat={1}
        senderContainerColor="#008293"
        senderTextColor="#fff"
        senderDateTextColor="#000"
        senderLinkTextColor="red"
        receiverContainerColor="#000"
        receiverTextColor="#fff"
        receiverDateTextColor="#fff"
        receiverLinkTextColor="pink"
        sendButtonColor="#008293"
        chatWidth="300px"
        chatHeight="400px"
        cognitoUserId="id"
        email="mail"
        onNewMessage={handleNewMessage}
      />
      
      {unreadMessages > 0 && (
        <div className="notification-badge">
          {unreadMessages}
        </div>
      )}
    </>
  );
}
```

## License

Proprietary - TabTree Software Solutions

This component is licensed exclusively for use within TabTree family products. Any use outside of authorized TabTree applications is strictly prohibited. This component may not be modified, redistributed, or used in any application not explicitly authorized by TabTree Software Solutions.

## Support

For issues or feature requests, please contact TabTree Software Solutions support. Internal TabTree teams can file issues through the company's internal issue tracking system.