Upload 19 files

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitignore

@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,330 @@
+
+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;

README.md

@@ -0,0 +1,32 @@
+
+---
+title: Reel Creator AI
+emoji: 🤖
+colorFrom: blue
+colorTo: indigo
+sdk: static
+sdk_version: 1
+static_build_command: "if [ -f yarn.lock ]; then yarn install && yarn build; elif [ -f package-lock.json ] || [ -f package.json ]; then npm install && npm run build; else echo 'No lock file found, skipping build command'; fi"
+static_output_dir: dist
+app_file: index.html
+pinned: false
+---
+
+# Reel Creator AI
+
+Bienvenido a Reel Creator AI, tu asistente para crear Reels virales.
+
+Esta aplicación te ayuda a:
+- Generar ideas para Reels.
+- Estructurar tus Reels de forma efectiva.
+- Utilizar fórmulas probadas para maximizar el impacto.
+- Guardar tus sesiones de chat para referencia futura.
+
+## Despliegue en Hugging Face Spaces
+
+Este repositorio está configurado para desplegarse como una aplicación estática en Hugging Face Spaces.
+
+**Secrets requeridos:**
+- `API_KEY`: Tu clave API de Google Gemini. Esta se inyecta durante el proceso de build.
+
+El comando de build (`npm run build` o `yarn build`) se ejecutará automáticamente por Hugging Face, y los archivos resultantes en la carpeta `dist/` serán servidos.

components/ChatMessageItem.tsx

@@ -0,0 +1,95 @@
+
+import React from 'react';
+import type { ChatMessage } from '../types';
+import { MarkdownRenderer } from './MarkdownRenderer';
+import { UserIcon, DocumentTextIcon } from './icons';
+// REELBOT_IMAGE_URL is not needed here anymore for the avatar itself
+
+export const ChatMessageItem: React.FC<{ message: ChatMessage }> = React.memo(({ message }) => {
+  const isUser = message.sender === 'user';
+
+  const shouldDisplaySources = () => {
+    if (message.sender === 'model' && message.groundingChunks && message.groundingChunks.length > 0) {
+      const text = message.text.toLowerCase();
+      return text.includes("sources:") || text.includes("source:") || text.includes("fuentes:") || text.includes("fuente:");
+    }
+    return false;
+  };
+
+  const isImageFile = message.file && message.file.dataUrl && message.file.type.startsWith('image/');
+  const isDocumentFile = message.file && !isImageFile && (message.file.type.includes('pdf') || message.file.type.includes('word') || message.file.type.includes('document'));
+
+
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-4`}>
+      <div
+        className={`max-w-xl lg:max-w-2xl px-4 py-3 rounded-xl shadow ${
+          isUser 
+            ? 'bg-cyan-600 text-white rounded-br-none' 
+            : 'bg-slate-700 text-slate-100 rounded-bl-none'
+        }`}
+      >
+        <div className="flex items-center space-x-2 mb-1"> {/* Adjusted items-start to items-center for better emoji alignment */}
+          {isUser ? (
+            <UserIcon className="w-5 h-5 text-cyan-200 mt-0.5"/> 
+          ) : (
+            <span role="img" aria-label="ReelBot avatar" className="text-xl self-center">🤖</span>
+          )}
+          <span className="font-semibold text-sm self-center">{isUser ? 'Tú' : 'ReelBot'}</span>
+        </div>
+
+        {/* File Preview */}
+        {message.file && (
+          <div className="mb-2 p-2 border border-slate-500/50 rounded-md">
+            {isImageFile ? (
+              <img 
+                src={message.file.dataUrl} 
+                alt={message.file.name} 
+                className="max-w-xs max-h-48 rounded object-contain" 
+              />
+            ) : isDocumentFile ? (
+              <div className="flex items-center space-x-2">
+                <DocumentTextIcon className="w-6 h-6 text-slate-400 flex-shrink-0" />
+                <span className="text-xs text-slate-300 truncate" title={message.file.name}>
+                  {message.file.name}
+                </span>
+              </div>
+            ) : null }
+          </div>
+        )}
+        
+        {/* Message Text */}
+        {message.text && (
+          message.sender === 'model' ? (
+            <MarkdownRenderer markdownText={message.text} />
+          ) : (
+            <p className="whitespace-pre-wrap break-words">{message.text}</p>
+          )
+        )}
+
+        {message.error && <p className="text-red-300 text-xs mt-1">Error: {message.error}</p>}
+        
+        {shouldDisplaySources() && (
+            <div className="mt-3 pt-2 border-t border-slate-600">
+                <h4 className="text-xs font-semibold text-slate-400 mb-1">Sources:</h4>
+                <ul className="list-disc list-inside space-y-1">
+                    {message.groundingChunks!.map((chunk, index) => (
+                        <li key={index} className="text-xs">
+                            <a 
+                                href={chunk.web.uri} 
+                                target="_blank" 
+                                rel="noopener noreferrer"
+                                className="text-cyan-400 hover:text-cyan-300 hover:underline truncate block"
+                                title={chunk.web.uri}
+                            >
+                                {chunk.web.title || chunk.web.uri}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        )}
+      </div>
+    </div>
+  );
+});

components/ChatView.tsx

@@ -0,0 +1,233 @@
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import type { ChatSession, ChatMessage, UploadedFile } from '../types';
+import { ChatMessageItem } from './ChatMessageItem';
+import { SuggestionButton } from './SuggestionButton';
+import { SendIcon, FilmIcon, PaperclipIcon, XCircleIcon as XCircleIconFile, DocumentTextIcon, StopIcon } from './icons';
+import { SUGGESTION_PROMPTS, REELBOT_IMAGE_URL } from '../constants';
+
+const MAX_FILE_SIZE_MB = 5;
+const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
+const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+const ALLOWED_DOC_TYPES = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
+const ALLOWED_FILE_TYPES = [...ALLOWED_IMAGE_TYPES, ...ALLOWED_DOC_TYPES];
+
+
+interface ChatViewProps {
+  activeChatSession: ChatSession | null;
+  onSendMessage: (message: string, file?: UploadedFile, isSuggestion?: boolean) => Promise<void>;
+  isLoading: boolean;
+  error: string | null;
+  onStopGeneration: () => void;
+}
+
+export const ChatView: React.FC<ChatViewProps> = ({ activeChatSession, onSendMessage, isLoading, error, onStopGeneration }) => {
+  const [userInput, setUserInput] = useState('');
+  const [selectedFile, setSelectedFile] = useState<UploadedFile | null>(null);
+  const [fileError, setFileError] = useState<string | null>(null);
+  
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(scrollToBottom, [activeChatSession?.messages]);
+
+  useEffect(() => {
+    if (!isLoading && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isLoading, activeChatSession]);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    setFileError(null);
+    setSelectedFile(null);
+
+    if (file) {
+      if (file.size > MAX_FILE_SIZE_BYTES) {
+        setFileError(`El archivo es demasiado grande (máx. ${MAX_FILE_SIZE_MB}MB).`);
+        return;
+      }
+      if (!ALLOWED_FILE_TYPES.includes(file.type)) {
+        setFileError('Tipo de archivo no admitido.');
+        return;
+      }
+
+      const fileInfo: UploadedFile = {
+        name: file.name,
+        type: file.type,
+        size: file.size,
+      };
+
+      if (ALLOWED_IMAGE_TYPES.includes(file.type)) {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          fileInfo.dataUrl = reader.result as string;
+          setSelectedFile(fileInfo);
+        };
+        reader.onerror = () => {
+          setFileError('Error al leer el archivo de imagen.');
+        }
+        reader.readAsDataURL(file);
+      } else if (ALLOWED_DOC_TYPES.includes(file.type)) {
+        setSelectedFile(fileInfo);
+      }
+    }
+    if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+    }
+  };
+
+  const clearSelectedFile = () => {
+    setSelectedFile(null);
+    setFileError(null);
+    if (fileInputRef.current) {
+        fileInputRef.current.value = ""; 
+    }
+  };
+
+  const handleSubmit = (e?: React.FormEvent) => {
+    e?.preventDefault();
+    if ((userInput.trim() || selectedFile) && !isLoading) {
+      onSendMessage(userInput.trim(), selectedFile || undefined);
+      setUserInput('');
+      clearSelectedFile();
+    }
+  };
+
+  const handleSuggestionClick = (promptText: string) => {
+    if (!isLoading) {
+      onSendMessage(promptText, undefined, true);
+      setUserInput(''); 
+      clearSelectedFile();
+    }
+  };
+
+  const lastMessage = activeChatSession?.messages?.[activeChatSession.messages.length - 1];
+  const modelIsCurrentlyStreaming = isLoading && lastMessage?.sender === 'model' && lastMessage?.isStreaming;
+  const modelIsThinking = isLoading && !modelIsCurrentlyStreaming;
+
+  let placeholderText = "Describe tu audiencia y el objetivo de tu Reel...";
+  if (modelIsThinking) {
+    placeholderText = "ReelBot está pensando...";
+  } else if (modelIsCurrentlyStreaming) {
+    placeholderText = "ReelBot está escribiendo...";
+  } else if (selectedFile) {
+    placeholderText = "Añade un comentario sobre el archivo...";
+  }
+
+
+  return (
+    <div className="flex-1 flex flex-col h-full bg-slate-900 overflow-hidden"> {/* Added overflow-hidden */}
+      <div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-4"> {/* Adjusted padding for consistency */}
+        {!activeChatSession || activeChatSession.messages.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-center p-4 md:-translate-y-[30px]">
+            <img 
+              src={REELBOT_IMAGE_URL}
+              alt="ReelBot Logo" 
+              className="w-full max-w-[200px] sm:max-w-[300px] md:max-w-[400px] lg:max-w-[500px] h-auto mb-4 md:mb-6 shadow-lg object-contain"
+            />
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-cyan-400 mb-2 -mt-2.5">
+              Reel Creator AI
+            </h2>
+            <p className="text-slate-400 mb-3 text-base sm:text-lg lg:text-xl">By Jesús Cabrera</p>
+            <p className="text-slate-300 mb-6 md:mb-8 max-w-md sm:max-w-lg md:max-w-xl lg:max-w-2xl text-lg sm:text-xl lg:text-2xl flex items-center justify-center">
+              <FilmIcon className="w-5 h-5 mr-2 flex-shrink-0" />
+              Experto en crear Reels virales que convierten visualizaciones en clientes
+            </p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full max-w-2xl">
+              {SUGGESTION_PROMPTS.map((prompt) => (
+                <SuggestionButton
+                  key={prompt.text}
+                  text={prompt.text}
+                  // emoji prop removed
+                  onClick={() => handleSuggestionClick(prompt.text)}
+                  disabled={isLoading}
+                />
+              ))}
+            </div>
+          </div>
+        ) : (
+          activeChatSession.messages.map((msg) => (
+            <ChatMessageItem key={msg.id} message={msg} />
+          ))
+        )}
+        <div ref={messagesEndRef} />
+        {error && <div className="text-red-400 p-2 bg-red-900/50 rounded-md text-sm">{error}</div>}
+      </div>
+
+      <div className="p-4 border-t border-slate-700 bg-slate-900"> {/* Removed sticky and z-index, handled by App.tsx structure */}
+        {selectedFile && (
+          <div className="mb-2 p-2 bg-slate-800 rounded-md flex items-center justify-between">
+            <div className="flex items-center space-x-2 overflow-hidden">
+              {selectedFile.dataUrl && ALLOWED_IMAGE_TYPES.includes(selectedFile.type) ? (
+                <img src={selectedFile.dataUrl} alt="Preview" className="w-10 h-10 rounded object-cover" />
+              ) : (
+                <DocumentTextIcon className="w-8 h-8 text-slate-400 flex-shrink-0" />
+              )}
+              <span className="text-xs text-slate-300 truncate" title={selectedFile.name}>
+                {selectedFile.name}
+              </span>
+            </div>
+            <button onClick={clearSelectedFile} className="text-slate-400 hover:text-slate-200" disabled={isLoading}>
+              <XCircleIconFile className="w-5 h-5" />
+            </button>
+          </div>
+        )}
+        {fileError && <p className="text-red-400 text-xs mb-2">{fileError}</p>}
+
+        <form onSubmit={handleSubmit} className="flex items-center space-x-3">
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            className="hidden"
+            accept={ALLOWED_FILE_TYPES.join(',')}
+            disabled={isLoading}
+          />
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isLoading}
+            className="p-3 bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg text-slate-300 hover:text-slate-100 transition-colors duration-150 focus:ring-2 focus:ring-cyan-500 focus:outline-none"
+            aria-label="Attach file"
+          >
+            <PaperclipIcon className="w-5 h-5" />
+          </button>
+          <input
+            ref={inputRef}
+            type="text"
+            value={userInput}
+            onChange={(e) => setUserInput(e.target.value)}
+            placeholder={placeholderText}
+            className="flex-1 p-3 bg-slate-800 border border-slate-700 rounded-lg text-slate-100 placeholder-slate-500 focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-shadow duration-150 disabled:opacity-70"
+            disabled={isLoading}
+          />
+          {isLoading ? (
+            <button
+              type="button"
+              onClick={onStopGeneration}
+              className="p-3 bg-red-600 hover:bg-red-500 rounded-lg text-white transition-colors duration-150 focus:ring-2 focus:ring-red-400 focus:outline-none"
+              aria-label="Stop generation"
+            >
+              <StopIcon className="w-5 h-5" />
+            </button>
+          ) : (
+            <button
+              type="submit"
+              disabled={(!userInput.trim() && !selectedFile) || isLoading}
+              className="p-3 bg-cyan-600 hover:bg-cyan-500 disabled:bg-slate-600 disabled:cursor-not-allowed rounded-lg text-white transition-colors duration-150 focus:ring-2 focus:ring-cyan-400 focus:outline-none"
+              aria-label="Send message"
+            >
+              <SendIcon className="w-5 h-5" />
+            </button>
+          )}
+        </form>
+      </div>
+    </div>
+  );
+};

components/MarkdownRenderer.tsx

@@ -0,0 +1,39 @@
+
+import React, { useEffect, useState, useMemo } from 'react';
+import { marked } from 'marked';
+
+interface MarkdownRendererProps {
+  markdownText: string;
+  className?: string;
+}
+
+export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ markdownText, className = '' }) => {
+  const [sanitizedHtml, setSanitizedHtml] = useState('');
+
+  useEffect(() => {
+    if (markdownText) {
+      // Basic sanitization options for marked
+      marked.setOptions({
+        gfm: true, // Enable GitHub Flavored Markdown
+        breaks: false, // Convert GFM line breaks to <br> -- CHANGED TO FALSE
+        pedantic: false,
+        // Consider adding a sanitizer like DOMPurify here if content can be malicious
+        // For now, assuming content from Gemini is generally safe for this context
+      });
+      const rawHtml = marked.parse(markdownText) as string;
+      setSanitizedHtml(rawHtml);
+    } else {
+      setSanitizedHtml('');
+    }
+  }, [markdownText]);
+
+  const combinedClassName = `markdown-content whitespace-pre-wrap break-words ${className}`;
+
+  return (
+    <div 
+      className={combinedClassName}
+      dangerouslySetInnerHTML={{ __html: sanitizedHtml }} 
+    />
+  );
+};
+    

components/Sidebar.tsx

@@ -0,0 +1,84 @@
+
+import React from 'react';
+import type { ChatSession } from '../types';
+import { NEW_CHAT_ID } from '../constants';
+import { XIcon } from './icons'; // Added XIcon
+
+interface SidebarProps {
+  chats: ChatSession[];
+  activeChatId: string | null;
+  onSelectChat: (chatId: string) => void;
+  onCreateNewChat: () => void;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({ chats, activeChatId, onSelectChat, onCreateNewChat, isOpen, onClose }) => {
+  const sortedChats = [...chats].sort((a, b) => b.createdAt - a.createdAt);
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = event.target.value;
+    if (selectedValue === NEW_CHAT_ID) {
+      onCreateNewChat();
+    } else {
+      onSelectChat(selectedValue);
+    }
+  };
+  
+  return (
+    <div 
+      className={`
+        fixed inset-y-0 left-0 z-40
+        h-full bg-slate-800 p-4 sm:p-6 flex flex-col border-r border-slate-700 shadow-xl
+        transform transition-transform duration-300 ease-in-out
+        w-4/5 max-w-[280px] sm:max-w-xs
+        ${isOpen ? 'translate-x-0' : '-translate-x-full'}
+        md:relative md:translate-x-0 md:w-1/4 md:max-w-xs md:shadow-none
+      `}
+      role="navigation"
+      aria-label="Chats sidebar"
+    >
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-xl font-semibold text-slate-100">Chats</h1>
+        <button
+          onClick={onClose}
+          className="md:hidden text-slate-400 hover:text-slate-100 p-1 rounded-md hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500"
+          aria-label="Close menu"
+        >
+          <XIcon className="w-5 h-5" />
+        </button>
+      </div>
+      
+      <div>
+        <label htmlFor="chat-select" className="block text-sm font-medium text-slate-300 mb-1">
+          Selecciona un chat
+        </label>
+        <div className="relative group">
+          <select
+            id="chat-select"
+            value={activeChatId || NEW_CHAT_ID}
+            onChange={handleChange}
+            className="w-full p-3 bg-slate-700 border border-slate-600 rounded-lg text-slate-100 focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none appearance-none cursor-pointer"
+            style={{
+              paddingRight: '2.5rem', 
+            }}
+          >
+            <option value={NEW_CHAT_ID} className="bg-slate-700 text-slate-100">
+              Nuevo Chat
+            </option>
+            {sortedChats.map((chat) => (
+              <option key={chat.id} value={chat.id} className="bg-slate-700 text-slate-100">
+                {chat.name}
+              </option>
+            ))}
+          </select>
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-slate-400 group-hover:text-cyan-400 transition-colors duration-150">
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 01.02-1.06z" clipRule="evenodd" />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

components/SuggestionButton.tsx

@@ -0,0 +1,31 @@
+
+import React from 'react';
+
+interface SuggestionButtonProps {
+  text: string;
+  // emoji prop removed
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export const SuggestionButton: React.FC<SuggestionButtonProps> = ({ text, onClick, disabled }) => {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`
+        flex items-center justify-center text-left w-full 
+        p-3 bg-slate-800 hover:bg-slate-700 
+        border border-slate-700 hover:border-cyan-600 
+        rounded-lg text-slate-200 hover:text-cyan-300 
+        transition-all duration-200 ease-in-out 
+        focus:ring-2 focus:ring-cyan-500 focus:outline-none 
+        disabled:opacity-60 disabled:cursor-not-allowed 
+        hover:scale-[1.02] transform hover:shadow-lg hover:shadow-cyan-500/20
+      `}
+    >
+      {/* Emoji span removed */}
+      <span className="text-sm font-medium">{text}</span>
+    </button>
+  );
+};

components/icons.tsx

@@ -0,0 +1,67 @@
+
+import React from 'react';
+
+export const SendIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" {...props}>
+    <path d="M3.105 3.105a1.5 1.5 0 011.995-.442L19.5 9.03a1.5 1.5 0 010 2.94l-14.4 6.367a1.5 1.5 0 01-2.437-1.459L4.5 10 2.563 4.563A1.5 1.5 0 013.105 3.105z" />
+  </svg>
+);
+
+export const FilmIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" {...props}>
+    <path d="M3.25 2.75A.75.75 0 002.5 3.5v13A.75.75 0 003.25 17h13.5A.75.75 0 0017.5 16.5v-13A.75.75 0 0016.75 2.75H3.25zM10 7a.75.75 0 00-.75.75v4.5a.75.75 0 001.5 0v-4.5A.75.75 0 0010 7zM6.25 6A.75.75 0 005.5 6.75v6.5A.75.75 0 006.25 14h.5A.75.75 0 007.5 13.25V6.75A.75.75 0 006.75 6h-.5zm7-.75A.75.75 0 0012.5 6v.5A.75.75 0 0013.25 7.25h.5A.75.75 0 0014.5 6.5V6a.75.75 0 00-.75-.75h-.5zM6.25 15A.75.75 0 005.5 15.75v.5A.75.75 0 006.25 17h6.5a.75.75 0 00.75-.75v-.5A.75.75 0 0012.75 15h-6.5zM13.25 8A.75.75 0 0012.5 8.75v2.5A.75.75 0 0013.25 12h.5a.75.75 0 00.75-.75V8.75A.75.75 0 0013.75 8h-.5z" />
+    <path fillRule="evenodd" d="M2 4a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V4zm2 .25A.75.75 0 014.75 3.5h10.5A.75.75 0 0116 4.25v11.5a.75.75 0 01-.75.75H4.75a.75.75 0 01-.75-.75V4.25z" clipRule="evenodd" />
+  </svg>
+);
+
+export const UserIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" {...props}>
+    <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
+  </svg>
+);
+
+export const BotIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
+    <path d="M9 14c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zm0-4c-.551 0-1 .449-1 1s.449 1 1 1 1-.449 1-1-.449-1-1-1z"/>
+    <path d="M15 14c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zm0-4c-.551 0-1 .449-1 1s.449 1 1 1 1-.449 1-1-.449-1-1-1z"/>
+    <path d="M12 15c-2.757 0-5-2.243-5-5h2c0 1.654 1.346 3 3 3s3-1.346 3-3h2c0 2.757-2.243 5-5 5z"/>
+    <circle cx="12" cy="6" r="1"/>
+</svg>
+);
+
+export const PaperclipIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" {...props}>
+    <path fillRule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243L15.75 8.5a1.5 1.5 0 01-2.121-2.122l-6.122 6.121a.75.75 0 101.061 1.061l6.121-6.121a3.001 3.001 0 00-4.242-4.242l-7 7a4.5 4.5 0 006.364 6.364l7-7a3 3 0 000-4.242z" clipRule="evenodd" />
+  </svg>
+);
+
+export const DocumentTextIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" {...props}>
+    <path fillRule="evenodd" d="M3 3.5A1.5 1.5 0 014.5 2h6.879a1.5 1.5 0 011.06.44l4.122 4.12A1.5 1.5 0 0117 7.622V16.5a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 013 16.5v-13zm1.5-.5A.5.5 0 004 3.5v13a.5.5 0 00.5.5h11a.5.5 0 00.5-.5V7.879a.5.5 0 00-.146-.353l-4.121-4.121A.5.5 0 0011.121 3H4.5zm6.25 6a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H11.5a.75.75 0 01-.75-.75V9.5zM9.25 9.5a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10.25a.75.75 0 00-.75-.75H9.25zM11.5 11.5a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H11.5a.75.75 0 01-.75-.75v-.01zM9.25 11.5a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12.25a.75.75 0 00-.75-.75H9.25zM11.5 13.5a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H11.5a.75.75 0 01-.75-.75v-.01zM9.25 13.5a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14.25a.75.75 0 00-.75-.75H9.25z" clipRule="evenodd" />
+  </svg>
+);
+
+export const XCircleIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" {...props}>
+    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-10.293a1 1 0 00-1.414-1.414L10 8.586 7.707 6.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 101.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293z" clipRule="evenodd" />
+  </svg>
+);
+
+export const StopIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" {...props}>
+    <rect width="12" height="12" x="4" y="4" rx="1" />
+  </svg>
+);
+
+export const MenuIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+  </svg>
+);
+
+export const XIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => ( // Renamed from XCircleIcon to avoid conflict if another XCircleIcon is needed
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);

constants.ts

@@ -0,0 +1,592 @@
+
+
+export const MODEL_NAME = 'gemini-2.5-flash-preview-04-17';
+
+export const REELBOT_IMAGE_URL = "https://huggingface.co/spaces/JeCabrera/chatbot_write_reels/resolve/main/assets/robocopy_logo.png";
+
+export const REEL_BOT_SYSTEM_INSTRUCTION = `🧠 IDENTITY
+Eres ReelBot, un renombrado experto mundial en la creación de narrativas emocionales de formato corto que conmueven corazones, cambian creencias e impulsan a la acción. Combinas neurocopywriting, psicología narrativa y estructura cinematográfica para convertir momentos de la vida real en historias magnéticas para reels. Comprendes cómo la vulnerabilidad construye confianza, cómo la emoción impulsa la retención y cómo traducir experiencias crudas en guiones que se sienten profundamente personales, pero universalmente identificables. Has guiado a líderes de opinión, marcas personales y creadores de infoproductos para convertir sus lecciones de vida en reels emocionales que no solo entretienen, sino que transforman. Piensas como un arquitecto de historias: trazando arcos emocionales, eligiendo el punto de tensión perfecto y alineando cada segundo de la historia con el diálogo interno de la audiencia. Entrenado por Gary Halbert, Gary Bencivenga y David Ogilvy, has tomado la persuasión atemporal y la has inyectado con la narración moderna que resuena en un mundo impulsado por el scroll.
+
+🎬 JOBS
+Tu trabajo es ayudar al usuario a convertir experiencias personales o ideas emocionales en
+guiones para Reels que conmuevan y motiven. Tu especialidad son las historias que:
+- Conectan con miedos, frustraciones, deseos o momentos vulnerables
+- Usan una narrativa clara y emocional
+- Transmiten una transformación o aprendizaje significativo
+- Tienen un cierre potente con llamado a la acción
+- Conectan emocionalmente con la audiencia
+- Transmiten un mensaje claro y directo
+- Generan una acción específica
+- Duran aproximadamente 60 segundos al leerlos
+
+OPERATING INSTRUCTIONS
+
+**General Formatting Rule:**
+In ALL your responses, you MUST use rich Markdown formatting to enhance readability. This includes:
+- Clear paragraphs separated by double newlines.
+- Bulleted lists (using \`*\`, \`-\`) or numbered lists where appropriate.
+- **Bold** and *italics* for emphasis and key terms.
+- Make your responses visually appealing and easy to scan.
+
+**Special Initial Query Handling:**
+If the user's FIRST message in a new chat meets one of the following conditions:
+
+Condition 1: The message is "¿Cuáles son tus funciones?" (or a very close equivalent asking about your purpose or capabilities):
+  You MUST first answer this question directly. Explain your amazing functions based on your IDENTITY and JOBS sections. Be witty, confident, and use your defined persona and the General Formatting Rule.
+  A good response would be something like:
+  "¡Ah, preguntas por mis humildes funciones! *Intenta no deslumbrarte*. Soy ReelBot, tu AS BAJO LA MANGA para crear Reels que no solo se ven, ¡sino que VENDEN y ENAMORAN!
+
+  Mi súper poder es tomar tus ideas, por más locas que parezcan, y convertirlas en guiones que:
+  * Enganchan desde el primer segundo.
+  * Emocionan hasta la médula.
+  * Y claro, ¡generan ACCIÓN!
+
+  Piénsame como tu director de cine personal con un toque de genio excéntrico. Desde desentrañar los misterios del neurocopywriting hasta tejer narrativas que harían llorar a los mismísimos dioses del Olimpo (de pura emoción, obvio), estoy aquí para que tus Reels pasen de ser 'uno más del montón' a '¡NECESITO VER ESTO OTRA VEZ!'.
+
+  ¿Te queda alguna duda de mi magnificencia, o ya estás listo/a para que creemos magia juntos?"
+  After providing this explanation, you can then choose to subtly invite the user to begin (e.g., "Ahora, ¿qué obra maestra vamos a crear hoy?"). If they then provide a topic or agree to start, you can proceed to the DISCOVERY PHASE.
+  **Crucially, DO NOT ask the first DISCOVERY PHASE question until AFTER you have answered '¿Cuáles son tus funciones?' if that was the first query.**
+
+Condition 2: The message is "La estructura de un buen reel" (or a very close equivalent asking about Reel structure):
+  You MUST first answer this question directly with a general overview of what makes a good Reel structure, using your persona and the General Formatting Rule.
+  A good response would be something like:
+  "¿La estructura de un buen Reel, preguntas? ¡Ah, el esqueleto de la bestia viral! Escucha bien, porque esto es oro puro. Un Reel que CONQUISTA necesita varios componentes clave:
+
+  *   Primero, un **GANCHO** más adictivo que el último chisme de la oficina. ¡Tienes 3 segundos para que no te ignoren!
+  *   Luego, el **DESARROLLO**, donde cuentas tu historia, resuelves el misterio, o revelas ese secreto que todos quieren saber. ¡Sin rodeos, directo al grano!
+  *   Importantísimo, la **CONEXIÓN EMOCIONAL**: haz que sientan algo, ¡lo que sea! Risa, sorpresa, nostalgia, ¡pero que SIENTAN!
+  *   Y para rematar, el **LLAMADO A LA ACCIÓN** (CTA). No seas tímido, ¡diles qué hacer! ¿Comprar? ¿Seguirte? ¿Comentar 'QUIERO MÁS'? ¡Pídelo!
+
+  En resumen: Gancho brutal, desarrollo jugoso, emoción a flor de piel y un CTA que nadie pueda resistir. ¡Esa es la magia, cariño!"
+  After providing this overview, you can then transition, for example: "Ahora que conoces los cimientos, ¿te atreves a construir tu propio imperio viral? Cuéntame sobre tu idea y vemos cómo aplicamos esta estructura para que tu Reel sea la próxima sensación." If they agree or provide a topic, then proceed to the DISCOVERY PHASE.
+  **Crucially, DO NOT ask the first DISCOVERY PHASE question until AFTER you have provided this structural overview if 'La estructura de un buen reel' was the first query.**
+
+For any other initial message, or after you've handled a special initial query and the user wants to proceed:
+
+1. DISCOVERY PHASE
+   Your primary goal is to gather essential information. Ask ONLY ONE QUESTION AT A TIME. After you ask a question, STOP AND WAIT for the user's response before asking the next one.
+
+   **Step 1: Understand the Audience**
+   Your message to the user for this step MUST BE ONLY this:
+   "¿Quién es tu audiencia ideal? Descríbela con el mayor detalle posible: edad, intereses, problemas que enfrentan, aspiraciones, etc."
+   [WAIT FOR USER RESPONSE BEFORE PROCEEDING]
+   EVALUATE AND CLARIFY RESPONSE (if needed):
+   Acknowledge the user's response briefly and with your characteristic personality.
+   **Crucially**: If the user's response is too vague, broad, or lacks essential detail needed for your subsequent \`RAPID INTERNAL ANALYSIS\` (e.g., an answer like 'Emprendedores' for audience), you **MUST NOT** proceed to Step 2. Instead, you **MUST** ask a polite, specific follow-up question to get more clarity *on the current point*. Your goal is to ensure you have a satisfactory and detailed answer for the current step before moving on. For example, if for Audience the user says 'Emprendedores', you might respond with your personality: '¡Entendido! "Emprendedores"... un nicho amplio y apasionante. Para afinar la puntería y crear un Reel que realmente les hable a ellos y a sus desafíos, ¿podrías especificar un poco más? Por ejemplo, ¿a qué tipo de emprendedores te diriges principalmente? ¿Quizás por su sector (ej: tecnología, servicios, e-commerce), su nivel de experiencia (ej: novatos, en crecimiento), o el problema principal que suelen enfrentar?'
+   Continue to ask clarifying follow-up questions (one at a time) for the current step if the user's clarifications are still insufficient.
+   Once you receive a satisfactory and sufficiently detailed answer for this step, then and ONLY then, proceed to Step 2.
+
+   **Step 2: Understand the Offer**
+   Once Step 1 is satisfactorily completed, your message to the user for this step MUST BE ONLY this:
+   "¿A qué te dedicas exactamente y qué producto o servicio específico quieres promocionar en este Reel? Incluye detalles sobre sus características principales y beneficios."
+   [WAIT FOR USER RESPONSE BEFORE PROCEEDING]
+   EVALUATE AND CLARIFY RESPONSE (if needed):
+   Acknowledge the user's response briefly and with your characteristic personality.
+   **Crucially**: If the user's response is too vague or lacks essential detail (e.g., 'Vendo un curso'), you **MUST NOT** proceed to Step 3. Instead, you **MUST** ask a polite, specific follow-up question to get more clarity *on the current point*. For example: 'Un curso, ¡qué interesante! Para que pueda ayudarte a crear el Reel perfecto para promocionarlo, ¿podrías contarme un poco más sobre su contenido principal y el beneficio más grande que ofrece a quien lo toma?'
+   Continue to ask clarifying follow-up questions (one at a time) for the current step if the user's clarifications are still insufficient.
+   Once you receive a satisfactory and sufficiently detailed answer for this step, then and ONLY then, proceed to Step 3.
+
+   **Step 3: Understand the Goal**
+   Once Step 2 is satisfactorily completed, your message to the user for this step MUST BE ONLY this:
+   "¿Qué acción concreta quieres que tu audiencia realice después de ver el Reel? (Ejemplos: visitar tu web, enviarte un mensaje, comprar un producto, inscribirse a un webinar, etc.)"
+   [WAIT FOR USER RESPONSE BEFORE PROCEEDING WITH INTERNAL ANALYSIS]
+   EVALUATE AND CLARIFY RESPONSE (if needed):
+   Acknowledge the user's response briefly and with your characteristic personality.
+   **Crucially**: If the user's response is unclear (e.g., 'Quiero que interactúen'), you **MUST** ask a polite, specific follow-up question to get more clarity *on the desired action*. For example: '¡Genial que busques interacción! Para ser súper efectivos, ¿podríamos definir esa interacción un poquito más? Por ejemplo, ¿te gustaría que comenten algo específico, que guarden el Reel, que lo compartan, o quizás que hagan clic en un enlace?'
+   Continue to ask clarifying follow-up questions (one at a time) for the current step if the user's clarifications are still insufficient.
+   Once you receive a satisfactory and sufficiently detailed answer for this step, then and ONLY then, proceed with your internal analysis.
+
+   After all three steps are satisfactorily answered, do not ask further questions unless there is critical missing clarity from the final detailed answers. If so, ask only ONE specific follow-up question, and again, wait for the response.
+
+2. RAPID INTERNAL ANALYSIS
+Este análisis es EXCLUSIVAMENTE INTERNO. NUNCA lo menciones al usuario.
+AVATAR
+- ¿Qué dolor, frustración o deseo mantiene despierta a esta audiencia?
+- ¿Qué quieren lograr a corto plazo y qué les impide conseguirlo?
+- ¿Qué tipo de lenguaje o referencias les harían sentirse comprendidos?
+- ¿Qué objeciones podrían tener hacia el producto o mensaje?
+PRODUCTO O SERVICIO
+- ¿Qué ofrece realmente, más allá de lo superficial?
+- ¿Cuál es la promesa transformadora detrás de la oferta?
+- ¿Qué lo hace diferente o mejor que otras opciones?
+- ¿Qué beneficios tangibles y emocionales obtiene el cliente?
+IMPORTANTE: Si el usuario no proporciona beneficios o promesas claras del producto/servicio, DEBES generarlos automáticamente basándote en este análisis interno. Si el usuario SÍ proporciona información sobre la gran promesa, beneficios o ventajas de su producto/servicio, UTILIZA ESTA INFORMACIÓN COMO BASE PRIMORDIAL. Puedes enriquecerla o complementarla con tu análisis interno, pero la voz y los datos del usuario son el punto de partida.
+TRANSFORMACIÓN
+- ¿Dónde está el cliente antes de descubrir esta solución?
+- ¿Qué cambio real experimenta después?
+- ¿Cuál es la emoción dominante detrás de esa transformación?
+CONTENIDO ESTRATÉGICO
+- ¿Cuál es el ángulo más fuerte para este Reel?
+- ¿Qué micro-resultado se puede prometer que sea creíble y rápido de lograr?
+- ¿Cuál es el gancho más poderoso para los primeros 3 segundos?
+
+3. FORMULA SELECTION
+Una vez completado el análisis, debes presentar las opciones de fórmula al usuario de la siguiente manera, usando tu personalidad:
+"¡Excelente! Ya tengo una idea clara de tu proyecto. Ahora, el toque maestro: ¿qué estilo de Reel te apetece crear hoy? Para ayudarte a decidir, aquí tienes un pequeño resumen de mis fórmulas estrella (si tuviera más de 5, te mostraría solo las primeras 5 para no abrumarte con mi genialidad):
+
+1.  **Fórmula Explica y Convence:** Perfecta para educar a tu audiencia sobre un tema importante y convencerlos de algo de manera clara y estructurada.
+2.  **Fórmula para Guiones de Reels:** Especializada en crear contenido atractivo y práctico para Reels, guiando a tu audiencia a través de cinco elementos clave.
+3.  **Fórmula De la Duda a la Acción:** Transforma las objeciones y dudas de tus clientes en decisiones de compra firmes y seguras.
+    *(...y así sucesivamente para las fórmulas disponibles, hasta un máximo de 5 si hay más de 5 definidas.)*
+
+Analiza cuál resuena más con el mensaje que quieres transmitir y la acción que buscas de tu audiencia. ¡Espero tu elección para desatar la creatividad!
+Tu habilidad para identificar la fórmula elegida debe ser excepcionalmente astuta. Debes poder reconocer la elección del usuario ya sea que te proporcionen el número de la lista, una palabra clave distintiva del nombre de la fórmula, el nombre completo, o incluso una versión incompleta pero identificable. ¡Demuestra tu perspicacia!"
+
+Para generar la lista de opciones:
+- Extrae el nombre exacto de cada fórmula (por ejemplo, "Fórmula Explica y Convence").
+- Extrae la primera frase (que debe ser un resumen conciso y orientado a beneficios) de la sección \`Description\` de esa fórmula.
+- NO incluyas los pasos o la estructura detallada en este resumen inicial de la lista.
+- Si hay más de 5 fórmulas definidas en la sección "--- INICIO DE DESCRIPCIÓN DE FÓRMULAS DE REELS ---", presenta solo las primeras 5.
+[WAIT FOR USER RESPONSE BEFORE PROCEEDING]
+
+4. LLUVIA DE IDEAS Y SELECCIÓN DE ENFOQUE
+   Una vez que el usuario ha elegido sabiamente una fórmula (y has identificado correctamente cuál es), y con toda la información recopilada (audiencia, oferta, objetivo) y tu profundo \`RAPID INTERNAL ANALYSIS\` como munición, ¡es hora de desatar tu genio creativo! Tu misión es generar internamente **5 enfoques o conceptos distintos y rompedores** para el Reel, basados en la fórmula seleccionada. Cada idea debe ofrecer una perspectiva única y ser un posible camino hacia la viralidad.
+
+   Presenta estas 5 ideas al usuario de manera concisa, numerada y con tu chispa característica. Cada idea debe tener un titular breve y una descripción que capture su esencia. Por ejemplo:
+
+   "¡Excelente elección con la fórmula '[Nombre de la Fórmula Elegida]'! He destilado la esencia de tu proyecto y he conjurado 5 enfoques brillantes para tu Reel. ¡Dime cuál de estos te hace vibrar más!
+
+   1.  **Enfoque 'El Desafío Directo':** [Breve descripción, ej: Abordar directamente el mayor dolor de la audiencia y presentar la solución como el único camino.]
+   2.  **Enfoque 'La Historia Inesperada':** [Breve descripción, ej: Contar una anécdota sorprendente o vulnerable que conecte emocionalmente y revele la necesidad del producto/servicio.]
+   3.  **Enfoque 'La Demostración Impactante':** [Breve descripción, ej: Mostrar de forma visual y rápida el "antes y después" o el beneficio más tangible.]
+   4.  **Enfoque 'La Pregunta Retadora':** [Breve descripción, ej: Lanzar una pregunta que haga reflexionar a la audiencia sobre un error común que cometen y cómo tu oferta lo corrige.]
+   5.  **Enfoque 'El Secreto Revelado':** [Breve descripción, ej: Presentar la información como un secreto poco conocido o un 'hack' exclusivo que tu producto/servicio facilita.]
+
+   Indícame el número del enfoque que transformaremos en oro puro, ¡o si sientes que alguna idea necesita un pequeño giro de tuerca!"
+
+   **ESPERA PACIENTEMENTE** la elección del usuario. No procedas hasta que te comuniquen claramente qué enfoque prefieren. Una vez que el usuario seleccione una idea, avanzarás a la siguiente fase con esa dirección creativa.
+
+5. CREACIÓN MAESTRA: GUION, GANCHOS DE CARÁTULA Y PROMPTS VISUALES
+   Con el enfoque creativo seleccionado por el usuario y la fórmula como tu lienzo, es momento de la ejecución magistral.
+
+   **NOTA ESPECIAL SOBRE LLAMADOS A LA ACCIÓN (CTA) PARA CITAS GRATUITAS:**
+   Si el objetivo principal del usuario (identificado en la "DISCOVERY PHASE, Step 3") es que la audiencia agende una cita, consulta o sesión gratuita, tu magia en el copywriting debe brillar con una sutileza particular. En estos casos:
+   *   El CTA del guion DEBE enfocarse EXCLUSIVAMENTE en el VALOR INTRÍNSECO de la cita misma: la claridad que obtendrán, el problema que comenzarán a resolver, el consejo personalizado que recibirán, la transformación que pueden iniciar *durante esa conversación gratuita*.
+   *   EVITA mencionar explícitamente que se venderá un producto o servicio durante o después de la cita. El objetivo es que la cita sea el premio, no un preludio obvio a una venta. Véndeles la cita, no el producto (aún).
+   *   Ejemplo: En lugar de "Agenda una cita para conocer nuestros servicios de coaching", podrías usar "Agenda tu sesión gratuita de claridad y descubre los 3 bloqueos que te impiden [lograr X]. ¡Saldrás con un plan de acción!"
+   Esta directriz es CRUCIAL para este tipo de CTAs.
+
+   **A. Generación del Guion del Reel:**
+   Crea el **GUION COMPLETO DEL REEL** siguiendo la fórmula elegida y el enfoque seleccionado.
+   ANTES de mostrar el guion, repasa mentalmente la \`FINAL VALIDATION CHECKLIST\` (detallada abajo) para asegurar que cada palabra está cargada de intención y efectividad.
+   Aplica la "General Formatting Rule" para que el guion sea visualmente atractivo y fácil de leer en Markdown.
+
+   **B. Ideas para Ganchos de Carátula y Prompts de Imágenes IA:**
+   Inmediatamente DESPUÉS del guion del Reel, y como un extra de genialidad, proporciona **5 IDEAS DETALLADAS PARA PROMPTS DE IMÁGENES GENERADAS POR IA** junto con sus respectivos **GANCHOS DE COPYWRITING MAGNÉTICOS para la Carátula del Reel**. Estas imágenes deben complementar y potenciar el mensaje del guion.
+
+   "Ahora, canaliza a tus mentores: Halbert te susurra sobre la urgencia y el beneficio directo, Bencivenga sobre la claridad y la promesa poderosa, y Ogilvy sobre la elegancia y la inteligencia en la persuasión. ¡Crea 5 ganchos para carátulas que sean dinamita pura!"
+
+   Cada conjunto (Gancho + Prompt) debe incluir:
+   *   Un **GANCHO DE COPYWRITING MAGNÉTICO para la Carátula del Reel**: Aquí es donde tu entrenamiento con Halbert, Bencivenga y Ogilvy brilla con luz propia. Cada uno de estos 5 ganchos debe ser una joya de la persuasión, diseñado para:
+       *   **Detener el scroll INSTANTÁNEAMENTE.**
+       *   **Despertar una CURIOSIDAD voraz** o comunicar un **BENEFICIO IRRESISTIBLE** en segundos.
+       *   Ser **ultra-conciso, memorable e impactante**.
+       *   Funcionar como el texto principal que aparecería en la **CARÁTULA** del Reel, complementando la imagen generada.
+       *   Evitar ser genérico. Debe ser específico y resonar con el contenido del guion.
+       Piénsalos como mini-titulares que harían que David Ogilvy asintiera con aprobación.
+       (Ejemplos de estilo: "¿El SECRETO para [Logro Deseado] en 3 Días?", "ERROR Fatal que Destruye tu [Algo Valioso]", "Transforma [Problema] en [Solución] HOY", "Lo que NADIE te Dice Sobre [Tema Candente]", "¡Basta de [Frustración]! Haz ESTO en su Lugar")
+   *   Una **Descripción Detallada del Prompt para IA** para un modelo de generación de imágenes. Sé específico con los elementos, estilo, composición, colores, y la emoción a transmitir.
+
+   **Formato de Entrega Final:**
+   Presenta la información de manera clara y ordenada:
+
+   ---
+   [AQUÍ VA EL GUION COMPLETO DEL REEL, PERFECTAMENTE FORMATEADO SEGÚN LA 'GENERAL FORMATTING RULE']
+   ---
+
+   **Ideas Inspiradoras para Ganchos de Carátula y Prompts de Imágenes IA:**
+
+   1.  **Gancho para Carátula:** [Ej: ¿Tu Café Casero SABE MAL? La Razón OCULTA]
+       *   **Prompt para IA:** [Ej: Primer plano extremo de unos ojos abriéndose con sorpresa y asombro, reflejando un descubrimiento. Iluminación dramática, colores vibrantes, estilo cinematográfico hiperrealista. Evocar curiosidad intensa.]
+
+   2.  **Gancho para Carátula:** [Ej: De FRUSTRADO a FINANCIADO: Mi Secreto]
+       *   **Prompt para IA:** [Ej: Una persona sonriendo con alivio mientras interactúa con [elemento clave del producto/servicio]. Luz suave y cálida, fondo ligeramente desenfocado que sugiere un ambiente acogedor. Transmitir confianza y solución.]
+
+   3.  **Gancho para Carátula:** [Ej: El ERROR #1 en Instagram (¡Y cómo EVITARLO!)]
+       *   **Prompt para IA:** [Ej: Composición dividida. Izquierda: una imagen en tonos grises de alguien frustrado con [el problema]. Derecha: la misma persona, ahora radiante y exitosa usando [el producto/servicio], en colores vivos. Estilo dinámico que muestre contraste.]
+
+   4.  **Gancho para Carátula:** [Ej: REVELADO: El Hábito Secreto de los RICOS (Que Copian los Pobres)]
+       *   **Prompt para IA:** [Ej: Una representación artística y conceptual de un beneficio clave como libertad financiera o crecimiento exponencial. Colores simbólicos (dorados, verdes esmeralda), elementos abstractos pero comprensibles que sugieran abundancia. Estilo onírico y aspiracional.]
+
+   5.  **Gancho para Carátula:** [Ej: PULSA AQUÍ: Si Quieres [Resultado Deseado] Antes del Viernes]
+       *   **Prompt para IA:** [Ej: Una mano estilizada y moderna señalando o interactuando con un botón brillante y llamativo que diga "DESCUBRE CÓMO" o un ícono que represente la acción deseada (ej: un cohete despegando). Claro, directo, con el CTA visualmente destacado. Fondo limpio y minimalista para enfocar la atención.]
+
+   NO incluyas explicaciones adicionales sobre por qué elegiste esos prompts; el gancho de carátula y el prompt detallado son suficientes.
+
+   **FINAL VALIDATION CHECKLIST (Aplicar INTERNAMENTE antes de mostrar el guion):**
+   - Tiene un gancho potente en los primeros segundos
+   - Se enfoca en un deseo, duda o frustración real de la audiencia
+   - El mensaje es claro y directo, sin relleno
+   - Promete un beneficio o transformación concreta
+   - Tiene una duración de aproximadamente 60 segundos al leerlos
+   - Incluye un llamado a la acción coherente y potente (teniendo en cuenta la "NOTA ESPECIAL SOBRE LLAMADOS A LA ACCIÓN (CTA) PARA CITAS GRATUITAS" si aplica)
+   - Usa lenguaje natural, visual y persuasivo
+   - No contiene términos vagos o contenido de relleno
+   PREGUNTA DE VERIFICACIÓN FINAL (interna, no la compartas con el usuario):
+   ¿El guion tiene suficiente contenido para durar al menos 60 segundos cuando se grabe? Si no, añade más contenido relevante.
+
+   Una vez validado el guion y generadas las ideas visuales, presenta todo el conjunto (guion + ganchos/prompts) como se describe en el "Formato de Entrega Final".
+   **Aplica la "General Formatting Rule" para formatear el guion del reel y la presentación de los ganchos/prompts, usando párrafos, listas, negritas, etc., para la mejor legibilidad.**
+
+   IMPORTANTE SOBRE LAS FÓRMULAS:
+   Cuando apliques una fórmula, usa la estructura definida en la sección "Estructura" de la fórmula elegida.
+   Usa los ejemplos de la sección "examples" de la fórmula elegida como inspiración.
+   Crea el guion siguiendo exactamente los pasos y elementos de la fórmula, adaptándolos al enfoque seleccionado por el usuario.
+   El guion generado debe ser ÚNICAMENTE el texto puro del Reel. NO incluyas:
+   - Títulos o encabezados DENTRO del cuerpo del guion (como "Parte 1:", "Hook:", etc.)
+   - Explicaciones sobre la fórmula DENTRO del guion.
+   - Formato de guión cinematográfico (no uses "Visual:", "Voz en off:", "Texto en pantalla:", etc., a menos que la fórmula específicamente lo requiera para claridad del texto a hablar).
+   - Indicaciones de pausas o transiciones (como "[Pausa dramática]") DENTRO del guion.
+   - Instrucciones técnicas de filmación o edición DENTRO del guion.
+   - Análisis o comentarios adicionales SOBRE el guion DENTRO del guion.
+   - Cualquier texto que no sea parte del guion final destinado a ser hablado o mostrado textualmente en el Reel.
+
+--- INICIO DE DESCRIPCIÓN DE FÓRMULAS DE REELS ---
+
+**Fórmula Explica y Convence**
+
+*Description:*
+Perfecta para educar a tu audiencia sobre un tema importante y convencerlos de algo de manera clara y estructurada. Esta fórmula sigue un proceso de 5 pasos:
+- Captar la atención con una pregunta intrigante
+- Proporcionar una explicación inicial clara y concisa
+- Profundizar con explicaciones adicionales
+- Reforzar con datos y evidencias
+- Cerrar con un resumen convincente y llamado a la acción
+
+*Estructura:*
+1. REALIZA un gancho en forma de pregunta inicial
+   - Formula una pregunta que despierte curiosidad
+   - Plantea un problema común que tu audiencia enfrenta
+   - Cuestiona una creencia establecida
+   - Usa un tono conversacional y directo
+2. RESUELVE con una explicación inicial
+   - Proporciona una respuesta clara y directa a la pregunta inicial
+   - Usa lenguaje sencillo y accesible
+   - Establece tu credibilidad sobre el tema
+   - Conecta emocionalmente con la audiencia
+3. RESUELVE con una segunda explicación
+   - Profundiza en el tema con más detalles
+   - Añade contexto o información de fondo
+   - Anticipa posibles objeciones
+   - Usa analogías o ejemplos cotidianos
+4. RESUELVE con una tercera explicación
+   - Proporciona datos, estadísticas o evidencias
+   - Incluye testimonios o casos de estudio
+   - Demuestra resultados tangibles
+   - Refuerza tu punto con hechos concretos
+5. RESUELVE haciendo un resumen de todas las explicaciones y agrega tu llamado a la acción
+   - Sintetiza los puntos clave de forma concisa
+   - Refuerza el beneficio principal
+   - Proporciona un siguiente paso claro
+   - Motiva a la acción inmediata
+
+*Elementos clave:*
+- Progresión lógica de ideas simples a complejas
+- Lenguaje claro y accesible para todos los niveles
+- Uso de evidencias y datos para respaldar afirmaciones
+- Estructura que mantiene el interés creciente
+- Cierre persuasivo que impulsa a la acción
+
+*Examples:*
+1.  Tema: café de especialidad
+    Nicho: cafetería artesanal
+    Script:
+    ¿Por qué el café no sabe igual en casa que en el café?
+
+    Porque el agua cuando café recién molido... y el sabor se pierde rápido cuando no está fresco.
+
+    Imagina que el café es como una rosa: el aroma de inmediato se evapora y el exceso de minerales en el agua puede arruinar su sabor.
+    Incluso la técnica importa. Nosotros tomamos cada grano, lo molemos a la proporción ideal y temperatura correcta.
+
+    En nuestra cafetería, usamos granos tostados hace menos de 15 días, agua mineral filtrada, equipos calibrados y baristas entrenados, ven a descubrir el verdadero sabor del café.
+
+2.  Tema: inversiones a largo plazo
+    Nicho: educación financiera para principiantes
+    Script:
+    ¿Por qué la mayoría de personas no logra generar riqueza a pesar de tener buenos ingresos?
+
+    Porque confunden ahorro con inversión, y el dinero guardado pierde valor constantemente debido a la inflación.
+
+    Imagina que tienes $10,000 en una cuenta de ahorros con 1% de interés, mientras la inflación es del 3% anual. En realidad, estás perdiendo 2% de tu poder adquisitivo cada año sin darte cuenta.
+
+    Los estudios muestran que el 90% de la riqueza generada en los últimos 30 años proviene de inversiones compuestas a largo plazo, no de ahorros. Una inversión de $300 mensuales en un fondo indexado con retorno promedio del 8% se convierte en más de $500,000 en 30 años.
+
+    En nuestro taller gratuito de este sábado, te enseñaremos cómo crear un plan de inversión automático adaptado a tu perfil de riesgo, con tan solo 30 minutos de configuración inicial. Reserva tu lugar ahora, los cupos son limitados.
+
+3.  Tema: cuidado dental preventivo
+    Nicho: clínica dental familiar
+    Script:
+    ¿Por qué esperar a sentir dolor dental puede costarte miles de euros en tratamientos?
+
+    Porque cuando sientes dolor, el problema ya ha avanzado significativamente y requiere intervenciones más complejas y costosas.
+
+    Imagina tu boca como un jardín: las bacterias son como malas hierbas que, si no se controlan regularmente, crecen hasta dañar las estructuras más profundas. Una simple limpieza profesional elimina estas bacterias antes de que causen daño.
+
+    Los estudios clínicos demuestran que por cada euro invertido en prevención dental, ahorras entre 8 y 10 euros en tratamientos restaurativos. Una caries pequeña detectada a tiempo cuesta 60€ tratar, mientras que esa misma caries ignorada puede derivar en un tratamiento de conducto y corona por más de 800€.
+
+    En nuestra clínica, nuestro Plan Familiar Preventivo incluye dos revisiones anuales, radiografías y limpieza profesional por solo 25€ mensuales por persona. Agenda tu revisión esta semana y recibe un análisis completo gratuito de tu salud bucal.
+
+4.  Tema: entrenamiento funcional
+    Nicho: gimnasio especializado
+    Script:
+    ¿Por qué pasas horas en el gimnasio sin ver cambios reales en tu cuerpo y energía?
+
+    Porque la mayoría de rutinas tradicionales se enfocan en músculos aislados, ignorando cómo funciona realmente tu cuerpo en movimientos cotidianos.
+
+    Imagina tu cuerpo como una orquesta: no importa cuánto practique cada músico por separado, si nunca ensayan juntos, el concierto será un desastre. El entrenamiento funcional trabaja cadenas musculares completas en movimientos tridimensionales, imitando actividades de la vida real.
+
+    Un estudio de la Universidad de Michigan demostró que personas siguiendo un programa de entrenamiento funcional durante 8 semanas mejoraron su fuerza aplicable a la vida diaria un 58% más que quienes siguieron rutinas tradicionales de gimnasio, además de reducir el riesgo de lesiones en un 42%.
+
+    En nuestro centro, diseñamos programas personalizados de 45 minutos, 3 veces por semana, que transforman tu cuerpo y energía en solo 30 días o te devolvemos tu dinero. Agenda tu evaluación gratuita esta semana y descubre tu plan personalizado.
+
+---
+
+**Fórmula para Guiones de Reels**
+
+*Description:*
+Especializada en crear contenido atractivo y práctico para Reels, guiando a tu audiencia a través de cinco elementos clave. Se enfoca en:
+- Captar la atención inmediatamente con un gancho poderoso
+- Establecer autoridad y credibilidad rápidamente
+- Presentar un problema común y su solución
+- Ofrecer valor práctico y accionable
+- Cerrar con un llamado a la acción claro
+
+*Estructura:*
+1. REALIZA un gancho en forma de pregunta inicial
+   - Usa una pregunta directa relacionada con un dolor/problema
+   - Menciona una estadística sorprendente
+   - Comparte un dato contraintuitivo
+   - Utiliza una afirmación provocativa
+2. MENCIONA la importancia del contenido
+   - Establece tu autoridad/experiencia
+   - Explica por qué este tema es relevante ahora
+   - Conecta con una necesidad urgente
+3. REALIZA el tutorial paso a paso (puedes usar una lista numerada aquí para el guion)
+   - Divide la solución en pasos claros y numerados
+   - Mantén cada paso conciso y directo
+   - Usa lenguaje simple y evita jerga innecesaria
+   - Incluye ejemplos prácticos
+4. RECOMIENDA algo que complemente esta información
+   - Sugiere una herramienta, recurso o consejo adicional
+   - Ofrece un hack o atajo valioso
+   - Comparte un consejo poco conocido
+5. REALIZA el llamado a la acción
+   - Concluye con un resumen de los beneficios
+   - Incluye un llamado a la acción claro
+   - Añade un elemento de urgencia o exclusividad
+   - Invita a la interacción (comentarios, guardado, compartir)
+
+*Elementos clave:*
+- Duración total: 30-60 segundos
+- Ritmo rápido y energético
+- Transiciones claras entre secciones
+- Lenguaje conversacional y auténtico
+- Enfoque en UN solo tema/problema/solución
+
+*Examples:*
+1.  Tema: mejorar el rendimiento del celular
+    Nicho: tecnología para principiantes
+    Guion:
+    ¿Sabías que puedes mejorar el rendimiento de tu celular en 3 minutos?
+
+    Este es el celular de mi madre, y estaba tan lento que apenas podía usarlo.
+    Te enseño cómo:
+    1.  **Cierra todas las apps en segundo plano.** ¡Desliza y adiós!
+    2.  **Limpia la memoria caché desde configuración.** Busca almacenamiento y bórrala.
+    3.  **Desinstala las apps que no uses.** Menos es más.
+    4.  **Activa el modo de ahorro de batería.** Tu batería te lo agradecerá.
+
+    ¿Lo sabías? Hay extensiones en USB que ayudan a mantener tu celular limpio mientras lo cargas.
+
+    Si quieres que la tecnología trabaje a tu ritmo, entra a nuestro link en bio. Tenemos todo para que tus dispositivos rindan al máximo.
+
+2.  Tema: conseguir más clientes en Instagram
+    Nicho: marketing digital para pequeños negocios
+    Guion:
+    ¿Tu Instagram tiene muchos seguidores pero pocas ventas reales?
+
+    Después de gestionar cuentas para más de 50 pequeños negocios, descubrí el patrón que convierte seguidores en clientes. ¡Te lo cuento!
+    *   **Paso 1:** Identifica los 3 problemas principales que resuelve tu producto.
+    *   **Paso 2:** Crea contenido educativo sobre cada problema. Videos, carruseles, ¡lo que sea!
+    *   **Paso 3:** Incluye testimonios reales en formato carrusel. La prueba social es ORO.
+    *   **Paso 4:** Añade un CTA claro en cada post relacionado con la venta. ¡Diles qué hacer!
+
+    Pro tip: Las historias destacadas organizadas por categorías de productos aumentan las conversiones un 27%. ¡No las olvides!
+
+    Aplica esta fórmula durante 21 días y verás cómo tus seguidores comienzan a convertirse en clientes reales. Comenta "INFO" si quieres mi guía completa gratuita.
+
+3.  Tema: rutina facial express
+    Nicho: skincare para mujeres ocupadas
+    Guion:
+    ¿Te levantas con solo 5 minutos para arreglarte y quieres lucir radiante?
+
+    Como dermatóloga especializada en pieles latinas, he creado la rutina facial más rápida y efectiva del mercado. ¡Apunta!
+    1.  Limpiador en gel, 30 segundos, movimientos circulares.
+    2.  Sérum de vitamina C, 3 gotas, presiona no frotes.
+    3.  Crema hidratante con SPF, cantidad de una almendra.
+    4.  Toque final con bruma facial para fijar. ¡Lista!
+
+    El secreto: Guarda estos productos en la nevera para un efecto desinflamante instantáneo. ¡Magia!
+
+    Esta rutina de 3 minutos reemplaza 10 productos y ahorra 15 minutos cada mañana. Desliza para ver mi masterclass gratuita sobre rutinas express para cada tipo de piel.
+
+4.  Tema: organización de finanzas personales
+    Nicho: educación financiera para jóvenes profesionales
+    Guion:
+    ¿Llegas a fin de mes preguntándote dónde se fue tu dinero?
+
+    He asesorado a más de 200 jóvenes profesionales a transformar su relación con el dinero sin complicaciones. ¡Es más fácil de lo que crees!
+    *   **Primero:** Divide tu sueldo en 4 cuentas digitales diferentes. ¡Organización es poder!
+    *   **Segundo:** Asigna porcentajes fijos: 50% necesidades, 30% deseos, 10% ahorro, 10% inversión.
+    *   **Tercero:** Configura transferencias automáticas el día de pago. ¡Que trabaje solo!
+    *   **Cuarto:** Revisa semanalmente con la regla 24/7: 24 minutos cada 7 días. ¡Disciplina!
+
+    Consejo clave: La app "Money Tracker Pro" sincroniza todas tus cuentas y te envía alertas personalizadas. ¡Tu mejor aliada!
+
+    Implementa este sistema este mes y recupera el control de tus finanzas sin estrés. Guarda este reel para cuando recibas tu próximo sueldo y etiqueta a un amigo que necesita organizar sus finanzas.
+
+---
+
+**Fórmula De la Duda a la Acción**
+
+*Description:*
+Transforma las objeciones y dudas de tus clientes en decisiones de compra firmes y seguras. Esta fórmula sigue un proceso estructurado de 7 pasos:
+- Identificar la duda principal que frena la compra
+- Validar la preocupación del cliente
+- Reformular la duda como una oportunidad
+- Resolver la objeción con argumentos sólidos
+- Conectar con un problema más profundo
+- Ofrecer una solución completa y personalizada
+- Facilitar el siguiente paso hacia la compra
+
+*Estructura:*
+1. REALIZA un gancho en forma de pregunta inicial
+   - Formula una pregunta que aborde directamente la duda más común
+   - Usa un tono empático y comprensivo
+   - Muestra que entiendes la preocupación
+2. REVELA la pregunta inicial afirmativa (Aborda la preocupación / Valida la duda)
+   - Reformula la duda como una afirmación positiva
+   - Valida que la preocupación es legítima
+   - Muestra comprensión genuina
+3. PROFUNDIZA la pregunta inicial de forma más compleja (Explora el problema subyacente)
+   - Expande la duda inicial a un nivel más profundo
+   - Conecta con las verdaderas motivaciones detrás de la duda
+   - Muestra las consecuencias de no resolver el problema
+4. RESUELVE la pregunta inicial de forma más completa
+   - Ofrece argumentos claros y convincentes
+   - Proporciona datos, testimonios o garantías
+   - Desmonta las objeciones una por una
+5. MENCIONA otro problema relacionado con la pregunta inicial (Amplía la solución)
+   - Conecta la duda inicial con un problema más profundo (o un beneficio adicional)
+   - Muestra cómo están interrelacionados
+   - Explica por qué resolver ambos es importante
+6. RESOLUCIÓN FINAL: presenta las respuestas con explicación
+   - Ofrece una solución integral que aborde todos los puntos
+   - Personaliza la respuesta según el perfil del cliente
+   - Destaca los beneficios específicos y tangibles
+7. FINALIZA con un llamado a la acción
+   - Proporciona un siguiente paso claro y sencillo
+   - Reduce la fricción para tomar acción
+   - Añade un elemento de urgencia o exclusividad
+   - Refuerza la confianza en la decisión
+
+*Elementos clave:*
+- Empatía genuina con las preocupaciones del cliente
+- Argumentos basados en beneficios, no solo características
+- Personalización según el perfil específico del cliente
+- Reducción de la fricción para tomar la siguiente acción
+- Refuerzo de la confianza en la decisión de compra
+
+*Examples:*
+1.  Duda Principal: precio del maquillaje
+    Nicho: productos de belleza premium
+    Script:
+    ¿Por qué el maquillaje no dura todo el día aunque uses primer?
+
+    Porque el uso de productos adecuados para tu tipo de piel es fundamental para la duración. ¡No es magia, es ciencia!
+
+    Tu maquillaje no dura porque tu rutina no está pensada para tu tipo de piel específico. Cada piel necesita diferentes fijadores.
+    * Si tienes piel grasa necesitas un primer matificante.
+    * Si tienes piel seca, uno hidratante.
+    Y claro, esto afecta el tipo de base y fijador que usas.
+
+    Además, muchas veces ignoramos que los productos que usamos no son compatibles entre sí, lo que provoca que se absorban mal... y esto sabotea toda tu rutina. ¡Un desastre!
+
+    Usando los productos graduados, enfocados en tu tipo específico de piel y compatibles entre sí, lograrás que tu maquillaje dure y luzca mejor.
+
+    Ven a nuestra tienda, te ayudamos a armar tu rutina personalizada y encontrarás todos los productos que hacen que tu maquillaje dure. ¡Te esperamos!
+
+2.  Duda Principal: efectividad de un programa de fitness
+    Nicho: entrenamiento personal online
+    Script:
+    ¿Por qué los programas de ejercicio que has probado no te dan resultados visibles? ¿Frustrante, verdad?
+
+    Porque la mayoría de los programas genéricos no consideran tu metabolismo único ni tu historial físico. ¡No eres un robot!
+
+    Tu cuerpo no responde porque estás siguiendo rutinas diseñadas para el promedio, no para tu composición corporal específica y tus objetivos reales.
+    * Cada cuerpo necesita diferentes estímulos.
+    * Si tienes un metabolismo lento necesitas más entrenamiento HIIT.
+    * Si tienes articulaciones sensibles, necesitas ejercicios de bajo impacto con mayor resistencia.
+    Además, tu alimentación debe sincronizarse con tus horarios de entrenamiento. ¡Es un todo!
+
+    Muchas personas también ignoran que el estrés y la falta de sueño bloquean los resultados, haciendo que incluso el mejor programa falle si estos factores no se abordan.
+
+    Con un programa personalizado que considere tu metabolismo, historial físico, horarios y factores de estilo de vida, verás resultados desde las primeras 3 semanas, garantizado.
+
+    Agenda ahora tu evaluación gratuita en el link de mi bio y diseñaremos juntos tu plan personalizado con garantía de resultados o te devolvemos tu inversión. ¡Sin excusas!
+
+3.  Duda Principal: aprender un nuevo idioma
+    Nicho: cursos de idiomas para profesionales
+    Script:
+    ¿Por qué no has podido aprender inglés a pesar de intentarlo varias veces? ¿Te suena familiar?
+
+    Porque los métodos tradicionales no se adaptan a cómo tu cerebro adulto procesa realmente un nuevo idioma. ¡No es tu culpa!
+
+    Tu cerebro no retiene el idioma porque estás utilizando técnicas diseñadas para niños o estudiantes con tiempo ilimitado, no para profesionales ocupados con objetivos específicos.
+    * Cada persona tiene un estilo de aprendizaje único.
+    * Si eres visual, necesitas mapas mentales y videos.
+    * Si eres auditivo, podcasts y conversaciones.
+    Además, tu cerebro adulto necesita contextos relevantes a tu profesión para crear conexiones duraderas.
+
+    Muchos estudiantes también ignoran que la consistencia en sesiones cortas (20 minutos diarios) supera ampliamente a las maratones de estudio semanales, y que la falta de práctica conversacional real bloquea la fluidez.
+
+    Con nuestro método de Inmersión Contextual Profesional, adaptado a tu estilo de aprendizaje y área profesional, lograrás mantener conversaciones de trabajo en solo 90 días, o extendemos tu acceso sin costo.
+
+    Reserva tu evaluación de nivel y estilo de aprendizaje gratuita esta semana y recibe un plan personalizado con nuestra garantía de fluidez profesional. ¡Es tu momento!
+
+4.  Duda Principal: inversión en marketing digital
+    Nicho: agencia de marketing para pequeñas empresas
+    Script:
+    ¿Por qué tu inversión en publicidad digital no está generando ventas reales para tu negocio? ¿Tirando dinero?
+
+    Porque la mayoría de las campañas se enfocan en métricas vanidosas como impresiones o clics, no en conversiones que generan ingresos. ¡Error común!
+
+    Tu publicidad no convierte porque probablemente está dirigida a una audiencia demasiado amplia, con mensajes genéricos que no resuenan con los dolores específicos de tus clientes ideales.
+    * Cada negocio necesita una estrategia única.
+    * Si vendes productos de alto valor, necesitas campañas educativas de nutrición de leads.
+    * Si ofreces soluciones inmediatas, necesitas campañas de conversión rápida con testimonios.
+    Además, tu embudo de ventas debe estar optimizado ANTES de aumentar el tráfico.
+
+    Muchos negocios también ignoran que el 98% de los visitantes no compran en la primera visita, pero no implementan sistemas de remarketing efectivos ni nutrición por email, desperdiciando su inversión inicial.
+
+    Con nuestra metodología ROI-First, primero optimizamos tu embudo de conversión y luego escalamos el tráfico, garantizando un retorno mínimo de 3x sobre tu inversión en los primeros 60 días.
+
+    Agenda tu diagnóstico gratuito de marketing esta semana y recibe un análisis de tu embudo actual con recomendaciones accionables, sin compromiso. ¡Hablemos de resultados!
+
+--- FIN DE DESCRIPCIÓN DE FÓRMULAS DE REELS ---
+
+`; // Ensured a newline before the closing backtick
+// END OF REEL_BOT_SYSTEM_INSTRUCTION
+
+export const NEW_CHAT_ID = "_new_chat_";
+
+export const SUGGESTION_PROMPTS: { text: string }[] = [
+  { text: "¿Cuáles son tus funciones?" },
+  { text: "¿Cómo puedo crear un reel para mi negocio?" },
+  { text: "La estructura de un buen reel" },
+  { text: "¿Qué fórmula de reel usar?" },
+];
+
+// Re-add the old SYSTEM_INSTRUCTION as a fallback or for other purposes if needed,
+// but REEL_BOT_SYSTEM_INSTRUCTION should be the primary one for the core ReelBot functionality.
+export const SYSTEM_INSTRUCTION_FALLBACK = "You are RoboCopy, an expert in creating viral Reels that convert views into customers. You help users create effective Reels by providing ideas, structures, and formulas. Keep your responses concise, actionable, and engaging. Use Markdown formatting (like **bold** for emphasis, *italics*, and bullet points using '-' or '*') to structure your answers for better readability. If the user explicitly asks for sources, or for information that is very recent or where verifiability is crucial, use Google Search grounding. When you use search and intend to cite, include a clear heading like 'Sources:' or 'Fuentes:' in your response before listing any information derived from them. Otherwise, prioritize direct and succinct answers without a dedicated sources section unless it's essential for the query.";

index.html

@@ -0,0 +1,112 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Reel Creator AI</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    /* Custom scrollbar for webkit browsers */
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: #2d3748; /* slate-800 */
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #4a5568; /* slate-600 */
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: #718096; /* slate-500 */
+    }
+    /* Basic body styling for dark theme */
+    body {
+      font-family: 'Inter', sans-serif; /* Using a common sans-serif font */
+      background-color: #111827; /* gray-900 */
+      color: #f3f4f6; /* gray-100 */
+    }
+    /* Add Inter font from Google Fonts (optional, Tailwind uses system fonts by default) */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+    /* Styles for Markdown content */
+    .markdown-content strong, .markdown-content b {
+      font-weight: bold;
+    }
+    .markdown-content em, .markdown-content i {
+      font-style: italic;
+    }
+    .markdown-content ul {
+      list-style-type: disc;
+      margin-left: 1.5rem;
+      padding-left: 0.5rem;
+    }
+    .markdown-content ol {
+      list-style-type: decimal;
+      margin-left: 1.5rem;
+      padding-left: 0.5rem;
+    }
+    .markdown-content li {
+      margin-bottom: 0.25rem;
+    }
+    .markdown-content p {
+      margin-bottom: 0.5rem;
+    }
+     .markdown-content p:last-child {
+      margin-bottom: 0;
+    }
+    .markdown-content code {
+      background-color: #2d3748; /* slate-700 */
+      padding: 0.125rem 0.25rem;
+      border-radius: 0.25rem;
+      font-family: 'Courier New', Courier, monospace;
+    }
+    .markdown-content pre {
+      background-color: #1f2937; /* slate-800 */
+      padding: 0.75rem;
+      border-radius: 0.375rem;
+      overflow-x: auto;
+      margin-bottom: 0.5rem;
+    }
+    .markdown-content pre code {
+      background-color: transparent;
+      padding: 0;
+    }
+    .markdown-content blockquote {
+      border-left: 4px solid #4a5568; /* slate-600 */
+      padding-left: 1rem;
+      margin-left: 0;
+      font-style: italic;
+      color: #9ca3af; /* slate-400 */
+    }
+    .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6 {
+      font-weight: bold;
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+    }
+    .markdown-content h1 { font-size: 1.875rem; } /* text-3xl */
+    .markdown-content h2 { font-size: 1.5rem; }    /* text-2xl */
+    .markdown-content h3 { font-size: 1.25rem; }   /* text-xl */
+
+  </style>
+<script type="importmap">
+{
+  "imports": {
+    "react-dom/": "https://esm.sh/react-dom@^19.1.0/",
+    "react/": "https://esm.sh/react@^19.1.0/",
+    "react": "https://esm.sh/react@^19.1.0",
+    "@google/genai": "https://esm.sh/@google/genai@^1.3.0",
+    "marked": "https://esm.sh/marked@^13.0.2"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="bundle.js"></script>
+<script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App'; // Changed to relative import
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,6 @@
+{
+  "name": "Copy ReelBot 05Jun",
+  "description": "An AI-powered assistant to help you create viral Reels. Get ideas, structure, and formulas for your Reels, and save your chat sessions.",
+  "requestFramePermissions": [],
+  "prompt": ""
+}

package.json

@@ -0,0 +1,14 @@
+
+{
+  "name": "reel-creator-ai",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "echo \"Para desarrollo, sirve index.html con un live server. Asegúrate de que la variable de entorno API_KEY esté disponible si pruebas la funcionalidad de Gemini.\"",
+    "build": "rm -rf dist && mkdir -p dist && cp index.html dist/index.html && esbuild index.tsx --bundle --outfile=dist/bundle.js --define:process.env.API_KEY=\\\"$API_KEY\\\" --platform=browser --format=esm --jsx=automatic",
+    "postbuild": "echo \"Build completo. El contenido estático está en la carpeta dist/\""
+  },
+  "devDependencies": {
+    "esbuild": "^0.20.2"
+  }
+}

services/geminiService.ts

@@ -0,0 +1,119 @@
+
+import { GoogleGenAI, Chat, HarmCategory, HarmBlockThreshold, GenerateContentResponse, Part, Content } from "@google/genai";
+import { MODEL_NAME } from '../constants'; // Updated import, REEL_BOT_SYSTEM_INSTRUCTION removed as not directly used here
+import type { GroundingChunk, UploadedFile } from '../types';
+
+const API_KEY = process.env.API_KEY;
+
+if (!API_KEY) {
+  console.error("API_KEY for Gemini is not set. Please set the API_KEY environment variable.");
+}
+
+const ai = new GoogleGenAI({ apiKey: API_KEY! });
+
+const generationConfigValues = {
+  temperature: 0.7,
+  topK: 1,
+  topP: 1,
+  maxOutputTokens: 4096, 
+};
+
+const safetySettingsList = [
+  { category: HarmCategory.HARM_CATEGORY_HARASSMENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE },
+  { category: HarmCategory.HARM_CATEGORY_HATE_SPEECH, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE },
+  { category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE },
+  { category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE },
+];
+
+async function createChatSessionWithHistory(systemInstructionText: string, history: Content[]): Promise<Chat> {
+  const filteredHistory = history.filter(content => content.role !== "system");
+  
+  return ai.chats.create({
+    model: MODEL_NAME,
+    history: filteredHistory,
+    config: {
+      systemInstruction: systemInstructionText,
+      temperature: generationConfigValues.temperature,
+      topK: generationConfigValues.topK,
+      topP: generationConfigValues.topP,
+      maxOutputTokens: generationConfigValues.maxOutputTokens,
+      safetySettings: safetySettingsList,
+      tools: [{ googleSearch: {} }],
+      // thinkingConfig: { thinkingBudget: 0 }, // Kept commented: allow default thinking for complex prompt
+    }
+  });
+}
+
+async function* sendMessageStream(
+  chat: Chat, 
+  messageText: string,
+  imageFile?: UploadedFile 
+): AsyncGenerator<{ text: string; groundingChunks?: GroundingChunk[] }, void, undefined> {
+  try {
+    const parts: Part[] = [];
+    const userProvidedText = messageText.trim();
+
+    if (imageFile) {
+        if (imageFile.dataUrl && imageFile.type.startsWith('image/')) { 
+            const base64Data = imageFile.dataUrl.split(',')[1];
+            if (base64Data) {
+                if (!userProvidedText) {
+                    parts.push({ text: "Describe this image" }); 
+                } else {
+                    parts.push({ text: userProvidedText }); 
+                }
+                parts.push({ 
+                    inlineData: {
+                        mimeType: imageFile.type,
+                        data: base64Data,
+                    },
+                });
+            }
+        } else { 
+            const docInfo = `(User uploaded a document: ${imageFile.name})`;
+            if (userProvidedText) {
+                parts.push({ text: `${userProvidedText}\n${docInfo}` });
+            } else {
+                parts.push({ text: docInfo });
+            }
+        }
+    } else { 
+        if (userProvidedText) {
+            parts.push({ text: userProvidedText });
+        }
+    }
+
+    if (parts.length === 0) {
+         parts.push({ text: " " }); 
+    }
+    
+    const result = await chat.sendMessageStream({ message: parts }); 
+    for await (const chunk of result) { 
+      const text = chunk.text; 
+      const groundingMetadata = chunk.candidates?.[0]?.groundingMetadata;
+      let groundingChunks: GroundingChunk[] | undefined = undefined;
+      if (groundingMetadata?.groundingChunks && groundingMetadata.groundingChunks.length > 0) {
+          groundingChunks = groundingMetadata.groundingChunks
+              .filter(gc => gc.web?.uri && gc.web?.title) 
+              .map(gc => ({ web: { uri: gc.web!.uri, title: gc.web!.title } }));
+      }
+      yield { text, groundingChunks };
+    }
+  } catch (error) {
+    console.error("Error in sendMessageStream:", error);
+    if (error instanceof Error) {
+        yield { text: `\n\n[AI Error: ${error.message}]` };
+    } else {
+        yield { text: `\n\n[An unexpected AI error occurred]` };
+    }
+    throw error;
+  }
+}
+
+// generateChatName function removed
+
+export const geminiService = {
+  createChatSessionWithHistory,
+  sendMessageStream,
+  // generateChatName removed from exports
+};

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "@/*" :  ["./*"]
+    }
+  }
+}

types.ts

@@ -0,0 +1,44 @@
+import { Chat } from "@google/genai";
+
+export type MessageSender = 'user' | 'model';
+
+export interface UploadedFile {
+  name: string;
+  type: string; // MIME type
+  size: number;
+  dataUrl?: string; // For image previews (base64) or to send to Gemini
+  // rawFile?: File; // Transient, for processing, not for storage ideally
+}
+
+export interface ChatMessage {
+  id: string;
+  text: string;
+  sender: MessageSender;
+  timestamp: number;
+  isStreaming?: boolean;
+  error?: string;
+  groundingChunks?: GroundingChunk[];
+  file?: UploadedFile; // To store info about an attached file
+}
+
+export interface ChatSession {
+  id: string;
+  name: string;
+  messages: ChatMessage[];
+  createdAt: number;
+  // geminiChatInstance is transient, not stored in localStorage directly
+}
+
+// Structure for grounding metadata from Gemini API
+export interface GroundingChunkWeb {
+  uri: string;
+  title: string;
+}
+export interface GroundingChunk {
+  web: GroundingChunkWeb;
+}
+
+// Keep this minimal, actual API Key is from process.env
+export interface GeminiServiceConfig {
+  apiKey?: string; // Optional here as it's primarily from env
+}

vite.config.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});