@happyvertical/smrt-chat 0.30.0

package/dist/svelte/components/messages/MessageItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/messages/MessageItem.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMtD,MAAM,WAAW,KAAK;IACpB,6BAA6B;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,wDAAwD;IACxD,KAAK,EAAE,OAAO,CAAC;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,oBAAoB;IACpB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAyJD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/messages/MessageList.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+/**
+ * MessageList - Scrollable message feed
+ * Renders MessageItem for each message, grouped by date.
+ * Supports infinite scroll via onloadmore callback.
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.messages.js';
+import type { ChatMessageData } from '../../types.js';
+import MessageItem from './MessageItem.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Messages to display */
+  messages: ChatMessageData[];
+  /** Current user's profile ID to determine own messages */
+  currentProfileId: string;
+  /** Load more messages (infinite scroll) */
+  onloadmore?: () => void;
+  /** Reply to a message */
+  onreply?: (id: string) => void;
+  /** React to a message */
+  onreact?: (id: string, emoji: string) => void;
+}
+
+const { messages, currentProfileId, onloadmore, onreply, onreact }: Props =
+  $props();
+
+let scrollContainer: HTMLDivElement | undefined = $state();
+
+/** Group messages by date for date separator headers */
+const groupedMessages = $derived.by(() => {
+  const groups: Array<{ dateLabel: string; messages: ChatMessageData[] }> = [];
+  let currentDate = '';
+
+  for (const msg of messages) {
+    const d =
+      msg.createdAt instanceof Date ? msg.createdAt : new Date(msg.createdAt);
+    const dateStr = d.toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+
+    if (dateStr !== currentDate) {
+      currentDate = dateStr;
+      groups.push({ dateLabel: dateStr, messages: [] });
+    }
+    groups[groups.length - 1].messages.push(msg);
+  }
+
+  return groups;
+});
+
+function handleScroll(event: Event) {
+  if (!onloadmore) return;
+  const target = event.target as HTMLElement;
+  if (target.scrollTop < 60) {
+    onloadmore();
+  }
+}
+</script>
+
+<div
+  class="message-list"
+  bind:this={scrollContainer}
+  onscroll={handleScroll}
+  role="log"
+  aria-label={t(M['chat.message_list.messages_label'])}
+>
+  {#if messages.length === 0}
+    <div class="message-list__empty">
+      <span>{t(M['chat.message_list.no_messages'])}</span>
+    </div>
+  {:else}
+    {#each groupedMessages as group}
+      <div class="message-list__date-separator" role="separator">
+        <span class="message-list__date-label">{group.dateLabel}</span>
+      </div>
+      {#each group.messages as message (message.id)}
+        <MessageItem
+          {message}
+          isOwn={message.senderProfileId === currentProfileId}
+          {onreply}
+          {onreact}
+        />
+      {/each}
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .message-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 0.375rem);
+    overflow-y: auto;
+    flex: 1;
+    padding: var(--smrt-spacing-4, 1rem) 0;
+    min-height: 0;
+  }
+
+  .message-list__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+
+  .message-list__date-separator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-4, 1rem);
+  }
+
+  .message-list__date-label {
+    padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-3, 0.75rem);
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    border-radius: var(--smrt-radius-full, 9999px);
+    white-space: nowrap;
+  }
+</style>

package/dist/svelte/components/messages/MessageList.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ChatMessageData } from '../../types.js';
+export interface Props {
+    /** Messages to display */
+    messages: ChatMessageData[];
+    /** Current user's profile ID to determine own messages */
+    currentProfileId: string;
+    /** Load more messages (infinite scroll) */
+    onloadmore?: () => void;
+    /** Reply to a message */
+    onreply?: (id: string) => void;
+    /** React to a message */
+    onreact?: (id: string, emoji: string) => void;
+}
+declare const MessageList: import("svelte").Component<Props, {}, "">;
+type MessageList = ReturnType<typeof MessageList>;
+export default MessageList;
+//# sourceMappingURL=MessageList.svelte.d.ts.map

package/dist/svelte/components/messages/MessageList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/messages/MessageList.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,MAAM,WAAW,KAAK;IACpB,0BAA0B;IAC1B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,0DAA0D;IAC1D,gBAAgB,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yBAAyB;IACzB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,yBAAyB;IACzB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAuED,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/messages/ThreadPanel.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+/**
+ * ThreadPanel - Side panel for threaded conversation
+ * Shows the root message, thread replies, and an input for new replies.
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.messages.js';
+import type { ChatMessageData, ChatThreadData } from '../../types.js';
+import MessageInput from './MessageInput.svelte';
+import MessageList from './MessageList.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Thread metadata */
+  thread: ChatThreadData;
+  /** Messages in the thread */
+  messages: ChatMessageData[];
+  /** Current user's profile ID */
+  currentProfileId: string;
+  /** Send a reply to the thread */
+  onsend: (content: string) => void;
+  /** Close the thread panel */
+  onclose: () => void;
+}
+
+const { thread, messages, currentProfileId, onsend, onclose }: Props = $props();
+
+const threadTitle = $derived(thread.title || 'Thread');
+const replyCount = $derived(
+  thread.messageCount > 0 ? thread.messageCount - 1 : 0,
+);
+</script>
+
+<aside class="thread-panel" aria-label={t(M['chat.thread_panel.thread_label'], { title: threadTitle })}>
+  <header class="thread-panel__header">
+    <div class="thread-panel__header-text">
+      <h3 class="thread-panel__title">{threadTitle}</h3>
+      <span class="thread-panel__meta">
+        {replyCount} {replyCount === 1 ? 'reply' : 'replies'}
+        {#if thread.participantCount > 0}
+          &middot; {thread.participantCount} {thread.participantCount === 1 ? 'participant' : 'participants'}
+        {/if}
+      </span>
+    </div>
+    {#if thread.isResolved}
+      <span class="thread-panel__resolved">Resolved</span>
+    {/if}
+    <button
+      class="thread-panel__close"
+      type="button"
+      onclick={onclose}
+      aria-label={t(M['chat.thread_panel.close'])}
+    >
+      <svg viewBox="0 0 16 16" width="16" height="16">
+        <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+    </button>
+  </header>
+
+  <div class="thread-panel__messages">
+    <MessageList
+      {messages}
+      {currentProfileId}
+    />
+  </div>
+
+  <div class="thread-panel__input">
+    <MessageInput
+      {onsend}
+      placeholder={t(M['chat.thread_panel.reply_placeholder'])}
+    />
+  </div>
+</aside>
+
+<style>
+  .thread-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background: var(--smrt-color-surface, #ffffff);
+    border-left: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+  }
+
+  .thread-panel__header {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-3, 0.75rem);
+    padding: var(--smrt-spacing-4, 1rem);
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    flex-shrink: 0;
+  }
+
+  .thread-panel__header-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .thread-panel__title {
+    margin: 0;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    color: var(--smrt-color-on-surface, #1b1b1f);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .thread-panel__meta {
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .thread-panel__resolved {
+    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-success-container, #2e7d32);
+    background: var(--smrt-color-success-container, #e8f5e9);
+    border-radius: var(--smrt-radius-full, 9999px);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .thread-panel__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .thread-panel__close:hover {
+    background: var(--smrt-color-surface-container-high, #e1e3e8);
+  }
+
+  .thread-panel__messages {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .thread-panel__input {
+    flex-shrink: 0;
+  }
+</style>

package/dist/svelte/components/messages/ThreadPanel.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ChatMessageData, ChatThreadData } from '../../types.js';
+export interface Props {
+    /** Thread metadata */
+    thread: ChatThreadData;
+    /** Messages in the thread */
+    messages: ChatMessageData[];
+    /** Current user's profile ID */
+    currentProfileId: string;
+    /** Send a reply to the thread */
+    onsend: (content: string) => void;
+    /** Close the thread panel */
+    onclose: () => void;
+}
+declare const ThreadPanel: import("svelte").Component<Props, {}, "">;
+type ThreadPanel = ReturnType<typeof ThreadPanel>;
+export default ThreadPanel;
+//# sourceMappingURL=ThreadPanel.svelte.d.ts.map

package/dist/svelte/components/messages/ThreadPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/messages/ThreadPanel.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAKtE,MAAM,WAAW,KAAK;IACpB,sBAAsB;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,6BAA6B;IAC7B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,iCAAiC;IACjC,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,6BAA6B;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsDD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/messages/__tests__/MessageInput.test.js

@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for MessageInput via the shared S11 harness (#1416).
+ */
+import { expectNoA11yViolations, render, screen, userEvent, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import MessageInput from '../MessageInput.svelte';
+describe('MessageInput', () => {
+    it('sends the trimmed content on Enter', async () => {
+        const onsend = vi.fn();
+        render(MessageInput, { props: { onsend } });
+        await userEvent.type(screen.getByLabelText('Message input'), 'Hello{Enter}');
+        expect(onsend).toHaveBeenCalledWith('Hello');
+    });
+    it('does not send empty content', async () => {
+        const onsend = vi.fn();
+        render(MessageInput, { props: { onsend } });
+        await userEvent.type(screen.getByLabelText('Message input'), '{Enter}');
+        expect(onsend).not.toHaveBeenCalled();
+    });
+    it('shows a reply banner and cancels it', async () => {
+        const oncancelreply = vi.fn();
+        render(MessageInput, {
+            props: {
+                onsend: vi.fn(),
+                replyTo: { id: 'm1', senderName: 'Ada', content: 'earlier message' },
+                oncancelreply,
+            },
+        });
+        expect(screen.getByText('Ada')).toBeInTheDocument();
+        await userEvent.click(screen.getByRole('button', { name: 'Cancel reply' }));
+        expect(oncancelreply).toHaveBeenCalledTimes(1);
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(MessageInput, { props: { onsend: vi.fn() } });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/components/shared/Avatar.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+/**
+ * Avatar — chat profile avatar with online-presence indicator.
+ *
+ * Thin adapter over the shared `@happyvertical/smrt-ui` `Avatar` primitive
+ * (S10 consolidation, #1415): it keeps chat's prop vocabulary
+ * (`avatarUrl` / `onlineStatus`) but delegates rendering, the initials +
+ * image-error fallback, presence dot, tokens, and a11y to the library so that
+ * logic lives in exactly one place.
+ */
+import { Avatar as UiAvatar } from '@happyvertical/smrt-ui';
+
+export interface Props {
+  /** Display name used for initials fallback. */
+  name: string;
+  /** URL for the avatar image. */
+  avatarUrl?: string;
+  /** Online presence status. */
+  onlineStatus?: 'online' | 'away' | 'dnd' | 'offline';
+  /** Avatar size. */
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const { name, avatarUrl, onlineStatus, size = 'md' }: Props = $props();
+
+// chat's "dnd" maps to the library's "busy" presence value.
+const status = $derived(onlineStatus === 'dnd' ? 'busy' : onlineStatus);
+</script>
+
+<UiAvatar {name} src={avatarUrl} {size} {status} />

package/dist/svelte/components/shared/Avatar.svelte.d.ts

@@ -0,0 +1,14 @@
+export interface Props {
+    /** Display name used for initials fallback. */
+    name: string;
+    /** URL for the avatar image. */
+    avatarUrl?: string;
+    /** Online presence status. */
+    onlineStatus?: 'online' | 'away' | 'dnd' | 'offline';
+    /** Avatar size. */
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;
+//# sourceMappingURL=Avatar.svelte.d.ts.map

package/dist/svelte/components/shared/Avatar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/Avatar.svelte.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,KAAK;IACpB,+CAA+C;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC;IACrD,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAgBD,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}