@lapismd/design-core 0.2.0 → 0.3.1

package/dist/shared/ai/message-list/MessageList.svelte

@@ -0,0 +1,242 @@
+<script lang="ts" generics="T extends { id: string }">
+  import SparklesIcon from "@lucide/svelte/icons/sparkles";
+  import { Spinner } from "@lapismd/design-core/shadcn/spinner";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as Empty from "@lapismd/design-core/shadcn/empty";
+  import VirtualizedMessageRows from "./VirtualizedMessageRows.svelte";
+  import { tick, untrack, type Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { setListContext, useLayoutContext } from "../context.svelte.js";
+  import type { Density } from "../types.js";
+  import type { MessageListPosition } from "./position.js";
+  import type { MessageListEstimateSize } from "./estimate-size.js";
+  import "../chat.css";
+
+  let {
+    ref = $bindable(null),
+    density = "balanced",
+    gap,
+    isStreaming = false,
+    isEmpty = false,
+    emptyState,
+    scrollToTopAction,
+    latestMessageId,
+    children,
+    header,
+    footer,
+    items = [],
+    row,
+    virtualize = false,
+    overscan = 6,
+    estimateSize = 112,
+    conversationKey,
+    initialPosition,
+    onPositionChange,
+    retainRowIds = [],
+    hasOlder = true,
+    loading = false,
+    "aria-label": ariaLabel = "Messages",
+    ...restProps
+  }: HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    density?: Density;
+    gap?: string;
+    isStreaming?: boolean;
+    isEmpty?: boolean;
+    emptyState?: Snippet;
+    scrollToTopAction?: () => Promise<void>;
+    latestMessageId?: string;
+    children?: Snippet;
+    /** Content before and after the rows, including in a virtualized list. */
+    header?: Snippet;
+    footer?: Snippet;
+    items?: readonly T[];
+    row?: Snippet<[T, number]>;
+    /** Opt in to bounded row rendering; non-virtual lists still auto-load older pages. */
+    virtualize?: boolean;
+    overscan?: number;
+    /** Estimated row size in pixels, or an item-aware estimator used before DOM measurement. */
+    estimateSize?: MessageListEstimateSize<T>;
+    /** Scope restoration and arrivals to a conversation; existing unkeyed lists retain explicit arrival handling. */
+    conversationKey?: string;
+    initialPosition?: MessageListPosition;
+    onPositionChange?: (position: MessageListPosition) => void;
+    retainRowIds?: readonly string[];
+    hasOlder?: boolean;
+    loading?: boolean;
+  } = $props();
+
+  const layout = useLayoutContext();
+  const componentId = $props.id();
+  const errorId = `${componentId}-older-error`;
+  let innerRef = $state<HTMLDivElement | null>(null);
+  let topSentinel = $state<HTMLDivElement | null>(null);
+  let loadingOlder = $state(false);
+  let loadVersion = 0;
+  let loadError = $state<string | null>(null);
+  let arrivalKey: string | undefined;
+  let previousMessageId: string | undefined;
+  let historyKey: string | undefined;
+  let historyInitialized = false;
+
+  setListContext({ getDensity: () => density });
+
+  $effect(() => {
+    layout?.setContent(innerRef);
+    return () => layout?.setContent(null);
+  });
+  $effect(() => {
+    const key = conversationKey,
+      latest = latestMessageId;
+    if (
+      latest &&
+      (key === undefined ||
+        (arrivalKey === key && latest !== previousMessageId))
+    )
+      untrack(() => layout?.newMessages.notify(latest));
+    arrivalKey = key;
+    previousMessageId = latest;
+  });
+
+  $effect(() => {
+    const key = conversationKey;
+    if (historyInitialized && key === historyKey) return;
+    historyInitialized = true;
+    historyKey = key;
+    loadVersion++;
+    loadingOlder = false;
+    loadError = null;
+  });
+
+  async function loadOlder(): Promise<void> {
+    if (!scrollToTopAction || loadingOlder || loading || !hasOlder) return;
+    const key = conversationKey;
+    const version = loadVersion;
+    loadingOlder = true;
+    loadError = null;
+    const viewport = layout?.getScrollContainer();
+    const previousHeight = viewport?.scrollHeight ?? 0;
+    const revision = layout?.streamScroll.positionRevision;
+    const restore =
+      !virtualize && conversationKey !== undefined
+        ? layout?.streamScroll.captureAnchor?.()
+        : undefined;
+    try {
+      await scrollToTopAction();
+      await tick();
+      if (key === conversationKey && version === loadVersion) {
+        if (restore) restore();
+        else if (
+          !virtualize &&
+          viewport &&
+          revision === layout?.streamScroll.positionRevision
+        )
+          layout?.streamScroll.scrollToOffset?.(
+            viewport.scrollTop + viewport.scrollHeight - previousHeight,
+            true,
+          );
+      }
+    } catch (error) {
+      if (key === conversationKey && version === loadVersion)
+        loadError =
+          error instanceof Error ? error.message : "Could not load messages";
+    } finally {
+      if (key === conversationKey && version === loadVersion)
+        loadingOlder = false;
+    }
+  }
+
+  $effect(() => {
+    const node = topSentinel;
+    const skip = virtualize;
+    const key = conversationKey;
+    void key;
+    if (!node || skip || !scrollToTopAction) return;
+    const root =
+      layout?.getScrollContainer() ??
+      node.closest("[data-ui-part='scroll-area-viewport']");
+    if (!(root instanceof HTMLElement)) return;
+    let armed = false;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const near = entries.some((entry) => entry.isIntersecting);
+        if (!near) armed = true;
+        else if (armed) {
+          armed = false;
+          void loadOlder();
+        }
+      },
+      { root, rootMargin: "600px 0px 0px 0px" },
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  });
+</script>
+
+<div
+  bind:this={ref}
+  {...restProps}
+  data-ui-component="ai-chat-message-list"
+  data-ui-part="root"
+  data-density={density}
+  role="log"
+  aria-label={ariaLabel}
+  aria-live="polite"
+  aria-relevant="additions text"
+  aria-busy={isStreaming || loadingOlder || loading}
+>
+  <div bind:this={innerRef} data-ui-part="list-inner" style:gap>
+    {#if scrollToTopAction && hasOlder}
+      <div bind:this={topSentinel} data-ui-part="top-sentinel">
+        <Button
+          type="button"
+          size="xs"
+          variant="ghost"
+          disabled={loadingOlder || loading}
+          aria-describedby={loadError ? errorId : undefined}
+          onclick={loadOlder}
+        >
+          {#if loadingOlder || loading}<Spinner /> Loading older messages{:else if loadError}Retry
+            older messages{:else}Load older messages{/if}
+        </Button>
+      </div>
+      {#if loadError}<p id={errorId} role="alert">{loadError}</p>{/if}
+    {/if}
+    <div data-ui-part="list-spacer" aria-hidden="true"></div>
+    {#if header}{@render header()}{/if}
+    {#if isEmpty}
+      <div data-ui-part="empty">
+        {#if emptyState}{@render emptyState()}{:else}
+          <Empty.Root
+            ><Empty.Header
+              ><Empty.Media variant="icon"
+                ><SparklesIcon aria-hidden="true" /></Empty.Media
+              ><Empty.Title>No messages yet</Empty.Title><Empty.Description
+                >The conversation will appear here.</Empty.Description
+              ></Empty.Header
+            ></Empty.Root
+          >
+        {/if}
+      </div>
+    {:else if virtualize && row}
+      <VirtualizedMessageRows
+        {items}
+        {row}
+        {overscan}
+        {estimateSize}
+        conversationKey={conversationKey ?? ""}
+        {initialPosition}
+        {onPositionChange}
+        {retainRowIds}
+        {hasOlder}
+        loading={loadingOlder || loading}
+        onLoadOlder={loadOlder}
+      />
+    {:else if row}
+      {#each items as item, index (item.id)}<div data-message-id={item.id}>
+          {@render row(item, index)}
+        </div>{/each}
+    {:else if children}{@render children()}{/if}
+    {#if footer}{@render footer()}{/if}
+  </div>
+</div>

package/dist/shared/ai/message-list/MessageList.svelte.d.ts

@@ -0,0 +1,67 @@
+import { type Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { Density } from "../types.js";
+import type { MessageListPosition } from "./position.js";
+import type { MessageListEstimateSize } from "./estimate-size.js";
+import "../chat.css";
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: HTMLAttributes<HTMLDivElement> & {
+        ref?: HTMLDivElement | null;
+        density?: Density;
+        gap?: string;
+        isStreaming?: boolean;
+        isEmpty?: boolean;
+        emptyState?: Snippet;
+        scrollToTopAction?: () => Promise<void>;
+        latestMessageId?: string;
+        children?: Snippet;
+        /** Content before and after the rows, including in a virtualized list. */
+        header?: Snippet;
+        footer?: Snippet;
+        items?: readonly T[];
+        row?: Snippet<[T, number]>;
+        /** Opt in to bounded row rendering; non-virtual lists still auto-load older pages. */
+        virtualize?: boolean;
+        overscan?: number;
+        /** Estimated row size in pixels, or an item-aware estimator used before DOM measurement. */
+        estimateSize?: MessageListEstimateSize<T>;
+        /** Scope restoration and arrivals to a conversation; existing unkeyed lists retain explicit arrival handling. */
+        conversationKey?: string;
+        initialPosition?: MessageListPosition;
+        onPositionChange?: (position: MessageListPosition) => void;
+        retainRowIds?: readonly string[];
+        hasOlder?: boolean;
+        loading?: boolean;
+    };
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const MessageList: $$IsomorphicComponent;
+type MessageList<T extends {
+    id: string;
+}> = InstanceType<typeof MessageList<T>>;
+export default MessageList;

package/dist/shared/ai/message-list/MessageListEstimateUpdateFixture.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import Layout from "../layout/Layout.svelte";
+  import MessageList from "./MessageList.svelte";
+
+  const items = Array.from({ length: 200 }, (_, index) => ({
+    id: `estimate-${index}`,
+    label: `Estimated row ${index}`,
+  }));
+  let firstDetail = $state(false);
+  const estimate = $derived.by(() => {
+    const detail = firstDetail;
+    return (_item: (typeof items)[number], index: number) =>
+      detail && index === 0 ? 864 : 64;
+  });
+</script>
+
+<Button onclick={() => (firstDetail = true)}>Load first message detail</Button>
+<div
+  style="height: 420px; max-width: 40rem; display: flex; flex-direction: column;"
+>
+  <Layout scrollMode="history" conversationKey="estimate-updates">
+    {#snippet composer()}<span>Conversation composer</span>{/snippet}
+    <MessageList
+      {items}
+      estimateSize={estimate}
+      retainRowIds={[]}
+      virtualize
+      conversationKey="estimate-updates"
+    >
+      {#snippet row(item, index)}<div
+          data-story="estimated-row"
+          style:height={firstDetail && index === 0 ? "864px" : "64px"}
+        >
+          {item.label}
+          {#if firstDetail && index === 0}<span
+              >Loaded first message detail</span
+            >{/if}
+        </div>{/snippet}
+    </MessageList>
+  </Layout>
+</div>

package/dist/shared/ai/message-list/MessageListEstimateUpdateFixture.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MessageListEstimateUpdateFixture: import("svelte").Component<Record<string, never>, {}, "">;
+type MessageListEstimateUpdateFixture = ReturnType<typeof MessageListEstimateUpdateFixture>;
+export default MessageListEstimateUpdateFixture;

package/dist/shared/ai/message-list/MessageListHistoryFixture.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import Layout from "../layout/Layout.svelte";
+  import MessageList from "./MessageList.svelte";
+  import Message from "../message/Message.svelte";
+  import MessageBubble from "../message-bubble/MessageBubble.svelte";
+  import type { MessageListPosition } from "./position.js";
+
+  interface HistoryMessage {
+    id: string;
+    text: string;
+  }
+
+  let items = $state<HistoryMessage[]>(
+    Array.from({ length: 1000 }, (_, index) => ({
+      id: `message-${index}`,
+      text: `Message ${index}: ${"Variable-height cached conversation content. ".repeat((index % 7) + 1)}`,
+    })),
+  );
+  let unread = $state(false);
+  let expanded = $state(false);
+  let position = $state<MessageListPosition>();
+  let presentation = $state<{ key: string; position?: MessageListPosition }>({
+    key: "channel-a",
+  });
+  let loads = $state(0);
+  let key = $state("channel-a");
+  let delay = $state(false);
+  let statusUpdates = $state(0);
+  let positionReports = $state(0);
+  function estimateHistoryRow(item: HistoryMessage) {
+    return 88 + Math.min(144, Math.ceil(item.text.length / 44) * 22);
+  }
+
+  function append(incoming: boolean) {
+    items = [
+      ...items,
+      {
+        id: `message-${items.length}`,
+        text: incoming ? "Incoming message" : "My own message",
+      },
+    ];
+    if (incoming) unread = true;
+  }
+</script>
+
+<div data-story="history-controls">
+  <Button onclick={() => append(true)}>Receive message</Button>
+  <Button onclick={() => append(false)}>Send own message</Button>
+  <Button onclick={() => (expanded = !expanded)}>Resize content</Button>
+  <Button
+    onclick={() => (key = key === "channel-a" ? "channel-b" : "channel-a")}
+    >Switch conversation</Button
+  >
+  <Button onclick={() => (delay = !delay)}>Toggle delayed history</Button>
+  <Button onclick={() => statusUpdates++}>Update unrelated status</Button>
+  <output aria-label="Position reports">{positionReports}</output>
+  <output aria-label="History loads">{loads}</output>
+  <output aria-label="Reading anchor">{position?.messageId ?? "none"}</output>
+</div>
+<div
+  data-story="virtual-history-frame"
+  style:width={expanded ? "360px" : "640px"}
+  style="height: 420px; max-width: 100%; display: flex; flex-direction: column;"
+>
+  <Layout
+    scrollMode="history"
+    conversationKey={presentation.key === key ? presentation.key : key}
+    hasNewMessages={unread}
+    onViewportChange={({ atLatest, active }) => {
+      if (atLatest && active) unread = false;
+    }}
+  >
+    {#snippet composer()}<span>Conversation composer</span>{/snippet}
+    <MessageList
+      {items}
+      overscan={6}
+      estimateSize={estimateHistoryRow}
+      retainRowIds={[]}
+      data-status={statusUpdates}
+      data-position-reports={positionReports}
+      virtualize
+      conversationKey={presentation.key === key ? presentation.key : key}
+      onPositionChange={(next) => {
+        positionReports++;
+        position = next;
+        if (
+          JSON.stringify(presentation.position) !== JSON.stringify(next) ||
+          presentation.key !== key
+        )
+          presentation = { key, position: next };
+      }}
+      scrollToTopAction={async () => {
+        loads++;
+        if (delay) await new Promise((resolve) => setTimeout(resolve, 250));
+        const prefix = `older-${loads}`;
+        items = [
+          ...Array.from({ length: 50 }, (_, index) => ({
+            id: `${prefix}-${index}`,
+            text: `Earlier message ${index}`,
+          })),
+          ...items,
+        ];
+      }}
+    >
+      {#snippet row(item: HistoryMessage)}
+        <Message sender="user"
+          ><MessageBubble>
+            <p>{item.text}</p>
+            {#if expanded}<p>
+                Additional image or expanded text changes this row's height
+                without adding a message.
+              </p>{/if}
+            <Button size="xs" variant="ghost">Action for {item.id}</Button>
+          </MessageBubble></Message
+        >
+      {/snippet}
+    </MessageList>
+  </Layout>
+</div>

package/dist/shared/ai/message-list/MessageListHistoryFixture.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MessageListHistoryFixture: import("svelte").Component<Record<string, never>, {}, "">;
+type MessageListHistoryFixture = ReturnType<typeof MessageListHistoryFixture>;
+export default MessageListHistoryFixture;

package/dist/shared/ai/message-list/MessageListLegacyFixture.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import Layout from "../layout/Layout.svelte";
+  import MessageList from "./MessageList.svelte";
+  import Message from "../message/Message.svelte";
+  import MessageBubble from "../message-bubble/MessageBubble.svelte";
+  let items = $state(
+    Array.from({ length: 100 }, (_, index) => ({
+      id: `legacy-${index}`,
+      text: `Existing message ${index}`,
+    })),
+  );
+  let loads = $state(0);
+  let expanded = $state(false);
+</script>
+
+<Button
+  onclick={() =>
+    (items = [...items, { id: "incoming", text: "New incoming message" }])}
+  >Receive explicit arrival</Button
+>
+<Button onclick={() => (expanded = !expanded)}>Reflow existing content</Button>
+<output aria-label="Legacy history requests">{loads}</output>
+<div
+  data-story="legacy-history-frame"
+  style="height: 420px; width: 540px; display: flex; flex-direction: column;"
+>
+  <Layout>
+    {#snippet composer()}<span>Existing composer snippet</span>{/snippet}
+    <MessageList
+      density="compact"
+      gap="8px"
+      latestMessageId={items.at(-1)?.id}
+      scrollToTopAction={async () => {
+        loads++;
+        items = [
+          { id: `earlier-${loads}`, text: `Earlier context ${loads}` },
+          ...items,
+        ];
+      }}
+    >
+      {#each items as item (item.id)}
+        <Message sender="user"
+          ><MessageBubble>
+            {item.text}
+            {#if expanded}<p>Reflow without a new message</p>{/if}
+          </MessageBubble></Message
+        >
+      {/each}
+    </MessageList>
+  </Layout>
+</div>

package/dist/shared/ai/message-list/MessageListLegacyFixture.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MessageListLegacyFixture: import("svelte").Component<Record<string, never>, {}, "">;
+type MessageListLegacyFixture = ReturnType<typeof MessageListLegacyFixture>;
+export default MessageListLegacyFixture;