// Import the pre-compiled CSS
import '@ably/chat-react-ui-components/dist/style.css';

import { ThemeProvider } from '@ably/chat-react-ui-components';

// Basic usage with default options
<ThemeProvider>
  <YourApp />
</ThemeProvider>

// With custom configuration
<ThemeProvider
  options={{
    persist: true, // Save preference to localStorage
    detectSystemTheme: true, // Use system preference
    defaultTheme: 'light' // Initial theme if no preference found
  }}
>
  <YourApp />
</ThemeProvider>

import { useTheme } from '@ably/chat-react-ui-components';

function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      Current theme: {theme}
    </button>
  );
}

<ChatWindow
  roomName="general"
  className="my-custom-chat-window border-red-500"
/>

<Avatar
  alt="User Name"
  color="bg-blue-500"
  size="lg"
/>

import { App } from '@ably/chat-react-ui-components';
import * as Ably from 'ably';
import { ChatClient } from '@ably/chat';
import { ChatClientProvider } from '@ably/chat/react';
import { ThemeProvider, AvatarProvider, ChatSettingsProvider } from '@ably/chat-react-ui-components';
import '@ably/chat-react-ui-components/dist/styles.css';

// Create Ably Realtime client
const ablyClient = new Ably.Realtime({
  key: '{{API_KEY}}',
  clientId: 'user-' + Math.random().toString(36).substring(2, 15),
});

const chatClient = new ChatClient(ablyClient);

// Basic usage
function QuickChatPrototype() {
  return (
    <ThemeProvider>
      <AvatarProvider>
        <ChatSettingsProvider>
          <ChatClientProvider client={chatClient}>
            <App initialRoomNames={['my-first-room']} />
          </ChatClientProvider>
        </ChatSettingsProvider>
      </AvatarProvider>
    </ThemeProvider>
  );
}

// With custom dimensions
function CustomSizedChat() {
  return (
    <ChatClientProvider client={chatClient}>
      <App
        initialRoomNames={['my-first-room']}
        width="100%"
        height="600px"
      />
    </ChatClientProvider>
  );
}

import { ChatWindow, RoomInfo, RoomReaction } from '@ably/chat-react-ui-components';
import { ChatRoomProvider } from '@ably/chat/react';

// Basic usage
<ChatRoomProvider name="general">
  <ChatWindow roomName="general" />
</ChatRoomProvider>

// With custom header and footer
<ChatRoomProvider name="general">
  <ChatWindow
    roomName="general"
    customHeaderContent={<RoomInfo />}
    customFooterContent={<RoomReaction />}
  />
</ChatRoomProvider>

// With typing indicators disabled
<ChatRoomProvider name="general">
  <ChatWindow
    roomName="general"
    enableTypingIndicators={false}
  />
</ChatRoomProvider>

// Setting a custom window size
<ChatRoomProvider name="general">
  <ChatWindow
    roomName="general"
    windowSize={300} // Custom size for message rendering in the UI
  />
</ChatRoomProvider>

import { MessageInput } from '@ably/chat-react-ui-components';
import { useMessages } from '@ably/chat/react';

// Basic usage
const { send } = useMessages();

const handleSendMessage = (text: string) => {
  console.log(`Sending message: ${text}`);
  send({ text });
};

<MessageInput
  onSend={handleSendMessage}
  placeholder="Type your message here..."
/>

import { Sidebar } from '@ably/chat-react-ui-components';
import { RoomOptions } from '@ably/chat';
import { useState } from 'react';

const [rooms, setRooms] = useState<string[]>(['general', 'random']);
const [activeRoom, setActiveRoom] = useState<string | undefined>('general');
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
const [roomOptions] = useState<RoomOptions>({ occupancy: { enableEvents: true } });

const addRoom = (name: string) => {
  console.log(`Adding room: ${name}`);
  setRooms(prev => prev.includes(name) ? prev : [...prev, name]);
};

const leaveRoom = (name: string) => {
  console.log(`Leaving room: ${name}`);
  setRooms(prev => prev.filter(n => n !== name));
  if (activeRoom === name) {
    setActiveRoom(rooms.length > 0 ? rooms[0] : undefined);
  }
};

const handleSetActiveRoom = (name?: string) => {
  console.log(`Setting active room to: ${name}`);
  setActiveRoom(name);
};

<Sidebar
  roomNames={rooms}
  activeRoomName={activeRoom}
  defaultRoomOptions={roomOptions}
  addRoom={addRoom}
  setActiveRoom={handleSetActiveRoom}
  leaveRoom={leaveRoom}
  isCollapsed={isSidebarCollapsed}
  onToggleCollapse={() => setIsSidebarCollapsed(prev => !prev)}
/>

import { ChatMessageList } from '@ably/chat-react-ui-components';
import { Message } from '@ably/chat';
import { useState } from 'react';

// Example with useState for messages
const [messages, setMessages] = useState<Message[]>([]);
const [isLoadingHistory, setIsLoadingHistory] = useState(false);
const [hasMoreMessages, setHasMoreMessages] = useState(true);

const fetchPreviousMessages = () => {
  console.log('Loading more message history');
  setIsLoadingHistory(true);
  // Fetch logic would go here
  setIsLoadingHistory(false);
};

const handleEditMessage = (message: Message, newText: string) => {
  console.log(`Editing message with serial: ${message.serial}, setting text to: ${newText}`);
};

const handleDeleteMessage = (message: Message) => {
  console.log(`Deleting message with serial: ${message.serial}`);
};

const handleAddReaction = (message: Message, emoji: string) => {
  console.log(`Adding reaction ${emoji} to message with serial: ${message.serial}`);
};

const handleRemoveReaction = (message: Message, emoji: string) => {
  console.log(`Removing reaction ${emoji} from message with serial: ${message.serial}`);
};

<ChatMessageList
  messages={messages}
  onLoadMoreHistory={fetchPreviousMessages}
  isLoading={isLoadingHistory}
  hasMoreHistory={hasMoreMessages}
  enableTypingIndicators={true}
  onEdit={handleEditMessage}
  onDelete={handleDeleteMessage}
  onReactionAdd={handleAddReaction}
  onReactionRemove={handleRemoveReaction}
  autoScroll={true}
  loadMoreThreshold={150}
>
</ChatMessageList>

import { ChatMessage } from '@ably/chat-react-ui-components';
import { Message } from '@ably/chat';
import { useMessages } from '@ably/chat/react';

const { update, deleteMessage, addReaction, removeReaction } = useMessages();

<ChatMessage
  message={message}
  onEdit={(message: Message, newText: string) => {
    console.log(`Editing message with serial: ${message.serial}, setting text to: ${newText}`);
    update(message.serial, { text: newText });
  }}
  onDelete={(message: Message) => {
    console.log(`Deleting message with serial: ${message.serial}`);
    deleteMessage(message.serial);
  }}
  onReactionAdd={(message: Message, emoji: string) => {
    console.log(`Adding reaction ${emoji} to message with serial: ${message.serial}`);
    addReaction(message.serial, emoji);
  }}
  onReactionRemove={(message: Message, emoji: string) => {
    console.log(`Removing reaction ${emoji} from message with serial: ${message.serial}`);
    removeReaction(message.serial, emoji);
  }}
/>

import { Avatar } from '@ably/chat-react-ui-components';

// Basic usage
<Avatar
  src="https://example.com/avatar.jpg"
  alt="John Doe"
  size="md"
/>

// With fallback to initials
<Avatar
  alt="John Doe"
  color="bg-blue-500"
  size="lg"
/>

// With custom initials
<Avatar
  alt="John Doe"
  initials="JD"
  color="bg-green-500"
  size="xl"
/>

// With click handler
<Avatar
  alt="John Doe"
  onClick={() => console.log('Avatar clicked')}
/>

import { Avatar, useUserAvatar } from '@ably/chat-react-ui-components';
const { userAvatar } = useUserAvatar({
    clientId: 'user-123',
    displayName: 'John Doe',
  });

<Avatar
  src={userAvatar?.src}
  alt={userAvatar?.displayName}
  color={userAvatar?.color}
  initials={userAvatar?.initials}
/>

import { ParticipantList } from '@ably/chat-react-ui-components';
import { useChatClient, usePresence, useTyping } from '@ably/chat/react';
import { useState } from 'react';

// Integration with presence and typing hooks
const { presenceData } = usePresence();
const { currentlyTyping } = useTyping();
const { clientId } = useChatClient();
const [participantListOpen, setParticipantListOpen] = useState(false);

const toggleParticipantList = () => {
  console.log('Toggling participant list');
  setParticipantListOpen(prev => !prev);
};

{participantListOpen && (
  <ParticipantList
    presenceData={presenceData}
    currentClientId={clientId}
    currentlyTyping={currentlyTyping}
    onToggle={toggleParticipantList}
    position={{ top: 100, left: 200 }}
  />
)}