Spaces:

JeCabrera
/

ReelBot

Running

ReelBot / App.tsx

Upload 19 files

2accaeb verified over 1 year ago

12.6 kB

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Sidebar } from './components/Sidebar';
import { ChatView } from './components/ChatView';
import type { ChatSession, ChatMessage, UploadedFile } from './types';
import { geminiService } from './services/geminiService';
import { NEW_CHAT_ID, REEL_BOT_SYSTEM_INSTRUCTION } from './constants';
import type { Chat } from '@google/genai';
import { MenuIcon } from './components/icons';

const App: React.FC = () => {
  const [chats, setChats] = useState<Map<string, ChatSession>>(new Map());
  const [activeChatId, setActiveChatId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  const transientGeminiChatsRef = useRef<Map<string, Chat>>(new Map());
  const isCancelledRef = useRef(false);

  useEffect(() => {
    const storedChats = localStorage.getItem('reelCreatorChats');
    if (storedChats) {
      try {
        const parsedChatsArray: [string, ChatSession][] = JSON.parse(storedChats);
        parsedChatsArray.forEach(([, chat]) => {
          if (!chat.messages) {
            chat.messages = [];
          }
          chat.messages.forEach(msg => {
            if (msg.file && !msg.file.dataUrl && !msg.file.type.startsWith('image/')) {
              // Potentially handle old document structures
            }
          });
        });
        setChats(new Map(parsedChatsArray));
        if (parsedChatsArray.length > 0) {
           // setActiveChatId(parsedChatsArray[0][0]); // Keep previous logic or decide default
        } else {
           setActiveChatId(NEW_CHAT_ID);
        }
      } catch (e) {
        console.error("Failed to parse chats from localStorage", e);
        localStorage.removeItem('reelCreatorChats'); 
        setActiveChatId(NEW_CHAT_ID);
      }
    } else {
        setActiveChatId(NEW_CHAT_ID);
    }
  }, []);

  useEffect(() => {
    if (chats.size > 0 || localStorage.getItem('reelCreatorChats')) { 
        const storableChatsArray = Array.from(chats.entries()).map(([id, session]) => {
            const storableMessages = session.messages.map(msg => {
                if (msg.file) {
                    const { /* rawFile, */ ...fileToStore } = msg.file; // rawFile removed from example
                    return { ...msg, file: fileToStore };
                }
                return msg;
            });
            return [id, { ...session, messages: storableMessages }];
        });
        localStorage.setItem('reelCreatorChats', JSON.stringify(storableChatsArray));
    }
  }, [chats]);
  
  const getOrCreateGeminiChatInstance = useCallback(async (chatId: string): Promise<Chat> => {
    if (transientGeminiChatsRef.current.has(chatId)) {
      return transientGeminiChatsRef.current.get(chatId)!;
    }
    const chatSession = chats.get(chatId);
    const history = chatSession 
      ? chatSession.messages
          .filter(m => !m.error) 
          .map(m => {
            let messageText = m.text;
            if (m.file) {
                // Keeping simplified logic for history
                 messageText = `${m.text} (User had attached ${m.file.type.startsWith('image/') ? 'image' : 'document'}: ${m.file.name})`;
            }
             return { 
              role: m.sender === 'user' ? 'user' : 'model', 
              parts: [{text: messageText}]
            }
          }) 
      : [];
    
    const newInstance = await geminiService.createChatSessionWithHistory(REEL_BOT_SYSTEM_INSTRUCTION, history);
    transientGeminiChatsRef.current.set(chatId, newInstance);
    return newInstance;
  }, [chats]);

  const handleStopGeneration = useCallback(() => {
    isCancelledRef.current = true;
  }, []);

  const handleSendMessage = useCallback(async (userInput: string, file?: UploadedFile, isSuggestion: boolean = false) => {
    if (!userInput.trim() && !file) return;
    
    isCancelledRef.current = false; 
    setIsLoading(true);
    setError(null);

    let currentChatId = activeChatId;
    let currentChatSession: ChatSession | undefined;

    const userMessage: ChatMessage = {
      id: Date.now().toString(),
      text: userInput,
      sender: 'user',
      timestamp: Date.now(),
      file: file ? { name: file.name, type: file.type, size: file.size, dataUrl: file.dataUrl } : undefined,
    };

    if (currentChatId === NEW_CHAT_ID || !currentChatId || !chats.has(currentChatId)) {
      const newChatId = Date.now().toString();
      let chatName = "Nuevo Chat";
      const trimmedInput = userInput.trim();

      if (trimmedInput) {
        const words = trimmedInput.split(' ');
        chatName = words.slice(0, 5).join(' ');
        if (chatName.length > 30) {
          chatName = chatName.substring(0, 27) + "...";
        }
      } else if (file) {
        chatName = `Chat con ${file.name}`;
        if (chatName.length > 30) {
          chatName = chatName.substring(0, 27) + "...";
        }
      } else {
        chatName = `Nuevo Chat ${new Date().toLocaleTimeString()}`;
      }
      
      currentChatSession = {
        id: newChatId,
        name: chatName,
        messages: [userMessage],
        createdAt: Date.now(),
      };
      setChats(prev => new Map(prev).set(newChatId, currentChatSession!));
      setActiveChatId(newChatId);
      currentChatId = newChatId;
    } else {
      currentChatSession = chats.get(currentChatId);
      if (currentChatSession) {
        const updatedMessages = [...currentChatSession.messages, userMessage];
        setChats(prev => new Map(prev).set(currentChatId!, { ...currentChatSession!, messages: updatedMessages }));
      }
    }
    
    if (!currentChatSession || !currentChatId) {
        setError("Failed to create or find chat session.");
        setIsLoading(false);
        return;
    }

    const modelMessageId = Date.now().toString() + '_model';
    const initialModelMessage: ChatMessage = {
      id: modelMessageId,
      text: '',
      sender: 'model',
      timestamp: Date.now(),
      isStreaming: true,
    };

    setChats(prev => {
        const updatedChats = new Map(prev);
        const chat = updatedChats.get(currentChatId!);
        if (chat) {
            const updatedMessages = [...chat.messages, initialModelMessage];
            updatedChats.set(currentChatId!, { ...chat, messages: updatedMessages });
        }
        return updatedChats;
    });
    
    let accumulatedText = "";
    let groundingChunks: ChatMessage['groundingChunks'] = [];
    try {
      const geminiChat = await getOrCreateGeminiChatInstance(currentChatId);
      const imageFileToSend = (file?.type.startsWith('image/') && file.dataUrl) ? file : undefined;

      const stream = await geminiService.sendMessageStream(geminiChat, userInput, imageFileToSend);
      for await (const chunk of stream) {
        if (isCancelledRef.current) {
          console.log("Generation stopped by user.");
          break; 
        }
        accumulatedText += chunk.text;
        if (chunk.groundingChunks && chunk.groundingChunks.length > 0) {
          groundingChunks = [...(groundingChunks || []), ...chunk.groundingChunks];
        }
        
        setChats(prev => {
            const updatedChats = new Map(prev);
            const chat = updatedChats.get(currentChatId!);
            if (chat) {
                const msgIndex = chat.messages.findIndex(m => m.id === modelMessageId);
                if (msgIndex !== -1) {
                    const newMessages = [...chat.messages];
                    newMessages[msgIndex] = {
                        ...newMessages[msgIndex],
                        text: accumulatedText,
                        groundingChunks: groundingChunks.length > 0 ? groundingChunks : undefined,
                        isStreaming: true 
                    };
                    updatedChats.set(currentChatId!, { ...chat, messages: newMessages });
                }
            }
            return updatedChats;
        });
      }
      
       setChats(prev => {
            const updatedChats = new Map(prev);
            const chat = updatedChats.get(currentChatId!);
            if (chat) {
                const msgIndex = chat.messages.findIndex(m => m.id === modelMessageId);
                if (msgIndex !== -1) {
                    const newMessages = [...chat.messages];
                    newMessages[msgIndex] = {
                        ...newMessages[msgIndex],
                        text: accumulatedText, 
                        isStreaming: false, 
                        groundingChunks: groundingChunks.length > 0 ? groundingChunks : undefined
                    };
                    updatedChats.set(currentChatId!, { ...chat, messages: newMessages });
                }
            }
            return updatedChats;
        });

    } catch (e: any) {
      console.error("Error sending message to Gemini:", e);
      const errorMessage = e.message || "An error occurred with the AI service.";
      setError(errorMessage); 
      setChats(prev => {
            const updatedChats = new Map(prev);
            const chat = updatedChats.get(currentChatId!);
            if (chat) {
                const msgIndex = chat.messages.findIndex(m => m.id === modelMessageId);
                if (msgIndex !== -1) {
                    const newMessages = [...chat.messages];
                    newMessages[msgIndex] = {
                        ...newMessages[msgIndex],
                        text: accumulatedText || `Error: ${errorMessage}`,
                        isStreaming: false,
                        error: errorMessage
                    };
                    updatedChats.set(currentChatId!, { ...chat, messages: newMessages });
                } else { 
                    const errorMsgEntry: ChatMessage = {
                         id: modelMessageId, 
                         text: `Error: ${errorMessage}`,
                         sender: 'model',
                         timestamp: Date.now(),
                         isStreaming: false,
                         error: errorMessage
                    };
                    const newMessages = [...chat.messages, errorMsgEntry];
                    updatedChats.set(currentChatId!, { ...chat, messages: newMessages });
                }
            }
            return updatedChats;
        });
    } finally {
      setIsLoading(false);
    }
  }, [activeChatId, chats, getOrCreateGeminiChatInstance]);

  const handleSelectChat = useCallback((chatId: string | null) => {
    setActiveChatId(chatId);
    setIsSidebarOpen(false); // Close sidebar on chat selection (mobile)
    if (chatId && chatId !== NEW_CHAT_ID && chats.has(chatId)) {
        getOrCreateGeminiChatInstance(chatId);
    }
  }, [chats, getOrCreateGeminiChatInstance]);

  const handleCreateNewChat = useCallback(() => {
    setActiveChatId(NEW_CHAT_ID);
    setIsSidebarOpen(false); // Close sidebar on new chat (mobile)
  }, []);
  
  const activeChatSession = activeChatId === NEW_CHAT_ID || !activeChatId ? null : chats.get(activeChatId) || null;

  return (
    <div className="flex h-screen bg-slate-900 text-slate-100 overflow-hidden md:overflow-auto">
      <Sidebar
        chats={Array.from(chats.values())}
        activeChatId={activeChatId}
        onSelectChat={handleSelectChat}
        onCreateNewChat={handleCreateNewChat}
        isOpen={isSidebarOpen}
        onClose={() => setIsSidebarOpen(false)}
      />
      {isSidebarOpen && (
        <div
          onClick={() => setIsSidebarOpen(false)}
          className="fixed inset-0 z-30 bg-black/60 md:hidden"
          aria-hidden="true"
        />
      )}
      <div className="flex-1 flex flex-col h-full">
        <div className="p-3 border-b border-slate-700 md:hidden flex items-center justify-start bg-slate-900 sticky top-0 z-20">
          <button
            onClick={() => setIsSidebarOpen(true)}
            className="text-slate-300 hover:text-slate-100 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500"
            aria-label="Open menu"
          >
            <MenuIcon className="w-6 h-6" />
          </button>
          {/* Title text and spacer div removed here */}
        </div>
        <ChatView
          activeChatSession={activeChatSession}
          onSendMessage={handleSendMessage}
          isLoading={isLoading}
          error={error}
          onStopGeneration={handleStopGeneration} 
        />
      </div>
    </div>
  );
};

export default App;


	import React, { useState, useEffect, useCallback, useRef } from 'react';
	import { Sidebar } from './components/Sidebar';
	import { ChatView } from './components/ChatView';
	import type { ChatSession, ChatMessage, UploadedFile } from './types';
	import { geminiService } from './services/geminiService';
	import { NEW_CHAT_ID, REEL_BOT_SYSTEM_INSTRUCTION } from './constants';
	import type { Chat } from '@google/genai';
	import { MenuIcon } from './components/icons';

	const App: React.FC = () => {
	const [chats, setChats] = useState<Map<string, ChatSession>>(new Map());
	const [activeChatId, setActiveChatId] = useState<string \| null>(null);
	const [isLoading, setIsLoading] = useState(false);
	const [error, setError] = useState<string \| null>(null);
	const [isSidebarOpen, setIsSidebarOpen] = useState(false);

	const transientGeminiChatsRef = useRef<Map<string, Chat>>(new Map());
	const isCancelledRef = useRef(false);

	useEffect(() => {
	const storedChats = localStorage.getItem('reelCreatorChats');
	if (storedChats) {
	try {
	const parsedChatsArray: [string, ChatSession][] = JSON.parse(storedChats);
	parsedChatsArray.forEach(([, chat]) => {
	if (!chat.messages) {
	chat.messages = [];
	}
	chat.messages.forEach(msg => {
	if (msg.file && !msg.file.dataUrl && !msg.file.type.startsWith('image/')) {
	// Potentially handle old document structures
	}
	});
	});
	setChats(new Map(parsedChatsArray));
	if (parsedChatsArray.length > 0) {
	// setActiveChatId(parsedChatsArray[0][0]); // Keep previous logic or decide default
	} else {
	setActiveChatId(NEW_CHAT_ID);
	}
	} catch (e) {
	console.error("Failed to parse chats from localStorage", e);
	localStorage.removeItem('reelCreatorChats');
	setActiveChatId(NEW_CHAT_ID);
	}
	} else {
	setActiveChatId(NEW_CHAT_ID);
	}
	}, []);

	useEffect(() => {
	if (chats.size > 0 \|\| localStorage.getItem('reelCreatorChats')) {
	const storableChatsArray = Array.from(chats.entries()).map(([id, session]) => {
	const storableMessages = session.messages.map(msg => {
	if (msg.file) {
	const { /* rawFile, */ ...fileToStore } = msg.file; // rawFile removed from example
	return { ...msg, file: fileToStore };
	}
	return msg;
	});
	return [id, { ...session, messages: storableMessages }];
	});
	localStorage.setItem('reelCreatorChats', JSON.stringify(storableChatsArray));
	}
	}, [chats]);

	const getOrCreateGeminiChatInstance = useCallback(async (chatId: string): Promise<Chat> => {
	if (transientGeminiChatsRef.current.has(chatId)) {
	return transientGeminiChatsRef.current.get(chatId)!;
	}
	const chatSession = chats.get(chatId);
	const history = chatSession
	? chatSession.messages
	.filter(m => !m.error)
	.map(m => {
	let messageText = m.text;
	if (m.file) {
	// Keeping simplified logic for history
	messageText = `${m.text} (User had attached ${m.file.type.startsWith('image/') ? 'image' : 'document'}: ${m.file.name})`;
	}
	return {
	role: m.sender === 'user' ? 'user' : 'model',
	parts: [{text: messageText}]
	}
	})
	: [];

	const newInstance = await geminiService.createChatSessionWithHistory(REEL_BOT_SYSTEM_INSTRUCTION, history);
	transientGeminiChatsRef.current.set(chatId, newInstance);
	return newInstance;
	}, [chats]);

	const handleStopGeneration = useCallback(() => {
	isCancelledRef.current = true;
	}, []);

	const handleSendMessage = useCallback(async (userInput: string, file?: UploadedFile, isSuggestion: boolean = false) => {
	if (!userInput.trim() && !file) return;

	isCancelledRef.current = false;
	setIsLoading(true);
	setError(null);

	let currentChatId = activeChatId;
	let currentChatSession: ChatSession \| undefined;

	const userMessage: ChatMessage = {
	id: Date.now().toString(),
	text: userInput,
	sender: 'user',
	timestamp: Date.now(),
	file: file ? { name: file.name, type: file.type, size: file.size, dataUrl: file.dataUrl } : undefined,
	};

	if (currentChatId === NEW_CHAT_ID \|\| !currentChatId \|\| !chats.has(currentChatId)) {
	const newChatId = Date.now().toString();
	let chatName = "Nuevo Chat";
	const trimmedInput = userInput.trim();

	if (trimmedInput) {
	const words = trimmedInput.split(' ');
	chatName = words.slice(0, 5).join(' ');
	if (chatName.length > 30) {
	chatName = chatName.substring(0, 27) + "...";
	}
	} else if (file) {
	chatName = `Chat con ${file.name}`;
	if (chatName.length > 30) {
	chatName = chatName.substring(0, 27) + "...";
	}
	} else {
	chatName = `Nuevo Chat ${new Date().toLocaleTimeString()}`;
	}

	currentChatSession = {
	id: newChatId,
	name: chatName,
	messages: [userMessage],
	createdAt: Date.now(),
	};
	setChats(prev => new Map(prev).set(newChatId, currentChatSession!));
	setActiveChatId(newChatId);
	currentChatId = newChatId;
	} else {
	currentChatSession = chats.get(currentChatId);
	if (currentChatSession) {
	const updatedMessages = [...currentChatSession.messages, userMessage];
	setChats(prev => new Map(prev).set(currentChatId!, { ...currentChatSession!, messages: updatedMessages }));
	}
	}

	if (!currentChatSession \|\| !currentChatId) {
	setError("Failed to create or find chat session.");
	setIsLoading(false);
	return;
	}

	const modelMessageId = Date.now().toString() + '_model';
	const initialModelMessage: ChatMessage = {
	id: modelMessageId,
	text: '',
	sender: 'model',
	timestamp: Date.now(),
	isStreaming: true,
	};

	setChats(prev => {
	const updatedChats = new Map(prev);
	const chat = updatedChats.get(currentChatId!);
	if (chat) {
	const updatedMessages = [...chat.messages, initialModelMessage];
	updatedChats.set(currentChatId!, { ...chat, messages: updatedMessages });
	}
	return updatedChats;
	});

	let accumulatedText = "";
	let groundingChunks: ChatMessage['groundingChunks'] = [];
	try {
	const geminiChat = await getOrCreateGeminiChatInstance(currentChatId);
	const imageFileToSend = (file?.type.startsWith('image/') && file.dataUrl) ? file : undefined;

	const stream = await geminiService.sendMessageStream(geminiChat, userInput, imageFileToSend);
	for await (const chunk of stream) {
	if (isCancelledRef.current) {
	console.log("Generation stopped by user.");
	break;
	}
	accumulatedText += chunk.text;
	if (chunk.groundingChunks && chunk.groundingChunks.length > 0) {
	groundingChunks = [...(groundingChunks \|\| []), ...chunk.groundingChunks];
	}

	setChats(prev => {
	const updatedChats = new Map(prev);
	const chat = updatedChats.get(currentChatId!);
	if (chat) {
	const msgIndex = chat.messages.findIndex(m => m.id === modelMessageId);
	if (msgIndex !== -1) {
	const newMessages = [...chat.messages];
	newMessages[msgIndex] = {
	...newMessages[msgIndex],
	text: accumulatedText,
	groundingChunks: groundingChunks.length > 0 ? groundingChunks : undefined,
	isStreaming: true
	};
	updatedChats.set(currentChatId!, { ...chat, messages: newMessages });
	}
	}
	return updatedChats;
	});
	}

	setChats(prev => {
	const updatedChats = new Map(prev);
	const chat = updatedChats.get(currentChatId!);
	if (chat) {
	const msgIndex = chat.messages.findIndex(m => m.id === modelMessageId);
	if (msgIndex !== -1) {
	const newMessages = [...chat.messages];
	newMessages[msgIndex] = {
	...newMessages[msgIndex],
	text: accumulatedText,
	isStreaming: false,
	groundingChunks: groundingChunks.length > 0 ? groundingChunks : undefined
	};
	updatedChats.set(currentChatId!, { ...chat, messages: newMessages });
	}
	}
	return updatedChats;
	});

	} catch (e: any) {
	console.error("Error sending message to Gemini:", e);
	const errorMessage = e.message \|\| "An error occurred with the AI service.";
	setError(errorMessage);
	setChats(prev => {
	const updatedChats = new Map(prev);
	const chat = updatedChats.get(currentChatId!);
	if (chat) {
	const msgIndex = chat.messages.findIndex(m => m.id === modelMessageId);
	if (msgIndex !== -1) {
	const newMessages = [...chat.messages];
	newMessages[msgIndex] = {
	...newMessages[msgIndex],
	text: accumulatedText \|\| `Error: ${errorMessage}`,
	isStreaming: false,
	error: errorMessage
	};
	updatedChats.set(currentChatId!, { ...chat, messages: newMessages });
	} else {
	const errorMsgEntry: ChatMessage = {
	id: modelMessageId,
	text: `Error: ${errorMessage}`,
	sender: 'model',
	timestamp: Date.now(),
	isStreaming: false,
	error: errorMessage
	};
	const newMessages = [...chat.messages, errorMsgEntry];
	updatedChats.set(currentChatId!, { ...chat, messages: newMessages });
	}
	}
	return updatedChats;
	});
	} finally {
	setIsLoading(false);
	}
	}, [activeChatId, chats, getOrCreateGeminiChatInstance]);

	const handleSelectChat = useCallback((chatId: string \| null) => {
	setActiveChatId(chatId);
	setIsSidebarOpen(false); // Close sidebar on chat selection (mobile)
	if (chatId && chatId !== NEW_CHAT_ID && chats.has(chatId)) {
	getOrCreateGeminiChatInstance(chatId);
	}
	}, [chats, getOrCreateGeminiChatInstance]);

	const handleCreateNewChat = useCallback(() => {
	setActiveChatId(NEW_CHAT_ID);
	setIsSidebarOpen(false); // Close sidebar on new chat (mobile)
	}, []);

	const activeChatSession = activeChatId === NEW_CHAT_ID \|\| !activeChatId ? null : chats.get(activeChatId) \|\| null;

	return (
	<div className="flex h-screen bg-slate-900 text-slate-100 overflow-hidden md:overflow-auto">
	<Sidebar
	chats={Array.from(chats.values())}
	activeChatId={activeChatId}
	onSelectChat={handleSelectChat}
	onCreateNewChat={handleCreateNewChat}
	isOpen={isSidebarOpen}
	onClose={() => setIsSidebarOpen(false)}
	/>

	{isSidebarOpen && (
	<div
	onClick={() => setIsSidebarOpen(false)}
	className="fixed inset-0 z-30 bg-black/60 md:hidden"
	aria-hidden="true"
	/>
	)}

	<div className="flex-1 flex flex-col h-full">
	<div className="p-3 border-b border-slate-700 md:hidden flex items-center justify-start bg-slate-900 sticky top-0 z-20">
	<button
	onClick={() => setIsSidebarOpen(true)}
	className="text-slate-300 hover:text-slate-100 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500"
	aria-label="Open menu"
	>
	<MenuIcon className="w-6 h-6" />
	</button>
	{/* Title text and spacer div removed here */}
	</div>

	<ChatView
	activeChatSession={activeChatSession}
	onSendMessage={handleSendMessage}
	isLoading={isLoading}
	error={error}
	onStopGeneration={handleStopGeneration}
	/>
	</div>
	</div>
	);
	};

	export default App;