Mayacontigo/packages/chat-ui

@banorte/chat-ui

A decoupled React chat UI component library with Tailwind CSS styling.

Installation

npm install @banorte/chat-ui

Setup

1. Add the Tailwind Plugin

To ensure all the necessary CSS classes are included, add the chat-ui Tailwind plugin to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // ... your other content paths
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("daisyui"),
    require("@banorte/chat-ui/tailwind"), // Add this line
  ],
  // ... rest of your config
}

2. Install Required Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom @iconify-icon/react

Components

Chat

The main chat interface component.

import { Chat } from "@banorte/chat-ui";

function App() {
  const [messages, setMessages] = useState([]);
  const [conversationId, setConversationId] = useState("");
  const [receivingMsg, setReceivingMsg] = useState(false);

  const pushMessage = (message) => {
    setMessages(prev => [...prev, message]);
  };

  const handleStartConversation = async (user, assistant) => {
    const response = await fetch("/api/v1/conversation", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ user, assistant }),
    });
    const data = await response.json();
    return data.conversation_id;
  };

  const handleFeedback = async (key, rating) => {
    await fetch("/api/v1/feedback", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ key, rating }),
    });
  };

  return (
    <Chat
      assistant="Maya"
      messages={messages}
      pushMessage={pushMessage}
      conversationId={conversationId}
      setConversationId={setConversationId}
      setAssistantName={(name) => console.log("Assistant:", name)}
      receivingMsg={receivingMsg}
      setReceivingMsg={setReceivingMsg}
      onStartConversation={handleStartConversation}
      sendIcon="/path/to/send-icon.png"
      userAvatar="/path/to/user-avatar.png"
      botAvatar="/path/to/bot-avatar.png"
      onFeedback={handleFeedback} // Optional
    />
  );
}

ChatSidebar

A sidebar component for the chat interface.

import { ChatSidebar } from "@banorte/chat-ui";

function App() {
  return (
    <ChatSidebar
      assistant="Maya"
      logoSrc="/path/to/logo.png"
      sidebarImageSrc="/path/to/sidebar-image.png"
      assistantAvatarSrc="/path/to/assistant-avatar.png"
    />
  );
}

FeedbackButton

A standalone feedback component.

import { FeedbackButton } from "@banorte/chat-ui";

function MessageComponent() {
  const handleFeedback = async (key, rating) => {
    // Handle feedback submission
    console.log("Feedback:", key, rating);
  };

  return (
    <div>
      <p>Some message content...</p>
      <FeedbackButton
        messageKey="message-123"
        onFeedback={handleFeedback}
      />
    </div>
  );
}

Props

Chat Props

Prop	Type	Required	Description
assistant	string	Yes	Name of the assistant
messages	Message[]	Yes	Array of chat messages
pushMessage	(message: Message) => void	Yes	Function to add new messages
conversationId	string	Yes	Current conversation ID
setConversationId	(id: string) => void	Yes	Function to set conversation ID
setAssistantName	(name: string) => void	Yes	Function to set assistant name
receivingMsg	boolean	Yes	Whether currently receiving a message
setReceivingMsg	(receiving: boolean) => void	Yes	Function to update receiving state
onStartConversation	(user: string, assistant: string) => Promise<string>	Yes	Function to start a new conversation
sendIcon	string	Yes	Image source for send button
userAvatar	string	Yes	User avatar image source
botAvatar	string	Yes	Bot avatar image source
onFeedback	(key: string, rating: string) => Promise<void>	No	Optional feedback handler

ChatSidebar Props

Prop	Type	Required	Description
assistant	string	Yes	Name of the assistant
logoSrc	string	Yes	Logo image source
sidebarImageSrc	string	Yes	Sidebar image source
assistantAvatarSrc	string	Yes	Assistant avatar image source

FeedbackButton Props

Prop	Type	Required	Description
messageKey	string	Yes	Unique identifier for the message
onFeedback	(key: string, rating: string) => Promise<void>	Yes	Callback function for feedback submission

Message Type

interface Message {
  user: boolean;
  content: string;
}

Features

• Decoupled Architecture: Components accept all dependencies as props
• TypeScript Support: Full TypeScript definitions included
• Tailwind CSS: Styled with Tailwind CSS classes
• DaisyUI Integration: Uses DaisyUI components for consistent styling
• Responsive Design: Mobile-friendly responsive layout
• Image Support: Built-in image viewer for AI-generated images
• Feedback System: Optional feedback collection for messages
• Streaming Support: Real-time message streaming via SSE
• Markdown Support: Rich text rendering with markdown support

Requirements

• React 18+
• Tailwind CSS 3+
• DaisyUI plugin for Tailwind CSS
• Node.js 16+

License

Private package - All rights reserved.