mirror of
https://github.com/BerriAI/litellm.git
synced 2026-10-06 02:48:13 +00:00
decent test connection
This commit is contained in:
Ishaan Jaff
parent
a9fd8de90b
commit
446422c8ce
1 changed files with 62 additions and 30 deletions
|
|
@ -101,42 +101,65 @@ ${formattedBody}
|
|||
) : '';
|
||||
|
||||
return (
|
||||
<div style={{ padding: '16px 24px' }}>
|
||||
<div style={{ padding: '24px', borderRadius: '8px', backgroundColor: '#fff' }}>
|
||||
{isLoading ? (
|
||||
<div style={{ textAlign: 'center', padding: '20px' }}>
|
||||
<div>Testing connection to {modelName}...</div>
|
||||
{/* You could add a spinner here */}
|
||||
<div style={{ textAlign: 'center', padding: '32px 20px' }}>
|
||||
<div className="loading-spinner" style={{ marginBottom: '16px' }}>
|
||||
{/* Simple CSS spinner */}
|
||||
<div style={{
|
||||
border: '3px solid #f3f3f3',
|
||||
borderTop: '3px solid #1890ff',
|
||||
borderRadius: '50%',
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
animation: 'spin 1s linear infinite',
|
||||
margin: '0 auto'
|
||||
}} />
|
||||
</div>
|
||||
<Text style={{ fontSize: '16px' }}>Testing connection to {modelName}...</Text>
|
||||
<style jsx>{`
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
) : isSuccess ? (
|
||||
<div style={{ textAlign: 'center', padding: '20px' }}>
|
||||
<Text type="success" style={{ fontSize: '16px' }}>
|
||||
<div style={{ textAlign: 'center', padding: '32px 20px' }}>
|
||||
<div style={{ color: '#52c41a', fontSize: '32px', marginBottom: '16px' }}>
|
||||
<svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true">
|
||||
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<Text type="success" style={{ fontSize: '18px', fontWeight: 500 }}>
|
||||
Connection to {modelName} successful!
|
||||
</Text>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
|
||||
<WarningOutlined style={{ color: '#ff4d4f', fontSize: '20px', marginRight: '8px' }} />
|
||||
<Text type="danger" style={{ fontSize: '16px' }}>Connection to {modelName} failed</Text>
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
|
||||
<WarningOutlined style={{ color: '#ff4d4f', fontSize: '24px', marginRight: '12px' }} />
|
||||
<Text type="danger" style={{ fontSize: '18px', fontWeight: 500 }}>Connection to {modelName} failed</Text>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
backgroundColor: '#fff2f0',
|
||||
border: '1px solid #ffccc7',
|
||||
borderRadius: '6px',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
marginBottom: '16px'
|
||||
marginBottom: '20px',
|
||||
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.03)'
|
||||
}}>
|
||||
<Text strong>Error: </Text>
|
||||
<Text type="danger">{errorMessage}</Text>
|
||||
<Text strong style={{ display: 'block', marginBottom: '8px' }}>Error: </Text>
|
||||
<Text type="danger" style={{ fontSize: '14px', lineHeight: '1.5' }}>{errorMessage}</Text>
|
||||
|
||||
{error && (
|
||||
<div style={{ marginTop: '8px' }}>
|
||||
<div style={{ marginTop: '12px' }}>
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => setShowDetails(!showDetails)}
|
||||
style={{ paddingLeft: 0 }}
|
||||
style={{ paddingLeft: 0, height: 'auto' }}
|
||||
>
|
||||
{showDetails ? 'Hide Details' : 'Show Details'}
|
||||
</Button>
|
||||
|
|
@ -145,15 +168,17 @@ ${formattedBody}
|
|||
</div>
|
||||
|
||||
{showDetails && (
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<h4>Troubleshooting Details</h4>
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<Text strong style={{ display: 'block', marginBottom: '8px', fontSize: '15px' }}>Troubleshooting Details</Text>
|
||||
<pre style={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
padding: '12px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '12px',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
fontSize: '13px',
|
||||
maxHeight: '200px',
|
||||
overflow: 'auto'
|
||||
overflow: 'auto',
|
||||
border: '1px solid #e8e8e8',
|
||||
lineHeight: '1.5'
|
||||
}}>
|
||||
{typeof error === 'string' ? error : JSON.stringify(error, null, 2)}
|
||||
</pre>
|
||||
|
|
@ -161,19 +186,21 @@ ${formattedBody}
|
|||
)}
|
||||
|
||||
<div>
|
||||
<h4>API Request</h4>
|
||||
<Text strong style={{ display: 'block', marginBottom: '8px', fontSize: '15px' }}>API Request</Text>
|
||||
<pre style={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
padding: '12px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '12px',
|
||||
maxHeight: '200px',
|
||||
overflow: 'auto'
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
fontSize: '13px',
|
||||
maxHeight: '250px',
|
||||
overflow: 'auto',
|
||||
border: '1px solid #e8e8e8',
|
||||
lineHeight: '1.5'
|
||||
}}>
|
||||
{curlCommand || "No request data available"}
|
||||
</pre>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ marginTop: '8px' }}
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(curlCommand || '');
|
||||
|
|
@ -186,8 +213,8 @@ ${formattedBody}
|
|||
</div>
|
||||
</>
|
||||
)}
|
||||
<Divider style={{ margin: '16px 0' }} />
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Divider style={{ margin: '24px 0 16px' }} />
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Button
|
||||
type="link"
|
||||
href="https://docs.litellm.ai/docs/providers"
|
||||
|
|
@ -197,6 +224,11 @@ ${formattedBody}
|
|||
View Documentation
|
||||
</Button>
|
||||
|
||||
{onClose && (
|
||||
<Button onClick={onClose} type="primary">
|
||||
Close
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue