Skip to content

Commit f416de4

Browse files
JubStevenJubSteven
committed
further update of the UI
1 parent 514365e commit f416de4

File tree

1 file changed

+58
-51
lines changed

1 file changed

+58
-51
lines changed

‎web_app/frontend/src/App.tsx‎

Lines changed: 58 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -616,21 +616,21 @@ function ThinkingSection({ content, defaultExpanded = false }: { content: string
616616
const hasMore = lines.length > 2 || preview.length < content.length;
617617

618618
return (
619-
<div className="border rounded-lg overflow-hidden bg-green-50 border-green-200">
619+
<div className="border rounded-lg overflow-hidden bg-white border-gray-200">
620620
<button
621621
onClick={() => setIsExpanded(!isExpanded)}
622-
className="w-full flex items-center gap-2 px-3 py-2 text-sm font-medium text-green-700 hover:bg-green-100 transition-colors"
622+
className="w-full flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
623623
>
624624
{isExpanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
625625
<Brain className="w-4 h-4" />
626626
<span>Thinking</span>
627627
</button>
628-
<div className="px-3 py-2 border-t border-green-200 bg-white/50">
628+
<div className="px-3 py-2 border-t border-gray-200 bg-white">
629629
<pre className={`text-sm text-gray-700 whitespace-pre-wrap break-words leading-relaxed ${!isExpanded ? 'line-clamp-2' : ''}`}>
630630
{isExpanded ? content : preview}
631631
</pre>
632632
{!isExpanded && hasMore && (
633-
<span className="text-xs text-green-600">...</span>
633+
<span className="text-xs text-gray-500">...</span>
634634
)}
635635
</div>
636636
</div>
@@ -659,11 +659,12 @@ function CompletedView({
659659
}) {
660660
const [isExpanded, setIsExpanded] = useState(false);
661661

662-
// Check if there's any thinking content in messages
662+
// Check if there's any content to show in the trajectory
663663
const hasThinkingContent = messages.some(msg => {
664664
if (msg.role === 'user') return false;
665665
const parsed = parseMessageContent(msg.content);
666-
return parsed.thinking || parsed.toolCalls.length > 0;
666+
// Show trajectory if there's any thinking, tool calls, or text content
667+
return parsed.thinking || parsed.toolCalls.length > 0 || parsed.text;
667668
});
668669

669670
// Parse final answer and summary
@@ -679,55 +680,61 @@ function CompletedView({
679680

680681
return (
681682
<>
682-
{/* Thinking Trajectory - collapsed by default, shows full content like running state */}
683+
{/* Thinking Trajectory - collapsed by default, transparent/borderless style */}
683684
{(hasThinkingContent || hasThinkingInAnswer) && (
684-
<div className="border rounded-lg overflow-hidden bg-gray-50 border-gray-200">
685+
<div>
685686
<button
686687
onClick={() => setIsExpanded(!isExpanded)}
687-
className="w-full flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors"
688+
className="w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors"
688689
>
689690
<List className="w-4 h-4" />
690-
<span>Show thinking trajectory</span>
691+
<span>{isExpanded ? 'Hide' : 'Show'} thinking trajectory</span>
691692
{isExpanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
692693
</button>
693694
{isExpanded && (
694-
<div className="border-t border-gray-200 bg-white">
695-
<div className="p-4 space-y-6 max-h-[800px] overflow-y-auto">
696-
{/* Render each message with full ThinkingSection and ToolCallDisplay */}
697-
{messages.map((msg, index) => {
698-
if (msg.role === 'user') return null;
699-
const parsed = parseMessageContent(msg.content);
700-
if (!parsed.thinking && parsed.toolCalls.length === 0) return null;
701-
702-
return (
703-
<div key={index} className="space-y-3">
704-
{/* Thinking section - same style as running state */}
705-
{parsed.thinking && (
706-
<ThinkingSection content={parsed.thinking} defaultExpanded={false} />
707-
)}
695+
<div className="space-y-6 pt-4">
696+
{/* Render each message with full ThinkingSection and ToolCallDisplay */}
697+
{messages.map((msg, index) => {
698+
if (msg.role === 'user') return null;
699+
const parsed = parseMessageContent(msg.content);
700+
// Show ALL messages - don't filter out those without thinking/toolCalls
701+
// This ensures full trace is visible exactly as during running state
702+
const hasAnyContent = parsed.thinking || parsed.toolCalls.length > 0 || parsed.text;
703+
if (!hasAnyContent) return null;
704+
705+
return (
706+
<div key={index} className="space-y-3">
707+
{/* Thinking section - same style as running state */}
708+
{parsed.thinking && (
709+
<ThinkingSection content={parsed.thinking} defaultExpanded={false} />
710+
)}
711+
712+
{/* Tool calls - same style as running state */}
713+
{parsed.toolCalls.length > 0 && (
714+
<div className="space-y-3">
715+
{parsed.toolCalls.map((tool, idx) => (
716+
<ToolCallDisplay key={idx} tool={tool} />
717+
))}
718+
</div>
719+
)}
708720

709-
{/* Tool calls - same style as running state */}
710-
{parsed.toolCalls.length > 0 && (
711-
<div className="space-y-3">
712-
{parsed.toolCalls.map((tool, idx) => (
713-
<ToolCallDisplay key={idx} tool={tool} />
714-
))}
715-
</div>
716-
)}
717-
</div>
718-
);
719-
})}
721+
{/* Text content - show any non-thinking, non-tool text */}
722+
{parsed.text && (
723+
<SmartTextContent content={parsed.text} />
724+
)}
725+
</div>
726+
);
727+
})}
720728

721-
{/* Thinking from final answer */}
722-
{parsedFinalAnswer?.thinking && (
723-
<ThinkingSection content={parsedFinalAnswer.thinking} defaultExpanded={false} />
724-
)}
729+
{/* Thinking from final answer */}
730+
{parsedFinalAnswer?.thinking && (
731+
<ThinkingSection content={parsedFinalAnswer.thinking} defaultExpanded={false} />
732+
)}
725733

726-
{/* Thinking from summary */}
727-
{parsedSummary?.thinking && (
728-
<ThinkingSection content={parsedSummary.thinking} defaultExpanded={false} />
729-
)}
730-
</div>
734+
{/* Thinking from summary */}
735+
{parsedSummary?.thinking && (
736+
<ThinkingSection content={parsedSummary.thinking} defaultExpanded={false} />
737+
)}
731738
</div>
732739
)}
733740
</div>
@@ -860,12 +867,12 @@ function SmartTextContent({ content }: { content: string }) {
860867
)}
861868

862869
{/* Render search results */}
863-
<div className="space-y-3">
864-
<div className="flex items-center gap-2 text-sm text-gray-600">
865-
<List className="w-4 h-4" />
870+
<div className="space-y-2">
871+
<div className="flex items-center gap-1.5 text-xs text-gray-500">
872+
<List className="w-3 h-3" />
866873
<span>Found {searchResults.length} results</span>
867874
</div>
868-
<div className="flex flex-col gap-2">
875+
<div className="flex flex-col gap-1.5">
869876
{searchResults.slice(0, 10).map((result, idx) => {
870877
const resultUrl = result.link || result.url || '';
871878
let faviconUrl = '';
@@ -883,15 +890,15 @@ function SmartTextContent({ content }: { content: string }) {
883890
href={resultUrl}
884891
target="_blank"
885892
rel="noopener noreferrer"
886-
className="inline-flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-full text-sm text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors"
893+
className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-white border border-gray-200 rounded-full text-xs text-gray-600 hover:bg-gray-50 hover:border-gray-300 transition-colors"
887894
title={result.snippet || result.title}
888895
>
889896
{faviconUrl ? (
890-
<img src={faviconUrl} alt="" className="w-4 h-4 flex-shrink-0" onError={(e) => {
897+
<img src={faviconUrl} alt="" className="w-3 h-3 flex-shrink-0" onError={(e) => {
891898
(e.target as HTMLImageElement).style.display = 'none';
892899
}} />
893900
) : (
894-
<Globe className="w-4 h-4 text-gray-400 flex-shrink-0" />
901+
<Globe className="w-3 h-3 text-gray-400 flex-shrink-0" />
895902
)}
896903
<span className="truncate">{result.title || resultUrl}</span>
897904
</a>

0 commit comments

Comments
 (0)