55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import { WebSocketState } from '../hooks/useWebSocket';
|
|
|
|
export const Tabs = {
|
|
CONTEXT: 'CONTEXT',
|
|
RESPONSE: 'RESPONSE',
|
|
INPUT: 'INPUT',
|
|
OUTPUT: 'OUTPUT'
|
|
};
|
|
|
|
export const Header = ({
|
|
wsState,
|
|
agentState,
|
|
activeTab,
|
|
setActiveTab,
|
|
}) => (
|
|
<header className="bg-white shadow-sm">
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<div className="flex items-center space-x-4">
|
|
<h1 className="text-xl font-semibold">SIA Control Interface</h1>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<div className={`px-3 py-1 rounded-full text-sm ${
|
|
wsState === WebSocketState.CONNECTED
|
|
? 'bg-green-100 text-green-800'
|
|
: wsState === WebSocketState.CONNECTING
|
|
? 'bg-yellow-100 text-yellow-800'
|
|
: 'bg-red-100 text-red-800'
|
|
}`}>
|
|
{wsState}
|
|
</div>
|
|
<div className="px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm">
|
|
{agentState}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border-t">
|
|
<div className="flex px-4">
|
|
{Object.values(Tabs).map((tab) => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setActiveTab(tab)}
|
|
className={`px-4 py-2 font-medium text-sm border-b-2 ${
|
|
activeTab === tab
|
|
? 'border-blue-500 text-blue-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700'
|
|
}`}
|
|
>
|
|
{tab.charAt(0).toUpperCase() + tab.slice(1)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
); |