Upload 4 files

App.tsx

@@ -0,0 +1,264 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Zap, Brain, Settings, Moon, ChevronRight, Send, Bot, Server, Sparkles, Circle, User, AlertCircle } from 'lucide-react';
+import { createClient } from '@supabase/supabase-js';
+import ChatInterface from './components/ChatInterface';
+import VisualizationPanel from './components/VisualizationPanel';
+import Sidebar from './components/Sidebar';
+import Header from './components/Header';
+import CognitionCocooner from './services/CognitionCocooner';
+import AICore from './services/AICore';
+import { CodetteResponse } from './components/CodetteComponents';
+
+interface Message {
+  role: string;
+  content: string;
+  timestamp: Date;
+  metadata?: CodetteResponse;
+}
+
+// Initialize Supabase client
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseKey) {
+  throw new Error('Missing Supabase environment variables');
+}
+
+const supabase = createClient(supabaseUrl, supabaseKey);
+
+const App: React.FC = () => {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [darkMode, setDarkMode] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [aiState, setAiState] = useState({
+    quantumState: [0.3, 0.7, 0.5],
+    chaosState: [0.2, 0.8, 0.4, 0.6],
+    activePerspectives: ['newton', 'davinci', 'neural_network', 'philosophical'],
+    ethicalScore: 0.93,
+    processingPower: 0.72
+  });
+  const [cocoons, setCocoons] = useState<Array<{id: string, type: string, wrapped: any}>>([]);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [currentUserId, setCurrentUserId] = useState<string | null>(null);
+  
+  const aiCore = useRef<AICore | null>(null);
+  const cocooner = useRef(new CognitionCocooner());
+
+  useEffect(() => {
+    try {
+      aiCore.current = new AICore();
+      setError(null);
+    } catch (err: any) {
+      console.error('Error initializing AI Core:', err);
+      setError(err.message);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Check if user is already authenticated
+    const checkAuth = async () => {
+      try {
+        const { data: { session }, error } = await supabase.auth.getSession();
+        
+        if (error) {
+          console.error('Auth check error:', error.message);
+          return;
+        }
+
+        if (session?.user) {
+          setCurrentUserId(session.user.id);
+          const { data: { role } } = await supabase.rpc('get_user_role');
+          setIsAdmin(role === 'admin');
+        }
+      } catch (error: any) {
+        console.error('Auth check error:', error.message);
+      }
+    };
+
+    checkAuth();
+  }, []);
+  
+  useEffect(() => {
+    if (!error) {
+      setMessages([
+        {
+          role: 'assistant',
+          content: 'Hello! I am Codette, an advanced AI assistant with recursive reasoning, self-learning capabilities, and multi-agent intelligence. How can I assist you today?',
+          timestamp: new Date(),
+          metadata: {
+            text: 'Hello! I am Codette, an advanced AI assistant with recursive reasoning, self-learning capabilities, and multi-agent intelligence. How can I assist you today?',
+            instabilityFlag: false,
+            perspectivesUsed: ['greeting', 'introduction'],
+            cocoonLog: ['Initializing Codette AI...', 'Quantum state stabilized'],
+            forceRefresh: () => handleForceRefresh('Hello! I am Codette, an advanced AI assistant with recursive reasoning, self-learning capabilities, and multi-agent intelligence. How can I assist you today?')
+          }
+        }
+      ]);
+    }
+  }, [error]);
+  
+  const handleForceRefresh = async (content: string) => {
+    if (!aiCore.current) return;
+    
+    setIsProcessing(true);
+    try {
+      const response = await aiCore.current.processInput(content, true, currentUserId || undefined);
+      
+      const assistantMessage: Message = {
+        role: 'assistant',
+        content: response,
+        timestamp: new Date(),
+        metadata: {
+          text: response,
+          instabilityFlag: Math.random() > 0.8,
+          perspectivesUsed: aiState.activePerspectives.slice(0, 3),
+          cocoonLog: [`Regenerating response for: ${content}`, `Generated new response at ${new Date().toISOString()}`],
+          forceRefresh: () => handleForceRefresh(content)
+        }
+      };
+      
+      setMessages(prev => [...prev.slice(0, -1), assistantMessage]);
+    } catch (error) {
+      console.error('Error regenerating response:', error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  
+  const toggleSidebar = () => {
+    setSidebarOpen(!sidebarOpen);
+  };
+  
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+    document.documentElement.classList.toggle('dark');
+  };
+  
+  const sendMessage = async (content: string) => {
+    if (!aiCore.current) {
+      setError('AI Core is not initialized. Please check your configuration.');
+      return;
+    }
+
+    const userMessage: Message = {
+      role: 'user',
+      content,
+      timestamp: new Date()
+    };
+    
+    setMessages(prev => [...prev, userMessage]);
+    setIsProcessing(true);
+    
+    try {
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      
+      const thought = { query: content, timestamp: new Date() };
+      const cocoonId = cocooner.current.wrap(thought);
+      setCocoons(prev => [...prev, { 
+        id: cocoonId, 
+        type: 'prompt', 
+        wrapped: thought 
+      }]);
+      
+      const response = await aiCore.current.processInput(content, false, currentUserId || undefined);
+      
+      setAiState(prev => ({
+        ...prev,
+        quantumState: [Math.random(), Math.random(), Math.random()].map(v => v.toFixed(2)).map(Number),
+        chaosState: [Math.random(), Math.random(), Math.random(), Math.random()].map(v => v.toFixed(2)).map(Number),
+        ethicalScore: Number((prev.ethicalScore + Math.random() * 0.1 - 0.05).toFixed(2)),
+        processingPower: Number((prev.processingPower + Math.random() * 0.1 - 0.05).toFixed(2))
+      }));
+      
+      const assistantMessage: Message = {
+        role: 'assistant',
+        content: response,
+        timestamp: new Date(),
+        metadata: {
+          text: response,
+          instabilityFlag: Math.random() > 0.8,
+          perspectivesUsed: aiState.activePerspectives.slice(0, 3),
+          cocoonLog: [`Processing query: ${content}`, `Generated response at ${new Date().toISOString()}`],
+          forceRefresh: () => handleForceRefresh(content)
+        }
+      };
+      
+      setMessages(prev => [...prev, assistantMessage]);
+    } catch (error: any) {
+      console.error('Error processing message:', error);
+      
+      setMessages(prev => [...prev, {
+        role: 'system',
+        content: 'An error occurred while processing your request. Please check your configuration and try again.',
+        timestamp: new Date()
+      }]);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  
+  if (error) {
+    return (
+      <div className={`min-h-screen flex items-center justify-center p-4 ${darkMode ? 'dark bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
+        <div className={`max-w-md w-full p-6 rounded-lg shadow-lg ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
+          <div className="flex items-center justify-center mb-4">
+            <AlertCircle className="text-red-500" size={48} />
+          </div>
+          <h1 className="text-xl font-bold text-center mb-4">Configuration Error</h1>
+          <p className="text-center mb-6">{error}</p>
+          <div className={`p-4 rounded-md ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
+            <p className="text-sm">
+              Please ensure you have:
+              <ol className="list-decimal ml-5 mt-2 space-y-1">
+                <li>Created a .env file</li>
+                <li>Added your OpenAI API key to the .env file</li>
+                <li>Added your Supabase configuration</li>
+              </ol>
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  
+  return (
+    <div className={`flex flex-col h-screen transition-colors duration-300 ${darkMode ? 'dark bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
+      <Header 
+        toggleSidebar={toggleSidebar}
+        toggleDarkMode={toggleDarkMode} 
+        darkMode={darkMode} 
+        aiState={aiState}
+      />
+      
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar 
+          isOpen={sidebarOpen} 
+          cocoons={cocoons} 
+          aiState={aiState}
+          darkMode={darkMode}
+          supabase={supabase}
+          isAdmin={isAdmin}
+          setIsAdmin={setIsAdmin}
+        />
+        
+        <main className="flex-1 flex flex-col md:flex-row overflow-hidden">
+          <ChatInterface 
+            messages={messages} 
+            sendMessage={sendMessage} 
+            isProcessing={isProcessing}
+            darkMode={darkMode}
+          />
+          
+          <VisualizationPanel 
+            aiState={aiState} 
+            darkMode={darkMode}
+          />
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default App;

index.css

@@ -0,0 +1,94 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --primary: #1E3A8A;
+  --secondary: #7E22CE;
+  --accent: #0D9488;
+  --background: #F9FAFB;
+  --foreground: #111827;
+}
+
+.dark {
+  --primary: #3B82F6;
+  --secondary: #8B5CF6;
+  --accent: #10B981;
+  --background: #111827;
+  --foreground: #F9FAFB;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Animation for neural pulses */
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Animation for typing indicators */
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+.typing-dot {
+  animation: bounce 1s infinite;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.7);
+}
+
+/* Transitions */
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}

main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />