@aleph-alpha/chat-kit 6.1.1 → 6.3.0

package/dist/{useMessageHandler-Tellov3w.js → useMessageHandler-nnsort0-.js}

@@ -1,4 +1,4 @@
-import { g as generateId } from "./generateId-BHf0W4Rq.js";
+import { g as generateId } from "./markdownToPlainText-BOtlQ_BY.js";
 import { reactive, ref, computed, readonly } from "vue";
 function createEmptyTree() {
   return { nodes: {}, rootId: null };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "6.1.1",
+  "version": "6.3.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -68,7 +68,9 @@
   },
   "dependencies": {
     "@aleph-alpha/ui-library": "^6.0.0",
+    "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.11.0",
+    "@codemirror/language-data": "^6.5.2",
     "@codemirror/state": "^6.5.0",
     "@codemirror/view": "^6.38.0",
     "@lezer/highlight": "^1.2.0",
@@ -113,9 +115,9 @@
     "vue": "^3.5.27",
     "vue-tsc": "^3.2.4",
     "wait-on": "9.0.3",
-    "@aleph-alpha/eslint-config-frontend": "0.7.1",
+    "@aleph-alpha/prettier-config-frontend": "2.1.1",
     "@aleph-alpha/tsconfig-frontend": "0.7.3",
-    "@aleph-alpha/prettier-config-frontend": "2.1.1"
+    "@aleph-alpha/eslint-config-frontend": "0.7.1"
   },
   "scripts": {
     "build": "vite build && vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist",

package/src/components/base/CkCodeEditor/CkCodeEditor.spec.ts

@@ -0,0 +1,223 @@
+import { render, screen, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import CkCodeEditor from './CkCodeEditor.vue';
+import { resolveLanguage } from './createCodeMirror';
+
+// CodeMirror measures its own layout on construction; jsdom has none of the
+// geometry APIs it calls. The stubs stay in this spec rather than the global
+// setup so every other spec keeps an unmodified jsdom.
+const EMPTY_RECT = {
+  x: 0,
+  y: 0,
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: 0,
+  height: 0,
+  toJSON: () => ({}),
+} as DOMRect;
+
+beforeAll(() => {
+  Range.prototype.getBoundingClientRect = () => EMPTY_RECT;
+  Range.prototype.getClientRects = () =>
+    ({
+      length: 0,
+      item: () => null,
+      *[Symbol.iterator]() {
+        // no rects
+      },
+    }) as unknown as DOMRectList;
+  Element.prototype.scrollIntoView ??= () => undefined;
+  document.elementFromPoint ??= () => null;
+});
+
+async function renderEditor(
+  props: InstanceType<typeof CkCodeEditor>['$props'] = {},
+) {
+  const utils = render(CkCodeEditor, { props });
+  // The editor loads lazily, so wait for the ready flag rather than the shell.
+  await waitFor(() =>
+    expect(
+      utils.container.querySelector('.ck-code-editor--ready .cm-editor'),
+    ).toBeInTheDocument(),
+  );
+  return utils;
+}
+
+describe('CkCodeEditor', () => {
+  it('renders the initial code', async () => {
+    const { container } = await renderEditor({
+      modelValue: 'const answer = 42;',
+      language: 'javascript',
+    });
+
+    expect(container.querySelector('.cm-content')?.textContent).toContain(
+      'const answer = 42;',
+    );
+  });
+
+  it('emits the new document when the user types', async () => {
+    const { emitted } = await renderEditor({ modelValue: '' });
+
+    const content = document.querySelector('.cm-content') as HTMLElement;
+    await userEvent.click(content);
+    await userEvent.type(content, 'hi');
+
+    await waitFor(() => expect(emitted()['update:modelValue']).toBeTruthy());
+    const updates = emitted()['update:modelValue'] as string[][];
+    expect(updates.at(-1)?.[0]).toBe('hi');
+  });
+
+  it('applies an external modelValue change without echoing it back', async () => {
+    const { container, rerender, emitted } = await renderEditor({
+      modelValue: 'one',
+    });
+
+    await rerender({ modelValue: 'two' });
+
+    await waitFor(() =>
+      expect(container.querySelector('.cm-content')?.textContent).toContain(
+        'two',
+      ),
+    );
+    const updates = (emitted()['update:modelValue'] ?? []) as string[][];
+    expect(updates.map(([value]) => value)).not.toContain('two');
+  });
+
+  it('drops contenteditable when readonly, and restores it', async () => {
+    const { container, rerender } = await renderEditor({
+      modelValue: 'x',
+      readonly: true,
+    });
+
+    const content = () => container.querySelector('.cm-content');
+    expect(content()?.getAttribute('contenteditable')).toBe('false');
+
+    await rerender({ modelValue: 'x', readonly: false });
+    await waitFor(() =>
+      expect(content()?.getAttribute('contenteditable')).toBe('true'),
+    );
+  });
+
+  it('marks the root disabled and locks editing with `disabled`', async () => {
+    const { container } = await renderEditor({
+      modelValue: 'x',
+      disabled: true,
+    });
+
+    expect(
+      container.querySelector('.ck-code-editor')?.getAttribute('aria-disabled'),
+    ).toBe('true');
+    expect(
+      container.querySelector('.cm-content')?.getAttribute('contenteditable'),
+    ).toBe('false');
+  });
+
+  it('names the editable region for assistive tech', async () => {
+    const { container } = await renderEditor({
+      modelValue: 'x',
+      ariaLabel: 'Snippet',
+    });
+
+    const textbox = container.querySelector('[role="textbox"]');
+    expect(textbox).toBe(container.querySelector('.cm-content'));
+    expect(textbox?.getAttribute('aria-label')).toBe('Snippet');
+  });
+
+  it('shows the filename in the header when there is one', async () => {
+    await renderEditor({
+      modelValue: 'x',
+      language: 'python',
+      filename: 'main.py',
+    });
+
+    expect(screen.getByText('main.py')).toBeInTheDocument();
+    expect(screen.queryByText('python')).not.toBeInTheDocument();
+  });
+
+  it('falls back to the language, and labels plain text with nothing', async () => {
+    const withLanguage = await renderEditor({
+      modelValue: 'x',
+      language: 'python',
+    });
+    expect(screen.getByText('python')).toBeInTheDocument();
+    withLanguage.unmount();
+
+    // `text` is the "no language" value, which UiCodeBlock also leaves blank.
+    await renderEditor({ modelValue: 'x', language: 'text' });
+    expect(screen.queryByText('text')).not.toBeInTheDocument();
+  });
+
+  it('copies the current code through the injected writer', async () => {
+    const writeToClipboard = vi.fn().mockResolvedValue(undefined);
+    const { emitted } = await renderEditor({
+      modelValue: 'copy me',
+      writeToClipboard,
+    });
+
+    await userEvent.click(screen.getByRole('button', { name: 'Copy code' }));
+
+    expect(writeToClipboard).toHaveBeenCalledWith('copy me');
+    await waitFor(() => expect(emitted().copy).toEqual([[{ success: true }]]));
+  });
+
+  it('reports a failed copy rather than throwing', async () => {
+    const writeToClipboard = vi.fn().mockRejectedValue(new Error('denied'));
+    const { emitted } = await renderEditor({
+      modelValue: 'x',
+      writeToClipboard,
+    });
+
+    await userEvent.click(screen.getByRole('button', { name: 'Copy code' }));
+
+    await waitFor(() => expect(emitted().copy).toEqual([[{ success: false }]]));
+  });
+
+  it('hides the header when asked', async () => {
+    const { container } = await renderEditor({
+      modelValue: 'x',
+      language: 'python',
+      showHeader: false,
+    });
+
+    expect(container.querySelector('button')).toBeNull();
+    expect(screen.queryByText('python')).not.toBeInTheDocument();
+  });
+
+  it('toggles the line-number gutter', async () => {
+    const { container, rerender } = await renderEditor({
+      modelValue: 'a\nb',
+      showLineNumbers: true,
+    });
+
+    expect(container.querySelector('.cm-lineNumbers')).toBeInTheDocument();
+
+    await rerender({ modelValue: 'a\nb', showLineNumbers: false });
+    await waitFor(() =>
+      expect(container.querySelector('.cm-lineNumbers')).toBeNull(),
+    );
+  });
+
+  it('does not throw when unmounted before or after the editor is created', async () => {
+    const early = render(CkCodeEditor, { props: { modelValue: 'x' } });
+    expect(() => early.unmount()).not.toThrow();
+
+    const late = await renderEditor({ modelValue: 'y' });
+    expect(() => late.unmount()).not.toThrow();
+  });
+});
+
+describe('resolveLanguage', () => {
+  it('resolves by name, alias and extension, ignoring case', async () => {
+    await expect(resolveLanguage('TypeScript')).resolves.toBeTruthy();
+    await expect(resolveLanguage('ts')).resolves.toBeTruthy();
+    await expect(resolveLanguage('py')).resolves.toBeTruthy();
+  });
+
+  it('returns null for plain text and unknown languages', async () => {
+    await expect(resolveLanguage('text')).resolves.toBeNull();
+    await expect(resolveLanguage('')).resolves.toBeNull();
+    await expect(resolveLanguage('not-a-language')).resolves.toBeNull();
+  });
+});

package/src/components/base/CkCodeEditor/CkCodeEditor.stories.ts

@@ -0,0 +1,311 @@
+import { ref } from 'vue';
+import { UiCodeBlock } from '@aleph-alpha/ui-library';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import CkCodeEditor from './CkCodeEditor.vue';
+import CkMarkdownRenderer from '../CkMarkdownRenderer/CkMarkdownRenderer.vue';
+
+const meta: Meta<typeof CkCodeEditor> = {
+  title: 'Base/CkCodeEditor',
+  component: CkCodeEditor,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: { control: 'text', description: 'The code (`v-model`).' },
+    language: {
+      control: 'text',
+      description:
+        'Language id for highlighting and the header label, matched on names, aliases and extensions.',
+    },
+    filename: {
+      control: 'text',
+      description: 'Shown in the header instead of the language.',
+    },
+    maxHeight: {
+      control: 'text',
+      description: 'CSS length capping the scrollable area, e.g. `24rem`.',
+    },
+    placeholder: { control: 'text' },
+    readonly: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    showHeader: { control: 'boolean' },
+    showCopyButton: { control: 'boolean' },
+    showLineNumbers: { control: 'boolean' },
+    lineWrapping: { control: 'boolean' },
+    autofocus: { control: 'boolean' },
+    writeToClipboard: {
+      control: false,
+      description:
+        'Clipboard writer for tests or hosts that proxy clipboard access.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const typescriptSample = [
+  'export interface Greeting {',
+  '  name: string;',
+  '  formal?: boolean;',
+  '}',
+  '',
+  '// Returns a greeting suited to the audience.',
+  'export function greet({ name, formal = false }: Greeting): string {',
+  '  const opener = formal ? "Good day" : "Hello";',
+  '  return `${opener}, ${name}!`;',
+  '}',
+].join('\n');
+
+const pythonSample = [
+  'from dataclasses import dataclass',
+  '',
+  '',
+  '@dataclass',
+  'class Greeting:',
+  '    name: str',
+  '    formal: bool = False',
+  '',
+  '    def render(self) -> str:',
+  '        opener = "Good day" if self.formal else "Hello"',
+  '        return f"{opener}, {self.name}!"',
+].join('\n');
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue';
+import { CkCodeEditor } from '@aleph-alpha/chat-kit';
+
+const code = ref('export const answer = 42;');
+</script>
+
+<template>
+  <CkCodeEditor v-model="code" language="typescript" aria-label="Code" />
+</template>`;
+
+const withFilenameTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue';
+import { CkCodeEditor } from '@aleph-alpha/chat-kit';
+
+const code = ref('print("hello")');
+</script>
+
+<template>
+  <CkCodeEditor
+    v-model="code"
+    language="python"
+    filename="main.py"
+    aria-label="main.py"
+  />
+</template>`;
+
+const plainTextTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue';
+import { CkCodeEditor } from '@aleph-alpha/chat-kit';
+
+const notes = ref('');
+</script>
+
+<template>
+  <CkCodeEditor
+    v-model="notes"
+    placeholder="Paste your snippet…"
+    :show-line-numbers="false"
+    aria-label="Snippet"
+  />
+</template>`;
+
+const readonlyTemplateSource = `<script setup lang="ts">
+import { CkCodeEditor } from '@aleph-alpha/chat-kit';
+
+const code = 'export const answer = 42;';
+</script>
+
+<template>
+  <CkCodeEditor :model-value="code" language="typescript" readonly aria-label="Code" />
+</template>`;
+
+const bareTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue';
+import { CkCodeEditor } from '@aleph-alpha/chat-kit';
+
+const code = ref('SELECT * FROM users;');
+</script>
+
+<template>
+  <CkCodeEditor
+    v-model="code"
+    language="sql"
+    :show-header="false"
+    aria-label="Query"
+  />
+</template>`;
+
+const scrollingTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue';
+import { CkCodeEditor } from '@aleph-alpha/chat-kit';
+
+const code = ref(longFile);
+</script>
+
+<template>
+  <CkCodeEditor v-model="code" language="typescript" max-height="16rem" line-wrapping />
+</template>`;
+
+const matchesRendererTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue';
+import { CkCodeEditor, CkMarkdownRenderer } from '@aleph-alpha/chat-kit';
+import { UiCodeBlock } from '@aleph-alpha/ui-library';
+
+const code = ref('export const answer = 42;');
+const asMarkdown = computed(() => '\\\`\\\`\\\`typescript\\n' + code.value + '\\n\\\`\\\`\\\`');
+</script>
+
+<template>
+  <div class="text-content-on-surface-primary grid gap-6 text-base leading-7 md:grid-cols-2">
+    <CkCodeEditor v-model="code" language="typescript" aria-label="Editor" />
+    <CkMarkdownRenderer :content="asMarkdown">
+      <template #code-block="{ code: c, language }">
+        <UiCodeBlock :code="c" :language="language || 'text'" />
+      </template>
+    </CkMarkdownRenderer>
+  </div>
+</template>`;
+
+/**
+ * A TypeScript snippet with the header, copy button and line numbers. Type in
+ * it — changes are emitted synchronously, with no debounce.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { CkCodeEditor },
+    setup() {
+      const code = ref(args.modelValue ?? '');
+      return { args, code };
+    },
+    template: `<CkCodeEditor v-bind="args" v-model="code" aria-label="Code" />`,
+  }),
+  args: { modelValue: typescriptSample, language: 'typescript' },
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * `filename` replaces the language in the header, matching the prop of the same
+ * name on `UiCodeBlock`. The grammar still comes from `language`.
+ */
+export const WithFilename: Story = {
+  render: (args) => ({
+    components: { CkCodeEditor },
+    setup() {
+      const code = ref(args.modelValue ?? '');
+      return { args, code };
+    },
+    template: `<CkCodeEditor v-bind="args" v-model="code" aria-label="main.py" />`,
+  }),
+  args: { modelValue: pythonSample, language: 'python', filename: 'main.py' },
+  parameters: { docs: { source: { code: withFilenameTemplateSource } } },
+};
+
+/**
+ * With no language the header label is blank and nothing is highlighted, the
+ * same treatment `UiCodeBlock` gives plain text. Shown here with a placeholder
+ * and no gutter, as a lightweight snippet field.
+ */
+export const PlainText: Story = {
+  render: (args) => ({
+    components: { CkCodeEditor },
+    setup() {
+      const code = ref(args.modelValue ?? '');
+      return { args, code };
+    },
+    template: `<CkCodeEditor v-bind="args" v-model="code" aria-label="Snippet" />`,
+  }),
+  args: {
+    modelValue: '',
+    placeholder: 'Paste your snippet…',
+    showLineNumbers: false,
+  },
+  parameters: { docs: { source: { code: plainTextTemplateSource } } },
+};
+
+/**
+ * `readonly` keeps the code selectable and copyable but drops the caret and the
+ * active-line band. Use it while a request is in flight.
+ */
+export const Readonly: Story = {
+  args: {
+    modelValue: typescriptSample,
+    language: 'typescript',
+    readonly: true,
+  },
+  parameters: { docs: { source: { code: readonlyTemplateSource } } },
+};
+
+/**
+ * `showHeader: false` gives a bare editing surface, for forms that already
+ * label the field themselves.
+ */
+export const WithoutHeader: Story = {
+  args: {
+    modelValue: 'SELECT id, email\nFROM users\nWHERE active = true;',
+    language: 'sql',
+    showHeader: false,
+  },
+  parameters: { docs: { source: { code: bareTemplateSource } } },
+};
+
+/**
+ * `maxHeight` caps the scrollable area and `lineWrapping` folds long lines
+ * instead of scrolling sideways.
+ */
+export const ScrollingAndWrapping: Story = {
+  render: (args) => ({
+    components: { CkCodeEditor },
+    setup() {
+      const code = ref(args.modelValue ?? '');
+      return { args, code };
+    },
+    template: `<CkCodeEditor v-bind="args" v-model="code" aria-label="Long file" />`,
+  }),
+  args: {
+    modelValue: [
+      typescriptSample,
+      '',
+      '// A deliberately long line that has to wrap rather than scroll sideways, so you can see how lineWrapping behaves in a narrow column.',
+      '',
+      pythonSample,
+    ].join('\n'),
+    language: 'typescript',
+    maxHeight: '16rem',
+    lineWrapping: true,
+  },
+  parameters: { docs: { source: { code: scrollingTemplateSource } } },
+};
+
+/**
+ * Parity check: the editor on the left, the same snippet rendered through
+ * `CkMarkdownRenderer` and `UiCodeBlock` on the right. Border, radius, header,
+ * font and syntax colours should read as one component in both themes.
+ */
+export const MatchesTheRenderer: Story = {
+  render: (args) => ({
+    components: { CkCodeEditor, CkMarkdownRenderer, UiCodeBlock },
+    setup() {
+      const code = ref(args.modelValue ?? '');
+      return { args, code };
+    },
+    template: `
+      <div class="text-content-on-surface-primary grid gap-6 text-base leading-7 md:grid-cols-2">
+        <CkCodeEditor v-bind="args" v-model="code" aria-label="Editor" />
+        <CkMarkdownRenderer :content="'\\\`\\\`\\\`typescript\\n' + code + '\\n\\\`\\\`\\\`'">
+          <template #code-block="{ code: c, language }">
+            <UiCodeBlock :code="c" :language="language || 'text'" />
+          </template>
+        </CkMarkdownRenderer>
+      </div>
+    `,
+  }),
+  args: {
+    modelValue: typescriptSample,
+    language: 'typescript',
+    showLineNumbers: false,
+  },
+  parameters: { docs: { source: { code: matchesRendererTemplateSource } } },
+};