Providers and Hooks

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-kit';

// Create Ably Realtime client
const ablyClient = new Ably.Realtime({
  key: 'demokey:*****', // Replace with your Ably API key
  clientId: 'your-chat-client-id',
});

const chatClient = new ChatClient(ablyClient);

function App() {
  return (
    <ChatClientProvider client={chatClient}>
      <ChatSettingsProvider>
        <ThemeProvider>
          <AvatarProvider>
            {/* Your Chat UI components */}
          </AvatarProvider>
        </ThemeProvider>
      </ChatSettingsProvider>
    </ChatClientProvider>
  );
}

import { ChatSettingsProvider } from '@ably/chat-react-ui-kit';
const globalSettings = {
  allowMessageUpdatesOwn: false,
  allowMessageDeletesOwn: true,
  allowMessageReactions: true,
};

const roomSettings = {
  'general': { allowMessageUpdatesOwn: true },
  'announcements': {
    allowMessageUpdatesOwn: false,
    allowMessageUpdatesAny: false,
    allowMessageDeletesOwn: false,
    allowMessageDeletesAny: false,
  },
};

  <ChatSettingsProvider
    initialGlobalSettings={globalSettings}
    initialRoomSettings={roomSettings}>
    <ChatApp />
  </ChatSettingsProvider>;

import { useChatSettings } from '@ably/chat-react-ui-kit';
const { getEffectiveSettings } = useChatSettings();

// Get settings for a specific room
const roomSettings = getEffectiveSettings('general');

// Check if message editing is allowed in this room
if (roomSettings.allowMessageUpdatesOwn || roomSettings.allowMessageUpdatesAny) {
  // Show edit button
}

import { ThemeProvider } from '@ably/chat-react-ui-kit';
<ThemeProvider
  options={{
    persist: true,
    detectSystemTheme: true,
    defaultTheme: 'dark'
  }}
  onThemeChange={(theme, prev) => {
    console.log(`Theme changed from ${prev} to ${theme}`);
  }}
>
  <ChatApplication />
</ThemeProvider>

// Basic theme usage
import { useTheme } from '@ably/chat-react-ui-kit';
const { theme, toggleTheme } = useTheme();

return (
  <button
    onClick={toggleTheme}
    className={theme === 'dark' ? 'bg-gray-800' : 'bg-white'}
  >
    Switch to {theme === 'dark' ? 'Light' : 'Dark'} Mode
  </button>
);

// Using boolean helpers
import { useTheme } from '@ably/chat-react-ui-kit';
const { isDark, setTheme } = useTheme();

return (
  <div className={isDark ? 'dark-mode' : 'light-mode'}>
    <button onClick={() => setTheme('light')}>
      Light Mode
    </button>
    <button onClick={() => setTheme('dark')}>
      Dark Mode
    </button>
  </div>
);

// System theme integration
import { useTheme } from '@ably/chat-react-ui-kit';
const { supportsSystemTheme, getSystemTheme, resetToSystemTheme } = useTheme();

return (
  <div>
    {supportsSystemTheme && (
      <button onClick={resetToSystemTheme}>
        Use System Theme ({getSystemTheme()})
      </button>
    )}
  </div>
);

// Theme change notifications
import { useEffect } from 'react';
import { useTheme } from '@ably/chat-react-ui-kit';
const { onThemeChange } = useTheme();

useEffect(() => {
  const cleanup = onThemeChange((newTheme, previousTheme) => {
    console.log(`Theme changed from ${previousTheme} to ${newTheme}`);
    // Update analytics, save preferences, etc.
  });

  return cleanup;
}, [onThemeChange]);

import { AvatarProvider } from '@ably/chat-react-ui-kit';
<AvatarProvider
  options={{
    persist: true,
    customColors: ['bg-blue-500', 'bg-red-500', 'bg-green-500'],
    maxCacheSize: 50,
    onError: (error) => console.error('Avatar error:', error),
  }}
>
  <ChatApplication />
</AvatarProvider>;

import { useState, useEffect, useCallback } from 'react';
import { useAvatar } from '@ably/chat-react-ui-kit';

// Basic usage - getAvatarForUser returns undefined if avatar doesn't exist
function UserAvatar({ clientId, displayName }) {
  const { getAvatarForUser, createAvatarForUser } = useAvatar();
  const [avatar, setAvatar] = useState(undefined);

  // Use useEffect to avoid state mutations during render
  useEffect(() => {
    const existingAvatar = getAvatarForUser(clientId);
    if (existingAvatar) {
      setAvatar(existingAvatar);
    } else {
      const newAvatar = createAvatarForUser(clientId, displayName);
      setAvatar(newAvatar);
    }
  }, [getAvatarForUser, createAvatarForUser, clientId, displayName]);

  if (!avatar) return null;

  return (
    <div className={`w-10 h-10 rounded-full flex items-center justify-center text-white font-medium ${avatar.color}`}>
      {avatar.src ? (
        <img
          src={avatar.src}
          alt={displayName}
          className="w-full h-full rounded-full object-cover"
        />
      ) : (
        avatar.initials
      )}
    </div>
  );
}

// Setting a user avatar
function UserAvatarManager() {
  const { getAvatarForUser, createAvatarForUser, setUserAvatar } = useAvatar();
  const [userId] = useState('user-123');
  const [displayName] = useState('John Doe');
  const [avatar, setAvatar] = useState(undefined);

  useEffect(() => {
    const existingAvatar = getAvatarForUser(userId);
    if (existingAvatar) {
      setAvatar(existingAvatar);
    } else {
      const newAvatar = createAvatarForUser(userId, displayName);
      setAvatar(newAvatar);
    }
  }, [getAvatarForUser, createAvatarForUser, userId, displayName]);

  const handleUpdateAvatar = useCallback(() => {
    // Update the user's avatar with custom properties
    setUserAvatar(userId, {
      color: 'bg-blue-500',
      initials: 'JD',
      src: 'https://example.com/avatar.jpg'
    });
  }, [setUserAvatar, userId]);

  if (!avatar) return null;

  return (
    <div className="p-4 space-y-4">
      <div className="flex items-center gap-4">
        <div className={`w-16 h-16 rounded-full flex items-center justify-center text-white font-medium ${avatar.color}`}>
          {avatar.src ? (
            <img src={avatar.src} alt={displayName} className="w-full h-full rounded-full object-cover" />
          ) : (
            avatar.initials
          )}
        </div>
        <div>
          <div className="font-medium">{displayName}</div>
          <div className="text-sm text-gray-500">User ID: {userId}</div>
        </div>
      </div>

      <div className="flex gap-2">
        <button
          onClick={handleUpdateAvatar}
          className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600"
        >
          Update Avatar
        </button>
      </div>
    </div>
  );
}

import { useEffect } from 'react';
import { useAvatar } from '@ably/chat-react-ui-kit';
// Listen for avatar changes
const { onAvatarChange } = useAvatar();

useEffect(() => {
  const cleanup = onAvatarChange((type, id, avatar, prev) => {
    console.log(`${type} avatar changed for ${id}`);
  });

  return cleanup;
}, [onAvatarChange]);

import { useAvatar } from '@ably/chat-react-ui-kit';
// Backup and restore avatars
const { exportAvatars, importAvatars } = useAvatar();

// Backup all avatars
const backup = exportAvatars();

// Restore from backup
importAvatars(backup);

import { useUserAvatar } from '@ably/chat-react-ui-kit';

// Basic usage
function UserProfile({ userId, name }) {
  const { userAvatar, setUserAvatar } = useUserAvatar({
    clientId: userId,
    displayName: name
  });

  return (
    <div className="flex items-center gap-3">
      <Avatar
        src={userAvatar?.src}
        color={userAvatar?.color}
        initials={userAvatar?.initials}
        alt={userAvatar?.displayName}
      />
      <div>
        <h3>{userAvatar?.displayName}</h3>
        <button
          onClick={() => setUserAvatar({
            color: 'bg-blue-500',
            src: 'https://example.com/new-avatar.jpg'
          })}
        >
          Update Avatar
        </button>
      </div>
    </div>
  );
}

import { useRoomAvatar } from '@ably/chat-react-ui-kit';

// Basic usage
function RoomHeader({ roomId, roomTitle }) {
  const { roomAvatar, setRoomAvatar } = useRoomAvatar({
    roomName: roomId,
    displayName: roomTitle
  });

  return (
    <div className="flex items-center gap-3">
      <Avatar
        src={roomAvatar?.src}
        color={roomAvatar?.color}
        initials={roomAvatar?.initials}
        alt={roomAvatar?.displayName}
      />
      <h2>{roomAvatar?.displayName}</h2>
      <button
        onClick={() => setRoomAvatar({
          displayName: 'Updated Room Name',
          color: 'bg-green-500'
        })}
      >
        Edit Room
      </button>
    </div>
  );
}