Components / AI interfaces
Sources and citations
Citations inside an answer and the list of sources they point to.
Functions: cui_citation, cui_source_list
Usage
static const cui_source sources[] = { { "Notes on subpixel text positioning", "https://glyphlab.io/notes/subpixel", "Shaping, hinting and..." } /* ... */ };
for (int k = 0; k < n; k++) cui_citation(ui, k + 1, &sources[k]); /* a chip; hover for a card */
int open = cui_source_list(ui, "sources", sources, n); /* cards that scroll sideways */Citations show the source's domain and open a card with the title and snippet when hovered. Source cards get a colored initial (always the same for a domain), the title and the source's number.
cui_source_list returns the index of the card that was clicked, or -1, and cui_citation returns true when its chip is clicked. Neither opens anything: opening the URL is up to you. sources is your array of cui_source, only read: a title, a URL and a snippet. The domain shown is cut from the URL, and a source without a title shows its domain there too. A citation takes the number to show and a pointer to its source; with NULL the chip shows the number and has no card. Its identity comes from the number, so the same number twice in one scope needs a cui_id_scope around each answer.
Keyboard
- Tab moves through the sources and the citation marks, and Enter or Space opens the focused one.
cui_source
| Field | Type | Description |
|---|---|---|
title | const char * | the card's heading; NULL shows the URL's domain |
url | const char * | the address: its domain is shown, and the whole URL as the card's tooltip |
snippet | const char * | an excerpt, shown in the hover card of a citation |
Related
- Composer and model picker: The message box of a chat, with attachments, send and stop, and a menu for choosing the model.
- Agent plan and status: The steps an agent is working through, and a pill that says what it is doing now.
- Suggestions, response actions and the context meter: Prompt suggestions to start from, the actions under a response, and a ring that shows how full the context is.
- Reasoning and tool calls: A folding block for a model's reasoning, and a row for each tool it calls with its status.