@happyvertical/smrt-chat 0.30.0

package/dist/svelte/components/layout/MemberList.svelte

@@ -0,0 +1,389 @@
+<script lang="ts">
+/**
+ * MemberList - Room member sidebar panel
+ * Lists participants grouped by online status with role badges
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.messages.js';
+import type { ChatParticipantData } from '../../types.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Room participants */
+  participants: ChatParticipantData[];
+  /** Callback to close the member panel */
+  onclose: () => void;
+}
+
+let { participants, onclose }: Props = $props();
+
+const onlineMembers = $derived(
+  participants.filter((p) => p.onlineStatus === 'online'),
+);
+const awayMembers = $derived(
+  participants.filter(
+    (p) => p.onlineStatus === 'away' || p.onlineStatus === 'dnd',
+  ),
+);
+const offlineMembers = $derived(
+  participants.filter((p) => p.onlineStatus === 'offline'),
+);
+
+function getStatusColor(status: string): string {
+  switch (status) {
+    case 'online':
+      return 'var(--smrt-color-tertiary, #006c4f)';
+    case 'away':
+      return 'var(--smrt-color-warning, #f0a000)';
+    case 'dnd':
+      return 'var(--smrt-color-error, #ba1a1a)';
+    default:
+      return 'var(--smrt-color-outline, #74777f)';
+  }
+}
+
+function getStatusLabel(status: string): string {
+  switch (status) {
+    case 'online':
+      return 'Online';
+    case 'away':
+      return 'Away';
+    case 'dnd':
+      return 'Do not disturb';
+    default:
+      return 'Offline';
+  }
+}
+
+function getRoleBadgeLabel(role: string): string {
+  switch (role) {
+    case 'owner':
+      return 'Owner';
+    case 'admin':
+      return 'Admin';
+    default:
+      return '';
+  }
+}
+</script>
+
+<aside class="member-list" aria-label={t(M['chat.member_list.room_members'])}>
+  <div class="member-list__header">
+    <h2 class="member-list__title">Members</h2>
+    <span class="member-list__count">{participants.length}</span>
+    <button
+      class="close-btn"
+      type="button"
+      onclick={onclose}
+      aria-label={t(M['chat.member_list.close'])}
+    >
+      <svg class="close-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+  </div>
+
+  <div class="member-list__content">
+    {#if onlineMembers.length > 0}
+      <section class="member-group">
+        <h3 class="member-group__header">
+          Online
+          <span class="member-group__count">{onlineMembers.length}</span>
+        </h3>
+        <ul class="member-group__list" role="list">
+          {#each onlineMembers as member (member.id)}
+            <li class="member-item">
+              <div class="member-item__avatar-wrap">
+                {#if member.avatarUrl}
+                  <img class="member-item__avatar" src={member.avatarUrl} alt="" />
+                {:else}
+                  <span class="member-item__avatar-placeholder">
+                    {(member.nickname || member.name).charAt(0).toUpperCase()}
+                  </span>
+                {/if}
+                <span
+                  class="member-item__status-dot"
+                  style:background={getStatusColor(member.onlineStatus)}
+                  aria-label={getStatusLabel(member.onlineStatus)}
+                ></span>
+              </div>
+              <span class="member-item__info">
+                <span class="member-item__name">{member.nickname || member.name}</span>
+                {#if getRoleBadgeLabel(member.role)}
+                  <span class="role-badge role-badge--{member.role}">
+                    {getRoleBadgeLabel(member.role)}
+                  </span>
+                {/if}
+              </span>
+            </li>
+          {/each}
+        </ul>
+      </section>
+    {/if}
+
+    {#if awayMembers.length > 0}
+      <section class="member-group">
+        <h3 class="member-group__header">
+          Away
+          <span class="member-group__count">{awayMembers.length}</span>
+        </h3>
+        <ul class="member-group__list" role="list">
+          {#each awayMembers as member (member.id)}
+            <li class="member-item">
+              <div class="member-item__avatar-wrap">
+                {#if member.avatarUrl}
+                  <img class="member-item__avatar" src={member.avatarUrl} alt="" />
+                {:else}
+                  <span class="member-item__avatar-placeholder">
+                    {(member.nickname || member.name).charAt(0).toUpperCase()}
+                  </span>
+                {/if}
+                <span
+                  class="member-item__status-dot"
+                  style:background={getStatusColor(member.onlineStatus)}
+                  aria-label={getStatusLabel(member.onlineStatus)}
+                ></span>
+              </div>
+              <span class="member-item__info">
+                <span class="member-item__name">{member.nickname || member.name}</span>
+                {#if getRoleBadgeLabel(member.role)}
+                  <span class="role-badge role-badge--{member.role}">
+                    {getRoleBadgeLabel(member.role)}
+                  </span>
+                {/if}
+              </span>
+            </li>
+          {/each}
+        </ul>
+      </section>
+    {/if}
+
+    {#if offlineMembers.length > 0}
+      <section class="member-group">
+        <h3 class="member-group__header">
+          Offline
+          <span class="member-group__count">{offlineMembers.length}</span>
+        </h3>
+        <ul class="member-group__list" role="list">
+          {#each offlineMembers as member (member.id)}
+            <li class="member-item member-item--offline">
+              <div class="member-item__avatar-wrap">
+                {#if member.avatarUrl}
+                  <img class="member-item__avatar" src={member.avatarUrl} alt="" />
+                {:else}
+                  <span class="member-item__avatar-placeholder">
+                    {(member.nickname || member.name).charAt(0).toUpperCase()}
+                  </span>
+                {/if}
+                <span
+                  class="member-item__status-dot"
+                  style:background={getStatusColor(member.onlineStatus)}
+                  aria-label={getStatusLabel(member.onlineStatus)}
+                ></span>
+              </div>
+              <span class="member-item__info">
+                <span class="member-item__name">{member.nickname || member.name}</span>
+                {#if getRoleBadgeLabel(member.role)}
+                  <span class="role-badge role-badge--{member.role}">
+                    {getRoleBadgeLabel(member.role)}
+                  </span>
+                {/if}
+              </span>
+            </li>
+          {/each}
+        </ul>
+      </section>
+    {/if}
+
+    {#if participants.length === 0}
+      <p class="member-list__empty">{t(M['chat.member_list.empty'])}</p>
+    {/if}
+  </div>
+</aside>
+
+<style>
+  .member-list {
+    display: flex;
+    flex-direction: column;
+    width: 240px;
+    height: 100%;
+    background: var(--smrt-color-surface-container, #f0f0f4);
+    border-left: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    overflow: hidden;
+  }
+
+  .member-list__header {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+  }
+
+  .member-list__title {
+    margin: 0;
+    font: var(--smrt-typography-title-small-font, 600 0.875rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+  }
+
+  .member-list__count {
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .close-btn {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border: none;
+    background: none;
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    cursor: pointer;
+    transition: background var(--smrt-duration-short2, 150ms);
+  }
+
+  .close-btn:hover {
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+  }
+
+  .close-btn:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: -2px;
+  }
+
+  .close-btn__icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .member-list__content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem 0;
+  }
+
+  .member-group {
+    margin-bottom: 0.5rem;
+  }
+
+  .member-group__header {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin: 0;
+    padding: 0.375rem 1rem;
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .member-group__count {
+    color: var(--smrt-color-outline, #74777f);
+  }
+
+  .member-group__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .member-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 1rem;
+    cursor: default;
+  }
+
+  .member-item--offline {
+    opacity: 0.5;
+  }
+
+  .member-item__avatar-wrap {
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .member-item__avatar {
+    width: 2rem;
+    height: 2rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    object-fit: cover;
+  }
+
+  .member-item__avatar-placeholder {
+    width: 2rem;
+    height: 2rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-primary-container, #d6e3ff);
+    color: var(--smrt-color-on-primary-container, #001a41);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1 sans-serif);
+  }
+
+  .member-item__status-dot {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    border: 2px solid var(--smrt-color-surface-container, #f0f0f4);
+  }
+
+  .member-item__info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .member-item__name {
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .role-badge {
+    flex-shrink: 0;
+    padding: 0.0625rem 0.375rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
+  }
+
+  .role-badge--owner {
+    background: var(--smrt-color-tertiary-container, #c2f0dd);
+    color: var(--smrt-color-on-tertiary-container, #002114);
+  }
+
+  .role-badge--admin {
+    background: var(--smrt-color-secondary-container, #d7e3f7);
+    color: var(--smrt-color-on-secondary-container, #101c2b);
+  }
+
+  .member-list__empty {
+    text-align: center;
+    padding: 2rem 1rem;
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .close-btn {
+      transition: none;
+    }
+  }
+</style>

package/dist/svelte/components/layout/MemberList.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ChatParticipantData } from '../../types.js';
+export interface Props {
+    /** Room participants */
+    participants: ChatParticipantData[];
+    /** Callback to close the member panel */
+    onclose: () => void;
+}
+declare const MemberList: import("svelte").Component<Props, {}, "">;
+type MemberList = ReturnType<typeof MemberList>;
+export default MemberList;
+//# sourceMappingURL=MemberList.svelte.d.ts.map

package/dist/svelte/components/layout/MemberList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MemberList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/MemberList.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAG1D,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,YAAY,EAAE,mBAAmB,EAAE,CAAC;IACpC,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAwLD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/layout/RoomHeader.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+/**
+ * RoomHeader - Room header bar with name, topic, and action buttons
+ * Displays room info and provides access to members and search
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.messages.js';
+import type { ChatRoomData } from '../../types.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Current room data */
+  room: ChatRoomData;
+  /** Number of participants in the room */
+  participantCount: number;
+  /** Callback to show member list panel */
+  onshowmembers?: () => void;
+  /** Callback to show message search */
+  onshowsearch?: () => void;
+}
+
+let { room, participantCount, onshowmembers, onshowsearch }: Props = $props();
+
+const roomIcon = $derived.by(() => {
+  switch (room.roomType) {
+    case 'public':
+      return '#';
+    case 'private':
+      return '\u{1F512}';
+    case 'dm':
+      return '';
+    case 'agent':
+      return '\u{2699}';
+    default:
+      return '#';
+  }
+});
+
+const roomTypeLabel = $derived.by(() => {
+  switch (room.roomType) {
+    case 'public':
+      return 'Public channel';
+    case 'private':
+      return 'Private channel';
+    case 'dm':
+      return 'Direct message';
+    case 'agent':
+      return 'Agent conversation';
+    default:
+      return 'Channel';
+  }
+});
+</script>
+
+<header class="room-header" aria-label={t(M['chat.room_header.room_label'], { name: room.name })}>
+  <div class="room-header__info">
+    <div class="room-header__title-row">
+      {#if room.roomType !== 'dm'}
+        <span class="room-header__icon" aria-hidden="true">{roomIcon}</span>
+      {:else if room.avatarUrl}
+        <img class="room-header__avatar" src={room.avatarUrl} alt="" />
+      {:else}
+        <span class="room-header__avatar-placeholder">
+          {room.name.charAt(0).toUpperCase()}
+        </span>
+      {/if}
+      <h1 class="room-header__name">{room.name}</h1>
+      <span class="room-header__type-badge">{roomTypeLabel}</span>
+    </div>
+
+    {#if room.topic}
+      <p class="room-header__topic" title={room.topic}>
+        {room.topic}
+      </p>
+    {/if}
+  </div>
+
+  <div class="room-header__actions">
+    {#if onshowmembers}
+      <button
+        class="header-btn"
+        type="button"
+        onclick={onshowmembers}
+        aria-label={t(M['chat.room_header.show_members'], { count: participantCount })}
+        title={t(M['chat.room_header.members'])}
+      >
+        <svg class="header-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+        </svg>
+        <span class="header-btn__count">{participantCount}</span>
+      </button>
+    {/if}
+
+    {#if onshowsearch}
+      <button
+        class="header-btn"
+        type="button"
+        onclick={onshowsearch}
+        aria-label={t(M['chat.room_header.search_messages'])}
+        title={t(M['chat.room_header.search'])}
+      >
+        <svg class="header-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.35-4.35" />
+        </svg>
+      </button>
+    {/if}
+  </div>
+</header>
+
+<style>
+  .room-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.75rem 1rem;
+    background: var(--smrt-color-surface, #fefbff);
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    min-height: 3.5rem;
+  }
+
+  .room-header__info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .room-header__title-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .room-header__icon {
+    flex-shrink: 0;
+    font-size: var(--smrt-typography-title-medium-size, 1.125rem);
+    font-weight: var(--smrt-typography-weight-bold, 700);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .room-header__avatar {
+    flex-shrink: 0;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    object-fit: cover;
+  }
+
+  .room-header__avatar-placeholder {
+    flex-shrink: 0;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-primary-container, #d6e3ff);
+    color: var(--smrt-color-on-primary-container, #001a41);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1 sans-serif);
+  }
+
+  .room-header__name {
+    margin: 0;
+    font: var(--smrt-typography-title-medium-font, 600 1rem / 1.5 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .room-header__type-badge {
+    flex-shrink: 0;
+    padding: 0.125rem 0.5rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface-container, #f0f0f4);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
+  }
+
+  .room-header__topic {
+    margin: 0;
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-left: 1.75rem;
+  }
+
+  .room-header__actions {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .header-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.375rem 0.5rem;
+    border: none;
+    background: none;
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    cursor: pointer;
+    transition: background var(--smrt-duration-short2, 150ms);
+  }
+
+  .header-btn:hover {
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+  }
+
+  .header-btn:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: -2px;
+  }
+
+  .header-btn__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .header-btn__count {
+    font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .header-btn {
+      transition: none;
+    }
+  }
+</style>

package/dist/svelte/components/layout/RoomHeader.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ChatRoomData } from '../../types.js';
+export interface Props {
+    /** Current room data */
+    room: ChatRoomData;
+    /** Number of participants in the room */
+    participantCount: number;
+    /** Callback to show member list panel */
+    onshowmembers?: () => void;
+    /** Callback to show message search */
+    onshowsearch?: () => void;
+}
+declare const RoomHeader: import("svelte").Component<Props, {}, "">;
+type RoomHeader = ReturnType<typeof RoomHeader>;
+export default RoomHeader;
+//# sourceMappingURL=RoomHeader.svelte.d.ts.map

package/dist/svelte/components/layout/RoomHeader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoomHeader.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/RoomHeader.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,IAAI,EAAE,YAAY,CAAC;IACnB,yCAAyC;IACzC,gBAAgB,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AA8FD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}