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