Spaces:
Running
Running
File size: 3,034 Bytes
304e233 e0d4a07 304e233 e0d4a07 304e233 e0d4a07 304e233 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import React from 'react';
interface TaskButtonProps {
isAgentProcessing: boolean;
isConnected: boolean;
onSendTask: (content: string, modelId: string) => void;
}
export const TaskButton: React.FC<TaskButtonProps> = ({ isAgentProcessing, isConnected, onSendTask }) => {
return (
<div
onClick={() => {
if (!isAgentProcessing && isConnected) {
onSendTask(
"Find the price of a NVIDIA RTX 4090 GPU",
"Qwen/Qwen3-VL-30B-A3B-Instruct"
);
}
}}
style={{
marginTop: '16px',
padding: '14px 18px',
background: isAgentProcessing || !isConnected
? 'rgba(255, 255, 255, 0.1)'
: 'rgba(255, 255, 255, 0.15)',
borderRadius: '10px',
backdropFilter: 'blur(10px)',
border: '2px solid rgba(0, 0, 0, 0.3)',
cursor: isAgentProcessing || !isConnected ? 'not-allowed' : 'pointer',
transition: 'all 0.3s ease',
opacity: isAgentProcessing || !isConnected ? 0.6 : 1,
}}
onMouseEnter={(e) => {
if (!isAgentProcessing && isConnected) {
e.currentTarget.style.background = 'rgba(200, 200, 200, 0.3)';
e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.5)';
e.currentTarget.style.transform = 'translateY(-2px)';
e.currentTarget.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.2)';
}
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.3)';
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = 'none';
}}
>
<div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
<div style={{ flex: 1 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
<span style={{ fontSize: '11px', fontWeight: 600, color: 'rgba(0, 0, 0, 0.7)', textTransform: 'uppercase', letterSpacing: '1px' }}>Task</span>
{!isAgentProcessing && isConnected && (
<span style={{ fontSize: '10px', color: 'rgba(0, 0, 0, 0.5)', fontStyle: 'italic' }}>
(click to run)
</span>
)}
</div>
<p style={{ fontSize: '15px', fontWeight: 500, color: '#1f2937' }}>
Find the price of a NVIDIA RTX 4090 GPU
</p>
</div>
<div style={{
padding: '8px 16px',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '6px',
border: '1px solid rgba(0, 0, 0, 0.2)'
}}>
<span style={{ fontSize: '11px', fontWeight: 600, color: 'rgba(0, 0, 0, 0.6)', textTransform: 'uppercase', letterSpacing: '1px' }}>Model</span>
<p style={{ fontSize: '12px', fontWeight: 600, color: '#1f2937', marginTop: '2px', whiteSpace: 'nowrap' }}>
Qwen/Qwen3-VL-30B-A3B-Instruct
</p>
</div>
</div>
</div>
);
};
|