Chat Component

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

Overview

The Chat component serves as the main chat interface controller in the HVC Web application, managing the switching between chat list and individual chat conversations. It coordinates between chat groups and message displays.

Type Definitions

Group Information Interface

interface IGroupInfo {
  id: number; // Group identifier
  name: string; // Group name
  specialty: string; // Group specialty/type
  lastActivityDate?: Date; // Last message timestamp
  lastActivity?: {
    // Last message info
    id: number;
  };
  // Additional properties added during processing
  date?: string;
  message?: string;
  initials?: string;
}

Module Functions

Chat Group Fetching

export async function readChatGroup(groupId: number) {
  // GraphQL query for chat group information
  const query = `
    query ($groupId: Long!) {
      xs: myChatGroups (groupId: $groupId) {
        id, name, specialty, profileImageUrl, 
        lastActivityDate, lastActivity {
          content, id
        }
        email, address, phoneNumber, participantCount
      }
      me { id }
    }
  `;

  // Process and return group data
  return {
    success: true,
    data: data.xs.map((x) => ({
      ...x,
      date: "",
      message: "",
      initials: getInitials(x.name),
    })),
  };
}

Component State

Reactive Declarations

$: myId = $me?.id || 0;  // Current user ID
let showChatList = true;  // Toggle between list and chat view
let activeGroup;          // Currently selected group

Event Handlers

Group Selection

function onGroupSelected({detail: group}) {
  if (group && group.id) {
    $activeChatGroupId = group.id;
  }
}

Group Activation

async function activateGroup(groupId) {
  if (!groupId) {
    // Reset state
    activeGroup = null;
    showChatList = true;
    $activeChatGroupId = 0;
    return;
  }

  try {
    const grp = await readChatGroup(groupId);
    if (grp.success && grp.data?.length) {
      activeGroup = grp.data[0];
      showChatList = false;
    }
  } catch(e) {
    console.log("unable to read ", e);
  }
}

UI Structure

Layout

<div class="flex-grow flex flex-col overflow-y-hidden">
  <div class="flex-grow flex flex-col overflow-y-hidden">
    <!-- Conditional rendering of chat list or messages -->
    {#if showChatList}
      <ChatList on:contactInfo={onGroupSelected}/>
    {:else}
      <MessageList
        contact={activeGroup}
        on:back={_ => $activeChatGroupId = 0}
        {myId}
      />
    {/if}
  </div>
</div>

Component Dependencies

Internal Components

import ChatList from "./chatList.svelte";
import MessageList from "./MessageList.svelte";

Store Dependencies

import { me, activeChatGroupId } from "../../stores/shared";

Utility Functions

import { query, mutation, tryMutate } from "../../lib/server";
import { debounce, uniqueId } from "lodash/fp";
import { getInitials, showInfo } from "../../lib/utils";

Usage Guide

Basic Implementation

<script>
  import Chat from './components/chat/chat.svelte';
</script>

<Chat />

State Management

// Activate specific chat group
$activeChatGroupId = groupId;

// Return to chat list
$activeChatGroupId = 0;

Related Components

• ChatList
• MessageList