ChatEntry Component

• File: src/components/chat/chatEntry.svelte

Overview

The ChatEntry component renders individual chat messages with support for different message types (text, images, files), user avatars, and message styling based on sender/receiver status. It handles both group and private messages with distinct visual treatments.

Props

export let message: IMessage;    // Message data
export let time: string = "";    // Message timestamp
export let textBorder = true;    // Text border styling flag
export let isGroup = true;       // Group chat indicator
export let participant = {};     // Participant information

Message Type Detection

// Determine message content type
let showPhoto = false;
let showFile = false;

// Content type detection logic
if (message.content.substring(5, 10).includes("image/")) {
  showPhoto = true;
  showFile = false;
} else if (message.content.substring(5, 10).includes("application/" || "text/")) {
  showFile = true;
  showPhoto = false;
} else {
  showPhoto = false;
  showFile = false;
}

UI Structure

1. Message Container

<div class="mb-2 {message.mine ? 'flex justify-end' : 'flex justify-start'}">
  <div class="flex flex-col mx-4">
    <!-- Message content -->
  </div>
</div>

2. Message Header

<div class="{message.mine ? 'text-right' : 'text-left'}">
  <!-- Private message indicator -->
  {#if message.isPrivate}
    <Icon src={ShieldUser} class="inline-block text-blue-800" size="20" />
  {/if}

  <!-- Sender name in group chat -->
  {#if !message.mine && isGroup}
    <span class="text-sm text-gray-800/70">
      {participant?.name || ""}
    </span>
  {/if}

  <!-- Timestamp -->
  <span class="text-sm text-gray-800/70">{time}</span>
</div>

3. Message Content Types

Image Message

{#if showPhoto}
  <label class="px-4 cursor-pointer py-2 inline-block bg-gray-200">
    <img
      src={message.content}
      alt=""
      class="w-36"
      on:click={() => dispatch("sendPhoto", message.content)}
    />
  </label>

File Message

{#if showFile}
  <label class="px-4 cursor-pointer py-2 inline-block bg-gray-200">
    <img
      src={FileImg}
      alt=""
      class="w-36"
      on:click={() => dispatch("showImagePreview", message.content)}
    />
  </label>

Text Message

<div class="px-4 py-2 inline-block break-all bg-gray-200">
  {#if message.content.includes("http" || "www.")}
    <a href={message.content} target="_blank">
      <p class="underline underline-offset-2 decoration-blue-500">
        {message.content}
      </p>
    </a>
  {:else}
    <p>{message.content}</p>
  {/if}
</div>

Events

Dispatched Events

const dispatch = createEventDispatcher();

// Photo preview
dispatch("sendPhoto", message.content);

// File preview
dispatch("showImagePreview", message.content);

Usage Examples

Basic Text Message

<ChatEntry
  message={{
    content: "Hello world",
    mine: false,
    isGroup: true
  }}
  time="10:30"
  isGroup={true}
  participant={{
    name: "John Doe",
    initials: "JD"
  }}
/>

Image Message

<ChatEntry
  message={{
    content: "data:image/jpeg;base64,...",
    mine: true,
    isGroup: false
  }}
  time="11:45"
/>