# code/editor/DiagnosticAnnotation (zidane-ui/code/editor)

Import: `import { … } from 'zidane-ui/code/editor'`. Source: [ui/src/code/editor/DiagnosticAnnotation.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/DiagnosticAnnotation.tsx).

## Components

### `DiagnosticAnnotation`

Component.

Lists the findings on one line under that line, each with its glyph, message, source and code.

```ts
function DiagnosticAnnotation<D extends EditorDiagnostic>(
  props: DiagnosticAnnotationProps<D>,
): Element
```

**Type parameters**

- `D` (`extends EditorDiagnostic`)

**Parameters**

- `props` (`DiagnosticAnnotationProps<D>`): `items`: the line's findings; `onAddToChat`: shows a per-finding "Add to chat" button.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.
- `items` (`readonly D[]`): The findings on this line, in display order.
- `onAddToChat?` (`(d: D) => void`): Called with a finding when its "Add to chat" button is pressed. The button is hidden without it.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/code/editor/DiagnosticAnnotation.tsx:30](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/DiagnosticAnnotation.tsx#L30)

## Interfaces

### `DiagnosticAnnotationProps`

Interface.

Props for [`DiagnosticAnnotation`](https://zidane.si/docs/reference/ui-code-editor-diagnostic-annotation.md#DiagnosticAnnotation).

```ts
interface DiagnosticAnnotationProps<D extends EditorDiagnostic>
```

**Type parameters**

- `D` (`extends EditorDiagnostic`)

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `items` (`readonly D[]`): The findings on this line, in display order.
- `onAddToChat?` (`(d: D) => void`): Called with a finding when its "Add to chat" button is pressed. The button is hidden without it.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/code/editor/DiagnosticAnnotation.tsx:14](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/DiagnosticAnnotation.tsx#L14)