@aleph-alpha/chat-kit 6.2.0 → 6.4.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/index.ts

@@ -100,6 +100,7 @@ export {
   CkUserMessage,
   CkEditableUserMessage,
   CkMilkdownEditor,
+  CkCodeEditor,
 } from './components';
 export type {
   CkAgentMessageHeaderProps,
@@ -145,6 +146,9 @@ export type {
   CkMilkdownEditorEmits,
   CkMilkdownEditorExposed,
   CkMilkdownEditorProps,
+  CkCodeEditorEmits,
+  CkCodeEditorExposed,
+  CkCodeEditorProps,
 } from './components';
 
 // Helpers

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"}