first pass async feedback complete, regressions added

frontend/src/components/FeedbackWeighting.jsx

@@ -0,0 +1,266 @@
+import React, { useState, useEffect } from 'react';
+
+const FeedbackWeighting = ({ onComplete, onCancel }) => {
+  const [feedbackWords, setFeedbackWords] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [weights, setWeights] = useState({});
+
+  useEffect(() => {
+    fetchQueuedFeedbackWords();
+  }, []);
+
+  const fetchQueuedFeedbackWords = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch('/api/v1/feedback/queued');
+      if (response.ok) {
+        const data = await response.json();
+        const words = data.queued_words || [];
+        setFeedbackWords(words);
+
+        // Initialize weights state
+        const initialWeights = {};
+        words.forEach(word => {
+          initialWeights[word.word] = word.weight;
+        });
+        setWeights(initialWeights);
+      } else {
+        throw new Error(`Failed to fetch feedback words: ${response.status}`);
+      }
+    } catch (err) {
+      console.error('Error fetching feedback words:', err);
+      setError('Failed to load feedback words. Please try again.');
+
+      // Fallback to mock data for development
+      const mockWords = [
+        { key: 'feedback00', word: 'labyrinth', weight: 3 },
+        { key: 'feedback01', word: 'residue', weight: 3 },
+        { key: 'feedback02', word: 'tremor', weight: 3 },
+        { key: 'feedback03', word: 'effigy', weight: 3 },
+        { key: 'feedback04', word: 'quasar', weight: 3 },
+        { key: 'feedback05', word: 'gossamer', weight: 3 }
+      ];
+      setFeedbackWords(mockWords);
+
+      const initialWeights = {};
+      mockWords.forEach(word => {
+        initialWeights[word.word] = word.weight;
+      });
+      setWeights(initialWeights);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleWeightChange = (word, newWeight) => {
+    setWeights(prev => ({
+      ...prev,
+      [word]: newWeight
+    }));
+  };
+
+  const handleSubmit = async () => {
+    setSubmitting(true);
+    setError(null);
+
+    try {
+      const response = await fetch('/api/v1/feedback/rate', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ ratings: weights })
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        console.log('Feedback words rated successfully:', data);
+
+        // Call onComplete callback if provided
+        if (onComplete) {
+          onComplete(data);
+        }
+      } else {
+        const errorData = await response.json();
+        throw new Error(errorData.detail || `Failed to rate feedback words: ${response.status}`);
+      }
+    } catch (err) {
+      console.error('Error rating feedback words:', err);
+      setError(`Failed to submit ratings: ${err.message}`);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const getWeightLabel = (weight) => {
+    const labels = {
+      0: 'Ignore',
+      1: 'Very Low',
+      2: 'Low',
+      3: 'Medium',
+      4: 'High',
+      5: 'Very High',
+      6: 'Essential'
+    };
+    return labels[weight] || 'Medium';
+  };
+
+  const getWeightColor = (weight) => {
+    const colors = {
+      0: 'bg-gray-200 text-gray-700',
+      1: 'bg-red-100 text-red-700',
+      2: 'bg-orange-100 text-orange-700',
+      3: 'bg-yellow-100 text-yellow-700',
+      4: 'bg-blue-100 text-blue-700',
+      5: 'bg-indigo-100 text-indigo-700',
+      6: 'bg-purple-100 text-purple-700'
+    };
+    return colors[weight] || 'bg-yellow-100 text-yellow-700';
+  };
+
+  if (loading) {
+    return (
+      <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+        <div className="flex items-center justify-center py-8">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+          <span className="ml-3 text-gray-600">Loading feedback words...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-2xl font-bold text-gray-800">
+          <i className="fas fa-balance-scale mr-2 text-blue-500"></i>
+          Weight Feedback Themes
+        </h2>
+        <button
+          onClick={onCancel}
+          className="text-gray-500 hover:text-gray-700"
+          title="Cancel"
+        >
+          <i className="fas fa-times text-xl"></i>
+        </button>
+      </div>
+
+      <p className="text-gray-600 mb-6">
+        Rate how much each theme should influence future prompt generation.
+        Higher weights mean the theme will have more influence.
+      </p>
+
+      {error && (
+        <div className="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <i className="fas fa-exclamation-circle text-red-400"></i>
+            </div>
+            <div className="ml-3">
+              <p className="text-sm text-red-700">{error}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="space-y-6">
+        {feedbackWords.map((item, index) => (
+          <div key={item.key} className="border border-gray-200 rounded-lg p-4">
+            <div className="flex justify-between items-center mb-3">
+              <div>
+                <span className="text-sm font-medium text-gray-500">
+                  Theme {index + 1}
+                </span>
+                <h3 className="text-lg font-semibold text-gray-800">
+                  {item.word}
+                </h3>
+              </div>
+              <div className={`px-3 py-1 rounded-full text-sm font-medium ${getWeightColor(weights[item.word] || 3)}`}>
+                {getWeightLabel(weights[item.word] || 3)}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <input
+                type="range"
+                min="0"
+                max="6"
+                value={weights[item.word] || 3}
+                onChange={(e) => handleWeightChange(item.word, parseInt(e.target.value))}
+                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+              />
+              <div className="flex justify-between text-xs text-gray-500">
+                <span>Ignore (0)</span>
+                <span>Medium (3)</span>
+                <span>Essential (6)</span>
+              </div>
+            </div>
+
+            <div className="flex justify-between mt-4">
+              <div className="flex space-x-2">
+                {[0, 1, 2, 3, 4, 5, 6].map(weight => (
+                  <button
+                    key={weight}
+                    onClick={() => handleWeightChange(item.word, weight)}
+                    className={`px-3 py-1 text-sm rounded ${
+                      (weights[item.word] || 3) === weight
+                        ? 'bg-blue-500 text-white'
+                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                    }`}
+                  >
+                    {weight}
+                  </button>
+                ))}
+              </div>
+              <div className="text-sm text-gray-500">
+                Current: <span className="font-semibold">{weights[item.word] || 3}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-8 pt-6 border-t border-gray-200">
+        <div className="flex justify-between items-center">
+          <div className="text-sm text-gray-500">
+            <i className="fas fa-info-circle mr-1"></i>
+            Your ratings will influence future prompt generation
+          </div>
+          <div className="flex space-x-3">
+            <button
+              onClick={onCancel}
+              className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+              disabled={submitting}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmit}
+              disabled={submitting}
+              className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {submitting ? (
+                <>
+                  <i className="fas fa-spinner fa-spin mr-2"></i>
+                  Submitting...
+                </>
+              ) : (
+                <>
+                  <i className="fas fa-check mr-2"></i>
+                  Submit Ratings
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeedbackWeighting;
+

frontend/src/components/PromptDisplay.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import FeedbackWeighting from './FeedbackWeighting';
 
 const PromptDisplay = () => {
   const [prompts, setPrompts] = useState([]); // Changed to array to handle multiple prompts
@@ -12,7 +13,8 @@ const PromptDisplay = () => {
     sessions: 0,
     needsRefill: true
   });
-  const [drawButtonDisabled, setDrawButtonDisabled] = useState(false);
+  const [showFeedbackWeighting, setShowFeedbackWeighting] = useState(false);
+  const [fillPoolLoading, setFillPoolLoading] = useState(false);
 
   useEffect(() => {
     fetchMostRecentPrompt();
@@ -140,28 +142,51 @@ const PromptDisplay = () => {
   };
 
   const handleFillPool = async () => {
-    setLoading(true);
+    // Show feedback weighting UI instead of directly filling pool
+    setShowFeedbackWeighting(true);
+  };
+
+  const handleFeedbackComplete = async (feedbackData) => {
+    // After feedback is submitted, fill the pool
+    setFillPoolLoading(true);
+    setShowFeedbackWeighting(false);
+
     try {
       const response = await fetch('/api/v1/prompts/fill-pool', { method: 'POST' });
       if (response.ok) {
-        // Refresh the prompt and pool stats - no alert needed, UI will show updated stats
+        // Refresh the prompt and pool stats
         fetchMostRecentPrompt();
         fetchPoolStats();
       } else {
-        setError('Failed to fill prompt pool');
+        setError('Failed to fill prompt pool after feedback');
       }
     } catch (err) {
-      setError('Failed to fill prompt pool');
+      setError('Failed to fill prompt pool after feedback');
     } finally {
-      setLoading(false);
+      setFillPoolLoading(false);
     }
   };
 
-  if (loading) {
+  const handleFeedbackCancel = () => {
+    setShowFeedbackWeighting(false);
+  };
+
+  if (showFeedbackWeighting) {
     return (
-      <div className="text-center p-8">
-        <div className="spinner mx-auto"></div>
-        <p className="mt-4">Filling pool...</p>
+      <FeedbackWeighting
+        onComplete={handleFeedbackComplete}
+        onCancel={handleFeedbackCancel}
+      />
+    );
+  }
+
+  if (fillPoolLoading) {
+    return (
+      <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+        <div className="flex items-center justify-center py-8">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+          <span className="ml-3 text-gray-600">Filling prompt pool...</span>
+        </div>
       </div>
     );
   }