import { useChat } from 'ai/react';
import { LangGraphChatTransport } from '@keboola/langgraph-chat-transport';

const transport = new LangGraphChatTransport({
  api: '/api/langgraph/stream', // Your API endpoint
});

export function ChatComponent() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    transport,
  });

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          <strong>{message.role}:</strong> {message.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

// app/api/langgraph/stream/route.ts
export async function POST(request: Request) {
  const { messages } = await request.json();
  
  // Forward to your LangGraph API
  const response = await fetch('https://your-langgraph-api.com/stream', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages }),
  });

  // Return the SSE stream directly
  return new Response(response.body, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
    },
  });
}

import { useChat } from 'ai/react';
import { LangGraphChatTransport } from '@keboola/langgraph-chat-transport';

const transport = new LangGraphChatTransport({
  api: '/api/langgraph/stream',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
  },
});

export function AdvancedChatComponent() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    transport,
    onToolCall: ({ toolCall }) => {
      console.log('Tool called:', toolCall.toolName, toolCall.args);
    },
  });

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          <strong>{message.role}:</strong>
          {message.content}
          
          {/* Display tool invocations */}
          {message.toolInvocations?.map((tool) => (
            <div key={tool.toolCallId} className="tool-call">
              <strong>🔧 {tool.toolName}</strong>
              <pre>{JSON.stringify(tool.args, null, 2)}</pre>
              {tool.result && (
                <div className="tool-result">
                  Result: {JSON.stringify(tool.result, null, 2)}
                </div>
              )}
            </div>
          ))}
        </div>
      ))}
      
      <form onSubmit={handleSubmit}>
        <input 
          value={input} 
          onChange={handleInputChange} 
          disabled={isLoading}
          placeholder="Ask me anything..."
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Sending...' : 'Send'}
        </button>
      </form>
    </div>
  );
}

import { useChat } from 'ai/react';
import { LangGraphChatTransport } from '@keboola/langgraph-chat-transport';
import type { LangGraphMessage } from '@keboola/langgraph-chat-transport';
import type { UIMessage } from 'ai';

// Custom message type extending UIMessage
interface CustomMessage extends UIMessage {
  metadata?: {
    model?: string;
    tokens?: number;
  };
}

const transport = new LangGraphChatTransport<CustomMessage>({
  api: '/api/chat',
  body: {
    model: 'gpt-4',
    sessionId: 'user-123',
  },
});

export function TypedChat() {
  const { messages } = useChat<CustomMessage>({ transport });
  
  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          <div>
            {message.parts?.map((part) => 
              part.type === 'text' ? part.text : null
            )}
          </div>
          {message.metadata?.tokens && (
            <span>Tokens: {message.metadata.tokens}</span>
          )}
        </div>
      ))}
    </div>
  );
}

interface HttpChatTransportInitOptions {
  api?: string;                    // API endpoint (default: '/api/chat')
  headers?: Record<string, string> | Headers; // HTTP headers
  body?: object;                   // Additional request body
  credentials?: RequestCredentials; // Fetch credentials mode
  fetch?: FetchFunction;           // Custom fetch implementation
}

// Basic configuration
const transport = new LangGraphChatTransport({
  api: 'https://api.example.com/langgraph/stream',
});

// With authentication
const transport = new LangGraphChatTransport({
  api: '/api/chat',
  headers: {
    'Authorization': 'Bearer ' + process.env.API_KEY,
    'X-User-ID': 'user-123',
  },
});

// With additional request data
const transport = new LangGraphChatTransport({
  api: '/api/chat',
  body: {
    model: 'gpt-4',
    temperature: 0.7,
    sessionId: crypto.randomUUID(),
  },
});

// app/api/langgraph/stream/route.ts
import { NextRequest } from 'next/server';

export async function POST(request: NextRequest) {
  const { messages } = await request.json();
  
  const response = await fetch('https://your-langgraph-api.com/stream', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.LANGGRAPH_API_KEY}`,
    },
    body: JSON.stringify({
      messages,
      stream_mode: ['messages'],
      thread_id: 'unique-thread-id',
    }),
  });

  return new Response(response.body, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    },
  });
}

import express from 'express';

app.post('/api/langgraph/stream', async (req, res) => {
  const { messages } = req.body;
  
  const response = await fetch('https://your-langgraph-api.com/stream', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages }),
  });

  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  
  response.body?.pipe(res);
});

const { messages, error, reload } = useChat({
  transport,
  onError: (error) => {
    console.error('Chat error:', error);
    // Report to your error tracking service
  },
});

if (error) {
  return (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={reload}>Retry</button>
    </div>
  );
}