AI Context Awareness
AI
Trust
Governor
Shows what context and information the AI has access to in the current conversation. Displays active documents, conversation history, user profile data, and external sources with access levels and freshness indicators.
Indicator Variant
Compact context badge with tooltip
3 context
1 stale
Compact Variant
Inline list of context items
Context
Chat history
project-spec.pdf
User preferences
API documentation
Panel Variant
Collapsible sidebar panel
Context usage78%
Chat history
Active•5m ago
project-spec.pdf
Active•30m ago
User preferences
Active•2h ago
API documentation
Stale•1d ago
Detailed Variant
Full breakdown with actions and token usage
Context Awareness
What the AI knows about this conversation
3
Total
3
Active
0
Stale
Context Window8,200 / 16,000 tokens
The AI uses this context to provide relevant responses
Props
AIContextAwareness component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
contextItems* | ContextItem[] | — | List of context items the AI has access to |
stats | ContextStats | — | Overall context statistics (calculated if not provided) |
onRemoveContext | (contextId: string) => void | — | Callback when user removes a context item |
onRefreshContext | (contextId: string) => void | — | Callback when user refreshes a context item |
onToggleAccess | (contextId: string, access: ContextAccess) => void | — | Callback when user toggles context access |
showDetails | boolean | false | Whether to show detailed view |
variant | 'indicator' | 'compact' | 'panel' | 'detailed' | 'indicator' | Display mode variant |
showTokenUsage | boolean | true | Show token usage bar |
showPrivacyIndicators | boolean | true | Show privacy indicators for sensitive data |
collapsible | boolean | false | Allow collapsing in panel/detailed mode |
defaultCollapsed | boolean | false | Default collapsed state |
className | string | — | Additional CSS classes |
ContextItem Type
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | — | Unique context identifier |
type* | 'conversation' | 'document' | 'user_profile' | 'system' | 'external' | 'temporal' | — | Type of context |
label* | string | — | Display label |
description | string | — | Detailed description |
status* | 'active' | 'stale' | 'expired' | 'refreshing' | — | Freshness status |
access* | 'full' | 'partial' | 'none' | — | Access level |
lastUpdated | Date | — | Last update timestamp |
expiresAt | Date | — | Expiration timestamp |
size | string | — | File size (for documents) |
isPrivate | boolean | — | Whether data is private/sensitive |
canRemove | boolean | — | Whether user can remove this context |
canRefresh | boolean | — | Whether context can be refreshed |
Usage
Import and implementation example
import { AIContextAwareness } from '@/blocks/ai-transparency/ai-context-awareness'
export default function ChatInterface() { const contextItems = [ { id: '1', type: 'conversation', label: 'Chat history', status: 'active', access: 'full', lastUpdated: new Date(), }, { id: '2', type: 'document', label: 'requirements.pdf', status: 'active', access: 'full', size: '1.2 MB', canRemove: true, lastUpdated: new Date(), }, { id: '3', type: 'user_profile', label: 'Your preferences', status: 'active', access: 'partial', isPrivate: true, lastUpdated: new Date(), }, ]
const handleRemove = (id: string) => { // Remove context item }
const handleRefresh = (id: string) => { // Refresh stale context }
const handleToggleAccess = (id: string, access: string) => { // Toggle access level }
return ( <AIContextAwareness contextItems={contextItems} variant="panel" showTokenUsage={true} showPrivacyIndicators={true} stats={{ totalItems: 3, activeItems: 3, staleItems: 0, tokenUsage: 8500, maxTokens: 16000, }} onRemoveContext={handleRemove} onRefreshContext={handleRefresh} onToggleAccess={handleToggleAccess} /> )}Built With
3 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Multiple context types: Conversation, documents, user profile, system, external, temporal
- Access level indicators: Full, partial, or no access visualization
- Freshness tracking: Active, stale, expired, or refreshing status
- Token usage visualization: Progress bar showing context window usage
- Privacy indicators: Lock icons for sensitive/private data
- Refresh capability: Update stale context with refresh button
- Remove context: Allow users to remove unnecessary context
- Access control: Toggle AI access to specific context items
- Time formatting: Relative time display (e.g., "5m ago", "2h ago")
- Dark mode support: Full dark mode with proper contrast
Accessibility
ARIA support and keyboard navigation
ARIA Attributes
Interactive buttons use semantic button elementsCollapse/expand states indicated with chevron iconsStatus indicators use both color and iconsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate through actions and items |
| Enter / Space | Activate buttons |
Notes
- Color coding supplemented with icons and text labels
- Privacy indicators clearly marked with lock icons
- Token usage shown as both progress bar and text
- Consider adding aria-live for dynamic context updates