Tabtree Workchat by AM
npm install amworkchatA 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.
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.
``bash`
npm install @tabtree/workchat
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 /}
/>
);
}
export default App;
`
| 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 |
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.
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.
`jsx
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'
/>
`
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 (
{/ Workchat component added outside of route structure /}
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'
/>
);
}
}
}
export default App;
REQUIRED PARAMETERS
The following parameters are mandatory for the component to function:
- cognitoUserId: The user's Cognito ID - REQUIREDemail
- : 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
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.
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.
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 /}
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 && (
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.
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.