Testcraft Studio frontend 11: src/ChatResults.jsx

import React from 'react';
import Icon from './Icon.jsx';
import { Badge, Button } from './ui.jsx';

export function ChatSources({ citations = [], onSource }) {
  if (!citations.length) return null;
  return <div className="chat-source-list" aria-label="Supporting sources">{citations.map((citation, index) => <button key={citation.id} onClick={() => onSource(citation)} className="chat-source-link">
    <span className="chat-source-number">{index + 1}</span><span><strong>{citation.name}</strong><small>Revision {citation.revision} · {citation.locator || 'Document excerpt'}</small></span><Icon name="external" size={13}/>
  </button>)}</div>;
}

export function ChatTestDraft({ message, savedSuite, historical, busy, onSource, onSave, onOpen, onExport, onPrompt }) {
  const suite = message.draft;
  return <section className="chat-test-draft" aria-label={`${suite.kind} test-case draft`}>
    <div className="chat-draft-heading"><span className="chat-draft-icon"><Icon name="checkSquare" size={21}/></span><div><h3>{suite.kind} test cases</h3><p>{suite.tests.length} scenarios · {suite.templateSnapshot.name}</p></div><Badge tone={savedSuite ? 'green' : 'purple'}>{savedSuite ? 'Saved to suite' : 'Draft'}</Badge></div>
    <div className="chat-draft-meta"><span><Icon name="branch" size={13}/>Context {suite.version}</span><span>Template v{suite.templateSnapshot.version}</span><span>Source-linked expected results</span></div>
    <div className="chat-test-list">{suite.tests.map((test, index) => <details className="chat-test-case" key={test.id} open={suite.tests.length <= 3 || index === 0}>
      <summary><span className="chat-case-index">{String(index + 1).padStart(2, '0')}</span><span><small>{test.id} · {test.requirement}</small><strong>{test.title}</strong></span><Badge tone={test.category === 'Negative' ? 'amber' : 'neutral'}>{test.category}</Badge><Icon name="down" size={15}/></summary>
      <div className="chat-case-body"><p className="chat-case-objective">{test.objective}</p><div className="chat-case-facts"><div><h4>Preconditions</h4><p>{test.preconditions}</p></div><div><h4>Test data</h4><p>{test.data}</p></div></div><h4>Steps</h4><ol>{test.steps.map((step, index) => <li key={index}>{step}</li>)}</ol><div className="chat-case-expected"><h4>Expected result</h4><p>{test.expected}</p></div><div className="chat-case-bottom"><span>{test.priority} priority</span>{test.sourceIds.map(id => { const citation = message.citations?.find(item => item.id === id); return citation && <button key={id} onClick={() => onSource(citation)}><Icon name="file" size={12}/>{citation.name}<Icon name="external" size={11}/></button>; })}</div></div>
    </details>)}</div>
    <div className="chat-draft-actions">{savedSuite ? <Button variant="primary" icon="checkSquare" onClick={() => onOpen(savedSuite.id)}>Open test suite</Button> : <Button variant="primary" icon="check" disabled={historical || busy} onClick={() => onSave(message)}>Save to test suite</Button>}<Button icon="external" disabled={historical || busy} onClick={() => onExport(message)}>Export CSV</Button><Button icon="chat" disabled={historical || busy} onClick={() => onPrompt('Add negative scenarios')}>Refine in chat</Button></div>
  </section>;
}