AI conversation
A conversation with Mai
Thought for 6 seconds
The three emails agree on the 30 October launch12. You need to decide one thing: whether the pilot runs on NorthStar Admiral Server on-premises or in the approved cloud3.
3 sources
Re: Pilot timeline · Omar Khalid · 12 Oct
Launch checklist v3 · Layla Haddad · 13 Oct
Hosting decision request · Ministry of Water · 14 Oct
Dear colleagues, thank you for the hosting request. We recommend running the pilot on NorthStar Admiral Server inside your perimeter, so
Conversations people can trust
North agents work on sensitive material inside a customer's perimeter. The conversation shows what the agent read, which model answered and where it ran, and always leaves the person in command.
- Show the work, in proportion. Reasoning, sources and tool calls are one click away, collapsed by default. Never hide them, never flood the answer with them.
- Say where it ran. The model and its location (on-premises or approved cloud) sit with every answer.
- Cite, don't assert. Facts from documents carry numbered citations to the exact source.
- Ask before acting. Anything that sends, deletes, pays or changes access needs a confirmation. See Agent activity.
- Recoverable. Stop, retry, edit and branch at any point; nothing the agent does is a dead end.
Messages
| Part | Spec |
|---|---|
| Person | Right-aligned bubble, panel background, radius 18 with the bottom-trailing corner at 4, max 80% width. No avatar, no name in one-to-one chat. |
| Agent | Full width, no bubble: answers are documents, not chat lines. 32px avatar with the agent's orb (AI tone), name in Text SemiBold 13.5px, model and location in caption. |
| Body | Text 15/1.6, Midnight 60 (Midnight 20 on dark); Markdown rendered with the hub's type, tables, lists and code blocks. |
| Spacing | 22px between messages, 6px between parts of one message; content column max 760px. |
| Time | On hover, or as a divider between days (“Today”, “Monday 13 October”). Never on every message. |
Message actions
Under the agent's answer, in this order: branch navigation (when there are versions), copy, regenerate, rate (thumbs up, thumbs down with an optional reason), branch from here. 30px icon buttons with tooltips; visible on hover and focus, always visible on the latest answer and on touch. The person's own messages offer edit and copy.
Streaming
- Before the first word: the orb in the avatar shows the state (thinking, searching, composing), with the status line under the name.
- While streaming: text appears in place with a 2px-wide caret in the AI colour at the end. Don't animate each word; don't auto-scroll if the person has scrolled up (show a “Jump to latest” button instead).
- Stopped: keep the partial answer, mark it “Stopped” in caption, offer Continue and Regenerate.
- Shimmer text (a highlight sweeping across a caption label) is for one short status label at a time, such as Thinking…
Composer
One field, quiet tools
- Radius 20, 1px UI border, raised surface, shadow 1; focus ring like any input. Grows with the text up to 240px, then scrolls.
- Placeholder says what the agent can do: “Ask Mai, or type / for commands”. Enter sends, Shift+Enter adds a line (configurable).
- Leading tools: attach, voice. Then the model button. Trailing: the context meter and the round 36px send button.
- Send is disabled while the field is empty. While the agent answers, send becomes stop (Midnight square). Never disable the field while the agent works: the next message waits in the queue.
- Slash commands and @mentions open a menu above the field, filtered as the person types.
Hosting-request.pdf1.2 MBBudget-2027.xlsxClassified: not sentAttachments
| Variant | Where | Shows |
|---|---|---|
| Thumbnails (72px, radius 12) | Images in the composer and in sent messages | Preview, remove button top-right (top-left in RTL) |
| File chips (40px) | Documents in the composer | Type icon, name (truncated in the middle if long), size, remove |
| List rows | Sources panel, message details | Icon, full name, size, owner, date, open |
- Upload progress replaces the size with a percentage and a thin bar; failures turn the chip red with the reason (“Too large: 25 MB maximum”).
- Classification matters: files the policy keeps out of a model show a lock and “Classified: not sent”, and are never silently dropped.
- Drag-and-drop over the composer shows a dashed Oasis outline and “Drop to attach”.
Choosing a model
Where it runs comes first
- The model button shows the current model with its 20px tile from the technology logo set.
- The menu groups models by where they run: On-premises first, then Approved cloud. Each row: tile, model name, where it runs, and a caption for speed or context size.
- Models the policy doesn't allow for the current workspace are disabled with the reason, not hidden.
- Changing model mid-conversation adds a small divider: “Switched to Claude · approved cloud”.
Context meter
A small ring before the send button shows how much of the model's context the conversation uses. Hover or focus shows the numbers (“42k of 128k tokens”). From 80% the ring turns to the warning colour and the tooltip offers “Summarise and continue”. At 100% the composer explains what happens next; never silently drop earlier messages.
Sources and citations
Numbered, close to the claim
- Inline citations: 18px numbered pills right after the sentence they support, in the link colour. Hover or focus opens a card with the title, author or system, date and the quoted passage.
- Sources list under the answer, collapsed: “3 sources”. Each row: icon or tile, title, owner and date. The numbers match the inline pills.
- Cite the exact document and passage. Never cite a whole system (“SharePoint”) or a search page.
- Answers without sources say so when it matters: “From the model's general knowledge, not your documents.”
The pilot launches on 30 October1.
“We hold 30 October for the pilot launch, subject to the hosting decision.”
Suggestions
Suggested follow-ups
Up to three follow-up chips after an answer or on an empty conversation, phrased as the person would say them. They disappear once the person types. No suggestions while the agent is working.
Voice
- The mic button starts listening: the composer shows the listening orb (20px) and a live transcript in caption colour; the mic becomes a stop button.
- The transcript is editable before sending. Never send voice input automatically unless the person chose hands-free mode.
- Choose the microphone and voice in settings, not in the composer. Speaking answers use the agent's orb in the speaking state of the voice UI, not a waveform logo.
- Arabic and English recognition follow the workspace language; mixed speech is transcribed as spoken.
Empty conversation
A new conversation shows the agent's 64px orb (breathing, paused), one sentence about what it can do with this workspace (“Mai can read your mail, calendar and files in NorthStar”), up to three suggestions and the composer. No marketing, no feature tour.
Dos and don'ts
Do
- Show the model and where it ran.
- Cite exact sources next to the claim.
- Let people stop, edit, retry and branch.
- Keep the composer usable while the agent works.
Don't
- Put the agent's answers in chat bubbles.
- Hide reasoning or tool calls entirely.
- Auto-scroll while someone is reading.
- Drop classified attachments without telling the person.
Code
<div class="n-chat">
<div class="n-msg n-msg--user"><div class="n-msg__body">Summarise the planning emails.</div></div>
<div class="n-msg">
<span class="n-msg__avatar"><n-orb state="composing" size="20" tone="ai"></n-orb></span>
<div>
<p class="n-msg__meta">Mai <small>Skipper · on-premises</small></p>
<div class="n-msg__body">The pilot launches on 30 October<a class="n-cite" href="#src-1">1</a>.<span class="n-caret"></span></div>
</div>
</div>
</div>
<div class="n-prompt">
<textarea placeholder="Ask Mai"></textarea>
<div class="n-prompt__bar">… <span class="n-spacer"></span><button class="n-prompt__send" aria-label="Send">…</button></div>
</div>Last updated on 14 October 2026