diff --git a/apps/apollo-vertex/app/guidelines/ai-toolkit/_meta.ts b/apps/apollo-vertex/app/guidelines/ai-toolkit/_meta.ts new file mode 100644 index 000000000..542f025e8 --- /dev/null +++ b/apps/apollo-vertex/app/guidelines/ai-toolkit/_meta.ts @@ -0,0 +1,4 @@ +export default { + index: "Visual Expression", + legal: "Legal", +}; diff --git a/apps/apollo-vertex/app/guidelines/ai-toolkit/activity-timeline.tsx b/apps/apollo-vertex/app/guidelines/ai-toolkit/activity-timeline.tsx index ba0d706a1..7529e87c8 100644 --- a/apps/apollo-vertex/app/guidelines/ai-toolkit/activity-timeline.tsx +++ b/apps/apollo-vertex/app/guidelines/ai-toolkit/activity-timeline.tsx @@ -1,3 +1,6 @@ +"use client"; + +import { Link2 } from "lucide-react"; import { cn } from "@/lib/utils"; import { Avatar, AvatarFallback } from "@/registry/avatar/avatar"; import { AiIcon } from "./ai-icon"; @@ -5,6 +8,52 @@ import { AiIcon } from "./ai-icon"; // Strong gradient for the completed-step marker (decorative, no text on it). const STRONG = "var(--ai-gradient-strong)"; +function SourceLink({ + label, + href, + isFirst = true, +}: { + label: string; + href: string; + isFirst?: boolean; +}) { + return ( + <> + {!isFirst && " and "} + { + if (href === "#") e.preventDefault(); + }} + > + {label} + + + ); +} + +function SourceList({ + sources, +}: { + sources: { label: string; href: string }[]; +}) { + return ( +

+

+ ); +} + type TimelineEvent = { title: string; detail?: string; @@ -12,6 +61,7 @@ type TimelineEvent = { // ai-upcoming: queued. ai-progress: running. ai-complete: done. user: a person acted. marker: "ai-upcoming" | "ai-progress" | "ai-complete" | "user"; initials?: string; + sources?: { label: string; href: string }[]; }; // A realistic invoice review trail, newest first, mixing agent and human steps. @@ -39,6 +89,10 @@ const ACTIVITY: TimelineEvent[] = [ detail: "PO matched, terms verified", time: "9:10 AM", marker: "ai-complete", + sources: [ + { label: "PO #8801", href: "#" }, + { label: "vendor terms", href: "#" }, + ], }, { title: "Data extracted", @@ -116,8 +170,8 @@ export function ActivityTimeline() {
    - {ACTIVITY.map((event, i) => { - const last = i === ACTIVITY.length - 1; + {ACTIVITY.map((event, idx) => { + const last = idx === ACTIVITY.length - 1; return (
  1. @@ -147,6 +201,9 @@ export function ActivityTimeline() { {event.detail}

    )} + {event.sources && event.sources.length > 0 && ( + + )}
    2. ); diff --git a/apps/apollo-vertex/app/guidelines/ai-toolkit/ai-input-field.tsx b/apps/apollo-vertex/app/guidelines/ai-toolkit/ai-input-field.tsx index d53569005..e78e05d80 100644 --- a/apps/apollo-vertex/app/guidelines/ai-toolkit/ai-input-field.tsx +++ b/apps/apollo-vertex/app/guidelines/ai-toolkit/ai-input-field.tsx @@ -16,7 +16,7 @@ import { AiIcon } from "./ai-icon"; export function AiInputField() { return ( - Job responsibility + Cost center
    {/* Gradient definition for the mark. */}
    + In placeLive in the toolkit today. + PlannedComing in a near-term follow-up. + Handled elsewhereOwned by platform or product teams, outside the design system. +
    + +## Requirement coverage + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    RequirementCovered byStatus
    Show the user they are working with AIMark and wordmarkIn place
    Mark AI-generated content visiblyAI generated badgeIn place
    Prompt the user to review AI outputAiCaveat, on recommendation, action, and AI-content surfacesIn place
    Show where the AI's information came fromSource line in the activity timelineIn place
    State what the AI can and cannot doScope line (AI Chat pattern)Planned
    Let the AI signal when it is unsureUncertainty statement (AI Chat pattern)Planned
    Warn before sensitive data goes to a toolData-clearance and egress warnings (AI Chat pattern)Planned
    Confirm before the AI takes an actionAction confirmation (AI Chat / actions pattern)Planned
    Collect feedback with a disclosureFeedback vote widget disclosurePlanned
    Data masking, access control, audit logs and retention, retrieval grounding, bias testing, human-in-the-loop configuration, approval workflowsOwned by platform, ML, and product teamsHandled elsewhere
    + +## Disclosure strings + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    StringBasisVerbatimWhere
    "The output is AI generated. Please review."Human-review flagYes, verbatimAiCaveat default copy
    "AI generated" (badge label)Transparency markingYes, as the labelBadge
    Source line, e.g. "From [sources]"Explainability (a capability, no fixed phrase in the guidance)N/A, our own UI labelTimeline marker
    + +## Source and legal basis + +Based on UiPath's internal in-product compliance guidance and the standards below. + +Legal basis: EU AI Act (Regulation (EU) 2024/1689), EU GDPR (Regulation 2016/679), the EU Charter of Fundamental Rights, the OECD Principles on AI, the EU HLEG Trustworthy AI Guidelines, and ISO/IEC 42001:2023. + +The requirement mapping and status reflect this team's interpretation of that guidance. diff --git a/apps/apollo-vertex/app/guidelines/ai-toolkit/mark-usage.tsx b/apps/apollo-vertex/app/guidelines/ai-toolkit/mark-usage.tsx index 0b3501688..0cfaa9fed 100644 --- a/apps/apollo-vertex/app/guidelines/ai-toolkit/mark-usage.tsx +++ b/apps/apollo-vertex/app/guidelines/ai-toolkit/mark-usage.tsx @@ -1,3 +1,6 @@ +"use client"; + +import { Link2 } from "lucide-react"; import type { ReactNode } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; @@ -87,17 +90,17 @@ export function MarkUsage() { - Picked for you + Best match +

    + These are sensible defaults; use them as-is when they fit. The variant + carries the meaning, not the label, so any label can take any variant; + choose by emphasis and how dense the surface is. The caveat that AI can + make mistakes is separate: it is not a badge passenger in any variant. + It belongs to the surface around the content, shown once at the + recommendation or action level. +

    + - +
    +

    + Source line. When an AI step drew on retrieved data, name where it came + from so the result is explainable and the user can trace it back. The + names link to the source. +

    + diff --git a/apps/apollo-vertex/app/guidelines/ai-toolkit/page.mdx b/apps/apollo-vertex/app/guidelines/ai-toolkit/page.mdx index 03bab062c..8779d08a9 100644 --- a/apps/apollo-vertex/app/guidelines/ai-toolkit/page.mdx +++ b/apps/apollo-vertex/app/guidelines/ai-toolkit/page.mdx @@ -1,11 +1,14 @@ +export const metadata = { title: 'AI Toolkit: Visual Expression' }; + import { ColorShowcase } from './color-showcase' +import { AiIcon } from './ai-icon' import { AiMark } from './ai-mark' import { MarkUsage } from './mark-usage' import { Surfaces } from './surfaces' import { Examples } from './examples' import { Badge } from '@/registry/badge/badge' -# AI Toolkit v1.0 +# Visual Expression v1.1 A working style guide for the AI expression across the design system: the mark (full size and small), the mark paired with the wordmark, and the mark inside @@ -14,6 +17,7 @@ components like badges and cards. ## Principles - **Match the expression to the moment.** A quiet tag marks provenance, a glow highlights a recommendation, the full mark signals a judgment call. +- **Disclose in proportion.** The more the AI decides, the more you tell the user. A tag is enough to show where something came from, a recommendation should point out what to check, and an action should ask before it runs. - **Mark the group once, not every control.** Set the AI context at the boundary so the mark keeps its meaning. - **Pair a glow with a label.** The glow draws the eye and the label says why. Limit it to one best match per view. - **Use it sparingly.** The expression only reads as special when most of the UI stays neutral. @@ -40,6 +44,8 @@ The mark, the `Astroid` icon, paired with the wordmark, set bold with tight lett Two fills: the AI gradient for expressive moments, and a solid fill for dense or small contexts. +The mark is not only brand. It is also the label that tells someone a feature is AI, the baseline transparency the EU AI Act calls for, so keep it visible wherever AI is at work rather than tucked behind a hover. + ## In components @@ -66,3 +72,7 @@ Compositions that combine the mark, color, and components into real patterns. Each example shows the AI expression working alongside standard UI. + +--- + +[See how this toolkit meets AI transparency and disclosure requirements →](/guidelines/ai-toolkit/legal) diff --git a/apps/apollo-vertex/app/guidelines/ai-toolkit/plan-selector.tsx b/apps/apollo-vertex/app/guidelines/ai-toolkit/plan-selector.tsx index 30facfc32..a3a68855f 100644 --- a/apps/apollo-vertex/app/guidelines/ai-toolkit/plan-selector.tsx +++ b/apps/apollo-vertex/app/guidelines/ai-toolkit/plan-selector.tsx @@ -4,6 +4,7 @@ import { ArrowRight, Check } from "lucide-react"; import { useState } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; +import { AiCaveat } from "@/registry/ai-caveat/ai-caveat"; import { Card } from "@/registry/card/card"; import { AiIcon } from "./ai-icon"; @@ -144,6 +145,8 @@ export function PlanSelector() { })} + +
    ); diff --git a/apps/apollo-vertex/app/guidelines/ai-toolkit/surfaces.tsx b/apps/apollo-vertex/app/guidelines/ai-toolkit/surfaces.tsx index c082e0a4b..963a89919 100644 --- a/apps/apollo-vertex/app/guidelines/ai-toolkit/surfaces.tsx +++ b/apps/apollo-vertex/app/guidelines/ai-toolkit/surfaces.tsx @@ -6,6 +6,7 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; +import { AiCaveat } from "@/registry/ai-caveat/ai-caveat"; import { AiGlow } from "@/registry/ai-glow/ai-glow"; import { AiIcon } from "./ai-icon"; import { AiInput } from "./ai-input"; @@ -78,7 +79,7 @@ export function Surfaces() { @@ -102,25 +103,27 @@ export function Surfaces() { denial. + - Recommended action + Resubmit denied claims - A soft primary surface used for calling attention to - recommended actions + 12 have corrected modifiers ready and close their 90-day + window this week. +
    @@ -131,9 +134,12 @@ export function Surfaces() { className="mt-0.5 size-5 shrink-0" gradientId="ai-card-gradient" /> -

    - Matches your request. $350/unit cheaper with EPP applied. -

    +
    +

    + Matches your request. $350/unit cheaper with EPP applied. +

    + +
    @@ -146,6 +152,16 @@ export function Surfaces() { Card (selectable) +

    + Caveat footer. The glow and badge carry the confidence up top; the + caveat sits quiet below, marked by a small info icon. Show it wherever + AI generates content the user reads or acts on: recommendations, + actions, and AI-generated insights. The mark, badges, and buttons are + identity, not content, so they don't need it. Disclose once per + surface: a footer on a single card, once under the mark for a group + headed by the mark, and once below the group for a grid of + equal-height cards. +

    @@ -185,6 +201,7 @@ export function Surfaces() { AI Identity
    +
    + {children ?? defaultCopy} + + ); + } + + return ( + + + ); +}