Skip to content

phsl / new-api

Go to a project
Commit 1fbd107b by Apple\Apple
Options

🎨 feat(ui): Update thinking section design to match EditChannel header card style 

- Replace gradient background with purple theme matching EditChannel cards
- Add decorative circle elements for visual consistency
- Update all icons and text to white color for better contrast
- Apply inline styles to ensure proper color rendering
- Maintain hover effects with adjusted opacity values

This change creates visual consistency across the application by adopting
the same modern gradient design pattern used in EditChannel header cards.
parent f8b65260
Showing with 26 additions and 22 deletions
web/src/components/playground/MessageContent.js
...@@ -136,10 +136,8 @@ const MessageContent = ({ ...@@ -136,10 +136,8 @@ const MessageContent = ({
!finalExtractedThinkingContent && !finalExtractedThinkingContent &&
(!finalDisplayableFinalContent || finalDisplayableFinalContent.trim() === '')) { (!finalDisplayableFinalContent || finalDisplayableFinalContent.trim() === '')) {
return ( return (
<div className={`${className} flex items-center gap-2 sm:gap-4 p-4 sm:p-6 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl sm:rounded-2xl`} style={{ <div className={`${className} flex items-center gap-2 sm:gap-4 p-4 sm:p-6 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl sm:rounded-2xl`}>
background: 'linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.12) 50%, rgba(168, 85, 247, 0.08) 100%)' <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center shadow-lg">
}}>
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
<Loader2 className="animate-spin text-white" size={styleState.isMobile ? 16 : 20} /> <Loader2 className="animate-spin text-white" size={styleState.isMobile ? 16 : 20} />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
...@@ -172,42 +170,48 @@ const MessageContent = ({ ...@@ -172,42 +170,48 @@ const MessageContent = ({
{/* 渲染推理内容 */} {/* 渲染推理内容 */}
{message.role === 'assistant' && finalExtractedThinkingContent && ( {message.role === 'assistant' && finalExtractedThinkingContent && (
<div className="bg-gradient-to-br from-indigo-50 via-purple-50 to-violet-50 rounded-xl sm:rounded-2xl mb-2 sm:mb-4 overflow-hidden shadow-lg backdrop-blur-sm" style={{ <div className="rounded-xl sm:rounded-2xl mb-2 sm:mb-4 overflow-hidden shadow-sm backdrop-blur-sm">
background: 'linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.12) 25%, rgba(168, 85, 247, 0.15) 50%, rgba(192, 132, 252, 0.12) 75%, rgba(216, 180, 254, 0.08) 100%)'
}}>
<div <div
className="flex items-center justify-between p-3 sm:p-5 cursor-pointer hover:bg-gradient-to-r hover:from-white/30 hover:to-purple-50/50 transition-all duration-300" className="flex items-center justify-between p-3 sm:p-5 cursor-pointer hover:bg-gradient-to-r hover:from-white/20 hover:to-purple-50/30 transition-all"
style={{
background: 'linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%)',
position: 'relative'
}}
onClick={() => onToggleReasoningExpansion(message.id)} onClick={() => onToggleReasoningExpansion(message.id)}
> >
<div className="flex items-center gap-2 sm:gap-4"> <div className="absolute inset-0 overflow-hidden">
<div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg"> <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
<Brain className="text-white" size={styleState.isMobile ? 12 : 16} /> <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
</div>
<div className="flex items-center gap-2 sm:gap-4 relative">
<div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-white/20 flex items-center justify-center shadow-lg">
<Brain style={{ color: 'white' }} size={styleState.isMobile ? 12 : 16} />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<Typography.Text strong className="text-gray-800 text-sm sm:text-base"> <Typography.Text strong style={{ color: 'white' }} className="text-sm sm:text-base">
{headerText} {headerText}
</Typography.Text> </Typography.Text>
{thinkingSource && ( {thinkingSource && (
<Typography.Text className="text-gray-500 text-xs mt-0.5 hidden sm:block"> <Typography.Text style={{ color: 'white' }} className="text-xs mt-0.5 opacity-80 hidden sm:block">
来源: {thinkingSource} 来源: {thinkingSource}
</Typography.Text> </Typography.Text>
)} )}
</div> </div>
</div> </div>
<div className="flex items-center gap-2 sm:gap-3"> <div className="flex items-center gap-2 sm:gap-3 relative">
{isThinkingStatus && !message.isThinkingComplete && ( {isThinkingStatus && !message.isThinkingComplete && (
<div className="flex items-center gap-1 sm:gap-2"> <div className="flex items-center gap-1 sm:gap-2">
<Loader2 className="animate-spin text-purple-500" size={styleState.isMobile ? 14 : 18} /> <Loader2 style={{ color: 'white' }} className="animate-spin" size={styleState.isMobile ? 14 : 18} />
<Typography.Text className="text-purple-600 text-xs sm:text-sm font-medium"> <Typography.Text style={{ color: 'white' }} className="text-xs sm:text-sm font-medium opacity-90">
思考中 思考中
</Typography.Text> </Typography.Text>
</div> </div>
)} )}
{(!isThinkingStatus || message.isThinkingComplete) && ( {(!isThinkingStatus || message.isThinkingComplete) && (
<div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-purple-100 flex items-center justify-center"> <div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-white/20 flex items-center justify-center">
{message.isReasoningExpanded ? {message.isReasoningExpanded ?
<ChevronUp size={styleState.isMobile ? 12 : 16} className="text-purple-600" /> : <ChevronUp size={styleState.isMobile ? 12 : 16} style={{ color: 'white' }} /> :
<ChevronRight size={styleState.isMobile ? 12 : 16} className="text-purple-600" /> <ChevronRight size={styleState.isMobile ? 12 : 16} style={{ color: 'white' }} />
} }
</div> </div>
)} )}
...@@ -215,17 +219,17 @@ const MessageContent = ({ ...@@ -215,17 +219,17 @@ const MessageContent = ({
</div> </div>
<div <div
className={`transition-all duration-500 ease-out ${message.isReasoningExpanded ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0' className={`transition-all duration-500 ease-out ${message.isReasoningExpanded ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
} overflow-hidden`} } overflow-hidden bg-gradient-to-br from-purple-50 via-indigo-50 to-violet-50`}
> >
{message.isReasoningExpanded && ( {message.isReasoningExpanded && (
<div className="p-3 sm:p-5 pt-2 sm:pt-4"> <div className="p-3 sm:p-5 pt-2 sm:pt-4">
<div <div
className="bg-white/80 backdrop-blur-sm rounded-xl p-2 shadow-inner overflow-x-auto overflow-y-auto thinking-content-scroll" className="bg-white/70 backdrop-blur-sm rounded-lg sm:rounded-xl p-2 shadow-inner overflow-x-auto overflow-y-auto thinking-content-scroll"
style={{ style={{
maxHeight: '200px', maxHeight: '200px',
minHeight: '100px', minHeight: '100px',
scrollbarWidth: 'thin', scrollbarWidth: 'thin',
scrollbarColor: 'rgba(139, 92, 246, 0.3) transparent' scrollbarColor: 'rgba(0, 0, 0, 0.3) transparent'
}} }}
> >
<div className="prose prose-xs sm:prose-sm prose-purple max-w-none text-xs sm:text-sm"> <div className="prose prose-xs sm:prose-sm prose-purple max-w-none text-xs sm:text-sm">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment