@aleph-alpha/chat-kit 6.0.0 → 6.1.0

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

@@ -0,0 +1,441 @@
+/*
+ * Theme for CkMilkdownEditor.
+ *
+ * Crepe's colours, fonts and shadows are all CSS custom properties, so this
+ * file maps them to the design tokens ui-library emits on `:root` (oklch
+ * component triples, hence `oklch(var(--token))`). Because the tokens flip
+ * under `html.dark`, the accessible theme and the brand theme, the editor
+ * follows every theme without separate Crepe theme files.
+ *
+ * It also replaces Crepe's `reset.css`, which is not imported: that file
+ * styles headings, paragraphs, code, links and quotes with two-class selectors
+ * that would beat the utility classes `applyMarkdownClasses` puts on the nodes
+ * (the very classes CkMarkdownRenderer uses), forces a 60px/120px document
+ * padding and removes every focus outline.
+ *
+ * Selectors are written with at least the `.ck-milkdown .milkdown` prefix so
+ * they beat Crepe's own `.milkdown …` rules regardless of stylesheet order.
+ */
+
+.ck-milkdown {
+  /* Crepe colour variables → design tokens */
+  --crepe-color-background: oklch(var(--background-surface-primary));
+  --crepe-color-on-background: oklch(var(--content-on-surface-primary));
+  --crepe-color-surface: oklch(var(--background-surface-floating));
+  --crepe-color-surface-low: oklch(var(--background-surface-muted));
+  --crepe-color-on-surface: oklch(var(--content-on-surface-primary));
+  --crepe-color-on-surface-variant: oklch(var(--content-on-surface-secondary));
+  /* "outline" drives icon colours and (mixed to 20%) hairline borders. */
+  --crepe-color-outline: oklch(var(--content-on-surface-secondary));
+  --crepe-color-primary: oklch(var(--content-on-surface-link));
+  --crepe-color-secondary: oklch(var(--background-accent-soft));
+  --crepe-color-on-secondary: oklch(var(--content-on-accent-soft));
+  --crepe-color-inverse: oklch(var(--content-on-surface-primary));
+  --crepe-color-on-inverse: oklch(var(--background-surface-primary));
+  --crepe-color-inline-code: oklch(var(--content-on-surface-primary));
+  --crepe-color-error: oklch(var(--border-input-error));
+  --crepe-color-hover: oklch(var(--overlay-hover-subtle));
+  --crepe-color-selected: oklch(var(--background-accent-soft));
+  --crepe-color-inline-area: oklch(var(--background-surface-muted-subtle));
+
+  --crepe-base-font-size: 1rem;
+  --crepe-font-default: var(--font-sans, inherit);
+  /* CkMarkdownRenderer headings use the body font, so the editor does too. */
+  --crepe-font-title: var(--font-sans, inherit);
+  --crepe-font-code:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
+    monospace;
+
+  --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));
+
+  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)                                */
+/* ------------------------------------------------------------------------ */
+
+.ck-milkdown .milkdown {
+  position: relative;
+  /* Inherit like CkMarkdownRenderer does: the parent sets font and colour. */
+  font: inherit;
+  color: inherit;
+  background: transparent;
+}
+
+.ck-milkdown .milkdown button,
+.ck-milkdown .milkdown input {
+  margin: 0;
+  border: none;
+  background: none;
+  box-shadow: none;
+  font: inherit;
+  color: inherit;
+}
+
+.ck-milkdown .milkdown button:focus-visible,
+.ck-milkdown .milkdown input:focus-visible,
+.ck-milkdown .milkdown [role='option']:focus-visible {
+  outline: 2px solid oklch(var(--border-surface-focus-ring));
+  outline-offset: 1px;
+}
+
+.ck-milkdown .milkdown .milkdown-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ck-milkdown .milkdown .ProseMirror {
+  padding: 0;
+  min-height: 1lh;
+  outline: none;
+}
+
+.ck-milkdown .milkdown .ProseMirror .ProseMirror-selectednode {
+  outline: none;
+  background: color-mix(in srgb, var(--crepe-color-selected), transparent 60%);
+}
+
+.ck-milkdown .milkdown .ProseMirror img {
+  max-width: 100%;
+  vertical-align: bottom;
+}
+
+.ck-milkdown .milkdown .crepe-placeholder::before {
+  color: oklch(var(--content-on-surface-muted));
+}
+
+/* ------------------------------------------------------------------------ */
+/* Lists — Crepe renders `li` through a node view with an SVG marker.        */
+/* Reproduce `li: 'my-0.5'` and hang the marker into the `ml-6` gutter the   */
+/* `ul`/`ol` classes create, so text starts where the renderer's text does.  */
+/* ------------------------------------------------------------------------ */
+
+.ck-milkdown .milkdown .milkdown-list-item-block {
+  display: block;
+  margin: 0.125rem 0;
+  padding: 0;
+}
+
+.ck-milkdown .milkdown .milkdown-list-item-block > li.list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ck-milkdown .milkdown .milkdown-list-item-block li .label-wrapper {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  width: 1.5rem;
+  height: 1.75rem; /* = leading-7, the renderer's body line height */
+  margin-left: -1.5rem;
+  padding-right: 0.375rem;
+  color: inherit;
+}
+
+.ck-milkdown .milkdown .milkdown-list-item-block li .label-wrapper .label {
+  width: auto;
+  height: auto;
+  padding: 0;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.ck-milkdown .milkdown .milkdown-list-item-block li .label-wrapper svg {
+  width: 1.125rem;
+  height: 1.125rem;
+  color: inherit;
+  fill: none;
+}
+
+.ck-milkdown
+  .milkdown
+  .milkdown-list-item-block
+  li
+  .label-wrapper
+  svg.ck-icon--bullet {
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: currentColor;
+}
+
+.ck-milkdown .milkdown .milkdown-list-item-block li .label-wrapper .checked,
+.ck-milkdown .milkdown .milkdown-list-item-block li .label-wrapper .unchecked {
+  color: oklch(var(--content-on-surface-secondary));
+}
+
+/* Task-list boxes: about the size of the native checkbox the renderer shows. */
+.ck-milkdown .milkdown .milkdown-list-item-block li .label-wrapper .checked svg,
+.ck-milkdown
+  .milkdown
+  .milkdown-list-item-block
+  li
+  .label-wrapper
+  .unchecked
+  svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* The disc marker sits closer to the text, like the browser's own `list-disc`. */
+.ck-milkdown
+  .milkdown
+  .milkdown-list-item-block
+  li
+  .label-wrapper:has(.ck-icon--bullet) {
+  padding-right: 0;
+}
+
+.ck-milkdown .milkdown .milkdown-list-item-block > li.list-item > .children {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Milkdown always wraps list-item text in <p>; remark only does so for loose
+ * lists. Zero the paragraph margin so tight lists match the renderer. */
+.ck-milkdown .milkdown .milkdown-list-item-block > li.list-item > .children p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Code blocks — mirror UiCodeBlock: rounded-lg border, muted header with    */
+/* the language label and an always-visible copy button, github palette.    */
+/* ------------------------------------------------------------------------ */
+
+.ck-milkdown .milkdown .milkdown-code-block {
+  position: relative;
+  display: block;
+  margin: 0.5rem 0; /* = pre: 'my-2' */
+  padding: 0;
+  max-width: 100%;
+  overflow: hidden;
+  border: 1px solid oklch(var(--border-surface-default));
+  border-radius: 0.5rem;
+  background: var(--ck-cm-bg);
+  color: var(--ck-cm-foreground);
+}
+
+.ck-milkdown .milkdown .milkdown-code-block.selected {
+  outline: 2px solid oklch(var(--border-surface-focus-ring));
+  outline-offset: 1px;
+}
+
+.ck-milkdown .milkdown .milkdown-code-block .tools {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid oklch(var(--border-surface-default));
+  background: oklch(var(--background-surface-muted));
+}
+
+.ck-milkdown .milkdown .milkdown-code-block .tools .language-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.375rem;
+  background: transparent;
+  opacity: 1;
+  font-family: var(--crepe-font-code);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: oklch(var(--content-on-surface-secondary));
+  cursor: pointer;
+}
+
+.ck-milkdown .milkdown .milkdown-code-block .tools .language-button:hover {
+  background: oklch(var(--overlay-hover-subtle));
+}
+
+.ck-milkdown
+  .milkdown
+  .milkdown-code-block
+  .tools
+  .language-button
+  .expand-icon
+  svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: inherit;
+}
+
+.ck-milkdown .milkdown .milkdown-code-block .tools .tools-button-group {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.ck-milkdown .milkdown .milkdown-code-block .tools .tools-button-group button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  height: 1.75rem;
+  min-width: 1.75rem;
+  padding: 0 0.5rem;
+  border-radius: 0.375rem;
+  background: transparent;
+  opacity: 1;
+  font-family: var(--crepe-font-default);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  color: oklch(var(--content-on-surface-secondary));
+  cursor: pointer;
+}
+
+.ck-milkdown
+  .milkdown
+  .milkdown-code-block
+  .tools
+  .tools-button-group
+  button:first-child,
+.ck-milkdown
+  .milkdown
+  .milkdown-code-block
+  .tools
+  .tools-button-group
+  button:last-child {
+  border-radius: 0.375rem;
+}
+
+.ck-milkdown
+  .milkdown
+  .milkdown-code-block
+  .tools
+  .tools-button-group
+  button:hover {
+  background: oklch(var(--overlay-hover-subtle));
+}
+
+.ck-milkdown
+  .milkdown
+  .milkdown-code-block
+  .tools
+  .tools-button-group
+  button
+  svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: inherit;
+  fill: none;
+}
+
+/* Language picker dropdown: a floating surface like UiPopover. */
+.ck-milkdown .milkdown .milkdown-code-block .list-wrapper {
+  border: 1px solid oklch(var(--border-surface-default));
+  border-radius: 0.5rem;
+  background: oklch(var(--background-surface-floating));
+  box-shadow: var(--shadow-md);
+  color: oklch(var(--content-on-surface-primary));
+}
+
+.ck-milkdown .milkdown .milkdown-code-block .search-box {
+  outline-color: oklch(var(--border-surface-default));
+}
+
+.ck-milkdown .milkdown .milkdown-code-block .search-box:has(input:focus) {
+  outline: 2px solid oklch(var(--border-surface-focus-ring));
+}
+
+.ck-milkdown .milkdown .milkdown-code-block .language-list-item {
+  font-weight: 400;
+}
+
+/* The CodeMirror surface. `EditorView.theme` emits single-class rules that
+ * lose to Crepe's `.milkdown .milkdown-code-block .cm-editor`, so repeat the
+ * palette here. */
+.ck-milkdown .milkdown .milkdown-code-block .cm-editor {
+  background: var(--ck-cm-bg);
+  color: var(--ck-cm-foreground);
+}
+
+.ck-milkdown .milkdown .milkdown-code-block .cm-gutters {
+  display: none;
+}
+
+/* Shown while the CodeMirror instance is still mounting. */
+.ck-milkdown .milkdown .milkdown-code-block .milkdown-code-block-placeholder {
+  margin: 0;
+  padding: 1rem;
+  font-family: var(--crepe-font-code);
+  font-size: 0.875rem;
+  line-height: 1.625;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Floating toolbar and link tooltip                                          */
+/* ------------------------------------------------------------------------ */
+
+.ck-milkdown .milkdown .milkdown-toolbar,
+.ck-milkdown .milkdown .milkdown-link-preview > .link-preview,
+.ck-milkdown .milkdown .milkdown-link-edit > .link-edit {
+  border: 1px solid oklch(var(--border-surface-default));
+  color: oklch(var(--content-on-surface-primary));
+}
+
+.ck-milkdown .milkdown .milkdown-toolbar .toolbar-item svg {
+  width: 1.125rem;
+  height: 1.125rem;
+  fill: none;
+}
+
+.ck-milkdown .milkdown .milkdown-link-preview svg,
+.ck-milkdown .milkdown .milkdown-link-edit svg {
+  fill: none;
+}
+
+.ck-milkdown .milkdown .milkdown-link-preview > .link-preview > .link-display {
+  color: oklch(var(--content-on-surface-link));
+}
+
+.ck-milkdown .milkdown .milkdown-link-edit > .link-edit > .input-area {
+  color: oklch(var(--content-on-surface-primary));
+}
+
+.ck-milkdown
+  .milkdown
+  .milkdown-link-edit
+  > .link-edit
+  > .input-area::placeholder {
+  color: oklch(var(--content-on-surface-muted));
+}

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

@@ -0,0 +1,100 @@
+import type { CkMarkdownElementClasses } from '../CkMarkdownRenderer';
+
+/**
+ * Markdown WYSIWYG editor built on [Milkdown Crepe](https://milkdown.dev/docs/guide/using-crepe).
+ * Its content is styled with the very same per-tag class map that
+ * {@link CkMarkdownRenderer} uses, so a message edited here looks identical to
+ * the rendered reply — no visual jump between reading and editing.
+ *
+ * The feature set is deliberately small and chat-oriented: a floating toolbar
+ * (bold, italic, strikethrough, inline code, link), bullet / ordered / task
+ * lists, blockquotes, links with a hover tooltip, fenced code blocks with syntax
+ * highlighting and a copy button, and an empty-document placeholder. Tables,
+ * images, LaTeX, slash menus and drag handles are intentionally not enabled.
+ *
+ * The editor itself loads lazily on mount, so importing this component does not
+ * pull ProseMirror / CodeMirror into the consumer's initial bundle.
+ *
+ * @category Form Inputs
+ * @useCases edit an assistant reply before sending, compose a rich prompt, edit a saved note in markdown, inline WYSIWYG editing of a user message
+ * @keywords markdown, editor, wysiwyg, milkdown, crepe, prosemirror, rich text, v-model, compose
+ * @related CkMarkdownRenderer, CkPromptInput, CkEditableUserMessage
+ */
+export interface CkMilkdownEditorProps {
+  /**
+   * Markdown source of the document. Supports `v-model`.
+   *
+   * Changes made in the editor are emitted through `update:modelValue` after
+   * Milkdown's ~200 ms debounce. External changes are applied by replacing the
+   * whole document; the editor may then emit the same content once in its
+   * normalised form (e.g. `*x*` becomes `_x_`).
+   *
+   * @default ''
+   */
+  modelValue?: string;
+  /**
+   * Text shown when the document is empty. Read once when the editor is
+   * created; later changes are ignored.
+   */
+  placeholder?: string;
+  /**
+   * Render the content without allowing edits. The floating toolbar is not
+   * shown and the caret is hidden.
+   *
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * Like `readonly`, but also mutes the content and marks the editor as
+   * `aria-disabled`.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Accessible name of the editable region (`role="textbox"`). Read once when
+   * the editor is created.
+   */
+  ariaLabel?: string;
+  /**
+   * Per-tag class overrides, merged over the same defaults
+   * {@link CkMarkdownRenderer} uses. Pass the same object to both components to
+   * keep them in sync.
+   *
+   * `li` and `pre` are rendered by Crepe's own node views and are styled by the
+   * editor stylesheet instead, so overrides for those two tags are ignored.
+   */
+  classes?: CkMarkdownElementClasses;
+  /**
+   * Move focus into the editor once it has been created.
+   *
+   * @default false
+   */
+  autofocus?: boolean;
+}
+
+/** Events emitted by {@link CkMilkdownEditor}. */
+export interface CkMilkdownEditorEmits {
+  /**
+   * Emitted when the document changes. Debounced by Milkdown (~200 ms), so a
+   * consumer that submits on a key press should read the exposed
+   * `getMarkdown()` instead of relying on the last emitted value.
+   */
+  'update:modelValue': [value: string];
+  /** Emitted when focus enters the editor (including its toolbar). */
+  focus: [];
+  /** Emitted when focus leaves the editor and its toolbar entirely. */
+  blur: [];
+}
+
+/** Methods exposed by {@link CkMilkdownEditor} through a template ref. */
+export interface CkMilkdownEditorExposed {
+  /** Focus the editable region. No-op until the editor has been created. */
+  focus: () => void;
+  /**
+   * Serialise the current document to markdown synchronously, bypassing the
+   * `update:modelValue` debounce. Returns the `modelValue` prop until the
+   * editor has been created.
+   */
+  getMarkdown: () => string;
+}

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

@@ -29,7 +29,7 @@ import { CkPromptInputDisclaimer } from '@aleph-alpha/chat-kit';
 
 <template>
   <CkPromptInputDisclaimer
-    text="Assistant Chat may occasionally make mistakes. Please, make sure to double-check important information."
+    text="Chat is an AI system and can make mistakes. Verify answers before you act on them."
   />
 </template>`;
 
@@ -60,7 +60,7 @@ export const Default: Story = {
     components: { CkPromptInputDisclaimer },
     template: `
       <CkPromptInputDisclaimer
-        text="Assistant Chat may occasionally make mistakes. Please, make sure to double-check important information."
+        text="Chat is an AI system and can make mistakes. Verify answers before you act on them."
       />
     `,
   }),

package/src/components/base/index.ts

@@ -80,3 +80,9 @@ export type {
   CkEditableUserMessageEmits,
   CkEditableUserMessageProps,
 } from './CkEditableUserMessage';
+export { CkMilkdownEditor } from './CkMilkdownEditor';
+export type {
+  CkMilkdownEditorEmits,
+  CkMilkdownEditorExposed,
+  CkMilkdownEditorProps,
+} from './CkMilkdownEditor';

package/src/components/index.ts

@@ -27,6 +27,7 @@ export {
   CkStopIcon,
   CkUserMessage,
   CkEditableUserMessage,
+  CkMilkdownEditor,
 } from './base';
 export type {
   CkAgentMessageHeaderProps,
@@ -66,6 +67,9 @@ export type {
   CkUserMessageProps,
   CkEditableUserMessageProps,
   CkEditableUserMessageEmits,
+  CkMilkdownEditorEmits,
+  CkMilkdownEditorExposed,
+  CkMilkdownEditorProps,
 } from './base';
 
 // Composed (pattern) components

package/src/handlers/useChatKitLabels.ts

@@ -111,6 +111,24 @@ export type ChatKitLabels = {
    * set and more conversations exist than the limit.
    */
   historyShowAll?: string;
+  /** Accessible name of the "Bold" button in the `CkMilkdownEditor` toolbar. */
+  markdownEditorBold?: string;
+  /** Accessible name of the "Italic" button in the `CkMilkdownEditor` toolbar. */
+  markdownEditorItalic?: string;
+  /** Accessible name of the "Strikethrough" button in the `CkMilkdownEditor` toolbar. */
+  markdownEditorStrikethrough?: string;
+  /** Accessible name of the "Inline code" button in the `CkMilkdownEditor` toolbar. */
+  markdownEditorInlineCode?: string;
+  /** Accessible name of the "Link" button in the `CkMilkdownEditor` toolbar. */
+  markdownEditorLink?: string;
+  /** Placeholder of the URL input in the `CkMilkdownEditor` link tooltip. */
+  markdownEditorLinkPlaceholder?: string;
+  /** Label of the copy button on a `CkMilkdownEditor` code block. */
+  markdownEditorCopyCode?: string;
+  /** Placeholder of the language search input on a `CkMilkdownEditor` code block. */
+  markdownEditorSearchLanguage?: string;
+  /** Empty-state text of the language search on a `CkMilkdownEditor` code block. */
+  markdownEditorNoLanguageFound?: string;
 };
 
 /** English defaults used when no labels are provided by the consumer. */
@@ -150,6 +168,15 @@ export const defaultChatKitLabels = {
   historyItemEditAction: 'Edit',
   historyItemDeleteAction: 'Delete',
   historyShowAll: 'Show all',
+  markdownEditorBold: 'Bold',
+  markdownEditorItalic: 'Italic',
+  markdownEditorStrikethrough: 'Strikethrough',
+  markdownEditorInlineCode: 'Inline code',
+  markdownEditorLink: 'Link',
+  markdownEditorLinkPlaceholder: 'Paste or type a link…',
+  markdownEditorCopyCode: 'Copy code',
+  markdownEditorSearchLanguage: 'Search language…',
+  markdownEditorNoLanguageFound: 'No language found',
 } satisfies Required<ChatKitLabels>;
 
 /** Vue injection key for ChatKit labels. */

package/src/index.ts

@@ -99,6 +99,7 @@ export {
   CkStopIcon,
   CkUserMessage,
   CkEditableUserMessage,
+  CkMilkdownEditor,
 } from './components';
 export type {
   CkAgentMessageHeaderProps,
@@ -141,6 +142,9 @@ export type {
   CkUserMessageProps,
   CkEditableUserMessageProps,
   CkEditableUserMessageEmits,
+  CkMilkdownEditorEmits,
+  CkMilkdownEditorExposed,
+  CkMilkdownEditorProps,
 } from './components';
 
 // Helpers