@aleph-alpha/chat-kit 1.0.0 → 1.2.0

package/src/handlers/useMarkdownParser.spec.ts

@@ -0,0 +1,112 @@
+import { nextTick, ref } from 'vue';
+import { useMarkdownParser } from './useMarkdownParser';
+import { createTextPlugin } from '../test-utils/createTextPlugin';
+
+describe('useMarkdownParser', () => {
+  it('converts a plain text paragraph to HTML', () => {
+    const source = ref('Hello world');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).toBe('<p>Hello world</p>');
+  });
+
+  it('converts headings and inline formatting', () => {
+    const source = ref('# Title\n\n**bold** and *italic*');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).toContain('<h1>Title</h1>');
+    expect(html.value).toContain('<strong>bold</strong>');
+    expect(html.value).toContain('<em>italic</em>');
+  });
+
+  it('re-computes when the source ref changes', async () => {
+    const source = ref('first');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).toBe('<p>first</p>');
+
+    source.value = 'second';
+    await nextTick();
+
+    expect(html.value).toBe('<p>second</p>');
+  });
+
+  it('returns empty string for empty source', () => {
+    const source = ref('');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).toBe('');
+  });
+
+  it('renders GFM tables', () => {
+    const source = ref('| A | B |\n| --- | --- |\n| 1 | 2 |');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).toContain('<table>');
+    expect(html.value).toContain('<th>A</th>');
+    expect(html.value).toContain('<td>1</td>');
+  });
+
+  it('renders GFM strikethrough', () => {
+    const source = ref('~~deleted~~');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).toContain('<del>deleted</del>');
+  });
+
+  it('renders GFM task list checkboxes', () => {
+    const source = ref('- [x] done\n- [ ] pending');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).toContain('checked=""');
+    expect(html.value).toContain('type="checkbox"');
+  });
+
+  it('auto-links bare URLs', () => {
+    const source = ref('Visit https://example.com for details');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).toContain('<a href="https://example.com">');
+  });
+
+  it('sanitizes script tags', () => {
+    const source = ref('Safe\n\n<script>alert("xss")</script>');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).not.toContain('<script>');
+    expect(html.value).toContain('Safe');
+  });
+
+  it('strips onerror attributes from images', () => {
+    const source = ref('<img src=x onerror=alert(1)>');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).not.toContain('onerror');
+  });
+
+  it('applies a custom plugin', () => {
+    const source = ref('hello world');
+    const plugins = ref([createTextPlugin((t) => t.toUpperCase())]);
+    const { html } = useMarkdownParser(source, plugins);
+
+    expect(html.value).toBe('<p>HELLO WORLD</p>');
+  });
+
+  it('applies multiple plugins in order', () => {
+    const source = ref('hello');
+    const plugins = ref([
+      createTextPlugin((t) => `prefix:${t}`),
+      createTextPlugin((t) => t.toUpperCase()),
+    ]);
+    const { html } = useMarkdownParser(source, plugins);
+
+    expect(html.value).toBe('<p>PREFIX:HELLO</p>');
+  });
+
+  it('works when plugins is undefined', () => {
+    const source = ref('Hello world');
+    const { html } = useMarkdownParser(source, ref(undefined));
+
+    expect(html.value).toBe('<p>Hello world</p>');
+  });
+});

package/src/handlers/useMarkdownParser.ts

@@ -0,0 +1,47 @@
+import { computed, type MaybeRefOrGetter, toValue } from 'vue';
+import { unified, type PluggableList } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import remarkRehype from 'remark-rehype';
+import rehypeStringify from 'rehype-stringify';
+import DOMPurify from 'dompurify';
+
+type SyncProcessor = { processSync: (value: string) => { toString(): string } };
+
+function buildProcessor(plugins: PluggableList): SyncProcessor {
+  let proc = unified().use(remarkParse).use(remarkGfm);
+  for (const plugin of plugins) {
+    proc = proc.use(plugin as any);
+  }
+  return proc.use(remarkRehype).use(rehypeStringify);
+}
+
+export function useMarkdownParser(
+  source: MaybeRefOrGetter<string>,
+  plugins: MaybeRefOrGetter<PluggableList | undefined>,
+) {
+  let cachedPlugins: PluggableList | undefined;
+  let cachedProcessor: SyncProcessor | undefined;
+
+  function getProcessor(list: PluggableList): SyncProcessor {
+    if (list === cachedPlugins) return cachedProcessor!;
+    cachedPlugins = list;
+    cachedProcessor = buildProcessor(list);
+    return cachedProcessor;
+  }
+
+  const html = computed(() => {
+    const markdown = toValue(source);
+    if (!markdown) return '';
+    try {
+      const raw = String(
+        getProcessor(toValue(plugins) ?? []).processSync(markdown),
+      );
+      return DOMPurify.sanitize(raw);
+    } catch {
+      return DOMPurify.sanitize(markdown);
+    }
+  });
+
+  return { html };
+}

package/src/handlers/useMessageHandler.spec.ts

@@ -0,0 +1,535 @@
+import type { ConversationTree, TreeMessage } from '../types';
+import { useMessageHandler } from './useMessageHandler';
+
+function makeTreeMessage(
+  overrides: Partial<TreeMessage> & { id: string },
+): TreeMessage {
+  return {
+    parentId: null,
+    childrenIds: [],
+    activeChildIndex: 0,
+    role: 'user',
+    content: '',
+    status: 'completed',
+    createdAt: new Date('2025-01-01'),
+    ...overrides,
+  };
+}
+
+function makeTree(
+  nodes: Record<string, TreeMessage>,
+  rootId: string,
+): ConversationTree {
+  for (const node of Object.values(nodes)) {
+    node.childrenIds = [];
+  }
+  for (const node of Object.values(nodes)) {
+    if (node.parentId !== null) {
+      const parent = nodes[node.parentId];
+      if (parent) parent.childrenIds.push(node.id);
+    }
+  }
+  for (const node of Object.values(nodes)) {
+    node.activeChildIndex = 0;
+  }
+  return { nodes, rootId };
+}
+
+describe('useMessageHandler', () => {
+  describe('commitUserMessage', () => {
+    it('adds a user message to the map and exposes it in the ordered list', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      const msg = handler.commitUserMessage();
+
+      expect(msg.role).toBe('user');
+      expect(msg.content).toBe('Hello');
+      expect(handler.messages.value).toHaveLength(1);
+      expect(handler.messages.value[0].id).toBe(msg.id);
+    });
+
+    it('appends consecutive messages in order', () => {
+      const handler = useMessageHandler();
+
+      handler.setCurrentUserMessage('First');
+      const first = handler.commitUserMessage();
+
+      handler.setCurrentUserMessage('Second');
+      const second = handler.commitUserMessage();
+
+      expect(handler.messages.value).toHaveLength(2);
+      expect(handler.messages.value[0].id).toBe(first.id);
+      expect(handler.messages.value[1].id).toBe(second.id);
+    });
+
+    it('clears currentUserMessage after commit', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      handler.commitUserMessage();
+
+      expect(handler.currentUserMessage.value).toBe('');
+    });
+
+    it('throws when current message is empty', () => {
+      const handler = useMessageHandler();
+      expect(() => handler.commitUserMessage()).toThrow('No message');
+    });
+
+    it('throws when current message is only whitespace', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('   ');
+      expect(() => handler.commitUserMessage()).toThrow('No message');
+    });
+  });
+
+  describe('updateMessage', () => {
+    it('updates an existing message in place', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      const msg = handler.commitUserMessage();
+
+      handler.updateMessage({
+        id: msg.id,
+        content: 'Updated',
+        role: 'user',
+        status: 'completed',
+      });
+
+      expect(handler.messages.value[0].content).toBe('Updated');
+    });
+
+    it('creates a new node when id does not exist (upsert)', () => {
+      const handler = useMessageHandler();
+      handler.updateMessage({
+        id: 'new-1',
+        content: 'Upserted',
+        role: 'assistant',
+        status: 'completed',
+      });
+
+      expect(handler.messages.value).toHaveLength(1);
+      expect(handler.messages.value[0].content).toBe('Upserted');
+      expect(handler.messages.value[0].id).toBe('new-1');
+    });
+
+    it('upserted message is appended after existing messages', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      handler.commitUserMessage();
+
+      handler.updateMessage({
+        id: 'assistant-1',
+        content: 'Reply',
+        role: 'assistant',
+        status: 'completed',
+      });
+
+      expect(handler.messages.value).toHaveLength(2);
+      expect(handler.messages.value[1].id).toBe('assistant-1');
+      expect(handler.messages.value[1].content).toBe('Reply');
+    });
+
+    it('updates a mid-tree node in place without truncating the path', () => {
+      const handler = useMessageHandler();
+      handler.setTree(
+        makeTree(
+          {
+            u1: makeTreeMessage({ id: 'u1', content: 'First' }),
+            a1: makeTreeMessage({
+              id: 'a1',
+              parentId: 'u1',
+              role: 'assistant',
+              content: 'Reply 1',
+            }),
+            u2: makeTreeMessage({
+              id: 'u2',
+              parentId: 'a1',
+              content: 'Second',
+            }),
+            a2: makeTreeMessage({
+              id: 'a2',
+              parentId: 'u2',
+              role: 'assistant',
+              content: 'Reply 2',
+            }),
+          },
+          'u1',
+        ),
+      );
+
+      handler.updateMessage({
+        id: 'a1',
+        content: 'Regenerated',
+        role: 'assistant',
+        status: 'sending',
+      });
+
+      expect(handler.messages.value).toHaveLength(4);
+      expect(handler.messages.value[1].content).toBe('Regenerated');
+    });
+
+    it('does not truncate when updating the last message', () => {
+      const handler = useMessageHandler();
+      handler.setTree(
+        makeTree(
+          {
+            u1: makeTreeMessage({ id: 'u1', content: 'Hello' }),
+            a1: makeTreeMessage({
+              id: 'a1',
+              parentId: 'u1',
+              role: 'assistant',
+              content: 'Hi',
+            }),
+          },
+          'u1',
+        ),
+      );
+
+      handler.updateMessage({
+        id: 'a1',
+        content: 'Streaming...',
+        role: 'assistant',
+        status: 'sending',
+      });
+
+      expect(handler.messages.value).toHaveLength(2);
+      expect(handler.messages.value[1].content).toBe('Streaming...');
+    });
+  });
+
+  describe('getMessageById', () => {
+    it('returns the message for a known id', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      const msg = handler.commitUserMessage();
+
+      const found = handler.getMessageById(msg.id);
+      expect(found).toBeDefined();
+      expect(found?.id).toBe(msg.id);
+      expect(found?.content).toBe('Hello');
+      expect(found?.role).toBe('user');
+    });
+
+    it('returns undefined for an unknown id', () => {
+      const handler = useMessageHandler();
+      expect(handler.getMessageById('nonexistent')).toBeUndefined();
+    });
+  });
+
+  describe('updateMessageId', () => {
+    it('renames the id of an existing message', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      const msg = handler.commitUserMessage();
+      const oldId = msg.id;
+
+      handler.updateMessageId(oldId, 'new-id');
+
+      expect(handler.messages.value[0].id).toBe('new-id');
+      expect(handler.getMessageById('new-id')).toBeDefined();
+      expect(handler.getMessageById(oldId)).toBeUndefined();
+    });
+
+    it('preserves all other message fields', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      const msg = handler.commitUserMessage();
+      const { role, content, status, createdAt } = msg;
+
+      handler.updateMessageId(msg.id, 'renamed');
+
+      const renamed = handler.getMessageById('renamed');
+      expect(renamed?.role).toBe(role);
+      expect(renamed?.content).toBe(content);
+      expect(renamed?.status).toBe(status);
+      expect(renamed?.createdAt).toEqual(createdAt);
+    });
+
+    it('keeps the message at the same position in the list', () => {
+      const handler = useMessageHandler();
+      handler.setTree(
+        makeTree(
+          {
+            a: makeTreeMessage({ id: 'a', content: 'A' }),
+            b: makeTreeMessage({
+              id: 'b',
+              parentId: 'a',
+              role: 'assistant',
+              content: 'B',
+            }),
+            c: makeTreeMessage({ id: 'c', parentId: 'b', content: 'C' }),
+          },
+          'a',
+        ),
+      );
+
+      handler.updateMessageId('b', 'b-renamed');
+
+      expect(handler.messages.value.map((m) => m.id)).toEqual([
+        'a',
+        'b-renamed',
+        'c',
+      ]);
+    });
+
+    it('is a no-op when oldId does not exist', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      handler.commitUserMessage();
+
+      handler.updateMessageId('nonexistent', 'whatever');
+
+      expect(handler.messages.value).toHaveLength(1);
+      expect(handler.getMessageById('whatever')).toBeUndefined();
+    });
+  });
+
+  describe('clearMessages', () => {
+    it('empties all state', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      handler.commitUserMessage();
+      handler.updateMessage({
+        id: 'a1',
+        content: 'Reply',
+        role: 'assistant',
+        status: 'completed',
+      });
+
+      handler.clearMessages();
+
+      expect(handler.messages.value).toHaveLength(0);
+      expect(handler.getMessageById('a1')).toBeUndefined();
+    });
+  });
+
+  describe('setCurrentUserMessage / clearCurrentUserMessage', () => {
+    it('sets and clears the current user message', () => {
+      const handler = useMessageHandler();
+
+      handler.setCurrentUserMessage('Draft');
+      expect(handler.currentUserMessage.value).toBe('Draft');
+
+      handler.clearCurrentUserMessage();
+      expect(handler.currentUserMessage.value).toBe('');
+    });
+  });
+
+  describe('messages computed', () => {
+    it('returns messages in root-to-leaf order', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('One');
+      handler.commitUserMessage();
+
+      handler.updateMessage({
+        id: 'a1',
+        content: 'Reply 1',
+        role: 'assistant',
+        status: 'completed',
+      });
+
+      handler.setCurrentUserMessage('Two');
+      handler.commitUserMessage();
+
+      handler.updateMessage({
+        id: 'a2',
+        content: 'Reply 2',
+        role: 'assistant',
+        status: 'completed',
+      });
+
+      const roles = handler.messages.value.map((m) => m.role);
+      expect(roles).toEqual(['user', 'assistant', 'user', 'assistant']);
+
+      const contents = handler.messages.value.map((m) => m.content);
+      expect(contents).toEqual(['One', 'Reply 1', 'Two', 'Reply 2']);
+    });
+
+    it('updates reactively when a message is added', () => {
+      const handler = useMessageHandler();
+      expect(handler.messages.value).toHaveLength(0);
+
+      handler.setCurrentUserMessage('Hello');
+      handler.commitUserMessage();
+      expect(handler.messages.value).toHaveLength(1);
+
+      handler.updateMessage({
+        id: 'a1',
+        content: 'Hi',
+        role: 'assistant',
+        status: 'completed',
+      });
+      expect(handler.messages.value).toHaveLength(2);
+    });
+  });
+
+  describe('setTree', () => {
+    it('replaces the tree and exposes correct flat messages', () => {
+      const handler = useMessageHandler();
+      handler.setTree(
+        makeTree(
+          {
+            u1: makeTreeMessage({ id: 'u1', content: 'Hello' }),
+            a1: makeTreeMessage({
+              id: 'a1',
+              parentId: 'u1',
+              role: 'assistant',
+              content: 'Hi',
+            }),
+          },
+          'u1',
+        ),
+      );
+
+      expect(handler.messages.value).toHaveLength(2);
+      expect(handler.messages.value.map((m) => m.id)).toEqual(['u1', 'a1']);
+    });
+
+    it('preserves branching from incoming tree', () => {
+      const handler = useMessageHandler();
+      handler.setTree(
+        makeTree(
+          {
+            r: makeTreeMessage({ id: 'r' }),
+            a: makeTreeMessage({
+              id: 'a',
+              parentId: 'r',
+              role: 'assistant',
+              content: 'A',
+            }),
+            b: makeTreeMessage({
+              id: 'b',
+              parentId: 'r',
+              role: 'assistant',
+              content: 'B',
+            }),
+          },
+          'r',
+        ),
+      );
+
+      const first = handler.messages.value.find((m) => m.id === 'a')!;
+      expect(first.siblingIds).toEqual(['a', 'b']);
+    });
+  });
+
+  describe('navigate', () => {
+    it('switches the visible path to a different branch', () => {
+      const handler = useMessageHandler();
+      handler.setTree(
+        makeTree(
+          {
+            u1: makeTreeMessage({ id: 'u1', content: 'Hello' }),
+            a1: makeTreeMessage({
+              id: 'a1',
+              parentId: 'u1',
+              role: 'assistant',
+              content: 'Hi',
+            }),
+            a2: makeTreeMessage({
+              id: 'a2',
+              parentId: 'u1',
+              role: 'assistant',
+              content: 'Hey',
+            }),
+            u2: makeTreeMessage({
+              id: 'u2',
+              parentId: 'a2',
+              content: 'Follow-up',
+            }),
+          },
+          'u1',
+        ),
+      );
+
+      expect(handler.messages.value.map((m) => m.id)).toEqual(['u1', 'a1']);
+
+      handler.navigate('a2');
+
+      expect(handler.messages.value.map((m) => m.id)).toEqual([
+        'u1',
+        'a2',
+        'u2',
+      ]);
+      expect(handler.currentLeafId.value).toBe('u2');
+    });
+
+    it('exposes sibling metadata on branched messages', () => {
+      const handler = useMessageHandler();
+      handler.setTree(
+        makeTree(
+          {
+            u1: makeTreeMessage({ id: 'u1', content: 'Hello' }),
+            a1: makeTreeMessage({
+              id: 'a1',
+              parentId: 'u1',
+              role: 'assistant',
+              content: 'Hi',
+            }),
+            a2: makeTreeMessage({
+              id: 'a2',
+              parentId: 'u1',
+              role: 'assistant',
+              content: 'Hey',
+            }),
+          },
+          'u1',
+        ),
+      );
+
+      const a1Msg = handler.messages.value.find((m) => m.id === 'a1')!;
+      expect(a1Msg.siblingIds).toEqual(['a1', 'a2']);
+      expect(a1Msg.siblingIndex).toBe(0);
+    });
+  });
+
+  describe('currentLeafId', () => {
+    it('is null when there are no messages', () => {
+      const handler = useMessageHandler();
+      expect(handler.currentLeafId.value).toBeNull();
+    });
+
+    it('returns the id of the last message on the active path', () => {
+      const handler = useMessageHandler();
+      handler.setCurrentUserMessage('Hello');
+      const msg = handler.commitUserMessage();
+
+      expect(handler.currentLeafId.value).toBe(msg.id);
+    });
+
+    it('updates after navigate', () => {
+      const handler = useMessageHandler();
+      handler.setTree(
+        makeTree(
+          {
+            u1: makeTreeMessage({ id: 'u1', content: 'Hello' }),
+            a1: makeTreeMessage({
+              id: 'a1',
+              parentId: 'u1',
+              role: 'assistant',
+              content: 'Hi',
+            }),
+            a2: makeTreeMessage({
+              id: 'a2',
+              parentId: 'u1',
+              role: 'assistant',
+              content: 'Hey',
+            }),
+            u2: makeTreeMessage({
+              id: 'u2',
+              parentId: 'a2',
+              content: 'Follow-up',
+            }),
+          },
+          'u1',
+        ),
+      );
+
+      expect(handler.currentLeafId.value).toBe('a1');
+
+      handler.navigate('a2');
+
+      expect(handler.currentLeafId.value).toBe('u2');
+    });
+  });
+});