openclaw - 💡(How to fix) Fix Feature Request: Context usage bar above chat input in Control UI [2 comments, 2 participants]

// ContextWindowUsageBar.js
import { useState, useEffect } from 'react';

const ContextWindowUsageBar = () => {
  const [usage, setUsage] = useState(0);
  const [limit, setLimit] = useState(200000);

  useEffect(() => {
    const fetchUsage = async () => {
      const response = await fetch('/api/context-usage');
      const data = await response.json();
      setUsage(data.usage);
    };
    fetchUsage();
  }, []);

  const percentage = (usage / limit) * 100;
  const color = percentage < 50 ? 'green' : percentage < 80 ? 'yellow' : 'red';

  return (
    <div style={{ backgroundColor: color, height: 5, width: `${percentage}%` }}>
      <span style={{ fontSize: 12, color: 'black' }}>
        {usage} / {limit} tokens
      </span>
    </div>
  );
};

export default ContextWindowUsageBar;

// ChatInput.js
import React from 'react';
import ContextWindowUsageBar from './ContextWindowUsageBar';

const ChatInput = () => {
  return (
    <div>
      <ContextWindowUsageBar />
      <textarea placeholder="Type a message..." />
    </div>
  );
};

export default ChatInput;