Chat

Reading columnLesespalte

Reading columnLesespalte

Conversations sit in one centered column of at most 800 px; a deliberate exception to the full-width rule for app views, because long lines are hard to readUnterhaltungen stehen in einer zentrierten Spalte von höchstens 800 px; eine bewusste Ausnahme von der Vollbreiten-Regel für App-Ansichten, weil lange Zeilen schwer zu lesen sind

ScrollScrollen

The conversation scrolls; the chat dock stays at the bottom of the columnDie Unterhaltung scrollt; das Chat-Dock bleibt unten in der Spalte

BubbleBlase

QuestionFrage

Right-aligned, at most 600 px wide, Primary-100, radius 12 px with the top right corner square; the one place Primary-100 marks something other than a selection, because bubbles are not clickableRechtsbündig, höchstens 600 px breit, Primary-100, Radius 12 px mit eckiger oberer rechter Ecke; die einzige Stelle, an der Primary-100 nicht Auswahl bedeutet, weil Blasen nicht klickbar sind

AnswerAntwort

Full column width, secondary-100, radius 12 px with the top left corner squareVolle Spaltenbreite, secondary-100, Radius 12 px mit eckiger oberer linker Ecke

PaddingInnenabstand

16 px left and right, 12 px top and bottom, 12 px between blocks (text, chart, files, metrics)16 px links und rechts, 12 px oben und unten, 12 px zwischen Blöcken (Text, Diagramm, Dateien, Kennzahlen)

TextText

14 px Geist Light, secondary-90014 px Geist Light, secondary-900

FooterFußleiste

Time in 12 px secondary-700 and the context as light pills (vehicles, time frame, filters)Uhrzeit in 12 px secondary-700 und der Kontext als helle Pills (Fahrzeuge, Zeitraum, Filter)

ActionsAktionen

Dark tertiary inset icon buttons at the end of the footer: Copy answer, Helpful, Not helpful; they show on hover and focus, always on touch screens; Not helpful opens a small modal for feedbackDunkle Tertiary-Inset-Icon-Buttons am Ende der Fußzeile: Copy answer, Helpful, Not helpful; sie erscheinen bei Hover und Fokus, auf Touch-Bildschirmen immer; Not helpful öffnet ein kleines Modal für Feedback

ThinkingDenkt nach

An answer bubble with a 16 px spinner and the status text, e.g. Thinking…, Analyzing data…Eine Antwortblase mit einem 16-px-Spinner und dem Statustext, z. B. Thinking…, Analyzing data…

InputInput

Field frame (like every field), at least 72 px high; grows with the text; Enter sends, Shift+Enter adds a lineFeldrahmen (wie jedes Feld), mindestens 72 px hoch; wächst mit dem Text; Enter sendet, Shift+Enter fügt eine Zeile hinzu

Add contextKontext hinzufügen

Dark tertiary inset “+” on the left; opens a menu above: Add vehicle (@), Add union (#)Dunkles Tertiary-Inset-„+“ links; öffnet ein Menü darüber: Add vehicle (@), Add union (#)

SendSenden

Primary icon button arrow_up on the right; disabled while empty with the reason as tooltip; turns into Stop while an answer is comingPrimary-Icon-Button arrow_up rechts; deaktiviert, solange leer, mit dem Grund als Tooltip; wird zu Stop, während eine Antwort kommt

BannerBanner

Optional box above the input: title, one muted line, a secondary action and a close ×Optionale Box über der Eingabe: Titel, eine gedämpfte Zeile, eine Secondary-Aktion und ein Schließen-×

DisclaimerHinweis

12 px secondary-700 below the input with links to the terms and the privacy policy and the version12 px secondary-700 unter der Eingabe mit Links zu den Bedingungen und zur Datenschutzerklärung und der Version

UsageNutzung

16 px ring at the far right, filled in the app color by the share used; opens a popover with the limit, the reset time and a bar16-px-Ring ganz rechts, in der App-Farbe nach dem verbrauchten Anteil gefüllt; öffnet ein Popover mit dem Limit, der Zeit bis zum Zurücksetzen und einem Balken

FrameRahmen

Surface, 1 px line border, radius 16 px, 3 px rail on the left in the status color: error, warning or successFläche, 1-px-Rahmen in Linienfarbe, Radius 16 px, 3-px-Leiste links in der Statusfarbe: error, warning oder success

HeaderKopfzeile

Scope Tag (Fleet, Union, Vehicle) and time frame (in the user’s date format) in 12 px muted, the title in 14 px Medium, a 16 px chevron; the whole header opens and closes, hover secondary-100Bereichs-Tag (Fleet, Union, Vehicle) und Zeitraum (im Datumsformat des Nutzers) in 12 px gedämpft, der Titel in 14 px Medium, ein 16-px-Chevron; der ganze Kopf öffnet und schließt, Hover secondary-100

OpenOffen

Text, three metrics in boxes (one column while the card is narrower than 400 px, e.g. on phones and in the AI side panel), then the secondary buttons Open order analysis and Ask about the insightText, drei Kennzahlen in Boxen (eine Spalte, solange die Karte schmaler als 400 px ist, z. B. auf Handys und im KI-Seitenpanel), dann die Secondary-Buttons Open order analysis und Ask about the insight

GroupsGruppen

Insights are grouped under section labels with status dot and count: Needs attention, Worth monitoring, PositiveInsights sind unter Abschnitts-Labels mit Statuspunkt und Anzahl gruppiert: Needs attention, Worth monitoring, Positive

UseVerwendung

The AI chat next to the page it is about; the page stays usable, nothing is covered and there is no scrimDer KI-Chat neben der Seite, um die es geht; die Seite bleibt bedienbar, nichts wird verdeckt, kein Scrim

WidthBreite

420 px, full height at the right edge; the page gets narrower while it is open; below 768 px it covers the whole screen420 px, volle Höhe am rechten Rand; die Seite wird schmaler, solange es offen ist; unter 768 px deckt es den ganzen Bildschirm

PanelPanel

Float surface, square corners like the offcanvas, 1 px line border on the left, float shadowFloat-Fläche, eckig wie das Offcanvas, 1 px Linienrahmen links, Float-Schatten

HeaderKopfzeile

Like the offcanvas: title 16 px Geist Medium, close × 16 px from the borderWie beim Offcanvas: Titel 16 px Geist Medium, Schließen-× 16 px vom Rand

ContextKontext

“Looking at” in 12 px muted, then light pills for the current page, time frame and filters; they follow the page„Looking at“ in 12 px gedämpft, dann helle Pills für aktuelle Seite, Zeitraum und Filter; sie folgen der Seite

StartStart

An answer bubble with a short intro and suggestion chips (ai_spark) below; a chip asks its question at onceEine Antwortblase mit kurzer Einleitung und Vorschlags-Chips (ai_spark) darunter; ein Chip stellt seine Frage sofort

ConversationUnterhaltung

Chat bubbles in the panel width, 16 px apart; answers may hold points, an insight card and secondary buttons; follow-up chips below the last answerChat-Blasen in Panelbreite, 16 px Abstand; Antworten können Punkte, eine Insight-Karte und Secondary-Buttons enthalten; Folge-Chips unter der letzten Antwort

ThinkingDenkt nach

The thinking bubble with spinner and status text; the send button turns into StopDie Denk-Blase mit Spinner und Statustext; der Senden-Button wird zu Stop

ScrollScrollen

Only the conversation scrolls and jumps to the newest message; header and chat dock stay; a line above the dock only while the conversation scrollsNur die Unterhaltung scrollt und springt zur neuesten Nachricht; Kopf und Chat-Dock bleiben; eine Linie über dem Dock nur, solange die Unterhaltung scrollt

PaddingInnenabstand

Content panel: 16 px all round, the chat dock includedInhaltspanel: 16 px rundum, Chat-Dock eingeschlossen

OpeningÖffnen

From an Ask AI button (secondary, ai_spark) or from Ask AI in the search dialog, then with the question already asked; the button opens and closes itÜber einen Ask-AI-Button (Secondary, ai_spark) oder über Ask AI im Suchdialog, dann mit bereits gestellter Frage; der Button öffnet und schließt es

Closes onSchließt bei

× or Esc while the focus is inside; focus goes back to the button; the conversation stays until the page is left× oder Esc, solange der Fokus darin ist; der Fokus geht zurück zum Button; die Unterhaltung bleibt, bis die Seite verlassen wird