User Preferences Storage

const API_KEY = process.env.SUPER_AGENT_KEY!;
const BASE_URL = 'https://www.superagentstack.com/api';

interface Preference {
  id?: string;
  key: string;
  value: string;
  category: string;
}

// Save a preference
export async function savePreference(pref: Preference) {
  const response = await fetch(`${BASE_URL}/memory/facts`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'superAgentKey': API_KEY,
    },
    body: JSON.stringify({
      content: `User preference: ${pref.key} = ${pref.value}`,
      category: `preference:${pref.category}`,
      level: 'user',
      metadata: { key: pref.key, value: pref.value },
    }),
  });
  return response.json();
}

// Get all preferences
export async function getPreferences() {
  const response = await fetch(
    `${BASE_URL}/memory/facts?category=preference`,
    { headers: { 'superAgentKey': API_KEY } }
  );
  const { data } = await response.json();
  return data.map((fact: any) => ({
    id: fact.id,
    key: fact.metadata?.key,
    value: fact.metadata?.value,
    category: fact.category?.replace('preference:', ''),
  }));
}

// Search preferences
export async function searchPreferences(query: string) {
  const response = await fetch(`${BASE_URL}/memory/facts/search`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'superAgentKey': API_KEY,
    },
    body: JSON.stringify({ query: `preference ${query}`, topK: 10 }),
  });
  return response.json();
}

// Delete a preference
export async function deletePreference(id: string) {
  await fetch(`${BASE_URL}/memory/facts/${id}`, {
    method: 'DELETE',
    headers: { 'superAgentKey': API_KEY },
  });
}

'use client';
import { useState, useEffect } from 'react';
import { savePreference, getPreferences, deletePreference } from '@/lib/preferences';

export function UserSettings() {
  const [preferences, setPreferences] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  // Load preferences on mount
  useEffect(() => {
    loadPreferences();
  }, []);

  const loadPreferences = async () => {
    setLoading(true);
    const prefs = await getPreferences();
    setPreferences(prefs);
    setLoading(false);
  };

  const handleSave = async (key: string, value: string, category: string) => {
    await savePreference({ key, value, category });
    await loadPreferences(); // Refresh list
  };

  const handleDelete = async (id: string) => {
    await deletePreference(id);
    await loadPreferences();
  };

  return (
    <div className="space-y-6">
      <h2 className="text-xl font-bold">User Preferences</h2>
      
      {/* Theme Setting */}
      <div className="flex items-center justify-between p-4 border rounded">
        <div>
          <h3 className="font-medium">Theme</h3>
          <p className="text-sm text-gray-500">Choose your preferred theme</p>
        </div>
        <select 
          onChange={(e) => handleSave('theme', e.target.value, 'appearance')}
          className="border rounded px-3 py-2"
        >
          <option value="light">Light</option>
          <option value="dark">Dark</option>
          <option value="system">System</option>
        </select>
      </div>

      {/* Language Setting */}
      <div className="flex items-center justify-between p-4 border rounded">
        <div>
          <h3 className="font-medium">Language</h3>
          <p className="text-sm text-gray-500">Select your language</p>
        </div>
        <select 
          onChange={(e) => handleSave('language', e.target.value, 'localization')}
          className="border rounded px-3 py-2"
        >
          <option value="en">English</option>
          <option value="es">Spanish</option>
          <option value="fr">French</option>
        </select>
      </div>

      {/* Saved Preferences */}
      <div className="mt-8">
        <h3 className="font-medium mb-4">Saved Preferences</h3>
        {loading ? (
          <p>Loading...</p>
        ) : (
          <ul className="space-y-2">
            {preferences.map((pref) => (
              <li key={pref.id} className="flex justify-between items-center p-2 bg-gray-50 rounded">
                <span>{pref.key}: {pref.value}</span>
                <button onClick={() => handleDelete(pref.id)} className="text-red-500 text-sm">
                  Delete
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

// AI can access user preferences via user memory
const response = await client.chat.completions.create({
  model: 'openai/gpt-4o-mini',
  messages: [{ role: 'user', content: 'Suggest a color scheme for my app' }],
  sessionId: crypto.randomUUID(),
  useUserMemory: true,  // AI will see stored preferences
});

// AI response might be:
// "Since you prefer dark mode, I'd suggest a dark color scheme with..."