Session Management

const { sessionId, conversation } = useJadeSession();

console.log(sessionId);  // "sess_abc123..."

import { useEffect } from 'react';
import { useJadeSession } from '@gr33n-ai/jade-sdk-client';

function Chat() {
  const { sessionId, loadSession } = useJadeSession();

  // Save session ID
  useEffect(() => {
    if (sessionId) {
      localStorage.setItem('jade-session-id', sessionId);
    }
  }, [sessionId]);

  // Restore on mount
  useEffect(() => {
    const savedId = localStorage.getItem('jade-session-id');
    if (savedId) {
      loadSession(savedId);
    }
  }, []);

  // ...
}

import AsyncStorage from '@react-native-async-storage/async-storage';
import { STORAGE_KEYS } from '@gr33n-ai/jade-sdk-rn-client';

function Chat() {
  const { sessionId, loadSession } = useJadeSession();

  // Save session ID
  useEffect(() => {
    if (sessionId) {
      AsyncStorage.setItem(STORAGE_KEYS.LAST_SESSION_ID, sessionId);
    }
  }, [sessionId]);

  // Restore on mount
  useEffect(() => {
    const restore = async () => {
      const savedId = await AsyncStorage.getItem(STORAGE_KEYS.LAST_SESSION_ID);
      if (savedId) {
        await loadSession(savedId);
      }
    };
    restore();
  }, []);

  // ...
}

const { loadSession } = useJadeSession();

// Load and display previous conversation
const handleLoadSession = async (id: string) => {
  const conversation = await loadSession(id);
  // conversation is now populated in the hook
};

import { useAgentClient } from '@gr33n-ai/jade-sdk-client';

function SessionList() {
  const client = useAgentClient();
  const [sessions, setSessions] = useState([]);

  useEffect(() => {
    client.listSessions().then(res => setSessions(res.sessions));
  }, []);

  return (
    <ul>
      {sessions.map(session => (
        <li key={session.id}>
          {session.title || 'Untitled'}
          <span>{new Date(session.updated_at).toLocaleDateString()}</span>
        </li>
      ))}
    </ul>
  );
}

const client = useAgentClient();

// Get processed conversation
const { conversation } = await client.getSession(sessionId);

// Get raw conversation (includes internal data)
const { content } = await client.getSessionRaw(sessionId);

// Get session status
const { status, streaming } = await client.getSessionStatus(sessionId);

const client = useAgentClient();

// Update title
await client.updateSession(sessionId, {
  title: 'My Image Generation Session',
});

// Pin session
await client.updateSession(sessionId, {
  pinned: true,
});

const client = useAgentClient();

await client.deleteSession(sessionId);

const { clear, setSessionId } = useJadeSession();

const handleNewChat = () => {
  clear();           // Clear local conversation
  setSessionId(undefined);  // Reset session ID
};

const { reconnect, sessionId } = useJadeSession();

// Reconnect to session (resumes from last event)
const handleReconnect = async () => {
  if (sessionId) {
    await reconnect(sessionId);
  }
};

const client = useAgentClient();

const { status, streaming } = await client.getSessionStatus(sessionId);

if (streaming) {
  // Session has an active stream
  await reconnect(sessionId);
} else {
  // Session is idle
  await loadSession(sessionId);
}

function ChatWithHistory() {
  const client = useAgentClient();
  const { sessionId, loadSession, clear, setSessionId } = useJadeSession();
  const [sessions, setSessions] = useState([]);

  const refreshSessions = async () => {
    const { sessions } = await client.listSessions();
    setSessions(sessions);
  };

  const handleNewChat = () => {
    clear();
    setSessionId(undefined);
    // Will create new session on first message
  };

  const handleSelectSession = async (id: string) => {
    await loadSession(id);
  };

  const handleDeleteSession = async (id: string) => {
    await client.deleteSession(id);
    if (id === sessionId) {
      handleNewChat();
    }
    refreshSessions();
  };

  return (
    <div className="layout">
      <aside className="sidebar">
        <button onClick={handleNewChat}>New Chat</button>
        {sessions.map(s => (
          <div
            key={s.id}
            className={s.id === sessionId ? 'active' : ''}
            onClick={() => handleSelectSession(s.id)}
          >
            {s.title || 'Untitled'}
            <button onClick={() => handleDeleteSession(s.id)}>×</button>
          </div>
        ))}
      </aside>
      <main>
        <Chat />
      </main>
    </div>
  );
}