@aleph-alpha/chat-kit 6.1.1 → 6.3.0

package/src/components/base/CkMilkdownEditor/milkdown-theme.css

@@ -49,36 +49,12 @@
   --crepe-shadow-1: var(--shadow-md);
   --crepe-shadow-2: var(--shadow-lg);
 
-  /* CodeMirror palette ≈ Shiki `github-light` (what UiCodeBlock renders). */
-  --ck-cm-bg: #ffffff;
-  --ck-cm-foreground: #24292f;
-  --ck-cm-keyword: #cf222e;
-  --ck-cm-string: #0a3069;
-  --ck-cm-comment: #6e7781;
-  --ck-cm-function: #8250df;
-  --ck-cm-constant: #0550ae;
-  /* UiCodeBlock rewrites Shiki's orange entity colour to the primary text token. */
-  --ck-cm-entity: oklch(var(--content-on-surface-primary));
-  --ck-cm-tag: #116329;
-  --ck-cm-error: #82071e;
-  --ck-cm-selection: oklch(var(--background-accent-soft));
+  /* The `--ck-cm-*` syntax palette comes from the shared `code-palette.css`
+   * via the `ck-code-surface` class on this same root. */
 
   position: relative;
 }
 
-/* CodeMirror palette ≈ Shiki `github-dark`. */
-html.dark .ck-milkdown {
-  --ck-cm-bg: #24292e;
-  --ck-cm-foreground: #c9d1d9;
-  --ck-cm-keyword: #ff7b72;
-  --ck-cm-string: #a5d6ff;
-  --ck-cm-comment: #8b949e;
-  --ck-cm-function: #d2a8ff;
-  --ck-cm-constant: #79c0ff;
-  --ck-cm-tag: #7ee787;
-  --ck-cm-error: #ffa198;
-}
-
 /* ------------------------------------------------------------------------ */
 /* Minimal reset (replaces Crepe's reset.css)                                */
 /* ------------------------------------------------------------------------ */
@@ -407,10 +383,47 @@ html.dark .ck-milkdown {
   color: var(--ck-cm-foreground);
 }
 
+/* Line-number gutter. CodeMirror's `basicSetup` (which Crepe always loads)
+ * always renders it, so `showLineNumbers` only toggles this class — no
+ * reconfiguration, and the change applies to code blocks already on screen.
+ * Hidden by default to match `UiCodeBlock`, whose `showLineNumbers` is also
+ * false by default, so a document reads the same in the editor and in
+ * `CkMarkdownRenderer`. */
 .ck-milkdown .milkdown .milkdown-code-block .cm-gutters {
   display: none;
 }
 
+.ck-milkdown--line-numbers .milkdown .milkdown-code-block .cm-gutters {
+  display: flex;
+}
+
+/* `basicSetup` also installs a code-folding gutter. Its chevrons are noise in
+ * a prose editor and have no counterpart in `UiCodeBlock`, so only the numbers
+ * are ever shown. `!important` is required because CodeMirror's own base theme
+ * declares `.cm-gutter { display: flex !important }`, which no amount of
+ * specificity can outrank. Crepe always passes `basicSetup`, so the extension
+ * cannot simply be left out. */
+.ck-milkdown .milkdown .milkdown-code-block .cm-foldGutter {
+  display: none !important;
+}
+
+.ck-milkdown--line-numbers
+  .milkdown
+  .milkdown-code-block
+  .cm-lineNumbers
+  .cm-gutterElement {
+  min-width: 2.25rem;
+  padding: 0 0.75rem 0 1rem;
+  color: oklch(var(--content-on-surface-muted));
+  text-align: right;
+}
+
+/* The gutter supplies the left inset once it is visible, so the code itself
+ * should not pay for it twice. */
+.ck-milkdown--line-numbers .milkdown .milkdown-code-block .cm-content {
+  padding-left: 0;
+}
+
 /* Shown while the CodeMirror instance is still mounting. */
 .ck-milkdown .milkdown .milkdown-code-block .milkdown-code-block-placeholder {
   margin: 0;

package/src/components/base/CkMilkdownEditor/types.ts

@@ -71,6 +71,14 @@ export interface CkMilkdownEditorProps {
    * @default false
    */
   autofocus?: boolean;
+  /**
+   * Show a line-number gutter on fenced code blocks. Matches the prop of the
+   * same name on `UiCodeBlock`, so one flag can drive the editor and the
+   * rendered message alike. Applies to code blocks already on screen.
+   *
+   * @default false
+   */
+  showLineNumbers?: boolean;
 }
 
 /** Events emitted by {@link CkMilkdownEditor}. */

package/src/components/base/index.ts

@@ -86,3 +86,9 @@ export type {
   CkMilkdownEditorExposed,
   CkMilkdownEditorProps,
 } from './CkMilkdownEditor';
+export { CkCodeEditor } from './CkCodeEditor';
+export type {
+  CkCodeEditorEmits,
+  CkCodeEditorExposed,
+  CkCodeEditorProps,
+} from './CkCodeEditor';

package/src/components/index.ts

@@ -28,6 +28,7 @@ export {
   CkUserMessage,
   CkEditableUserMessage,
   CkMilkdownEditor,
+  CkCodeEditor,
 } from './base';
 export type {
   CkAgentMessageHeaderProps,
@@ -70,6 +71,9 @@ export type {
   CkMilkdownEditorEmits,
   CkMilkdownEditorExposed,
   CkMilkdownEditorProps,
+  CkCodeEditorEmits,
+  CkCodeEditorExposed,
+  CkCodeEditorProps,
 } from './base';
 
 // Composed (pattern) components

package/src/handlers/useChatKitLabels.ts

@@ -111,6 +111,10 @@ export type ChatKitLabels = {
    * set and more conversations exist than the limit.
    */
   historyShowAll?: string;
+  /** Accessible name of the copy button in the `CkCodeEditor` header. */
+  codeEditorCopy?: string;
+  /** Accessible name of the `CkCodeEditor` copy button just after a copy. */
+  codeEditorCopied?: string;
   /** Accessible name of the "Bold" button in the `CkMilkdownEditor` toolbar. */
   markdownEditorBold?: string;
   /** Accessible name of the "Italic" button in the `CkMilkdownEditor` toolbar. */
@@ -168,6 +172,8 @@ export const defaultChatKitLabels = {
   historyItemEditAction: 'Edit',
   historyItemDeleteAction: 'Delete',
   historyShowAll: 'Show all',
+  codeEditorCopy: 'Copy code',
+  codeEditorCopied: 'Copied',
   markdownEditorBold: 'Bold',
   markdownEditorItalic: 'Italic',
   markdownEditorStrikethrough: 'Strikethrough',

package/src/helpers/codemirror/code-palette.css

@@ -0,0 +1,49 @@
+/*
+ * Syntax palette shared by every CodeMirror surface in chat-kit — the code
+ * blocks inside `CkMilkdownEditor` and the standalone `CkCodeEditor`.
+ *
+ * The values are Shiki's `github-light` and `github-dark`, which is what
+ * `UiCodeBlock` renders inside `CkMarkdownRenderer`, read off a rendered block
+ * rather than copied from memory. A snippet therefore keeps its colours whether
+ * it is being read or edited. `theme.ts` maps CodeMirror's syntax tags onto
+ * these variables; nothing else should hardcode a code colour.
+ *
+ * Apply `.ck-code-surface` to the root of any component hosting a CodeMirror
+ * instance. The dark values follow `html.dark`, matching how `UiCodeBlock`
+ * switches its own Shiki theme.
+ *
+ * Exact parity is not achievable for every token: Shiki classifies with
+ * TextMate grammars and CodeMirror with Lezer, and the two disagree at the
+ * edges. The mapping in `theme.ts` targets the classes that actually occur in
+ * everyday code.
+ */
+
+.ck-code-surface {
+  --ck-cm-bg: #ffffff;
+  --ck-cm-foreground: #24292e;
+  --ck-cm-keyword: #d73a49;
+  --ck-cm-string: #032f62;
+  --ck-cm-comment: #6a737d;
+  /* Declared functions, classes and interfaces. */
+  --ck-cm-function: #6f42c1;
+  /* Built-in types, literals and plain variables. */
+  --ck-cm-constant: #005cc5;
+  /* `UiCodeBlock` rewrites Shiki's orange (#e36209 / #ffab70) to the primary
+   * text token, which is what declared property names end up as. */
+  --ck-cm-property: oklch(var(--content-on-surface-primary));
+  --ck-cm-tag: #22863a;
+  --ck-cm-error: #b31d28;
+  --ck-cm-selection: oklch(var(--background-accent-soft));
+}
+
+html.dark .ck-code-surface {
+  --ck-cm-bg: #24292e;
+  --ck-cm-foreground: #e1e4e8;
+  --ck-cm-keyword: #f97583;
+  --ck-cm-string: #9ecbff;
+  --ck-cm-comment: #6a737d;
+  --ck-cm-function: #b392f0;
+  --ck-cm-constant: #79b8ff;
+  --ck-cm-tag: #85e89d;
+  --ck-cm-error: #fdaeb7;
+}

package/src/{components/base/CkMilkdownEditor/codeMirrorTheme.ts → helpers/codemirror/theme.ts}

@@ -21,6 +21,7 @@ const cssVar = (name: string): string => `var(--ck-cm-${name})`;
  * editor and in `CkMarkdownRenderer`.
  */
 export const ckHighlightStyle = HighlightStyle.define([
+  // Keywords, and the operators GitHub colours like keywords (`=`, `:`).
   {
     tag: [
       t.keyword,
@@ -29,6 +30,7 @@ export const ckHighlightStyle = HighlightStyle.define([
       t.definitionKeyword,
       t.moduleKeyword,
       t.operatorKeyword,
+      t.operator,
     ],
     color: cssVar('keyword'),
   },
@@ -40,14 +42,20 @@ export const ckHighlightStyle = HighlightStyle.define([
     tag: [t.comment, t.lineComment, t.blockComment, t.docComment],
     color: cssVar('comment'),
   },
+  // Things being declared: functions, classes, interfaces.
   {
     tag: [
       t.function(t.variableName),
       t.function(t.propertyName),
       t.definition(t.function(t.variableName)),
+      t.definition(t.typeName),
+      t.className,
+      t.namespace,
+      t.self,
     ],
     color: cssVar('function'),
   },
+  // Built-in types, literals and ordinary variables.
   {
     tag: [
       t.number,
@@ -56,25 +64,20 @@ export const ckHighlightStyle = HighlightStyle.define([
       t.atom,
       t.constant(t.name),
       t.constant(t.variableName),
+      t.definition(t.variableName),
+      t.typeName,
+      t.standard(t.typeName),
       t.propertyName,
       t.attributeName,
       t.attributeValue,
     ],
     color: cssVar('constant'),
   },
-  {
-    tag: [
-      t.typeName,
-      t.className,
-      t.namespace,
-      t.definition(t.variableName),
-      t.self,
-    ],
-    color: cssVar('entity'),
-  },
+  // A declared property name, which UiCodeBlock renders in the text token.
+  { tag: t.definition(t.propertyName), color: cssVar('property') },
   { tag: [t.tagName, t.angleBracket], color: cssVar('tag') },
   {
-    tag: [t.variableName, t.operator, t.punctuation, t.bracket, t.separator],
+    tag: [t.variableName, t.punctuation, t.bracket, t.separator],
     color: cssVar('foreground'),
   },
   { tag: t.heading, fontWeight: 'bold' },
@@ -107,8 +110,16 @@ export const ckCodeMirrorTheme: Extension = [
     '.cm-line': {
       padding: '0',
     },
+    // Gutter visibility is driven by the `showLineNumbers` prop through a root
+    // class in `milkdown-theme.css`, not from here, so it can toggle without
+    // reconfiguring CodeMirror. Only the chrome is set here.
     '.cm-gutters': {
-      display: 'none',
+      backgroundColor: 'transparent',
+      borderRight: 'none',
+      color: cssVar('comment'),
+    },
+    '.cm-activeLineGutter': {
+      backgroundColor: 'transparent',
     },
     '.cm-cursor, .cm-dropCursor': {
       borderLeftColor: cssVar('foreground'),

package/src/helpers/index.ts

@@ -1,5 +1,6 @@
 export * from './conversationTree';
 export * from './formatRelativeTime';
 export * from './generateId';
+export * from './markdownToPlainText';
 export * from './secondsToDate';
 export * from './toError';

package/src/helpers/markdownToPlainText.spec.ts

@@ -0,0 +1,107 @@
+import { describe, expect, it } from 'vitest';
+
+import { markdownToPlainText } from './markdownToPlainText';
+
+describe('markdownToPlainText', () => {
+  it('returns text without markdown unchanged', () => {
+    expect(markdownToPlainText('A plain excerpt from a page.')).toBe(
+      'A plain excerpt from a page.',
+    );
+  });
+
+  it('keeps a link label and drops its url', () => {
+    expect(
+      markdownToPlainText(
+        'See the [annual report](https://example.com/r.pdf).',
+      ),
+    ).toBe('See the annual report.');
+  });
+
+  it('strips emphasis markers', () => {
+    expect(markdownToPlainText('Revenue **rose** by _12%_ and ~~fell~~.')).toBe(
+      'Revenue rose by 12% and fell.',
+    );
+  });
+
+  it('separates a heading from the paragraph that follows it', () => {
+    expect(markdownToPlainText('## Cost\n\n12 EUR per seat.')).toBe(
+      'Cost 12 EUR per seat.',
+    );
+  });
+
+  it('flattens a GFM table without its pipes', () => {
+    const table = ['| Plan | Cost |', '| --- | --- |', '| Pro | 12 |'].join(
+      '\n',
+    );
+    expect(markdownToPlainText(table)).toBe('Plan Cost Pro 12');
+  });
+
+  it('separates list items', () => {
+    expect(markdownToPlainText('- first\n- second\n- third')).toBe(
+      'first second third',
+    );
+  });
+
+  it('keeps code content but not its fence', () => {
+    expect(markdownToPlainText('Run `pnpm build` first.')).toBe(
+      'Run pnpm build first.',
+    );
+  });
+
+  it('drops an image rather than reading its alt text as prose', () => {
+    expect(markdownToPlainText('![Revenue chart](c.png) Revenue rose.')).toBe(
+      'Revenue rose.',
+    );
+  });
+
+  it('removes inline html tags without joining the words around them', () => {
+    expect(markdownToPlainText('Revenue rose.<br>Costs fell.')).toBe(
+      'Revenue rose. Costs fell.',
+    );
+  });
+
+  it('keeps the prose inside a raw html block', () => {
+    expect(
+      markdownToPlainText('<div class="x">Revenue rose.</div>\nCosts fell.'),
+    ).toBe('Revenue rose. Costs fell.');
+  });
+
+  it('keeps a hard line break as a word separator', () => {
+    expect(markdownToPlainText('Revenue rose.  \nCosts fell.')).toBe(
+      'Revenue rose. Costs fell.',
+    );
+  });
+
+  it('leaves a literal comparison inside a raw html block alone', () => {
+    expect(markdownToPlainText('<div>2 < 3 and 4 > 1</div>')).toBe(
+      '2 < 3 and 4 > 1',
+    );
+  });
+
+  it('removes an html comment', () => {
+    expect(markdownToPlainText('<div>Hi</div>\n<!-- hidden -->\nText.')).toBe(
+      'Hi Text.',
+    );
+  });
+
+  it('collapses the newlines a multi-paragraph excerpt carries', () => {
+    expect(markdownToPlainText('First line.\n\n\nSecond line.')).toBe(
+      'First line. Second line.',
+    );
+  });
+
+  it('leaves an unbalanced emphasis marker as literal text', () => {
+    expect(markdownToPlainText('Revenue **rose sharply in')).toBe(
+      'Revenue **rose sharply in',
+    );
+  });
+
+  it('is idempotent', () => {
+    const once = markdownToPlainText('A [linked](https://example.com) claim.');
+    expect(markdownToPlainText(once)).toBe(once);
+  });
+
+  it('returns an empty string for empty input', () => {
+    expect(markdownToPlainText('')).toBe('');
+  });
+});

package/src/helpers/markdownToPlainText.ts

@@ -0,0 +1,69 @@
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import type { Nodes } from 'mdast';
+
+const parser = unified().use(remarkParse).use(remarkGfm);
+
+const DROPPED_NODES = new Set(['image', 'imageReference']);
+
+// A hard line break is a childless, valueless leaf, so it has to yield its
+// separator explicitly or `first<br>second` flattens to `firstsecond`.
+const SEPARATOR_NODES = new Set(['break']);
+
+// An `html` node cannot be dropped whole: a line starting with a block tag
+// makes markdown's HTML-block rule run to the next blank line, so the node
+// holds the following prose too. Its tags are stripped instead, replaced by a
+// space so `rose.<br>Costs` doesn't come out as one word. A tag has to start
+// like one (`<p`, `</p`, `<!--`) so a literal comparison inside the block —
+// `2 < 3 and 4 > 1` — isn't mistaken for one and deleted. The repetition is
+// bounded because an unbounded `[^>]*` scans quadratically over a run of `<`
+// with no closing `>` (`sonarjs/slow-regex`).
+const HTML_TAG_RE = /<[!/]?[a-zA-Z-][^>]{0,512}>/g;
+
+// Children of these need a separator, or a heading runs straight into the
+// paragraph below it (`## Cost` + `12 EUR` → `Cost12 EUR`).
+const BLOCK_CONTAINERS = new Set([
+  'root',
+  'blockquote',
+  'list',
+  'listItem',
+  'table',
+  'tableRow',
+  'footnoteDefinition',
+]);
+
+function flatten(node: Nodes): string {
+  if (DROPPED_NODES.has(node.type)) return '';
+  if (SEPARATOR_NODES.has(node.type)) return ' ';
+  if ('value' in node) {
+    return node.type === 'html'
+      ? node.value.replace(HTML_TAG_RE, ' ')
+      : node.value;
+  }
+  if (!('children' in node)) return '';
+  return node.children
+    .map(flatten)
+    .join(BLOCK_CONTAINERS.has(node.type) ? ' ' : '');
+}
+
+/**
+ * Flatten markdown to the prose inside it: `[label](url)` becomes `label`,
+ * headings lose their `#`, emphasis markers and table pipes go.
+ *
+ * For excerpt text that is *displayed as plain text* — a citation snippet
+ * preview, say — where the markdown is an artefact of how the source was
+ * extracted rather than something the UI intends to render. Reads the parsed
+ * tree instead of pattern-matching the string, so it is structurally exact for
+ * well-formed markdown where a regex would guess. Idempotent on text carrying
+ * no markdown, so it is a no-op once a producer starts sending plain text.
+ *
+ * Two artefacts survive. A truncated excerpt can end mid-syntax (`**bold` with
+ * no closing pair), which the parser reads as literal text — the correct
+ * reading, at the cost of a visible `**`. And markdown inside a raw HTML block
+ * is never parsed as markdown, so it is flattened as the literal text it is.
+ */
+export function markdownToPlainText(markdown: string): string {
+  if (!markdown) return '';
+  return flatten(parser.parse(markdown)).replace(/\s+/g, ' ').trim();
+}

package/src/index.ts

@@ -100,6 +100,7 @@ export {
   CkUserMessage,
   CkEditableUserMessage,
   CkMilkdownEditor,
+  CkCodeEditor,
 } from './components';
 export type {
   CkAgentMessageHeaderProps,
@@ -145,10 +146,13 @@ export type {
   CkMilkdownEditorEmits,
   CkMilkdownEditorExposed,
   CkMilkdownEditorProps,
+  CkCodeEditorEmits,
+  CkCodeEditorExposed,
+  CkCodeEditorProps,
 } from './components';
 
 // Helpers
-export { formatRelativeTime } from './helpers';
+export { formatRelativeTime, markdownToPlainText } from './helpers';
 
 // Shared Types
 export type {

package/dist/components/base/CkMilkdownEditor/codeMirrorTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"codeMirrorTheme.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkMilkdownEditor/codeMirrorTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAsB,MAAM,sBAAsB,CAAC;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,2FAC6D,CAAC;AAO3F;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,gBA8D3B,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,SAwC/B,CAAC"}

package/dist/generateId-BHf0W4Rq.js

@@ -1,6 +0,0 @@
-function generateId() {
-  return typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : String(Date.now());
-}
-export {
-  generateId as g
-};