@dittolive/[email protected]

Patch Changes

• 5c05b55: - Replaced the existing UI components in ditto-chat-ui to use Radix components
  • Radix UI Components used:
    • Dialog - @radix-ui/react-dialog
    • Dropdown Menu - @radix-ui/react-dropdown-menu
    • Popover - @radix-ui/react-popover
• Updated dependencies [5c05b55]
  • @dittolive/[email protected]

@dittolive/[email protected]

Patch Changes

• 5c05b55: Fixed Attachment Error on initial render

@dittolive/[email protected]

Patch Changes

• 86a6e35: - Resolved Configuration Conflicts: Standardized the CSS framework configuration syntax to fix build and linting errors.
  • Fixed Style Generation: Corrected build path resolution to ensure component styles are properly located and compiled.
  • Enabled Custom Theming: Enhanced the main UI component to accept a custom theme object, allowing for full color palette control at runtime.
  • Dynamic Variable Mapping: Implemented logic to map custom theme properties directly to CSS variables.
  • Documented Styling: Added comprehensive documentation detailing all available style variables and their specific effects across the UI.
  • Updated Demo: Refreshed the example application to showcase the new custom theming capabilities.
• Updated dependencies [e417a1b]
  • @dittolive/[email protected]

@dittolive/[email protected]

Patch Changes

• e417a1b: Ditto Package upgrade

@dittolive/[email protected]

Minor Changes

• 21fd054: # Initial Ditto Chat UI Release

  This is the first release of @dittolive/ditto-chat-ui, a complete React UI component library for building chat applications on the Ditto Platform.

  Features

  • Complete Chat Interface: Ready-to-use chat UI with minimal configuration
  • Chat List: Display all conversations with unread counts and last message preview
  • Message View: Rich message display with support for text, images, and files
  • Message Input: Compose messages with emoji picker and @mentions
  • Reactions: Visual emoji reactions on messages
  • File Attachments: Send and preview images and files
  • User Avatars: Automatic avatar generation and display
  • Typing Indicators: Real-time typing status
  • Read Receipts: Message read status tracking
  • Responsive Design: Mobile-friendly UI with Tailwind CSS
  • Dark Mode Support: Built-in dark mode styling
  • Customizable: Flexible styling and theming options
  • RBAC Integration: UI elements respect permission settings
  • Accessibility: ARIA labels and keyboard navigation support

  Components

  The package exports a complete chat UI and individual components:

  • DittoChatUI - Complete chat application component
  • ChatList - Conversation list component
  • ChatView - Message view component
  • MessageBubble - Individual message component
  • MessageInput - Message composition component
  • NewMessageModal - Create new conversation modal

  Getting Started

  import { DittoChatUI } from '@dittolive/ditto-chat-ui'
  import '@dittolive/ditto-chat-ui/dist/ditto-chat-ui.css'
  
  function App() {
    return (
      <DittoChatUI
        appId="your-app-id"
        authToken="your-auth-token"
        userId="user-id"
      />
    )
  }

  Styling

  The UI uses Tailwind CSS and includes a pre-built CSS file. Import the styles in your application:

  import '@dittolive/ditto-chat-ui/dist/ditto-chat-ui.css'

  Requirements

  • React 18.0+ or 19.0+
  • @dittolive/ditto-chat-core (peer dependency)
  • @dittolive/ditto SDK (peer dependency)

  See the README for full documentation and examples.

Patch Changes

• Updated dependencies [21fd054]
  • @dittolive/[email protected]

@dittolive/[email protected]

Minor Changes

• 21fd054: # Initial Ditto Chat Core Release

  This is the first release of @dittolive/ditto-chat-core, a React-based chat SDK built on the Ditto Platform for peer-to-peer, real-time messaging.

  Features

  • Real-time Chat: Peer-to-peer messaging with automatic sync across devices
  • Room Management: Create and manage chat rooms (DM and group chats)
  • Message Operations: Send, edit, delete messages with optimistic updates
  • Reactions: Add and remove emoji reactions to messages
  • User Presence: Track online/offline status and typing indicators
  • Mentions: Support for @mentions in messages
  • Attachments: Send and receive file attachments and images
  • RBAC Support: Role-based access control for fine-grained permissions
  • TypeScript: Fully typed with comprehensive TypeScript definitions
  • Zustand State Management: Efficient state management with Zustand

  API

  The package exports React hooks and types for building chat applications:

  • useDittoChat - Main hook for initializing chat functionality
  • useDittoChatStore - Access to the chat store
  • Type definitions for Message, Room, ChatUser, Reaction, etc.

  Getting Started

  import { useDittoChat } from '@dittolive/ditto-chat-core'
  
  const { chatLogin, chatLogout } = useDittoChat({
    appId: 'your-app-id',
    authToken: 'your-auth-token',
    userId: 'user-id',
  })

  See the README for full documentation.

5.3.0

What's Changed

• updated to 4.11 ditto sdk and fixed breaking change by @ErikEverson in #58

Full Changelog: 5.2.0...5.3.0

5.2.0

What's Changed

• Updated chat to fix TAK integration by @ErikEverson in #57

Full Changelog: 5.1.1...5.2.0

5.1.1

What's Changed

• fixed public room generation by @ErikEverson in #56

Full Changelog: 5.1.0...5.1.1

5.1.0

What's Changed

• Updated user to just use name by @ErikEverson in #55

Full Changelog: 5.0.0...5.1.0