Upload 26 files

app/components/chat/ApiKeyWarning.tsx

@@ -0,0 +1,28 @@
+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>
+        </div>
+      </div>
+    </div>
+  );
+};

app/components/chat/BaseChat.tsx

@@ -77,6 +77,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       isStreaming = false,
       model,
       setModel,
+      apiKeys,
       provider,
       setProvider,
       providerList,
@@ -312,12 +313,18 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
+    const isApiKeyAvailable = apiKeys && apiKeys[provider.name];
+
     const baseChat = (
       <div
         ref={ref}
         className={classNames(styles.BaseChat, 'relative flex h-full w-full overflow-hidden')}
         data-chat-visible={showChat}
       >
+        <ApiKeyWarning 
+          provider={provider} 
+          apiKeys={apiKeys} 
+        />
         <ClientOnly>{() => <Menu />}</ClientOnly>
         <div ref={scrollRef} className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
           <div className={classNames(styles.Chat, 'flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full')}>
@@ -528,7 +535,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         <SendButton
                           show={input.length > 0 || isStreaming || uploadedFiles.length > 0}
                           isStreaming={isStreaming}
-                          disabled={!providerList || providerList.length === 0}
+                          disabled={!isApiKeyAvailable || !providerList || providerList.length === 0}
                           onClick={(event) => {
                             if (isStreaming) {
                               handleStop?.();

app/components/chat/Chat.client.tsx

@@ -110,8 +110,8 @@ interface ChatProps {
 
 export const ChatImpl = memo(
   ({ description, initialMessages, storeMessageHistory, importChat, exportChat }: ChatProps) => {
-    useShortcuts();
 
+    useShortcuts();
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
     const [uploadedFiles, setUploadedFiles] = useState<File[]>([]); // Move here
@@ -511,6 +511,7 @@ export const ChatImpl = memo(
         setModel={handleModelChange}
         provider={provider}
         setProvider={handleProviderChange}
+        apiKeys={apiKeys}
         providerList={activeProviders}
         messageRef={messageRef}
         scrollRef={scrollRef}