@aleph-alpha/chat-kit 6.4.0 → 6.4.1

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

@@ -139,6 +139,17 @@ const plugins = [uppercasePlugin];
   <CkMarkdownRenderer :content="content" :plugins="plugins" />
 </template>`;
 
+const withLineBreaksTemplateSource = `<script setup lang="ts">
+import { CkMarkdownRenderer } from '@aleph-alpha/chat-kit';
+
+// Typed in an editor as three separate lines.
+const content = 'Roses are red\\nViolets are blue\\nMarkdown collapses these';
+</script>
+
+<template>
+  <CkMarkdownRenderer :content="content" breaks />
+</template>`;
+
 /**
  * Renders inline Markdown with bold, italic, and inline code. Use as the
  * default way to display assistant prose replies.
@@ -553,3 +564,23 @@ export const WithUnsupportedAndCodeMarkers: Story = {
       '<CkMarkdownRenderer :content="content" :citations="citations" />',
   }),
 };
+
+/**
+ * `breaks` keeps single newlines as line breaks. Without it CommonMark treats a
+ * lone newline as whitespace, so lines typed separately in an editor run
+ * together. A blank line still starts a new paragraph either way, and newlines
+ * inside fenced code are never touched.
+ */
+export const WithLineBreaks: Story = {
+  args: {
+    content: [
+      'Roses are red',
+      'Violets are blue',
+      'These three lines were typed separately.',
+      '',
+      'This is a new paragraph.',
+    ].join('\n'),
+    breaks: true,
+  },
+  parameters: { docs: { source: { code: withLineBreaksTemplateSource } } },
+};

package/src/components/base/CkMarkdownRenderer/CkMarkdownRenderer.vue

@@ -14,6 +14,7 @@ import {
   defaultChatKitLabels,
   useChatKitLabels,
 } from '../../../handlers/useChatKitLabels';
+import { remarkBreaks } from '../../../helpers/unified/remarkBreaks';
 import { useCitationRendering } from './useCitationRendering';
 import type { CkCitationSource } from '../CkCitation';
 import type { CkMarkdownElementClasses } from './types';
@@ -100,6 +101,7 @@ export default defineComponent({
       default: () => ({}),
     },
     plugins: { type: Array as PropType<PluggableList>, default: undefined },
+    breaks: { type: Boolean, default: false },
     citations: {
       type: Array as PropType<CkCitationSource[]>,
       default: undefined,
@@ -123,6 +125,7 @@ export default defineComponent({
 
     const effectivePlugins = computed<PluggableList>(() => [
       ...(props.plugins ?? []),
+      ...(props.breaks ? [remarkBreaks] : []),
       ...citationPlugins.value,
     ]);
 

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

@@ -49,6 +49,19 @@ export interface CkMarkdownRendererProps {
    * generated HTML elements (e.g. `h1`, `p`, `ul`).
    */
   classes?: CkMarkdownElementClasses;
+  /**
+   * Treat a single newline as a line break, so two lines typed in an editor
+   * render as two lines.
+   *
+   * Off by default, because CommonMark says a lone newline is only whitespace
+   * and existing content may rely on that. Turn it on wherever people type the
+   * markdown themselves and expect their line breaks to survive; a blank line
+   * still starts a new paragraph either way, and newlines inside code spans and
+   * fenced blocks are never affected.
+   *
+   * @default false
+   */
+  breaks?: boolean;
   /** Extra [unified](https://unifiedjs.com/) plugins to extend parsing. */
   plugins?: PluggableList;
   /**

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

@@ -412,9 +412,12 @@
   .milkdown-code-block
   .cm-lineNumbers
   .cm-gutterElement {
-  min-width: 2.25rem;
-  padding: 0 0.75rem 0 1rem;
-  color: oklch(var(--content-on-surface-muted));
+  /* Geometry and colour come from `theme.ts`, which matches `UiCodeBlock`'s
+   * gutter; this rule only exists because Crepe's own code-block styles would
+   * otherwise win on specificity. */
+  min-width: 4rem;
+  padding: 0 1rem;
+  color: var(--ck-cm-line-number);
   text-align: right;
 }
 

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

@@ -15,11 +15,23 @@
  * 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.
+ * everyday code. Where one Lezer tag covers cases the GitHub themes colour
+ * differently, the mapping follows the more common one, which leaves a few
+ * known gaps: YAML keys and plain scalars both arrive as tags that mean
+ * something else in JavaScript, so they stay unhighlighted; `typeName` is blue
+ * here because that is right for TypeScript's primitives, though Rust and Go
+ * would want purple and red; and a fenced code block inside a Markdown
+ * document is not highlighted in its own language the way Shiki's embedded
+ * grammars do it.
  */
 
 .ck-code-surface {
-  --ck-cm-bg: #ffffff;
+  /* Held as bare oklch components, not a hex, because that is the form both
+   * `oklch()` and `UiFadeMask`'s surface variable need in order to fade the
+   * colour out to zero alpha. `--ck-cm-bg` is derived from it so there is one
+   * source of truth. */
+  --ck-cm-bg-components: 100% 0 89.88;
+  --ck-cm-bg: oklch(var(--ck-cm-bg-components));
   --ck-cm-foreground: #24292e;
   --ck-cm-keyword: #d73a49;
   --ck-cm-string: #032f62;
@@ -34,10 +46,18 @@
   --ck-cm-tag: #22863a;
   --ck-cm-error: #b31d28;
   --ck-cm-selection: oklch(var(--background-accent-soft));
+  /* Line numbers. `UiCodeBlock` draws its gutter as the code foreground at
+   * 40% opacity rather than as a colour of its own, so this is derived from
+   * `--ck-cm-foreground` and needs no dark-mode counterpart. */
+  --ck-cm-line-number: color-mix(
+    in oklab,
+    var(--ck-cm-foreground) 40%,
+    transparent
+  );
 }
 
 html.dark .ck-code-surface {
-  --ck-cm-bg: #24292e;
+  --ck-cm-bg-components: 27.81% 0.0117 248.25;
   --ck-cm-foreground: #e1e4e8;
   --ck-cm-keyword: #f97583;
   --ck-cm-string: #9ecbff;

package/src/helpers/codemirror/theme.ts

@@ -31,11 +31,21 @@ export const ckHighlightStyle = HighlightStyle.define([
       t.moduleKeyword,
       t.operatorKeyword,
       t.operator,
+      // CSS units (`px`, `rem`) are `keyword.other.unit` to a TextMate grammar.
+      t.unit,
     ],
     color: cssVar('keyword'),
   },
   {
-    tag: [t.string, t.special(t.string), t.regexp, t.escape, t.character],
+    tag: [
+      t.string,
+      t.special(t.string),
+      t.regexp,
+      t.escape,
+      t.character,
+      // `class="card"` — the quoted value is a string, not a constant.
+      t.attributeValue,
+    ],
     color: cssVar('string'),
   },
   {
@@ -51,7 +61,8 @@ export const ckHighlightStyle = HighlightStyle.define([
       t.definition(t.typeName),
       t.className,
       t.namespace,
-      t.self,
+      // `entity.other.attribute-name`, which GitHub colours like any entity.
+      t.attributeName,
     ],
     color: cssVar('function'),
   },
@@ -68,19 +79,35 @@ export const ckHighlightStyle = HighlightStyle.define([
       t.typeName,
       t.standard(t.typeName),
       t.propertyName,
-      t.attributeName,
-      t.attributeValue,
+      // `this` / `self` are `variable.language`, which GitHub paints blue.
+      t.self,
+      // CSS colour literals (`#ff0066`), `constant.other.color-*`.
+      t.color,
+      // Bare identifiers a grammar cannot classify further — SQL column and
+      // table names, for one. Every more specific name tag has its own rule
+      // above, so this only catches what would otherwise be unstyled.
+      t.name,
     ],
     color: cssVar('constant'),
   },
   // 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.tagName, color: cssVar('tag') },
+  // Markdown blockquotes are `markup.quote`, the same green as a tag name.
+  { tag: t.quote, color: cssVar('tag') },
   {
-    tag: [t.variableName, t.punctuation, t.bracket, t.separator],
+    tag: [
+      t.variableName,
+      t.punctuation,
+      t.bracket,
+      t.separator,
+      // `<`, `>` and `</` are plain text in the GitHub themes; only the tag
+      // name inside them is green.
+      t.angleBracket,
+    ],
     color: cssVar('foreground'),
   },
-  { tag: t.heading, fontWeight: 'bold' },
+  { tag: t.heading, color: cssVar('constant'), fontWeight: 'bold' },
   { tag: t.strong, fontWeight: 'bold' },
   { tag: t.emphasis, fontStyle: 'italic' },
   { tag: t.link, textDecoration: 'underline' },
@@ -116,7 +143,16 @@ export const ckCodeMirrorTheme: Extension = [
     '.cm-gutters': {
       backgroundColor: 'transparent',
       borderRight: 'none',
-      color: cssVar('comment'),
+      color: cssVar('line-number'),
+    },
+    // `UiCodeBlock` draws its numbers as a 2rem right-aligned column inside the
+    // block's 1rem padding, with a 1rem gap before the code. CodeMirror puts
+    // the gutter outside `.cm-content`, so the same geometry is expressed as
+    // padding on the number cell.
+    '.cm-lineNumbers .cm-gutterElement': {
+      minWidth: '4rem',
+      padding: '0 1rem',
+      textAlign: 'right',
     },
     '.cm-activeLineGutter': {
       backgroundColor: 'transparent',

package/src/helpers/unified/remarkBreaks.ts

@@ -0,0 +1,32 @@
+import type { Plugin } from 'unified';
+import { findAndReplace } from 'mdast-util-find-and-replace';
+
+// A newline that a writer typed inside a paragraph. In CommonMark this is a
+// "soft break", which renders as nothing more than whitespace, so two lines
+// typed in an editor arrive as one flowing line. Block structure (paragraphs,
+// list items, code fences) is already separate nodes by the time this runs, so
+// the only newlines left inside `text` nodes are these soft breaks.
+const SOFT_BREAK_RE = /\r?\n/g;
+
+/**
+ * Turns every soft line break into a hard one, so a single press of Enter shows
+ * up as a line break rather than being collapsed into the previous line.
+ *
+ * This is what chat interfaces usually want: people type a message the way they
+ * would in any other text box and expect the lines they made to survive. Strict
+ * CommonMark instead requires two trailing spaces, a backslash, or a blank line
+ * to force a break.
+ *
+ * `findAndReplace` only visits `text` nodes, so newlines inside code spans and
+ * fenced code blocks are untouched and keep their literal meaning.
+ */
+// The tree type is left as unified's default (a unist `Node`) so the published
+// `.d.ts` does not depend on `mdast` types; the cast keeps the call typed.
+export const remarkBreaks: Plugin<[]> = () => {
+  return (tree) => {
+    findAndReplace(tree as Parameters<typeof findAndReplace>[0], [
+      SOFT_BREAK_RE,
+      () => ({ type: 'break' }),
+    ]);
+  };
+};