Advanced Usage

import { useState } from 'react';
import { ChatInterface, FunctionCall, ExecutionResult } from '@termix-it/react-tool';

function APIIntegratedChat() {
  const apiHeaders = {
    'X-API-Key': 'your-api-key',
    'Content-Type': 'application/json'
  };

  const handleFunctionExecution = (call: FunctionCall, result: ExecutionResult) => {
    if (call.metadata?.type === 'api') {
      console.log(`API call to ${call.metadata.path}:`, result.data);

      if (result.success) {
        // Handle successful API response
        if (call.name === 'getUserData') {
          // Update user state or show notification
        }
      } else {
        // Handle API errors
        console.error('API call failed:', result.error);
      }
    }
  };

  return (
    <ChatInterface
      projectId="your-project-id"
      aiConfigId="your-ai-config-id"
      authorization="your-api-key"
      restExecuteHeader={apiHeaders}
      onFunctionExecuted={handleFunctionExecution}
      placeholder="I can help you access user data, update settings, and more!"
    />
  );
}

function DynamicHeadersChat() {
  const [userToken, setUserToken] = useState('');
  const [customHeaders, setCustomHeaders] = useState<Record<string, string>>({});

  useEffect(() => {
    // Update headers when user token changes
    if (userToken) {
      setCustomHeaders({
        'Authorization': `Bearer ${userToken}`,
        'X-User-ID': 'current-user-id',
        'X-Timestamp': Date.now().toString()
      });
    }
  }, [userToken]);

  return (
    <div>
      <input
        type="text"
        placeholder="Enter your API token"
        value={userToken}
        onChange={(e) => setUserToken(e.target.value)}
        className="mb-4 p-2 border rounded"
      />

      <ChatInterface
        projectId="your-project-id"
        aiConfigId="your-ai-config-id"
        authorization="your-api-key"
        restExecuteHeaders={customHeaders}
        placeholder="Ask me to fetch your data or update settings..."
      />
    </div>
  );
}

import { useState, useEffect, useCallback } from 'react';
import { ChatWidget, ChatInterface, Message, FunctionCall, ExecutionResult } from '@termix-it/react-tool';

function DynamicWidget() {
  const [isOpen, setIsOpen] = useState(false);
  const [unreadCount, setUnreadCount] = useState(0);
  const [currentPage, setCurrentPage] = useState('/dashboard');
  const { user, isAuthenticated } = useAuth();

  // Auto-open widget for new users
  useEffect(() => {
    if (isAuthenticated && user.isFirstTimeUser) {
      setIsOpen(true);
    }
  }, [isAuthenticated, user]);

  // Page-specific context
  const getContextualWelcome = useCallback(() => {
    const contexts = {
      '/dashboard': 'Need help with your dashboard? I can explain any metrics or features.',
      '/settings': 'Having trouble with settings? I can guide you through configuration.',
      '/billing': 'Questions about billing or subscription? I\'m here to help.',
      default: 'Hi! How can I assist you today?'
    };
    return contexts[currentPage] || contexts.default;
  }, [currentPage]);

  const handleNewResponse = useCallback((message: Message) => {
    if (!isOpen) {
      setUnreadCount(prev => prev + 1);
    }
  }, [isOpen]);

  const handleOpenChange = useCallback((open: boolean) => {
    setIsOpen(open);
    if (open) {
      setUnreadCount(0); // Clear notifications when opened
    }
  }, []);

  if (!isAuthenticated) {
    return (
      <div className="fixed bottom-6 right-6">
        <ChatWidget
          title="Guest Support"
          buttonClassName="opacity-75"
        >
          <div className="p-4 text-center">
            <p className="mb-4">Please sign in to access AI assistance</p>
            <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
              Sign In
            </button>
          </div>
        </ChatWidget>
      </div>
    );
  }

  return (
    <div className="fixed bottom-6 right-6">
      {unreadCount > 0 && (
        <div className="absolute -top-2 -left-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs z-10">
          {unreadCount}
        </div>
      )}

      <ChatWidget
        title={currentPage === '/dashboard' ? `Hi ${user.name}! - Dashboard Help` : `Hi ${user.name}!`}
        defaultOpen={isOpen}
        onOpenChange={handleOpenChange}
        buttonClassName={unreadCount > 0 ? 'animate-pulse ring-2 ring-red-400' : ''}
      >
        <ChatInterface
          projectId="your-project-id"
          aiConfigId="your-ai-config-id"
          authorization="your-api-key"
          enableStreamingMode={true}
          placeholder={getContextualWelcome()}
          onResponseReceived={handleNewResponse}
          apiHeaders={{
            'X-User-ID': user.id,
            'X-Current-Page': currentPage,
            'X-User-Role': user.role
          }}
          className="h-full"
        />
      </ChatWidget>
    </div>
  );
}

function MultiWidgetApp() {
  const [activeWidgets, setActiveWidgets] = useState({
    support: false,
    sales: false,
    technical: false
  });

  return (
    <div className="relative min-h-screen">
      {/* Main content */}
      <div>Your application content</div>

      {/* Support Widget - Bottom Right */}
      <div className="fixed bottom-6 right-6">
        <ChatWidget
          title="Customer Support"
          buttonIcon="/icons/support.svg"
          defaultOpen={activeWidgets.support}
          onOpenChange={(open) => setActiveWidgets(prev => ({...prev, support: open}))}
        >
          <ChatInterface
            projectId="support-project-id"
            aiConfigId="support-ai-config"
            authorization="support-api-key"
            enableStreamingMode={true}
            placeholder="Hi! I'm your support assistant. How can I help?"
          />
        </ChatWidget>
      </div>

      {/* Sales Widget - Bottom Left */}
      <div className="fixed bottom-6 left-6">
        <ChatWidget
          title="Sales Assistant"
          buttonIcon="/icons/sales.svg"
          buttonClassName="bg-green-500 hover:bg-green-600"
          defaultOpen={activeWidgets.sales}
          onOpenChange={(open) => setActiveWidgets(prev => ({...prev, sales: open}))}
        >
          <ChatInterface
            projectId="sales-project-id"
            aiConfigId="sales-ai-config"
            authorization="sales-api-key"
            enableStreamingMode={true}
            placeholder="Interested in our products? I can help with pricing and features!"
          />
        </ChatWidget>
      </div>

      {/* Technical Widget - Top Right */}
      <div className="fixed top-6 right-6">
        <ChatWidget
          title="Technical Support"
          buttonIcon="/icons/technical.svg"
          buttonClassName="bg-purple-500 hover:bg-purple-600"
          defaultOpen={activeWidgets.technical}
          onOpenChange={(open) => setActiveWidgets(prev => ({...prev, technical: open}))}
        >
          <ChatInterface
            projectId="technical-project-id"
            aiConfigId="technical-ai-config"
            authorization="technical-api-key"
            enableStreamingMode={true}
            placeholder="Need technical help? I can assist with APIs, integrations, and troubleshooting."
          />
        </ChatWidget>
      </div>
    </div>
  );
}

import { useState, useCallback, useRef, useEffect } from 'react';

function MonitoredStreamingChat() {
  const [connectionStatus, setConnectionStatus] = useState<'disconnected' | 'connecting' | 'connected' | 'error'>('disconnected');
  const [streamingStats, setStreamingStats] = useState({
    charactersReceived: 0,
    chunksReceived: 0,
    averageLatency: 0
  });
  const streamStartTimeRef = useRef<number>(0);

  const handleMessageSent = useCallback((message: Message) => {
    setConnectionStatus('connecting');
    streamStartTimeRef.current = Date.now();
    setStreamingStats(prev => ({ ...prev, charactersReceived: 0, chunksReceived: 0 }));
  }, []);

  const handleResponseReceived = useCallback((message: Message) => {
    setConnectionStatus('connected');
    const streamEndTime = Date.now();
    const latency = streamEndTime - streamStartTimeRef.current;

    setStreamingStats(prev => ({
      ...prev,
      charactersReceived: message.content.length,
      averageLatency: latency
    }));
  }, []);

  const handleError = useCallback((error: any) => {
    setConnectionStatus('error');
    console.error('Streaming error:', error);
  }, []);

  return (
    <div className="space-y-4">
      {/* Connection Status Dashboard */}
      <div className="p-4 border rounded-lg bg-gray-50">
        <h3 className="text-sm font-semibold mb-2">Streaming Status</h3>
        <div className="grid grid-cols-2 gap-4 text-xs">
          <div>
            <span className="text-gray-600">Status:</span>
            <span className={`ml-2 font-semibold ${
              connectionStatus === 'connected' ? 'text-green-600' :
              connectionStatus === 'connecting' ? 'text-yellow-600' :
              connectionStatus === 'error' ? 'text-red-600' :
              'text-gray-500'
            }`}>
              {connectionStatus}
            </span>
          </div>
          <div>
            <span className="text-gray-600">Characters:</span>
            <span className="ml-2 font-mono">{streamingStats.charactersReceived}</span>
          </div>
          <div>
            <span className="text-gray-600">Chunks:</span>
            <span className="ml-2 font-mono">{streamingStats.chunksReceived}</span>
          </div>
          <div>
            <span className="text-gray-600">Latency:</span>
            <span className="ml-2 font-mono">{streamingStats.averageLatency}ms</span>
          </div>
        </div>
      </div>

      <ChatInterface
        projectId="your-project-id"
        aiConfigId="your-ai-config-id"
        authorization="your-api-key"
        enableStreamingMode={true}
        onMessageSent={handleMessageSent}
        onResponseReceived={handleResponseReceived}
        onError={handleError}
        placeholder="Streaming mode active! Watch the real-time stats above."
      />
    </div>
  );
}

function AdaptiveStreamingChat() {
  const [streamingSupported, setStreamingSupported] = useState(true);
  const [streamingEnabled, setStreamingEnabled] = useState(true);
  const [retryCount, setRetryCount] = useState(0);
  const maxRetries = 3;

  const handleError = useCallback((error: any) => {
    console.error('Streaming error:', error);

    // Check if it's a streaming-specific error
    if (error.message?.includes('EventSource') || error.message?.includes('text/event-stream')) {
      setRetryCount(prev => prev + 1);

      if (retryCount >= maxRetries) {
        console.warn('Streaming failed after retries, falling back to regular mode');
        setStreamingEnabled(false);
        setStreamingSupported(false);
      }
    }
  }, [retryCount]);

  const toggleStreaming = useCallback(() => {
    setStreamingEnabled(prev => !prev);
    setRetryCount(0); // Reset retry count when manually toggling
  }, []);

  return (
    <div className="space-y-4">
      {/* Streaming Controls */}
      <div className="flex items-center justify-between p-3 border rounded bg-blue-50">
        <div className="flex items-center space-x-2">
          <span className="text-sm font-medium">Streaming Mode:</span>
          <button
            onClick={toggleStreaming}
            disabled={!streamingSupported}
            className={`px-3 py-1 text-xs rounded font-medium ${
              streamingEnabled && streamingSupported
                ? 'bg-green-100 text-green-800 border border-green-300'
                : 'bg-gray-100 text-gray-600 border border-gray-300'
            } ${!streamingSupported ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
          >
            {streamingEnabled && streamingSupported ? 'ON' : 'OFF'}
          </button>
        </div>

        {!streamingSupported && (
          <span className="text-xs text-orange-600">
            Fallback to regular mode
          </span>
        )}

        {retryCount > 0 && streamingSupported && (
          <span className="text-xs text-yellow-600">
            Retry {retryCount}/{maxRetries}
          </span>
        )}
      </div>

      <ChatInterface
        projectId="your-project-id"
        aiConfigId="your-ai-config-id"
        authorization="your-api-key"
        enableStreamingMode={streamingEnabled && streamingSupported}
        onError={handleError}
        placeholder={
          streamingEnabled && streamingSupported
            ? "Streaming mode enabled - responses will appear in real-time!"
            : "Regular mode active - responses will appear all at once."
        }
      />
    </div>
  );
}

import { ChatInterface, FunctionCall, ExecutionResult } from '@termix-it/react-tool';
import { useWeb3 } from './hooks/useWeb3'; // Your web3 hook

function DeFiChat() {
  const { account, connect, isConnected } = useWeb3();

  const handleContractExecution = (call: FunctionCall, result: ExecutionResult) => {
    if (call.metadata?.type === 'contract') {
      const { contractName, contractAddress, chainName } = call.metadata;

      console.log(`Contract call on ${chainName}:`, {
        contract: contractName,
        address: contractAddress,
        function: call.name,
        parameters: call.parameters
      });

      if (result.success && result.data?.transactionHash) {
        // Show transaction confirmation
        showTransactionNotification(result.data.transactionHash);

        // Update UI state based on contract interaction
        if (call.name === 'approve') {
          // Handle approval transaction
        } else if (call.name === 'transfer') {
          // Handle transfer transaction
        }
      }
    }
  };

  const showTransactionNotification = (txHash: string) => {
    // Show success notification with etherscan link
    console.log(`Transaction submitted: https://etherscan.io/tx/${txHash}`);
  };

  return (
    <div>
      {!isConnected && (
        <button
          onClick={connect}
          className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          Connect Wallet
        </button>
      )}

      {isConnected && (
        <div className="mb-4 p-3 bg-green-100 border border-green-400 rounded">
          Connected: {account}
        </div>
      )}

      <ChatInterface
        projectId="your-project-id"
        aiConfigId="defi-config-id"
        authorization="your-defi-api-key"
        onFunctionExecuted={handleContractExecution}
        placeholder={
          isConnected
            ? "I can help you interact with smart contracts, check balances, and execute transactions!"
            : "Please connect your wallet to enable smart contract interactions."
        }
      />
    </div>
  );
}

function MultiChainDeFiChat() {
  const [supportedChains] = useState([
    { name: 'ethereum', rpc: 'https://mainnet.infura.io/v3/...' },
    { name: 'polygon', rpc: 'https://polygon-rpc.com' },
    { name: 'arbitrum', rpc: 'https://arb1.arbitrum.io/rpc' }
  ]);

  const handleContractExecution = (call: FunctionCall, result: ExecutionResult) => {
    if (call.metadata?.type === 'contract') {
      const chainName = call.metadata.chainName;
      const chain = supportedChains.find(c => c.name === chainName);

      if (result.success) {
        console.log(`Transaction on ${chainName}:`, result.data?.transactionHash);

        // Chain-specific handling
        switch (chainName) {
          case 'ethereum':
            // Handle Ethereum transactions
            break;
          case 'polygon':
            // Handle Polygon transactions
            break;
          case 'arbitrum':
            // Handle Arbitrum transactions
            break;
        }
      }
    }
  };

  return (
    <ChatInterface
      projectId="your-project-id"
      aiConfigId="multi-chain-config-id"
      authorization="your-multi-chain-api-key"
      onFunctionExecuted={handleContractExecution}
      placeholder="I can help you interact with contracts on Ethereum, Polygon, and Arbitrum!"
    />
  );
}

function DocumentationAssistant() {
  const [knowledgeStats, setKnowledgeStats] = useState({
    searchCount: 0,
    documentsFound: 0
  });

  const handleResponse = (message: Message) => {
    if (message.knowledgeContext && message.knowledgeContext.length > 0) {
      setKnowledgeStats(prev => ({
        searchCount: prev.searchCount + 1,
        documentsFound: prev.documentsFound + message.knowledgeContext!.length
      }));
    }
  };

  return (
    <div>
      <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded">
        <p className="text-sm">
          Knowledge Base Stats: {knowledgeStats.searchCount} searches,
          {knowledgeStats.documentsFound} documents referenced
        </p>
      </div>

      <ChatInterface
        projectId="your-project-id"
        aiConfigId="docs-assistant-config-id"
        authorization="your-docs-assistant-token"
        maxKnowledgeResults={5}
        onResponseReceived={handleResponse}
        placeholder="Ask me about your docs, APIs, or code examples..."
      />
    </div>
  );
}

import './assets/termix-theme.css';

function ThemedChat() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  return (
    <div>
      <button
        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
        className="mb-4 px-4 py-2 border rounded"
      >
        Switch to {theme === 'light' ? 'dark' : 'light'} mode
      </button>

      <ChatInterface
        projectId="your-project-id"
        aiConfigId="your-ai-config-id"
        authorization="your-api-key"
        className="custom-chat"
      />
    </div>
  );
}

function ReActEnabledChat() {
  const [reasoningSteps, setReasoningSteps] = useState<string[]>([]);

  const handleResponse = (message: Message) => {
    // Extract reasoning steps from ReAct pattern responses
    const reasoning = extractReasoningSteps(message.content);
    if (reasoning.length > 0) {
      setReasoningSteps(prev => [...prev, ...reasoning]);
    }
  };

  const extractReasoningSteps = (content: string): string[] => {
    const reasoningMatch = content.match(/Thought: (.+?)(?=\nAction:|$)/g);
    return reasoningMatch ? reasoningMatch.map(step => step.replace('Thought: ', '')) : [];
  };

  return (
    <div>
      {reasoningSteps.length > 0 && (
        <div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded">
          <h3 className="font-semibold mb-2">AI Reasoning Steps:</h3>
          <ul className="text-sm space-y-1">
            {reasoningSteps.slice(-3).map((step, index) => (
              <li key={index} className="flex items-start">
                <span className="mr-2">🤔</span>
                {step}
              </li>
            ))}
          </ul>
        </div>
      )}

      <ChatInterface
        projectId="your-project-id"
        aiConfigId="react-pattern-config-id"
        authorization="your-api-key"
        onResponseReceived={handleResponse}
        placeholder="I'll show you my reasoning process as I work through complex problems!"
      />
    </div>
  );
}

function RobustChat() {
  const [errors, setErrors] = useState<string[]>([]);
  const [isRetrying, setIsRetrying] = useState(false);

  const handleError = (error: any) => {
    const errorMessage = error.message || 'An unknown error occurred';
    setErrors(prev => [...prev.slice(-2), errorMessage]); // Keep last 3 errors

    // Implement retry logic for specific errors
    if (error.code === 'NETWORK_ERROR' && !isRetrying) {
      setIsRetrying(true);
      setTimeout(() => {
        setIsRetrying(false);
        // Trigger retry mechanism
      }, 2000);
    }
  };

  const clearErrors = () => setErrors([]);

  return (
    <div>
      {errors.length > 0 && (
        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded">
          <div className="flex justify-between items-start">
            <div>
              <h3 className="font-semibold text-red-800">Recent Errors:</h3>
              <ul className="text-sm text-red-700 mt-1">
                {errors.map((error, index) => (
                  <li key={index}>• {error}</li>
                ))}
              </ul>
            </div>
            <button
              onClick={clearErrors}
              className="text-red-600 hover:text-red-800 text-sm"
            >
              Clear
            </button>
          </div>
        </div>
      )}

      {isRetrying && (
        <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded">
          <p className="text-blue-700">Retrying connection...</p>
        </div>
      )}

      <ChatInterface
        projectId="your-project-id"
        aiConfigId="your-ai-config-id"
        authorization="your-api-key"
        onError={handleError}
      />
    </div>
  );
}