EasyUI Logoeasyui

AI Response

A production-ready, accessible AI response component supporting streaming markdown, syntax-styled code blocks, citations, feedback actions, and tool execution status.

State:
Assistant/Claude 3.7 Sonnet

Component Analysis & Optimization

Based on the verified codebase audit, here is the recommended architecture for EasyUI motion integration:

All spring transitions must be imported directly from the unified motion tokens file to maintain 60fps hardware acceleration and physical consistency.

Implementation Example

typescript
import { motionTransitions } from '@/lib/motion-tokens';

export const cardAnimation = {
  whileHover: { scale: 1.02, y: -2 },
  transition: motionTransitions.springSnappy,
};

Verification Checklist

  • Respects prefers-reduced-motion media queries.
  • Utilizes CSS variables for zero-flash dark and light theme switching.
  • Standardized accessible focus-visible rings with 2px offset.

Feel free to request a custom benchmark or bundle size breakdown.

1.

EasyUI Motion System Documentation

Specifications for springSnappy, springGentle, and hardware-accelerated physics.

2.

tokens.css — Color Token Architecture

Theme-agnostic CSS variables: --bg, --surface, --border, --text-primary.

3.

W3C Web Content Accessibility Guidelines (WCAG 2.2)

Focus visible criteria, color contrast ratios, and reduced motion guidance.

Installation

Add the component directly to your repository using shadcn CLI:

npx shadcn@latest add Surajmaurya1/easyui/ai-response

API Reference

PropTypeDefaultDescription
contentstring''Markdown or plain text response generated by the AI model
status'idle' | 'generating' | 'streaming' | 'complete' | 'error' | 'cancelled''complete'Current generation lifecycle state
modelNamestring'EasyAI 2.0'Model identifier badge displayed in header
sourcesAIResponseSource[][]Array of citations or references referenced in the answer
onRegenerate() => voidundefinedOptional callback fired when the user clicks the regenerate button
onFeedback(type: 'like' | 'dislike') => voidundefinedOptional callback fired when the user provides quality feedback
childrenReactNodeundefinedOptional custom composition using AIResponse compound subcomponents
classNamestringundefinedCustom Tailwind class names for styling overrides