import { SammyAgentProvider, useSammyAgent } from '@sammy-labs/sammy-three';

function App() {
  return (
    <SammyAgentProvider
      config={yourConfig}
      mode="text"           // Enable text mode
      enableTour={true}     // Enable tour feature
    >
      <YourChatComponent />
    </SammyAgentProvider>
  );
}

function ChatComponent() {
  const { sendMessage, streamingMessage } = useSammyAgent();
  
  return (
    <div>
      {streamingMessage && (
        <div className="streaming-response">
          {streamingMessage}
        </div>
      )}
    </div>
  );
}

const { startAgent } = useSammyAgent();

// Start with specific source tracking
await startAgent({
  agentMode: AgentMode.USER,
  source: 'chat'  // or 'tour' for tour-initiated conversations
});

function Chat() {
  const { sendMessage, activeSession } = useSammyAgent();
  const [messages, setMessages] = useState([]);

  const handleSend = (text) => {
    // Send message to agent
    sendMessage(text);
    
    // Add to local message history
    setMessages(prev => [...prev, {
      type: 'user',
      content: text,
      timestamp: new Date()
    }]);
  };
  
  // Listen for completed agent responses
  const onTurnComplete = ({ agent, user, source }) => {
    if (source !== 'tour') {  // Filter out tour messages
      setMessages(prev => [...prev, {
        type: 'agent',
        content: agent,
        timestamp: new Date()
      }]);
    }
  };
}

tour({
  element: 1,                           // Numeric ID from DOM context
  title: "Click Submit",                // Short title
  instruction: "Click here to submit"   // Clear instruction
})

import { setTourCallbacks } from '@sammy-labs/sammy-three';

useEffect(() => {
  setTourCallbacks(
    // Handle user actions (clicks, cancellations)
    (action: string) => {
      console.log('User action:', action);
      agent.sendUserAction(action);
    },
    // Handle chat messages from tour popover
    (message: string) => {
      console.log('Tour chat:', message);
      agent.sendMessage(message);
    }
  );
}, [agent]);

import { createTourHighlight, clearExistingHighlight } from '@sammy-labs/sammy-three';

// Create a tour highlight
createTourHighlight({
  element: document.querySelector('#submit-button'),
  title: 'Submit Form',
  description: 'Click this button to submit your application'
});

// Clear when done
clearExistingHighlight();

import { SammyTextAgentCore } from '@sammy-labs/sammy-three';

const textAgent = new SammyTextAgentCore({
  config: yourConfig,
  callbacks: {
    onTextResponse: (text) => {
      console.log('Streaming:', text);
    },
    onTurnComplete: ({ user, agent, source }) => {
      console.log('Turn complete:', { user, agent, source });
    }
  },
  enableTour: true,
  updateAgentState: (key, value) => {
    // State management
  }
});

// Start session
await textAgent.start({
  agentMode: AgentMode.USER,
  source: 'chat'
});

// Send messages
textAgent.sendMessage('Help me fill out this form');

// Clean up
await textAgent.destroy();

const textAgent = new SammyTextAgentCore({
  config: {
    contextInjection: {
      enabled: true,
      pageTracking: true,    // Track page navigation
      memorySearch: true,    // Search relevant memories
      clickTracking: false   // No click tracking in text mode
    }
  }
});

// Inject custom context
await textAgent.injectContext(
  "User is on checkout page with 3 items in cart",
  { source: 'custom' }
);

// Update page context
await textAgent.updatePageContext({
  title: 'Checkout - Payment',
  url: window.location.href,
  path: '/checkout/payment'
});

const config = {
  captureMethod: 'render',  // Periodic screenshots
  // Screen capture runs every 2 seconds by default
};

function FormAssistant() {
  const { sendMessage } = useSammyAgent();
  
  const requestHelp = () => {
    // Agent will use tour() to highlight form fields
    sendMessage(
      "Help me fill out this application form step by step"
    );
  };
  
  return (
    <div>
      <button onClick={requestHelp}>
        Get Help with Form
      </button>
      
      <form id="application-form">
        <input id="name" placeholder="Full Name" />
        <input id="email" placeholder="Email" />
        <textarea id="experience" placeholder="Experience" />
        <button id="submit">Submit</button>
      </form>
    </div>
  );
}

// Before - Voice mode
<SammyAgentProvider
  config={config}
  enableHighlighting={true}  // Voice highlighting
>

// After - Text mode
<SammyAgentProvider
  config={config}
  mode="text"
  enableTour={true}          // Text tour system
  enableHighlighting={false}  // Not used in text mode
>

// Step 1: Enable tour in provider
<SammyAgentProvider
  mode="text"
  enableTour={true}  // Add this
>

// Step 2: Set up tour callbacks
import { setTourCallbacks } from '@sammy-labs/sammy-three';

useEffect(() => {
  setTourCallbacks(
    (action) => agent.sendUserAction(action),
    (message) => agent.sendMessage(message)
  );
}, [agent]);