Upload 26 files

app/components/chat/ApiKeyWarning.tsx

@@ -1,28 +1,23 @@
-import React from 'react';
-import type { ProviderInfo } from '~/types/model';
-
-interface ApiKeyWarningProps {
-  provider: ProviderInfo;
-  apiKeys: Record<string, string>;
-}
-
 export const ApiKeyWarning: React.FC<ApiKeyWarningProps> = ({ provider, apiKeys }) => {
-  const isApiKeyMissing = !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">
-            API key is missing for {provider.name}. Please add an API key in the settings to send messages.
-          </p>
+    // 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>
-    </div>
-  );
-};
+    );
+  };