85 lines
2.8 KiB
JavaScript
85 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import Mark from '../ui/Mark';
|
|
import { STRINGS } from './prompts';
|
|
|
|
/**
|
|
* Renders one message bubble. Assistant messages may include a `suggestion`
|
|
* (validated graph delta) — the user confirms or rejects inline.
|
|
*/
|
|
export default function ChatMessage({ msg, onAcceptSuggestion, onRejectSuggestion }) {
|
|
if (msg.role === 'user') {
|
|
return (
|
|
<div className="r42-msg me">
|
|
<div className="bub">{msg.content}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (msg.role === 'error') {
|
|
return (
|
|
<div className="r42-msg error">
|
|
<div className="av-sm">
|
|
<Mark state="error" size={20} brace="#ECE9E9" letter="#ECE9E9" />
|
|
</div>
|
|
<div className="bub">{msg.content}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// assistant
|
|
const s = msg.suggestion;
|
|
return (
|
|
<div className="r42-msg">
|
|
<div className="av-sm">
|
|
<Mark state="idle" size={20} brace="#ECE9E9" letter="#ECE9E9" />
|
|
</div>
|
|
<div>
|
|
<div className="bub">{msg.content}</div>
|
|
{s && (
|
|
<div className="r42-suggestion" role="group" aria-label="Voorstel kennisgraaf">
|
|
<div className="r42-suggestion-title">{STRINGS.suggestionTitle}</div>
|
|
{s.reason && <div style={{ marginBottom: 6 }}>{s.reason}</div>}
|
|
{(s.topics.length > 0 || s.relations.length > 0) && (
|
|
<ul className="r42-suggestion-items">
|
|
{s.topics.map(t => (
|
|
<li key={`t-${t.id}`}>
|
|
<strong>{t.label}</strong>{' '}
|
|
<span style={{ opacity: 0.7 }}>({t.type})</span>
|
|
</li>
|
|
))}
|
|
{s.relations.map((r, i) => (
|
|
<li key={`r-${i}`}>
|
|
<code>{r.source}</code>{' '}
|
|
<span style={{ opacity: 0.7 }}>{r.type}</span>{' → '}
|
|
<code>{r.target}</code>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{s.status === 'pending' ? (
|
|
<div className="r42-suggestion-actions">
|
|
<button
|
|
type="button"
|
|
className="primary"
|
|
onClick={() => onAcceptSuggestion(msg.id)}
|
|
>
|
|
{STRINGS.suggestionAccept}
|
|
</button>
|
|
<button type="button" onClick={() => onRejectSuggestion(msg.id)}>
|
|
{STRINGS.suggestionReject}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="r42-suggestion-status">
|
|
{s.status === 'applied' && STRINGS.suggestionAppliedAdmin}
|
|
{s.status === 'queued' && STRINGS.suggestionQueuedUser}
|
|
{s.status === 'rejected' && STRINGS.suggestionDismissed}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|