blob: 951183fc87f38b7a37fa4a3a6126909ebf2420e1 (
plain)
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
|
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 LLM Council</h2>
<p>Create a new conversation 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>Ask a question to consult the LLM Council</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">LLM Council</div>
<Stage1 responses={msg.stage1} />
<Stage2
rankings={msg.stage2}
labelToModel={msg.metadata?.label_to_model}
aggregateRankings={msg.metadata?.aggregate_rankings}
/>
<Stage3 finalResponse={msg.stage3} />
</div>
)}
</div>
))
)}
{isLoading && (
<div className="loading-indicator">
<div className="spinner"></div>
<span>Consulting the council...</span>
</div>
)}
<div ref={messagesEndRef} />
</div>
<form className="input-form" onSubmit={handleSubmit}>
<textarea
className="message-input"
placeholder="Ask your question... (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>
);
}
|
