File size: 5,205 Bytes
f017e43 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
import { useState, useEffect, useRef } from 'react';
import ReactMarkdown from 'react-markdown';
import Stage1 from './Stage1';
import Stage2 from './Stage2';
import Stage3 from './Stage3';
import './ChatInterface.css';
export default function ChatInterface({
conversation,
onSendMessage,
isLoading,
}) {
const [input, setInput] = useState('');
const messagesEndRef = useRef(null);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
};
useEffect(() => {
scrollToBottom();
}, [conversation]);
const handleSubmit = (e) => {
e.preventDefault();
if (input.trim() && !isLoading) {
onSendMessage(input);
setInput('');
}
};
const handleKeyDown = (e) => {
// Submit on Enter (without Shift)
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSubmit(e);
}
};
if (!conversation) {
return (
<div className="chat-interface">
<div className="empty-state">
<h2>🩺 Welcome to Nursing Council</h2>
<p>Get expert feedback on your nursing education content from AI perspectives:</p>
<ul style={{ textAlign: 'left', maxWidth: '400px', margin: '1rem auto' }}>
<li>🎓 <strong>The Academic</strong> - NMC standards alignment</li>
<li>🏥 <strong>The Clinical Mentor</strong> - Ward realism</li>
<li>👩🎓 <strong>The Student Advocate</strong> - Accessibility</li>
</ul>
<p>Create a new review to get started</p>
</div>
</div>
);
}
return (
<div className="chat-interface">
<div className="messages-container">
{conversation.messages.length === 0 ? (
<div className="empty-state">
<h2>Start a conversation</h2>
<p>Paste your lesson plan, assessment, or educational content for review</p>
</div>
) : (
conversation.messages.map((msg, index) => (
<div key={index} className="message-group">
{msg.role === 'user' ? (
<div className="user-message">
<div className="message-label">You</div>
<div className="message-content">
<div className="markdown-content">
<ReactMarkdown>{msg.content}</ReactMarkdown>
</div>
</div>
</div>
) : (
<div className="assistant-message">
<div className="message-label">🩺 Nursing Council</div>
{/* Stage 1 */}
{msg.loading?.stage1 && (
<div className="stage-loading">
<div className="spinner"></div>
<span>Stage 1: Council members reviewing your content...</span>
</div>
)}
{msg.stage1 && <Stage1 responses={msg.stage1} />}
{/* Stage 2 */}
{msg.loading?.stage2 && (
<div className="stage-loading">
<div className="spinner"></div>
<span>Stage 2: Council members evaluating each other's feedback...</span>
</div>
)}
{msg.stage2 && (
<Stage2
rankings={msg.stage2}
labelToModel={msg.metadata?.label_to_model}
aggregateRankings={msg.metadata?.aggregate_rankings}
/>
)}
{/* Stage 3 */}
{msg.loading?.stage3 && (
<div className="stage-loading">
<div className="spinner"></div>
<span>Stage 3: Head of Nursing Education synthesizing recommendations...</span>
</div>
)}
{msg.stage3 && <Stage3 finalResponse={msg.stage3} />}
</div>
)}
</div>
))
)}
{isLoading && (
<div className="loading-indicator">
<div className="spinner"></div>
<span>The Nursing Council is deliberating...</span>
</div>
)}
<div ref={messagesEndRef} />
</div>
{conversation.messages.length === 0 && (
<form className="input-form" onSubmit={handleSubmit}>
<textarea
className="message-input"
placeholder="Paste your lesson plan, assessment, or educational content here... (Shift+Enter for new line, Enter to send)"
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={handleKeyDown}
disabled={isLoading}
rows={3}
/>
<button
type="submit"
className="send-button"
disabled={!input.trim() || isLoading}
>
Send
</button>
</form>
)}
</div>
);
}
|