fix(ui): render UserTextPart with linkable mentions and wrap

Preserve whitespace and enable text wrapping in user text
Remove Markdown renderer usage for user text
This commit is contained in:
Bohdan Triapitsyn
2026-01-26 17:21:49 +02:00
parent a9952fd8da
commit eec170771c
@@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { SimpleMarkdownRenderer } from '../../MarkdownRenderer';
import type { Part } from '@opencode-ai/sdk/v2'; import type { Part } from '@opencode-ai/sdk/v2';
import type { AgentMentionInfo } from '../types'; import type { AgentMentionInfo } from '../types';
@@ -61,14 +60,26 @@ const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, agentMenti
const idx = textContent.indexOf(agentMention.token); const idx = textContent.indexOf(agentMention.token);
const before = textContent.slice(0, idx); const before = textContent.slice(0, idx);
const after = textContent.slice(idx + agentMention.token.length); const after = textContent.slice(idx + agentMention.token.length);
const mentionLink = `[${agentMention.token}](${buildMentionUrl(agentMention.name)})`; return (
return `${before}${mentionLink}${after}`; <>
{before}
<a
href={buildMentionUrl(agentMention.name)}
className="text-primary hover:underline"
target="_blank"
rel="noreferrer"
>
{agentMention.token}
</a>
{after}
</>
);
}; };
return ( return (
<div <div
className={cn( className={cn(
"font-sans typography-markdown", "font-sans typography-markdown whitespace-pre-wrap",
!isExpanded && "line-clamp-3", !isExpanded && "line-clamp-3",
(isTruncated || isExpanded) && "cursor-pointer" (isTruncated || isExpanded) && "cursor-pointer"
)} )}
@@ -76,10 +87,9 @@ const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, agentMenti
onClick={handleClick} onClick={handleClick}
key={part.id || `${messageId}-user-text`} key={part.id || `${messageId}-user-text`}
> >
<SimpleMarkdownRenderer <span className="text-foreground/90">
content={renderContent()} {renderContent()}
className="text-foreground/90" </span>
/>
</div> </div>
); );
}; };