fix(chat): unify OpenCode notice styling

This commit is contained in:
Bohdan Triapitsyn
2026-08-23 19:13:14 +03:00
parent 264ea02ee1
commit 1af8b14bbb
2 changed files with 5 additions and 24 deletions
@@ -705,30 +705,25 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
} }
if (errorName === 'SessionRetry') { if (errorName === 'SessionRetry') {
return { return {
text: `Opencode failed to send a message. Retry attempt info: \n\`${detail}\``, text: `Opencode failed to send a message. Retry attempt info: ${detail}`,
variant: 'info' as const,
}; };
} }
if (isLikelyProviderAuthFailure(detail)) { if (isLikelyProviderAuthFailure(detail)) {
return { return {
text: PROVIDER_AUTH_FAILURE_MESSAGE, text: PROVIDER_AUTH_FAILURE_MESSAGE,
variant: 'error' as const,
}; };
} }
if (detail.trim().toLowerCase() === 'aborted') { if (detail.trim().toLowerCase() === 'aborted') {
return { return {
text: 'The running turn was stopped before OpenCode could send the next message.', text: 'The running turn was stopped before OpenCode could send the next message.',
variant: 'info' as const,
}; };
} }
return { return {
text: `Opencode failed to send message with error:\n\`${detail}\``, text: `Opencode failed to send message with error: ${detail}`,
variant: 'error' as const,
}; };
}, [isUser, message.info]); }, [isUser, message.info]);
const assistantErrorText = assistantError?.text; const assistantErrorText = assistantError?.text;
const assistantErrorVariant = assistantError?.variant;
const messageTextContent = React.useMemo(() => { const messageTextContent = React.useMemo(() => {
if (isUser) { if (isUser) {
@@ -1089,7 +1084,6 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
contextPinPending={pinPending} contextPinPending={pinPending}
onToggleContextPin={canPinIntoContext && messageCreatedAt ? handleToggleContextPin : undefined} onToggleContextPin={canPinIntoContext && messageCreatedAt ? handleToggleContextPin : undefined}
errorMessage={assistantErrorText} errorMessage={assistantErrorText}
errorVariant={assistantErrorVariant}
userActionsMode={useExternalUserActionsRow ? 'external-content' : 'inline'} userActionsMode={useExternalUserActionsRow ? 'external-content' : 'inline'}
stickyUserHeaderEnabled={stickyUserHeader} stickyUserHeaderEnabled={stickyUserHeader}
/> />
@@ -1126,7 +1120,6 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
contextPinPending={pinPending} contextPinPending={pinPending}
onToggleContextPin={canPinIntoContext && messageCreatedAt ? handleToggleContextPin : undefined} onToggleContextPin={canPinIntoContext && messageCreatedAt ? handleToggleContextPin : undefined}
errorMessage={assistantErrorText} errorMessage={assistantErrorText}
errorVariant={assistantErrorVariant}
userActionsMode="external-actions" userActionsMode="external-actions"
stickyUserHeaderEnabled={stickyUserHeader} stickyUserHeaderEnabled={stickyUserHeader}
/> />
@@ -1169,7 +1162,6 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
agentMention={agentMention} agentMention={agentMention}
turnGroupingContext={turnGroupingContext} turnGroupingContext={turnGroupingContext}
errorMessage={assistantErrorText} errorMessage={assistantErrorText}
errorVariant={assistantErrorVariant}
reviewTransferDirection={reviewTransferDirection} reviewTransferDirection={reviewTransferDirection}
footerProviderID={headerProviderID} footerProviderID={headerProviderID}
footerModelName={headerModelName} footerModelName={headerModelName}
@@ -432,7 +432,6 @@ interface MessageBodyProps {
onRevert?: () => void; onRevert?: () => void;
onFork?: () => void; onFork?: () => void;
errorMessage?: string; errorMessage?: string;
errorVariant?: 'error' | 'info';
userActionsMode?: 'inline' | 'external-content' | 'external-actions'; userActionsMode?: 'inline' | 'external-content' | 'external-actions';
stickyUserHeaderEnabled?: boolean; stickyUserHeaderEnabled?: boolean;
reviewTransferDirection?: ReviewTransferDirection | null; reviewTransferDirection?: ReviewTransferDirection | null;
@@ -1094,7 +1093,6 @@ const AssistantMessageBody = React.memo(({
showReasoningTraces = false, showReasoningTraces = false,
turnGroupingContext, turnGroupingContext,
errorMessage, errorMessage,
errorVariant = 'error',
reviewTransferDirection = null, reviewTransferDirection = null,
contextPinned, contextPinned,
contextPinPending, contextPinPending,
@@ -1704,7 +1702,6 @@ const AssistantMessageBody = React.memo(({
const shouldDeferSortedInlineText = isSortedRenderMode && !hasStopFinish; const shouldDeferSortedInlineText = isSortedRenderMode && !hasStopFinish;
const showErrorMessage = Boolean(errorMessage); const showErrorMessage = Boolean(errorMessage);
const errorIconName = errorVariant === 'info' ? 'information' : 'error-warning';
const isPeekSurface = chatSurfaceMode === 'peek'; const isPeekSurface = chatSurfaceMode === 'peek';
const shouldShowMessageActions = hasCopyableText && !isPeekSurface; const shouldShowMessageActions = hasCopyableText && !isPeekSurface;
const shouldShowTurnFooter = isLastAssistantInTurn && hasTextContent && (hasStopFinish || Boolean(errorMessage)) && !isPeekSurface; const shouldShowTurnFooter = isLastAssistantInTurn && hasTextContent && (hasStopFinish || Boolean(errorMessage)) && !isPeekSurface;
@@ -2217,17 +2214,9 @@ const AssistantMessageBody = React.memo(({
{renderedParts} {renderedParts}
{showErrorMessage && ( {showErrorMessage && (
<FadeInOnReveal key="assistant-error"> <FadeInOnReveal key="assistant-error">
<div className={cn( <div className="group/assistant-text relative mt-3 max-w-full break-words rounded-2xl border border-[var(--status-info-border)] bg-[var(--status-info-background)] px-4 py-3 text-base leading-relaxed">
'group/assistant-text relative mt-3 p-3 rounded-lg border break-words max-w-full', <div className="flex items-center gap-3">
errorVariant === 'info' <Icon name="information" className="size-4 shrink-0 text-[var(--status-info)]" />
? 'bg-[var(--status-info-background)] border-[var(--status-info-border)]'
: 'bg-[var(--status-error-background)] border-[var(--status-error-border)]',
)}>
<div className="flex items-center gap-2">
<Icon name={errorIconName} className={cn(
'h-4 w-4 shrink-0',
errorVariant === 'info' ? 'text-[var(--status-info)]' : 'text-[var(--status-error)]',
)} />
<div className="min-w-0 flex-1 break-words"> <div className="min-w-0 flex-1 break-words">
<SimpleMarkdownRenderer <SimpleMarkdownRenderer
content={errorMessage ?? ''} content={errorMessage ?? ''}