Communication Components

Chat Interface

Komponen chat yang lengkap dengan header, messages, dan input field.

JD

John Doe

Online

JD

Halo! Bagaimana kabar Anda hari ini?

10:30 AM

ME

Baik sekali! Terima kasih sudah bertanya. Bagaimana dengan Anda?

10:32 AM

JD

Saya juga baik. Ada yang bisa saya bantu?

10:35 AM

<div class="chat-container">
  <div class="chat-header">
    <div class="chat-avatar">JD</div>
    <div class="chat-info">
      <h4>John Doe</h4>
      <div class="chat-status online">Online</div>
    </div>
  </div>
  
  <div class="chat-messages">
    <div class="chat-message">
      <div class="chat-message-avatar">JD</div>
      <div class="chat-message-content">
        <p class="chat-message-text">Halo! Bagaimana kabar Anda hari ini?</p>
        <div class="chat-message-time">10:30 AM</div>
      </div>
    </div>
    
    <div class="chat-message own">
      <div class="chat-message-avatar">ME</div>
      <div class="chat-message-content">
        <p class="chat-message-text">Baik sekali! Terima kasih sudah bertanya.</p>
        <div class="chat-message-time">10:32 AM</div>
        <div class="message-status">
          <div class="message-status-icon read"></div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="chat-input">
    <textarea class="chat-input-field" placeholder="Ketik pesan..."></textarea>
    <button class="chat-send-btn">📤</button>
  </div>
</div>

Video Call Interface

Komponen untuk video call dengan controls dan participant management.

Meeting Room

3 participants

<div class="video-call">
  <video class="video-main" autoplay muted></video>
  
  <div class="video-participants">
    <div class="video-participant">
      <video autoplay muted></video>
    </div>
  </div>
  
  <div class="video-controls">
    <button class="video-control-btn mute">🔇</button>
    <button class="video-control-btn video-on">📹</button>
    <button class="video-control-btn end-call">📞</button>
  </div>
</div>

Voice Chat

Komponen untuk voice chat dengan visual feedback dan controls.

JD

John Doe

Speaking...

<div class="voice-chat">
  <div class="voice-avatar speaking">JD</div>
  <div class="voice-info">
    <h3>John Doe</h3>
    <div class="voice-status">Speaking...</div>
  </div>
  <div class="voice-controls">
    <button class="voice-control-btn mute">🔇</button>
    <button class="voice-control-btn end-call">📞</button>
  </div>
</div>

Notification Center

Pusat notifikasi dengan berbagai jenis pesan dan status.

Notifications

✓

Payment Successful

Your payment of $99.00 has been processed successfully.

2 minutes ago

ℹ

New Message

You have received a new message from John Doe.

5 minutes ago

⚠

Low Storage

Your storage is running low. Consider upgrading your plan.

1 hour ago

✕

Connection Failed

Unable to connect to the server. Please check your internet connection.

2 hours ago

<div class="notification-center">
  <div class="notification-header">
    <h3 class="notification-title">Notifications</h3>
    <button class="notification-clear">Clear all</button>
  </div>
  
  <div class="notification-list">
    <div class="notification-item unread">
      <div class="notification-icon success">✓</div>
      <div class="notification-content">
        <h5>Payment Successful</h5>
        <p>Your payment has been processed successfully.</p>
        <div class="notification-time">2 minutes ago</div>
      </div>
    </div>
  </div>
</div>

Message Types

Berbagai jenis pesan yang dapat ditampilkan dalam chat.

JD

Check out this image!

10:30 AM

ME

Here's a file for you

📄

document.pdf

2.4 MB

10:32 AM

<!-- Image Message -->
<div class="chat-message">
  <div class="chat-message-content">
    <p class="chat-message-text">Check out this image!</p>
    <img src="image.jpg" class="chat-message-image" alt="Image">
    <div class="chat-message-time">10:30 AM</div>
  </div>
</div>

<!-- File Message -->
<div class="chat-message">
  <div class="chat-message-content">
    <p class="chat-message-text">Here's a file for you</p>
    <div class="chat-message-file">
      <div class="chat-message-file-icon">📄</div>
      <div class="chat-message-file-info">
        <h5>document.pdf</h5>
        <p>2.4 MB</p>
      </div>
    </div>
    <div class="chat-message-time">10:32 AM</div>
  </div>
</div>

Chat Themes

Berbagai tema untuk chat interface.

JD

John Doe

Online

JD

Dark theme looks great!

10:30 AM

<div class="chat-container theme-dark">
  <!-- Chat content -->
</div>