AISuggestionChip

aisuggestionchip-1779388706005.tsx

'use client';
import { useState } from 'react';

export default function AISuggestionChip() {
  const [suggestions, setSuggestions] = useState([
    { text: 'Optimize database queries', confidence: 94, category: 'Performance' },
    { text: 'Add input validation', confidence: 87, category: 'Security' },
    { text: 'Implement caching layer', confidence: 82, category: 'Architecture' },
    { text: 'Write unit tests', confidence: 79, category: 'Quality' },
    { text: 'Update dependencies', confidence: 65, category: 'Maintenance' },
  ]);
  const [dismissed, setDismissed] = useState([]);
  const [accepted, setAccepted] = useState([]);

  const catColor = { Performance: '#6366f1', Security: '#ef4444', Architecture: '#C9A84C', Quality: '#4ade80', Maintenance: '#22d3ee' };

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '440px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
        <div style={{ width: '28px', height: '28px', borderRadius: '8px', background: 'rgba(99,102,241,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '16px' }}>🤖</div>
        <h3 style={{ color: '#F5F5F0', margin: 0, fontSize: '14px', fontWeight: 700 }}>AI Suggestions</h3>
        <span style={{ background: 'rgba(99,102,241,0.15)', color: '#6366f1', borderRadius: '6px', padding: '2px 8px', fontSize: '11px', fontWeight: 600 }}>{suggestions.filter((_, i) => !dismissed.includes(i)).length} active</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
        {suggestions.map((s, i) => {
          if (dismissed.includes(i)) return null;
          const isAccepted = accepted.includes(i);
          const color = catColor[s.category];
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: '12px',
              background: isAccepted ? 'rgba(74,222,128,0.06)' : 'rgba(255,255,255,0.03)',
              border: `1px solid ${isAccepted ? 'rgba(74,222,128,0.2)' : 'rgba(255,255,255,0.07)'}`,
              borderRadius: '10px', padding: '10px 14px',
            }}>
              <span style={{ background: color + '20', color, borderRadius: '6px', padding: '2px 8px', fontSize: '11px', fontWeight: 600, flexShrink: 0 }}>{s.category}</span>
              <span style={{ flex: 1, color: 'rgba(245,245,240,0.8)', fontSize: '13px' }}>{s.text}</span>
              <span style={{ color: 'rgba(245,245,240,0.35)', fontSize: '11px', flexShrink: 0 }}>{s.confidence}%</span>
              {!isAccepted ? (
                <div style={{ display: 'flex', gap: '6px' }}>
                  <button onClick={() => setAccepted(a => [...a, i])} style={{
                    background: 'rgba(74,222,128,0.1)', border: '1px solid rgba(74,222,128,0.2)',
                    borderRadius: '6px', padding: '4px 10px', color: '#4ade80', fontSize: '12px', cursor: 'pointer',
                  }}>✓</button>
                  <button onClick={() => setDismissed(d => [...d, i])} style={{
                    background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.2)',
                    borderRadius: '6px', padding: '4px 10px', color: '#ef4444', fontSize: '12px', cursor: 'pointer',
                  }}>✕</button>
                </div>
              ) : <span style={{ color: '#4ade80', fontSize: '12px' }}>✓ Applied</span>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

Component info

CategoryAI-Specific

Frameworkreact

TierFREE

Copies0

About

AI-generated suggestion chips with confidence score

More from AI-Specific

'use client'
import { useState } from 'react'

const TEMPLATES = [
  { id: 'role', label: 'System role', color: '#6366f1', content: 'You are a {role} expert who {expertise}.' },
  { id: 'task', label: 'Task', color: '#C9A84C', content: 'Your task is

PromptBuilder

AI-Specific

import React, { useState, useEffect } from 'react';

interface ChatBubbleProps {
  message: string;
  isAI: boolean;
}

const ChatBubble: React.FC<ChatBubbleProps> = ({ message, isAI }) => {
  const [isTyping, setIsTyping] = useState(false);
  const

ChatBubble

AI-Specific

import React, { useState, useEffect } from 'react';

interface Props {
  text: string;
  speed: number;
}

const StreamingText: React.FC<Props> = ({ text, speed }) => {
  const [displayedText, setDisplayedText] = useState('');
  const [tokens, setTok

StreamingText

AI-Specific

'use client'
import { useState, useRef, useEffect } from 'react'

interface Msg { id: number; role: 'user' | 'assistant'; content: string; streaming?: boolean }

const RESPONSES = [
  "Here's a React component for you:
```tsx
export default function

ChatInterface

AI-Specific