fix: markdown rendering for custom types

docs/chat-ui-component.md

@@ -183,7 +183,7 @@ Each conversation has a `sessionId` (UUID) stored in IndexedDB alongside its mes
 
 | Event | Bubbles | Detail | Description |
 |---|---|---|---|
-| `nx-agent-change` | Yes | — | The agent completed a tool action. Host views can listen to react (e.g. reload the document). Fired once per successful tool-result. |
+| `nx-agent-change` | Yes | `{ scope: 'file' \| 'document', paths: string[] }` | The agent completed a tool action that changed content. `scope: 'file'` means the file tree changed (files created, deleted, moved, or copied); `scope: 'document'` means a document's content was modified. `paths` contains the affected parent folder paths. |
 
 ## Skills slash menu
 

nx2/blocks/chat/chat-controller.js

@@ -1,7 +1,7 @@
 import { loadIms } from '../../utils/ims.js';
 import { AGENT_EVENT, ROLE, TOOL_NAME, TOOL_SCOPE, TOOL_STATE } from './constants.js';
-import { readStream } from './utils.js';
-import { loadMessages, saveMessages, resetSession } from './persistence.js';
+import { readStream } from './utils/stream.js';
+import { loadMessages, saveMessages, resetSession } from './utils/persistence.js';
 
 function affectedFolders(toolName, input) {
   const { org, repo } = input ?? {};

nx2/blocks/chat/chat.css

@@ -142,6 +142,7 @@
   height: 100%;
 }
 
+.directive-toggle-list summary::before,
 .tool-card summary::before,
 .message .selection-context > summary::before {
   content: "";
@@ -192,6 +193,105 @@
   }
 }
 
+.directive-checklist ul,
+.directive-toggle-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.directive-toggle-list {
+  details {
+    summary {
+      cursor: pointer;
+      display: flex;
+      align-items: flex-start;
+      gap: var(--s2-spacing-75);
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &::before {
+        margin-top: var(--s2-spacing-75);
+      }
+    }
+
+    &[open] > summary::before {
+      transform: rotate(180deg);
+    }
+
+    &:not(:has(> :not(summary))) > summary {
+      pointer-events: none;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+}
+
+.directive-checklist {
+  li {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--s2-spacing-75);
+  }
+
+  input[type="checkbox"] {
+    position: relative;
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    margin-top: var(--s2-spacing-75);
+    appearance: none;
+    border: 2px solid var(--s2-gray-800);
+    border-radius: var(--s2-corner-radius-75);
+    background: var(--s2-gray-75);
+
+    &:disabled {
+      opacity: 0.8;
+      cursor: not-allowed;
+    }
+
+    &:checked {
+      background: var(--s2-gray-800);
+      color: var(--s2-gray-25);
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-color: currentcolor;
+        mask-image: url("https://da.live/img/icons/s2-icon-checkmark-20-n.svg");
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        mask-position: center;
+      }
+    }
+  }
+}
+
+.directive-alert-info,
+.directive-alert-warning,
+.directive-alert-error {
+  padding: var(--s2-spacing-75) var(--s2-spacing-200);
+  border-radius: 12px;
+  margin: var(--s2-spacing-200) 0;
+}
+
+.directive-alert-info {
+  background-color: var(--s2-blue-200);
+}
+
+.directive-alert-warning {
+  background-color: var(--s2-orange-200);
+}
+
+.directive-alert-error {
+  background-color: var(--s2-red-200);
+}
+
 .message {
   padding: 6px var(--s2-spacing-200);
   border-radius: 12px;

nx2/blocks/chat/chat.js

@@ -1,13 +1,13 @@
 import { LitElement, html, nothing } from 'da-lit';
 import { loadStyle, hashChange } from '../../utils/utils.js';
-import { readFileAsBase64 } from './utils.js';
+import { readFileAsBase64 } from './utils/stream.js';
 import '../shared/menu/menu.js';
 import ChatController from './chat-controller.js';
 import { renderMessage, renderApprovalCard } from './renderers.js';
 import './welcome/welcome.js';
 import './prompts/prompts.js';
 import './pills/pills.js';
-import { loadSiteConfig } from './api.js';
+import { loadSiteConfig } from './utils/api.js';
 import { ADOBE_AI_GUIDELINES_URL, ADD_MENU_ITEMS, MENU_OPTIONS, ROLE, TOOL_STATE } from './constants.js';
 import { getConfig } from '../../scripts/nx.js';
 

nx2/blocks/chat/renderers.js

@@ -1,6 +1,7 @@
 import { html, nothing } from 'da-lit';
 import { AGENT_EVENT, ROLE, TOOL_INPUT, TOOL_STATE } from './constants.js';
 import { getConfig } from '../../scripts/nx.js';
+import { parseDirectives } from './utils/parse.js';
 
 const { codeBase } = getConfig();
 
@@ -48,10 +49,71 @@ function renderNode(node) {
 
 const parser = unified().use(remarkParse);
 
+function renderChecklistItem(node) {
+  const para = node.children[0];
+  if (para?.type !== 'paragraph') return html`<li>${node.children.map(renderNode)}</li>`;
+  const first = para.children[0];
+  if (first?.type !== 'text') return html`<li>${renderNode(para)}</li>`;
+
+  const checked = first.value.startsWith('[x] ') || first.value.startsWith('[X] ');
+  const unchecked = first.value.startsWith('[ ] ');
+  if (!checked && !unchecked) return html`<li>${renderNode(para)}</li>`;
+
+  const inline = [
+    { ...first, value: first.value.slice(4) },
+    ...para.children.slice(1),
+  ].map(renderNode);
+  return html`<li class="${checked ? 'checked' : 'unchecked'}">
+    <input type="checkbox" ?checked=${checked} disabled><span>${inline}</span>
+  </li>`;
+}
+
+function renderToggleList(tree) {
+  const items = [];
+  let i = 0;
+  while (i < tree.children.length) {
+    const node = tree.children[i];
+    if (node.type === 'blockquote') {
+      const summary = node.children.flatMap((c) => (c.children ?? []).map(renderNode));
+      const body = [];
+      while (i + 1 < tree.children.length && tree.children[i + 1].type !== 'blockquote') {
+        i += 1;
+        body.push(renderNode(tree.children[i]));
+      }
+      items.push(html`<li><details><summary>${summary}</summary>${body}</details></li>`);
+    } else {
+      items.push(html`<li>${renderNode(node)}</li>`);
+    }
+    i += 1;
+  }
+  return html`<ul class="directive directive-toggle-list">${items}</ul>`;
+}
+
+function renderChecklist(tree) {
+  const inner = tree.children.map((n) => {
+    if (n.type !== 'list') return renderNode(n);
+    return n.ordered
+      ? html`<ol>${n.children.map(renderChecklistItem)}</ol>`
+      : html`<ul>${n.children.map(renderChecklistItem)}</ul>`;
+  });
+  return html`<div class="directive directive-checklist">${inner}</div>`;
+}
+
+function renderDirective(type, content) {
+  const tree = parser.parse(content);
+  if (type === 'toggle-list') return renderToggleList(tree);
+  if (type === 'checklist') return renderChecklist(tree);
+  return html`<div class="directive directive-${type}">${renderNode(tree)}</div>`;
+}
+
 function renderMessageContent(text) {
   if (!text) return nothing;
-  const tree = parser.parse(text);
-  return renderNode(tree);
+  const segments = parseDirectives(text);
+  return segments.map(({ kind, type, content }) => {
+    if (kind === 'directive') return renderDirective(type, content);
+    const tree = parser.parse(content);
+    return renderNode(tree);
+  });
 }
 
 function approvalSummary(input) {

nx2/blocks/chat/api.js → nx2/blocks/chat/utils/api.js

@@ -1,5 +1,5 @@
-import { daFetch } from '../../utils/api.js';
-import { DA_ADMIN } from '../../utils/utils.js';
+import { daFetch } from '../../../utils/api.js';
+import { DA_ADMIN } from '../../../utils/utils.js';
 
 export async function loadSiteConfig(org, site) {
   try {

nx2/blocks/chat/utils/parse.js

@@ -0,0 +1,34 @@
+export function parseDirectives(text) {
+  const segments = [];
+  const buf = [];
+  let type = null;
+  let openLine = null;
+
+  for (const line of text.split('\n')) {
+    if (!type && line.startsWith(':::')) {
+      const extracted = line.slice(3).split(' ')[0];
+      if (!extracted) {
+        buf.push(line);
+      } else {
+        const content = buf.splice(0).join('\n');
+        if (content) segments.push({ kind: 'text', content });
+        type = extracted;
+        openLine = line;
+      }
+    } else if (type && line.trimEnd() === ':::') {
+      segments.push({ kind: 'directive', type, content: buf.splice(0).join('\n') });
+      type = null;
+      openLine = null;
+    } else {
+      buf.push(line);
+    }
+  }
+
+  if (openLine) {
+    segments.push({ kind: 'directive', type, content: buf.join('\n') });
+  } else {
+    const tail = buf.join('\n');
+    if (tail) segments.push({ kind: 'text', content: tail });
+  }
+  return segments;
+}

nx2/blocks/chat/utils.js → nx2/blocks/chat/utils/stream.js

@@ -1,4 +1,4 @@
-import { AGENT_EVENT as EVENT, TOOL_SCOPE } from './constants.js';
+import { AGENT_EVENT as EVENT, TOOL_SCOPE } from '../constants.js';
 
 function processEvent(event, streaming, callbacks) {
   const { onDelta, onText, onTool } = callbacks;

test/nx2/blocks/chat/persistence.test.js

@@ -3,7 +3,7 @@ import {
   loadMessages,
   saveMessages,
   resetSession,
-} from '../../../../nx2/blocks/chat/persistence.js';
+} from '../../../../nx2/blocks/chat/utils/persistence.js';
 
 let counter = 0;
 const room = () => {

test/nx2/blocks/chat/renderers.test.js

@@ -0,0 +1,94 @@
+import { expect } from '@esm-bundle/chai';
+import { parseDirectives } from '../../../../nx2/blocks/chat/utils/parse.js';
+
+describe('parseDirectives', () => {
+  describe('plain text', () => {
+    it('returns a single text segment for plain text', () => {
+      const result = parseDirectives('hello world');
+      expect(result).to.deep.equal([{ kind: 'text', content: 'hello world' }]);
+    });
+
+    it('returns empty array for empty string', () => {
+      expect(parseDirectives('')).to.deep.equal([]);
+    });
+  });
+
+  describe('single directive', () => {
+    it('parses a basic directive', () => {
+      const text = ':::checklist\n- [x] Done\n:::';
+      expect(parseDirectives(text)).to.deep.equal([
+        { kind: 'directive', type: 'checklist', content: '- [x] Done' },
+      ]);
+    });
+
+    it('parses a hyphenated type', () => {
+      const text = ':::alert-error\nSomething failed.\n:::';
+      expect(parseDirectives(text)).to.deep.equal([
+        { kind: 'directive', type: 'alert-error', content: 'Something failed.' },
+      ]);
+    });
+  });
+
+  describe('mixed content', () => {
+    it('handles text before a directive', () => {
+      const text = 'Intro text.\n:::list\n- item\n:::';
+      const result = parseDirectives(text);
+      expect(result).to.deep.equal([
+        { kind: 'text', content: 'Intro text.' },
+        { kind: 'directive', type: 'list', content: '- item' },
+      ]);
+    });
+
+    it('handles text after a directive', () => {
+      const text = ':::list\n- item\n:::\nTrailing text.';
+      const result = parseDirectives(text);
+      expect(result).to.deep.equal([
+        { kind: 'directive', type: 'list', content: '- item' },
+        { kind: 'text', content: 'Trailing text.' },
+      ]);
+    });
+
+    it('handles multiple directives', () => {
+      const text = ':::list\n- a\n:::\n:::checklist\n- [x] b\n:::';
+      const result = parseDirectives(text);
+      expect(result).to.deep.equal([
+        { kind: 'directive', type: 'list', content: '- a' },
+        { kind: 'directive', type: 'checklist', content: '- [x] b' },
+      ]);
+    });
+  });
+
+  describe('bare ::: with no type', () => {
+    it('treats ::: with no type as plain text', () => {
+      expect(parseDirectives(':::')).to.deep.equal([{ kind: 'text', content: ':::' }]);
+    });
+
+    it('does not open a directive scope for bare :::', () => {
+      const text = ':::\n:::checklist\n- item\n:::';
+      const result = parseDirectives(text);
+      expect(result).to.deep.equal([
+        { kind: 'text', content: ':::' },
+        { kind: 'directive', type: 'checklist', content: '- item' },
+      ]);
+    });
+  });
+
+  describe('unclosed directive (streaming)', () => {
+    it('renders an unclosed directive as a directive with partial content', () => {
+      const text = ':::checklist\n- [x] partial';
+      const result = parseDirectives(text);
+      expect(result).to.deep.equal([
+        { kind: 'directive', type: 'checklist', content: '- [x] partial' },
+      ]);
+    });
+
+    it('renders completed and unclosed directives in order', () => {
+      const text = ':::list\n- done\n:::\n:::checklist\n- partial';
+      const result = parseDirectives(text);
+      expect(result).to.deep.equal([
+        { kind: 'directive', type: 'list', content: '- done' },
+        { kind: 'directive', type: 'checklist', content: '- partial' },
+      ]);
+    });
+  });
+});