@aparte/svelte 0.7.1 → 0.8.0

package/README.md

@@ -1,21 +1,34 @@
 # @aparte/svelte
 
-Svelte 4 wrapper for [aparté](https://github.com/apartejs/aparte) — an ergonomic `<AparteChat>`
+Svelte wrapper for [aparté](https://github.com/apartejs/aparte) — an ergonomic `<AparteChat>`
 component plus stores (`createAparteChat`, `createAparteClient`, `createConversationManager`) over the
 framework-agnostic web components in `@aparte/core`.
 
+**Svelte 4 and Svelte 5**, from the same source. The package ships its `.svelte` files
+under the `svelte` export condition, so **your** compiler builds them — how a Svelte
+component library is meant to be published, and the only arrangement that can serve two
+majors: Svelte-4 output imports `svelte/internal`, which Svelte 5 removed, and Svelte-5
+output does not run on 4. No prebuilt artifact works for both.
+
+Both are exercised in a browser on every run: `apps/examples/svelte4` builds these
+sources with Svelte 4, `apps/examples/svelte5` with Svelte 5.
+
+One thing differs between the two, and it is in YOUR entry point rather than here:
+Svelte 5 removed the class-instantiation API, so you write `mount(App, …)` instead of
+`new App(…)`.
+
 ```bash
 npm install @aparte/svelte @aparte/core svelte
 ```
 
 ```svelte
 <script lang="ts">
-  import { AparteChat, createAparteChat, type AparteChatInstance } from '@aparte/svelte';
+  import { AparteChat, createAparteChat, type AparteChatImperativeApi } from '@aparte/svelte';
   import '@aparte/core/styles.css';
 
   const chat = createAparteChat();
   const { messages } = chat;
-  let comp: AparteChatInstance | null = null;
+  let comp: AparteChatImperativeApi | null = null;
   $: chat.connect(comp);
 </script>
 

package/dist/AparteChat.svelte

@@ -0,0 +1,245 @@
+<script>import { onMount, onDestroy, tick, createEventDispatcher } from "svelte";
+import { AparteChatHost, isAwaitingReply, uuid } from "@aparte/core";
+export let id = void 0;
+export let messages = [];
+export let placeholder = "Type a message...";
+export let disabled = false;
+export let isTyping = false;
+export let typingText = "Assistant is thinking...";
+export let submitOnEnter = true;
+export let layoutTransitionMs = 0;
+export let centerWhenEmpty = false;
+export let attachments = false;
+export let conversationId = null;
+export let config = void 0;
+const dispatch = createEventDispatcher();
+let hostId = "";
+let rootRef;
+let viewportRef;
+let composerRef;
+let internalMessages = [...messages];
+let typingActive = isTyping;
+let host = null;
+let teardown = null;
+let lastProp = messages;
+$: if (messages !== lastProp) {
+  lastProp = messages;
+  internalMessages = [...messages];
+  if (messages.length === 0) host?.clearRenderCache();
+}
+let lastTyping = isTyping;
+$: if (isTyping !== lastTyping) {
+  lastTyping = isTyping;
+  typingActive = isTyping;
+}
+let lastConv = conversationId;
+$: if (conversationId !== lastConv) {
+  lastConv = conversationId;
+  void host?.setConversationId(conversationId ?? null);
+}
+$: if (host && internalMessages) {
+  void tick().then(() => host?.syncBubbles());
+}
+function toggleAttr(el, name, on, value) {
+  if (on) el.setAttribute(name, value);
+  else el.removeAttribute(name);
+}
+$: if (composerRef) {
+  composerRef.setAttribute("target", hostId);
+  composerRef.setAttribute("placeholder", placeholder);
+  toggleAttr(composerRef, "disabled", disabled, "");
+  toggleAttr(composerRef, "submit-on-enter", !submitOnEnter, "false");
+}
+function handleSend(event) {
+  viewportRef?.requestSmoothScroll?.();
+  dispatch("messageSent", event.detail);
+}
+function handleAction(event) {
+  dispatch("action", event.detail);
+}
+onMount(() => {
+  hostId = id ?? `aparte-chat-${uuid()}`;
+  if (rootRef) rootRef.id = hostId;
+  const binding = {
+    hostId,
+    host: rootRef,
+    viewport: viewportRef,
+    getMessages: () => internalMessages,
+    setMessages: (m) => {
+      internalMessages = m;
+    },
+    onMessagesChange: (m) => dispatch("messagesChange", m),
+    onMessageAppended: (m) => dispatch("messageAppended", m),
+    onTypingChange: (t) => {
+      typingActive = t;
+      dispatch("typingChange", t);
+    },
+    onStreamingChange: () => {
+    },
+    afterRender: (cb) => {
+      void tick().then(cb);
+    },
+    resetComposer: () => composerRef?.reset?.()
+  };
+  host = new AparteChatHost(binding, {
+    layoutTransitionMs,
+    conversationId: conversationId ?? null,
+    onConversationCreated: (id2) => dispatch("conversationCreated", id2),
+    config
+  });
+  teardown = host.bind();
+  host.syncBubbles();
+  rootRef?.addEventListener("aparte-action", handleAction);
+});
+onDestroy(() => {
+  rootRef?.removeEventListener("aparte-action", handleAction);
+  teardown?.();
+  teardown = null;
+  host = null;
+});
+export function appendMessage(m) {
+  host?.appendMessage(m);
+}
+export function updateMessage(id2, u) {
+  host?.updateMessage(id2, u);
+}
+export function updateLastMessage(content, options) {
+  host?.updateLastMessage(content, options);
+}
+export function addSegment(segment) {
+  host?.addSegment(segment);
+}
+export function updateSegment(segmentId, updates) {
+  host?.updateSegment(segmentId, updates);
+}
+export function removeSegment(segmentId) {
+  host?.removeSegment(segmentId);
+}
+export function appendToSegment(segmentId, content) {
+  host?.appendToSegment(segmentId, content);
+}
+export function getMessages() {
+  return host?.getMessages() ?? internalMessages;
+}
+export function clearMessages() {
+  host?.clearMessages();
+}
+export function addBranch(messageId) {
+  return host?.addBranch(messageId) ?? 0;
+}
+export function addSiblingOf(existingId, message) {
+  return host?.addSiblingOf(existingId, message) ?? null;
+}
+export function truncateFrom(messageId) {
+  host?.truncateFrom(messageId);
+}
+export function truncateResponsesAfter(userMessageId) {
+  host?.truncateResponsesAfter(userMessageId);
+}
+export function injectTokenStream(messageId, tokens) {
+  return host?.streamTokens(messageId, tokens) ?? Promise.resolve();
+}
+export function stopTokenStream() {
+  host?.stopTokenStream();
+}
+export function setConversationId(id2) {
+  return host?.setConversationId(id2) ?? Promise.resolve();
+}
+export function scrollToBottom() {
+  viewportRef?.scrollToBottom?.();
+}
+export function getViewport() {
+  return viewportRef ?? null;
+}
+export function focusInput() {
+  composerRef?.focus?.();
+}
+export function isStreaming() {
+  return host?.isStreaming ?? false;
+}
+function _assertImperativeParity() {
+  return {
+    appendMessage,
+    updateMessage,
+    updateLastMessage,
+    addSegment,
+    updateSegment,
+    removeSegment,
+    appendToSegment,
+    getMessages,
+    clearMessages,
+    addBranch,
+    addSiblingOf,
+    truncateFrom,
+    truncateResponsesAfter,
+    injectTokenStream,
+    stopTokenStream,
+    setConversationId,
+    scrollToBottom,
+    focusInput,
+    isStreaming,
+    getViewport
+  };
+}
+</script>
+
+<div
+  class="aparte-chat-container"
+  class:aparte-chat-container--auto-center={centerWhenEmpty}
+  data-aparte-chat
+  data-aparte-empty={centerWhenEmpty && internalMessages.length === 0 ? '' : null}
+  id={hostId}
+  bind:this={rootRef}
+>
+  <aparte-chat-viewport bind:this={viewportRef} framework-managed="">
+    <!-- Welcome / placeholder shown inside the viewport while empty. -->
+    {#if internalMessages.length === 0}
+      <slot name="empty-state" />
+    {/if}
+    <!-- `bubble` slot renders your OWN element per message in place of
+         <aparte-chat-bubble>; driven by the reactive list so it streams live. -->
+    {#each internalMessages as m (m.id)}
+      <slot name="bubble" message={m}>
+        <aparte-chat-bubble
+          message-id={m.id}
+          data-role={m.role}
+          timestamp={m.timestamp}
+          content={m.content}
+          streaming={isAwaitingReply(m) ? '' : null}></aparte-chat-bubble>
+      </slot>
+    {/each}
+    <aparte-chat-status visible={typingActive ? '' : null} text={typingText}></aparte-chat-status>
+  </aparte-chat-viewport>
+
+  <!-- Content above the composer (banner, disclaimer, context chip). -->
+  <slot name="above-composer" />
+
+  <aparte-composer
+    bind:this={composerRef}
+    on:aparte-send={handleSend}
+  >
+    <!-- Custom composer via the `composer` slot; falls back to the default
+         shell (input · send, plus the attachment primitives when `attachments` is
+         set). Compose the headless aparte-composer-* primitives freely for a
+         skin-specific layout. -->
+    <slot name="composer">
+      <div class="aparte-composer-shell">
+        {#if attachments}<aparte-composer-attachments></aparte-composer-attachments>{/if}
+        <div class="aparte-composer-row">
+          {#if attachments}<aparte-composer-add-attachment></aparte-composer-add-attachment>{/if}
+          <aparte-composer-input></aparte-composer-input>
+          <aparte-composer-send></aparte-composer-send>
+        </div>
+        <!-- The composer's bottom row. ONE slot: placement is the DOM order, and
+             `margin-inline-start: auto` pushes a control to the end (a logical
+             property, so it reads correctly in RTL). Nothing is rendered at all when
+             the slot is unused. -->
+        {#if $$slots.toolbar}
+          <aparte-composer-toolbar>
+            <slot name="toolbar" />
+          </aparte-composer-toolbar>
+        {/if}
+      </div>
+    </slot>
+  </aparte-composer>
+</div>

package/dist/AparteUi.svelte

@@ -0,0 +1,53 @@
+<script>import { onMount, onDestroy, createEventDispatcher } from "svelte";
+import { applyElementProps, APARTE_DEFAULT_UI_EVENTS } from "@aparte/core";
+export let name;
+export let props = {};
+export let events = void 0;
+const dispatch = createEventDispatcher();
+let host;
+let el = null;
+let cleanups = [];
+function applyProps() {
+  if (el) applyElementProps(el, props);
+}
+function create() {
+  if (!host) return;
+  el = document.createElement(name);
+  applyProps();
+  for (const ev of events ?? APARTE_DEFAULT_UI_EVENTS) {
+    const listener = (e) => dispatch("elementEvent", e);
+    el.addEventListener(ev, listener);
+    cleanups.push(() => el?.removeEventListener(ev, listener));
+  }
+  host.appendChild(el);
+}
+function destroy() {
+  for (const c of cleanups) c();
+  cleanups = [];
+  el?.remove();
+  el = null;
+}
+onMount(create);
+onDestroy(destroy);
+let lastName = name;
+let lastEvtsKey = (events ?? APARTE_DEFAULT_UI_EVENTS).join("|");
+$: {
+  const evtsKey = (events ?? APARTE_DEFAULT_UI_EVENTS).join("|");
+  if (el && (name !== lastName || evtsKey !== lastEvtsKey)) {
+    lastName = name;
+    lastEvtsKey = evtsKey;
+    destroy();
+    create();
+  }
+}
+$: if (el && props) applyProps();
+export function getElement() {
+  return el;
+}
+export function callMethod(methodName, ...args) {
+  const fn = el?.[methodName];
+  return typeof fn === "function" ? fn.apply(el, args) : void 0;
+}
+</script>
+
+<span bind:this={host} style="display: contents"></span>

package/dist/index.d.ts

@@ -1,10 +1,14 @@
 /**
- * aparté Svelte wrapper
- * Svelte 4 integration with stores and segment support
+ * aparté Svelte wrapper — Svelte 4 AND 5, from one shipped source.
+ *
+ * The package publishes its `.svelte` files rather than a prebuilt bundle, so the
+ * consumer's own compiler handles them: no prebuilt artifact can serve both majors.
+ * Both are proven in a browser (`apps/examples/svelte4` and `svelte5`).
  */
 export { default as AparteChat } from './AparteChat.svelte';
 export { createAparteChat } from './stores/aparteChat.js';
-export type { AparteChatStore, AparteChatInstance } from './stores/aparteChat.js';
+export type { AparteChatStore } from './stores/aparteChat.js';
+export type { AparteChatImperativeApi } from '@aparte/core';
 export { createAparteClient } from './stores/aparteClient.js';
 export { createConversationManager } from './stores/conversationManager.js';
 export { default as AparteUi } from './AparteUi.svelte';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGlF,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEhE,YAAY,EACR,aAAa,EACb,qBAAqB,EACrB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACxB,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAK9D,YAAY,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAG5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEhE,YAAY,EACR,aAAa,EACb,qBAAqB,EACrB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACxB,MAAM,YAAY,CAAC"}