Update src/App.js

src/App.js

@@ -120,10 +120,8 @@ const processReceiptText = async (text, userApiKey) => {
           {
             role: 'user',
             content: `Analyze this receipt text and extract product information. Return a JSON array with objects containing: name, price, store (with name and address), and date.
-
 Receipt text:
 ${text}
-
 Please return ONLY a valid JSON array in this format:
 [
   {
@@ -237,6 +235,23 @@ const UploadTab = () => {
         
         {step === 'upload' && (
           <div className="space-y-4">
+            <div className="mb-4">
+              <label htmlFor="apiKey" className="block text-sm font-medium text-gray-700 mb-2">
+                Mistral API Key
+              </label>
+              <input
+                id="apiKey"
+                type="password"
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                placeholder="Enter your Mistral API key"
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+              <p className="text-xs text-gray-500 mt-1">
+                Required to process receipt images
+              </p>
+            </div>
+            
             <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
               <Upload className="mx-auto h-12 w-12 text-gray-400 mb-4" />
               <label className="cursor-pointer">