31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { useConfig } from '../contexts/ConfigContext';
|
|
|
|
export function ProviderInfo() {
|
|
try {
|
|
const { provider, selectedModel, availableModels } = useConfig();
|
|
|
|
// Get the display name of the selected model
|
|
const modelName = availableModels.find(m => m.id === selectedModel)?.name || selectedModel;
|
|
|
|
// Capitalize provider name
|
|
const providerDisplayName = provider.charAt(0).toUpperCase() + provider.slice(1);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-1 text-xs text-muted-foreground">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-medium">Provider:</span>
|
|
<span>{providerDisplayName}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-medium">Model:</span>
|
|
<span>{modelName}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
} catch (error) {
|
|
// Return empty div if context isn't available yet
|
|
return <div className="text-xs text-muted-foreground">Loading provider info...</div>;
|
|
}
|
|
}
|