stephane.david/agenticSeek
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : better view of reasoning

Browse Source
This commit is contained in:
martin legrand
2025-05-24 12:45:10 +02:00
parent 0f116cc3d0
commit d375359582
2 changed files with 118 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/agentic-seek-front/src/App.css
+82
View File
@@ -167,6 +167,88 @@ body {
margin-bottom: 8px; 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 { .placeholder {
text-align: center; text-align: center;
color: #64748b; /* lighter gray */ color: #64748b; /* lighter gray */
frontend/agentic-seek-front/src/App.js
+31 -35
View File
@@ -13,6 +13,7 @@ function App() {
const [responseData, setResponseData] = useState(null); const [responseData, setResponseData] = useState(null);
const [isOnline, setIsOnline] = useState(false); const [isOnline, setIsOnline] = useState(false);
const [status, setStatus] = useState('Agents ready'); const [status, setStatus] = useState('Agents ready');
const [expandedReasoning, setExpandedReasoning] = useState(new Set());
const messagesEndRef = useRef(null); const messagesEndRef = useRef(null);
useEffect(() => { useEffect(() => {
@@ -75,6 +76,18 @@ function App() {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); 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 () => { const fetchLatestAnswer = async () => {
try { try {
const res = await axios.get('http://127.0.0.1:8000/latest_answer'); const res = await axios.get('http://127.0.0.1:8000/latest_answer');
@@ -186,8 +199,6 @@ function App() {
</header> </header>
<main className="main"> <main className="main">
<div className="app-sections"> <div className="app-sections">
<div className="chat-section"> <div className="chat-section">
<h2>Chat Interface</h2> <h2>Chat Interface</h2>
<div className="messages"> <div className="messages">
@@ -205,11 +216,29 @@ function App() {
: 'error-message' : 'error-message'
}`} }`}
> >
<div className="message-header">
{msg.type === 'agent' && ( {msg.type === 'agent' && (
<span className="agent-name">{msg.agentName}</span> <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> <ReactMarkdown>{msg.content}</ReactMarkdown>
</div> </div>
</div>
)) ))
)} )}
<div ref={messagesEndRef} /> <div ref={messagesEndRef} />
@@ -248,12 +277,6 @@ function App() {
> >
Browser View Browser View
</button> </button>
<button
className={currentView === 'thinking' ? 'active' : ''}
onClick={() => setCurrentView('thinking')}
>
Reasoning view
</button>
</div> </div>
<div className="content"> <div className="content">
{error && <p className="error">{error}</p>} {error && <p className="error">{error}</p>}
@@ -279,33 +302,6 @@ function App() {
</div> </div>
)} )}
</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"> <div className="screenshot">
<img <img