app/components/chat/ApiKeyWarning.tsx

export const ApiKeyWarning: React.FC<ApiKeyWarningProps> = ({ provider, apiKeys }) => {
    // Add a null check for provider before accessing its name
    const isApiKeyMissing = !provider || !apiKeys[provider.name];
  
    if (!isApiKeyMissing) return null;
  
    return (
      <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
        <div className="flex">
          <div className="flex-shrink-0">
            <div className="i-ph:warning-circle text-yellow-400 text-2xl" />
          </div>
          <div className="ml-3">
            <p className="text-sm text-yellow-700">
              {provider 
                ? `API key is missing for ${provider.name}. Please add an API key in the settings to send messages.`
                : 'No provider selected. Please select a provider and add an API key.'}
            </p>
          </div>
        </div>
      </div>
    );
  };