f3f7992c0a
* ui: chart btn * ui: chats list modal fixes, signal editing visually, map charting response * ui: support readable errors for kai * ui: add support for response limiting
31 lines
759 B
TypeScript
31 lines
759 B
TypeScript
import React from 'react';
|
|
import { kaiStore } from '../KaiStore';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { Progress, Tooltip } from 'antd';
|
|
const getUsageColor = (percent: number) => {
|
|
return 'disabled-text';
|
|
};
|
|
|
|
function Usage() {
|
|
const { usage } = kaiStore;
|
|
const color = getUsageColor(usage.percent);
|
|
|
|
if (usage.total === 0) {
|
|
return null;
|
|
}
|
|
return (
|
|
<div>
|
|
<Tooltip title={`Daily response limit (${usage.used}/${usage.total})`}>
|
|
<Progress
|
|
percent={usage.percent}
|
|
strokeColor={usage.percent < 99 ? 'var(--color-main)' : 'var(--color-red)'}
|
|
showInfo={false}
|
|
type="circle"
|
|
size={24}
|
|
/>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(Usage);
|