fix(desktop): fix Try It step UI overflow and missing chat input

Add min-w-0 to SamplePrompt text container so truncate works in
flex layout. Always show ChatView when agent is ready so the message
input is visible (ChatView has its own empty state).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jiayuan Zhang 2026-02-10 23:29:23 +08:00
parent e9c91ccc66
commit 5c5bf46a95
2 changed files with 2 additions and 16 deletions

View file

@ -13,7 +13,7 @@ export function SamplePrompt({ title, prompt, onClick }: SamplePromptProps) {
onClick={onClick}
className="w-full text-left p-4 rounded-xl border border-border bg-card hover:bg-accent/50 transition-colors group flex items-center justify-between"
>
<div className="space-y-0.5 pr-4">
<div className="space-y-0.5 pr-4 min-w-0">
<p className="font-medium text-sm">{title}</p>
<p className="text-xs text-muted-foreground truncate">{prompt}</p>
</div>

View file

@ -54,8 +54,6 @@ export default function TryItStep() {
navigate('/onboarding/connect')
}
const hasMessages = messages.length > 0
return (
<div className="h-full flex">
{/* Left column — prompts */}
@ -109,19 +107,7 @@ export default function TryItStep() {
<Loading />
Initializing agent...
</div>
) : !hasMessages && !isLoading ? (
<div className="flex-1 flex items-center justify-center px-12">
<div className="max-w-sm text-center space-y-3">
<h3 className="text-lg font-medium">Agent ready</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
Click a prompt on the left to start a conversation, or type
your own message below.
</p>
</div>
</div>
) : null}
{agentId && (hasMessages || isLoading) && (
) : (
<ChatView
messages={messages}
streamingIds={streamingIds}