feat : better view of reasoning
This commit is contained in:
martin legrand
@@ -167,6 +167,88 @@ body {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Message header layout */
|
||||
.message-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.reasoning-toggle {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.reasoning-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.reasoning-toggle:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* Reasoning content container */
|
||||
.reasoning-content {
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-left: 3px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 0 4px 4px 0;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.reasoning-content h1,
|
||||
.reasoning-content h2,
|
||||
.reasoning-content h3,
|
||||
.reasoning-content h4,
|
||||
.reasoning-content h5,
|
||||
.reasoning-content h6 {
|
||||
font-size: 1em;
|
||||
margin: 8px 0 4px 0;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.reasoning-content p {
|
||||
margin: 6px 0;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* Alternative light theme styles */
|
||||
.message.user-message .reasoning-toggle {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.message.user-message .reasoning-toggle:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.message.user-message .reasoning-content {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-left-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.message.user-message .reasoning-content p {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #64748b; /* lighter gray */
|
||||
|
||||
@@ -13,6 +13,7 @@ function App() {
|
||||
const [responseData, setResponseData] = useState(null);
|
||||
const [isOnline, setIsOnline] = useState(false);
|
||||
const [status, setStatus] = useState('Agents ready');
|
||||
const [expandedReasoning, setExpandedReasoning] = useState(new Set());
|
||||
const messagesEndRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -75,6 +76,18 @@ function App() {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const toggleReasoning = (messageIndex) => {
|
||||
setExpandedReasoning(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(messageIndex)) {
|
||||
newSet.delete(messageIndex);
|
||||
} else {
|
||||
newSet.add(messageIndex);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
const fetchLatestAnswer = async () => {
|
||||
try {
|
||||
const res = await axios.get('http://127.0.0.1:8000/latest_answer');
|
||||
@@ -186,8 +199,6 @@ function App() {
|
||||
</header>
|
||||
<main className="main">
|
||||
<div className="app-sections">
|
||||
|
||||
|
||||
<div className="chat-section">
|
||||
<h2>Chat Interface</h2>
|
||||
<div className="messages">
|
||||
@@ -205,11 +216,29 @@ function App() {
|
||||
: 'error-message'
|
||||
}`}
|
||||
>
|
||||
<div className="message-header">
|
||||
{msg.type === 'agent' && (
|
||||
<span className="agent-name">{msg.agentName}</span>
|
||||
)}
|
||||
{msg.type === 'agent' && msg.reasoning && expandedReasoning.has(index) && (
|
||||
<div className="reasoning-content">
|
||||
<ReactMarkdown>{msg.reasoning}</ReactMarkdown>
|
||||
</div>
|
||||
)}
|
||||
{msg.type === 'agent' && (
|
||||
<button
|
||||
className="reasoning-toggle"
|
||||
onClick={() => toggleReasoning(index)}
|
||||
title={expandedReasoning.has(index) ? "Hide reasoning" : "Show reasoning"}
|
||||
>
|
||||
{expandedReasoning.has(index) ? '▼' : '▶'} Reasoning
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="message-content">
|
||||
<ReactMarkdown>{msg.content}</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
@@ -248,12 +277,6 @@ function App() {
|
||||
>
|
||||
Browser View
|
||||
</button>
|
||||
<button
|
||||
className={currentView === 'thinking' ? 'active' : ''}
|
||||
onClick={() => setCurrentView('thinking')}
|
||||
>
|
||||
Reasoning view
|
||||
</button>
|
||||
</div>
|
||||
<div className="content">
|
||||
{error && <p className="error">{error}</p>}
|
||||
@@ -279,33 +302,6 @@ function App() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : currentView == 'thinking' ? (
|
||||
<div className="thinking">
|
||||
<div className="messages">
|
||||
{messages.length === 0 ? (
|
||||
<p className="placeholder">No thinking yet.</p>
|
||||
) : (
|
||||
messages.map((msg, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`message ${
|
||||
msg.type === 'user'
|
||||
? 'user-message'
|
||||
: msg.type === 'agent'
|
||||
? 'agent-message'
|
||||
: 'error-message'
|
||||
}`}
|
||||
>
|
||||
{msg.type === 'agent' && (
|
||||
<span className="agent-name">{msg.agentName}</span>
|
||||
)}
|
||||
<ReactMarkdown>{msg.reasoning}</ReactMarkdown>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="screenshot">
|
||||
<img
|
||||
|
||||
Reference in New Issue
Block a user