Let's say I'm working on the front end using livekit React component. Every time a user enters a room I check if this user already had a previous conversation. It they do then I preload the old context so that the agent can continue from where they left off. How do I retrieve in my React front end the whole list of previous messages so that they can be display in the screen upon user connection? where are they stored?

import { useEffect, useMemo } from 'react';
import {
  type ReceivedChatMessage,
  type TextStreamData,
  useChat,
  useRoomContext,
  useTranscriptions,
} from '@livekit/components-react';
import { transcriptionToChatMessage } from '@/lib/utils';

export default function useChatAndTranscription() {
  const transcriptions: TextStreamData[] = useTranscriptions();
  console.log('[DEBUG] useChatAndTranscription transcriptions:', transcriptions);

  const chat = useChat();
  const room = useRoomContext();
  console.log('[DEBUG] useChatAndTranscription room:', room);

  useEffect(() => {
    console.log('[DEBUG] Transcriptions from useTranscriptions:', transcriptions);
    console.log('[DEBUG] Room state:', room?.state);
  }, [transcriptions, room]);

  useEffect(() => {
    if (room) {
      console.log('[DEBUG] Room localParticipant:', room.localParticipant?.identity);
      console.log('[DEBUG] Room remoteParticipants:',
        Array.from(room.remoteParticipants.values()).map((p) => p.identity)
      );
    }
  }, [room]);

  const mergedTranscriptions = useMemo(() => {
    console.log('[DEBUG] Merged transcriptions:', transcriptions);
    const merged: Array<ReceivedChatMessage> = [
      ...transcriptions.map((transcription) => transcriptionToChatMessage(transcription, room)),
      ...chat.chatMessages,
    ];
    return merged.sort((a, b) => a.timestamp - b.timestamp);
  }, [transcriptions, chat.chatMessages, room]);

  //useEffect(() => {
  //  console.log('[DEBUG] Merged messages (transcriptions + chat):', mergedTranscriptions);
  //}, [mergedTranscriptions]);

  const sendToggleOutput = async (payload: string) => {
    if (!room) {
      console.warn('[LiveKit] No room context available for sendToggleOutput');
      return;
    }
    const agent = Array.from(room.remoteParticipants.values())[0];
    const agentIdentity = agent?.identity;
    if (!agentIdentity) {
      console.warn('[LiveKit] No agent identity found for performRpc');
      return;
    }
    try {
      await room.localParticipant.performRpc({
        destinationIdentity: agentIdentity,
        method: 'toggle_output',
        payload,
      });
      console.log(`[LiveKit] Sent toggle_output RPC with payload: ${payload}`);
    } catch (err) {
      console.error('[LiveKit] Error sending toggle_output RPC:', err);
    }
  };

  const sendToggleInput = async (payload: string) => {
    if (!room) {
      console.warn('[LiveKit] No room context available for sendToggleInput');
      return;
    }
    const agent = Array.from(room.remoteParticipants.values())[0];
    const agentIdentity = agent?.identity;
    if (!agentIdentity) {
      console.warn('[LiveKit] No agent identity found for performRpc');
      return;
    }
    try {
      await room.localParticipant.performRpc({
        destinationIdentity: agentIdentity,
        method: 'toggle_input',
        payload,
      });
      console.log(`[LiveKit] Sent toggle_input RPC with payload: ${payload}`);
    } catch (err) {
      console.error('[LiveKit] Error sending toggle_input RPC:', err);
    }
  };

  return { messages: mergedTranscriptions, send: chat.send, sendToggleOutput, sendToggleInput };
}

Thanks for reaching out, Roman. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.