@polyfact/chat

ChatUI Component Documentation

Introduction

The ChatUI component is a primary interface for users to interact with the chat feature. Developed using the Polyfire SDK, it provides developers with an extensive range of properties to customize its appearance and behavior. Below is a tabulated breakdown of each property to ensure maximum clarity.

Installation

To include the ChatUI component in your project, you can easily install it using either yarn or npm:

Using Yarn:

yarn add @polyfire/chat

Using npm:

npm install @polyfire/chat

Repository

For more detailed information, contributions, or issues, visit the repository: polyfire-chat.

Property	Type	Description	Default (if applicable)
classNameChatContent	ChatContentClassNameProps	Customize the class names for different elements within the chat content.	-
styleChatContent	ChatContentStyleProps	Apply custom styles to different parts of the chat content.	-
classNameClearModal	ClearClassNameProps	Customize the class name for the clear modal.	-
styleClearModal	ClearStyleProps	Apply custom styles to the clear modal.	-
TitleClearModal	string	Set the title for the clear modal.	-
memoryId	string	Assign a unique identifier to the chat for memory purposes.	-
height	string	Define the height of the ChatUI component.	100vh
width	string	Define the width of the ChatUI component.	70%
chat	Chat	The primary prop to render the chat content.	-
renderAIFirstMessage	() => React.ReactNode	Customize the initial message displayed by the AI.	Default AI greeting
renderPencilIcon	() => React.ReactNode	Customize the pencil icon displayed within the chat.	Default pencil icon
renderSendIcon	() => React.ReactNode	Customize the send icon displayed within the chat.	Default send icon
renderClearIcon	() => React.ReactNode	Customize the clear icon displayed within the chat.	Default clear icon
placeholderText	string	Define placeholder text for the chat input field.	-
className	ChatContentClassNameProps	Customize the class names for the main ChatUI component.	-
style	ChatContentStyleProps	Apply custom styles to the ChatUI component.	-
Color Customization	string	Customize the color schemes for different elements within the ChatUI.	-
botName	string	Specify the name of the bot in the chat.	-
initialMessage	string	Define the first message that appears in the chat upon initialization.	-

* Note: Color Customization includes properties such as chatBackgroundColor, chatTextColor, inputBackgroundColor, and more as previously detailed.

Example:

<ChatUI
  chat={chatInstance}
  height="500px"
  width="80%"
  placeholderText="Type your message here..."
  botName="ChatBot"
  initialMessage="Welcome to ChatUI!"
  styleChatContent={{
    wrapper: { background: '#f5f5f5' },
    input: { borderColor: '#ddd' },
  }}
/>

Features

• Highly Customizable: With various properties at your disposal, tailor the ChatUI as per your application's requirements.

• Lightweight: Optimized to ensure minimal impact on performance while delivering an engaging user experience.

Contributing

Feel free to contribute to the ChatUI component by forking the repository and submitting a pull request. For major changes, please open an issue first to discuss what you would like to change.

License

The ChatUI component is licensed under the MIT License. See the LICENSE file in the repository for more information.

Support

For any issues, questions, or recommendations, please visit the repository's issue section or contact the maintainers directly. We appreciate your feedback and aim to make ChatUI the go-to solution for chat interfaces in React applications.