Skip to content

Commit 73cfde2

Browse files
jeffdyerjeffdyer
committed
refactor: Extract components and improve HelpPanel UX
 - Move CsvDropzone to separate component file (-270 lines) - Extract utility functions to helpPanelUtils.ts (-700 lines) - Relocate timer animation above pending requests - Remove Requests label and fix region name display
1 parent 0a1bea4 commit 73cfde2

1 file changed

Lines changed: 42 additions & 44 deletions

File tree

‎src/components/HelpPanel.tsx‎

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1955,16 +1955,7 @@ export const HelpPanel = ({
19551955
disabled={isLoading}
19561956
className="px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
19571957
>
1958-
{isLoading ? (
1959-
<div className="flex items-center">
1960-
<span className="mr-1">{`${processingTime}s`}</span>
1961-
<div className="flex items-center">
1962-
<div className="w-1 h-1 bg-white rounded-full mr-0.5 animate-bounce" style={{ animationDelay: '0ms', animationDuration: '1s' }}></div>
1963-
<div className="w-1 h-1 bg-white rounded-full mr-0.5 animate-bounce" style={{ animationDelay: '200ms', animationDuration: '1s' }}></div>
1964-
<div className="w-1 h-1 bg-white rounded-full animate-bounce" style={{ animationDelay: '400ms', animationDuration: '1s' }}></div>
1965-
</div>
1966-
</div>
1967-
) : 'Send'}
1958+
{isLoading ? 'Sending...' : 'Send'}
19681959
</button>
19691960
</div>
19701961
</div>
@@ -2021,14 +2012,6 @@ export const HelpPanel = ({
20212012
return (
20222013
<>
20232014

2024-
{/* Divider for user history - show when there are user messages */}
2025-
{userMessages.length > 0 && (
2026-
<div className="flex items-center mb-6">
2027-
<div className="flex-grow border-t border-gray-200"></div>
2028-
<div className="mx-4 text-xs text-gray-500">Requests</div>
2029-
<div className="flex-grow border-t border-gray-200"></div>
2030-
</div>
2031-
)}
20322015

20332016
{/* User messages in reverse chronological order, newest first */}
20342017
<div className="space-y-2">
@@ -2042,29 +2025,43 @@ export const HelpPanel = ({
20422025
help[message.index + 1]?.type !== 'bot');
20432026

20442027
return (
2045-
<div key={index} className="mb-2 relative group w-full">
2046-
{/* Delete button for each user message - highlighted for pending messages but only visible on hover */}
2047-
<button
2048-
className={`absolute top-0 right-0 p-1 opacity-0 group-hover:opacity-100 transition-opacity -mt-2 -mr-2 z-10 ${isPending ? 'text-red-400 hover:text-red-600 bg-white rounded-full shadow-sm' : 'text-gray-400 hover:text-gray-600 bg-white rounded-full shadow-sm'}`}
2049-
onClick={() => handleDeleteMessagePair(message.index)}
2050-
title={isPending ? "Cancel and delete request" : "Delete message"}
2051-
>
2052-
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
2053-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
2054-
</svg>
2055-
</button>
2056-
2057-
<div
2058-
className={`bg-blue-100 rounded-lg p-3 overflow-hidden ${isPending ? 'border-2 border-blue-300' : ''} ${message.taskId && message.taskId === taskId ? 'border-2 border-blue-500' : ''} ${message.taskId && onLoadTaskFromHelp ? 'cursor-pointer hover:bg-blue-200 transition-colors' : ''}`}
2059-
onClick={() => {
2060-
if (message.taskId && onLoadTaskFromHelp) {
2061-
console.log('Loading task from help panel:', message.taskId);
2062-
onLoadTaskFromHelp(message.taskId);
2063-
}
2064-
}}
2065-
title={message.taskId && onLoadTaskFromHelp ? `Click to load task ${message.taskId.slice(0, 8)}` : ''}
2066-
>
2067-
<div className="text-sm prose prose-sm prose-blue max-w-none">
2028+
<div key={index} className="mb-2 w-full">
2029+
{/* Timer animation shown above the card when pending */}
2030+
{isPending && (
2031+
<div className="flex items-center justify-start mb-2 text-xs text-blue-600 font-medium">
2032+
<div className="text-blue-500 mr-2 text-sm flex items-center">
2033+
{`${processingTime}s`}
2034+
</div>
2035+
<div className="flex items-center justify-center">
2036+
<div className="w-1.5 h-1.5 bg-blue-500 rounded-full mr-1 animate-bounce" style={{ animationDelay: '0ms', animationDuration: '1s' }}></div>
2037+
<div className="w-1.5 h-1.5 bg-blue-500 rounded-full mr-1 animate-bounce" style={{ animationDelay: '200ms', animationDuration: '1s' }}></div>
2038+
<div className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '400ms', animationDuration: '1s' }}></div>
2039+
</div>
2040+
</div>
2041+
)}
2042+
<div className="relative group">
2043+
{/* Delete button for each user message - highlighted for pending messages but only visible on hover */}
2044+
<button
2045+
className={`absolute top-0 right-0 p-1 opacity-0 group-hover:opacity-100 transition-opacity -mt-2 -mr-2 z-10 ${isPending ? 'text-red-400 hover:text-red-600 bg-white rounded-full shadow-sm' : 'text-gray-400 hover:text-gray-600 bg-white rounded-full shadow-sm'}`}
2046+
onClick={() => handleDeleteMessagePair(message.index)}
2047+
title={isPending ? "Cancel and delete request" : "Delete message"}
2048+
>
2049+
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
2050+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
2051+
</svg>
2052+
</button>
2053+
2054+
<div
2055+
className={`bg-blue-100 rounded-lg p-3 overflow-hidden ${isPending ? 'border-2 border-blue-300' : ''} ${message.taskId && message.taskId === taskId ? 'border-2 border-blue-500' : ''} ${message.taskId && onLoadTaskFromHelp ? 'cursor-pointer hover:bg-blue-200 transition-colors' : ''}`}
2056+
onClick={() => {
2057+
if (message.taskId && onLoadTaskFromHelp) {
2058+
console.log('Loading task from help panel:', message.taskId);
2059+
onLoadTaskFromHelp(message.taskId);
2060+
}
2061+
}}
2062+
title={message.taskId && onLoadTaskFromHelp ? `Click to load task ${message.taskId.slice(0, 8)}` : ''}
2063+
>
2064+
<div className="text-sm prose prose-sm prose-blue max-w-none">
20682065
<ReactMarkdown
20692066
remarkPlugins={[remarkGfm]}
20702067
components={{
@@ -2131,11 +2128,12 @@ export const HelpPanel = ({
21312128
>
21322129
{message.user}
21332130
</ReactMarkdown>
2131+
</div>
2132+
</div>
21342133
</div>
21352134
</div>
2136-
</div>
2137-
);
2138-
})}
2135+
);
2136+
})}
21392137
</div>
21402138

21412139
</>

0 commit comments

Comments
 (0)